@viax.io/uxm 4.37.1 → 4.39.0

package/dist/studio/lib/registry/inputs/time-input.cjs

@@ -0,0 +1,131 @@
+"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 time_input_exports = {};
+__export(time_input_exports, {
+  timeInputDef: () => timeInputDef
+});
+module.exports = __toCommonJS(time_input_exports);
+const timeInputDef = {
+  id: "time-input",
+  name: "Time Input",
+  category: "Inputs",
+  description: "Time entry field with a trailing clock icon and an HH:MM mask. The `12h` format adds an AM/PM selector at the trailing edge. 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" } },
+    { key: "iconColor", label: "Icon", control: "color", defaultValue: "var(--color-text-muted)", 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: "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: 99, 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: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 12, max: 24, step: 1, unit: "px" },
+    { key: "iconOffset", label: "Icon Offset", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px" },
+    { key: "iconHoverColor", label: "Icon Hover", control: "color", defaultValue: "var(--color-text)" },
+    // 12h-mode-only — the AM/PM suffix is a quiet inline label (no chip
+    // background), so only the text color is themable. Gated by `showWhen`
+    // so the knob only surfaces in 12h mode, matching DateInput's
+    // range-mode-only knobs precedent.
+    { key: "meridiemColor", label: "AM/PM Text", control: "color", defaultValue: "var(--color-text-muted)", section: "meridiem", showWhen: { format: "12h" } },
+    // Popover knobs — the column-scroll picker that opens when the
+    // clock icon is clicked. Grouped into their own section so the
+    // panel reads as "the floating surface" distinct from the field.
+    { key: "popoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "popover" },
+    { key: "popoverBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "popover" },
+    { key: "popoverRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "popover" },
+    { key: "popoverHeadBg", label: "Column Heading", control: "color", defaultValue: "var(--color-surface-alt)", section: "popover" },
+    // Row hover + selected defaults align with the Listbox option
+    // tokens (`--uxm-listbox-option-{active,selected}-{bg,color}`) so a
+    // selected time visually matches a selected listbox option out of
+    // the box. TimeInput keeps its own knobs (the columns aren't a
+    // Listbox), but the defaults stay in lockstep — designers can tune
+    // them independently if they want a different time-picker palette.
+    { key: "popoverRowHoverBg", label: "Row Hover", control: "color", defaultValue: "var(--color-surface-alt)", section: "popover" },
+    { key: "popoverRowSelectedBg", label: "Selected Row", control: "color", defaultValue: "var(--color-accent-subtle)", section: "popover" },
+    { key: "popoverRowSelectedColor", label: "Selected Text", control: "color", defaultValue: "var(--color-accent-bold)", section: "popover" }
+  ],
+  layoutVariants: [
+    {
+      key: "format",
+      label: "Format",
+      options: [
+        { value: "24h", label: "24-hour (HH:MM)" },
+        { value: "12h", label: "12-hour (HH:MM AM/PM)" }
+      ],
+      defaultValue: "24h"
+    },
+    {
+      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 on every keystroke, meridiem flip, or popover column pick. Payload is the masked, joined value (`HH:MM` for 24h, `HH:MM AM/PM` for 12h).", payload: "{ value: string }" },
+    { name: "onOpen", description: "Fires when the time-picker popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the time-picker popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the field receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
+  ],
+  api: {
+    importPath: "@viax/uxm/ui",
+    importNames: "TimeInput",
+    props: [
+      { name: "value", type: "string", description: 'Current value (controlled). 24h: `"HH:MM"`. 12h: `"HH:MM AM"` or `"HH:MM PM"`.' },
+      { name: "onChange", type: "(value: string) => void", description: "Called with the masked, joined value after each edit." },
+      { name: "format", type: '"24h" | "12h"', defaultValue: '"24h"', description: "Clock convention. `12h` adds an AM/PM selector and a third popover column." },
+      { name: "clock", type: "boolean", defaultValue: "true", description: "Render the trailing clock icon. Pass `false` for an icon-less field." },
+      { name: "picker", type: "boolean", defaultValue: "true", description: "Mount the click-list popover (hour / minute / AM-PM). Pass `false` for a typing-only field \u2014 the clock icon stays decorative." },
+      { name: "minuteStep", type: "number", defaultValue: "1", description: "Increment shown in the minute column of the popover. Off-step values typed into the field are still included (sorted), so a typed `09:03` under `minuteStep={5}` doesn't vanish." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: "Show a trailing clear (\u2715) button when the field has a value. The \u2715 sits inboard of the clock icon (and the AM/PM badge in 12h) and resets the value." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the input, the AM/PM selector, and the picker trigger." },
+      { name: "...rest", type: "InputHTMLAttributes<HTMLInputElement>", description: "All other native input attributes (placeholder, name, aria-label, etc.) pass through." }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  timeInputDef
+});
+//# sourceMappingURL=time-input.cjs.map

package/dist/studio/lib/registry/inputs/time-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/time-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const timeInputDef: ComponentDef = {\n  id: 'time-input',\n  name: 'Time Input',\n  category: 'Inputs',\n  description: 'Time entry field with a trailing clock icon and an HH:MM mask. The `12h` format adds an AM/PM selector at the trailing edge. 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    { key: 'iconColor', label: 'Icon', control: 'color', defaultValue: 'var(--color-text-muted)', 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: '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: 99, 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: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n    { key: 'iconOffset', label: 'Icon Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n    { key: 'iconHoverColor', label: 'Icon Hover', control: 'color', defaultValue: 'var(--color-text)' },\n    // 12h-mode-only — the AM/PM suffix is a quiet inline label (no chip\n    // background), so only the text color is themable. Gated by `showWhen`\n    // so the knob only surfaces in 12h mode, matching DateInput's\n    // range-mode-only knobs precedent.\n    { key: 'meridiemColor', label: 'AM/PM Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'meridiem', showWhen: { format: '12h' } },\n    // Popover knobs — the column-scroll picker that opens when the\n    // clock icon is clicked. Grouped into their own section so the\n    // panel reads as \"the floating surface\" distinct from the field.\n    { key: 'popoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'popover' },\n    { key: 'popoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'popover' },\n    { key: 'popoverRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'popover' },\n    { key: 'popoverHeadBg', label: 'Column Heading', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'popover' },\n    // Row hover + selected defaults align with the Listbox option\n    // tokens (`--uxm-listbox-option-{active,selected}-{bg,color}`) so a\n    // selected time visually matches a selected listbox option out of\n    // the box. TimeInput keeps its own knobs (the columns aren't a\n    // Listbox), but the defaults stay in lockstep — designers can tune\n    // them independently if they want a different time-picker palette.\n    { key: 'popoverRowHoverBg', label: 'Row Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'popover' },\n    { key: 'popoverRowSelectedBg', label: 'Selected Row', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'popover' },\n    { key: 'popoverRowSelectedColor', label: 'Selected Text', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'popover' },\n  ],\n  layoutVariants: [\n    {\n      key: 'format',\n      label: 'Format',\n      options: [\n        { value: '24h', label: '24-hour (HH:MM)' },\n        { value: '12h', label: '12-hour (HH:MM AM/PM)' },\n      ],\n      defaultValue: '24h',\n    },\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 on every keystroke, meridiem flip, or popover column pick. Payload is the masked, joined value (`HH:MM` for 24h, `HH:MM AM/PM` for 12h).', payload: '{ value: string }' },\n    { name: 'onOpen', description: 'Fires when the time-picker popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the time-picker popover closes (selection or outside click).', payload: 'void' },\n    { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n  ],\n  api: {\n    importPath: '@viax/uxm/ui',\n    importNames: 'TimeInput',\n    props: [\n      { name: 'value', type: 'string', description: 'Current value (controlled). 24h: `\"HH:MM\"`. 12h: `\"HH:MM AM\"` or `\"HH:MM PM\"`.' },\n      { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, joined value after each edit.' },\n      { name: 'format', type: '\"24h\" | \"12h\"', defaultValue: '\"24h\"', description: 'Clock convention. `12h` adds an AM/PM selector and a third popover column.' },\n      { name: 'clock', type: 'boolean', defaultValue: 'true', description: 'Render the trailing clock icon. Pass `false` for an icon-less field.' },\n      { name: 'picker', type: 'boolean', defaultValue: 'true', description: 'Mount the click-list popover (hour / minute / AM-PM). Pass `false` for a typing-only field — the clock icon stays decorative.' },\n      { name: 'minuteStep', type: 'number', defaultValue: '1', description: \"Increment shown in the minute column of the popover. Off-step values typed into the field are still included (sorted), so a typed `09:03` under `minuteStep={5}` doesn't vanish.\" },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the field has a value. The ✕ sits inboard of the clock icon (and the AM/PM badge in 12h) and resets the value.' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input, the AM/PM selector, and the picker trigger.' },\n      { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/time-input.d.ts

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

package/dist/studio/lib/registry/inputs/time-input.d.ts.map

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

package/dist/studio/lib/registry/inputs/time-input.js

@@ -0,0 +1,107 @@
+const timeInputDef = {
+  id: "time-input",
+  name: "Time Input",
+  category: "Inputs",
+  description: "Time entry field with a trailing clock icon and an HH:MM mask. The `12h` format adds an AM/PM selector at the trailing edge. 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" } },
+    { key: "iconColor", label: "Icon", control: "color", defaultValue: "var(--color-text-muted)", 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: "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: 99, 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: "iconSize", label: "Icon Size", control: "number", defaultValue: 16, min: 12, max: 24, step: 1, unit: "px" },
+    { key: "iconOffset", label: "Icon Offset", control: "number", defaultValue: 12, min: 4, max: 24, step: 1, unit: "px" },
+    { key: "iconHoverColor", label: "Icon Hover", control: "color", defaultValue: "var(--color-text)" },
+    // 12h-mode-only — the AM/PM suffix is a quiet inline label (no chip
+    // background), so only the text color is themable. Gated by `showWhen`
+    // so the knob only surfaces in 12h mode, matching DateInput's
+    // range-mode-only knobs precedent.
+    { key: "meridiemColor", label: "AM/PM Text", control: "color", defaultValue: "var(--color-text-muted)", section: "meridiem", showWhen: { format: "12h" } },
+    // Popover knobs — the column-scroll picker that opens when the
+    // clock icon is clicked. Grouped into their own section so the
+    // panel reads as "the floating surface" distinct from the field.
+    { key: "popoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "popover" },
+    { key: "popoverBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "popover" },
+    { key: "popoverRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "popover" },
+    { key: "popoverHeadBg", label: "Column Heading", control: "color", defaultValue: "var(--color-surface-alt)", section: "popover" },
+    // Row hover + selected defaults align with the Listbox option
+    // tokens (`--uxm-listbox-option-{active,selected}-{bg,color}`) so a
+    // selected time visually matches a selected listbox option out of
+    // the box. TimeInput keeps its own knobs (the columns aren't a
+    // Listbox), but the defaults stay in lockstep — designers can tune
+    // them independently if they want a different time-picker palette.
+    { key: "popoverRowHoverBg", label: "Row Hover", control: "color", defaultValue: "var(--color-surface-alt)", section: "popover" },
+    { key: "popoverRowSelectedBg", label: "Selected Row", control: "color", defaultValue: "var(--color-accent-subtle)", section: "popover" },
+    { key: "popoverRowSelectedColor", label: "Selected Text", control: "color", defaultValue: "var(--color-accent-bold)", section: "popover" }
+  ],
+  layoutVariants: [
+    {
+      key: "format",
+      label: "Format",
+      options: [
+        { value: "24h", label: "24-hour (HH:MM)" },
+        { value: "12h", label: "12-hour (HH:MM AM/PM)" }
+      ],
+      defaultValue: "24h"
+    },
+    {
+      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 on every keystroke, meridiem flip, or popover column pick. Payload is the masked, joined value (`HH:MM` for 24h, `HH:MM AM/PM` for 12h).", payload: "{ value: string }" },
+    { name: "onOpen", description: "Fires when the time-picker popover opens.", payload: "void" },
+    { name: "onClose", description: "Fires when the time-picker popover closes (selection or outside click).", payload: "void" },
+    { name: "onFocus", description: "Fires when the field receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
+  ],
+  api: {
+    importPath: "@viax/uxm/ui",
+    importNames: "TimeInput",
+    props: [
+      { name: "value", type: "string", description: 'Current value (controlled). 24h: `"HH:MM"`. 12h: `"HH:MM AM"` or `"HH:MM PM"`.' },
+      { name: "onChange", type: "(value: string) => void", description: "Called with the masked, joined value after each edit." },
+      { name: "format", type: '"24h" | "12h"', defaultValue: '"24h"', description: "Clock convention. `12h` adds an AM/PM selector and a third popover column." },
+      { name: "clock", type: "boolean", defaultValue: "true", description: "Render the trailing clock icon. Pass `false` for an icon-less field." },
+      { name: "picker", type: "boolean", defaultValue: "true", description: "Mount the click-list popover (hour / minute / AM-PM). Pass `false` for a typing-only field \u2014 the clock icon stays decorative." },
+      { name: "minuteStep", type: "number", defaultValue: "1", description: "Increment shown in the minute column of the popover. Off-step values typed into the field are still included (sorted), so a typed `09:03` under `minuteStep={5}` doesn't vanish." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: "Show a trailing clear (\u2715) button when the field has a value. The \u2715 sits inboard of the clock icon (and the AM/PM badge in 12h) and resets the value." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the input, the AM/PM selector, and the picker trigger." },
+      { name: "...rest", type: "InputHTMLAttributes<HTMLInputElement>", description: "All other native input attributes (placeholder, name, aria-label, etc.) pass through." }
+    ]
+  }
+};
+export {
+  timeInputDef
+};
+//# sourceMappingURL=time-input.js.map

package/dist/studio/lib/registry/inputs/time-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/time-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const timeInputDef: ComponentDef = {\n  id: 'time-input',\n  name: 'Time Input',\n  category: 'Inputs',\n  description: 'Time entry field with a trailing clock icon and an HH:MM mask. The `12h` format adds an AM/PM selector at the trailing edge. 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    { key: 'iconColor', label: 'Icon', control: 'color', defaultValue: 'var(--color-text-muted)', 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: '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: 99, 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: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 16, min: 12, max: 24, step: 1, unit: 'px' },\n    { key: 'iconOffset', label: 'Icon Offset', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px' },\n    { key: 'iconHoverColor', label: 'Icon Hover', control: 'color', defaultValue: 'var(--color-text)' },\n    // 12h-mode-only — the AM/PM suffix is a quiet inline label (no chip\n    // background), so only the text color is themable. Gated by `showWhen`\n    // so the knob only surfaces in 12h mode, matching DateInput's\n    // range-mode-only knobs precedent.\n    { key: 'meridiemColor', label: 'AM/PM Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'meridiem', showWhen: { format: '12h' } },\n    // Popover knobs — the column-scroll picker that opens when the\n    // clock icon is clicked. Grouped into their own section so the\n    // panel reads as \"the floating surface\" distinct from the field.\n    { key: 'popoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'popover' },\n    { key: 'popoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'popover' },\n    { key: 'popoverRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'popover' },\n    { key: 'popoverHeadBg', label: 'Column Heading', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'popover' },\n    // Row hover + selected defaults align with the Listbox option\n    // tokens (`--uxm-listbox-option-{active,selected}-{bg,color}`) so a\n    // selected time visually matches a selected listbox option out of\n    // the box. TimeInput keeps its own knobs (the columns aren't a\n    // Listbox), but the defaults stay in lockstep — designers can tune\n    // them independently if they want a different time-picker palette.\n    { key: 'popoverRowHoverBg', label: 'Row Hover', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'popover' },\n    { key: 'popoverRowSelectedBg', label: 'Selected Row', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'popover' },\n    { key: 'popoverRowSelectedColor', label: 'Selected Text', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'popover' },\n  ],\n  layoutVariants: [\n    {\n      key: 'format',\n      label: 'Format',\n      options: [\n        { value: '24h', label: '24-hour (HH:MM)' },\n        { value: '12h', label: '12-hour (HH:MM AM/PM)' },\n      ],\n      defaultValue: '24h',\n    },\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 on every keystroke, meridiem flip, or popover column pick. Payload is the masked, joined value (`HH:MM` for 24h, `HH:MM AM/PM` for 12h).', payload: '{ value: string }' },\n    { name: 'onOpen', description: 'Fires when the time-picker popover opens.', payload: 'void' },\n    { name: 'onClose', description: 'Fires when the time-picker popover closes (selection or outside click).', payload: 'void' },\n    { name: 'onFocus', description: 'Fires when the field receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n  ],\n  api: {\n    importPath: '@viax/uxm/ui',\n    importNames: 'TimeInput',\n    props: [\n      { name: 'value', type: 'string', description: 'Current value (controlled). 24h: `\"HH:MM\"`. 12h: `\"HH:MM AM\"` or `\"HH:MM PM\"`.' },\n      { name: 'onChange', type: '(value: string) => void', description: 'Called with the masked, joined value after each edit.' },\n      { name: 'format', type: '\"24h\" | \"12h\"', defaultValue: '\"24h\"', description: 'Clock convention. `12h` adds an AM/PM selector and a third popover column.' },\n      { name: 'clock', type: 'boolean', defaultValue: 'true', description: 'Render the trailing clock icon. Pass `false` for an icon-less field.' },\n      { name: 'picker', type: 'boolean', defaultValue: 'true', description: 'Mount the click-list popover (hour / minute / AM-PM). Pass `false` for a typing-only field — the clock icon stays decorative.' },\n      { name: 'minuteStep', type: 'number', defaultValue: '1', description: \"Increment shown in the minute column of the popover. Off-step values typed into the field are still included (sorted), so a typed `09:03` under `minuteStep={5}` doesn't vanish.\" },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a trailing clear (✕) button when the field has a value. The ✕ sits inboard of the clock icon (and the AM/PM badge in 12h) and resets the value.' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input, the AM/PM selector, and the picker trigger.' },\n      { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (placeholder, name, aria-label, etc.) pass through.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/toggle-switch.cjs

@@ -0,0 +1,80 @@
+"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 toggle_switch_exports = {};
+__export(toggle_switch_exports, {
+  toggleSwitchDef: () => toggleSwitchDef
+});
+module.exports = __toCommonJS(toggle_switch_exports);
+const toggleSwitchDef = {
+  id: "toggle-switch",
+  name: "Toggle Switch",
+  category: "Inputs",
+  description: "On/off toggle switch. State knobs cover off \xD7 on across default / hover / focus, plus a shared disabled opacity.",
+  styleProperties: [
+    // Default — off
+    { key: "offTrack", label: "Track", control: "color", defaultValue: "var(--color-border)", section: "offColors", showWhen: { state: "default" } },
+    { key: "offThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "offColors", showWhen: { state: "default" } },
+    // Default — on
+    { key: "onTrack", label: "Track", control: "color", defaultValue: "var(--color-accent)", section: "onColors", showWhen: { state: "default" } },
+    { key: "onThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "onColors", showWhen: { state: "default" } },
+    // Hover — off
+    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)
+    { key: "hoverOffTrack", label: "Track", control: "color", defaultValue: "var(--color-text-strong)", section: "offColors", showWhen: { state: "hover" } },
+    { key: "hoverOffThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "offColors", showWhen: { state: "hover" } },
+    // Hover — on
+    { key: "hoverOnTrack", label: "Track", control: "color", defaultValue: "var(--color-accent-bold)", section: "onColors", showWhen: { state: "hover" } },
+    { key: "hoverOnThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "onColors", showWhen: { state: "hover" } },
+    // Focus — single shared ring color (outline applies the same to
+    // off and on; splitting it into two knobs was overkill).
+    { 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 — always visible
+    { key: "width", label: "Width", control: "number", defaultValue: 44, min: 32, max: 64, step: 4, unit: "px" },
+    { key: "height", label: "Height", control: "number", defaultValue: 24, min: 18, max: 36, step: 2, unit: "px" },
+    // Error — the track + label stay neutral; the message below is the sole
+    // signal (errorColor colors it, errorMessageSize sizes it).
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the toggle flips on/off.", payload: "{ checked: boolean }" },
+    { name: "onFocus", description: "Fires when the toggle receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the toggle loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  toggleSwitchDef
+});
+//# sourceMappingURL=toggle-switch.cjs.map

package/dist/studio/lib/registry/inputs/toggle-switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/toggle-switch.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const toggleSwitchDef: ComponentDef = {\n  id: 'toggle-switch',\n  name: 'Toggle Switch',\n  category: 'Inputs',\n  description: 'On/off toggle switch. State knobs cover off × on across default / hover / focus, plus a shared disabled opacity.',\n  styleProperties: [\n    // Default — off\n    { key: 'offTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'offColors', showWhen: { state: 'default' } },\n    { key: 'offThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'offColors', showWhen: { state: 'default' } },\n    // Default — on\n    { key: 'onTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-accent)', section: 'onColors', showWhen: { state: 'default' } },\n    { key: 'onThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'onColors', showWhen: { state: 'default' } },\n    // Hover — off\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverOffTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'offColors', showWhen: { state: 'hover' } },\n    { key: 'hoverOffThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'offColors', showWhen: { state: 'hover' } },\n    // Hover — on\n    { key: 'hoverOnTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'onColors', showWhen: { state: 'hover' } },\n    { key: 'hoverOnThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'onColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color (outline applies the same to\n    // off and on; splitting it into two knobs was overkill).\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — 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 — always visible\n    { key: 'width', label: 'Width', control: 'number', defaultValue: 44, min: 32, max: 64, step: 4, unit: 'px' },\n    { key: 'height', label: 'Height', control: 'number', defaultValue: 24, min: 18, max: 36, step: 2, unit: 'px' },\n    // Error — the track + label stay neutral; the message below is the sole\n    // signal (errorColor colors it, errorMessageSize sizes it).\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the toggle flips on/off.', payload: '{ checked: boolean }' },\n    { name: 'onFocus', description: 'Fires when the toggle receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the toggle loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/toggle-switch.d.ts

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

package/dist/studio/lib/registry/inputs/toggle-switch.d.ts.map

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

package/dist/studio/lib/registry/inputs/toggle-switch.js

@@ -0,0 +1,56 @@
+const toggleSwitchDef = {
+  id: "toggle-switch",
+  name: "Toggle Switch",
+  category: "Inputs",
+  description: "On/off toggle switch. State knobs cover off \xD7 on across default / hover / focus, plus a shared disabled opacity.",
+  styleProperties: [
+    // Default — off
+    { key: "offTrack", label: "Track", control: "color", defaultValue: "var(--color-border)", section: "offColors", showWhen: { state: "default" } },
+    { key: "offThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "offColors", showWhen: { state: "default" } },
+    // Default — on
+    { key: "onTrack", label: "Track", control: "color", defaultValue: "var(--color-accent)", section: "onColors", showWhen: { state: "default" } },
+    { key: "onThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "onColors", showWhen: { state: "default" } },
+    // Hover — off
+    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)
+    { key: "hoverOffTrack", label: "Track", control: "color", defaultValue: "var(--color-text-strong)", section: "offColors", showWhen: { state: "hover" } },
+    { key: "hoverOffThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "offColors", showWhen: { state: "hover" } },
+    // Hover — on
+    { key: "hoverOnTrack", label: "Track", control: "color", defaultValue: "var(--color-accent-bold)", section: "onColors", showWhen: { state: "hover" } },
+    { key: "hoverOnThumb", label: "Thumb", control: "color", defaultValue: "var(--color-card)", section: "onColors", showWhen: { state: "hover" } },
+    // Focus — single shared ring color (outline applies the same to
+    // off and on; splitting it into two knobs was overkill).
+    { 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 — always visible
+    { key: "width", label: "Width", control: "number", defaultValue: 44, min: 32, max: 64, step: 4, unit: "px" },
+    { key: "height", label: "Height", control: "number", defaultValue: 24, min: 18, max: 36, step: 2, unit: "px" },
+    // Error — the track + label stay neutral; the message below is the sole
+    // signal (errorColor colors it, errorMessageSize sizes it).
+    { key: "errorColor", label: "Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the toggle flips on/off.", payload: "{ checked: boolean }" },
+    { name: "onFocus", description: "Fires when the toggle receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the toggle loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  toggleSwitchDef
+};
+//# sourceMappingURL=toggle-switch.js.map

package/dist/studio/lib/registry/inputs/toggle-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/toggle-switch.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const toggleSwitchDef: ComponentDef = {\n  id: 'toggle-switch',\n  name: 'Toggle Switch',\n  category: 'Inputs',\n  description: 'On/off toggle switch. State knobs cover off × on across default / hover / focus, plus a shared disabled opacity.',\n  styleProperties: [\n    // Default — off\n    { key: 'offTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-border)', section: 'offColors', showWhen: { state: 'default' } },\n    { key: 'offThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'offColors', showWhen: { state: 'default' } },\n    // Default — on\n    { key: 'onTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-accent)', section: 'onColors', showWhen: { state: 'default' } },\n    { key: 'onThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'onColors', showWhen: { state: 'default' } },\n    // Hover — off\n    // text-strong, not text-muted: muted is 2.54:1 on card in light — under the 3:1 UI floor (Principle IV)\n    { key: 'hoverOffTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'offColors', showWhen: { state: 'hover' } },\n    { key: 'hoverOffThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'offColors', showWhen: { state: 'hover' } },\n    // Hover — on\n    { key: 'hoverOnTrack', label: 'Track', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'onColors', showWhen: { state: 'hover' } },\n    { key: 'hoverOnThumb', label: 'Thumb', control: 'color', defaultValue: 'var(--color-card)', section: 'onColors', showWhen: { state: 'hover' } },\n    // Focus — single shared ring color (outline applies the same to\n    // off and on; splitting it into two knobs was overkill).\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled — 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 — always visible\n    { key: 'width', label: 'Width', control: 'number', defaultValue: 44, min: 32, max: 64, step: 4, unit: 'px' },\n    { key: 'height', label: 'Height', control: 'number', defaultValue: 24, min: 18, max: 36, step: 2, unit: 'px' },\n    // Error — the track + label stay neutral; the message below is the sole\n    // signal (errorColor colors it, errorMessageSize sizes it).\n    { key: 'errorColor', label: 'Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n    { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the toggle flips on/off.', payload: '{ checked: boolean }' },\n    { name: 'onFocus', description: 'Fires when the toggle receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the toggle loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/mobile-gallery.d.ts

@@ -1,2 +1,2 @@
-export declare function MobileGallery(): import("react/jsx-runtime").JSX.Element;
+export declare function MobileGallery(): import("react").JSX.Element;
 //# sourceMappingURL=mobile-gallery.d.ts.map

package/dist/studio/mobile-gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-gallery.d.ts","sourceRoot":"","sources":["../../src/studio/mobile-gallery.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,aAAa,4CA0F5B"}
+{"version":3,"file":"mobile-gallery.d.ts","sourceRoot":"","sources":["../../src/studio/mobile-gallery.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,aAAa,gCA0F5B"}

package/dist/studio/persistence/css-sanitizers.cjs

@@ -0,0 +1,75 @@
+"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 css_sanitizers_exports = {};
+__export(css_sanitizers_exports, {
+  safeFontFamily: () => safeFontFamily,
+  safeFontWeight: () => safeFontWeight,
+  safeLineHeight: () => safeLineHeight,
+  safeTokenKey: () => safeTokenKey,
+  safeTokenValue: () => safeTokenValue,
+  safeTypeScale: () => safeTypeScale,
+  safeUrl: () => safeUrl
+});
+module.exports = __toCommonJS(css_sanitizers_exports);
+function safeUrl(v) {
+  if (typeof v !== "string") return void 0;
+  const trimmed = v.trim();
+  if (!/^(https?:\/\/|\/)/.test(trimmed)) return void 0;
+  if (/[")\n\r]/.test(trimmed)) return void 0;
+  return trimmed;
+}
+function safeFontFamily(v) {
+  if (typeof v !== "string") return void 0;
+  const trimmed = v.trim();
+  return /^[A-Za-z0-9 _-]+$/.test(trimmed) ? trimmed : void 0;
+}
+function safeFontWeight(v) {
+  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
+  return s !== void 0 && /^(500|600|700)$/.test(s) ? s : void 0;
+}
+function safeTypeScale(v) {
+  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
+  if (s === void 0 || !/^(?:0|[1-9]\d?)(?:\.\d{1,3})?$/.test(s)) return void 0;
+  const n = Number(s);
+  return n >= 0.5 && n <= 2 ? s : void 0;
+}
+function safeLineHeight(v) {
+  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
+  if (s === void 0 || !/^[1-9](?:\.\d{1,2})?$/.test(s)) return void 0;
+  const n = Number(s);
+  return n >= 1 && n <= 2.5 ? s : void 0;
+}
+function safeTokenKey(v) {
+  return /^--[A-Za-z0-9-]+$/.test(v);
+}
+function safeTokenValue(v) {
+  if (typeof v !== "string") return void 0;
+  return /[{};\n\r]/.test(v) ? void 0 : v;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  safeFontFamily,
+  safeFontWeight,
+  safeLineHeight,
+  safeTokenKey,
+  safeTokenValue,
+  safeTypeScale,
+  safeUrl
+});
+//# sourceMappingURL=css-sanitizers.cjs.map