@lumeo-ui/mcp-server 3.19.0 → 4.0.1

package/README.md

@@ -11,18 +11,29 @@ actually compiles.
 
 ## What it exposes
 
-The server covers **all 125 components** from Lumeo's generated
-`registry.json`. The top ~35 most-used components ship with rich, hand-curated
-schemas (parameters, slots, ready-to-use Razor examples, CSS variables); the
-remaining ~90 are still discoverable and returned with category / description /
-files / dependencies / CSS variables plus a link back to the docs site for full
-reference. As more components get curated, the rich count grows automatically.
+The server covers **the full Lumeo component catalog** from the generated
+`registry.json` + `components-api.json`. Every component is returned with its
+parameters (including which are `[EditorRequired]`), enums, sub-components, CSS
+variables, examples, its **test-coverage tier**, and its **accessibility contract**
+(roles, keyboard keys, focus) — the schema is source-derived (Roslyn) so it has full
+coverage with no thin fallbacks, and stays in lockstep with each release.
 
 ### Tools
 
-- `lumeo_list_components({ category?, query? })` — list all 125 components
-- `lumeo_get_component({ name })` — rich schema if curated; thin + docs link otherwise
-- `lumeo_search({ query })` — fuzzy search across all 125
+Components:
+- `lumeo_list_components({ category?, query? })` — list all components (name, category, description)
+- `lumeo_get_component({ name })` — full schema: every `[Parameter]` (with `required` for `[EditorRequired]`), enums, records, events, sub-components, CSS vars, source files, a curated example, and the component's **test-coverage tier**
+- `lumeo_get_a11y({ name })` — accessibility contract: ARIA roles + `aria-*` attributes rendered, keyboard keys handled, focus management, and whether that behaviour is test-covered
+- `lumeo_get_install({ name })` — install + setup: NuGet package, `using`s, DI, host includes, required parameters, portal/overlay requirements
+- `lumeo_get_example({ name })` — a hand-curated Razor usage example
+- `lumeo_search({ query })` — fuzzy search across components and services
+- `lumeo_validate_markup({ markup })` — static-check Razor: unknown params, **type-bound enum-value validation** (e.g. `Size="Large"` is rejected), and missing-parent errors for sub-components that read a cascading context
+
+Services, patterns, theme:
+- `lumeo_list_services()` / `lumeo_get_service({ name })` — service-layer API (OverlayService, ThemeService, global enums, …)
+- `lumeo_list_patterns()` / `lumeo_get_pattern({ name })` — higher-level composition patterns
+- `lumeo_get_theme_tokens()` — design tokens ↔ CSS variables
+- `lumeo_changelog()` — recent library changes
 
 ### Resources
 
@@ -52,7 +63,7 @@ Edit `claude_desktop_config.json` (Settings → Developer → Edit Config):
   "mcpServers": {
     "lumeo": {
       "command": "node",
-      "args": ["C:/Users/bemi/RiderProjects/Lumeo/tools/lumeo-mcp/dist/index.js"]
+      "args": ["/absolute/path/to/Lumeo/tools/lumeo-mcp/dist/index.js"]
     }
   }
 }
@@ -113,16 +124,17 @@ npm run dev   # tsc --watch
 npm start     # run the built server
 ```
 
-The component catalog is built at startup by merging two sources:
-
-- `src/components.ts` — hand-curated rich entries (top ~35) with full
-  `params`, `slots`, and `example` fields
-- `src/registry.json` — the full 125-component registry, copied from
-  `src/Lumeo/registry/registry.json` at `prebuild` time by
-  `scripts/sync-registry.mjs`
-
-To enrich a thin entry, add a full entry for it in `src/components.ts` — the
-merge layer will automatically upgrade it to the rich schema.
+The component schema is generated at build time, not hand-maintained:
+`tools/Lumeo.RegistryGen` reads the actual Razor source via Roslyn and emits full
+params / enums / events / sub-component metadata for every component into
+`src/Lumeo/registry/`. `scripts/sync-registry.mjs` copies the generated
+`registry.json` (164 components) and `components-api.json` here at `prebuild`
+time, so the catalog never drifts from the source.
+
+`src/components.ts` only layers a few extra hand-curated example snippets on top —
+there is no thin/rich split and no manual catalog drift. To add a richer example
+for a component, add an entry for it in `src/components.ts`; the merge layer
+overlays it onto the generated schema.
 
 ## License
 

package/dist/components.js

@@ -317,14 +317,16 @@ export const components = [
             { name: "ChildContent", description: "DialogHeader / DialogContent / DialogFooter." },
         ],
         example: `<Dialog @bind-Open="_dialogOpen">
-    <DialogHeader>
-        <DialogTitle>Are you sure?</DialogTitle>
-        <DialogDescription>This cannot be undone.</DialogDescription>
-    </DialogHeader>
-    <DialogFooter>
-        <Button Variant="Button.ButtonVariant.Outline" OnClick='() => _dialogOpen = false'>Cancel</Button>
-        <Button Variant="Button.ButtonVariant.Destructive" OnClick="Confirm">Delete</Button>
-    </DialogFooter>
+    <DialogContent>
+        <DialogHeader>
+            <DialogTitle>Are you sure?</DialogTitle>
+            <DialogDescription>This cannot be undone.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+            <Button Variant="Button.ButtonVariant.Outline" OnClick='() => _dialogOpen = false'>Cancel</Button>
+            <Button Variant="Button.ButtonVariant.Destructive" OnClick="Confirm">Delete</Button>
+        </DialogFooter>
+    </DialogContent>
 </Dialog>`,
         cssVars: ["--color-background", "--color-foreground", "--color-border"],
     },
@@ -676,7 +678,7 @@ function slugify(name) {
 export const registry = loadRegistry();
 /**
  * Build the unified catalog:
- *   - All 125 components from the registry
+ *   - Every component from the registry
  *   - Hand-curated rich entries override the thin registry entries for their name
  */
 function buildCatalog() {

package/dist/componentsApi.js

@@ -3,7 +3,7 @@
  * `tools/Lumeo.RegistryGen` (Roslyn-based scan of every `[Parameter]` /
  * `[CascadingParameter]` property across every Razor component in the repo).
  *
- * This is the source-of-truth schema for ALL 131 Lumeo components. The
+ * This is the source-of-truth schema for ALL Lumeo components. The
  * legacy hand-curated `components.ts` is kept as an OPTIONAL example overlay:
  * when it has an entry for a component we surface its `example` Razor snippet
  * verbatim alongside the auto-generated parameter list.

package/dist/index.js

@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 /**
- * Lumeo MCP Server v2.0.1
+ * Lumeo MCP Server
+ *
+ * (Runtime version is read from package.json at startup — see SERVER_VERSION below —
+ *  so it never drifts from the published package.)
  *
  * Source-of-truth schema for ALL Lumeo components, generated at build time
  * by `tools/Lumeo.RegistryGen` from the actual Razor source via Roslyn. Every
@@ -8,7 +11,7 @@
  * no thin/rich split, no manual catalog drift.
  *
  *   Tools:
- *     - lumeo_list_components  — list/filter all 131 components (name+category+description)
+ *     - lumeo_list_components  — list/filter all components (name+category+description)
  *     - lumeo_get_component    — full schema (params, enums, events, sub-components, files, examples)
  *     - lumeo_search           — fuzzy search across name/category/description
  *     - lumeo_get_example      — working Razor snippet(s) for a component
@@ -21,6 +24,7 @@
  *   Resources (URI template):
  *     - lumeo://component/{name}   — markdown reference per component
  *     - lumeo://category/{name}    — overview of all components in a category
+ *     - lumeo://service/{name}     — markdown reference per injectable service
  *
  * Transport: stdio (the standard for spawned MCP servers).
  */
@@ -29,8 +33,24 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { CallToolRequestSchema, ListResourcesRequestSchema, ListResourceTemplatesRequestSchema, ListToolsRequestSchema, ReadResourceRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import { loadComponentsApi, } from "./componentsApi.js";
 import { components as curatedExamples } from "./components.js";
+import { loadRegistry } from "./registry.js";
 import { setupFor, PORTAL_COMPONENTS, NEEDS_OVERLAY_PROVIDER } from "./installInfo.js";
+import { createValidator } from "./validate.js";
+import { readFileSync } from "node:fs";
 const DOCS_BASE = "https://lumeo.nativ.sh";
+// Server version, read from package.json so it can never drift from the published
+// package — the publish job bumps package.json via `npm version`, and this file no
+// longer carries a hand-edited literal that goes stale (it sat at 2.2.3 while the
+// library was 3.19.0).
+const SERVER_VERSION = (() => {
+    try {
+        const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+        return typeof pkg.version === "string" ? pkg.version : "0.0.0";
+    }
+    catch {
+        return "0.0.0";
+    }
+})();
 // ───────────────── Load source-of-truth schema ─────────────────
 const api = loadComponentsApi() ?? {
     version: "0.0.0",
@@ -68,6 +88,24 @@ const patternByKey = new Map(patterns.map((p) => [p.title.toLowerCase().replace(
 // parameters/enums/events; the curated `example` Razor snippet is preserved
 // as a documentation aid because LLMs benefit from seeing real usage.
 const curatedExampleByName = new Map(curatedExamples.map((c) => [c.name.toLowerCase(), c.example]));
+// Per-component test-coverage (tier + which test dimensions exist), from registry.json.
+// Surfaced in get_component so an agent can see, at a glance, what's battle-tested.
+const coverageByName = new Map((loadRegistry()?.components ?? [])
+    .filter((c) => c.testCoverage)
+    .map((c) => [c.name.toLowerCase(), c.testCoverage]));
+/** One-line human summary of a component's test coverage, e.g.
+ *  "tier 3/4 · 32 tests · render, behavior, a11y, keyboard". */
+function coverageSummary(tc) {
+    const dims = [
+        tc.render && "render",
+        tc.behavior && "behavior",
+        tc.a11y && "a11y",
+        tc.keyboard && "keyboard",
+        tc.scale && "scale",
+        tc.e2e && "e2e",
+    ].filter(Boolean);
+    return `tier ${tc.tier}/4 · ${tc.tests} test${tc.tests === 1 ? "" : "s"}${dims.length ? ` · ${dims.join(", ")}` : ""}`;
+}
 // ───────────────── Helpers ─────────────────
 function findComponent(name) {
     // Top-level match first; fall back to the parent of a matching sub-component
@@ -125,6 +163,8 @@ function paramRow(p) {
     const def = p.default ?? "—";
     const desc = p.description ?? "";
     const flags = [];
+    if (p.isEditorRequired)
+        flags.push("required");
     if (p.isCascading)
         flags.push("cascading");
     if (p.captureUnmatched)
@@ -147,12 +187,14 @@ function toComponentMarkdown(c) {
         ? c.files.map((f) => `- \`${f}\``).join("\n")
         : "";
     const example = curatedExampleByName.get(c.name.toLowerCase());
+    const coverage = coverageByName.get(c.name.toLowerCase());
     const sections = [
         `# ${c.name}`,
         "",
         `**Category:** ${c.category}${c.subcategory ? ` › ${c.subcategory}` : ""}`,
         `**NuGet:** \`${c.nugetPackage}\``,
         `**Namespace:** \`${c.namespace ?? "Lumeo"}\``,
+        ...(coverage ? [`**Test coverage:** ${coverageSummary(coverage)}`] : []),
         "",
         c.description,
         "",
@@ -326,6 +368,24 @@ function toGetPayload(c) {
         subComponents,
         examples: c.examples ?? [],
         curatedExample: curatedExampleByName.get(c.name.toLowerCase()) ?? null,
+        testCoverage: coverageByName.get(c.name.toLowerCase()) ?? null,
+        docs: docsUrl(c),
+    };
+}
+// ───────────────── lumeo_get_a11y ─────────────────
+function toA11yPayload(c) {
+    const a11y = c.a11y ?? { roles: [], ariaAttributes: [], keys: [], keyboardInteractive: false, focusManaged: false };
+    const cov = coverageByName.get(c.name.toLowerCase());
+    return {
+        name: c.name,
+        roles: a11y.roles,
+        ariaAttributes: a11y.ariaAttributes,
+        keyboardKeys: a11y.keys,
+        keyboardInteractive: a11y.keyboardInteractive,
+        focusManaged: a11y.focusManaged,
+        // Whether the a11y / keyboard behaviour is actually covered by tests.
+        tested: cov ? { a11y: cov.a11y, keyboard: cov.keyboard } : null,
+        gotchas: c.gotchas ?? [],
         docs: docsUrl(c),
     };
 }
@@ -335,8 +395,9 @@ function buildInstallInfo(c) {
     const subNames = Object.values(c.subComponents).map((s) => s.componentName);
     const isPortal = PORTAL_COMPONENTS.has(c.name);
     const needsOverlayProvider = NEEDS_OVERLAY_PROVIDER.has(c.name);
+    // [EditorRequired] params, from the real scanner flag (was a fragile description-text grep).
     const requiredParams = c.parameters
-        .filter((p) => /\bEditorRequired\b/i.test(p.description ?? "") || /required/i.test(p.description ?? ""))
+        .filter((p) => p.isEditorRequired)
         .map((p) => p.name);
     return {
         component: c.name,
@@ -368,101 +429,19 @@ function buildInstallInfo(c) {
         docs: docsUrl(c),
     };
 }
-// Build a lookup of every component + sub-component → its parameter set,
-// plus the parent each sub-component must live inside.
-const elementIndex = (() => {
-    const m = new Map();
-    const enumValueSet = (vals) => new Set(vals.map((v) => v.toLowerCase()));
-    for (const c of components) {
-        const enums = new Map();
-        for (const e of c.enums)
-            enums.set(e.name, enumValueSet(e.values));
-        m.set(c.name.toLowerCase(), { params: new Set(c.parameters.map((p) => p.name)), enums });
-        for (const s of Object.values(c.subComponents)) {
-            const subEnums = new Map();
-            for (const e of s.enums)
-                subEnums.set(e.name, enumValueSet(e.values));
-            m.set(s.componentName.toLowerCase(), { params: new Set(s.parameters.map((p) => p.name)), enums: subEnums, parent: c.name });
-        }
-    }
-    return m;
-})();
-function validateMarkup(markup) {
-    const issues = [];
-    // Find component tags: <Foo ...> or <Foo .../> or </Foo>. Lumeo components are PascalCase.
-    const tagRx = /<\/?([A-Z][A-Za-z0-9]*)((?:\s+[^<>]*?)?)\/?>/g;
-    // Track which known Lumeo components appear, to validate parent-child.
-    const present = new Set();
-    let m;
-    while ((m = tagRx.exec(markup)) !== null) {
-        const tag = m[1];
-        const isClose = m[0].startsWith("</");
-        const known = elementIndex.get(tag.toLowerCase());
-        if (!known)
-            continue; // not a Lumeo element (could be a user component / HTML — ignore)
-        present.add(tag);
-        if (isClose)
-            continue;
-        // Parse attributes (best-effort): Name="..." | Name='...' | Name="@expr" | Name=@expr | bare-name
-        const attrBlob = m[2] ?? "";
-        const attrRx = /([@A-Za-z_][\w-]*)\s*=\s*("(?:[^"]*)"|'(?:[^']*)'|@?[^\s"'<>]+)|([@A-Za-z_][\w-]*)(?=\s|$)/g;
-        let am;
-        while ((am = attrRx.exec(attrBlob)) !== null) {
-            let name = (am[1] ?? am[3] ?? "").trim();
-            if (!name)
-                continue;
-            // Strip Blazor directive prefixes/suffixes: @bind-Foo, @bind-Foo:event, Foo:stopPropagation, @onclick, @attributes, @key, @ref, @bind
-            if (name.startsWith("@bind-"))
-                name = name.slice("@bind-".length).split(":")[0];
-            else if (name.startsWith("@bind"))
-                continue; // @bind / @bind:event on inputs — skip
-            else if (name.startsWith("@on") || name === "@attributes" || name === "@key" || name === "@ref" || name === "@oninput" || name === "@onchange")
-                continue;
-            else if (name.startsWith("@"))
-                continue; // other directives
-            if (name.includes(":"))
-                name = name.split(":")[0]; // EventName:stopPropagation, :preventDefault
-            if (name === "class" || name === "style" || name === "id")
-                continue; // pass-through HTML attrs (Lumeo captures unmatched)
-            if (/^data-|^aria-/i.test(name))
-                continue; // captured unmatched
-            if (!known.params.has(name)) {
-                // Could be a captured-unmatched HTML attr — only flag if it looks like a typo'd Lumeo param (PascalCase).
-                if (/^[A-Z]/.test(name)) {
-                    issues.push({ severity: "warning", component: tag, message: `Unknown parameter \`${name}\` on <${tag}>. Did you mean one of: ${[...known.params].slice(0, 8).join(", ")}…? (Or it's a pass-through HTML attribute, which is allowed.)` });
-                }
-                continue;
-            }
-            // Enum value check: Foo="Bar.Baz.Qux" or Foo="Qux"
-            const rawVal = (am[2] ?? "").replace(/^["']|["']$/g, "").trim();
-            if (!rawVal || rawVal.startsWith("@"))
-                continue; // dynamic expression — can't statically check
-            // Which enum does this param use? Match by param name heuristically against enum names.
-            for (const [enumName, vals] of known.enums) {
-                // crude: the param likely uses this enum if rawVal looks like EnumName.Value or matches a value
-                const lastSeg = rawVal.split(".").pop().toLowerCase();
-                const looksLikeThisEnum = rawVal.toLowerCase().includes(enumName.toLowerCase()) || vals.has(lastSeg);
-                if (looksLikeThisEnum && !vals.has(lastSeg)) {
-                    issues.push({ severity: "error", component: tag, message: `\`${name}="${rawVal}"\` — \`${lastSeg}\` is not a valid ${enumName} value. Allowed: ${[...vals].join(", ")}.` });
-                }
-            }
-        }
-    }
-    // Parent-child: every sub-component present should have its required parent present somewhere.
-    for (const tag of present) {
-        const known = elementIndex.get(tag.toLowerCase());
-        if (known.parent && !present.has(known.parent)) {
-            issues.push({ severity: "error", component: tag, message: `<${tag}> must be used inside <${known.parent}> (it reads a CascadingValue from it). No <${known.parent}> found in this markup.` });
-        }
-    }
-    // Also flag obviously-unknown PascalCase tags that look like attempted Lumeo components.
-    // (Skip — too noisy; user components are also PascalCase. The known-element checks above are enough.)
-    return { ok: !issues.some((i) => i.severity === "error"), issues };
-}
+// ───────────────── lumeo_validate_markup ─────────────────
+// The validator lives in ./validate.ts so it can be unit-tested in isolation;
+// build it from the loaded catalog here. Shared/global enums (Lumeo.Size,
+// Orientation, …) live in the service layer rather than on any one component, so
+// feed them in separately for type-bound enum validation.
+const sharedEnums = services
+    .filter((s) => s.kind === "enum")
+    .map((s) => ({ name: s.name, values: s.enumValues.map((v) => v.name) }));
+const validateMarkup = createValidator(components, sharedEnums);
 // ───────────────── Server setup ─────────────────
 const server = new Server({
     name: "lumeo-mcp",
-    version: "2.2.3",
+    version: SERVER_VERSION,
 }, {
     capabilities: {
         tools: {},
@@ -504,6 +483,24 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                 },
             },
         },
+        {
+            name: "lumeo_get_a11y",
+            description: "Get the ACCESSIBILITY contract for a Lumeo component: the ARIA roles and aria-* " +
+                "attributes it renders, the keyboard keys it handles, whether it manages focus, and " +
+                "whether that a11y/keyboard behaviour is covered by tests. Use it to verify a " +
+                "component's accessibility before relying on it, or to know which keys to exercise. " +
+                "Extracted from the actual Razor source by RegistryGen.",
+            inputSchema: {
+                type: "object",
+                required: ["name"],
+                properties: {
+                    name: {
+                        type: "string",
+                        description: "Component name (e.g. \"Dialog\", \"Tabs\", \"Select\"). Case-insensitive.",
+                    },
+                },
+            },
+        },
         {
             name: "lumeo_list_services",
             description: `List all ${services.length} Lumeo SERVICE-LAYER public API types — services (OverlayService, ` +
@@ -641,6 +638,20 @@ server.setRequestHandler(CallToolRequestSchema, async (req) => {
             }
             return { content: [{ type: "text", text: JSON.stringify(toGetPayload(c), null, 2) }] };
         }
+        case "lumeo_get_a11y": {
+            const wanted = typeof a.name === "string" ? a.name : "";
+            const c = findComponent(wanted);
+            if (!c) {
+                return {
+                    isError: true,
+                    content: [{
+                            type: "text",
+                            text: `Component "${wanted}" not found. Use lumeo_list_components or lumeo_search to discover available components.`,
+                        }],
+                };
+            }
+            return { content: [{ type: "text", text: JSON.stringify(toA11yPayload(c), null, 2) }] };
+        }
         case "lumeo_list_services": {
             const results = services.map(toServiceListPayload);
             return { content: [{ type: "text", text: JSON.stringify(results, null, 2) }] };

package/dist/registry.js

@@ -1,6 +1,6 @@
 /**
  * Loads Lumeo's generated registry.json (synced into src/registry.json at
- * prebuild time — see `scripts/sync-registry.mjs`). All 125 components are
+ * prebuild time — see `scripts/sync-registry.mjs`). All components are
  * surfaced to the MCP server through this file so `lumeo_list_components`,
  * `lumeo_get_component`, and `lumeo_search` can cover the full catalog.
  *
@@ -71,6 +71,7 @@ export function loadRegistry() {
                 dependencies: entry.dependencies ?? [],
                 cssVars: entry.cssVars ?? [],
                 registryUrl: entry.registryUrl,
+                testCoverage: entry.testCoverage,
             });
         }
         return {

package/dist/validate.js

@@ -0,0 +1,216 @@
+// Markup validator for lumeo_validate_markup — extracted from index.ts so it can
+// be unit-tested in isolation. Parameterized by the component catalog (rather than
+// reaching into module-level state) so tests can drive it with a small synthetic
+// catalog and the server can build it from the loaded components-api.
+/** `@typeparam` names used by Lumeo's generic components, keyed by component name (lowercase)
+ *  -> the exact type-param name(s) THAT component declares. These bind a generic component to
+ *  a concrete type via a Razor attribute (e.g. `<DataGrid TItem="Employee">`), but they are NOT
+ *  `[Parameter]` properties — the generated component catalog has no entry for them on any
+ *  component. Scoped per-component (Codex P3) rather than a blanket name exemption: many Lumeo
+ *  components capture unmatched attributes, so an unscoped exemption let genuine PascalCase
+ *  typos like `<Button TItem="Order">` or `<Input T="Foo">` — exactly the class of mistake the
+ *  validator exists to catch — through silently on ANY component, not just the generic ones
+ *  that actually declare that type parameter. Derived from every `@typeparam` directive in the
+ *  library (`grep -rn "@typeparam" src/Lumeo.* src/Lumeo`); not threaded through the registry schema for
+ *  the same proportionality reason as the original (unscoped) fix — the set is small and stable. */
+const GENERIC_TYPE_PARAMS_BY_COMPONENT = {
+    form: new Set(["TModel"]),
+    picklist: new Set(["TItem"]),
+    pivotgrid: new Set(["TItem"]),
+    sortablelist: new Set(["TItem"]),
+    taginput: new Set(["TItem"]),
+    treeview: new Set(["T"]),
+    treeviewnode: new Set(["T"]),
+    datagrid: new Set(["TItem"]),
+    datatable: new Set(["TItem"]),
+    datagridbody: new Set(["TItem"]),
+    datagridcell: new Set(["TItem"]),
+    datagridcolumndef: new Set(["TItem"]),
+    datagridcolumnfilter: new Set(["TItem"]),
+    datagridcolumngroup: new Set(["TItem"]),
+    datagridcolumnvisibility: new Set(["TItem"]),
+    datagriddetailrow: new Set(["TItem"]),
+    datagridfooter: new Set(["TItem"]),
+    datagridgrouprow: new Set(["TItem"]),
+    datagridheader: new Set(["TItem"]),
+    datagridheadercell: new Set(["TItem"]),
+    datagridpagination: new Set(["TItem"]),
+    datagridrow: new Set(["TItem"]),
+    datagridtoolbar: new Set(["TItem"]),
+    datagridtoolbarcolumns: new Set(["TItem"]),
+    datagridtoolbarcopyselected: new Set(["TItem"]),
+    datagridtoolbarexport: new Set(["TItem"]),
+    datagridtoolbarfullscreen: new Set(["TItem"]),
+    datagridtoolbarlayouts: new Set(["TItem"]),
+    toolbarcontent: new Set(["TItem"]),
+};
+/** Strips namespace / global:: / trailing nullable `?` to the bare type name:
+ *  "Lumeo.Size?" → "Size", "global::Lumeo.Orientation" → "Orientation". */
+function bareTypeName(type) {
+    if (!type)
+        return "";
+    return type.replace(/\?+$/, "").replace(/^global::/, "").split(".").pop() ?? "";
+}
+/** Global enum table: bare enum name (lowercased) → its display values. Built once from
+ *  every component's `enums` plus the shared enums (Size, Orientation, …). The validator
+ *  binds a param's declared `type` to one of these by name, so it checks a value against
+ *  the param's ACTUAL enum rather than guessing from substring matches. */
+function buildEnumTable(components, sharedEnums) {
+    const table = new Map();
+    const add = (name, values) => {
+        if (name && values.length && !table.has(name.toLowerCase()))
+            table.set(name.toLowerCase(), values);
+    };
+    for (const e of sharedEnums)
+        add(e.name, e.values);
+    for (const c of components) {
+        for (const e of c.enums)
+            add(e.name, e.values);
+        for (const s of Object.values(c.subComponents))
+            for (const e of s.enums)
+                add(e.name, e.values);
+    }
+    return table;
+}
+function buildElementIndex(components, enumTable) {
+    const m = new Map();
+    // For each param, bind it to its enum by type (only when that enum is in the table).
+    const bindEnums = (params) => {
+        const paramEnum = new Map();
+        for (const p of params) {
+            const bare = bareTypeName(p.type);
+            if (bare && enumTable.has(bare.toLowerCase()))
+                paramEnum.set(p.name, bare);
+        }
+        return paramEnum;
+    };
+    for (const c of components) {
+        m.set(c.name.toLowerCase(), {
+            params: new Set(c.parameters.map((p) => p.name)),
+            paramEnum: bindEnums(c.parameters),
+        });
+        for (const s of Object.values(c.subComponents)) {
+            m.set(s.componentName.toLowerCase(), {
+                params: new Set(s.parameters.map((p) => p.name)),
+                paramEnum: bindEnums(s.parameters),
+                parent: c.name,
+                parentCascades: s.parameters.some((p) => p.isCascading === true),
+            });
+        }
+    }
+    return m;
+}
+/** Builds a validateMarkup function bound to the given component catalog. `sharedEnums`
+ *  supplies enums that live outside any component (e.g. Lumeo.Size) so type-bound enum
+ *  validation works for shared types too. */
+export function createValidator(components, sharedEnums = []) {
+    const enumTable = buildEnumTable(components, sharedEnums);
+    const elementIndex = buildElementIndex(components, enumTable);
+    return function validateMarkup(markup) {
+        const issues = [];
+        // Find component tags: <Foo ...> or <Foo .../> or </Foo>. Lumeo components are PascalCase.
+        // The attribute blob is quote-aware: a quoted value (Foo="...", Foo='...') can contain
+        // `<`/`>` and must not end the match early. Common valid Razor like
+        // Field="@(u => u.Name)" (a DataGrid column lambda) has a `>` inside the quoted
+        // attribute value; a naive `[^<>]*` stopped the match right there, truncating the tag
+        // and dropping every attribute after it from validation — and, worse, silently leaving
+        // a self-closing element on `openStack` (the truncated match never reaches its real
+        // `/>`), producing false nesting diagnostics for markup after it. Each alternative below
+        // consumes either a whole double-quoted or single-quoted run, or one plain non-quote/
+        // non-bracket character, so `<`/`>` inside a quoted value are absorbed instead of ending
+        // the tag.
+        const tagRx = /<\/?([A-Z][A-Za-z0-9]*)((?:\s+(?:"[^"]*"|'[^']*'|[^<>"'])*)?)\/?>/g;
+        // Stack of currently-open Lumeo elements for nesting-aware parent-child enforcement.
+        // Only known Lumeo components are tracked; non-Lumeo wrappers are invisible to this stack.
+        const openStack = [];
+        let m;
+        while ((m = tagRx.exec(markup)) !== null) {
+            const tag = m[1];
+            const isClose = m[0].startsWith("</");
+            // A tag ending in "/>" is self-closing: it opens and immediately closes, so it is
+            // never pushed onto openStack and is not a valid ancestor for anything.
+            const isSelfClosing = !isClose && m[0].endsWith("/>");
+            const known = elementIndex.get(tag.toLowerCase());
+            if (!known)
+                continue; // not a Lumeo element (could be a user component / HTML — ignore)
+            // Closing tag: pop the stack down to and including this element.
+            // Tolerate minor mis-nesting gracefully — stop at the first match found from the top;
+            // if not found (stray close tag), leave the stack unchanged rather than throwing.
+            if (isClose) {
+                const tagLower = tag.toLowerCase();
+                for (let i = openStack.length - 1; i >= 0; i--) {
+                    const popped = openStack.pop();
+                    if (popped.toLowerCase() === tagLower)
+                        break;
+                }
+                continue;
+            }
+            // Parent-child (nesting-aware): a sub-component that reads a CascadingValue from its
+            // parent (parentCascades=true) must have that parent as an OPEN ANCESTOR — i.e. the
+            // parent must currently be on the open-element stack, not merely present somewhere in
+            // the markup. Self-closing tags are checked against the stack at the moment they appear
+            // (they are never on the stack themselves). Purely presentational sub-components
+            // (parentCascades=false / undefined) are still allowed standalone.
+            if (known.parent && known.parentCascades) {
+                const parentLower = known.parent.toLowerCase();
+                if (!openStack.some((t) => t.toLowerCase() === parentLower)) {
+                    issues.push({ severity: "error", component: tag, message: `<${tag}> must be used inside <${known.parent}> (it reads a CascadingValue from it). No <${known.parent}> found as an open ancestor.` });
+                }
+            }
+            // Push opening (non-self-closing) tags onto the ancestor stack so they can act as
+            // valid parents for subsequent child elements.
+            if (!isSelfClosing)
+                openStack.push(tag);
+            // Parse attributes (best-effort): Name="..." | Name='...' | Name="@expr" | Name=@expr | bare-name
+            const attrBlob = m[2] ?? "";
+            const attrRx = /([@A-Za-z_][\w-]*)\s*=\s*("(?:[^"]*)"|'(?:[^']*)'|@?[^\s"'<>]+)|([@A-Za-z_][\w-]*)(?=\s|$)/g;
+            let am;
+            while ((am = attrRx.exec(attrBlob)) !== null) {
+                let name = (am[1] ?? am[3] ?? "").trim();
+                if (!name)
+                    continue;
+                // Strip Blazor directive prefixes/suffixes: @bind-Foo, @bind-Foo:event, Foo:stopPropagation, @onclick, @attributes, @key, @ref, @bind
+                if (name.startsWith("@bind-"))
+                    name = name.slice("@bind-".length).split(":")[0];
+                else if (name.startsWith("@bind"))
+                    continue; // @bind / @bind:event on inputs — skip
+                else if (name.startsWith("@on") || name === "@attributes" || name === "@key" || name === "@ref" || name === "@oninput" || name === "@onchange")
+                    continue;
+                else if (name.startsWith("@"))
+                    continue; // other directives
+                if (name.includes(":"))
+                    name = name.split(":")[0]; // EventName:stopPropagation, :preventDefault
+                if (name === "class" || name === "style" || name === "id")
+                    continue; // pass-through HTML attrs (Lumeo captures unmatched)
+                if (/^data-|^aria-/i.test(name))
+                    continue; // captured unmatched
+                if (GENERIC_TYPE_PARAMS_BY_COMPONENT[tag.toLowerCase()]?.has(name))
+                    continue; // @typeparam binding (Foo TItem="Employee"), not a [Parameter]
+                if (!known.params.has(name)) {
+                    // Could be a captured-unmatched HTML attr — only flag if it looks like a typo'd Lumeo param (PascalCase).
+                    if (/^[A-Z]/.test(name)) {
+                        issues.push({ severity: "warning", component: tag, message: `Unknown parameter \`${name}\` on <${tag}>. Did you mean one of: ${[...known.params].slice(0, 8).join(", ")}…? (Or it's a pass-through HTML attribute, which is allowed.)` });
+                    }
+                    continue;
+                }
+                // Enum value check: Foo="Bar.Baz.Qux" or Foo="Qux". Bind the param to its
+                // declared enum TYPE (not a substring guess), then check the value against that
+                // enum's allowed values. This catches Size="Large" (Large ∉ Size) and never
+                // mis-attributes a value to an unrelated enum that merely shares a substring.
+                const rawVal = (am[2] ?? "").replace(/^["']|["']$/g, "").trim();
+                if (!rawVal || rawVal.startsWith("@"))
+                    continue; // dynamic expression — can't statically check
+                const boundEnum = known.paramEnum.get(name);
+                if (boundEnum) {
+                    const display = enumTable.get(boundEnum.toLowerCase());
+                    const lastSegRaw = rawVal.split(".").pop();
+                    const lastSeg = lastSegRaw.toLowerCase();
+                    if (!display.some((v) => v.toLowerCase() === lastSeg)) {
+                        issues.push({ severity: "error", component: tag, message: `\`${name}="${rawVal}"\` — \`${lastSegRaw}\` is not a valid ${boundEnum} value. Allowed: ${display.join(", ")}.` });
+                    }
+                }
+            }
+        }
+        return { ok: !issues.some((i) => i.severity === "error"), issues };
+    };
+}