@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/inputs/select-dropdown.js

@@ -0,0 +1,79 @@
+const selectDropdownDef = {
+  id: "select-dropdown",
+  name: "Select Dropdown",
+  category: "Inputs",
+  description: 'Dropdown selection field \u2014 internally a Listbox-backed picker. This entry themes the trigger (default / hover / focus / disabled / error); the trigger is identical whether or not the panel searches, so searchability isn\'t a knob here \u2014 it\'s the `searchable` prop (default auto: the panel grows a search box once the option list is long enough), and the search box itself is previewed + themed in the Listbox entry. Clearability isn\'t a knob either: a clear (\u2715) button appears automatically once a value is picked IF the select has a placeholder option (`<option value="" disabled>`), which marks "empty" as a valid state. Mandatory selects (no placeholder \u2014 a value is always chosen) never show it. For a search-first combobox with its own trigger chrome (icon glyphs, dial codes), use the SearchDropdown atom instead.',
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" }
+    // Label theming + position live on FormField. See input-text for
+    // the same consolidation rationale.
+    // The search input's placeholder is NOT a workbench knob: its TEXT
+    // is per-instance content the consumer passes at the call site (the
+    // searchable Select renders the shared Listbox panel), and its only
+    // themeable aspect — the placeholder COLOR — lives once on the
+    // `listbox` entry (`searchPlaceholderColor`). A text knob here would
+    // also serialize to a dead `--uxm-…-search-placeholder` CSS var that
+    // paints nothing.
+  ],
+  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"
+    },
+    // Behavioral variants — they change WHAT gets shown, not how the
+    // trigger looks. Style knobs (colors, padding, font) apply across
+    // all of these. (Searchability is deliberately NOT here: the trigger
+    // is identical with/without search, and the search box is previewed
+    // in the Listbox entry — see this component's description.)
+    {
+      key: "multiSelect",
+      label: "Mode",
+      options: [
+        { value: "single", label: "Single" },
+        { value: "multi", label: "Multi" }
+      ],
+      defaultValue: "single"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user picks a different option.", payload: "{ value: string }" },
+    { name: "onFocus", description: "Fires when the select receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the select loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  selectDropdownDef
+};
+//# sourceMappingURL=select-dropdown.js.map

package/dist/studio/lib/registry/inputs/select-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/select-dropdown.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const selectDropdownDef: ComponentDef = {\n  id: 'select-dropdown',\n  name: 'Select Dropdown',\n  category: 'Inputs',\n  description: 'Dropdown selection field — internally a Listbox-backed picker. This entry themes the trigger (default / hover / focus / disabled / error); the trigger is identical whether or not the panel searches, so searchability isn\\'t a knob here — it\\'s the `searchable` prop (default auto: the panel grows a search box once the option list is long enough), and the search box itself is previewed + themed in the Listbox entry. Clearability isn\\'t a knob either: a clear (✕) button appears automatically once a value is picked IF the select has a placeholder option (`<option value=\"\" disabled>`), which marks \"empty\" as a valid state. Mandatory selects (no placeholder — a value is always chosen) never show it. For a search-first combobox with its own trigger chrome (icon glyphs, dial codes), use the SearchDropdown atom instead.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n    // Hover\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    // Focus\n    { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Error\n    { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorColor', label: '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    // Shared\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n    // Label theming + position live on FormField. See input-text for\n    // the same consolidation rationale.\n    // The search input's placeholder is NOT a workbench knob: its TEXT\n    // is per-instance content the consumer passes at the call site (the\n    // searchable Select renders the shared Listbox panel), and its only\n    // themeable aspect — the placeholder COLOR — lives once on the\n    // `listbox` entry (`searchPlaceholderColor`). A text knob here would\n    // also serialize to a dead `--uxm-…-search-placeholder` CSS var that\n    // paints nothing.\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    // Behavioral variants — they change WHAT gets shown, not how the\n    // trigger looks. Style knobs (colors, padding, font) apply across\n    // all of these. (Searchability is deliberately NOT here: the trigger\n    // is identical with/without search, and the search box is previewed\n    // in the Listbox entry — see this component's description.)\n    {\n      key: 'multiSelect',\n      label: 'Mode',\n      options: [\n        { value: 'single', label: 'Single' },\n        { value: 'multi', label: 'Multi' },\n      ],\n      defaultValue: 'single',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different option.', payload: '{ value: string }' },\n    { name: 'onFocus', description: 'Fires when the select receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the select loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,99 @@
+"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 slider_exports = {};
+__export(slider_exports, {
+  sliderDef: () => sliderDef
+});
+module.exports = __toCommonJS(slider_exports);
+const sliderDef = {
+  id: "slider",
+  name: "Slider",
+  category: "Inputs",
+  description: "Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled \u2014 only the thumb changes across interaction states; track + accent stay constant.",
+  styleProperties: [
+    // Default — track + thumb both visible since slider always has both
+    { key: "trackColor", label: "Track", control: "color", defaultValue: "var(--color-border)", section: "states", showWhen: { state: "default" } },
+    { key: "accentColor", label: "Accent (Filled)", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "default" } },
+    { key: "thumbColor", label: "Thumb", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "default" } },
+    // Hover — thumb tint when hovered or actively being dragged (one
+    // knob covers both since the visual difference is rarely worth
+    // exposing as two; the underlying CSS still applies `:active`).
+    { key: "hoverThumbColor", label: "Thumb", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "hover" } },
+    // Focus — single shared ring around the thumb / track
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled — shared opacity
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Shared style — always visible
+    { key: "trackHeight", label: "Track Height", control: "number", defaultValue: 6, min: 2, max: 16, step: 1, unit: "px" },
+    { key: "trackRadius", label: "Track Radius", control: "slider", defaultValue: 999, min: 0, max: 999, step: 1, unit: "px" },
+    { key: "thumbSize", label: "Thumb Size", control: "number", defaultValue: 14, min: 8, max: 24, step: 1, unit: "px" },
+    // Range-mode-only — value labels and show toggles. Grouped into
+    // their own section so the panel's auto-derived "Per Mode · Range"
+    // scope label applies only to these knobs and doesn't bleed into
+    // the truly-shared STYLE section above (Track Height / Radius /
+    // Thumb Size, which apply uniformly to both modes).
+    { key: "valueColor", label: "Value Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "valueSize", label: "Value Label Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px", section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showStart", label: "Show Start", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showEnd", label: "Show End", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showRange", label: "Show Range", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "mode",
+      label: "Mode",
+      options: [
+        { value: "single", label: "Single" },
+        { value: "range", label: "Range" }
+      ],
+      defaultValue: "single"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires continuously while the user drags the thumb. High-frequency \u2014 debounce before persisting.", payload: "{ value: number }", showWhen: { mode: "single" } },
+    { name: "onChange", description: "Fires continuously while the user drags either thumb. Payload is the full [start, end] range.", payload: "{ value: [number, number] }", showWhen: { mode: "range" } }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: ["Slider", "RangeSlider"],
+    props: [
+      { name: "value", type: "number  // (Slider) | [number, number]  // (RangeSlider)", description: "Current value. Tuple for RangeSlider." },
+      { name: "onChange", type: "(value: number) => void  // or ([start, end]) => void", description: "Change handler. Already unwrapped from DOM event \u2014 receives the parsed number(s)." },
+      { name: "min", type: "number", defaultValue: "0", description: "Lower bound." },
+      { name: "max", type: "number", defaultValue: "100", description: "Upper bound." },
+      { name: "step", type: "number", defaultValue: "1", description: "Increment per arrow/drag tick." }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sliderDef
+});
+//# sourceMappingURL=slider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n  id: 'slider',\n  name: 'Slider',\n  category: 'Inputs',\n  description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n  styleProperties: [\n    // Default — track + thumb both visible since slider always has both\n    { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n    // Hover — thumb tint when hovered or actively being dragged (one\n    // knob covers both since the visual difference is rarely worth\n    // exposing as two; the underlying CSS still applies `:active`).\n    { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n    // Focus — single shared ring around the thumb / track\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — shared opacity\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 style — always visible\n    { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n    { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n    { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n    // Range-mode-only — value labels and show toggles. Grouped into\n    // their own section so the panel's auto-derived \"Per Mode · Range\"\n    // scope label applies only to these knobs and doesn't bleed into\n    // the truly-shared STYLE section above (Track Height / Radius /\n    // Thumb Size, which apply uniformly to both modes).\n    { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'mode',\n      label: 'Mode',\n      options: [\n        { value: 'single', label: 'Single' },\n        { value: 'range', label: 'Range' },\n      ],\n      defaultValue: 'single',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n    { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: ['Slider', 'RangeSlider'],\n    props: [\n      { name: 'value', type: 'number  // (Slider) | [number, number]  // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n      { name: 'onChange', type: '(value: number) => void  // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n      { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n      { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n      { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

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

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

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

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

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

@@ -0,0 +1,75 @@
+const sliderDef = {
+  id: "slider",
+  name: "Slider",
+  category: "Inputs",
+  description: "Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled \u2014 only the thumb changes across interaction states; track + accent stay constant.",
+  styleProperties: [
+    // Default — track + thumb both visible since slider always has both
+    { key: "trackColor", label: "Track", control: "color", defaultValue: "var(--color-border)", section: "states", showWhen: { state: "default" } },
+    { key: "accentColor", label: "Accent (Filled)", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "default" } },
+    { key: "thumbColor", label: "Thumb", control: "color", defaultValue: "var(--color-accent)", section: "states", showWhen: { state: "default" } },
+    // Hover — thumb tint when hovered or actively being dragged (one
+    // knob covers both since the visual difference is rarely worth
+    // exposing as two; the underlying CSS still applies `:active`).
+    { key: "hoverThumbColor", label: "Thumb", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "hover" } },
+    // Focus — single shared ring around the thumb / track
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled — shared opacity
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.4, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Shared style — always visible
+    { key: "trackHeight", label: "Track Height", control: "number", defaultValue: 6, min: 2, max: 16, step: 1, unit: "px" },
+    { key: "trackRadius", label: "Track Radius", control: "slider", defaultValue: 999, min: 0, max: 999, step: 1, unit: "px" },
+    { key: "thumbSize", label: "Thumb Size", control: "number", defaultValue: 14, min: 8, max: 24, step: 1, unit: "px" },
+    // Range-mode-only — value labels and show toggles. Grouped into
+    // their own section so the panel's auto-derived "Per Mode · Range"
+    // scope label applies only to these knobs and doesn't bleed into
+    // the truly-shared STYLE section above (Track Height / Radius /
+    // Thumb Size, which apply uniformly to both modes).
+    { key: "valueColor", label: "Value Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "valueSize", label: "Value Label Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px", section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showStart", label: "Show Start", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showEnd", label: "Show End", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } },
+    { key: "showRange", label: "Show Range", control: "toggle", defaultValue: false, section: "rangeOptions", showWhen: { mode: "range" } }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "mode",
+      label: "Mode",
+      options: [
+        { value: "single", label: "Single" },
+        { value: "range", label: "Range" }
+      ],
+      defaultValue: "single"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires continuously while the user drags the thumb. High-frequency \u2014 debounce before persisting.", payload: "{ value: number }", showWhen: { mode: "single" } },
+    { name: "onChange", description: "Fires continuously while the user drags either thumb. Payload is the full [start, end] range.", payload: "{ value: [number, number] }", showWhen: { mode: "range" } }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: ["Slider", "RangeSlider"],
+    props: [
+      { name: "value", type: "number  // (Slider) | [number, number]  // (RangeSlider)", description: "Current value. Tuple for RangeSlider." },
+      { name: "onChange", type: "(value: number) => void  // or ([start, end]) => void", description: "Change handler. Already unwrapped from DOM event \u2014 receives the parsed number(s)." },
+      { name: "min", type: "number", defaultValue: "0", description: "Lower bound." },
+      { name: "max", type: "number", defaultValue: "100", description: "Upper bound." },
+      { name: "step", type: "number", defaultValue: "1", description: "Increment per arrow/drag tick." }
+    ]
+  }
+};
+export {
+  sliderDef
+};
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/slider.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sliderDef: ComponentDef = {\n  id: 'slider',\n  name: 'Slider',\n  category: 'Inputs',\n  description: 'Native range slider with themable track and thumb. Two modes: `single` is a one-thumb value picker; `range` is a dual-thumb start/end selector. Both modes share the same theming surface. State knobs cover default / hover / focus / disabled — only the thumb changes across interaction states; track + accent stay constant.',\n  styleProperties: [\n    // Default — track + thumb both visible since slider always has both\n    { key: 'trackColor', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'accentColor', label: 'Accent (Filled)', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'thumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent)', section: 'states', showWhen: { state: 'default' } },\n    // Hover — thumb tint when hovered or actively being dragged (one\n    // knob covers both since the visual difference is rarely worth\n    // exposing as two; the underlying CSS still applies `:active`).\n    { key: 'hoverThumbColor', label: 'Thumb', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'hover' } },\n    // Focus — single shared ring around the thumb / track\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — shared opacity\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 style — always visible\n    { key: 'trackHeight', label: 'Track Height', control: 'number', defaultValue: 6, min: 2, max: 16, step: 1, unit: 'px' },\n    { key: 'trackRadius', label: 'Track Radius', control: 'slider', defaultValue: 999, min: 0, max: 999, step: 1, unit: 'px' },\n    { key: 'thumbSize', label: 'Thumb Size', control: 'number', defaultValue: 14, min: 8, max: 24, step: 1, unit: 'px' },\n    // Range-mode-only — value labels and show toggles. Grouped into\n    // their own section so the panel's auto-derived \"Per Mode · Range\"\n    // scope label applies only to these knobs and doesn't bleed into\n    // the truly-shared STYLE section above (Track Height / Radius /\n    // Thumb Size, which apply uniformly to both modes).\n    { key: 'valueColor', label: 'Value Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'valueSize', label: 'Value Label Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showStart', label: 'Show Start', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showEnd', label: 'Show End', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\n    { key: 'showRange', label: 'Show Range', control: 'toggle', defaultValue: false, section: 'rangeOptions', showWhen: { mode: 'range' } },\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      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'mode',\n      label: 'Mode',\n      options: [\n        { value: 'single', label: 'Single' },\n        { value: 'range', label: 'Range' },\n      ],\n      defaultValue: 'single',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires continuously while the user drags the thumb. High-frequency — debounce before persisting.', payload: '{ value: number }', showWhen: { mode: 'single' } },\n    { name: 'onChange', description: 'Fires continuously while the user drags either thumb. Payload is the full [start, end] range.', payload: '{ value: [number, number] }', showWhen: { mode: 'range' } },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: ['Slider', 'RangeSlider'],\n    props: [\n      { name: 'value', type: 'number  // (Slider) | [number, number]  // (RangeSlider)', description: 'Current value. Tuple for RangeSlider.' },\n      { name: 'onChange', type: '(value: number) => void  // or ([start, end]) => void', description: 'Change handler. Already unwrapped from DOM event — receives the parsed number(s).' },\n      { name: 'min', type: 'number', defaultValue: '0', description: 'Lower bound.' },\n      { name: 'max', type: 'number', defaultValue: '100', description: 'Upper bound.' },\n      { name: 'step', type: 'number', defaultValue: '1', description: 'Increment per arrow/drag tick.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/textarea.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 textarea_exports = {};
+__export(textarea_exports, {
+  textareaDef: () => textareaDef
+});
+module.exports = __toCommonJS(textarea_exports);
+const textareaDef = {
+  id: "textarea",
+  name: "Textarea",
+  category: "Inputs",
+  description: "Multi-line text area. State knobs cover default / hover / focus / disabled / error.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    { key: "minHeight", label: "Min Height", control: "number", defaultValue: 100, min: 60, max: 300, step: 10, unit: "px" }
+    // Label theming + position live on FormField. See input-text for
+    // the same consolidation rationale.
+  ],
+  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 after the user commits a change (blur or Enter).", payload: "{ value: string }" },
+    { name: "onInput", description: "Fires on every keystroke.", payload: "{ value: string }" },
+    { name: "onFocus", description: "Fires when the textarea receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the textarea loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  textareaDef
+});
+//# sourceMappingURL=textarea.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/textarea.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const textareaDef: ComponentDef = {\n  id: 'textarea',\n  name: 'Textarea',\n  category: 'Inputs',\n  description: 'Multi-line text area. State knobs cover default / hover / focus / disabled / error.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n    // Hover\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    // Focus\n    { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Error\n    { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorColor', label: '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    // Shared\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n    { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 100, min: 60, max: 300, step: 10, unit: 'px' },\n    // Label theming + position live on FormField. See input-text for\n    // the same consolidation rationale.\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 after the user commits a change (blur or Enter).', payload: '{ value: string }' },\n    { name: 'onInput', description: 'Fires on every keystroke.', payload: '{ value: string }' },\n    { name: 'onFocus', description: 'Fires when the textarea receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the textarea loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/studio/lib/registry/inputs/textarea.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/textarea.js

@@ -0,0 +1,60 @@
+const textareaDef = {
+  id: "textarea",
+  name: "Textarea",
+  category: "Inputs",
+  description: "Multi-line text area. State knobs cover default / hover / focus / disabled / error.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "default" } },
+    { key: "color", label: "Text", control: "color", defaultValue: "var(--color-text)", section: "fieldColors", showWhen: { state: "default" } },
+    // Hover
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "hover" } },
+    // Focus
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "fieldColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledColor", label: "Text", control: "color", defaultValue: "var(--color-text-muted)", section: "fieldColors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "fieldColors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 10, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" },
+    { key: "minHeight", label: "Min Height", control: "number", defaultValue: 100, min: 60, max: 300, step: 10, unit: "px" }
+    // Label theming + position live on FormField. See input-text for
+    // the same consolidation rationale.
+  ],
+  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 after the user commits a change (blur or Enter).", payload: "{ value: string }" },
+    { name: "onInput", description: "Fires on every keystroke.", payload: "{ value: string }" },
+    { name: "onFocus", description: "Fires when the textarea receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the textarea loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  textareaDef
+};
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/textarea.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const textareaDef: ComponentDef = {\n  id: 'textarea',\n  name: 'Textarea',\n  category: 'Inputs',\n  description: 'Multi-line text area. State knobs cover default / hover / focus / disabled / error.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n    { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n    // Hover\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n    // Focus\n    { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Error\n    { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n    { key: 'errorColor', label: '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    // Shared\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n    { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 100, min: 60, max: 300, step: 10, unit: 'px' },\n    // Label theming + position live on FormField. See input-text for\n    // the same consolidation rationale.\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 after the user commits a change (blur or Enter).', payload: '{ value: string }' },\n    { name: 'onInput', description: 'Fires on every keystroke.', payload: '{ value: string }' },\n    { name: 'onFocus', description: 'Fires when the textarea receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the textarea loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}