@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/composite/tabs-underline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/tabs-underline.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const tabsUnderlineDef: ComponentDef = {\n  id: 'tabs-underline',\n  name: 'Tabs — Underline',\n  category: 'Composite',\n  description: 'Page-nav tab strip — text labels with an animated underline bar under the active tab. State knobs cover default / hover / focus / active / disabled across the individual tab item — the track bottom rule and bar shape are shared.',\n  styleProperties: [\n    // ── Track surface (shared — just the bottom rule + tab spacing)\n    { key: 'trackBorderColor', label: 'Track Border', control: 'color', defaultValue: 'var(--color-border)', section: 'track' },\n    { key: 'trackBorderWidth', label: 'Track Border Width', control: 'number', defaultValue: 1, min: 0, max: 6, step: 1, unit: 'px', section: 'track' },\n    { key: 'gap', label: 'Tab Gap', control: 'number', defaultValue: 4, min: 0, max: 16, step: 1, unit: 'px', section: 'track' },\n    // ── Per-state tab colors. Mirrors the tabs atom shape: each state\n    // owns its own text color, filtered into a single \"States\" section\n    // by the State variant. Active also owns the underline bar color —\n    // the bar is the active-state's defining visual.\n    { key: 'inactiveText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'barColor', label: 'Bar Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections — standalone\n    // treatments (ring outline / dimming) rather than fg/bg colors.\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    // ── Bar shape (structural — always defines what the bar looks like\n    // when an active tab is rendered, so shared across states)\n    { key: 'barHeight', label: 'Bar Height', control: 'number', defaultValue: 2, min: 1, max: 6, step: 1, unit: 'px' },\n    { key: 'barRadius', label: 'Bar Radius', control: 'slider', defaultValue: 2, min: 0, max: 4, step: 1, unit: 'px' },\n    // ── Shared sizing (applies to every tab state)\n    { key: 'paddingX', label: 'Tab Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Tab Padding Y', control: 'number', defaultValue: 8, min: 4, max: 16, step: 1, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 11, max: 16, step: 1, unit: 'px' },\n    { key: 'fontWeight', label: 'Inactive Weight', control: 'select', defaultValue: '500', options: ['400', '500', '600'] },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n    { key: 'iconGap', label: 'Icon Gap', control: 'number', defaultValue: 6, min: 2, max: 12, 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 tab.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/tabs.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 tabs_exports = {};
+__export(tabs_exports, {
+  tabsDef: () => tabsDef
+});
+module.exports = __toCommonJS(tabs_exports);
+const tabsDef = {
+  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 }" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tabsDef
+});
+//# sourceMappingURL=tabs.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/tabs.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const tabsDef: ComponentDef = {\n  id: 'tabs',\n  name: 'Tabs',\n  category: 'Composite',\n  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 — the track surface is shared.',\n  styleProperties: [\n    // ── Track surface (shared across all tab 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: 'Tab Gap', control: 'number', defaultValue: 0, min: 0, max: 8, step: 1, unit: 'px', section: 'track' },\n    // ── Per-state tab colors. Mirrors the button family: each state owns\n    // its own bg/text knobs, filtered into a single \"States\" section by\n    // the State variant. Default is the resting inactive tab; active is\n    // the currently-selected tab's appearance.\n    { key: 'inactiveText', label: 'Text 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: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text 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: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity each live in their own section — they\n    // sit semantically next to the state-scoped color knobs but are\n    // standalone treatments (ring outline / dimming) rather than\n    // foreground/background colors.\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 tab state)\n    { key: 'tabRadius', label: 'Tab Radius', control: 'slider', defaultValue: 6, min: 0, max: 99, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Tab Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Tab Padding Y', control: 'number', defaultValue: 6, min: 2, max: 14, step: 1, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n    { key: 'fontWeight', label: 'Inactive Weight', control: 'select', defaultValue: '500', options: ['400', '500', '600'] },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 12, min: 10, max: 20, step: 1, unit: 'px' },\n    { key: 'iconGap', label: 'Icon Gap', control: 'number', defaultValue: 6, min: 2, max: 12, 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 tab.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/tabs.d.ts

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

package/dist/studio/lib/registry/composite/tabs.d.ts.map

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

package/dist/studio/lib/registry/composite/tabs.js

@@ -0,0 +1,60 @@
+const tabsDef = {
+  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 }" }
+  ]
+};
+export {
+  tabsDef
+};
+//# sourceMappingURL=tabs.js.map

package/dist/studio/lib/registry/composite/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/tabs.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const tabsDef: ComponentDef = {\n  id: 'tabs',\n  name: 'Tabs',\n  category: 'Composite',\n  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 — the track surface is shared.',\n  styleProperties: [\n    // ── Track surface (shared across all tab 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: 'Tab Gap', control: 'number', defaultValue: 0, min: 0, max: 8, step: 1, unit: 'px', section: 'track' },\n    // ── Per-state tab colors. Mirrors the button family: each state owns\n    // its own bg/text knobs, filtered into a single \"States\" section by\n    // the State variant. Default is the resting inactive tab; active is\n    // the currently-selected tab's appearance.\n    { key: 'inactiveText', label: 'Text 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: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text 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: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity each live in their own section — they\n    // sit semantically next to the state-scoped color knobs but are\n    // standalone treatments (ring outline / dimming) rather than\n    // foreground/background colors.\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 tab state)\n    { key: 'tabRadius', label: 'Tab Radius', control: 'slider', defaultValue: 6, min: 0, max: 99, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Tab Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Tab Padding Y', control: 'number', defaultValue: 6, min: 2, max: 14, step: 1, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px' },\n    { key: 'fontWeight', label: 'Inactive Weight', control: 'select', defaultValue: '500', options: ['400', '500', '600'] },\n    { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 12, min: 10, max: 20, step: 1, unit: 'px' },\n    { key: 'iconGap', label: 'Icon Gap', control: 'number', defaultValue: 6, min: 2, max: 12, 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 tab.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,62 @@
+"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 thumbnail_exports = {};
+__export(thumbnail_exports, {
+  thumbnailDef: () => thumbnailDef
+});
+module.exports = __toCommonJS(thumbnail_exports);
+const thumbnailDef = {
+  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"
+    }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  thumbnailDef
+});
+//# sourceMappingURL=thumbnail.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/thumbnail.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const thumbnailDef: ComponentDef = {\n  id: 'thumbnail',\n  name: 'Thumbnail',\n  category: 'Display',\n  description: 'Bounded image frame for product photos, file previews, and entity logos. Falls back to a placeholder icon when no image is provided.',\n  styleProperties: [\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 48, min: 24, max: 120, step: 4, unit: 'px' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 60, step: 1, unit: 'px', section: 'colors' },\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderWidth', label: 'Border Width', control: 'number', defaultValue: 2, min: 0, max: 4, step: 1, unit: 'px' },\n    { key: 'placeholderColor', label: 'Placeholder Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'colors' },\n  ],\n  layoutVariants: [\n    {\n      key: 'fit',\n      label: 'Fit',\n      options: [\n        { value: 'cover', label: 'Cover' },\n        { value: 'contain', label: 'Contain' },\n      ],\n      defaultValue: 'cover',\n    },\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'image', label: 'With Image' },\n        { value: 'placeholder', label: 'Placeholder' },\n      ],\n      defaultValue: 'image',\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,eAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,IAC1G,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,SAAS;AAAA,IAC5I,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,KAAK;AAAA,IACrH,EAAE,KAAK,oBAAoB,OAAO,qBAAqB,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,EACvI;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,MACvC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,SAAS,OAAO,aAAa;AAAA,QACtC,EAAE,OAAO,eAAe,OAAO,cAAc;AAAA,MAC/C;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}

package/dist/studio/lib/registry/composite/thumbnail.d.ts

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

package/dist/studio/lib/registry/composite/thumbnail.d.ts.map

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

package/dist/studio/lib/registry/composite/thumbnail.js

@@ -0,0 +1,38 @@
+const thumbnailDef = {
+  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"
+    }
+  ]
+};
+export {
+  thumbnailDef
+};
+//# sourceMappingURL=thumbnail.js.map

package/dist/studio/lib/registry/composite/thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/thumbnail.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const thumbnailDef: ComponentDef = {\n  id: 'thumbnail',\n  name: 'Thumbnail',\n  category: 'Display',\n  description: 'Bounded image frame for product photos, file previews, and entity logos. Falls back to a placeholder icon when no image is provided.',\n  styleProperties: [\n    { key: 'size', label: 'Size', control: 'number', defaultValue: 48, min: 24, max: 120, step: 4, unit: 'px' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 60, step: 1, unit: 'px', section: 'colors' },\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderWidth', label: 'Border Width', control: 'number', defaultValue: 2, min: 0, max: 4, step: 1, unit: 'px' },\n    { key: 'placeholderColor', label: 'Placeholder Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'colors' },\n  ],\n  layoutVariants: [\n    {\n      key: 'fit',\n      label: 'Fit',\n      options: [\n        { value: 'cover', label: 'Cover' },\n        { value: 'contain', label: 'Contain' },\n      ],\n      defaultValue: 'cover',\n    },\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'image', label: 'With Image' },\n        { value: 'placeholder', label: 'Placeholder' },\n      ],\n      defaultValue: 'image',\n    },\n  ],\n};\n"],"mappings":"AAEO,MAAM,eAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,QAAQ,OAAO,QAAQ,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,IAC1G,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,SAAS;AAAA,IAC5I,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,KAAK;AAAA,IACrH,EAAE,KAAK,oBAAoB,OAAO,qBAAqB,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,EACvI;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,MACvC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,SAAS,OAAO,aAAa;AAAA,QACtC,EAAE,OAAO,eAAe,OAAO,cAAc;AAAA,MAC/C;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}

package/dist/studio/lib/registry/composite/type-overview-card.cjs

@@ -0,0 +1,51 @@
+"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 type_overview_card_exports = {};
+__export(type_overview_card_exports, {
+  typeOverviewCardDef: () => typeOverviewCardDef
+});
+module.exports = __toCommonJS(type_overview_card_exports);
+const typeOverviewCardDef = {
+  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 = {
+  typeOverviewCardDef
+});
+//# sourceMappingURL=type-overview-card.cjs.map

package/dist/studio/lib/registry/composite/type-overview-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/type-overview-card.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const typeOverviewCardDef: ComponentDef = {\n  id: 'type-overview-card',\n  name: 'Type Overview Card',\n  category: 'Composite',\n  description: 'Dashboard summary tile — accent stripe, icon tile, label, count, hover affordance.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 20, min: 12, max: 40, step: 2, unit: 'px' },\n    { key: 'accentColor', label: 'Accent Stripe', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors' },\n    { key: 'accentWidth', label: 'Accent Width', control: 'number', defaultValue: 4, min: 2, max: 12, step: 1, unit: 'px' },\n    { key: 'iconBg', label: 'Icon Tile Bg', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'colors' },\n    { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n    { key: 'iconBoxSize', label: 'Icon Tile Size', control: 'number', defaultValue: 32, min: 24, max: 48, step: 2, unit: 'px' },\n    { key: 'iconRadius', label: 'Icon Tile Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'labelSize', label: 'Label Size', control: 'number', defaultValue: 14, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'colors' },\n    { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 30, min: 20, max: 48, step: 2, unit: 'px' },\n    { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,sBAAoC;AAAA,EAC/C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,WAAW,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC/G,EAAE,KAAK,eAAe,OAAO,iBAAiB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACvH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACtH,EAAE,KAAK,UAAU,OAAO,gBAAgB,SAAS,SAAS,cAAc,8BAA8B,SAAS,SAAS;AAAA,IACxH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACvH,EAAE,KAAK,eAAe,OAAO,kBAAkB,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC1H,EAAE,KAAK,cAAc,OAAO,oBAAoB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,EACpH;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}

package/dist/studio/lib/registry/composite/type-overview-card.d.ts

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

package/dist/studio/lib/registry/composite/type-overview-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-overview-card.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/composite/type-overview-card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,mBAAmB,EAAE,YAsBjC,CAAC"}

package/dist/studio/lib/registry/composite/type-overview-card.js

@@ -0,0 +1,27 @@
+const typeOverviewCardDef = {
+  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: []
+};
+export {
+  typeOverviewCardDef
+};
+//# sourceMappingURL=type-overview-card.js.map

package/dist/studio/lib/registry/composite/type-overview-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/type-overview-card.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const typeOverviewCardDef: ComponentDef = {\n  id: 'type-overview-card',\n  name: 'Type Overview Card',\n  category: 'Composite',\n  description: 'Dashboard summary tile — accent stripe, icon tile, label, count, hover affordance.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 20, min: 12, max: 40, step: 2, unit: 'px' },\n    { key: 'accentColor', label: 'Accent Stripe', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors' },\n    { key: 'accentWidth', label: 'Accent Width', control: 'number', defaultValue: 4, min: 2, max: 12, step: 1, unit: 'px' },\n    { key: 'iconBg', label: 'Icon Tile Bg', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'colors' },\n    { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'colors' },\n    { key: 'iconBoxSize', label: 'Icon Tile Size', control: 'number', defaultValue: 32, min: 24, max: 48, step: 2, unit: 'px' },\n    { key: 'iconRadius', label: 'Icon Tile Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'labelSize', label: 'Label Size', control: 'number', defaultValue: 14, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'colors' },\n    { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 30, min: 20, max: 48, step: 2, unit: 'px' },\n    { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":"AAEO,MAAM,sBAAoC;AAAA,EAC/C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,WAAW,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC/G,EAAE,KAAK,eAAe,OAAO,iBAAiB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACvH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACtH,EAAE,KAAK,UAAU,OAAO,gBAAgB,SAAS,SAAS,cAAc,8BAA8B,SAAS,SAAS;AAAA,IACxH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACvH,EAAE,KAAK,eAAe,OAAO,kBAAkB,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC1H,EAAE,KAAK,cAAc,OAAO,oBAAoB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,EACpH;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}

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

@@ -0,0 +1,76 @@
+"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 view_switcher_exports = {};
+__export(view_switcher_exports, {
+  viewSwitcherDef: () => viewSwitcherDef
+});
+module.exports = __toCommonJS(view_switcher_exports);
+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 }" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  viewSwitcherDef
+});
+//# sourceMappingURL=view-switcher.cjs.map

package/dist/studio/lib/registry/composite/view-switcher.cjs.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/composite/view-switcher.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"view-switcher.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/composite/view-switcher.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,eAAe,EAAE,YA+C7B,CAAC"}