@viax.io/uxm 4.36.0

package/dist/studio/lib/registry/composite.cjs

@@ -0,0 +1,1732 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var composite_exports = {};
+__export(composite_exports, {
+  compositeDefs: () => compositeDefs
+});
+module.exports = __toCommonJS(composite_exports);
+const compositeDefs = [
+  // ── Composite ──
+  {
+    id: "pill-select",
+    name: "Pill Select",
+    category: "Composite",
+    description: `Multi-select tag input. Selected values render as <Chip mode="input"> (chip theming lives on the Chip atom's registry). This shell owns the field shape and state visuals \u2014 default / hover / focus / disabled \u2014 matching the input-text / input-with-icon family.`,
+    styleProperties: [
+      // Field colors (per state). The visible field is `.uxm-pill-select__
+      // field` — an inner div on the layout-only `.uxm-pill-select` root.
+      // `backgroundColor` and `borderColor` are REAL_CSS_PROPS so they're
+      // routed through `--uxm-pill-select-{bg,border-color}` via
+      // PER_COMPONENT_MAPPING in save/route.ts (otherwise saves would land
+      // on the layout wrapper and silently no-op). The per-state keys
+      // (hoverBg, focusBorder, …) are custom names that route through the
+      // kebab fallback path correctly.
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "default" } },
+      { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "default" } },
+      { key: "placeholderColor", label: "Placeholder", control: "color", defaultValue: "var(--color-text-muted)", section: "colors", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "hover" } },
+      { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "hover" } },
+      { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "focus" } },
+      { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      // Disabled defaults intentionally match the default state — the
+      // visible "disabled" signal comes from the chips inside (which
+      // receive the forwarded `disabled` prop and render the Chip atom's
+      // own muted palette) plus `cursor: not-allowed` and the field
+      // being skipped in the tab order. Stacking an opacity dim on the
+      // wrapper would double-dim the already-muted chips and ruin
+      // readability, so opacity defaults to 1 — exposed as a knob if the
+      // brand really wants a dimmed disabled treatment.
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "disabled" } },
+      { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "disabled" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 1, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // Error state — field-style atom (constrained picker), so it gets
+      // the standard error surface: red border + bg on the inner `__field`,
+      // plus the shared message knobs. errorBg / errorBorder paint the
+      // field; errorColor + errorMessageSize theme the `__error-message`
+      // below it. The latter two share keys with the rest of the input
+      // family so the editor's "Match in N Inputs" sync links them. All
+      // four kebab through the fallback path to `--uxm-pill-select-error-*`
+      // (declared on the root, cascade down to `__field`). `colors` section
+      // for bg/border matches the other per-state field colors above.
+      { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "error" } },
+      { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "colors", showWhen: { state: "error" } },
+      { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+      { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+      // Shape (universal, no showWhen). Keys `radius` and `chipGap` are
+      // deliberately NOT named `borderRadius` / `gap` (which would land
+      // in REAL_CSS_PROPS and emit plain CSS on the root); the field-
+      // radius lives on the inner `__field`, and `chipGap` is the field's
+      // flex gap. `paddingX` / `paddingY` ARE REAL_CSS_PROPS — routed via
+      // PER_COMPONENT_MAPPING so they land on `__field`, not the root.
+      { key: "radius", label: "Field Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "chipGap", label: "Chip Gap", control: "number", defaultValue: 6, min: 2, max: 12, step: 2, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 10, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 20, step: 2, unit: "px" }
+      // Label rendering is the consumer's responsibility — the atom
+      // doesn't own a `<label>` element. Preview-only label knobs
+      // (labelColor, labelSize) were removed pending a project-wide
+      // decision on label theming has now landed: FormField is the sole
+      // owner. Wrap pill-select in `<FormField>` to add a label; this
+      // atom is just the multi-select field. labelPosition variant was
+      // removed here for the same reason — labels are FormField's concern.
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" },
+          { value: "error", label: "Error" }
+        ],
+        defaultValue: "default"
+      },
+      // Chip layout variant — `inside` keeps chips inline within the
+      // trigger (tag-input pattern); `below` puts them in a separate row
+      // beneath the trigger (filter-bar pattern). Default `below` —
+      // modern default, trigger stays a constant height. Consumers
+      // wanting the classic compact "To:" tag-input switch to `inside`.
+      {
+        key: "chipsPosition",
+        label: "Chips Position",
+        options: [
+          { value: "below", label: "Below" },
+          { value: "inside", label: "Inside" }
+        ],
+        defaultValue: "below"
+      }
+    ]
+  },
+  {
+    id: "inline-filter",
+    name: "Inline Filters",
+    category: "Composite",
+    description: `Horizontal filter bar \u2014 three slots (search / filters / trailing). The filters slot accepts <Chip mode="filter"> from the consumer; chip theming lives on the Chip atom's registry, not here. This shell is layout-only.`,
+    styleProperties: [
+      // Layout-only. The chip-shape knobs that used to live here
+      // (chipBg, chipActiveBg, chipText, chipActiveText, plus
+      // borderRadius / fontSize / paddingX / paddingY) have moved to
+      // the Chip atom — the shell shouldn't claim theming responsibility
+      // for what its consumers slot in.
+      { key: "gap", label: "Slot Gap", control: "number", defaultValue: 12, min: 4, max: 32, step: 2, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "content-tooltip",
+    name: "Content Tooltip",
+    category: "Composite",
+    description: "Rich tooltip with title, description, and action.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 20, step: 1, unit: "px" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 8, max: 32, step: 4, unit: "px" },
+      { key: "shadow", label: "Shadow", control: "toggle", defaultValue: true },
+      { key: "maxWidth", label: "Max Width", control: "number", defaultValue: 280, min: 180, max: 400, step: 20, unit: "px" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "form-multirow",
+    name: "Multi-Row Form",
+    category: "Composite",
+    description: "Multi-section form with two-column rows. Composes FormField + TextInput / Select / Textarea; input theming flows through the input atoms' registries, label theming through FormField's. Always renders top labels \u2014 side labels + multi-section is a cramped combination and adds no signal worth exposing.",
+    styleProperties: [
+      // Form card shape + section/field spacing only. `inputRadius` is
+      // gone (TextInput owns its own border-radius); `borderColor` is
+      // now exclusively the form card outline.
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 24, step: 1, unit: "px" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 32, min: 16, max: 48, step: 4, unit: "px" },
+      { key: "fieldGap", label: "Field Gap", control: "number", defaultValue: 20, min: 8, max: 40, step: 4, unit: "px" },
+      { key: "sectionGap", label: "Section Gap", control: "number", defaultValue: 32, min: 16, max: 48, step: 4, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "columns",
+        label: "Columns",
+        options: [
+          { value: "1", label: "Single" },
+          { value: "2", label: "Two Column" }
+        ],
+        defaultValue: "2"
+      }
+    ]
+  },
+  {
+    id: "data-table",
+    name: "Data Table",
+    category: "Composite",
+    description: "Sortable data table with header, rows, and actions.",
+    styleProperties: [
+      { key: "headerBg", label: "Header Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "headerText", label: "Header Text", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "rowBg", label: "Row Bg", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "rowHoverBg", label: "Row Hover Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 16, step: 1, unit: "px" },
+      { key: "cellPaddingX", label: "Cell Padding X", control: "number", defaultValue: 12, min: 8, max: 24, step: 2, unit: "px" },
+      { key: "cellPaddingY", label: "Cell Padding Y", control: "number", defaultValue: 12, min: 6, max: 20, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "density",
+        label: "Density",
+        options: [
+          { value: "compact", label: "Compact" },
+          { value: "default", label: "Default" },
+          { value: "relaxed", label: "Relaxed" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onRowClick", description: "Fires when the user clicks a row (not bubbled from clicks inside the row-actions cell).", payload: "{ row: T }" },
+      { name: "onCommit", description: "Fires when an editable cell commits a new value \u2014 Enter or blur.", payload: "{ row: T, value: EditableCellValue }" }
+    ]
+  },
+  {
+    id: "view-switcher",
+    name: "View Switcher",
+    category: "Composite",
+    description: "Compact icon-only segmented control for toggling grid / list view. State knobs cover default / hover / focus / active / disabled across the individual icon button \u2014 the track surface is shared.",
+    styleProperties: [
+      // ── Track surface (shared across all states)
+      { key: "trackBg", label: "Track Background", control: "color", defaultValue: "var(--color-surface)", section: "track" },
+      { key: "trackBorder", label: "Track Border", control: "color", defaultValue: "var(--color-border)", section: "track" },
+      { key: "trackRadius", label: "Track Radius", control: "slider", defaultValue: 8, min: 0, max: 99, step: 1, unit: "px", section: "track" },
+      { key: "trackPadding", label: "Track Padding", control: "number", defaultValue: 2, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      { key: "gap", label: "Button Gap", control: "number", defaultValue: 0, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      // ── Per-state colors (filtered by State variant). Icon-only atom,
+      // so the foreground knob is the icon color (CSS `color` driving
+      // `currentColor` in the icon SVG).
+      { key: "inactiveIcon", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverIcon", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusIcon", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "active" } },
+      { key: "activeIcon", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledIcon", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every button state)
+      { key: "buttonSize", label: "Button Size", control: "number", defaultValue: 28, min: 20, max: 44, step: 2, unit: "px" },
+      { key: "buttonRadius", label: "Button Radius", control: "slider", defaultValue: 6, min: 0, max: 99, step: 1, unit: "px" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 12, max: 24, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a different view.", payload: "{ value: string }" }
+    ]
+  },
+  {
+    id: "tabs",
+    name: "Tabs",
+    category: "Composite",
+    description: "Horizontal tab strip with icon + label, splitting the width between tabs. State knobs cover default / hover / focus / active / disabled across the individual tab item \u2014 the track surface is shared.",
+    styleProperties: [
+      // ── Track surface (shared across all tab states)
+      { key: "trackBg", label: "Track Background", control: "color", defaultValue: "var(--color-surface)", section: "track" },
+      { key: "trackBorder", label: "Track Border", control: "color", defaultValue: "var(--color-border)", section: "track" },
+      { key: "trackRadius", label: "Track Radius", control: "slider", defaultValue: 8, min: 0, max: 99, step: 1, unit: "px", section: "track" },
+      { key: "trackPadding", label: "Track Padding", control: "number", defaultValue: 2, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      { key: "gap", label: "Tab Gap", control: "number", defaultValue: 0, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      // ── Per-state tab colors. Mirrors the button family: each state owns
+      // its own bg/text knobs, filtered into a single "States" section by
+      // the State variant. Default is the resting inactive tab; active is
+      // the currently-selected tab's appearance.
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "active" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity each live in their own section — they
+      // sit semantically next to the state-scoped color knobs but are
+      // standalone treatments (ring outline / dimming) rather than
+      // foreground/background colors.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every tab state)
+      { key: "tabRadius", label: "Tab Radius", control: "slider", defaultValue: 6, min: 0, max: 99, step: 1, unit: "px" },
+      { key: "paddingX", label: "Tab Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Tab Padding Y", control: "number", defaultValue: 6, min: 2, max: 14, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Inactive Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 12, min: 10, max: 20, step: 1, unit: "px" },
+      { key: "iconGap", label: "Icon Gap", control: "number", defaultValue: 6, min: 2, max: 12, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a different tab.", payload: "{ value: string }" }
+    ]
+  },
+  {
+    id: "tabs-underline",
+    name: "Tabs \u2014 Underline",
+    category: "Composite",
+    description: "Page-nav tab strip \u2014 text labels with an animated underline bar under the active tab. State knobs cover default / hover / focus / active / disabled across the individual tab item \u2014 the track bottom rule and bar shape are shared.",
+    styleProperties: [
+      // ── Track surface (shared — just the bottom rule + tab spacing)
+      { key: "trackBorderColor", label: "Track Border", control: "color", defaultValue: "var(--color-border)", section: "track" },
+      { key: "trackBorderWidth", label: "Track Border Width", control: "number", defaultValue: 1, min: 0, max: 6, step: 1, unit: "px", section: "track" },
+      { key: "gap", label: "Tab Gap", control: "number", defaultValue: 4, min: 0, max: 16, step: 1, unit: "px", section: "track" },
+      // ── Per-state tab colors. Mirrors the tabs atom shape: each state
+      // owns its own text color, filtered into a single "States" section
+      // by the State variant. Active also owns the underline bar color —
+      // the bar is the active-state's defining visual.
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "barColor", label: "Bar Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections — standalone
+      // treatments (ring outline / dimming) rather than fg/bg colors.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Bar shape (structural — always defines what the bar looks like
+      // when an active tab is rendered, so shared across states)
+      { key: "barHeight", label: "Bar Height", control: "number", defaultValue: 2, min: 1, max: 6, step: 1, unit: "px" },
+      { key: "barRadius", label: "Bar Radius", control: "slider", defaultValue: 2, min: 0, max: 4, step: 1, unit: "px" },
+      // ── Shared sizing (applies to every tab state)
+      { key: "paddingX", label: "Tab Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Tab Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 16, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Inactive Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+      { key: "iconGap", label: "Icon Gap", control: "number", defaultValue: 6, min: 2, max: 12, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a different tab.", payload: "{ value: string }" }
+    ]
+  },
+  {
+    id: "filter-tabs",
+    name: "Filter Tabs",
+    category: "Composite",
+    description: "Segmented tab strip used for status filters like All / Active / Draft. State knobs cover default / hover / focus / active / disabled across the individual filter chip \u2014 the track surface is shared.",
+    styleProperties: [
+      // ── Track surface (shared across all states)
+      { key: "trackBg", label: "Track Background", control: "color", defaultValue: "var(--color-surface)", section: "track" },
+      { key: "trackBorder", label: "Track Border", control: "color", defaultValue: "var(--color-border)", section: "track" },
+      { key: "trackRadius", label: "Track Radius", control: "slider", defaultValue: 8, min: 0, max: 99, step: 1, unit: "px", section: "track" },
+      { key: "trackPadding", label: "Track Padding", control: "number", defaultValue: 2, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      { key: "gap", label: "Tab Gap", control: "number", defaultValue: 0, min: 0, max: 8, step: 1, unit: "px", section: "track" },
+      // ── Per-state colors (filtered by State variant)
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "active" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections — standalone
+      // treatments (ring outline / dimming) rather than fg/bg colors.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every chip state)
+      { key: "tabRadius", label: "Tab Radius", control: "slider", defaultValue: 6, min: 0, max: 99, step: 1, unit: "px" },
+      { key: "paddingX", label: "Tab Padding X", control: "number", defaultValue: 12, min: 6, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Tab Padding Y", control: "number", defaultValue: 6, min: 2, max: 14, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Inactive Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a different filter.", payload: "{ value: string }" }
+    ]
+  },
+  {
+    id: "button-group",
+    name: "Button Group",
+    category: "Composite",
+    description: "Segmented button group with connected buttons. State knobs cover default / hover / focus / active / disabled across the individual button \u2014 the connecting border and outer frame are shared.",
+    styleProperties: [
+      // ── Frame (shared across all states — the connecting borders and
+      // outer rounded frame define the group as a single unit)
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px", section: "frame" },
+      // ── Per-state colors (filtered by State variant). Unlike the other
+      // segmented atoms, each button has its own non-transparent bg so
+      // every state owns both bg and text.
+      { key: "inactiveBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "default" } },
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { state: "active" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every button state)
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a different option.", payload: "{ value: string }" }
+    ]
+  },
+  {
+    id: "side-flexpane",
+    name: "Side Flexpane",
+    category: "Composite",
+    description: "Right-sliding edit panel with header, scrollable body, and footer actions.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 0, min: 0, max: 20, step: 1, unit: "px" },
+      { key: "width", label: "Width", control: "number", defaultValue: 380, min: 280, max: 520, step: 20, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 24, min: 12, max: 40, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 16, min: 13, max: 22, step: 1, unit: "px" },
+      { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" }
+    ],
+    layoutVariants: [],
+    events: [
+      { name: "onClose", description: "Fires when the user dismisses the flexpane via the close affordance or backdrop click.", payload: "void" },
+      { name: "onResize", description: "Fires while the user drags the left-edge handle to resize. Final width on drag end.", payload: "{ width: number }" },
+      { name: "onBack", description: "Fires when the user clicks the back-link bar (rendered only when `onBack` is set).", payload: "void" },
+      { name: "onExpandedChange", description: "Fires with the next expanded state when the maximize toggle is clicked (`expandable`).", payload: "{ expanded: boolean }" }
+    ]
+  },
+  {
+    id: "page-header",
+    name: "Page Header",
+    category: "Composite",
+    description: "Icon + title + meta text with trailing action buttons.",
+    styleProperties: [
+      { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 22, min: 16, max: 32, step: 1, unit: "px" },
+      { key: "metaColor", label: "Meta Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "metaSize", label: "Meta Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+      { key: "iconBg", label: "Icon Bg", control: "color", defaultValue: "var(--color-accent-subtle)", section: "colors" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "colors" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 40, min: 24, max: 64, step: 4, unit: "px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 16, min: 6, max: 32, step: 2, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 0, min: 0, max: 40, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 0, min: 0, max: 32, step: 2, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "divider",
+    name: "Divider",
+    category: "Display",
+    description: "Horizontal rule, optionally with a centred label.",
+    styleProperties: [
+      { key: "color", label: "Line Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "thickness", label: "Thickness", control: "slider", defaultValue: 1, min: 1, max: 4, step: 1, unit: "px" },
+      { key: "showLabel", label: "Show Label", control: "toggle", defaultValue: false },
+      { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "labelSize", label: "Label Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "gap", label: "Label Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "login-page",
+    name: "Login Page",
+    category: "Composite",
+    description: "Sign-in screen with a centered form card on a configurable background \u2014 solid, pattern, or image.",
+    styleProperties: [
+      { key: "bgColor", label: "Background Color", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "patternColor", label: "Pattern Color", control: "color", defaultValue: "color-mix(in srgb, var(--color-text) 8%, transparent)", section: "colors" },
+      { key: "patternSize", label: "Pattern Size", control: "number", defaultValue: 18, min: 6, max: 48, step: 2, unit: "px" },
+      { key: "imageUrl", label: "Image URL", control: "text", defaultValue: "" },
+      { key: "imageFit", label: "Image Fit", control: "select", defaultValue: "cover", options: ["cover", "contain", "repeat"] },
+      { key: "cardBg", label: "Card Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "cardBorderColor", label: "Card Border", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "cardBorderWidth", label: "Card Border Width", control: "number", defaultValue: 1, min: 0, max: 3, step: 1, unit: "px" },
+      { key: "cardRadius", label: "Card Radius", control: "slider", defaultValue: 12, min: 0, max: 32, step: 1, unit: "px" },
+      { key: "cardShadow", label: "Card Shadow", control: "toggle", defaultValue: true },
+      { key: "cardMaxWidth", label: "Card Max Width", control: "number", defaultValue: 360, min: 240, max: 560, step: 8, unit: "px" },
+      { key: "cardPadding", label: "Card Padding", control: "number", defaultValue: 32, min: 16, max: 64, step: 4, unit: "px" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 22, min: 14, max: 36, step: 1, unit: "px" },
+      { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+      { key: "subtitleSize", label: "Subtitle Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+      { key: "subtitleColor", label: "Subtitle Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "logoSize", label: "Logo Size", control: "number", defaultValue: 36, min: 16, max: 80, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "background",
+        label: "Background",
+        options: [
+          { value: "solid", label: "Solid" },
+          { value: "dots", label: "Dot Grid" },
+          { value: "stripes", label: "Diagonal Stripes" },
+          { value: "image", label: "Image" }
+        ],
+        defaultValue: "solid"
+      }
+    ]
+  },
+  {
+    id: "error-page",
+    name: "Error Page",
+    category: "Composite",
+    description: "Centered error / not-found layout \u2014 code, title, message, and action buttons.",
+    styleProperties: [
+      { key: "codeSize", label: "Code Size", control: "number", defaultValue: 88, min: 48, max: 160, step: 4, unit: "px" },
+      { key: "codeColor", label: "Code Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "colors" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 24, min: 16, max: 40, step: 1, unit: "px" },
+      { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+      { key: "messageSize", label: "Message Size", control: "number", defaultValue: 14, min: 11, max: 20, step: 1, unit: "px" },
+      { key: "messageColor", label: "Message Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "iconBg", label: "Icon Tile Bg", control: "color", defaultValue: "var(--color-accent-subtle)", section: "colors" },
+      { key: "iconColor", label: "Icon Tile Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "colors" },
+      { key: "iconSize", label: "Icon Tile Size", control: "number", defaultValue: 56, min: 32, max: 96, step: 4, unit: "px" },
+      { key: "messageMaxWidth", label: "Message Max Width", control: "number", defaultValue: 448, min: 240, max: 720, step: 8, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "404", label: "404 \u2014 Not Found" },
+          { value: "500", label: "500 \u2014 Server Error" },
+          { value: "empty", label: "Empty / Generic" }
+        ],
+        defaultValue: "404"
+      }
+    ]
+  },
+  {
+    id: "sidebar-nav-item",
+    name: "Sidebar Nav Item",
+    category: "Composite",
+    description: 'Icon + label row used in the left navigation. State knobs cover default / hover / focus / active / disabled across the row \u2014 the active state is the currently-selected nav item (renders with `aria-current="page"`). Icon tile and sizing are shared across every state.',
+    styleProperties: [
+      // ── Per-state row colors. Filtered into a single "States" section
+      // by the State variant. Each state owns both bg and text knobs
+      // (the row is opaque enough that bg matters). Focus is the
+      // exception — text knob plus the standalone ring.
+      { key: "inactiveBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface) 60%, transparent)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every state)
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 16, step: 1, unit: "px" },
+      { key: "gap", label: "Icon Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"] },
+      // ── Icon tile (sub-element, shared across every state)
+      { key: "iconBg", label: "Icon Tile Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "icon" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "icon" },
+      { key: "iconBoxSize", label: "Icon Tile Size", control: "number", defaultValue: 24, min: 16, max: 36, step: 2, unit: "px", section: "icon" },
+      { key: "iconRadius", label: "Icon Tile Radius", control: "slider", defaultValue: 6, min: 0, max: 12, step: 1, unit: "px", section: "icon" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 14, min: 10, max: 24, step: 1, unit: "px", section: "icon" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        // Persistent badge slot demo — the preview renders a sample marker
+        // (a checkmark or a count pill) in the always-visible `badge` slot so
+        // its look can be verified next to the hover-reveal trailing slot.
+        key: "badge",
+        label: "Badge",
+        options: [
+          { value: "off", label: "Off" },
+          { value: "check", label: "Checkmark" },
+          { value: "count", label: "Count" }
+        ],
+        defaultValue: "off"
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires when the user clicks the nav item (or activates it via Enter).", payload: "MouseEvent" }
+    ]
+  },
+  {
+    id: "explorer-list-item",
+    name: "Explorer List Item",
+    category: "Composite",
+    description: "Component-explorer / file-tree row. State knobs cover default / hover / focus / active / disabled \u2014 the active state is the selected entry and shows a left rail (an accent bar) instead of a filled tile, distinguishing it from SidebarNavItem's icon-tile style.",
+    styleProperties: [
+      // ── Per-state row colors. Filtered into a single "States" section
+      // by the State variant. Each state owns bg + text where relevant;
+      // focus is the exception (text knob + standalone ring).
+      { key: "inactiveBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface) 60%, transparent)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // Rail — the visual treatment of the active state. Scoped to the
+      // active state so the knobs sit next to activeBg / activeText.
+      { key: "railColor", label: "Rail Color", control: "color", defaultValue: "var(--color-accent)", section: "rail", showWhen: { state: "active" } },
+      { key: "railWidth", label: "Rail Width", control: "number", defaultValue: 2, min: 1, max: 6, step: 1, unit: "px", section: "rail", showWhen: { state: "active" } },
+      { key: "railHeight", label: "Rail Height", control: "number", defaultValue: 16, min: 8, max: 24, step: 2, unit: "px", section: "rail", showWhen: { state: "active" } },
+      { key: "railRadius", label: "Rail Radius", control: "slider", defaultValue: 999, min: 0, max: 999, step: 1, unit: "px", section: "rail", showWhen: { state: "active" } },
+      // Trailing slot — shared across every state (always visible).
+      { key: "trailingColor", label: "Trailing Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "trailing" },
+      { key: "trailingSize", label: "Trailing Size", control: "number", defaultValue: 10, min: 8, max: 14, step: 1, unit: "px", section: "trailing" },
+      // ── Shared sizing (applies to every state)
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 16, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 8, min: 2, max: 16, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires when the user clicks the row (selection or navigation).", payload: "MouseEvent" }
+    ]
+  },
+  {
+    id: "sidebar-nav-trigger",
+    name: "Sidebar Nav Trigger",
+    category: "Composite",
+    description: "A rail row that OPENS something rather than navigating to it \u2014 a workspace switcher, an account menu, an environment picker. A <button> extending ButtonHTMLAttributes, so a Menu's or Listbox's `triggerProps` spread straight onto it, ref and ARIA included. Four optional slots: icon (a bare Icon in a switcher, an Avatar in the account row), caption (the small line beside the value; captionPlacement 'above' | 'below', default above \u2014 above LABELS the level this control changes, below QUALIFIES the value), children (the value) and trailing (the chevron \u2014 shown as soon as it is passed; no hover-reveal, unlike Sidebar Nav Item's trailing slot. The Trailing picker here decides whether the showcase PASSES the slot at all, exactly like Mark and Caption \u2014 it is not a visibility gate in the component). The atom draws NO tile behind the icon: it reserves the slot, sizes it, aligns it, and paints nothing. And it reserves nothing it was not given \u2014 no icon and the text starts at the padding edge, no caption and the value centres, no trailing and there is no gap where a chevron would have been. Sibling of Sidebar Nav Item rather than a variant of it: that one renders an <a>, hides trailing until hover, paints an icon tile and has a single-line label. `collapsed` renders it for a 64px rail: a 46px tile, the chevron dropped, and caption + value clipped but kept in the DOM so the accessible name survives. Pair it with a 32px mark. See the collapsed prop below for the reasoning.",
+    styleProperties: [
+      // ── Per-state surface. Hover and open paint the SAME thing in both
+      // variants, so they share one knob — a second one would only let a
+      // designer make them disagree, and they mean the same thing to the eye.
+      // Open has no prop: it is read from [aria-expanded="true"], which Menu
+      // and Listbox already set through triggerProps.
+      { key: "bg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: ["hover", "open"] } },
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      // Dimmed, not recoloured — a disabled `outlined` trigger has to stay the
+      // same box. One opacity covers both variants, so there is nothing to keep
+      // in sync between them.
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.45, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── The outlined variant's resting chrome. The border is deliberately
+      // NOT per-state: it holds through hover and open, because a border that
+      // moved too would be a second signal for a fact the surface carries.
+      { key: "outlinedBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "outlined", showWhen: { variant: "outlined" } },
+      { key: "outlinedBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "outlined", showWhen: { variant: "outlined" } },
+      // ── The value.
+      // Gated on `collapsed: no` — the collapsed row clips its text away, so
+      // every type knob below is a slider with no visible effect there. Same
+      // reasoning for the caption group, the trailing colour, and padding/gap.
+      { key: "valueColor", label: "Color", control: "color", defaultValue: "var(--color-text)", section: "value", showWhen: { collapsed: "no" } },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px", section: "value", showWhen: { collapsed: "no" } },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"], section: "value", showWhen: { collapsed: "no" } },
+      // ── The caption. Muted is under the AA text floor on the card surface
+      // (2.54:1), which is acceptable here ONLY because a caption names the
+      // control rather than carrying content — the value beneath it is the
+      // content. Swap to --color-text-strong if that ever stops being true.
+      { key: "captionColor", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      { key: "captionFontSize", label: "Font Size", control: "number", defaultValue: 10, min: 8, max: 14, step: 1, unit: "px", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      { key: "captionFontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"], section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      // Uppercase is the DEFAULT, not the definition — an eyebrow in most rails,
+      // but a sentence-case caption under an address is the same slot read
+      // differently, and a brand font may not carry caps well. Paired knob: the
+      // tracking below exists to open up caps, so turning this off usually means
+      // turning that down too.
+      { key: "captionTextTransform", label: "Text Transform", control: "select", defaultValue: "uppercase", options: ["uppercase", "none", "capitalize", "lowercase"], section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      // A number in `em`, not a free-text CSS length: the unit is fixed, so the
+      // only thing a text field adds is the chance to type `6px` (catastrophic
+      // tracking at a 10px caption) or a bare `0.06`, which is invalid CSS the
+      // browser drops in silence. `em` and not `px` so the tracking scales with
+      // the caption's own size — and with the brand font, which Brand Settings
+      // can change under it.
+      { key: "captionLetterSpacing", label: "Letter Spacing", control: "number", defaultValue: 0.06, min: 0, max: 0.2, step: 0.01, unit: "em", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      { key: "captionGap", label: "Row Gap", control: "number", defaultValue: 2, min: 0, max: 8, step: 1, unit: "px", section: "caption", showWhen: { withCaption: "yes", collapsed: "no" } },
+      // ── The mark. `iconSize` is a MIN box, not a fixed one: it reserves and
+      // aligns without squeezing a child that brings its own size (an Avatar).
+      // Gated to the Icon mark alone. Being a FLOOR, it does nothing while it
+      // sits below the mark's own size — measured, a 32px `Avatar size='small'`
+      // in a 28px slot yields a 32px slot, and Avatar's 40px default is further
+      // out still. Exposed for Avatar it was a knob a designer drags through its
+      // whole default range for no visible effect, waking up only past 32. The
+      // lever that actually sizes an avatar is Avatar's own `size` preset; two
+      // knobs competing to answer "how big is the mark" is worse than one.
+      { key: "iconSize", label: "Slot Size", control: "number", defaultValue: 28, min: 16, max: 44, step: 2, unit: "px", section: "icon", showWhen: { mark: "icon" } },
+      // Only the Icon mark inherits this colour — an Avatar paints itself.
+      { key: "iconColor", label: "Color", control: "color", defaultValue: "var(--color-text-strong)", section: "icon", showWhen: { mark: "icon" } },
+      { key: "trailingColor", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "trailing", showWhen: { withTrailing: "yes", collapsed: "no" } },
+      // ── Shared sizing. Padding and gap are the two that STOP applying when
+      // collapsed (the tile sets `padding: 0` and has one in-flow child left),
+      // so they are gated; radius still paints the 32x32 box and stays.
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 10, min: 2, max: 20, step: 1, unit: "px", showWhen: { collapsed: "no" } },
+      { key: "borderRadius", label: "Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px" },
+      // The collapsed tile's own footprint — a MINIMUM, so a mark larger than it
+      // (an `Avatar`) grows the row rather than being clipped. 46px deliberately
+      // differs from the 32px `app-sidebar` gives its collapsed nav items: a
+      // trigger has lost its chevron and its text at rail width, so footprint is
+      // the only thing left saying it opens something rather than navigating.
+      // It is also a composition choice: the tile is a surface AROUND the mark,
+      // so a 32px mark (`Avatar size="small"`) sits with ~7px on every side,
+      // mirroring `sidebar-nav-item`'s 32px tile around a smaller icon.
+      { key: "collapsedSize", label: "Tile Size", control: "number", defaultValue: 46, min: 24, max: 64, step: 2, unit: "px", showWhen: { collapsed: "yes" } }
+    ],
+    layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "outlined", label: "Outlined" },
+          { value: "plain", label: "Plain" }
+        ],
+        defaultValue: "outlined"
+      },
+      {
+        // `open` and `disabled` are not classes the showcase fakes — it applies
+        // the real `aria-expanded="true"` and the real `disabled` attribute,
+        // which ARE the atom's selectors for those states, so the picker
+        // exercises the production mechanism. Only `hover` / `focus` need the
+        // kit's `--state-*` forced classes (a pointer and the tab ring cannot be
+        // parked on demand); those share a declaration block with the real
+        // pseudo-selectors and so cannot drift from them.
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "open", label: "Open" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        // The mark slot takes either kind of child, and `Avatar` is the case
+        // worth being able to see: it proves the slot paints no tile and does
+        // not squeeze a child that brings its own size. `None` is here for the
+        // same reason as the other two slot pickers — to show what the atom
+        // does NOT reserve: turn a slot off and the row closes up rather than
+        // leaving a hole. The showcase's caption and value follow this pick,
+        // since an avatar beside a workspace name would misrepresent the atom.
+        key: "mark",
+        label: "Mark",
+        options: [
+          { value: "icon", label: "Icon" },
+          { value: "avatar", label: "Avatar" },
+          { value: "none", label: "None" }
+        ],
+        defaultValue: "icon"
+      },
+      {
+        // The 64px rail. Its own picker rather than a value on `state`, because
+        // it is orthogonal to every state — a collapsed row still hovers, opens
+        // and disables, and folding the two would make five of those
+        // combinations unreachable.
+        key: "collapsed",
+        label: "Rail",
+        options: [
+          { value: "no", label: "Expanded" },
+          { value: "yes", label: "Collapsed" }
+        ],
+        defaultValue: "no"
+      },
+      {
+        key: "withCaption",
+        label: "Caption",
+        options: [
+          { value: "yes", label: "On" },
+          { value: "no", label: "Off" }
+        ],
+        defaultValue: "yes",
+        // Collapsed clips the caption and drops the chevron, so both slot
+        // toggles (and the placement picker) would be no-ops there — they
+        // disappear rather than sit dead, per the list-item precedent.
+        showWhen: { collapsed: "no" }
+      },
+      {
+        // Above the value the caption LABELS the level ("Workspace"); below it,
+        // it QUALIFIES the value ("Tenant owner" under an address). Swapped in
+        // the markup, not with `column-reverse` — reversing visually while the
+        // DOM stays put would split reading order from visual order (WCAG
+        // 1.3.2) and keep announcing the pair the wrong way round.
+        key: "captionPlacement",
+        label: "Caption Position",
+        options: [
+          { value: "above", label: "Above" },
+          { value: "below", label: "Below" }
+        ],
+        defaultValue: "above",
+        showWhen: { withCaption: "yes", collapsed: "no" }
+      },
+      {
+        key: "withTrailing",
+        label: "Trailing",
+        options: [
+          { value: "yes", label: "On" },
+          { value: "no", label: "Off" }
+        ],
+        defaultValue: "yes",
+        showWhen: { collapsed: "no" }
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires when the row is activated. Wired for you when the trigger is spread with a Menu/Listbox `triggerProps` \u2014 do not add your own on top, it would override theirs.", payload: "MouseEvent" }
+    ],
+    api: {
+      importPath: "@viax.io/uxm/ui",
+      importNames: "SidebarNavTrigger",
+      props: [
+        { name: "icon", type: "ReactNode", description: "The mark on the left \u2014 a bare Icon in a switcher, an Avatar in an account row. No tile is drawn behind it: the slot is reserved, sized and aligned, and paints nothing." },
+        { name: "caption", type: "ReactNode", description: "The small line beside the value. It sits inside the button, so it joins the accessible name \u2014 pass an explicit aria-label if a pairing reads badly." },
+        { name: "captionPlacement", type: '"above" | "below"', defaultValue: '"above"', description: `Which side of the value the caption sits on. Above it LABELS the level this control changes (a switcher's "Workspace"); below it QUALIFIES the value (an account row's "Tenant owner" under the address). Swapped in the markup rather than with flex-direction: column-reverse, so reading order keeps matching visual order (WCAG 1.3.2) and the accessible name follows the row.` },
+        { name: "children", type: "ReactNode", description: "The value \u2014 the workspace name, the signed-in address." },
+        { name: "trailing", type: "ReactNode", description: "The chevron. Visible at rest, with no reveal-on-hover behaviour: a control that opens something has to advertise it before you point at it." },
+        { name: "variant", type: '"plain" | "outlined"', defaultValue: '"plain"', description: "plain \u2014 nothing at rest, for the account row at the foot of the rail. outlined \u2014 a hairline plus the card surface, for the switcher, which stands in a box because it names the level everything below it belongs to." },
+        { name: "collapsed", type: "boolean", defaultValue: "false", description: 'Render for a 64px rail: a 46px tile (--uxm-sidebar-nav-trigger-collapsed-size, a MINIMUM rather than a clamp \u2014 a mark larger than it grows the row instead of being clipped), the trailing chevron dropped, and caption + value kept in the DOM but visually hidden \u2014 so the button announces identically collapsed and expanded rather than becoming a nameless icon. 46 deliberately differs from the 32px AppSidebar gives its collapsed nav items: a trigger has lost both chevron and text at this width, so footprint is the only signal left that it opens something. The tile is a surface AROUND the mark rather than a frame hugging it \u2014 pair it with Avatar size="small" (32px) for ~7px on every side. outlined keeps its border at this size, since the box is then the only thing distinguishing a switcher from a plain account row. Pass title as well: with the chevron gone, only position and the mark still say the row opens something.' }
+      ]
+    }
+  },
+  {
+    id: "explorer-section",
+    name: "Explorer Section",
+    category: "Composite",
+    description: "Disclosure-style section header for grouping rows in a navigation list. Chevron rotates with the open state; indicator slot is for category color dots etc. State knobs cover default / hover / focus / disabled. `active` is intentionally omitted \u2014 section headers have no selection concept; toggling drives the orthogonal `open` variant.",
+    styleProperties: [
+      // ── Per-state row colors. Filtered into the "States" section by
+      // the State variant. The header is always a button, so all state
+      // rules fire on the root selector. Disabled is a visual treatment
+      // (dimmed, muted), not strictly an interaction state.
+      { key: "inactiveBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface) 40%, transparent)", section: "states", showWhen: { state: "hover" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "states", showWhen: { state: "focus" } },
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared sizing (applies to every state)
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 6, min: 0, max: 12, step: 1, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 8, min: 0, max: 24, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "600", options: ["500", "600", "700"] },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 8, min: 2, max: 16, step: 1, unit: "px" },
+      // ── Chevron sub-element (shared across every state)
+      { key: "chevronColor", label: "Chevron Color", control: "color", defaultValue: "var(--color-text-muted)", section: "chevron" },
+      { key: "chevronSize", label: "Chevron Size", control: "number", defaultValue: 12, min: 8, max: 18, step: 1, unit: "px", section: "chevron" },
+      // ── Trailing sub-element (shared)
+      { key: "trailingColor", label: "Trailing Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "trailing" },
+      { key: "trailingSize", label: "Trailing Size", control: "number", defaultValue: 10, min: 8, max: 14, step: 1, unit: "px", section: "trailing" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        // `open` is orthogonal to interaction state — drives the
+        // chevron rotation and `aria-expanded` on the atom.
+        key: "open",
+        label: "Open",
+        options: [
+          { value: "true", label: "Expanded" },
+          { value: "false", label: "Collapsed" }
+        ],
+        defaultValue: "true"
+      }
+    ],
+    events: [
+      { name: "onToggle", description: "Fires when the user clicks the section header to expand or collapse children.", payload: "{ open: boolean }" }
+    ]
+  },
+  {
+    id: "inline-action",
+    name: "Inline Action",
+    category: "Buttons",
+    description: 'Tertiary text-with-optional-icon button for dense UI \u2014 "Reset section," "Match in N other," "Edit." Muted by default; transitions to accent on hover. Smaller and less prominent than ButtonGhost; used inline in section headers and field rows.',
+    styleProperties: [
+      // Text-only button: only icon color (well, text color) changes per state.
+      { key: "color", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "hover" } },
+      { key: "activeColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "active" } },
+      { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
+      { key: "focusColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Shared style
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "gap", label: "Icon Gap", control: "number", defaultValue: 4, min: 2, max: 8, step: 1, unit: "px" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 10, min: 8, max: 16, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "active", label: "Pressed" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires on mouse click or Enter/Space activation.", payload: "MouseEvent<HTMLButtonElement>" }
+    ]
+  },
+  {
+    id: "section-header",
+    name: "Section Header",
+    category: "Display",
+    description: 'Small uppercase label for grouping fields in dense settings panels \u2014 the "VARIANT" / "COLORS" / "STYLE" labels above grouped form rows. Distinct from PageHeader (page-level) and DetailSection (bordered card).',
+    styleProperties: [
+      { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "colors" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "titleWeight", label: "Title Weight", control: "select", defaultValue: "600", options: ["500", "600", "700"] },
+      { key: "subtitleColor", label: "Subtitle Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "subtitleSize", label: "Subtitle Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "gap", label: "Title-Subtitle Gap", control: "number", defaultValue: 2, min: 0, max: 12, step: 1, unit: "px" },
+      { key: "marginBottom", label: "Margin Bottom", control: "number", defaultValue: 12, min: 0, max: 32, step: 2, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "detail-section",
+    name: "Detail Section",
+    category: "Display",
+    description: "Card-like section with icon header, title/subtitle, and an accent rail.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 20, step: 1, unit: "px" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 20, min: 8, max: 40, step: 2, unit: "px" },
+      { key: "iconBg", label: "Icon Bg", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 15, min: 12, max: 22, step: 1, unit: "px" },
+      { key: "subtitleColor", label: "Subtitle Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "accentWidth", label: "Accent Rail Width", control: "slider", defaultValue: 3, min: 0, max: 8, step: 1, unit: "px" },
+      { key: "accentColor", label: "Accent Color", control: "color", defaultValue: "var(--color-accent)", section: "colors" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "breadcrumb",
+    name: "Breadcrumb",
+    category: "Composite",
+    description: "Path navigation \u2014 clickable link crumbs leading to the current page, with configurable separators (chevron / slash / dot / dash). State knobs cover default / hover / focus / active / disabled. The `active` state is the current page styling \u2014 the trailing non-clickable crumb that marks where the user is. Clicking a link crumb truncates the path so that crumb becomes the new active.",
+    styleProperties: [
+      // ── Per-state link crumb colors. Filtered into a single "States"
+      // section by the State variant. Links are transparent in every state
+      // (the breadcrumb itself has no background) — just text colors plus
+      // the standalone focus ring, disabled opacity, and the active-state
+      // font weight (the current page is traditionally bolder).
+      { key: "inactiveText", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverText", label: "Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "activeText", label: "Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "activeFontWeight", label: "Font Weight", control: "select", defaultValue: "600", options: ["400", "500", "600", "700"], section: "states", showWhen: { state: "active" } },
+      { key: "disabledText", label: "Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "states", showWhen: { state: "disabled" } },
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Separator (between crumbs)
+      { key: "separatorColor", label: "Separator Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "separator" },
+      { key: "separatorSize", label: "Separator Size", control: "number", defaultValue: 13, min: 8, max: 20, step: 1, unit: "px", section: "separator" },
+      // ── Shared sizing + underline (applies across every state)
+      { key: "linkWeight", label: "Link Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"] },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 6, min: 2, max: 16, step: 1, unit: "px" },
+      { key: "underlineOffset", label: "Underline Offset", control: "number", defaultValue: 3, min: 1, max: 8, step: 1, unit: "px" },
+      { key: "underlineThickness", label: "Underline Thickness", control: "number", defaultValue: 1, min: 1, max: 3, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "active", label: "Active" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        key: "separator",
+        label: "Separator",
+        options: [
+          { value: "chevron", label: "Chevron" },
+          { value: "slash", label: "Slash" },
+          { value: "dot", label: "Dot" },
+          { value: "dash", label: "Dash" }
+        ],
+        defaultValue: "chevron"
+      }
+    ]
+  },
+  {
+    id: "link",
+    name: "Link",
+    category: "Display",
+    description: "Generic inline text link \u2014 three underline modes plus an optional external indicator. State knobs cover default / hover / focus / disabled on the anchor. `:active` is intentionally omitted \u2014 for a plain anchor it's the transient mouse-down pseudo and overlaps with hover semantically.",
+    styleProperties: [
+      // ── Per-state colors. Filtered into a single "States" section by
+      // the State variant. Link is transparent in every state — no bg
+      // knobs, just text colors plus the standalone focus ring and
+      // disabled opacity.
+      { key: "inactiveText", label: "Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverText", label: "Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "hover" } },
+      { key: "focusText", label: "Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "focus" } },
+      { key: "disabledText", label: "Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Shared typography + underline knobs (apply across every state)
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "underlineOffset", label: "Underline Offset", control: "number", defaultValue: 3, min: 1, max: 8, step: 1, unit: "px" },
+      { key: "underlineThickness", label: "Underline Thickness", control: "number", defaultValue: 1, min: 1, max: 3, step: 1, unit: "px" },
+      { key: "externalIconSize", label: "External Icon Size", control: "number", defaultValue: 12, min: 8, max: 18, step: 1, unit: "px" },
+      { key: "externalIconGap", label: "External Icon Gap", control: "number", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        key: "underline",
+        label: "Underline",
+        options: [
+          { value: "none", label: "None" },
+          { value: "hover", label: "On Hover" },
+          { value: "always", label: "Always" }
+        ],
+        defaultValue: "hover"
+      },
+      {
+        key: "external",
+        label: "External",
+        options: [
+          { value: "false", label: "Internal" },
+          { value: "true", label: "External" }
+        ],
+        defaultValue: "false"
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires on click. The consumer's router or `href` handles the navigation.", payload: "MouseEvent<HTMLAnchorElement>" }
+    ]
+  },
+  {
+    id: "back-link",
+    name: "Back Link",
+    category: "Display",
+    description: "Inline text link with leading arrow for breadcrumb navigation.",
+    styleProperties: [
+      // Text-only navigation link — text color changes per state.
+      { key: "color", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+      { key: "activeColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
+      { key: "focusColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Shared style
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+      { key: "fontWeight", label: "Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"] },
+      { key: "gap", label: "Icon Gap", control: "number", defaultValue: 6, min: 2, max: 16, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover" },
+          { value: "active", label: "Pressed" },
+          { value: "focus", label: "Focus" },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onClick", description: "Fires on click. The consumer's router or `href` handles the navigation.", payload: "MouseEvent<HTMLAnchorElement>" }
+    ]
+  },
+  {
+    id: "badge",
+    name: "Badge",
+    category: "Display",
+    description: "Notification indicator. Dot mode shows a colored circle with an optional label; count mode shows a small pill with a number that clamps to 99+.",
+    styleProperties: [
+      // Per-tone colors. `bg` paints the badge; `text` only matters in count
+      // mode (dot has no children). Gated by the `tone` variant so the
+      // properties panel only shows the active tone's knobs.
+      // Count mode reuses Tag's tonal vocabulary (soft `${type}-bg` paired
+      // with bold `${type}-text`) so adjacent Badge counts and Tags read
+      // as the same status family. Dot mode uses a single solid hue knob
+      // (`${type}DotColor`) so the indicator stays a strong color blob —
+      // splitting per-mode lets each default to the right token without
+      // forcing one shared bg compromise.
+      { key: "accentBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "colors", showWhen: { type: "accent", mode: "count" } },
+      { key: "accentText", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "colors", showWhen: { type: "accent", mode: "count" } },
+      { key: "accentDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "colors", showWhen: { type: "accent", mode: "dot" } },
+      { key: "successBg", label: "Background", control: "color", defaultValue: "var(--color-success-bg)", section: "colors", showWhen: { type: "success", mode: "count" } },
+      { key: "successText", label: "Text Color", control: "color", defaultValue: "var(--color-success-text)", section: "colors", showWhen: { type: "success", mode: "count" } },
+      { key: "successDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-success-text)", section: "colors", showWhen: { type: "success", mode: "dot" } },
+      { key: "warningBg", label: "Background", control: "color", defaultValue: "var(--color-warning-bg)", section: "colors", showWhen: { type: "warning", mode: "count" } },
+      { key: "warningText", label: "Text Color", control: "color", defaultValue: "var(--color-warning-text)", section: "colors", showWhen: { type: "warning", mode: "count" } },
+      { key: "warningDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-warning-text)", section: "colors", showWhen: { type: "warning", mode: "dot" } },
+      { key: "dangerBg", label: "Background", control: "color", defaultValue: "var(--color-danger-bg)", section: "colors", showWhen: { type: "danger", mode: "count" } },
+      { key: "dangerText", label: "Text Color", control: "color", defaultValue: "var(--color-danger-text)", section: "colors", showWhen: { type: "danger", mode: "count" } },
+      { key: "dangerDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-danger-text)", section: "colors", showWhen: { type: "danger", mode: "dot" } },
+      { key: "infoBg", label: "Background", control: "color", defaultValue: "var(--color-info-bg)", section: "colors", showWhen: { type: "info", mode: "count" } },
+      { key: "infoText", label: "Text Color", control: "color", defaultValue: "var(--color-info-text)", section: "colors", showWhen: { type: "info", mode: "count" } },
+      { key: "infoDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-info-text)", section: "colors", showWhen: { type: "info", mode: "dot" } },
+      { key: "neutralBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors", showWhen: { type: "neutral", mode: "count" } },
+      { key: "neutralText", label: "Text Color", control: "color", defaultValue: "var(--color-text-strong)", section: "colors", showWhen: { type: "neutral", mode: "count" } },
+      { key: "neutralDotColor", label: "Dot Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors", showWhen: { type: "neutral", mode: "dot" } },
+      // Dot mode — circle (always 50% radius) plus optional label knobs.
+      // The dot is the `__dot` inner span; tone paints it. When children
+      // are provided, the root becomes a flex row containing dot + label.
+      { key: "dotSize", label: "Dot Size", control: "number", defaultValue: 8, min: 4, max: 16, step: 1, unit: "px", showWhen: { mode: "dot" } },
+      { key: "labelFontSize", label: "Label Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px", showWhen: { mode: "dot" } },
+      { key: "labelFontWeight", label: "Label Font Weight", control: "select", defaultValue: "500", options: ["400", "500", "600", "700"], showWhen: { mode: "dot" } },
+      { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text)", section: "colors", showWhen: { mode: "dot" } },
+      { key: "labelGap", label: "Label Gap", control: "number", defaultValue: 8, min: 2, max: 16, step: 1, unit: "px", showWhen: { mode: "dot" } },
+      // Count mode — pill with min-width so single digits stay round.
+      { key: "countPaddingX", label: "Padding X", control: "number", defaultValue: 6, min: 2, max: 16, step: 1, unit: "px", showWhen: { mode: "count" } },
+      { key: "countPaddingY", label: "Padding Y", control: "number", defaultValue: 1, min: 0, max: 8, step: 1, unit: "px", showWhen: { mode: "count" } },
+      { key: "countMinWidth", label: "Min Width", control: "number", defaultValue: 18, min: 12, max: 36, step: 1, unit: "px", showWhen: { mode: "count" } },
+      { key: "countFontSize", label: "Font Size", control: "number", defaultValue: 11, min: 9, max: 16, step: 1, unit: "px", showWhen: { mode: "count" } },
+      { key: "countFontWeight", label: "Font Weight", control: "select", defaultValue: "600", options: ["400", "500", "600", "700"], showWhen: { mode: "count" } },
+      { key: "countBorderRadius", label: "Border Radius", control: "number", defaultValue: 999, min: 0, max: 999, step: 1, unit: "px", showWhen: { mode: "count" } }
+    ],
+    layoutVariants: [
+      {
+        key: "mode",
+        label: "Mode",
+        options: [
+          { value: "dot", label: "Dot" },
+          { value: "count", label: "Count" }
+        ],
+        defaultValue: "count"
+      },
+      {
+        key: "type",
+        label: "Type",
+        options: [
+          { value: "accent", label: "Accent" },
+          { value: "success", label: "Success" },
+          { value: "warning", label: "Warning" },
+          { value: "danger", label: "Danger" },
+          { value: "info", label: "Info" },
+          { value: "neutral", label: "Neutral" }
+        ],
+        defaultValue: "danger"
+      }
+    ]
+  },
+  {
+    id: "thumbnail",
+    name: "Thumbnail",
+    category: "Display",
+    description: "Bounded image frame for product photos, file previews, and entity logos. Falls back to a placeholder icon when no image is provided.",
+    styleProperties: [
+      { key: "size", label: "Size", control: "number", defaultValue: 48, min: 24, max: 120, step: 4, unit: "px" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 60, step: 1, unit: "px", section: "colors" },
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderWidth", label: "Border Width", control: "number", defaultValue: 2, min: 0, max: 4, step: 1, unit: "px" },
+      { key: "placeholderColor", label: "Placeholder Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "colors" }
+    ],
+    layoutVariants: [
+      {
+        key: "fit",
+        label: "Fit",
+        options: [
+          { value: "cover", label: "Cover" },
+          { value: "contain", label: "Contain" }
+        ],
+        defaultValue: "cover"
+      },
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "image", label: "With Image" },
+          { value: "placeholder", label: "Placeholder" }
+        ],
+        defaultValue: "image"
+      }
+    ]
+  },
+  {
+    id: "calendar",
+    name: "Calendar",
+    category: "Display",
+    description: "Month-view calendar. Selects today on mount; click a day to move the selection. Today's outline stays put regardless of selection. Light-touch atom \u2014 selection state internal (overridable), no library binding.",
+    styleProperties: [
+      // ── Frame: the outer container's surface, border, corners, padding.
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "frame" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 24, step: 1, unit: "px", section: "frame" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px", section: "frame" },
+      // Elevation — on by default (the floating-surface look), tunable rather
+      // than a bare on/off: the box-shadow is built from these three vars.
+      // (Code can still drop it entirely with the `shadow={false}` prop.)
+      { key: "shadowColor", label: "Color", control: "color", defaultValue: "rgba(0, 0, 0, 0.12)", section: "shadow" },
+      { key: "shadowBlur", label: "Blur", control: "slider", defaultValue: 20, min: 0, max: 48, step: 1, unit: "px", section: "shadow" },
+      { key: "shadowOffsetY", label: "Offset Y", control: "slider", defaultValue: 6, min: 0, max: 24, step: 1, unit: "px", section: "shadow" },
+      // ── Header: month / year label + prev/next nav buttons.
+      { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "header" },
+      { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 12, max: 20, step: 1, unit: "px", section: "header" },
+      { key: "navColor", label: "Nav Button Color", control: "color", defaultValue: "var(--color-text-muted)", section: "header" },
+      // ── Weekday row: the "Sun Mon Tue..." labels above the day grid.
+      { key: "weekdayColor", label: "Weekday Color", control: "color", defaultValue: "var(--color-text-muted)", section: "weekday" },
+      { key: "weekdaySize", label: "Weekday Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px", section: "weekday" },
+      // ── Shared States: state colors that apply across day, month, and
+      // year cells. Tuning these once changes all three cell types in the
+      // matching state. Section appears only for the four states whose
+      // knobs live here (default / today / selected / hover). Listed before
+      // per-cell-type sections so designers tune cross-cutting concerns first.
+      { key: "defaultColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "shared-states", showWhen: { cellState: "default" } },
+      { key: "todayBorderColor", label: "Outline Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+      { key: "todayColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+      { key: "selectedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "selected" } },
+      { key: "selectedColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "shared-states", showWhen: { cellState: "selected" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-text) 6%, transparent)", section: "shared-states", showWhen: { cellState: "hover" } },
+      // ── Date Cell: dimensions + day-only state colors. In-range / range
+      // edges / outside-month / disabled only exist on day cells, so their
+      // color knobs live here gated by `cellState`. (Today, selected, hover,
+      // and default text color are shared across all cell types — those
+      // live in "Shared States" above.)
+      { key: "cellSize", label: "Cell Size", control: "number", defaultValue: 36, min: 28, max: 48, step: 2, unit: "px", section: "day-cell" },
+      { key: "cellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "day-cell" },
+      { key: "cellRadius", label: "Cell Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "day-cell" },
+      { key: "inRangeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "day-cell", showWhen: { cellState: "in-range" } },
+      { key: "inRangeColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "in-range" } },
+      { key: "rangeStartBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-start" } },
+      { key: "rangeStartColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-start" } },
+      { key: "rangeEndBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-end" } },
+      { key: "rangeEndColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-end" } },
+      { key: "outsideColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "outside" } },
+      { key: "disabledColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "disabled" } },
+      // ── Month & Year Cells: drill-up navigation surfaces. One Cell Size
+      // knob drives both dimensions (square cells, same pattern as Date Cell)
+      // and is shared between month and year cells — they live in the same
+      // 4-col grid with the same visual role, so one set of knobs is enough.
+      // Knob keeps the `monthCell` prefix; CSS for both `.uxm-calendar__month`
+      // and `.uxm-calendar__year` reads it.
+      { key: "monthCellSize", label: "Cell Size", control: "number", defaultValue: 64, min: 40, max: 120, step: 4, unit: "px", section: "month-year-cells" },
+      { key: "monthCellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "month-year-cells" },
+      // ── Today button: the footer action that jumps the view back to the
+      // current month. Its own knobs (not the today-CELL ones above).
+      { key: "todayButtonColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent)", section: "todayButton" },
+      { key: "todayButtonHoverBg", label: "Hover Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-accent) 12%, transparent)", section: "todayButton" },
+      { key: "todayButtonSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "todayButton" }
+    ],
+    layoutVariants: [
+      {
+        key: "cellState",
+        label: "Cell State",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "today", label: "Today" },
+          { value: "selected", label: "Selected" },
+          { value: "in-range", label: "In Range" },
+          { value: "range-start", label: "Range Start" },
+          { value: "range-end", label: "Range End" },
+          { value: "outside", label: "Outside Month" },
+          { value: "disabled", label: "Disabled" },
+          { value: "hover", label: "Hover" }
+        ],
+        defaultValue: "default"
+      }
+    ],
+    events: [
+      { name: "onChange", description: "Fires when the user picks a date cell.", payload: "{ value: Date }" },
+      { name: "onMonthChange", description: "Fires when the user navigates to a different month via the prev/next chevrons or by tapping the header.", payload: "{ year: number, month: number }" }
+    ]
+  },
+  {
+    id: "icon-tile",
+    name: "Icon Tile",
+    category: "Display",
+    description: "Small rounded square wrapping an icon with a colored background \u2014 the accent chip in front of row cards / list items / type entries.",
+    styleProperties: [
+      { key: "size", label: "Tile Size", control: "number", defaultValue: 28, min: 16, max: 56, step: 2, unit: "px" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 6, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "iconBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 14, min: 10, max: 28, step: 1, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "meta-row",
+    name: "Meta Row",
+    category: "Display",
+    description: 'Dot-separated metadata strip \u2014 "v1.2 \xB7 3 days ago \xB7 Sarah" \u2014 used in card footers and list rows.',
+    styleProperties: [
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px" },
+      { key: "color", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "gap", label: "Item Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px" },
+      { key: "dotSize", label: "Dot Size", control: "number", defaultValue: 4, min: 2, max: 10, step: 1, unit: "px" },
+      { key: "dotColor", label: "Dot Color", control: "color", defaultValue: "color-mix(in srgb, var(--color-text) 20%, transparent)", section: "colors" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "form-field",
+    name: "Form Field",
+    category: "Forms",
+    description: "Sole owner of label theming for the form family. Pairs a label with any UXM input (TextInput, Select, ToggleSwitch, etc.); optional hint line below. `labelPosition` flips between top (column stack) and side (grid layout).",
+    styleProperties: [
+      // Per-tint label colours — the Label Tint VARIANT (below) picks which
+      // tint a field uses; these knobs define what each tint looks like.
+      // One knob per tint, gated to the active tint so the panel reads
+      // "Per Label Tint · <value>". Tints apply to both label variants
+      // (default + overline) — the variant owns typography, the tint colour.
+      { key: "tintStrongColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-strong)", section: "colors", showWhen: { labelTint: "strong" } },
+      { key: "tintDefaultColor", label: "Label Color", control: "color", defaultValue: "var(--color-text)", section: "colors", showWhen: { labelTint: "default" } },
+      { key: "tintMutedColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors", showWhen: { labelTint: "muted" } },
+      // Typography — per label variant. The overline variant owns only its
+      // size here (weight/letter-spacing stay token-level).
+      { key: "labelSize", label: "Label Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px", showWhen: { labelVariant: "default" } },
+      { key: "labelWeight", label: "Label Weight", control: "select", defaultValue: "500", options: ["400", "500", "600"], showWhen: { labelVariant: "default" } },
+      { key: "overlineSize", label: "Label Size", control: "number", defaultValue: 11, min: 9, max: 16, step: 1, unit: "px", showWhen: { labelVariant: "overline" } },
+      // Hint — its own section, shared across every variant/tint (no showWhen
+      // anywhere in it, so the panel labels it "Shared").
+      { key: "hintColor", label: "Hint Color", control: "color", defaultValue: "var(--color-text-muted)", section: "hint" },
+      { key: "hintSize", label: "Hint Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "hint" },
+      // Label Gap — top-layout-specific. Lives in its own `topLayout`
+      // section parallel to `sideLayout`, so the default STYLE section
+      // contains only truly-shared knobs (labelSize, weight, hintSize,
+      // hintGap) instead of getting polluted with a per-position knob.
+      // Top and side layouts use the gap for visually different
+      // distances (vertical vs horizontal), so each owns its own value.
+      { key: "gap", label: "Label Gap", control: "number", defaultValue: 8, min: 2, max: 32, step: 1, unit: "px", section: "topLayout", showWhen: { labelPosition: "top" } },
+      { key: "hintGap", label: "Hint Gap", control: "number", defaultValue: 2, min: 0, max: 12, step: 1, unit: "px", section: "hint" },
+      // Side-layout only: width of the label column. Gated on
+      // labelPosition=side because it has no effect in top layout.
+      { key: "sideLabelWidth", label: "Side Label Width", control: "number", defaultValue: 120, min: 60, max: 240, step: 4, unit: "px", section: "sideLayout", showWhen: { labelPosition: "side" } },
+      // Side-layout only: horizontal gap between the label column and
+      // the input column. Separate from the top-layout `gap` knob since
+      // horizontal label-input distance is visually different from
+      // vertical (and brands often want different values for each).
+      { key: "sideGap", label: "Label Gap", control: "number", defaultValue: 16, min: 2, max: 48, step: 1, unit: "px", section: "sideLayout", showWhen: { labelPosition: "side" } },
+      // Side-layout only: alignment of the label text within the label
+      // column. Default "start" (left in LTR) puts label text at the
+      // column's left edge — reads naturally with the eye flowing
+      // left-to-right into the input. "end" (right) is the alternative
+      // for projects that prefer labels flush against the input.
+      { key: "sideLabelAlign", label: "Side Label Align", control: "select", defaultValue: "start", options: ["start", "end"], section: "sideLayout", showWhen: { labelPosition: "side" } },
+      // Vertical alignment of the label within its grid cell. Default "center"
+      // matches the grid's `align-items: center`; "start" top-aligns the label
+      // next to a tall control (radio group / checkbox list).
+      { key: "sideLabelValign", label: "Side Label V-Align", control: "select", defaultValue: "center", options: ["center", "start", "end"], section: "sideLayout", showWhen: { labelPosition: "side" } }
+    ],
+    layoutVariants: [
+      // Local labelPosition variant (top / side). Floating is intentionally
+      // omitted — it requires absolute positioning + state-driven CSS
+      // (:has(:not(:placeholder-shown))) that doesn't work with non-input
+      // children like Select or PillSelect. Top + side cover the layout
+      // shapes that work uniformly with every input atom.
+      {
+        key: "labelPosition",
+        label: "Label Position",
+        options: [
+          { value: "top", label: "Top" },
+          { value: "side", label: "Side" }
+        ],
+        defaultValue: "top"
+      },
+      // Label typography variant. `overline` is the caps "eyebrow" style —
+      // typography only; colour comes from the Label Tint below.
+      {
+        key: "labelVariant",
+        label: "Label Variant",
+        options: [
+          { value: "default", label: "Default" },
+          { value: "overline", label: "Overline" }
+        ],
+        defaultValue: "default"
+      },
+      // Label Tint — which semantic colour preset the field uses. Applies to
+      // both label variants; each tint's colour is a knob gated to the active
+      // tint ("Per Label Tint · <value>").
+      {
+        key: "labelTint",
+        label: "Label Tint",
+        options: [
+          { value: "strong", label: "Strong" },
+          { value: "default", label: "Default" },
+          { value: "muted", label: "Muted" }
+        ],
+        defaultValue: "strong"
+      }
+    ]
+  },
+  {
+    id: "property-field",
+    name: "Property Field",
+    category: "Display",
+    description: "Single label + monospace value pair used for metadata readouts. The grid layout that arranges multiple PropertyFields is a separate atom (`property-grid`).",
+    styleProperties: [
+      { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "labelSize", label: "Label Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+      { key: "valueColor", label: "Value Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+      { key: "valueSize", label: "Value Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+      { key: "gap", label: "Label/Value Gap", control: "number", defaultValue: 4, min: 2, max: 12, step: 1, unit: "px" }
+    ],
+    layoutVariants: [
+      // Label case + value font as guided presets. The preview maps each to the
+      // `--uxm-property-field-label-transform` / `-label-tracking` / `-value-font`
+      // vars: uppercase carries 0.06em tracking (the "eyebrow" look), sentence
+      // drops both to none/normal; monospace is the data look, proportional is
+      // the body typeface (for prose grids). Defaults reproduce today.
+      {
+        key: "labelCase",
+        label: "Label Case",
+        options: [
+          { value: "uppercase", label: "Uppercase" },
+          { value: "sentence", label: "Sentence" }
+        ],
+        defaultValue: "uppercase"
+      },
+      {
+        key: "valueFont",
+        label: "Value Font",
+        options: [
+          { value: "monospace", label: "Monospace" },
+          { value: "proportional", label: "Proportional" }
+        ],
+        defaultValue: "monospace"
+      }
+    ]
+  },
+  {
+    id: "property-grid",
+    name: "Property Grid",
+    category: "Display",
+    description: "Auto-fill grid wrapper that lays out PropertyField pairs. Layout-only \u2014 chip / field theming flows through the PropertyField atom's own registry.",
+    styleProperties: [
+      { key: "rowGap", label: "Row Gap", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px" },
+      { key: "columnGap", label: "Column Gap", control: "number", defaultValue: 32, min: 12, max: 64, step: 4, unit: "px" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "list-item",
+    name: "List Item",
+    category: "Composite",
+    description: "Row with icon, title, and optional trailing slot \u2014 used in stacked lists. Renders as `<div>` (static) or `<button>` / `<a>` (interactive) depending on the atom's `interactive` / `href` props. State knobs gate on `mode` rather than trailing \u2014 trailing is purely a visual choice and the two are orthogonal: an interactive row can have any trailing, a static row can have a chevron decoration without being tappable.",
+    styleProperties: [
+      // ── Per-state row colors. Filtered into the "States" section by
+      // the State variant. Default-state knobs (`inactiveBg`,
+      // `inactiveText`) gate on `state: "default"` only — so the bg /
+      // text are editable in both static and interactive modes. The
+      // interactive-only state knobs (hover / focus / active)
+      // additionally gate on `mode: "interactive"` so they hide
+      // entirely when the row is rendered as a display-only `<div>`.
+      // `disabled` is a visual treatment, not an interaction state, so
+      // its knobs are NOT mode-gated.
+      { key: "inactiveBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "default" } },
+      { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "default" } },
+      { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover", mode: "interactive" } },
+      { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover", mode: "interactive" } },
+      { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus", mode: "interactive" } },
+      { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { state: "active", mode: "interactive" } },
+      { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "active", mode: "interactive" } },
+      { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "disabled" } },
+      { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+      // Focus ring + disabled opacity in their own sections.
+      { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus", mode: "interactive" } },
+      { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+      // ── Container (List wrapper)
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "container" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", section: "container" },
+      // ── Shared sizing (applies to every state)
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+      { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "gap", label: "Icon Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px" },
+      // ── Sub-elements (shared across every state)
+      { key: "valueColor", label: "Value Color", control: "color", defaultValue: "var(--color-text-muted)", section: "value", showWhen: { value: "shown" } },
+      { key: "valueSize", label: "Value Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "value", showWhen: { value: "shown" } },
+      // Trailing slot is purely composable — the consumer passes whatever
+      // ReactNode they want. The preview demos the canonical pattern per
+      // mode (chevron for interactive nav rows, Tag for static status
+      // rows), so a single Chevron Color knob covers the interactive
+      // example. Other trailing decorations (Tag, Badge, Avatar, etc.)
+      // bring their own styling via their respective atoms.
+      { key: "chevronColor", label: "Chevron Color", control: "color", defaultValue: "var(--color-text-muted)", section: "trailing", showWhen: { mode: "interactive" } },
+      // High-contrast icon "stamp" — bright accent tile with a card-coloured
+      // glyph inside. Keeps the icon visually distinct from the row bg in
+      // every state (default / hover / active / disabled), so the shared
+      // icon knobs don't need to vary per-state.
+      { key: "iconBg", label: "Icon Bg", control: "color", defaultValue: "var(--color-accent)", section: "icon" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-card)", section: "icon" },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 24, min: 16, max: 40, step: 2, unit: "px", section: "icon" },
+      { key: "iconRadius", label: "Icon Radius", control: "slider", defaultValue: 6, min: 0, max: 16, step: 1, unit: "px", section: "icon" }
+    ],
+    layoutVariants: [
+      {
+        key: "mode",
+        label: "Mode",
+        options: [
+          // `static` → renders as `<div>`; no hover / focus / active
+          // styling. `interactive` → renders as `<button>` (or `<a>`
+          // when href is passed); full state styling. Mode is
+          // orthogonal to trailing: any trailing can sit in either mode.
+          { value: "static", label: "Static" },
+          { value: "interactive", label: "Interactive" }
+        ],
+        defaultValue: "interactive"
+      },
+      {
+        key: "state",
+        label: "State",
+        options: [
+          // `default` and `disabled` are always available — every row
+          // has a resting state, and `disabled` is a visual treatment
+          // (dimmed, muted) that applies regardless of mode. The CSS
+          // rule includes a bare `.uxm-list-item[aria-disabled]`
+          // selector that fires on `<div>` as well as `<button>` /
+          // `<a>`. The interactive-only states (hover / focus / active)
+          // are option-level-gated to `mode: "interactive"`: when the
+          // row is static, the picker collapses to "Default" +
+          // "Disabled", which self-explains as "this row only has
+          // visual states" without the picker disappearing.
+          { value: "default", label: "Default" },
+          { value: "hover", label: "Hover", showWhen: { mode: "interactive" } },
+          { value: "focus", label: "Focus", showWhen: { mode: "interactive" } },
+          { value: "active", label: "Active", showWhen: { mode: "interactive" } },
+          { value: "disabled", label: "Disabled" }
+        ],
+        defaultValue: "default"
+      },
+      {
+        key: "value",
+        label: "Value Text",
+        options: [
+          { value: "shown", label: "Shown" },
+          { value: "hidden", label: "Hidden" }
+        ],
+        defaultValue: "shown"
+      }
+      // No `trailing` variant — the preview chooses what to show in
+      // the trailing slot based on `mode` (chevron for interactive,
+      // Tag for static). Real consumers pass any ReactNode via the
+      // atom's `trailing` prop; the editor preview demos the
+      // canonical patterns only.
+    ]
+  },
+  {
+    id: "stat-card",
+    name: "Stat Card",
+    category: "Composite",
+    description: "Metric card with value, label, and trend indicator.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 24, min: 12, max: 40, step: 4, unit: "px" },
+      { key: "valueSize", label: "Value Size", control: "number", defaultValue: 28, min: 18, max: 48, step: 2, unit: "px" },
+      { key: "labelSize", label: "Label Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+      { key: "trendUpColor", label: "Trend Up", control: "color", defaultValue: "var(--color-success-text)", section: "colors" },
+      { key: "trendDownColor", label: "Trend Down", control: "color", defaultValue: "var(--color-danger-text)", section: "colors" }
+    ],
+    layoutVariants: []
+  },
+  {
+    id: "page-shell",
+    name: "Page Shell",
+    category: "Composite",
+    description: "Top-level page layout \u2014 sidebar + (optional) top bar + content. Two variants drive the chrome: standard (full chrome, padded content) and canvas (no top bar, full-bleed content for diagrams/lifecycle).",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "colors" },
+      { key: "contentPadding", label: "Content Padding", control: "number", defaultValue: 32, min: 0, max: 64, step: 4, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "standard", label: "Standard" },
+          { value: "canvas", label: "Canvas" }
+        ],
+        defaultValue: "standard"
+      }
+    ]
+  },
+  {
+    id: "type-overview-card",
+    name: "Type Overview Card",
+    category: "Composite",
+    description: "Dashboard summary tile \u2014 accent stripe, icon tile, label, count, hover affordance.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+      { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "padding", label: "Padding", control: "number", defaultValue: 20, min: 12, max: 40, step: 2, unit: "px" },
+      { key: "accentColor", label: "Accent Stripe", control: "color", defaultValue: "var(--color-accent)", section: "colors" },
+      { key: "accentWidth", label: "Accent Width", control: "number", defaultValue: 4, min: 2, max: 12, step: 1, unit: "px" },
+      { key: "iconBg", label: "Icon Tile Bg", control: "color", defaultValue: "var(--color-accent-subtle)", section: "colors" },
+      { key: "iconColor", label: "Icon Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "colors" },
+      { key: "iconBoxSize", label: "Icon Tile Size", control: "number", defaultValue: 32, min: 24, max: 48, step: 2, unit: "px" },
+      { key: "iconRadius", label: "Icon Tile Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+      { key: "labelSize", label: "Label Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px" },
+      { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-strong)", section: "colors" },
+      { key: "valueSize", label: "Value Size", control: "number", defaultValue: 30, min: 20, max: 48, step: 2, unit: "px" },
+      { key: "valueColor", label: "Value Color", control: "color", defaultValue: "var(--color-text)", section: "colors" }
+    ],
+    layoutVariants: []
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  compositeDefs
+});
+//# sourceMappingURL=composite.cjs.map