@viax.io/uxm 4.38.0 → 4.40.0

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

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

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

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

package/dist/studio/lib/registry/inputs/code-editor.cjs

@@ -0,0 +1,90 @@
+"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 code_editor_exports = {};
+__export(code_editor_exports, {
+  codeEditorDef: () => codeEditorDef
+});
+module.exports = __toCommonJS(code_editor_exports);
+const codeEditorDef = {
+  id: "code-editor",
+  name: "Code Editor",
+  category: "Inputs",
+  description: "Monospace code surface for developer tooling. Knobs also theme the read-only CodeBlock \u2014 the two are one surface on purpose.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", 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: "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: "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" } },
+    // Gutter — the line-number ruler. Its color/gap are the only chrome the
+    // gutter owns; its font and vertical padding are shared with the code so
+    // the two stay aligned, and are therefore NOT separately tunable.
+    { key: "gutterColor", label: "Number Color", control: "color", defaultValue: "var(--color-text-muted)", section: "gutter" },
+    { key: "gutterBg", label: "Gutter Background", control: "color", defaultValue: "transparent", section: "gutter" },
+    { key: "gutterBorder", label: "Gutter Divider", control: "color", defaultValue: "var(--color-border)", section: "gutter" },
+    { key: "gutterGap", label: "Gutter Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px", section: "gutter" },
+    // 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: 14, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 12, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 12.5, min: 10, max: 18, step: 0.5, unit: "px" },
+    // Unitless on purpose — a line-height with a unit breaks the gutter's
+    // alignment as soon as the font size changes.
+    { key: "lineHeight", label: "Line Height", control: "slider", defaultValue: 1.6, min: 1.2, max: 2.2, step: 0.1 },
+    { key: "minHeight", label: "Min Height", control: "number", defaultValue: 140, min: 80, max: 480, step: 20, unit: "px" }
+  ],
+  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 on every edit, including Tab-indent and auto-indent.", payload: "{ value: string }" },
+    { name: "onKeyDown", description: "Runs BEFORE the atom's own key handling \u2014 call preventDefault to claim a key (e.g. \u2318Enter to run).", payload: "KeyboardEvent" },
+    { name: "onFocus", description: "Fires when the editor receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the editor loses focus.", payload: "FocusEvent" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  codeEditorDef
+});
+//# sourceMappingURL=code-editor.cjs.map

package/dist/studio/lib/registry/inputs/code-editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/code-editor.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const codeEditorDef: ComponentDef = {\n  id: 'code-editor',\n  name: 'Code Editor',\n  category: 'Inputs',\n  description: 'Monospace code surface for developer tooling. Knobs also theme the read-only CodeBlock — the two are one surface on purpose.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', 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: '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: '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    // Gutter — the line-number ruler. Its color/gap are the only chrome the\n    // gutter owns; its font and vertical padding are shared with the code so\n    // the two stay aligned, and are therefore NOT separately tunable.\n    { key: 'gutterColor', label: 'Number Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'gutter' },\n    { key: 'gutterBg', label: 'Gutter Background', control: 'color', defaultValue: 'transparent', section: 'gutter' },\n    { key: 'gutterBorder', label: 'Gutter Divider', control: 'color', defaultValue: 'var(--color-border)', section: 'gutter' },\n    { key: 'gutterGap', label: 'Gutter Gap', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px', section: 'gutter' },\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: 14, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 4, max: 20, step: 2, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12.5, min: 10, max: 18, step: 0.5, unit: 'px' },\n    // Unitless on purpose — a line-height with a unit breaks the gutter's\n    // alignment as soon as the font size changes.\n    { key: 'lineHeight', label: 'Line Height', control: 'slider', defaultValue: 1.6, min: 1.2, max: 2.2, step: 0.1 },\n    { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 140, min: 80, max: 480, step: 20, unit: 'px' },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires on every edit, including Tab-indent and auto-indent.', payload: '{ value: string }' },\n    { name: 'onKeyDown', description: 'Runs BEFORE the atom\\'s own key handling — call preventDefault to claim a key (e.g. ⌘Enter to run).', payload: 'KeyboardEvent' },\n    { name: 'onFocus', description: 'Fires when the editor receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the editor loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/code-editor.d.ts

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

package/dist/studio/lib/registry/inputs/code-editor.d.ts.map

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

package/dist/studio/lib/registry/inputs/code-editor.js

@@ -0,0 +1,66 @@
+const codeEditorDef = {
+  id: "code-editor",
+  name: "Code Editor",
+  category: "Inputs",
+  description: "Monospace code surface for developer tooling. Knobs also theme the read-only CodeBlock \u2014 the two are one surface on purpose.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", 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: "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: "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" } },
+    // Gutter — the line-number ruler. Its color/gap are the only chrome the
+    // gutter owns; its font and vertical padding are shared with the code so
+    // the two stay aligned, and are therefore NOT separately tunable.
+    { key: "gutterColor", label: "Number Color", control: "color", defaultValue: "var(--color-text-muted)", section: "gutter" },
+    { key: "gutterBg", label: "Gutter Background", control: "color", defaultValue: "transparent", section: "gutter" },
+    { key: "gutterBorder", label: "Gutter Divider", control: "color", defaultValue: "var(--color-border)", section: "gutter" },
+    { key: "gutterGap", label: "Gutter Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px", section: "gutter" },
+    // 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: 14, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 12, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 12.5, min: 10, max: 18, step: 0.5, unit: "px" },
+    // Unitless on purpose — a line-height with a unit breaks the gutter's
+    // alignment as soon as the font size changes.
+    { key: "lineHeight", label: "Line Height", control: "slider", defaultValue: 1.6, min: 1.2, max: 2.2, step: 0.1 },
+    { key: "minHeight", label: "Min Height", control: "number", defaultValue: 140, min: 80, max: 480, step: 20, unit: "px" }
+  ],
+  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 on every edit, including Tab-indent and auto-indent.", payload: "{ value: string }" },
+    { name: "onKeyDown", description: "Runs BEFORE the atom's own key handling \u2014 call preventDefault to claim a key (e.g. \u2318Enter to run).", payload: "KeyboardEvent" },
+    { name: "onFocus", description: "Fires when the editor receives focus.", payload: "FocusEvent" },
+    { name: "onBlur", description: "Fires when the editor loses focus.", payload: "FocusEvent" }
+  ]
+};
+export {
+  codeEditorDef
+};
+//# sourceMappingURL=code-editor.js.map

package/dist/studio/lib/registry/inputs/code-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/code-editor.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const codeEditorDef: ComponentDef = {\n  id: 'code-editor',\n  name: 'Code Editor',\n  category: 'Inputs',\n  description: 'Monospace code surface for developer tooling. Knobs also theme the read-only CodeBlock — the two are one surface on purpose.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', 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: '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: '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    // Gutter — the line-number ruler. Its color/gap are the only chrome the\n    // gutter owns; its font and vertical padding are shared with the code so\n    // the two stay aligned, and are therefore NOT separately tunable.\n    { key: 'gutterColor', label: 'Number Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'gutter' },\n    { key: 'gutterBg', label: 'Gutter Background', control: 'color', defaultValue: 'transparent', section: 'gutter' },\n    { key: 'gutterBorder', label: 'Gutter Divider', control: 'color', defaultValue: 'var(--color-border)', section: 'gutter' },\n    { key: 'gutterGap', label: 'Gutter Gap', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px', section: 'gutter' },\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: 14, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 12, min: 4, max: 20, step: 2, unit: 'px' },\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 12.5, min: 10, max: 18, step: 0.5, unit: 'px' },\n    // Unitless on purpose — a line-height with a unit breaks the gutter's\n    // alignment as soon as the font size changes.\n    { key: 'lineHeight', label: 'Line Height', control: 'slider', defaultValue: 1.6, min: 1.2, max: 2.2, step: 0.1 },\n    { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 140, min: 80, max: 480, step: 20, unit: 'px' },\n  ],\n  layoutVariants: [\n    {\n      key: 'state',\n      label: 'State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'hover', label: 'Hover' },\n        { value: 'focus', label: 'Focus' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires on every edit, including Tab-indent and auto-indent.', payload: '{ value: string }' },\n    { name: 'onKeyDown', description: 'Runs BEFORE the atom\\'s own key handling — call preventDefault to claim a key (e.g. ⌘Enter to run).', payload: 'KeyboardEvent' },\n    { name: 'onFocus', description: 'Fires when the editor receives focus.', payload: 'FocusEvent' },\n    { name: 'onBlur', description: 'Fires when the editor loses focus.', payload: 'FocusEvent' },\n  ],\n};\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,107 @@
+"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 color_input_exports = {};
+__export(color_input_exports, {
+  colorInputDef: () => colorInputDef
+});
+module.exports = __toCommonJS(color_input_exports);
+const colorInputDef = {
+  id: "color-input",
+  name: "Color Input",
+  category: "Inputs",
+  description: "Color picker with a saturation/brightness area, hue and opacity sliders, a swatch, a screen eyedropper and a format select (HEX/RGB/RGBA/HSL). The value editor adapts to the format \u2014 one hex field, or R/G/B(/A) or H/S/L numeric fields \u2014 and re-derives on switch. Ships inline (ColorInput) and as a swatch-triggered popover (ColorInputPopover). `outputFormat` fixes the emitted format (default hex); Enter commits a field, Escape reverts it, and in the popover both also close the panel.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Field / Panel 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: "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: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // 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" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px" },
+    { key: "areaHeight", label: "Area Height", control: "slider", defaultValue: 160, min: 100, max: 240, step: 4, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 10, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" }
+  ],
+  layoutVariants: [
+    {
+      key: "variant",
+      label: "Variant",
+      options: [
+        { value: "inline", label: "Inline" },
+        { value: "popover", label: "Popover" }
+      ],
+      defaultValue: "inline"
+    },
+    {
+      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 commit (drag, eyedropper, or field commit) with the color formatted per `outputFormat`.", payload: "(color: string) => void" },
+    { name: "onEnter", description: "Fires when Enter commits a valid text-field draft.", payload: "(color: string) => void" },
+    { name: "onEsc", description: "Fires when Escape reverts the text-field draft to the last committed value.", payload: "() => void" },
+    { name: "onOpenChange", description: "Popover variant only \u2014 fires when the panel opens or closes.", payload: "(open: boolean) => void", showWhen: { variant: "popover" } }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: ["ColorInput", "ColorInputPopover"],
+    props: [
+      { name: "value", type: "string", description: "Current color (controlled). Any supported syntax: hex, rgb(a), hsl(a)." },
+      { name: "defaultValue", type: "string", defaultValue: "'#000000'", description: "Initial color for uncontrolled usage." },
+      { name: "onChange", type: "(color: string) => void", description: "Called with the color formatted per `outputFormat` on every commit." },
+      { name: "formats", type: "ColorFormat[]", defaultValue: "['hex','rgb','rgba','hsl']", description: "Representations offered in the in-component format select (what is displayed / edited). A single entry hides the select." },
+      { name: "outputFormat", type: "'hex' | 'rgb' | 'rgba' | 'hsl'", defaultValue: "'hex'", description: "Format `onChange` / `onEnter` return \u2014 fixed by this prop, independent of the visible representation. hex + alpha < 1 \u2192 8-digit #rrggbbaa." },
+      { name: "onEnter", type: "(color: string) => void", description: "Enter commits the field; in the popover it also closes the panel." },
+      { name: "onEsc", type: "() => void", description: "Escape reverts the field draft; in the popover it also closes the panel." },
+      { name: "alpha", type: "boolean", defaultValue: "true", description: "Show the opacity slider." },
+      { name: "eyedropper", type: "boolean", defaultValue: "true", description: "Show the screen eyedropper button (Chromium only; auto-hidden where the EyeDropper API is unavailable)." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disable all interaction." },
+      { name: "error", type: "string", description: "Non-empty string renders the error state and message below the panel." },
+      { name: "open", type: "boolean", description: "Popover open state (controlled). ColorInputPopover only." },
+      { name: "defaultOpen", type: "boolean", defaultValue: "false", description: "Initial open state for uncontrolled popover usage. ColorInputPopover only." },
+      { name: "onOpenChange", type: "(open: boolean) => void", description: "Popover open/close callback. ColorInputPopover only." },
+      { name: "placement", type: "PopoverPlacement", defaultValue: "'bottom-start'", description: "Preferred popover placement. ColorInputPopover only." },
+      { name: "triggerLabel", type: "string", defaultValue: "'Choose color'", description: "Accessible name for the trigger swatch. ColorInputPopover only." }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorInputDef
+});
+//# sourceMappingURL=color-input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/color-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const colorInputDef: ComponentDef = {\n  id: 'color-input',\n  name: 'Color Input',\n  category: 'Inputs',\n  description: 'Color picker with a saturation/brightness area, hue and opacity sliders, a swatch, a screen eyedropper and a format select (HEX/RGB/RGBA/HSL). The value editor adapts to the format — one hex field, or R/G/B(/A) or H/S/L numeric fields — and re-derives on switch. Ships inline (ColorInput) and as a swatch-triggered popover (ColorInputPopover). `outputFormat` fixes the emitted format (default hex); Enter commits a field, Escape reverts it, and in the popover both also close the panel.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Field / Panel 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: '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: '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: '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    // Shared\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n    { key: 'areaHeight', label: 'Area Height', control: 'slider', defaultValue: 160, min: 100, max: 240, step: 4, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, 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  ],\n  layoutVariants: [\n    {\n      key: 'variant',\n      label: 'Variant',\n      options: [\n        { value: 'inline', label: 'Inline' },\n        { value: 'popover', label: 'Popover' },\n      ],\n      defaultValue: 'inline',\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 commit (drag, eyedropper, or field commit) with the color formatted per `outputFormat`.', payload: '(color: string) => void' },\n    { name: 'onEnter', description: 'Fires when Enter commits a valid text-field draft.', payload: '(color: string) => void' },\n    { name: 'onEsc', description: 'Fires when Escape reverts the text-field draft to the last committed value.', payload: '() => void' },\n    { name: 'onOpenChange', description: 'Popover variant only — fires when the panel opens or closes.', payload: '(open: boolean) => void', showWhen: { variant: 'popover' } },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: ['ColorInput', 'ColorInputPopover'],\n    props: [\n      { name: 'value', type: 'string', description: 'Current color (controlled). Any supported syntax: hex, rgb(a), hsl(a).' },\n      { name: 'defaultValue', type: 'string', defaultValue: \"'#000000'\", description: 'Initial color for uncontrolled usage.' },\n      { name: 'onChange', type: '(color: string) => void', description: 'Called with the color formatted per `outputFormat` on every commit.' },\n      { name: 'formats', type: 'ColorFormat[]', defaultValue: \"['hex','rgb','rgba','hsl']\", description: 'Representations offered in the in-component format select (what is displayed / edited). A single entry hides the select.' },\n      { name: 'outputFormat', type: \"'hex' | 'rgb' | 'rgba' | 'hsl'\", defaultValue: \"'hex'\", description: 'Format `onChange` / `onEnter` return — fixed by this prop, independent of the visible representation. hex + alpha < 1 → 8-digit #rrggbbaa.' },\n      { name: 'onEnter', type: '(color: string) => void', description: 'Enter commits the field; in the popover it also closes the panel.' },\n      { name: 'onEsc', type: '() => void', description: 'Escape reverts the field draft; in the popover it also closes the panel.' },\n      { name: 'alpha', type: 'boolean', defaultValue: 'true', description: 'Show the opacity slider.' },\n      { name: 'eyedropper', type: 'boolean', defaultValue: 'true', description: 'Show the screen eyedropper button (Chromium only; auto-hidden where the EyeDropper API is unavailable).' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disable all interaction.' },\n      { name: 'error', type: 'string', description: 'Non-empty string renders the error state and message below the panel.' },\n      { name: 'open', type: 'boolean', description: 'Popover open state (controlled). ColorInputPopover only.' },\n      { name: 'defaultOpen', type: 'boolean', defaultValue: 'false', description: 'Initial open state for uncontrolled popover usage. ColorInputPopover only.' },\n      { name: 'onOpenChange', type: '(open: boolean) => void', description: 'Popover open/close callback. ColorInputPopover only.' },\n      { name: 'placement', type: 'PopoverPlacement', defaultValue: \"'bottom-start'\", description: 'Preferred popover placement. ColorInputPopover only.' },\n      { name: 'triggerLabel', type: 'string', defaultValue: \"'Choose color'\", description: 'Accessible name for the trigger swatch. ColorInputPopover only.' },\n    ],\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,gBAA8B;AAAA,EACzC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,mBAAmB,OAAO,4BAA4B,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACzK,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACrJ,EAAE,KAAK,SAAS,OAAO,QAAQ,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE3I,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEnJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnJ,EAAE,KAAK,aAAa,OAAO,QAAQ,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE9I,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,iBAAiB,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1K,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACxJ,EAAE,KAAK,cAAc,OAAO,WAAW,SAAS,SAAS,cAAc,4BAA4B,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEvJ,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAChH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACpH;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,QACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,MACvC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,QACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,MACnC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,0GAA0G,SAAS,0BAA0B;AAAA,IAC9K,EAAE,MAAM,WAAW,aAAa,sDAAsD,SAAS,0BAA0B;AAAA,IACzH,EAAE,MAAM,SAAS,aAAa,+EAA+E,SAAS,aAAa;AAAA,IACnI,EAAE,MAAM,gBAAgB,aAAa,qEAAgE,SAAS,2BAA2B,UAAU,EAAE,SAAS,UAAU,EAAE;AAAA,EAC5K;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,aAAa,CAAC,cAAc,mBAAmB;AAAA,IAC/C,OAAO;AAAA,MACL,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,yEAAyE;AAAA,MACvH,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,aAAa,aAAa,wCAAwC;AAAA,MACxH,EAAE,MAAM,YAAY,MAAM,2BAA2B,aAAa,sEAAsE;AAAA,MACxI,EAAE,MAAM,WAAW,MAAM,iBAAiB,cAAc,8BAA8B,aAAa,2HAA2H;AAAA,MAC9N,EAAE,MAAM,gBAAgB,MAAM,kCAAkC,cAAc,SAAS,aAAa,uJAA6I;AAAA,MACjP,EAAE,MAAM,WAAW,MAAM,2BAA2B,aAAa,oEAAoE;AAAA,MACrI,EAAE,MAAM,SAAS,MAAM,cAAc,aAAa,2EAA2E;AAAA,MAC7H,EAAE,MAAM,SAAS,MAAM,WAAW,cAAc,QAAQ,aAAa,2BAA2B;AAAA,MAChG,EAAE,MAAM,cAAc,MAAM,WAAW,cAAc,QAAQ,aAAa,0GAA0G;AAAA,MACpL,EAAE,MAAM,YAAY,MAAM,WAAW,cAAc,SAAS,aAAa,2BAA2B;AAAA,MACpG,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,wEAAwE;AAAA,MACtH,EAAE,MAAM,QAAQ,MAAM,WAAW,aAAa,2DAA2D;AAAA,MACzG,EAAE,MAAM,eAAe,MAAM,WAAW,cAAc,SAAS,aAAa,6EAA6E;AAAA,MACzJ,EAAE,MAAM,gBAAgB,MAAM,2BAA2B,aAAa,uDAAuD;AAAA,MAC7H,EAAE,MAAM,aAAa,MAAM,oBAAoB,cAAc,kBAAkB,aAAa,uDAAuD;AAAA,MACnJ,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,kBAAkB,aAAa,kEAAkE;AAAA,IACzJ;AAAA,EACF;AACF;","names":[]}

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

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

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

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

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

@@ -0,0 +1,83 @@
+const colorInputDef = {
+  id: "color-input",
+  name: "Color Input",
+  category: "Inputs",
+  description: "Color picker with a saturation/brightness area, hue and opacity sliders, a swatch, a screen eyedropper and a format select (HEX/RGB/RGBA/HSL). The value editor adapts to the format \u2014 one hex field, or R/G/B(/A) or H/S/L numeric fields \u2014 and re-derives on switch. Ships inline (ColorInput) and as a swatch-triggered popover (ColorInputPopover). `outputFormat` fixes the emitted format (default hex); Enter commits a field, Escape reverts it, and in the popover both also close the panel.",
+  styleProperties: [
+    // Default
+    { key: "backgroundColor", label: "Field / Panel 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: "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: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // 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" } },
+    // Shared
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px" },
+    { key: "areaHeight", label: "Area Height", control: "slider", defaultValue: 160, min: 100, max: 240, step: 4, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 10, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 20, step: 2, unit: "px" },
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 14, min: 10, max: 20, step: 1, unit: "px" }
+  ],
+  layoutVariants: [
+    {
+      key: "variant",
+      label: "Variant",
+      options: [
+        { value: "inline", label: "Inline" },
+        { value: "popover", label: "Popover" }
+      ],
+      defaultValue: "inline"
+    },
+    {
+      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 commit (drag, eyedropper, or field commit) with the color formatted per `outputFormat`.", payload: "(color: string) => void" },
+    { name: "onEnter", description: "Fires when Enter commits a valid text-field draft.", payload: "(color: string) => void" },
+    { name: "onEsc", description: "Fires when Escape reverts the text-field draft to the last committed value.", payload: "() => void" },
+    { name: "onOpenChange", description: "Popover variant only \u2014 fires when the panel opens or closes.", payload: "(open: boolean) => void", showWhen: { variant: "popover" } }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: ["ColorInput", "ColorInputPopover"],
+    props: [
+      { name: "value", type: "string", description: "Current color (controlled). Any supported syntax: hex, rgb(a), hsl(a)." },
+      { name: "defaultValue", type: "string", defaultValue: "'#000000'", description: "Initial color for uncontrolled usage." },
+      { name: "onChange", type: "(color: string) => void", description: "Called with the color formatted per `outputFormat` on every commit." },
+      { name: "formats", type: "ColorFormat[]", defaultValue: "['hex','rgb','rgba','hsl']", description: "Representations offered in the in-component format select (what is displayed / edited). A single entry hides the select." },
+      { name: "outputFormat", type: "'hex' | 'rgb' | 'rgba' | 'hsl'", defaultValue: "'hex'", description: "Format `onChange` / `onEnter` return \u2014 fixed by this prop, independent of the visible representation. hex + alpha < 1 \u2192 8-digit #rrggbbaa." },
+      { name: "onEnter", type: "(color: string) => void", description: "Enter commits the field; in the popover it also closes the panel." },
+      { name: "onEsc", type: "() => void", description: "Escape reverts the field draft; in the popover it also closes the panel." },
+      { name: "alpha", type: "boolean", defaultValue: "true", description: "Show the opacity slider." },
+      { name: "eyedropper", type: "boolean", defaultValue: "true", description: "Show the screen eyedropper button (Chromium only; auto-hidden where the EyeDropper API is unavailable)." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disable all interaction." },
+      { name: "error", type: "string", description: "Non-empty string renders the error state and message below the panel." },
+      { name: "open", type: "boolean", description: "Popover open state (controlled). ColorInputPopover only." },
+      { name: "defaultOpen", type: "boolean", defaultValue: "false", description: "Initial open state for uncontrolled popover usage. ColorInputPopover only." },
+      { name: "onOpenChange", type: "(open: boolean) => void", description: "Popover open/close callback. ColorInputPopover only." },
+      { name: "placement", type: "PopoverPlacement", defaultValue: "'bottom-start'", description: "Preferred popover placement. ColorInputPopover only." },
+      { name: "triggerLabel", type: "string", defaultValue: "'Choose color'", description: "Accessible name for the trigger swatch. ColorInputPopover only." }
+    ]
+  }
+};
+export {
+  colorInputDef
+};
+//# sourceMappingURL=color-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/color-input.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const colorInputDef: ComponentDef = {\n  id: 'color-input',\n  name: 'Color Input',\n  category: 'Inputs',\n  description: 'Color picker with a saturation/brightness area, hue and opacity sliders, a swatch, a screen eyedropper and a format select (HEX/RGB/RGBA/HSL). The value editor adapts to the format — one hex field, or R/G/B(/A) or H/S/L numeric fields — and re-derives on switch. Ships inline (ColorInput) and as a swatch-triggered popover (ColorInputPopover). `outputFormat` fixes the emitted format (default hex); Enter commits a field, Escape reverts it, and in the popover both also close the panel.',\n  styleProperties: [\n    // Default\n    { key: 'backgroundColor', label: 'Field / Panel 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: '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: '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: '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    // Shared\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n    { key: 'areaHeight', label: 'Area Height', control: 'slider', defaultValue: 160, min: 100, max: 240, step: 4, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, 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  ],\n  layoutVariants: [\n    {\n      key: 'variant',\n      label: 'Variant',\n      options: [\n        { value: 'inline', label: 'Inline' },\n        { value: 'popover', label: 'Popover' },\n      ],\n      defaultValue: 'inline',\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 commit (drag, eyedropper, or field commit) with the color formatted per `outputFormat`.', payload: '(color: string) => void' },\n    { name: 'onEnter', description: 'Fires when Enter commits a valid text-field draft.', payload: '(color: string) => void' },\n    { name: 'onEsc', description: 'Fires when Escape reverts the text-field draft to the last committed value.', payload: '() => void' },\n    { name: 'onOpenChange', description: 'Popover variant only — fires when the panel opens or closes.', payload: '(open: boolean) => void', showWhen: { variant: 'popover' } },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: ['ColorInput', 'ColorInputPopover'],\n    props: [\n      { name: 'value', type: 'string', description: 'Current color (controlled). Any supported syntax: hex, rgb(a), hsl(a).' },\n      { name: 'defaultValue', type: 'string', defaultValue: \"'#000000'\", description: 'Initial color for uncontrolled usage.' },\n      { name: 'onChange', type: '(color: string) => void', description: 'Called with the color formatted per `outputFormat` on every commit.' },\n      { name: 'formats', type: 'ColorFormat[]', defaultValue: \"['hex','rgb','rgba','hsl']\", description: 'Representations offered in the in-component format select (what is displayed / edited). A single entry hides the select.' },\n      { name: 'outputFormat', type: \"'hex' | 'rgb' | 'rgba' | 'hsl'\", defaultValue: \"'hex'\", description: 'Format `onChange` / `onEnter` return — fixed by this prop, independent of the visible representation. hex + alpha < 1 → 8-digit #rrggbbaa.' },\n      { name: 'onEnter', type: '(color: string) => void', description: 'Enter commits the field; in the popover it also closes the panel.' },\n      { name: 'onEsc', type: '() => void', description: 'Escape reverts the field draft; in the popover it also closes the panel.' },\n      { name: 'alpha', type: 'boolean', defaultValue: 'true', description: 'Show the opacity slider.' },\n      { name: 'eyedropper', type: 'boolean', defaultValue: 'true', description: 'Show the screen eyedropper button (Chromium only; auto-hidden where the EyeDropper API is unavailable).' },\n      { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disable all interaction.' },\n      { name: 'error', type: 'string', description: 'Non-empty string renders the error state and message below the panel.' },\n      { name: 'open', type: 'boolean', description: 'Popover open state (controlled). ColorInputPopover only.' },\n      { name: 'defaultOpen', type: 'boolean', defaultValue: 'false', description: 'Initial open state for uncontrolled popover usage. ColorInputPopover only.' },\n      { name: 'onOpenChange', type: '(open: boolean) => void', description: 'Popover open/close callback. ColorInputPopover only.' },\n      { name: 'placement', type: 'PopoverPlacement', defaultValue: \"'bottom-start'\", description: 'Preferred popover placement. ColorInputPopover only.' },\n      { name: 'triggerLabel', type: 'string', defaultValue: \"'Choose color'\", description: 'Accessible name for the trigger swatch. ColorInputPopover only.' },\n    ],\n  },\n};\n"],"mappings":"AAEO,MAAM,gBAA8B;AAAA,EACzC,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,IAEf,EAAE,KAAK,mBAAmB,OAAO,4BAA4B,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACzK,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACrJ,EAAE,KAAK,SAAS,OAAO,QAAQ,SAAS,SAAS,cAAc,qBAAqB,SAAS,eAAe,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA;AAAA,IAE3I,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEnJ,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnJ,EAAE,KAAK,aAAa,OAAO,QAAQ,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAE9I,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,iBAAiB,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1K,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,4BAA4B,SAAS,eAAe,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACxJ,EAAE,KAAK,cAAc,OAAO,WAAW,SAAS,SAAS,cAAc,4BAA4B,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA;AAAA,IAEvJ,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAChH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACpH;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,QACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,MACvC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,QACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACvC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,MACnC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,0GAA0G,SAAS,0BAA0B;AAAA,IAC9K,EAAE,MAAM,WAAW,aAAa,sDAAsD,SAAS,0BAA0B;AAAA,IACzH,EAAE,MAAM,SAAS,aAAa,+EAA+E,SAAS,aAAa;AAAA,IACnI,EAAE,MAAM,gBAAgB,aAAa,qEAAgE,SAAS,2BAA2B,UAAU,EAAE,SAAS,UAAU,EAAE;AAAA,EAC5K;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,aAAa,CAAC,cAAc,mBAAmB;AAAA,IAC/C,OAAO;AAAA,MACL,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,yEAAyE;AAAA,MACvH,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,aAAa,aAAa,wCAAwC;AAAA,MACxH,EAAE,MAAM,YAAY,MAAM,2BAA2B,aAAa,sEAAsE;AAAA,MACxI,EAAE,MAAM,WAAW,MAAM,iBAAiB,cAAc,8BAA8B,aAAa,2HAA2H;AAAA,MAC9N,EAAE,MAAM,gBAAgB,MAAM,kCAAkC,cAAc,SAAS,aAAa,uJAA6I;AAAA,MACjP,EAAE,MAAM,WAAW,MAAM,2BAA2B,aAAa,oEAAoE;AAAA,MACrI,EAAE,MAAM,SAAS,MAAM,cAAc,aAAa,2EAA2E;AAAA,MAC7H,EAAE,MAAM,SAAS,MAAM,WAAW,cAAc,QAAQ,aAAa,2BAA2B;AAAA,MAChG,EAAE,MAAM,cAAc,MAAM,WAAW,cAAc,QAAQ,aAAa,0GAA0G;AAAA,MACpL,EAAE,MAAM,YAAY,MAAM,WAAW,cAAc,SAAS,aAAa,2BAA2B;AAAA,MACpG,EAAE,MAAM,SAAS,MAAM,UAAU,aAAa,wEAAwE;AAAA,MACtH,EAAE,MAAM,QAAQ,MAAM,WAAW,aAAa,2DAA2D;AAAA,MACzG,EAAE,MAAM,eAAe,MAAM,WAAW,cAAc,SAAS,aAAa,6EAA6E;AAAA,MACzJ,EAAE,MAAM,gBAAgB,MAAM,2BAA2B,aAAa,uDAAuD;AAAA,MAC7H,EAAE,MAAM,aAAa,MAAM,oBAAoB,cAAc,kBAAkB,aAAa,uDAAuD;AAAA,MACnJ,EAAE,MAAM,gBAAgB,MAAM,UAAU,cAAc,kBAAkB,aAAa,kEAAkE;AAAA,IACzJ;AAAA,EACF;AACF;","names":[]}