@viax.io/uxm 4.37.1 → 4.39.0

package/dist/studio/lib/registry/composite/view-switcher.js

@@ -0,0 +1,52 @@
+const viewSwitcherDef = {
+  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 }" }
+  ]
+};
+export {
+  viewSwitcherDef
+};
+//# sourceMappingURL=view-switcher.js.map

package/dist/studio/lib/registry/composite/view-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/view-switcher.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const viewSwitcherDef: ComponentDef = {\n  id: 'view-switcher',\n  name: 'View Switcher',\n  category: 'Composite',\n  description: 'Compact icon-only segmented control for toggling grid / list view. State knobs cover default / hover / focus / active / disabled across the individual icon button — the track surface is shared.',\n  styleProperties: [\n    // ── Track surface (shared across all states)\n    { key: 'trackBg', label: 'Track Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'track' },\n    { key: 'trackBorder', label: 'Track Border', control: 'color', defaultValue: 'var(--color-border)', section: 'track' },\n    { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 8, min: 0, max: 99, step: 1, unit: 'px', section: 'track' },\n    { key: 'trackPadding', label: 'Track Padding', control: 'number', defaultValue: 2, min: 0, max: 8, step: 1, unit: 'px', section: 'track' },\n    { key: 'gap', label: 'Button Gap', control: 'number', defaultValue: 0, min: 0, max: 8, step: 1, unit: 'px', section: 'track' },\n    // ── Per-state colors (filtered by State variant). Icon-only atom,\n    // so the foreground knob is the icon color (CSS `color` driving\n    // `currentColor` in the icon SVG).\n    { key: 'inactiveIcon', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'hoverIcon', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusIcon', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'activeIcon', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledIcon', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections.\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // ── Shared sizing (applies to every button state)\n    { key: 'buttonSize', label: 'Button Size', control: 'number', defaultValue: 28, min: 20, max: 44, step: 2, unit: 'px' },\n    { key: 'buttonRadius', label: 'Button Radius', control: 'slider', defaultValue: 6, min: 0, max: 99, step: 1, unit: 'px' },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different view.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

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

@@ -47,26 +47,47 @@ const iconsDefs = [
     id: "icon-button",
     name: "Icon Button",
     category: "Buttons",
-    description: "Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.",
+    description: "Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button \u2014 Icon atom. Full state coverage parity with the rest of the button family.",
     styleProperties: [
       // State-scoped colors — Tag-style filter via showWhen.
-      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
-      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
-      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
-      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
-      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
-      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { variant: "ghost", state: "active" } },
+      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "active" } },
       { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
       { key: "focusColor", label: "Icon 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: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
       // Shared style
-      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px" },
-      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px" },
-      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
-      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" }
+      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" },
+      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a
+      // saved ghost theme never leaks into the filled look. Defaults are the
+      // deprecated ButtonIcon's, which this variant replaces.
+      { key: "filledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledHoverBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledHoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledActiveBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledActiveColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledSize", label: "Button Size", control: "number", defaultValue: 40, min: 24, max: 64, step: 4, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledIconSize", label: "Icon Size", control: "number", defaultValue: 18, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "filled" } }
     ],
     layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "ghost", label: "Ghost" },
+          { value: "filled", label: "Filled" }
+        ],
+        defaultValue: "ghost"
+      },
       {
         key: "glyph",
         label: "Glyph",

package/dist/studio/lib/registry/icons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n  // ── Icons ──\n  {\n    id: 'icon',\n    name: 'Icon',\n    category: 'Icons',\n    description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n    // Gallery preview: fill the canvas width (flexible column count) and top-\n    // align so the grid filters in place — nothing re-centres as the result\n    // count changes.\n    canvasFill: true,\n    styleProperties: [\n      { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n      { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    // No glyph picker: the preview renders the entire ICONS set as a grid, so\n    // there's no single glyph to choose. (The icon-button entry below keeps its\n    // glyph variant — it previews one button.)\n    layoutVariants: [],\n  },\n  {\n    id: 'icon-button',\n    name: 'Icon Button',\n    category: 'Buttons',\n    description: 'Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.',\n    styleProperties: [\n      // State-scoped colors — Tag-style filter via showWhen.\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n      { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n      { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n      { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n      { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n      { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n      { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n      { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n      // Shared style\n      { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px' },\n      { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px' },\n      { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'glyph',\n        label: 'Glyph',\n        options: ICON_OPTIONS,\n        defaultValue: 'close',\n      },\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'default', label: 'Default' },\n          { value: 'hover', label: 'Hover' },\n          { value: 'active', label: 'Pressed' },\n          { value: 'focus', label: 'Focus' },\n          { value: 'disabled', label: 'Disabled' },\n        ],\n        defaultValue: 'default',\n      },\n    ],\n    events: [\n      { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n      { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n      { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n    ],\n  },\n];\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n  // ── Icons ──\n  {\n    id: 'icon',\n    name: 'Icon',\n    category: 'Icons',\n    description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n    // Gallery preview: fill the canvas width (flexible column count) and top-\n    // align so the grid filters in place — nothing re-centres as the result\n    // count changes.\n    canvasFill: true,\n    styleProperties: [\n      { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n      { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    // No glyph picker: the preview renders the entire ICONS set as a grid, so\n    // there's no single glyph to choose. (The icon-button entry below keeps its\n    // glyph variant — it previews one button.)\n    layoutVariants: [],\n  },\n  {\n    id: 'icon-button',\n    name: 'Icon Button',\n    category: 'Buttons',\n    description: 'Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button — Icon atom. Full state coverage parity with the rest of the button family.',\n    styleProperties: [\n      // State-scoped colors — Tag-style filter via showWhen.\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n      { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n      { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n      { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n      { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n      { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n      { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n      { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n      // Shared style\n      { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a\n      // saved ghost theme never leaks into the filled look. Defaults are the\n      // deprecated ButtonIcon's, which this variant replaces.\n      { key: 'filledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n      { key: 'filledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n      { key: 'filledHoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n      { key: 'filledHoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n      { key: 'filledActiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n      { key: 'filledActiveColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n      { key: 'filledSize', label: 'Button Size', control: 'number', defaultValue: 40, min: 24, max: 64, step: 4, unit: 'px', showWhen: { variant: 'filled' } },\n      { key: 'filledIconSize', label: 'Icon Size', control: 'number', defaultValue: 18, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n      { key: 'filledRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n    ],\n    layoutVariants: [\n      {\n        key: 'variant',\n        label: 'Variant',\n        options: [\n          { value: 'ghost', label: 'Ghost' },\n          { value: 'filled', label: 'Filled' },\n        ],\n        defaultValue: 'ghost',\n      },\n      {\n        key: 'glyph',\n        label: 'Glyph',\n        options: ICON_OPTIONS,\n        defaultValue: 'close',\n      },\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'default', label: 'Default' },\n          { value: 'hover', label: 'Hover' },\n          { value: 'active', label: 'Pressed' },\n          { value: 'focus', label: 'Focus' },\n          { value: 'disabled', label: 'Disabled' },\n        ],\n        defaultValue: 'default',\n      },\n    ],\n    events: [\n      { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n      { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n      { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n    ],\n  },\n];\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/studio/lib/registry/icons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,SAAS,EAAE,YAAY,EAsEnC,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/studio/lib/registry/icons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,SAAS,EAAE,YAAY,EA2FnC,CAAC"}

package/dist/studio/lib/registry/icons.js

@@ -24,26 +24,47 @@ const iconsDefs = [
     id: "icon-button",
     name: "Icon Button",
     category: "Buttons",
-    description: "Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.",
+    description: "Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button \u2014 Icon atom. Full state coverage parity with the rest of the button family.",
     styleProperties: [
       // State-scoped colors — Tag-style filter via showWhen.
-      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { state: "default" } },
-      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
-      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
-      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
-      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { state: "active" } },
-      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "active" } },
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "transparent", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "color", label: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { variant: "ghost", state: "default" } },
+      { key: "hoverBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "hoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "hover" } },
+      { key: "activeBackgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "states", showWhen: { variant: "ghost", state: "active" } },
+      { key: "activeColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "ghost", state: "active" } },
       { key: "focusRingColor", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "focus" } },
       { key: "focusColor", label: "Icon 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: "Icon Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
       // Shared style
-      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px" },
-      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px" },
-      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
-      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" }
+      { key: "size", label: "Button Size", control: "number", defaultValue: 32, min: 20, max: 48, step: 2, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "ghost" } },
+      { key: "strokeWidth", label: "Stroke Width", control: "slider", defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: "px" },
+      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a
+      // saved ghost theme never leaks into the filled look. Defaults are the
+      // deprecated ButtonIcon's, which this variant replaces.
+      { key: "filledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "default" } },
+      { key: "filledHoverBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledHoverColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { variant: "filled", state: "hover" } },
+      { key: "filledActiveBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledActiveColor", label: "Icon Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "states", showWhen: { variant: "filled", state: "active" } },
+      { key: "filledSize", label: "Button Size", control: "number", defaultValue: 40, min: 24, max: 64, step: 4, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledIconSize", label: "Icon Size", control: "number", defaultValue: 18, min: 10, max: 28, step: 1, unit: "px", showWhen: { variant: "filled" } },
+      { key: "filledRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px", showWhen: { variant: "filled" } }
     ],
     layoutVariants: [
+      {
+        key: "variant",
+        label: "Variant",
+        options: [
+          { value: "ghost", label: "Ghost" },
+          { value: "filled", label: "Filled" }
+        ],
+        defaultValue: "ghost"
+      },
       {
         key: "glyph",
         label: "Glyph",

package/dist/studio/lib/registry/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n  // ── Icons ──\n  {\n    id: 'icon',\n    name: 'Icon',\n    category: 'Icons',\n    description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n    // Gallery preview: fill the canvas width (flexible column count) and top-\n    // align so the grid filters in place — nothing re-centres as the result\n    // count changes.\n    canvasFill: true,\n    styleProperties: [\n      { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n      { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    // No glyph picker: the preview renders the entire ICONS set as a grid, so\n    // there's no single glyph to choose. (The icon-button entry below keeps its\n    // glyph variant — it previews one button.)\n    layoutVariants: [],\n  },\n  {\n    id: 'icon-button',\n    name: 'Icon Button',\n    category: 'Buttons',\n    description: 'Utility icon-only button used inside other components (close, edit, delete, kebab, etc.). Full state coverage parity with the rest of the button family.',\n    styleProperties: [\n      // State-scoped colors — Tag-style filter via showWhen.\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { state: 'default' } },\n      { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n      { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n      { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n      { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { state: 'active' } },\n      { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n      { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n      { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n      // Shared style\n      { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px' },\n      { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px' },\n      { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'glyph',\n        label: 'Glyph',\n        options: ICON_OPTIONS,\n        defaultValue: 'close',\n      },\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'default', label: 'Default' },\n          { value: 'hover', label: 'Hover' },\n          { value: 'active', label: 'Pressed' },\n          { value: 'focus', label: 'Focus' },\n          { value: 'disabled', label: 'Disabled' },\n        ],\n        defaultValue: 'default',\n      },\n    ],\n    events: [\n      { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n      { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n      { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n    ],\n  },\n];\n"],"mappings":"AAAA,SAAS,oBAAoB;AAItB,MAAM,YAA4B;AAAA;AAAA,EAEvC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA;AAAA;AAAA;AAAA,IAIb,YAAY;AAAA,IACZ,iBAAiB;AAAA,MACf,EAAE,KAAK,SAAS,OAAO,SAAS,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,MACvG,EAAE,KAAK,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MACzG,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,MAAM,KAAK;AAAA,IAC9H;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAgB,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,MAEf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,UAAU,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,MAChJ,EAAE,KAAK,SAAS,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,MAClJ,EAAE,KAAK,wBAAwB,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MAChK,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MAC/I,EAAE,KAAK,yBAAyB,OAAO,cAAc,SAAS,SAAS,cAAc,wBAAwB,SAAS,UAAU,UAAU,EAAE,OAAO,SAAS,EAAE;AAAA,MAC9J,EAAE,KAAK,eAAe,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,SAAS,EAAE;AAAA,MACjJ,EAAE,KAAK,kBAAkB,OAAO,cAAc,SAAS,SAAS,cAAc,uBAAuB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MACrJ,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MAC/I,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,MACnK,EAAE,KAAK,iBAAiB,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,MAE3J,EAAE,KAAK,QAAQ,OAAO,eAAe,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MAChH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MAClH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MACxH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,MAAM,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,MAAM,KAAK;AAAA,IAC/H;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,UAAU;AAAA,UACpC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,EAAE,MAAM,WAAW,aAAa,iEAAiE,SAAS,gCAAgC;AAAA,MAC1I,EAAE,MAAM,WAAW,aAAa,kDAAkD,SAAS,aAAa;AAAA,MACxG,EAAE,MAAM,UAAU,aAAa,+CAA+C,SAAS,aAAa;AAAA,IACtG;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/studio/lib/registry/icons.ts"],"sourcesContent":["import { ICON_OPTIONS } from '@/ui';\n\nimport type { ComponentDef } from '../types';\n\nexport const iconsDefs: ComponentDef[] = [\n  // ── Icons ──\n  {\n    id: 'icon',\n    name: 'Icon',\n    category: 'Icons',\n    description: 'Decorative line icon. Browse the full modo icon set as a searchable, labelled grid — each cell shows the glyph above the `id` you pass to `glyph=`. The size / stroke / colour knobs tune every icon at once.',\n    // Gallery preview: fill the canvas width (flexible column count) and top-\n    // align so the grid filters in place — nothing re-centres as the result\n    // count changes.\n    canvasFill: true,\n    styleProperties: [\n      { key: 'color', label: 'Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n      { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 10, max: 48, step: 1, unit: 'px' },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.5, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n    ],\n    // No glyph picker: the preview renders the entire ICONS set as a grid, so\n    // there's no single glyph to choose. (The icon-button entry below keeps its\n    // glyph variant — it previews one button.)\n    layoutVariants: [],\n  },\n  {\n    id: 'icon-button',\n    name: 'Icon Button',\n    category: 'Buttons',\n    description: 'Icon-only button. `ghost` (default) is the utility button used inside other components (close, edit, delete, kebab); `filled` is the standalone action (add, create) that replaces the deprecated Button — Icon atom. Full state coverage parity with the rest of the button family.',\n    styleProperties: [\n      // State-scoped colors — Tag-style filter via showWhen.\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n      { key: 'color', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { variant: 'ghost', state: 'default' } },\n      { key: 'hoverBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n      { key: 'hoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'hover' } },\n      { key: 'activeBackgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n      { key: 'activeColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'ghost', state: 'active' } },\n      { key: 'focusRingColor', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'focusColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n      { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'states', showWhen: { state: 'disabled' } },\n      { key: 'disabledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n      // Shared style\n      { key: 'size', label: 'Button Size', control: 'number', defaultValue: 32, min: 20, max: 48, step: 2, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'ghost' } },\n      { key: 'strokeWidth', label: 'Stroke Width', control: 'slider', defaultValue: 1.75, min: 0.5, max: 3, step: 0.25, unit: 'px' },\n      // `filled` variant — its own var set (`--uxm-icon-button-filled-*`), so a\n      // saved ghost theme never leaks into the filled look. Defaults are the\n      // deprecated ButtonIcon's, which this variant replaces.\n      { key: 'filledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n      { key: 'filledColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'default' } },\n      { key: 'filledHoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n      { key: 'filledHoverColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { variant: 'filled', state: 'hover' } },\n      { key: 'filledActiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n      { key: 'filledActiveColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'states', showWhen: { variant: 'filled', state: 'active' } },\n      { key: 'filledSize', label: 'Button Size', control: 'number', defaultValue: 40, min: 24, max: 64, step: 4, unit: 'px', showWhen: { variant: 'filled' } },\n      { key: 'filledIconSize', label: 'Icon Size', control: 'number', defaultValue: 18, min: 10, max: 28, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n      { key: 'filledRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', showWhen: { variant: 'filled' } },\n    ],\n    layoutVariants: [\n      {\n        key: 'variant',\n        label: 'Variant',\n        options: [\n          { value: 'ghost', label: 'Ghost' },\n          { value: 'filled', label: 'Filled' },\n        ],\n        defaultValue: 'ghost',\n      },\n      {\n        key: 'glyph',\n        label: 'Glyph',\n        options: ICON_OPTIONS,\n        defaultValue: 'close',\n      },\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'default', label: 'Default' },\n          { value: 'hover', label: 'Hover' },\n          { value: 'active', label: 'Pressed' },\n          { value: 'focus', label: 'Focus' },\n          { value: 'disabled', label: 'Disabled' },\n        ],\n        defaultValue: 'default',\n      },\n    ],\n    events: [\n      { name: 'onClick', description: 'Fires on mouse click or Enter/Space activation while focused.', payload: 'MouseEvent<HTMLButtonElement>' },\n      { name: 'onFocus', description: 'Fires when the button receives keyboard focus.', payload: 'FocusEvent' },\n      { name: 'onBlur', description: 'Fires when the button loses keyboard focus.', payload: 'FocusEvent' },\n    ],\n  },\n];\n"],"mappings":"AAAA,SAAS,oBAAoB;AAItB,MAAM,YAA4B;AAAA;AAAA,EAEvC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA;AAAA;AAAA;AAAA,IAIb,YAAY;AAAA,IACZ,iBAAiB;AAAA,MACf,EAAE,KAAK,SAAS,OAAO,SAAS,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,MACvG,EAAE,KAAK,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MACzG,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,MAAM,KAAK;AAAA,IAC9H;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAgB,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,MAEf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,eAAe,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,UAAU,EAAE;AAAA,MAClK,EAAE,KAAK,SAAS,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,UAAU,EAAE;AAAA,MACpK,EAAE,KAAK,wBAAwB,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,QAAQ,EAAE;AAAA,MAClL,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,QAAQ,EAAE;AAAA,MACjK,EAAE,KAAK,yBAAyB,OAAO,cAAc,SAAS,SAAS,cAAc,wBAAwB,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,SAAS,EAAE;AAAA,MAChL,EAAE,KAAK,eAAe,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,SAAS,SAAS,OAAO,SAAS,EAAE;AAAA,MACnK,EAAE,KAAK,kBAAkB,OAAO,cAAc,SAAS,SAAS,cAAc,uBAAuB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MACrJ,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,MAC/I,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,MACnK,EAAE,KAAK,iBAAiB,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,MAE3J,EAAE,KAAK,QAAQ,OAAO,eAAe,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,QAAQ,EAAE;AAAA,MAChJ,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,QAAQ,EAAE;AAAA,MAClJ,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,QAAQ,EAAE;AAAA,MACxJ,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,MAAM,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,MAI7H,EAAE,KAAK,YAAY,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,UAAU,EAAE;AAAA,MACzK,EAAE,KAAK,eAAe,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,UAAU,EAAE;AAAA,MACrK,EAAE,KAAK,iBAAiB,OAAO,cAAc,SAAS,SAAS,cAAc,8BAA8B,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,QAAQ,EAAE;AAAA,MAC9K,EAAE,KAAK,oBAAoB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,QAAQ,EAAE;AAAA,MACxK,EAAE,KAAK,kBAAkB,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,SAAS,EAAE;AAAA,MAC9K,EAAE,KAAK,qBAAqB,OAAO,cAAc,SAAS,SAAS,cAAc,6BAA6B,SAAS,UAAU,UAAU,EAAE,SAAS,UAAU,OAAO,SAAS,EAAE;AAAA,MAClL,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,SAAS,EAAE;AAAA,MACvJ,EAAE,KAAK,kBAAkB,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,SAAS,EAAE;AAAA,MACzJ,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,UAAU,EAAE,SAAS,SAAS,EAAE;AAAA,IAC3J;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,QACrC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,UAAU;AAAA,UACpC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,EAAE,MAAM,WAAW,aAAa,iEAAiE,SAAS,gCAAgC;AAAA,MAC1I,EAAE,MAAM,WAAW,aAAa,kDAAkD,SAAS,aAAa;AAAA,MACxG,EAAE,MAAM,UAAU,aAAa,+CAA+C,SAAS,aAAa;AAAA,IACtG;AAAA,EACF;AACF;","names":[]}

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

@@ -27,14 +27,14 @@ __export(registry_exports, {
 module.exports = __toCommonJS(registry_exports);
 var import_app = require("./app.cjs");
 var import_buttons = require("./buttons.cjs");
-var import_composite = require("./composite.cjs");
+var import_composite = require("./composite/index.cjs");
 var import_configuration = require("./configuration.cjs");
 var import_diagram = require("./diagram.cjs");
 var import_display = require("./display.cjs");
 var import_feedback = require("./feedback.cjs");
 var import_forms = require("./forms.cjs");
 var import_icons = require("./icons.cjs");
-var import_inputs = require("./inputs.cjs");
+var import_inputs = require("./inputs/index.cjs");
 var import_layout = require("./layout.cjs");
 const categories = ["App", "Buttons", "Inputs", "Display", "Feedback", "Forms", "Composite", "Configuration", "Layout", "Diagram", "Icons"];
 const categoryColors = {

package/dist/studio/lib/registry/index.js

@@ -1,13 +1,13 @@
 import { appDefs } from "./app.js";
 import { buttonsDefs } from "./buttons.js";
-import { compositeDefs } from "./composite.js";
+import { compositeDefs } from "./composite/index.js";
 import { configurationDefs } from "./configuration.js";
 import { diagramDefs } from "./diagram.js";
 import { displayDefs } from "./display.js";
 import { feedbackDefs } from "./feedback.js";
 import { formsDefs } from "./forms.js";
 import { iconsDefs } from "./icons.js";
-import { inputsDefs } from "./inputs.js";
+import { inputsDefs } from "./inputs/index.js";
 import { layoutDefs } from "./layout.js";
 const categories = ["App", "Buttons", "Inputs", "Display", "Feedback", "Forms", "Composite", "Configuration", "Layout", "Diagram", "Icons"];
 const categoryColors = {

package/dist/studio/lib/registry/inputs/checkbox.cjs

@@ -0,0 +1,84 @@
+"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 checkbox_exports = {};
+__export(checkbox_exports, {
+  checkboxDef: () => checkboxDef
+});
+module.exports = __toCommonJS(checkbox_exports);
+const checkboxDef = {
+  id: "checkbox",
+  name: "Checkbox",
+  category: "Inputs",
+  description: "Checkbox input with label. State knobs cover unchecked \xD7 checked across default / hover / focus, plus a shared disabled opacity.",
+  styleProperties: [
+    // Default — unchecked
+    { key: "uncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "default" } },
+    { key: "uncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "uncheckedColors", showWhen: { state: "default" } },
+    // Default — checked
+    { key: "checkedBg", label: "Background", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "default" } },
+    // Hover — unchecked
+    { key: "hoverUncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)
+    { key: "hoverUncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-text-strong)", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // Hover — checked
+    { key: "hoverCheckedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "hover" } },
+    // Focus — single shared ring color (outline applies the same to
+    // checked and unchecked; splitting it into two knobs was overkill).
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled — single shared opacity (no per-mode colors)
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Shared — always visible
+    { key: "size", label: "Size", control: "number", defaultValue: 20, min: 14, max: 32, step: 2, unit: "px" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+    { key: "gap", label: "Label Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    // Error — the box + label stay neutral; the message below is the sole
+    // signal (errorColor colors it, errorMessageSize sizes it). Shared keys
+    // with the input family so the editor's "Match in N" sync applies.
+    { key: "errorColor", 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" } }
+  ],
+  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"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user toggles the checked state via click or Space.", payload: "{ checked: boolean }" },
+    { name: "onFocus", description: "Fires when the checkbox receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the checkbox loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  checkboxDef
+});
+//# sourceMappingURL=checkbox.cjs.map

package/dist/studio/lib/registry/inputs/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/checkbox.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const checkboxDef: ComponentDef = {\n  id: 'checkbox',\n  name: 'Checkbox',\n  category: 'Inputs',\n  description: 'Checkbox input with label. State knobs cover unchecked × checked across default / hover / focus, plus a shared disabled opacity.',\n  styleProperties: [\n    // Default — unchecked\n    { key: 'uncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'default' } },\n    { key: 'uncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'uncheckedColors', showWhen: { state: 'default' } },\n    // Default — checked\n    { key: 'checkedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n    { key: 'checkedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n    { key: 'checkGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'default' } },\n    // Hover — unchecked\n    { key: 'hoverUncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n    // Hover — checked\n    { key: 'hoverCheckedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverCheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverCheckGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color (outline applies the same to\n    // checked and unchecked; splitting it into two knobs was overkill).\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — single shared opacity (no per-mode colors)\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Shared — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 12, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Label Gap', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n    // Error — the box + label stay neutral; the message below is the sole\n    // signal (errorColor colors it, errorMessageSize sizes it). Shared keys\n    // with the input family so the editor's \"Match in N\" sync applies.\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user toggles the checked state via click or Space.', payload: '{ checked: boolean }' },\n    { name: 'onFocus', description: 'Fires when the checkbox receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the checkbox loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/checkbox.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentDef } from '../../types.js';
+export declare const checkboxDef: ComponentDef;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/studio/lib/registry/inputs/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/inputs/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,WAAW,EAAE,YAuDzB,CAAC"}

package/dist/studio/lib/registry/inputs/checkbox.js

@@ -0,0 +1,60 @@
+const checkboxDef = {
+  id: "checkbox",
+  name: "Checkbox",
+  category: "Inputs",
+  description: "Checkbox input with label. State knobs cover unchecked \xD7 checked across default / hover / focus, plus a shared disabled opacity.",
+  styleProperties: [
+    // Default — unchecked
+    { key: "uncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "default" } },
+    { key: "uncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "uncheckedColors", showWhen: { state: "default" } },
+    // Default — checked
+    { key: "checkedBg", label: "Background", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "checkedColors", showWhen: { state: "default" } },
+    { key: "checkGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "default" } },
+    // Hover — unchecked
+    { key: "hoverUncheckedBg", label: "Background", control: "color", defaultValue: "transparent", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)
+    { key: "hoverUncheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-text-strong)", section: "uncheckedColors", showWhen: { state: "hover" } },
+    // Hover — checked
+    { key: "hoverCheckedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckedBorder", label: "Border", control: "color", defaultValue: "var(--color-accent-bold)", section: "checkedColors", showWhen: { state: "hover" } },
+    { key: "hoverCheckGlyphColor", label: "Check Glyph", control: "color", defaultValue: "var(--color-text-inverse)", section: "checkedColors", showWhen: { state: "hover" } },
+    // Focus — single shared ring color (outline applies the same to
+    // checked and unchecked; splitting it into two knobs was overkill).
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled — single shared opacity (no per-mode colors)
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Shared — always visible
+    { key: "size", label: "Size", control: "number", defaultValue: 20, min: 14, max: 32, step: 2, unit: "px" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+    { key: "gap", label: "Label Gap", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    // Error — the box + label stay neutral; the message below is the sole
+    // signal (errorColor colors it, errorMessageSize sizes it). Shared keys
+    // with the input family so the editor's "Match in N" sync applies.
+    { key: "errorColor", 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" } }
+  ],
+  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"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user toggles the checked state via click or Space.", payload: "{ checked: boolean }" },
+    { name: "onFocus", description: "Fires when the checkbox receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the checkbox loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  checkboxDef
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/studio/lib/registry/inputs/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/checkbox.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const checkboxDef: ComponentDef = {\n  id: 'checkbox',\n  name: 'Checkbox',\n  category: 'Inputs',\n  description: 'Checkbox input with label. State knobs cover unchecked × checked across default / hover / focus, plus a shared disabled opacity.',\n  styleProperties: [\n    // Default — unchecked\n    { key: 'uncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'default' } },\n    { key: 'uncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'uncheckedColors', showWhen: { state: 'default' } },\n    // Default — checked\n    { key: 'checkedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n    { key: 'checkedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'checkedColors', showWhen: { state: 'default' } },\n    { key: 'checkGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'default' } },\n    // Hover — unchecked\n    { key: 'hoverUncheckedBg', label: 'Background', control: 'color', defaultValue: 'transparent', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverUncheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'uncheckedColors', showWhen: { state: 'hover' } },\n    // Hover — checked\n    { key: 'hoverCheckedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverCheckedBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    { key: 'hoverCheckGlyphColor', label: 'Check Glyph', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'checkedColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color (outline applies the same to\n    // checked and unchecked; splitting it into two knobs was overkill).\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — single shared opacity (no per-mode colors)\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Shared — always visible\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 20, min: 14, max: 32, step: 2, unit: 'px' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 12, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Label Gap', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n    // Error — the box + label stay neutral; the message below is the sole\n    // signal (errorColor colors it, errorMessageSize sizes it). Shared keys\n    // with the input family so the editor's \"Match in N\" sync applies.\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user toggles the checked state via click or Space.', payload: '{ checked: boolean }' },\n    { name: 'onFocus', description: 'Fires when the checkbox receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the checkbox loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}