### FlexRender CLI Usage (Bash)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Provides examples of using the FlexRender command-line interface for rendering templates. It includes commands for single rendering and for watching files for automatic re-renders.

```bash
# Render template to PNG
flexrender render hello.yaml -d data.json -o hello.png

# Watch mode -- auto re-render on file changes
flexrender watch hello.yaml -d data.json -o preview.png
```

--------------------------------

### Install FlexRender Core, YAML, and Skia Renderer (Bash)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Installs specific FlexRender packages: core for layout, YAML for parsing, and Skia for rendering. This is an example of installing individual packages.

```bash
dotnet add package FlexRender.Core
dotnet add package FlexRender.Yaml
dotnet add package FlexRender.Skia.Render
```

--------------------------------

### Configuring Sandboxed Mode in C#

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Demonstrates how to configure FlexRender in sandboxed mode to restrict file system access, using `WithoutDefaultLoaders` and `WithEmbeddedLoader` for enhanced security.

```csharp
var render = new FlexRenderBuilder()
    .WithoutDefaultLoaders()                      // Remove file and base64 loaders
    .WithEmbeddedLoader(typeof(Program).Assembly)  // Only embedded resources
    .WithSkia()
    .Build();
```

--------------------------------

### Configure FlexRender with Dependency Injection (C#)

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Demonstrates how to configure FlexRender using dependency injection in a .NET application. It shows basic configuration and advanced setup using a service provider to load templates from a specified base path. The example also includes how to inject and use the IFlexRender service in a custom class.

```csharp
// Program.cs - simple
services.AddFlexRender(builder => builder
    .WithSkia(skia => skia.WithQr().WithBarcode()));

// Program.cs - with service provider
services.AddFlexRender((sp, builder) =>
{
    var config = sp.GetRequiredService<IConfiguration>();
    var basePath = config["FlexRender:BasePath"] ?? "./templates";

    builder
        .WithHttpLoader()
        .WithBasePath(basePath)
        .WithSkia(skia => skia
            .WithQr()
            .WithBarcode());
});

// In your service
public class ReceiptService(IFlexRender render)
{
    public async Task<byte[]> Generate(ReceiptData data)
    {
        var values = MapToObjectValue(data);
        return await render.RenderFile("receipt.yaml", values);
    }
}
```

--------------------------------

### Add New Example to Wiki Documentation (Markdown)

Source: https://github.com/robonet/flexrender/blob/main/examples/visual-docs/README.md

This markdown snippet shows how to add a reference to a newly generated visual example in the consolidated wiki documentation page. It includes the feature name, a description, and a link to the generated PNG image.

```markdown
| `your-feature` | Description | ![your-feature](https://media.githubusercontent.com/media/RoboNET/FlexRender/main/examples/visual-docs/output/category-your-feature.png) |
```

--------------------------------

### Legacy Format Parameter Rendering in C#

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Shows how to use the legacy `RenderFile` method with an `ImageFormat` parameter for rendering template files to PNG or JPEG.

```csharp
byte[] png = await render.RenderFile("template.yaml", data, ImageFormat.Png);
byte[] jpeg = await render.RenderFile("template.yaml", data, ImageFormat.Jpeg);
```

--------------------------------

### Convenience File Rendering Methods in C#

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Provides convenience extension methods for rendering template files directly to PNG or JPEG formats using FlexRender.yaml.

```csharp
byte[] png = await render.RenderFileToPng("template.yaml", data);
byte[] jpeg = await render.RenderFileToJpeg("template.yaml", data,
    new JpegOptions { Quality = 85 });
```

--------------------------------

### Install SkiaSharp Native Assets for Linux (Bash)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Installs native libraries required by SkiaSharp on Linux to prevent DllNotFoundException. Includes options for minimal containers and HarfBuzz support.

```bash
dotnet add package SkiaSharp.NativeAssets.Linux
dotnet add package SkiaSharp.NativeAssets.Linux.NoDependencies
dotnet add package HarfBuzzSharp.NativeAssets.Linux
```

--------------------------------

### Install FlexRender Meta Packages (dotnet CLI)

Source: https://github.com/robonet/flexrender/blob/main/README.md

Commands to install meta packages for FlexRender, which bundle all renderers for a specific feature (QrCode, Barcode, SvgElement). This simplifies dependency management for common use cases.

```bash
dotnet add package FlexRender.QrCode
dotnet add package FlexRender.Barcode
dotnet add package FlexRender.SvgElement
```

--------------------------------

### Register FlexRender with Dependency Injection (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Demonstrates how to register IFlexRender as a singleton in a .NET application's dependency injection container. It shows basic configuration with a base path and Skia backend, as well as advanced configuration using IConfiguration.

```csharp
// Program.cs -- register IFlexRender as singleton
services.AddFlexRender(builder => builder
    .WithBasePath("/app/templates")
    .WithSkia(skia => skia
        .WithQr()
        .WithBarcode()));

// In your service -- inject IFlexRender
public class GreetingService(IFlexRender render) {
    public async Task<byte[]> GenerateGreeting(string name) {
        var data = new ObjectValue { ["name"] = name };
        return await render.RenderFile("hello.yaml", data);
    }
}
```

```csharp
services.AddFlexRender((sp, builder) =>
{
    var config = sp.GetRequiredService<IConfiguration>();
    builder
        .WithBasePath(config["FlexRender:BasePath"] ?? "./templates")
        .WithSkia(skia => skia.WithQr().WithBarcode());
});
```

--------------------------------

### Render YAML Template to PNG using FlexRenderBuilder (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Demonstrates rendering a YAML template to a PNG image using the FlexRenderBuilder with the Skia backend. It configures the renderer, prepares data, and writes the output to a file.

```csharp
using FlexRender;
using FlexRender.Configuration;
using FlexRender.Yaml;

// Build renderer with Skia backend (full features)
var render = new FlexRenderBuilder()
    .WithBasePath("./templates")
    .WithSkia(skia => skia
        .WithQr()
        .WithBarcode())
    .Build();

// Prepare data
var data = new ObjectValue
{
    ["name"] = "World"
};

// Render to PNG bytes (extension method from FlexRender.Yaml)
byte[] png = await render.RenderFile("hello.yaml", data);
await File.WriteAllBytesAsync("hello.png", png);
```

--------------------------------

### Template Caching for High Throughput in C#

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Illustrates how to parse a template once and render it multiple times with different data for high-throughput scenarios, improving performance by avoiding repeated parsing.

```csharp
// Parse once (at startup)
var parser = new TemplateParser();
_templates["receipt"] = await parser.ParseFileAsync("receipt.yaml");

// Render many times (per request)
byte[] png = await render.Render(_templates["receipt"], data);
```

--------------------------------

### Example Image URL using Git LFS

Source: https://github.com/robonet/flexrender/blob/main/AGENTS.md

An example of how to correctly reference an image file tracked by Git LFS in documentation. This URL format ensures the actual image content is served, not the LFS pointer file.

```text
https://media.githubusercontent.com/media/RoboNET/FlexRender/main/examples/output/receipt.png
```

--------------------------------

### Regenerate Single Visual Example (Bash)

Source: https://github.com/robonet/flexrender/blob/main/examples/visual-docs/README.md

This command regenerates a single visual documentation PNG file by specifying the exact YAML template and output path. It's the most granular way to update a specific example using the FlexRender CLI.

```bash
cd examples/visual-docs
dotnet run --project ../../src/FlexRender.Cli --no-build --framework net8.0 -- \
  render align/center.yaml -o output/align-center.png
```

--------------------------------

### Configure ImageSharp Rendering Backend (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Demonstrates configuring the ImageSharp rendering backend, which provides pure .NET rendering without native dependencies. This backend supports QR codes and barcodes but lacks SVG element support and HarfBuzz text shaping.

```csharp
var render = new FlexRenderBuilder()
    .WithImageSharp(imageSharp => imageSharp
        .WithQr()        // QR code support
        .WithBarcode())  // Barcode support
    .Build();
```

--------------------------------

### Install FlexRender CLI Tool

Source: https://github.com/robonet/flexrender/wiki/Home

Installs the FlexRender command-line interface tool globally, enabling rendering, validation, watching, and debugging of templates.

```bash
dotnet tool install -g flexrender-cli
```

--------------------------------

### FlexRenderBuilder Usage Examples (C#)

Source: https://github.com/robonet/flexrender/wiki/API-Reference

Demonstrates how to use the FlexRenderBuilder to configure and create IFlexRender instances. Examples cover minimal configuration, full configuration with various loaders and options, and a sandboxed mode.

```csharp
// Minimal
var render = new FlexRenderBuilder()
    .WithSkia()
    .Build();

// Full configuration
var render = new FlexRenderBuilder()
    .WithHttpLoader(configure: opts => {
        opts.Timeout = TimeSpan.FromSeconds(60);
        opts.MaxResourceSize = 20 * 1024 * 1024;
    })
    .WithEmbeddedLoader(typeof(Program).Assembly)
    .WithBasePath("./templates")
    .WithLimits(limits => limits.MaxRenderDepth = 200)
    .WithSkia(skia => skia
        .WithQr()
        .WithBarcode())
    .Build();

// Sandboxed (no file system access)
var render = new FlexRenderBuilder()
    .WithoutDefaultLoaders()
    .WithEmbeddedLoader(typeof(Program).Assembly)
    .WithSkia()
    .Build();
```

--------------------------------

### Basic Rendering with FlexRenderBuilder in C#

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Provides a basic example of using the FlexRenderBuilder to set up a renderer, specify a base path for templates, configure Skia rendering with QR code support, and then render a file with provided data.

```csharp
var render = new FlexRenderBuilder()
    .WithBasePath("./templates")
    .WithSkia(skia => skia.WithQr())
    .Build();

var data = new ObjectValue { ["name"] = "World" };
byte[] png = await render.RenderFile("template.yaml", data);
```

--------------------------------

### Minimal FlexRender Builder Configuration (C#)

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Shows the basic setup for FlexRender using the Builder API without dependency injection. It initializes the renderer with Skia support and demonstrates parsing YAML and rendering to PNG.

```csharp
var render = new FlexRenderBuilder()
    .WithSkia()
    .Build();

var parser = new TemplateParser();
var template = parser.Parse(yaml);
byte[] png = await render.Render(template, data);
```

--------------------------------

### Integrate FlexRender with Dependency Injection (.NET)

Source: https://github.com/robonet/flexrender/blob/main/llms.txt

Illustrates how to set up FlexRender within a .NET application using dependency injection. This example shows service registration with Skia backend and injecting `IFlexRender` into a service for rendering.

```csharp
services.AddFlexRender(builder => builder
    .WithBasePath("/app/templates")
    .WithSkia(skia => skia.WithQr().WithBarcode()));

// Inject IFlexRender
public class MyService(IFlexRender render)
{
    public Task<byte[]> Generate(ObjectValue data)
        => render.RenderFile("template.yaml", data);
}
```

--------------------------------

### Running Tests with .NET CLI

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Demonstrates how to execute tests using the .NET CLI, including running all tests, filtering by class or method, and regenerating snapshot tests.

```bash
dotnet test                           # Run all tests
dotnet test --filter "ClassName"      # Filter by test class
dotnet test --filter "MethodName"     # Filter by test method
UPDATE_SNAPSHOTS=true dotnet test     # Regenerate golden snapshots
```

--------------------------------

### Format-Specific Rendering Methods in C#

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Demonstrates using FlexRender's format-specific methods to render templates to various image formats (PNG, JPEG, BMP, Raw BGRA) with customizable options. Supports culture-specific formatting.

```csharp
byte[] png = await render.RenderToPng(template, data);

byte[] jpeg = await render.RenderToJpeg(template, data,
    new JpegOptions { Quality = 75 });

byte[] bmp = await render.RenderToBmp(template, data,
    new BmpOptions { ColorMode = BmpColorMode.Monochrome1 },
    new RenderOptions { Antialiasing = false });

byte[] raw = await render.RenderToRaw(template, data);

byte[] localized = await render.RenderToPng(template, data,
    renderOptions: new RenderOptions { Culture = new CultureInfo("ru-RU") });
```

--------------------------------

### Build and Test FlexRender Solution (Bash)

Source: https://github.com/robonet/flexrender/blob/main/docs/plans/2026-02-08-provider-restructuring-plan.md

Commands to navigate to the project directory, build the entire solution, and run all unit tests. This is a standard procedure to verify code integrity after modifications.

```bash
cd /Users/robonet/Projects/SkiaLayout && dotnet build FlexRender.slnx && dotnet test FlexRender.slnx
```

--------------------------------

### Configure SVG Rendering Backend (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Illustrates configuring the SVG rendering backend for FlexRender. This backend outputs scalable vector graphics and can optionally include a Skia raster fallback for PNG/JPEG output. It supports vector QR codes and barcodes.

```csharp
// SVG-only (vector output, no native dependencies)
var render = new FlexRenderBuilder()
    .WithSvg(svg => svg
        .WithQrSvg()           // Vector QR codes
        .WithBarcodeSvg()      // Vector barcodes
        .WithSvgElementSvg())  // Inline SVG elements
    .Build();
```

```csharp
// SVG + Skia raster fallback (also supports PNG/JPEG)
var render = new FlexRenderBuilder()
    .WithSvg(svg => svg
        .WithQrSvg()
        .WithBarcodeSvg()
        .WithSkia(skia => skia
            .WithQr()
            .WithBarcode()))
    .Build();
```

--------------------------------

### Configure Skia Rendering Backend (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Shows how to configure the Skia rendering backend for FlexRender. This backend offers high-quality rendering and supports features like QR codes, barcodes, and inline SVG elements. It requires native assets on Linux.

```csharp
var render = new FlexRenderBuilder()
    .WithSkia(skia => skia
        .WithQr()        // QR code support
        .WithBarcode()   // Barcode support
        .WithSvgElement()) // Inline SVG elements
    .Build();
```

--------------------------------

### Full FlexRender Builder Configuration (C#)

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Illustrates a comprehensive configuration of the FlexRender Builder API, including custom resource loaders (HTTP, embedded), base path for templates, rendering limits, and Skia-specific features like QR and barcode support. It also shows how to render files directly.

```csharp
var render = new FlexRenderBuilder()
    .WithHttpLoader(httpClient)                   // HTTP resource loading
    .WithEmbeddedLoader(typeof(Program).Assembly) // Embedded resources
    .WithBasePath("./templates")                  // Base path for files
    .WithLimits(limits => limits.MaxRenderDepth = 200)
    .WithSkia(skia => skia
        .WithQr()                                 // QR code support
        .WithBarcode())                           // Barcode support
    .Build();

// Extension from FlexRender.Yaml
byte[] png = await render.RenderFile("receipt.yaml", data);
byte[] jpg = await render.RenderFile("receipt.yaml", data, ImageFormat.Jpeg);
byte[] raw = await render.RenderFile("receipt.yaml", data, ImageFormat.Raw);
```

--------------------------------

### FlexRender Builder API Configuration (C#)

Source: https://github.com/robonet/flexrender/blob/main/llms.txt

Demonstrates how to configure and build a FlexRender instance using its C# API. This includes setting up HTTP loaders, base paths, resource limits, and Skia rendering options.

```csharp
var render = new FlexRenderBuilder()
    .WithHttpLoader(configure: opts => {
        opts.Timeout = TimeSpan.FromSeconds(60);
        opts.MaxResourceSize = 20 * 1024 * 1024;
    })
    .WithBasePath("./templates")
    .WithLimits(limits => limits.MaxRenderDepth = 200)
    .WithSkia(skia => skia
        .WithQr()
        .WithBarcode()
        .WithHarfBuzz())
    .Build();

byte[] png = await render.RenderFile("receipt.yaml", data);
```

--------------------------------

### Render YAML Template to PNG using ImageSharp Backend (C#)

Source: https://github.com/robonet/flexrender/wiki/Getting-Started

Shows how to render a YAML template to PNG using FlexRenderBuilder with the ImageSharp backend, which is a pure .NET solution without native dependencies. It supports QR codes and barcodes but not SVG elements.

```csharp
var render = new FlexRenderBuilder()
    .WithBasePath("./templates")
    .WithImageSharp(imageSharp => imageSharp.WithQr().WithBarcode())
    .Build();

byte[] png = await render.RenderFile("hello.yaml", data);
```

--------------------------------

### Build Sandboxed FlexRender Instance (C#)

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Illustrates how to create a FlexRender instance without file system access. This is useful for sandboxed environments where only embedded resources should be loaded. It configures the builder to use an embedded loader and enables Skia rendering with QR code support.

```csharp
var render = new FlexRenderBuilder()
    .WithoutDefaultLoaders()
    .WithEmbeddedLoader(typeof(Program).Assembly)
    .WithSkia(skia => skia.WithQr())
    .Build();
```

--------------------------------

### Configure Resource Limits in C#

Source: https://github.com/robonet/flexrender/blob/main/llms-full.txt

Demonstrates how to directly instantiate and configure ResourceLimits or use a builder pattern to set various security and resource constraints for rendering operations. These limits prevent abuse and resource exhaustion.

```csharp
var limits = new ResourceLimits
{
    MaxRenderDepth = 200,
    MaxTemplateFileSize = 2 * 1024 * 1024
};
using var renderer = new SkiaRenderer(limits);
```

```csharp
builder.WithLimits(limits =>
{
    limits.MaxRenderDepth = 200;
    limits.MaxTemplateFileSize = 2 * 1024 * 1024;
});
```

--------------------------------

### YAML Template Structure for New Examples

Source: https://github.com/robonet/flexrender/blob/main/examples/visual-docs/README.md

This is a basic structure for a YAML template used to create new visual documentation examples. It defines the template name, version, default font, canvas settings, and the layout for the example.

```yaml
template:
  name: "category-feature"
  version: 1

fonts:
  default: "../../assets/fonts/Inter-Regular.ttf"

canvas:
  fixed: width
  width: 400
  background: "#ffffff"

layout:
  # Your example layout
```

--------------------------------

### Example Commit Messages (Conventional Commits)

Source: https://github.com/robonet/flexrender/wiki/Contributing

Examples of commit messages following the Conventional Commits specification. This format helps in automating changelog generation and understanding the nature of changes at a glance.

```git
feat(parser): add barcode element support
fix(layout): correct flex-basis resolution for percentage values
refactor(renderer): extract text measurement into delegate
test(layout): add wrap-reverse alignment tests
```

--------------------------------

### FlexRender.QrCode.Core Project Configuration (XML)

Source: https://github.com/robonet/flexrender/blob/main/docs/plans/2026-02-08-provider-restructuring-plan.md

This XML file defines the project configuration for FlexRender.QrCode.Core. It specifies the package ID, description, AOT compatibility, and internal visibility settings for tests. It also includes project references to FlexRender.Core and a NuGet package reference to QRCoder.

```xml
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <PackageId>FlexRender.QrCode.Core</PackageId>
    <Description>Backend-neutral QR code encoding logic for FlexRender. No rendering dependencies.</Description>
    <IsAotCompatible>true</IsAotCompatible>
  </PropertyGroup>

  <ItemGroup>
    <InternalsVisibleTo Include="FlexRender.Tests" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\FlexRender.Core\FlexRender.Core.csproj" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="QRCoder" />
  </ItemGroup>

</Project>

```

--------------------------------

### Build Project with DotNet CLI (Bash)

Source: https://github.com/robonet/flexrender/blob/main/docs/plans/2026-02-08-provider-restructuring-plan.md

This command builds the entire solution located at `/Users/robonet/Projects/SkiaLayout`. It is used to initially test the compilation after code changes and is expected to fail if the new interfaces are not yet implemented correctly.

```bash
cd /Users/robonet/Projects/SkiaLayout && dotnet build FlexRender.slnx
```

--------------------------------

### Regenerate Single Category Examples (Bash)

Source: https://github.com/robonet/flexrender/blob/main/examples/visual-docs/README.md

This script regenerates all PNG images for a specific category (e.g., 'align') by iterating through its YAML files and using the FlexRender CLI. It's useful for updating examples within a particular feature set.

```bash
# Example: regenerate all align examples
cd examples/visual-docs
for yaml in align/*.yaml; do
  basename=$(basename "$yaml" .yaml)
  output="output/align-${basename}.png"
  dotnet run --project ../../src/FlexRender.Cli --no-build --framework net8.0 -- render "$yaml" -o "$output"
done
```

--------------------------------

### Build and Test Project with DotNet CLI (Bash)

Source: https://github.com/robonet/flexrender/blob/main/docs/plans/2026-02-08-provider-restructuring-plan.md

This command first builds the solution and then runs all tests in the `tests/FlexRender.Tests` project without restoring packages. It is used to verify that the implemented changes compile successfully and that all existing tests pass, indicating the refactoring did not introduce regressions.

```bash
cd /Users/robonet/Projects/SkiaLayout && dotnet build FlexRender.slnx && dotnet test tests/FlexRender.Tests --no-restore
```

--------------------------------

### Regenerate All Visual Examples (Bash)

Source: https://github.com/robonet/flexrender/blob/main/examples/visual-docs/README.md

This script iterates through all YAML files in the visual-docs directory and regenerates their corresponding PNG output images using the FlexRender CLI. It displays the rendering process for each file.

```bash
cd examples/visual-docs

# Regenerate all visual examples
for yaml in */*.yaml; do
  category=$(dirname "$yaml")
  basename=$(basename "$yaml" .yaml)
  output="output/${category}-${basename}.png"

  echo "Rendering: $yaml → $output"
  dotnet run --project ../../src/FlexRender.Cli --no-build --framework net8.0 -- render "$yaml" -o "$output"
done
```

--------------------------------

### Memory Allocation Best Practices with C#

Source: https://github.com/robonet/flexrender/blob/main/AGENTS.md

C# code examples demonstrating memory allocation best practices, including using Span<T>, Memory<T>, ArrayPool<T>, and StringBuilder for efficient resource management.

```csharp
// ArrayPool for temporary buffers
var buffer = ArrayPool<byte>.Shared.Rent(minLength);
try
{
    // use buffer[0..actualLength]
}
finally
{
    ArrayPool<byte>.Shared.Return(buffer);
}

// StringBuilder pooling (consider ObjectPool for high frequency)
var sb = new StringBuilder(estimatedCapacity);
```

--------------------------------

### Build Sandboxed FlexRender Instance (.NET)

Source: https://github.com/robonet/flexrender/blob/main/llms.txt

Demonstrates creating a sandboxed FlexRender instance that restricts file access and customizes loaders and filters. This configuration is useful for security-sensitive environments.

```csharp
var render = new FlexRenderBuilder()
    .WithoutDefaultLoaders()
    .WithoutDefaultFilters()         // Remove all 8 built-in filters (enabled by default)
    .WithFilter(new MyFilter())              // Register custom filters
    .WithEmbeddedLoader(typeof(Program).Assembly)
    .WithSkia()
    .Build();
```

--------------------------------

### Install FlexRender NuGet Package

Source: https://github.com/robonet/flexrender/wiki/Home

Installs the all-in-one FlexRender NuGet package, which includes all necessary components for rendering images from YAML templates.

```bash
dotnet add package FlexRender
```

--------------------------------

### Product Card Layout Example

Source: https://github.com/robonet/flexrender/wiki/Element-Reference

A comprehensive example demonstrating how to use the Flex container to create a product card layout with nested Flex containers for different sections.

```APIDOC
## Complete Example: Product Card Layout

### Description

This example showcases a typical product card structure using nested Flex containers to manage alignment and spacing for different elements like the header, description, and tags.

### YAML Structure

```yaml
- type: flex
  background: "#ffffff"
  padding: "20"
  gap: 12
  width: "300"
  children:
    # Header row with title and price
    - type: flex
      direction: row
      justify: space-between
      align: center
      children:
        - type: text
          content: "{{product.name}}"
          font: bold
          size: 1.2em
          color: "#1a1a1a"
        - type: text
          content: "{{product.price}} $"
          font: bold
          size: 1.2em
          color: "#cc0000"

    # Description
    - type: text
      content: "{{product.description}}"
      size: 0.9em
      color: "#666666"
      maxLines: 3
      overflow: ellipsis

    - type: separator
      style: dashed
      color: "#eeeeee"

    # Tags row
    - type: flex
      direction: row
      gap: 8
      wrap: wrap
      children:
        - type: text
          content: "In Stock"
          size: 0.75em
          color: "#22c55e"
          background: "#f0fdf4"
          padding: "2 8"
        - type: text
          content: "Free Shipping"
          size: 0.75em
          color: "#3b82f6"
          background: "#eff6ff"
          padding: "2 8"
```

### Key Components Used

- **Outer Flex Container**: Manages overall card padding, gap between sections, and width.
- **Header Flex Container**: Uses `direction: row`, `justify: space-between`, and `align: center` to align the product name and price horizontally.
- **Description Text**: Utilizes `maxLines` and `overflow: ellipsis` for concise display.
- **Tags Flex Container**: Employs `direction: row`, `gap`, and `wrap: wrap` to display tags that can wrap to the next line if necessary.
```

--------------------------------

### FlexRenderBuilder API Usage (C#)

Source: https://github.com/robonet/flexrender/blob/main/AGENTS.md

Demonstrates how to use the FlexRenderBuilder API to configure rendering options. It shows examples for both standalone usage without Dependency Injection and integration with Microsoft.Extensions.DependencyInjection. Key configurations include setting up HTTP loaders, base paths, and specific renderers like Skia with QR and barcode support.

```csharp
// Without DI
var render = new FlexRenderBuilder()
    .WithHttpLoader(configure: opts => {
        opts.Timeout = TimeSpan.FromSeconds(60);
        opts.MaxResourceSize = 20 * 1024 * 1024;
    })
    .WithBasePath("./templates")
    .WithSkia(skia => skia
        .WithQr()
        .WithBarcode())
    .Build();

byte[] png = await render.RenderFile("receipt.yaml", data);

// With DI
services.AddFlexRender(builder => builder
    .WithSkia(skia => skia.WithQr().WithBarcode()));
```

--------------------------------

### FlexRender Grid with Wrapping Example

Source: https://github.com/robonet/flexrender/wiki/Element-Reference

A YAML configuration for a flex grid that wraps its items. This example shows how to create a responsive grid layout with specified dimensions and spacing for its children.

```yaml
- type: flex
  direction: row
  wrap: wrap
  gap: 12
  padding: "16"
  width: "340"
  children:
    - type: flex
      width: "100"
      height: "100"
      background: "#e8f5e9"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 1"
          align: center
    - type: flex
      width: "100"
      height: "100"
      background: "#e3f2fd"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 2"
          align: center
    - type: flex
      width: "100"
      height: "100"
      background: "#fff3e0"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 3"
          align: center
    - type: flex
      width: "100"
      height: "100"
      background: "#fce4ec"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 4"
          align: center
    - type: flex
      width: "100"
      height: "100"
      background: "#f3e5f5"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 5"
          align: center
    - type: flex
      width: "100"
      height: "100"
      background: "#e0f7fa"
      padding: "8"
      align: center
      justify: center
      children:
        - type: text
          content: "Cell 6"
          align: center

```

--------------------------------

### Configure Resource Limits Directly

Source: https://github.com/robonet/flexrender/blob/main/AGENTS.md

Shows how to directly instantiate `ResourceLimits` and pass them to a renderer, such as `SkiaRenderer`. This provides an alternative way to set resource constraints when not using the `FlexRenderBuilder`.

```csharp
var limits = new ResourceLimits { MaxRenderDepth = 200 };
using var renderer = new SkiaRenderer(limits);
```