{
  "name": "Watermark",
  "category": "Data Display",
  "subcategory": "Cards & Layout",
  "description": "Repeating diagonal watermark overlay.",
  "thumbnail": "/preview-cards/watermark.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Watermark/Watermark.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Watermark",
    "category": "Data Display",
    "subcategory": "Cards & Layout",
    "description": "Repeating diagonal watermark overlay.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Watermark/Watermark.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Text",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Rotation",
        "type": "int",
        "default": "-22",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Gap",
        "type": "int",
        "default": "100",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "FontSize",
        "type": "int",
        "default": "14",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Opacity",
        "type": "double",
        "default": "0.1",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Basic Watermark",
        "code": "<Watermark Text=\"Confidential\">\n    <Stack Gap=\"4\" Class=\"p-8\">\n        <Lumeo.Text Color=\"foreground\">This document contains sensitive information.</Lumeo.Text>\n    </Stack>\n</Watermark>"
      },
      {
        "title": "Custom Settings",
        "code": "<Watermark Text=\"DRAFT\" Rotation=\"-30\" FontSize=\"20\" Opacity=\"0.15\" Gap=\"120\">\n    <Stack Gap=\"2\" Class=\"p-8\">\n        <Heading Level=\"3\" Size=\"lg\">Draft Document</Heading>\n        <Lumeo.Text Color=\"muted\">This is a work in progress.</Lumeo.Text>\n    </Stack>\n</Watermark>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "watermark",
  "docsUrl": "https://lumeo.nativ.sh/components/watermark",
  "sourceUrl": [
    {
      "file": "UI/Watermark/Watermark.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Watermark/Watermark.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Watermark/Watermark.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n    <div class=\"pointer-events-none absolute inset-0 z-10\"\n         style=\"background-image: url('data:image/svg+xml,@(EncodedSvg)'); background-repeat: repeat;\">\n    </div>\n</div>\n\n@code {\n    [Parameter] public string? Text { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public int Rotation { get; set; } = -22;\n    [Parameter] public int Gap { get; set; } = 100;\n    [Parameter] public int FontSize { get; set; } = 14;\n    [Parameter] public double Opacity { get; set; } = 0.1;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"relative {Class}\".Trim();\n\n    private string EncodedSvg\n    {\n        get\n        {\n            if (string.IsNullOrEmpty(Text)) return \"\";\n\n            var textLength = Text.Length * FontSize * 0.6;\n            var svgWidth = Math.Max(Gap + textLength, 200);\n            var svgHeight = Math.Max(Gap + FontSize * 2, 100);\n\n            var svg = $\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"{svgWidth}\\\" height=\\\"{svgHeight}\\\">\" +\n                      $\"<text x=\\\"50%\\\" y=\\\"50%\\\" text-anchor=\\\"middle\\\" dominant-baseline=\\\"middle\\\" \" +\n                      $\"font-size=\\\"{FontSize}\\\" fill=\\\"currentColor\\\" opacity=\\\"{Opacity.ToString(System.Globalization.CultureInfo.InvariantCulture)}\\\" \" +\n                      $\"transform=\\\"rotate({Rotation} {svgWidth / 2} {svgHeight / 2})\\\">\" +\n                      $\"{System.Net.WebUtility.HtmlEncode(Text)}</text></svg>\";\n\n            return Uri.EscapeDataString(svg);\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Watermark",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Watermark/WatermarkTests.cs"
  ],
  "mdSummary": "# Watermark\n\nRepeating diagonal watermark overlay.\n\n**Package:** `Lumeo` · **Category:** Data Display/Cards & Layout\n**Docs:** https://lumeo.nativ.sh/components/watermark\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Watermark | Text | `string?` | `` |  |\n| Watermark | ChildContent | `RenderFragment?` | `` |  |\n| Watermark | Rotation | `int` | `-22` |  |\n| Watermark | Gap | `int` | `100` |  |\n| Watermark | FontSize | `int` | `14` |  |\n| Watermark | Opacity | `double` | `0.1` |  |\n| Watermark | Class | `string?` | `` |  |\n| Watermark | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Watermark) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Watermark />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Watermark/Watermark.razor`\n"
}