@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/inputs/editable-cell.cjs

@@ -0,0 +1,206 @@
+"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 editable_cell_exports = {};
+__export(editable_cell_exports, {
+  editableCellDef: () => editableCellDef
+});
+module.exports = __toCommonJS(editable_cell_exports);
+const editableCellDef = {
+  id: "editable-cell",
+  name: "Editable Cell",
+  category: "Inputs",
+  description: "Inline-editable cell. Text / number swap the display for an input (Enter or blur commits, Esc cancels); date pairs the input with a Calendar popover \u2014 type a date or pick a day, either commits an ISO date string; select is pick-only \u2014 clicking opens a Listbox dropdown and picking an option commits its value immediately (display can still be a custom Tag/Badge via `format`); multiselect is select's array sibling \u2014 a MultiListbox toggles options with the panel open, the value is a string[] of picked option values shown as joined labels. Problems surface in a popover Banner under the cell \u2014 warning (yellow) for sync validate failures, error (red) for a rejected async `onCommit` \u2014 so the table row never changes height. Designed for DataTable cells but works anywhere an inline-edit pattern fits (PageHeader rename, StatCard label, etc.) \u2014 2 sizes: small (dense table scale, default) / medium (input-family scale for side panels and detail views), each with its own dimension knobs.",
+  styleProperties: [
+    // Layout — maxWidth and radius are shared across both sizes; the
+    // padding/font trio is per-size (gated by the Size variant), one
+    // symmetric knob set each, same pattern as Tag. Saves emit as
+    // `--uxm-editable-cell-{size}-{kebab(key)}` (fallback path in toCSS),
+    // which the matching size modifier re-points the private pipe vars at.
+    // There is deliberately NO height knob: the cell's height derives from
+    // Font Size × line-height + paddings (a `1lh` floor covers empty
+    // cells), so no knob can silently stop mattering.
+    { key: "smallPaddingX", label: "Padding X", control: "number", defaultValue: 8, min: 2, max: 16, step: 1, unit: "px", showWhen: { size: "small" } },
+    { key: "smallPaddingY", label: "Padding Y", control: "number", defaultValue: 4, min: 0, max: 10, step: 1, unit: "px", showWhen: { size: "small" } },
+    // Font Size and Max Width are SELECTS for both sizes, with the same
+    // option list either way — only the default differs. Two reasons:
+    //   1. Each has a value the CSS genuinely uses that no numeric stepper
+    //      can express — `small`'s font default is the literal `inherit`
+    //      (CSS `1em`, so a cell reads like the text around it) and
+    //      `medium`'s cap default is `none` (fill the container, the
+    //      input-family behaviour in a side panel).
+    //   2. Flipping Size must not change the CONTROL for the same property.
+    //      A stepper for one size and a dropdown for the other made the
+    //      panel unpredictable — the property is the same property.
+    { key: "smallFontSize", label: "Font Size", control: "select", defaultValue: "inherit", options: ["inherit", "11px", "12px", "13px", "14px", "15px", "16px", "18px"], showWhen: { size: "small" } },
+    { key: "mediumPaddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 20, step: 1, unit: "px", showWhen: { size: "medium" } },
+    { key: "mediumPaddingY", label: "Padding Y", control: "number", defaultValue: 6, min: 0, max: 14, step: 1, unit: "px", showWhen: { size: "medium" } },
+    { key: "mediumFontSize", label: "Font Size", control: "select", defaultValue: "14px", options: ["inherit", "11px", "12px", "13px", "14px", "15px", "16px", "18px"], showWhen: { size: "medium" } },
+    // Per-size, like every other dimension: a table cell needs a cap so one
+    // long value can't push its column, a side-panel field should just fill
+    // the container. Same control + same options for both sizes (see the
+    // Font Size note above) — only the default differs.
+    { key: "smallMaxWidth", label: "Max Width", control: "select", defaultValue: "320px", options: ["none", "120px", "160px", "240px", "320px", "400px", "480px", "560px", "640px"], showWhen: { size: "small" } },
+    { key: "mediumMaxWidth", label: "Max Width", control: "select", defaultValue: "none", options: ["none", "120px", "160px", "240px", "320px", "400px", "480px", "560px", "640px"], showWhen: { size: "medium" } },
+    { key: "radius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+    // Display chrome — one knob per peer state, matching the input
+    // family's default / hover / focus / disabled convention. Each is
+    // gated to its own state so the panel shows only what's relevant.
+    // The value's own colour: pinned through the component layer (the cell no
+    // longer inherits it — a muted column / dimmed row must not bleed in), so
+    // it belongs in the panel next to its placeholder twin.
+    { key: "color", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "cellColors", showWhen: { state: "default" } },
+    { key: "placeholderColor", label: "Placeholder Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "cellColors", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Hover Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "cellColors", showWhen: { state: "hover" } },
+    // The hover affordance differs by type: text / number / date reveal a pencil,
+    // the pickers (select / multiselect) reveal a chevron. Gate each so only the
+    // relevant one shows under Hover.
+    { key: "pencilColor", label: "Pencil Color", control: "color", defaultValue: "var(--color-text-muted)", section: "cellColors", showWhen: { state: "hover", type: ["text", "number", "date"] } },
+    { key: "chevronColor", label: "Chevron Color", control: "color", defaultValue: "var(--color-text-muted)", section: "cellColors", showWhen: { state: "hover", type: ["select", "multiselect"] } },
+    { key: "focusBorder", label: "Focus Border", control: "color", defaultValue: "var(--color-accent)", section: "cellColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Focus Ring", control: "color", defaultValue: "var(--color-accent)", section: "cellColors", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Disabled Opacity", control: "slider", defaultValue: 0.55, min: 0.2, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Editing — the active input swapped in on click.
+    { key: "inputBg", label: "Input Background", control: "color", defaultValue: "var(--color-card)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "inputColor", label: "Input Text Color", control: "color", defaultValue: "var(--color-text)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "inputBorder", label: "Input Border", control: "color", defaultValue: "var(--color-border)", section: "editingColors", showWhen: { state: "editing" } },
+    { key: "inputFocusBorder", label: "Input Focus Border", control: "color", defaultValue: "var(--color-accent)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    // ONE knob pair for every in-field ✕: the same
+    // `--uxm-editable-cell-clear-*` vars theme the editing input's ✕
+    // (text / number / date) and the picker trigger's ✕, which is why the
+    // gate lists both surfaces' states — `editing` for the input,
+    // `open` for a picker (its open panel IS its editing surface). The
+    // pickers' dropdown-footer Clear is separate: that one lives on the
+    // Listbox atom's surface, not a per-cell knob.
+    { key: "clearColor", label: "Clear Color", control: "color", defaultValue: "var(--color-text-muted)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "clearHoverBg", label: "Clear Hover Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    // Problem severities — each tints the editing input's border; the
+    // message itself rides in a popover Banner whose look comes from the
+    // Banner atom's own warning / error tokens (not per-cell knobs), so
+    // problems read identically everywhere in the product.
+    { key: "warningBorder", label: "Input Border", control: "color", defaultValue: "var(--color-warning-text)", section: "warningColors", showWhen: { state: "warning" } },
+    { key: "errorBorder", label: "Input Border", control: "color", defaultValue: "var(--color-danger-text)", section: "errorColors", showWhen: { state: "error" } }
+  ],
+  layoutVariants: [
+    {
+      // Editor-only state switcher (ephemeral — variants never reach the
+      // saved overrides). Peer states mirror the rest of the input family
+      // (default / hover / focus / disabled / error); `editing` is
+      // EditableCell-specific — the input swapped in on click — and
+      // `warning` is the recoverable-validation severity (vs `error` =
+      // failed save). The preview forces each state visually so its knobs
+      // are tunable without interaction. `submitting` is intentionally
+      // absent: it has no knobs of its own (it reuses the editing chrome
+      // with a disabled input).
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        // Editing is an input-only state — pickers (select/multiselect) have
+        // no text-edit mode, so the knob is hidden for them (a stale
+        // `editing` selection auto-repairs to Default on type switch).
+        { value: "editing", label: "Editing", showWhen: { type: ["text", "number", "date"] } },
+        // A picker's editing surface is its OPEN panel, so `open` is the
+        // pickers' counterpart to `editing`: it forces the open chrome and
+        // reveals the trigger ✕ so both are tunable without live clicking.
+        { value: "open", label: "Open", showWhen: { type: ["select", "multiselect"] } },
+        { value: "warning", label: "Warning" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "type",
+      label: "Type",
+      options: [
+        { value: "text", label: "Text" },
+        { value: "number", label: "Number" },
+        { value: "date", label: "Date" },
+        { value: "select", label: "Select" },
+        { value: "multiselect", label: "Multi-select" }
+      ],
+      defaultValue: "text"
+    },
+    {
+      // Small = the dense DataTable scale (the original look, and the
+      // default); medium = the input-family scale for standalone use in
+      // side panels / detail views. Each size owns its own dimension knobs.
+      key: "size",
+      label: "Size",
+      options: [
+        { value: "small", label: "Small" },
+        { value: "medium", label: "Medium" }
+      ],
+      defaultValue: "small"
+    },
+    {
+      // One format drives everything the user sees on a date cell —
+      // the rendered value, the empty-cell hint, the input mask, and
+      // parsing. Committed values stay ISO regardless.
+      key: "dateFormat",
+      label: "Date Format",
+      options: [
+        { value: "ymd", label: "YYYY-MM-DD" },
+        { value: "dmy", label: "DD/MM/YYYY" },
+        { value: "mdy", label: "MM/DD/YYYY" }
+      ],
+      defaultValue: "ymd",
+      showWhen: { type: "date" }
+    },
+    {
+      key: "align",
+      label: "Align",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ],
+      defaultValue: "left"
+    }
+  ],
+  events: [
+    { name: "onCommit", description: "Fires when the user confirms a change (Enter, or blur with no validation error; for multiselect, each toggle). Async \u2014 the atom shows a submitting state until the returned promise settles.", payload: "(next: string | number | string[]) => void | Promise<void>" }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: "EditableCell",
+    props: [
+      { name: "value", type: "string | number | string[]", required: true, description: "Current committed value (a string[] of picked option values for multiselect). The atom keeps a draft internally during edit." },
+      { name: "onCommit", type: "(next: string | number | string[]) => void | Promise<void>", required: true, description: "Called when the user commits a change. Async \u2014 reject the promise to surface a red error Banner in the cell's popover and keep the cell in edit mode for retry (multiselect reverts its optimistic toggle)." },
+      { name: "type", type: '"text" | "number" | "date" | "select" | "multiselect"', defaultValue: '"text"', description: "Editor type. Number coerces to Number on commit; date pairs a masked input with a Calendar popover \u2014 typing and picking both commit a normalized ISO date string; select is pick-only \u2014 a Listbox dropdown whose chosen option's value commits immediately; multiselect toggles options in a MultiListbox and commits a string[]." },
+      { name: "dateFormat", type: '"mdy" | "dmy" | "ymd"', defaultValue: '"ymd"', description: "Display / typing format for date cells (same options as DateInput): one format drives the rendered value, the empty-cell hint, the input mask, and parsing. Committed values stay ISO regardless \u2014 presentation, not storage." },
+      { name: "options", type: "{ value: string; label: string }[]", description: 'Options for `type="select"` / `"multiselect"`. Picking one commits its `value` (or toggles it into the array); display shows the `label`(s) unless `format` overrides it.' },
+      { name: "searchable", type: "boolean", description: "Show a search box in the dropdown. Defaults to auto \u2014 shown only when there are more than 6 options." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: 'Clear affordance, per type. select / multiselect: a "Clear" action in the dropdown footer that commits an empty value ("" / []). text / number / date: a \u2715 inside the EDITING input (mirrors TextInput) that empties the draft and keeps focus \u2014 nothing commits until Enter/blur. `required` never hides the affordance, it guards the outcome: clearing a required cell surfaces the required warning (the value stays), clearing an optional one empties it to the placeholder. On by default (the input-family convention) \u2014 pass `false` to opt out.' },
+      { name: "align", type: '"left" | "right" | "center"', defaultValue: '"left"', description: "Text alignment for both display and edit modes \u2014 pass through from a DataTable column's `align`." },
+      { name: "size", type: '"small" | "medium"', defaultValue: '"small"', description: "Size preset. `small` is the dense DataTable scale (font inherits until pinned); `medium` steps the cell up to the input-family scale (12/6px padding, 14px font) for standalone use in side panels / detail views. Height always derives from font-size + padding." },
+      { name: "format", type: "(value: string | number | string[]) => ReactNode", description: "Display-mode formatter (receives a string[] for multiselect \u2014 e.g. render chips). The raw value is still what gets edited." },
+      { name: "validate", type: "(next: string | number | string[]) => string | null | undefined", description: "Synchronous validation. Return a message to block commit \u2014 it surfaces as a yellow warning Banner in the cell's popover (recoverable input problem, vs the red error Banner for a failed save)." },
+      { name: "disabled", type: "boolean", description: "Read-only \u2014 clicking does nothing, no edit affordance." },
+      { name: "placeholder", type: "string", description: "Shown when value is empty / blank." }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  editableCellDef
+});
+//# sourceMappingURL=editable-cell.cjs.map

package/dist/studio/lib/registry/inputs/editable-cell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/editable-cell.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const editableCellDef: ComponentDef = {\n  id: 'editable-cell',\n  name: 'Editable Cell',\n  category: 'Inputs',\n  description: 'Inline-editable cell. Text / number swap the display for an input (Enter or blur commits, Esc cancels); date pairs the input with a Calendar popover — type a date or pick a day, either commits an ISO date string; select is pick-only — clicking opens a Listbox dropdown and picking an option commits its value immediately (display can still be a custom Tag/Badge via `format`); multiselect is select\\'s array sibling — a MultiListbox toggles options with the panel open, the value is a string[] of picked option values shown as joined labels. Problems surface in a popover Banner under the cell — warning (yellow) for sync validate failures, error (red) for a rejected async `onCommit` — so the table row never changes height. Designed for DataTable cells but works anywhere an inline-edit pattern fits (PageHeader rename, StatCard label, etc.) — 2 sizes: small (dense table scale, default) / medium (input-family scale for side panels and detail views), each with its own dimension knobs.',\n  styleProperties: [\n    // Layout — maxWidth and radius are shared across both sizes; the\n    // padding/font trio is per-size (gated by the Size variant), one\n    // symmetric knob set each, same pattern as Tag. Saves emit as\n    // `--uxm-editable-cell-{size}-{kebab(key)}` (fallback path in toCSS),\n    // which the matching size modifier re-points the private pipe vars at.\n    // There is deliberately NO height knob: the cell's height derives from\n    // Font Size × line-height + paddings (a `1lh` floor covers empty\n    // cells), so no knob can silently stop mattering.\n    { key: 'smallPaddingX', label: 'Padding X', control: 'number', defaultValue: 8, min: 2, max: 16, step: 1, unit: 'px', showWhen: { size: 'small' } },\n    { key: 'smallPaddingY', label: 'Padding Y', control: 'number', defaultValue: 4, min: 0, max: 10, step: 1, unit: 'px', showWhen: { size: 'small' } },\n    // Font Size and Max Width are SELECTS for both sizes, with the same\n    // option list either way — only the default differs. Two reasons:\n    //   1. Each has a value the CSS genuinely uses that no numeric stepper\n    //      can express — `small`'s font default is the literal `inherit`\n    //      (CSS `1em`, so a cell reads like the text around it) and\n    //      `medium`'s cap default is `none` (fill the container, the\n    //      input-family behaviour in a side panel).\n    //   2. Flipping Size must not change the CONTROL for the same property.\n    //      A stepper for one size and a dropdown for the other made the\n    //      panel unpredictable — the property is the same property.\n    { key: 'smallFontSize', label: 'Font Size', control: 'select', defaultValue: 'inherit', options: ['inherit', '11px', '12px', '13px', '14px', '15px', '16px', '18px'], showWhen: { size: 'small' } },\n    { key: 'mediumPaddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 20, step: 1, unit: 'px', showWhen: { size: 'medium' } },\n    { key: 'mediumPaddingY', label: 'Padding Y', control: 'number', defaultValue: 6, min: 0, max: 14, step: 1, unit: 'px', showWhen: { size: 'medium' } },\n    { key: 'mediumFontSize', label: 'Font Size', control: 'select', defaultValue: '14px', options: ['inherit', '11px', '12px', '13px', '14px', '15px', '16px', '18px'], showWhen: { size: 'medium' } },\n    // Per-size, like every other dimension: a table cell needs a cap so one\n    // long value can't push its column, a side-panel field should just fill\n    // the container. Same control + same options for both sizes (see the\n    // Font Size note above) — only the default differs.\n    { key: 'smallMaxWidth', label: 'Max Width', control: 'select', defaultValue: '320px', options: ['none', '120px', '160px', '240px', '320px', '400px', '480px', '560px', '640px'], showWhen: { size: 'small' } },\n    { key: 'mediumMaxWidth', label: 'Max Width', control: 'select', defaultValue: 'none', options: ['none', '120px', '160px', '240px', '320px', '400px', '480px', '560px', '640px'], showWhen: { size: 'medium' } },\n    { key: 'radius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 12, step: 1, unit: 'px' },\n    // Display chrome — one knob per peer state, matching the input\n    // family's default / hover / focus / disabled convention. Each is\n    // gated to its own state so the panel shows only what's relevant.\n    // The value's own colour: pinned through the component layer (the cell no\n    // longer inherits it — a muted column / dimmed row must not bleed in), so\n    // it belongs in the panel next to its placeholder twin.\n    { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'cellColors', showWhen: { state: 'default' } },\n    { key: 'placeholderColor', label: 'Placeholder Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'cellColors', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'cellColors', showWhen: { state: 'hover' } },\n    // The hover affordance differs by type: text / number / date reveal a pencil,\n    // the pickers (select / multiselect) reveal a chevron. Gate each so only the\n    // relevant one shows under Hover.\n    { key: 'pencilColor', label: 'Pencil Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'cellColors', showWhen: { state: 'hover', type: ['text', 'number', 'date'] } },\n    { key: 'chevronColor', label: 'Chevron Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'cellColors', showWhen: { state: 'hover', type: ['select', 'multiselect'] } },\n    { key: 'focusBorder', label: 'Focus Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'cellColors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Focus Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'cellColors', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Disabled Opacity', control: 'slider', defaultValue: 0.55, min: 0.2, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Editing — the active input swapped in on click.\n    { key: 'inputBg', label: 'Input Background', control: 'color', defaultValue: 'var(--color-card)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'inputColor', label: 'Input Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'inputBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-border)', section: 'editingColors', showWhen: { state: 'editing' } },\n    { key: 'inputFocusBorder', label: 'Input Focus Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    // ONE knob pair for every in-field ✕: the same\n    // `--uxm-editable-cell-clear-*` vars theme the editing input's ✕\n    // (text / number / date) and the picker trigger's ✕, which is why the\n    // gate lists both surfaces' states — `editing` for the input,\n    // `open` for a picker (its open panel IS its editing surface). The\n    // pickers' dropdown-footer Clear is separate: that one lives on the\n    // Listbox atom's surface, not a per-cell knob.\n    { key: 'clearColor', label: 'Clear Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'clearHoverBg', label: 'Clear Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    // Problem severities — each tints the editing input's border; the\n    // message itself rides in a popover Banner whose look comes from the\n    // Banner atom's own warning / error tokens (not per-cell knobs), so\n    // problems read identically everywhere in the product.\n    { key: 'warningBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'warningColors', showWhen: { state: 'warning' } },\n    { key: 'errorBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorColors', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      // Editor-only state switcher (ephemeral — variants never reach the\n      // saved overrides). Peer states mirror the rest of the input family\n      // (default / hover / focus / disabled / error); `editing` is\n      // EditableCell-specific — the input swapped in on click — and\n      // `warning` is the recoverable-validation severity (vs `error` =\n      // failed save). The preview forces each state visually so its knobs\n      // are tunable without interaction. `submitting` is intentionally\n      // absent: it has no knobs of its own (it reuses the editing chrome\n      // with a disabled input).\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        // Editing is an input-only state — pickers (select/multiselect) have\n        // no text-edit mode, so the knob is hidden for them (a stale\n        // `editing` selection auto-repairs to Default on type switch).\n        { value: 'editing', label: 'Editing', showWhen: { type: ['text', 'number', 'date'] } },\n        // A picker's editing surface is its OPEN panel, so `open` is the\n        // pickers' counterpart to `editing`: it forces the open chrome and\n        // reveals the trigger ✕ so both are tunable without live clicking.\n        { value: 'open', label: 'Open', showWhen: { type: ['select', 'multiselect'] } },\n        { value: 'warning', label: 'Warning' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'type',\n      label: 'Type',\n      options: [\n        { value: 'text', label: 'Text' },\n        { value: 'number', label: 'Number' },\n        { value: 'date', label: 'Date' },\n        { value: 'select', label: 'Select' },\n        { value: 'multiselect', label: 'Multi-select' },\n      ],\n      defaultValue: 'text',\n    },\n    {\n      // Small = the dense DataTable scale (the original look, and the\n      // default); medium = the input-family scale for standalone use in\n      // side panels / detail views. Each size owns its own dimension knobs.\n      key: 'size',\n      label: 'Size',\n      options: [\n        { value: 'small', label: 'Small' },\n        { value: 'medium', label: 'Medium' },\n      ],\n      defaultValue: 'small',\n    },\n    {\n      // One format drives everything the user sees on a date cell —\n      // the rendered value, the empty-cell hint, the input mask, and\n      // parsing. Committed values stay ISO regardless.\n      key: 'dateFormat',\n      label: 'Date Format',\n      options: [\n        { value: 'ymd', label: 'YYYY-MM-DD' },\n        { value: 'dmy', label: 'DD/MM/YYYY' },\n        { value: 'mdy', label: 'MM/DD/YYYY' },\n      ],\n      defaultValue: 'ymd',\n      showWhen: { type: 'date' },\n    },\n    {\n      key: 'align',\n      label: 'Align',\n      options: [\n        { value: 'left', label: 'Left' },\n        { value: 'center', label: 'Center' },\n        { value: 'right', label: 'Right' },\n      ],\n      defaultValue: 'left',\n    },\n  ],\n  events: [\n    { name: 'onCommit', description: 'Fires when the user confirms a change (Enter, or blur with no validation error; for multiselect, each toggle). Async — the atom shows a submitting state until the returned promise settles.', payload: '(next: string | number | string[]) => void | Promise<void>' },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: 'EditableCell',\n    props: [\n      { name: 'value', type: 'string | number | string[]', required: true, description: 'Current committed value (a string[] of picked option values for multiselect). The atom keeps a draft internally during edit.' },\n      { name: 'onCommit', type: '(next: string | number | string[]) => void | Promise<void>', required: true, description: \"Called when the user commits a change. Async — reject the promise to surface a red error Banner in the cell's popover and keep the cell in edit mode for retry (multiselect reverts its optimistic toggle).\" },\n      { name: 'type', type: '\"text\" | \"number\" | \"date\" | \"select\" | \"multiselect\"', defaultValue: '\"text\"', description: 'Editor type. Number coerces to Number on commit; date pairs a masked input with a Calendar popover — typing and picking both commit a normalized ISO date string; select is pick-only — a Listbox dropdown whose chosen option\\'s value commits immediately; multiselect toggles options in a MultiListbox and commits a string[].' },\n      { name: 'dateFormat', type: '\"mdy\" | \"dmy\" | \"ymd\"', defaultValue: '\"ymd\"', description: 'Display / typing format for date cells (same options as DateInput): one format drives the rendered value, the empty-cell hint, the input mask, and parsing. Committed values stay ISO regardless — presentation, not storage.' },\n      { name: 'options', type: '{ value: string; label: string }[]', description: 'Options for `type=\"select\"` / `\"multiselect\"`. Picking one commits its `value` (or toggles it into the array); display shows the `label`(s) unless `format` overrides it.' },\n      { name: 'searchable', type: 'boolean', description: 'Show a search box in the dropdown. Defaults to auto — shown only when there are more than 6 options.' },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Clear affordance, per type. select / multiselect: a \"Clear\" action in the dropdown footer that commits an empty value (\"\" / []). text / number / date: a ✕ inside the EDITING input (mirrors TextInput) that empties the draft and keeps focus — nothing commits until Enter/blur. `required` never hides the affordance, it guards the outcome: clearing a required cell surfaces the required warning (the value stays), clearing an optional one empties it to the placeholder. On by default (the input-family convention) — pass `false` to opt out.' },\n      { name: 'align', type: '\"left\" | \"right\" | \"center\"', defaultValue: '\"left\"', description: \"Text alignment for both display and edit modes — pass through from a DataTable column's `align`.\" },\n      { name: 'size', type: '\"small\" | \"medium\"', defaultValue: '\"small\"', description: 'Size preset. `small` is the dense DataTable scale (font inherits until pinned); `medium` steps the cell up to the input-family scale (12/6px padding, 14px font) for standalone use in side panels / detail views. Height always derives from font-size + padding.' },\n      { name: 'format', type: '(value: string | number | string[]) => ReactNode', description: 'Display-mode formatter (receives a string[] for multiselect — e.g. render chips). The raw value is still what gets edited.' },\n      { name: 'validate', type: '(next: string | number | string[]) => string | null | undefined', description: \"Synchronous validation. Return a message to block commit — it surfaces as a yellow warning Banner in the cell's popover (recoverable input problem, vs the red error Banner for a failed save).\" },\n      { name: 'disabled', type: 'boolean', description: 'Read-only — clicking does nothing, no edit affordance.' },\n      { name: 'placeholder', type: 'string', description: 'Shown when value is empty / blank.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/editable-cell.d.ts

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

package/dist/studio/lib/registry/inputs/editable-cell.d.ts.map

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

package/dist/studio/lib/registry/inputs/editable-cell.js

@@ -0,0 +1,182 @@
+const editableCellDef = {
+  id: "editable-cell",
+  name: "Editable Cell",
+  category: "Inputs",
+  description: "Inline-editable cell. Text / number swap the display for an input (Enter or blur commits, Esc cancels); date pairs the input with a Calendar popover \u2014 type a date or pick a day, either commits an ISO date string; select is pick-only \u2014 clicking opens a Listbox dropdown and picking an option commits its value immediately (display can still be a custom Tag/Badge via `format`); multiselect is select's array sibling \u2014 a MultiListbox toggles options with the panel open, the value is a string[] of picked option values shown as joined labels. Problems surface in a popover Banner under the cell \u2014 warning (yellow) for sync validate failures, error (red) for a rejected async `onCommit` \u2014 so the table row never changes height. Designed for DataTable cells but works anywhere an inline-edit pattern fits (PageHeader rename, StatCard label, etc.) \u2014 2 sizes: small (dense table scale, default) / medium (input-family scale for side panels and detail views), each with its own dimension knobs.",
+  styleProperties: [
+    // Layout — maxWidth and radius are shared across both sizes; the
+    // padding/font trio is per-size (gated by the Size variant), one
+    // symmetric knob set each, same pattern as Tag. Saves emit as
+    // `--uxm-editable-cell-{size}-{kebab(key)}` (fallback path in toCSS),
+    // which the matching size modifier re-points the private pipe vars at.
+    // There is deliberately NO height knob: the cell's height derives from
+    // Font Size × line-height + paddings (a `1lh` floor covers empty
+    // cells), so no knob can silently stop mattering.
+    { key: "smallPaddingX", label: "Padding X", control: "number", defaultValue: 8, min: 2, max: 16, step: 1, unit: "px", showWhen: { size: "small" } },
+    { key: "smallPaddingY", label: "Padding Y", control: "number", defaultValue: 4, min: 0, max: 10, step: 1, unit: "px", showWhen: { size: "small" } },
+    // Font Size and Max Width are SELECTS for both sizes, with the same
+    // option list either way — only the default differs. Two reasons:
+    //   1. Each has a value the CSS genuinely uses that no numeric stepper
+    //      can express — `small`'s font default is the literal `inherit`
+    //      (CSS `1em`, so a cell reads like the text around it) and
+    //      `medium`'s cap default is `none` (fill the container, the
+    //      input-family behaviour in a side panel).
+    //   2. Flipping Size must not change the CONTROL for the same property.
+    //      A stepper for one size and a dropdown for the other made the
+    //      panel unpredictable — the property is the same property.
+    { key: "smallFontSize", label: "Font Size", control: "select", defaultValue: "inherit", options: ["inherit", "11px", "12px", "13px", "14px", "15px", "16px", "18px"], showWhen: { size: "small" } },
+    { key: "mediumPaddingX", label: "Padding X", control: "number", defaultValue: 12, min: 4, max: 20, step: 1, unit: "px", showWhen: { size: "medium" } },
+    { key: "mediumPaddingY", label: "Padding Y", control: "number", defaultValue: 6, min: 0, max: 14, step: 1, unit: "px", showWhen: { size: "medium" } },
+    { key: "mediumFontSize", label: "Font Size", control: "select", defaultValue: "14px", options: ["inherit", "11px", "12px", "13px", "14px", "15px", "16px", "18px"], showWhen: { size: "medium" } },
+    // Per-size, like every other dimension: a table cell needs a cap so one
+    // long value can't push its column, a side-panel field should just fill
+    // the container. Same control + same options for both sizes (see the
+    // Font Size note above) — only the default differs.
+    { key: "smallMaxWidth", label: "Max Width", control: "select", defaultValue: "320px", options: ["none", "120px", "160px", "240px", "320px", "400px", "480px", "560px", "640px"], showWhen: { size: "small" } },
+    { key: "mediumMaxWidth", label: "Max Width", control: "select", defaultValue: "none", options: ["none", "120px", "160px", "240px", "320px", "400px", "480px", "560px", "640px"], showWhen: { size: "medium" } },
+    { key: "radius", label: "Border Radius", control: "slider", defaultValue: 4, min: 0, max: 12, step: 1, unit: "px" },
+    // Display chrome — one knob per peer state, matching the input
+    // family's default / hover / focus / disabled convention. Each is
+    // gated to its own state so the panel shows only what's relevant.
+    // The value's own colour: pinned through the component layer (the cell no
+    // longer inherits it — a muted column / dimmed row must not bleed in), so
+    // it belongs in the panel next to its placeholder twin.
+    { key: "color", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "cellColors", showWhen: { state: "default" } },
+    { key: "placeholderColor", label: "Placeholder Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "cellColors", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Hover Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "cellColors", showWhen: { state: "hover" } },
+    // The hover affordance differs by type: text / number / date reveal a pencil,
+    // the pickers (select / multiselect) reveal a chevron. Gate each so only the
+    // relevant one shows under Hover.
+    { key: "pencilColor", label: "Pencil Color", control: "color", defaultValue: "var(--color-text-muted)", section: "cellColors", showWhen: { state: "hover", type: ["text", "number", "date"] } },
+    { key: "chevronColor", label: "Chevron Color", control: "color", defaultValue: "var(--color-text-muted)", section: "cellColors", showWhen: { state: "hover", type: ["select", "multiselect"] } },
+    { key: "focusBorder", label: "Focus Border", control: "color", defaultValue: "var(--color-accent)", section: "cellColors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Focus Ring", control: "color", defaultValue: "var(--color-accent)", section: "cellColors", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Disabled Opacity", control: "slider", defaultValue: 0.55, min: 0.2, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Editing — the active input swapped in on click.
+    { key: "inputBg", label: "Input Background", control: "color", defaultValue: "var(--color-card)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "inputColor", label: "Input Text Color", control: "color", defaultValue: "var(--color-text)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "inputBorder", label: "Input Border", control: "color", defaultValue: "var(--color-border)", section: "editingColors", showWhen: { state: "editing" } },
+    { key: "inputFocusBorder", label: "Input Focus Border", control: "color", defaultValue: "var(--color-accent)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    // ONE knob pair for every in-field ✕: the same
+    // `--uxm-editable-cell-clear-*` vars theme the editing input's ✕
+    // (text / number / date) and the picker trigger's ✕, which is why the
+    // gate lists both surfaces' states — `editing` for the input,
+    // `open` for a picker (its open panel IS its editing surface). The
+    // pickers' dropdown-footer Clear is separate: that one lives on the
+    // Listbox atom's surface, not a per-cell knob.
+    { key: "clearColor", label: "Clear Color", control: "color", defaultValue: "var(--color-text-muted)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    { key: "clearHoverBg", label: "Clear Hover Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "editingColors", showWhen: { state: ["editing", "open"] } },
+    // Problem severities — each tints the editing input's border; the
+    // message itself rides in a popover Banner whose look comes from the
+    // Banner atom's own warning / error tokens (not per-cell knobs), so
+    // problems read identically everywhere in the product.
+    { key: "warningBorder", label: "Input Border", control: "color", defaultValue: "var(--color-warning-text)", section: "warningColors", showWhen: { state: "warning" } },
+    { key: "errorBorder", label: "Input Border", control: "color", defaultValue: "var(--color-danger-text)", section: "errorColors", showWhen: { state: "error" } }
+  ],
+  layoutVariants: [
+    {
+      // Editor-only state switcher (ephemeral — variants never reach the
+      // saved overrides). Peer states mirror the rest of the input family
+      // (default / hover / focus / disabled / error); `editing` is
+      // EditableCell-specific — the input swapped in on click — and
+      // `warning` is the recoverable-validation severity (vs `error` =
+      // failed save). The preview forces each state visually so its knobs
+      // are tunable without interaction. `submitting` is intentionally
+      // absent: it has no knobs of its own (it reuses the editing chrome
+      // with a disabled input).
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        // Editing is an input-only state — pickers (select/multiselect) have
+        // no text-edit mode, so the knob is hidden for them (a stale
+        // `editing` selection auto-repairs to Default on type switch).
+        { value: "editing", label: "Editing", showWhen: { type: ["text", "number", "date"] } },
+        // A picker's editing surface is its OPEN panel, so `open` is the
+        // pickers' counterpart to `editing`: it forces the open chrome and
+        // reveals the trigger ✕ so both are tunable without live clicking.
+        { value: "open", label: "Open", showWhen: { type: ["select", "multiselect"] } },
+        { value: "warning", label: "Warning" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    },
+    {
+      key: "type",
+      label: "Type",
+      options: [
+        { value: "text", label: "Text" },
+        { value: "number", label: "Number" },
+        { value: "date", label: "Date" },
+        { value: "select", label: "Select" },
+        { value: "multiselect", label: "Multi-select" }
+      ],
+      defaultValue: "text"
+    },
+    {
+      // Small = the dense DataTable scale (the original look, and the
+      // default); medium = the input-family scale for standalone use in
+      // side panels / detail views. Each size owns its own dimension knobs.
+      key: "size",
+      label: "Size",
+      options: [
+        { value: "small", label: "Small" },
+        { value: "medium", label: "Medium" }
+      ],
+      defaultValue: "small"
+    },
+    {
+      // One format drives everything the user sees on a date cell —
+      // the rendered value, the empty-cell hint, the input mask, and
+      // parsing. Committed values stay ISO regardless.
+      key: "dateFormat",
+      label: "Date Format",
+      options: [
+        { value: "ymd", label: "YYYY-MM-DD" },
+        { value: "dmy", label: "DD/MM/YYYY" },
+        { value: "mdy", label: "MM/DD/YYYY" }
+      ],
+      defaultValue: "ymd",
+      showWhen: { type: "date" }
+    },
+    {
+      key: "align",
+      label: "Align",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ],
+      defaultValue: "left"
+    }
+  ],
+  events: [
+    { name: "onCommit", description: "Fires when the user confirms a change (Enter, or blur with no validation error; for multiselect, each toggle). Async \u2014 the atom shows a submitting state until the returned promise settles.", payload: "(next: string | number | string[]) => void | Promise<void>" }
+  ],
+  api: {
+    importPath: "@viax.io/uxm/ui",
+    importNames: "EditableCell",
+    props: [
+      { name: "value", type: "string | number | string[]", required: true, description: "Current committed value (a string[] of picked option values for multiselect). The atom keeps a draft internally during edit." },
+      { name: "onCommit", type: "(next: string | number | string[]) => void | Promise<void>", required: true, description: "Called when the user commits a change. Async \u2014 reject the promise to surface a red error Banner in the cell's popover and keep the cell in edit mode for retry (multiselect reverts its optimistic toggle)." },
+      { name: "type", type: '"text" | "number" | "date" | "select" | "multiselect"', defaultValue: '"text"', description: "Editor type. Number coerces to Number on commit; date pairs a masked input with a Calendar popover \u2014 typing and picking both commit a normalized ISO date string; select is pick-only \u2014 a Listbox dropdown whose chosen option's value commits immediately; multiselect toggles options in a MultiListbox and commits a string[]." },
+      { name: "dateFormat", type: '"mdy" | "dmy" | "ymd"', defaultValue: '"ymd"', description: "Display / typing format for date cells (same options as DateInput): one format drives the rendered value, the empty-cell hint, the input mask, and parsing. Committed values stay ISO regardless \u2014 presentation, not storage." },
+      { name: "options", type: "{ value: string; label: string }[]", description: 'Options for `type="select"` / `"multiselect"`. Picking one commits its `value` (or toggles it into the array); display shows the `label`(s) unless `format` overrides it.' },
+      { name: "searchable", type: "boolean", description: "Show a search box in the dropdown. Defaults to auto \u2014 shown only when there are more than 6 options." },
+      { name: "clearable", type: "boolean", defaultValue: "true", description: 'Clear affordance, per type. select / multiselect: a "Clear" action in the dropdown footer that commits an empty value ("" / []). text / number / date: a \u2715 inside the EDITING input (mirrors TextInput) that empties the draft and keeps focus \u2014 nothing commits until Enter/blur. `required` never hides the affordance, it guards the outcome: clearing a required cell surfaces the required warning (the value stays), clearing an optional one empties it to the placeholder. On by default (the input-family convention) \u2014 pass `false` to opt out.' },
+      { name: "align", type: '"left" | "right" | "center"', defaultValue: '"left"', description: "Text alignment for both display and edit modes \u2014 pass through from a DataTable column's `align`." },
+      { name: "size", type: '"small" | "medium"', defaultValue: '"small"', description: "Size preset. `small` is the dense DataTable scale (font inherits until pinned); `medium` steps the cell up to the input-family scale (12/6px padding, 14px font) for standalone use in side panels / detail views. Height always derives from font-size + padding." },
+      { name: "format", type: "(value: string | number | string[]) => ReactNode", description: "Display-mode formatter (receives a string[] for multiselect \u2014 e.g. render chips). The raw value is still what gets edited." },
+      { name: "validate", type: "(next: string | number | string[]) => string | null | undefined", description: "Synchronous validation. Return a message to block commit \u2014 it surfaces as a yellow warning Banner in the cell's popover (recoverable input problem, vs the red error Banner for a failed save)." },
+      { name: "disabled", type: "boolean", description: "Read-only \u2014 clicking does nothing, no edit affordance." },
+      { name: "placeholder", type: "string", description: "Shown when value is empty / blank." }
+    ]
+  }
+};
+export {
+  editableCellDef
+};
+//# sourceMappingURL=editable-cell.js.map

package/dist/studio/lib/registry/inputs/editable-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/editable-cell.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const editableCellDef: ComponentDef = {\n  id: 'editable-cell',\n  name: 'Editable Cell',\n  category: 'Inputs',\n  description: 'Inline-editable cell. Text / number swap the display for an input (Enter or blur commits, Esc cancels); date pairs the input with a Calendar popover — type a date or pick a day, either commits an ISO date string; select is pick-only — clicking opens a Listbox dropdown and picking an option commits its value immediately (display can still be a custom Tag/Badge via `format`); multiselect is select\\'s array sibling — a MultiListbox toggles options with the panel open, the value is a string[] of picked option values shown as joined labels. Problems surface in a popover Banner under the cell — warning (yellow) for sync validate failures, error (red) for a rejected async `onCommit` — so the table row never changes height. Designed for DataTable cells but works anywhere an inline-edit pattern fits (PageHeader rename, StatCard label, etc.) — 2 sizes: small (dense table scale, default) / medium (input-family scale for side panels and detail views), each with its own dimension knobs.',\n  styleProperties: [\n    // Layout — maxWidth and radius are shared across both sizes; the\n    // padding/font trio is per-size (gated by the Size variant), one\n    // symmetric knob set each, same pattern as Tag. Saves emit as\n    // `--uxm-editable-cell-{size}-{kebab(key)}` (fallback path in toCSS),\n    // which the matching size modifier re-points the private pipe vars at.\n    // There is deliberately NO height knob: the cell's height derives from\n    // Font Size × line-height + paddings (a `1lh` floor covers empty\n    // cells), so no knob can silently stop mattering.\n    { key: 'smallPaddingX', label: 'Padding X', control: 'number', defaultValue: 8, min: 2, max: 16, step: 1, unit: 'px', showWhen: { size: 'small' } },\n    { key: 'smallPaddingY', label: 'Padding Y', control: 'number', defaultValue: 4, min: 0, max: 10, step: 1, unit: 'px', showWhen: { size: 'small' } },\n    // Font Size and Max Width are SELECTS for both sizes, with the same\n    // option list either way — only the default differs. Two reasons:\n    //   1. Each has a value the CSS genuinely uses that no numeric stepper\n    //      can express — `small`'s font default is the literal `inherit`\n    //      (CSS `1em`, so a cell reads like the text around it) and\n    //      `medium`'s cap default is `none` (fill the container, the\n    //      input-family behaviour in a side panel).\n    //   2. Flipping Size must not change the CONTROL for the same property.\n    //      A stepper for one size and a dropdown for the other made the\n    //      panel unpredictable — the property is the same property.\n    { key: 'smallFontSize', label: 'Font Size', control: 'select', defaultValue: 'inherit', options: ['inherit', '11px', '12px', '13px', '14px', '15px', '16px', '18px'], showWhen: { size: 'small' } },\n    { key: 'mediumPaddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 20, step: 1, unit: 'px', showWhen: { size: 'medium' } },\n    { key: 'mediumPaddingY', label: 'Padding Y', control: 'number', defaultValue: 6, min: 0, max: 14, step: 1, unit: 'px', showWhen: { size: 'medium' } },\n    { key: 'mediumFontSize', label: 'Font Size', control: 'select', defaultValue: '14px', options: ['inherit', '11px', '12px', '13px', '14px', '15px', '16px', '18px'], showWhen: { size: 'medium' } },\n    // Per-size, like every other dimension: a table cell needs a cap so one\n    // long value can't push its column, a side-panel field should just fill\n    // the container. Same control + same options for both sizes (see the\n    // Font Size note above) — only the default differs.\n    { key: 'smallMaxWidth', label: 'Max Width', control: 'select', defaultValue: '320px', options: ['none', '120px', '160px', '240px', '320px', '400px', '480px', '560px', '640px'], showWhen: { size: 'small' } },\n    { key: 'mediumMaxWidth', label: 'Max Width', control: 'select', defaultValue: 'none', options: ['none', '120px', '160px', '240px', '320px', '400px', '480px', '560px', '640px'], showWhen: { size: 'medium' } },\n    { key: 'radius', label: 'Border Radius', control: 'slider', defaultValue: 4, min: 0, max: 12, step: 1, unit: 'px' },\n    // Display chrome — one knob per peer state, matching the input\n    // family's default / hover / focus / disabled convention. Each is\n    // gated to its own state so the panel shows only what's relevant.\n    // The value's own colour: pinned through the component layer (the cell no\n    // longer inherits it — a muted column / dimmed row must not bleed in), so\n    // it belongs in the panel next to its placeholder twin.\n    { key: 'color', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'cellColors', showWhen: { state: 'default' } },\n    { key: 'placeholderColor', label: 'Placeholder Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'cellColors', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'cellColors', showWhen: { state: 'hover' } },\n    // The hover affordance differs by type: text / number / date reveal a pencil,\n    // the pickers (select / multiselect) reveal a chevron. Gate each so only the\n    // relevant one shows under Hover.\n    { key: 'pencilColor', label: 'Pencil Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'cellColors', showWhen: { state: 'hover', type: ['text', 'number', 'date'] } },\n    { key: 'chevronColor', label: 'Chevron Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'cellColors', showWhen: { state: 'hover', type: ['select', 'multiselect'] } },\n    { key: 'focusBorder', label: 'Focus Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'cellColors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Focus Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'cellColors', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Disabled Opacity', control: 'slider', defaultValue: 0.55, min: 0.2, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Editing — the active input swapped in on click.\n    { key: 'inputBg', label: 'Input Background', control: 'color', defaultValue: 'var(--color-card)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'inputColor', label: 'Input Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'inputBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-border)', section: 'editingColors', showWhen: { state: 'editing' } },\n    { key: 'inputFocusBorder', label: 'Input Focus Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    // ONE knob pair for every in-field ✕: the same\n    // `--uxm-editable-cell-clear-*` vars theme the editing input's ✕\n    // (text / number / date) and the picker trigger's ✕, which is why the\n    // gate lists both surfaces' states — `editing` for the input,\n    // `open` for a picker (its open panel IS its editing surface). The\n    // pickers' dropdown-footer Clear is separate: that one lives on the\n    // Listbox atom's surface, not a per-cell knob.\n    { key: 'clearColor', label: 'Clear Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    { key: 'clearHoverBg', label: 'Clear Hover Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'editingColors', showWhen: { state: ['editing', 'open'] } },\n    // Problem severities — each tints the editing input's border; the\n    // message itself rides in a popover Banner whose look comes from the\n    // Banner atom's own warning / error tokens (not per-cell knobs), so\n    // problems read identically everywhere in the product.\n    { key: 'warningBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-warning-text)', section: 'warningColors', showWhen: { state: 'warning' } },\n    { key: 'errorBorder', label: 'Input Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorColors', showWhen: { state: 'error' } },\n  ],\n  layoutVariants: [\n    {\n      // Editor-only state switcher (ephemeral — variants never reach the\n      // saved overrides). Peer states mirror the rest of the input family\n      // (default / hover / focus / disabled / error); `editing` is\n      // EditableCell-specific — the input swapped in on click — and\n      // `warning` is the recoverable-validation severity (vs `error` =\n      // failed save). The preview forces each state visually so its knobs\n      // are tunable without interaction. `submitting` is intentionally\n      // absent: it has no knobs of its own (it reuses the editing chrome\n      // with a disabled input).\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        // Editing is an input-only state — pickers (select/multiselect) have\n        // no text-edit mode, so the knob is hidden for them (a stale\n        // `editing` selection auto-repairs to Default on type switch).\n        { value: 'editing', label: 'Editing', showWhen: { type: ['text', 'number', 'date'] } },\n        // A picker's editing surface is its OPEN panel, so `open` is the\n        // pickers' counterpart to `editing`: it forces the open chrome and\n        // reveals the trigger ✕ so both are tunable without live clicking.\n        { value: 'open', label: 'Open', showWhen: { type: ['select', 'multiselect'] } },\n        { value: 'warning', label: 'Warning' },\n        { value: 'error', label: 'Error' },\n      ],\n      defaultValue: 'default',\n    },\n    {\n      key: 'type',\n      label: 'Type',\n      options: [\n        { value: 'text', label: 'Text' },\n        { value: 'number', label: 'Number' },\n        { value: 'date', label: 'Date' },\n        { value: 'select', label: 'Select' },\n        { value: 'multiselect', label: 'Multi-select' },\n      ],\n      defaultValue: 'text',\n    },\n    {\n      // Small = the dense DataTable scale (the original look, and the\n      // default); medium = the input-family scale for standalone use in\n      // side panels / detail views. Each size owns its own dimension knobs.\n      key: 'size',\n      label: 'Size',\n      options: [\n        { value: 'small', label: 'Small' },\n        { value: 'medium', label: 'Medium' },\n      ],\n      defaultValue: 'small',\n    },\n    {\n      // One format drives everything the user sees on a date cell —\n      // the rendered value, the empty-cell hint, the input mask, and\n      // parsing. Committed values stay ISO regardless.\n      key: 'dateFormat',\n      label: 'Date Format',\n      options: [\n        { value: 'ymd', label: 'YYYY-MM-DD' },\n        { value: 'dmy', label: 'DD/MM/YYYY' },\n        { value: 'mdy', label: 'MM/DD/YYYY' },\n      ],\n      defaultValue: 'ymd',\n      showWhen: { type: 'date' },\n    },\n    {\n      key: 'align',\n      label: 'Align',\n      options: [\n        { value: 'left', label: 'Left' },\n        { value: 'center', label: 'Center' },\n        { value: 'right', label: 'Right' },\n      ],\n      defaultValue: 'left',\n    },\n  ],\n  events: [\n    { name: 'onCommit', description: 'Fires when the user confirms a change (Enter, or blur with no validation error; for multiselect, each toggle). Async — the atom shows a submitting state until the returned promise settles.', payload: '(next: string | number | string[]) => void | Promise<void>' },\n  ],\n  api: {\n    importPath: '@viax.io/uxm/ui',\n    importNames: 'EditableCell',\n    props: [\n      { name: 'value', type: 'string | number | string[]', required: true, description: 'Current committed value (a string[] of picked option values for multiselect). The atom keeps a draft internally during edit.' },\n      { name: 'onCommit', type: '(next: string | number | string[]) => void | Promise<void>', required: true, description: \"Called when the user commits a change. Async — reject the promise to surface a red error Banner in the cell's popover and keep the cell in edit mode for retry (multiselect reverts its optimistic toggle).\" },\n      { name: 'type', type: '\"text\" | \"number\" | \"date\" | \"select\" | \"multiselect\"', defaultValue: '\"text\"', description: 'Editor type. Number coerces to Number on commit; date pairs a masked input with a Calendar popover — typing and picking both commit a normalized ISO date string; select is pick-only — a Listbox dropdown whose chosen option\\'s value commits immediately; multiselect toggles options in a MultiListbox and commits a string[].' },\n      { name: 'dateFormat', type: '\"mdy\" | \"dmy\" | \"ymd\"', defaultValue: '\"ymd\"', description: 'Display / typing format for date cells (same options as DateInput): one format drives the rendered value, the empty-cell hint, the input mask, and parsing. Committed values stay ISO regardless — presentation, not storage.' },\n      { name: 'options', type: '{ value: string; label: string }[]', description: 'Options for `type=\"select\"` / `\"multiselect\"`. Picking one commits its `value` (or toggles it into the array); display shows the `label`(s) unless `format` overrides it.' },\n      { name: 'searchable', type: 'boolean', description: 'Show a search box in the dropdown. Defaults to auto — shown only when there are more than 6 options.' },\n      { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Clear affordance, per type. select / multiselect: a \"Clear\" action in the dropdown footer that commits an empty value (\"\" / []). text / number / date: a ✕ inside the EDITING input (mirrors TextInput) that empties the draft and keeps focus — nothing commits until Enter/blur. `required` never hides the affordance, it guards the outcome: clearing a required cell surfaces the required warning (the value stays), clearing an optional one empties it to the placeholder. On by default (the input-family convention) — pass `false` to opt out.' },\n      { name: 'align', type: '\"left\" | \"right\" | \"center\"', defaultValue: '\"left\"', description: \"Text alignment for both display and edit modes — pass through from a DataTable column's `align`.\" },\n      { name: 'size', type: '\"small\" | \"medium\"', defaultValue: '\"small\"', description: 'Size preset. `small` is the dense DataTable scale (font inherits until pinned); `medium` steps the cell up to the input-family scale (12/6px padding, 14px font) for standalone use in side panels / detail views. Height always derives from font-size + padding.' },\n      { name: 'format', type: '(value: string | number | string[]) => ReactNode', description: 'Display-mode formatter (receives a string[] for multiselect — e.g. render chips). The raw value is still what gets edited.' },\n      { name: 'validate', type: '(next: string | number | string[]) => string | null | undefined', description: \"Synchronous validation. Return a message to block commit — it surfaces as a yellow warning Banner in the cell's popover (recoverable input problem, vs the red error Banner for a failed save).\" },\n      { name: 'disabled', type: 'boolean', description: 'Read-only — clicking does nothing, no edit affordance.' },\n      { name: 'placeholder', type: 'string', description: 'Shown when value is empty / blank.' },\n    ],\n  },\n};\n"],"mappings":"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","names":[]}