npm - @viax.io/uxm - Versions diffs - 4.39.0 → 4.40.0 - Mend

@viax.io/uxm 4.39.0 → 4.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

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

	@@ -1 +1 @@
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/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":[]}
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.js CHANGED Viewed

@@ -157,7 +157,7 @@ const editableCellDef = {
     { 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/uxm/ui",
+    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." },

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

	@@ -1 +1 @@
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/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":[]}
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/file-upload.cjs CHANGED Viewed

@@ -135,7 +135,7 @@ const fileUploadDef = {
     { name: "onError", description: "Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own \u2014 drive it from your validation in `onFiles`.", payload: "{ reason: string }" }
   ],
   api: {
-    importPath: "@viax/uxm/ui",
+    importPath: "@viax.io/uxm/ui",
     importNames: "FileUpload",
     props: [
       { name: "onFiles", type: "(files: File[]) => void", description: "Receives picked or dropped files." },

package/dist/studio/lib/registry/inputs/file-upload.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/file-upload.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const fileUploadDef: ComponentDef = {\n id: 'file-upload',\n name: 'File Upload',\n category: 'Inputs',\n description: 'File-upload atom. Click anywhere on the drop area opens the system file picker; dragging files in fires the drag-over state and drop sends them to `onFiles`. Two state spaces: (1) drop-area state covers default / hover / drag-over / focus / disabled / error (page-level errors only), and (2) per-file lifecycle status — `queued \| uploading \| done \| error` — lives on each `FileUploadFileMeta.status` and paints each row independently. The drop area never shows an aggregate progress bar; each row has its own. Visual-only atom: no built-in upload; `onFiles` returns native `File[]` for the caller to drive. v2 backlog: image rows render a `Thumbnail` preview keyed off MIME instead of the generic document glyph.',\n styleProperties: [\n // ── Per-state drop-area surface colors ──\n // Note: `dropAreaColors` (not the generic `fieldColors` used by\n // input-text / textarea / etc.) — the dropzone is a drop area, not\n // a text field. Same shape as fieldColors otherwise: bg / border /\n // text per state, gated by `showWhen: { state }`.\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n // Drag-over — overlay style: only the surface bg / border / icon tint change.\n { key: 'dragBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 8%, var(--color-card))', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragAccent', label: 'Icon Tint', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n // Focus — paints via :focus-within on the label (the hidden input owns focus).\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Error — surface tint + dedicated message slot below the drop area.\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Message Color', 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 // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'dropAreaColors', 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 // ── Shared geometry (always visible) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px' },\n { key: 'borderStyle', label: 'Border Style', control: 'select', defaultValue: 'dashed', options: ['dashed', 'solid', 'dotted'] },\n { key: 'borderWidth', label: 'Border Width', control: 'slider', defaultValue: 1.5, min: 1, max: 4, step: 0.5, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 8, max: 48, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 24, min: 8, max: 64, step: 2, unit: 'px' },\n { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 160, min: 80, max: 320, step: 10, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n // ── Icon sub-element ──\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 40, min: 20, max: 72, step: 2, unit: 'px', section: 'icon' },\n { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'icon' },\n // ── Text sub-elements ──\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 15, min: 12, max: 22, step: 1, unit: 'px', section: 'text' },\n { key: 'helpSize', label: 'Help Size', control: 'number', defaultValue: 13, min: 10, max: 16, step: 1, unit: 'px', section: 'text' },\n { key: 'helpColor', label: 'Help Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'text' },\n { key: 'allowedTypesSize', label: 'Allowed-types Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'text' },\n { key: 'allowedTypesColor', label: 'Allowed-types Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'text' },\n // ── File-list row knobs (only consumed when `withList: on`) ──\n { key: 'rowBg', label: 'Row Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'fileList' },\n { key: 'rowBorder', label: 'Row Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fileList' },\n { key: 'rowRadius', label: 'Row Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingX', label: 'Row Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingY', label: 'Row Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowNameColor', label: 'Filename', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'fileList' },\n { key: 'rowMetaColor', label: 'Meta Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n { key: 'rowIconColor', label: 'File Icon', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileList' },\n { key: 'removeIconColor', label: 'Remove Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // Download control. The key does not collide with REAL_CSS_PROPS, so the\n // generic `--uxm-file-upload-{kebab}` fallback already lands on the name\n // the stylesheet reads — no PER_COMPONENT_MAPPING entry needed.\n // No hover knob on purpose: the registry's `state` variants drive the DROP\n // AREA, not the rows, so a row-hover knob would save a value the canvas\n // could never show changing. `--uxm-file-upload-download-icon-hover-color`\n // stays available to consumers, exactly as the remove button's does.\n { key: 'downloadIconColor', label: 'Download Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // ── File List · Progress ──\n // Per-row progress strip (applied during status=\"uploading\"). It's a\n // single thin colored bar painted directly on the row's bottom edge —\n // no separate track element, so no `progressTrack` knob (the row's\n // own background IS the implicit track at 2px height).\n { key: 'progressFill', label: 'Progress Fill', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileListProgress' },\n { key: 'progressHeight', label: 'Progress Height', control: 'number', defaultValue: 2, min: 1, max: 6, step: 1, unit: 'px', section: 'fileListProgress' },\n // ── File List · Status ──\n // Per-status visual overrides — \"what changes when a row succeeds or\n // fails.\" Grouped together because they're all conditional styling\n // on the same base row, not standalone properties of any one state.\n { key: 'rowDoneBg', label: 'Done Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'fileListStatus' },\n { key: 'rowDoneBorderColor', label: 'Done Border', control: 'color', defaultValue: 'var(--color-success-border)', section: 'fileListStatus' },\n { key: 'rowDoneIconColor', label: 'Done Icon', control: 'color', defaultValue: 'var(--color-success-text)', section: 'fileListStatus' },\n { key: 'rowErrorBg', label: 'Error Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'fileListStatus' },\n { key: 'rowErrorBorderColor', label: 'Error Border', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'fileListStatus' },\n { key: 'rowErrorIconColor', label: 'Error Icon', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n { key: 'rowErrorMetaColor', label: 'Error Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'drag-over', label: 'Drag Over' },\n { value: 'focus', label: 'Focus' },\n { value: 'uploading', label: 'Uploading' },\n { value: 'error', label: 'Error' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onFiles', description: 'Fires when the user picks files (via picker or drop). Receives a native `File[]`.', payload: 'File[]' },\n { name: 'onRemove', description: \"Fires when a row's remove button is clicked (only when `showFileList` is on).\", payload: '{ id: string }' },\n { name: 'onDragEnter', description: 'Fires when a drag enters the drop area.', payload: 'DragEvent' },\n { name: 'onDragLeave', description: 'Fires when a drag leaves the drop area.', payload: 'DragEvent' },\n { name: 'onError', description: 'Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own — drive it from your validation in `onFiles`.', payload: '{ reason: string }' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'FileUpload',\n props: [\n { name: 'onFiles', type: '(files: File[]) => void', description: 'Receives picked or dropped files.' },\n { name: 'onRemove', type: '(id: string) => void', description: \"Called when a row's remove button is clicked. Only meaningful with `showFileList`.\" },\n { name: 'multiple', type: 'boolean', defaultValue: 'true', description: 'Allow selecting more than one file at a time. Maps to `<input multiple>`.' },\n { name: 'accept', type: 'string', description: 'Standard `<input accept>` filter, e.g. `\"image/*\"` or `\".pdf,.docx\"`. Runtime prop — not a workbench knob.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables click + drop interactions.' },\n { name: 'titleText', type: 'string', defaultValue: '\"Upload a file\"', description: 'Heading inside the drop area.' },\n { name: 'helpText', type: 'string', description: 'Hint line under the title. Defaults to a `multiple`-aware string if omitted.' },\n { name: 'allowedTypesText', type: 'string', description: 'Optional constraint line below the help text — e.g. \"PDF, DOCX · up to 10 MB\". Caller-controlled copy: the atom never invents it and never enforces it. Keep it in sync with the `accept` filter and your `onFiles` validation. If omitted, no slot renders.' },\n { name: 'error', type: 'string', description: 'Page-level error message (e.g. \"Connection lost\"). Paints the drop area in the `error` state and renders the message below it. Named `error` to match the rest of the input family. Distinct from per-file errors — set `status: \"error\"` + `errorMessage` on a `FileUploadFileMeta` for single-file failures.' },\n { name: 'errorMessage', type: 'string', description: 'Deprecated alias for `error` (back-compat); `error` wins when both are set.' },\n { name: 'files', type: 'FileUploadFileMeta[]', description: \"Files to display in the inline list under the drop area. Each row: `{ id, name, size, status?, progress?, errorMessage? }`. `status` is `queued \| uploading \| done \| error` and drives row rendering independently. List is always rendered when `files.length > 0` — to keep the list elsewhere on the page, just don't pass `files` to the atom.\" },\n { name: 'state', type: '\"default\" \| \"drag-over\" \| \"uploading\" \| \"error\"', description: 'Drop-area visual state. Caller-controlled — the atom never auto-derives this from per-file statuses. Set `\"uploading\"` for batch lockouts / pre-file validation / indeterminate uploads; the help text swaps to \"Uploading…\" and `aria-busy` is applied. Per-file states (queued/uploading/done/error) live on each `FileUploadFileMeta.status` and are orthogonal to this.' },\n { name: 'iconGlyph', type: 'string', defaultValue: '\"cloud-arrow-up\"', description: 'Override the drop-area icon glyph.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/file-upload.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const fileUploadDef: ComponentDef = {\n id: 'file-upload',\n name: 'File Upload',\n category: 'Inputs',\n description: 'File-upload atom. Click anywhere on the drop area opens the system file picker; dragging files in fires the drag-over state and drop sends them to `onFiles`. Two state spaces: (1) drop-area state covers default / hover / drag-over / focus / disabled / error (page-level errors only), and (2) per-file lifecycle status — `queued \| uploading \| done \| error` — lives on each `FileUploadFileMeta.status` and paints each row independently. The drop area never shows an aggregate progress bar; each row has its own. Visual-only atom: no built-in upload; `onFiles` returns native `File[]` for the caller to drive. v2 backlog: image rows render a `Thumbnail` preview keyed off MIME instead of the generic document glyph.',\n styleProperties: [\n // ── Per-state drop-area surface colors ──\n // Note: `dropAreaColors` (not the generic `fieldColors` used by\n // input-text / textarea / etc.) — the dropzone is a drop area, not\n // a text field. Same shape as fieldColors otherwise: bg / border /\n // text per state, gated by `showWhen: { state }`.\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n // Drag-over — overlay style: only the surface bg / border / icon tint change.\n { key: 'dragBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 8%, var(--color-card))', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragAccent', label: 'Icon Tint', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n // Focus — paints via :focus-within on the label (the hidden input owns focus).\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Error — surface tint + dedicated message slot below the drop area.\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Message Color', 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 // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'dropAreaColors', 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 // ── Shared geometry (always visible) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px' },\n { key: 'borderStyle', label: 'Border Style', control: 'select', defaultValue: 'dashed', options: ['dashed', 'solid', 'dotted'] },\n { key: 'borderWidth', label: 'Border Width', control: 'slider', defaultValue: 1.5, min: 1, max: 4, step: 0.5, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 8, max: 48, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 24, min: 8, max: 64, step: 2, unit: 'px' },\n { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 160, min: 80, max: 320, step: 10, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n // ── Icon sub-element ──\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 40, min: 20, max: 72, step: 2, unit: 'px', section: 'icon' },\n { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'icon' },\n // ── Text sub-elements ──\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 15, min: 12, max: 22, step: 1, unit: 'px', section: 'text' },\n { key: 'helpSize', label: 'Help Size', control: 'number', defaultValue: 13, min: 10, max: 16, step: 1, unit: 'px', section: 'text' },\n { key: 'helpColor', label: 'Help Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'text' },\n { key: 'allowedTypesSize', label: 'Allowed-types Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'text' },\n { key: 'allowedTypesColor', label: 'Allowed-types Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'text' },\n // ── File-list row knobs (only consumed when `withList: on`) ──\n { key: 'rowBg', label: 'Row Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'fileList' },\n { key: 'rowBorder', label: 'Row Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fileList' },\n { key: 'rowRadius', label: 'Row Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingX', label: 'Row Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingY', label: 'Row Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowNameColor', label: 'Filename', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'fileList' },\n { key: 'rowMetaColor', label: 'Meta Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n { key: 'rowIconColor', label: 'File Icon', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileList' },\n { key: 'removeIconColor', label: 'Remove Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // Download control. The key does not collide with REAL_CSS_PROPS, so the\n // generic `--uxm-file-upload-{kebab}` fallback already lands on the name\n // the stylesheet reads — no PER_COMPONENT_MAPPING entry needed.\n // No hover knob on purpose: the registry's `state` variants drive the DROP\n // AREA, not the rows, so a row-hover knob would save a value the canvas\n // could never show changing. `--uxm-file-upload-download-icon-hover-color`\n // stays available to consumers, exactly as the remove button's does.\n { key: 'downloadIconColor', label: 'Download Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // ── File List · Progress ──\n // Per-row progress strip (applied during status=\"uploading\"). It's a\n // single thin colored bar painted directly on the row's bottom edge —\n // no separate track element, so no `progressTrack` knob (the row's\n // own background IS the implicit track at 2px height).\n { key: 'progressFill', label: 'Progress Fill', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileListProgress' },\n { key: 'progressHeight', label: 'Progress Height', control: 'number', defaultValue: 2, min: 1, max: 6, step: 1, unit: 'px', section: 'fileListProgress' },\n // ── File List · Status ──\n // Per-status visual overrides — \"what changes when a row succeeds or\n // fails.\" Grouped together because they're all conditional styling\n // on the same base row, not standalone properties of any one state.\n { key: 'rowDoneBg', label: 'Done Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'fileListStatus' },\n { key: 'rowDoneBorderColor', label: 'Done Border', control: 'color', defaultValue: 'var(--color-success-border)', section: 'fileListStatus' },\n { key: 'rowDoneIconColor', label: 'Done Icon', control: 'color', defaultValue: 'var(--color-success-text)', section: 'fileListStatus' },\n { key: 'rowErrorBg', label: 'Error Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'fileListStatus' },\n { key: 'rowErrorBorderColor', label: 'Error Border', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'fileListStatus' },\n { key: 'rowErrorIconColor', label: 'Error Icon', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n { key: 'rowErrorMetaColor', label: 'Error Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'drag-over', label: 'Drag Over' },\n { value: 'focus', label: 'Focus' },\n { value: 'uploading', label: 'Uploading' },\n { value: 'error', label: 'Error' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onFiles', description: 'Fires when the user picks files (via picker or drop). Receives a native `File[]`.', payload: 'File[]' },\n { name: 'onRemove', description: \"Fires when a row's remove button is clicked (only when `showFileList` is on).\", payload: '{ id: string }' },\n { name: 'onDragEnter', description: 'Fires when a drag enters the drop area.', payload: 'DragEvent' },\n { name: 'onDragLeave', description: 'Fires when a drag leaves the drop area.', payload: 'DragEvent' },\n { name: 'onError', description: 'Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own — drive it from your validation in `onFiles`.', payload: '{ reason: string }' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'FileUpload',\n props: [\n { name: 'onFiles', type: '(files: File[]) => void', description: 'Receives picked or dropped files.' },\n { name: 'onRemove', type: '(id: string) => void', description: \"Called when a row's remove button is clicked. Only meaningful with `showFileList`.\" },\n { name: 'multiple', type: 'boolean', defaultValue: 'true', description: 'Allow selecting more than one file at a time. Maps to `<input multiple>`.' },\n { name: 'accept', type: 'string', description: 'Standard `<input accept>` filter, e.g. `\"image/*\"` or `\".pdf,.docx\"`. Runtime prop — not a workbench knob.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables click + drop interactions.' },\n { name: 'titleText', type: 'string', defaultValue: '\"Upload a file\"', description: 'Heading inside the drop area.' },\n { name: 'helpText', type: 'string', description: 'Hint line under the title. Defaults to a `multiple`-aware string if omitted.' },\n { name: 'allowedTypesText', type: 'string', description: 'Optional constraint line below the help text — e.g. \"PDF, DOCX · up to 10 MB\". Caller-controlled copy: the atom never invents it and never enforces it. Keep it in sync with the `accept` filter and your `onFiles` validation. If omitted, no slot renders.' },\n { name: 'error', type: 'string', description: 'Page-level error message (e.g. \"Connection lost\"). Paints the drop area in the `error` state and renders the message below it. Named `error` to match the rest of the input family. Distinct from per-file errors — set `status: \"error\"` + `errorMessage` on a `FileUploadFileMeta` for single-file failures.' },\n { name: 'errorMessage', type: 'string', description: 'Deprecated alias for `error` (back-compat); `error` wins when both are set.' },\n { name: 'files', type: 'FileUploadFileMeta[]', description: \"Files to display in the inline list under the drop area. Each row: `{ id, name, size, status?, progress?, errorMessage? }`. `status` is `queued \| uploading \| done \| error` and drives row rendering independently. List is always rendered when `files.length > 0` — to keep the list elsewhere on the page, just don't pass `files` to the atom.\" },\n { name: 'state', type: '\"default\" \| \"drag-over\" \| \"uploading\" \| \"error\"', description: 'Drop-area visual state. Caller-controlled — the atom never auto-derives this from per-file statuses. Set `\"uploading\"` for batch lockouts / pre-file validation / indeterminate uploads; the help text swaps to \"Uploading…\" and `aria-busy` is applied. Per-file states (queued/uploading/done/error) live on each `FileUploadFileMeta.status` and are orthogonal to this.' },\n { name: 'iconGlyph', type: 'string', defaultValue: '\"cloud-arrow-up\"', description: 'Override the drop-area icon glyph.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/file-upload.js CHANGED Viewed

@@ -112,7 +112,7 @@ const fileUploadDef = {
     { name: "onError", description: "Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own \u2014 drive it from your validation in `onFiles`.", payload: "{ reason: string }" }
   ],
   api: {
-    importPath: "@viax/uxm/ui",
+    importPath: "@viax.io/uxm/ui",
     importNames: "FileUpload",
     props: [
       { name: "onFiles", type: "(files: File[]) => void", description: "Receives picked or dropped files." },

package/dist/studio/lib/registry/inputs/file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/file-upload.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const fileUploadDef: ComponentDef = {\n id: 'file-upload',\n name: 'File Upload',\n category: 'Inputs',\n description: 'File-upload atom. Click anywhere on the drop area opens the system file picker; dragging files in fires the drag-over state and drop sends them to `onFiles`. Two state spaces: (1) drop-area state covers default / hover / drag-over / focus / disabled / error (page-level errors only), and (2) per-file lifecycle status — `queued \| uploading \| done \| error` — lives on each `FileUploadFileMeta.status` and paints each row independently. The drop area never shows an aggregate progress bar; each row has its own. Visual-only atom: no built-in upload; `onFiles` returns native `File[]` for the caller to drive. v2 backlog: image rows render a `Thumbnail` preview keyed off MIME instead of the generic document glyph.',\n styleProperties: [\n // ── Per-state drop-area surface colors ──\n // Note: `dropAreaColors` (not the generic `fieldColors` used by\n // input-text / textarea / etc.) — the dropzone is a drop area, not\n // a text field. Same shape as fieldColors otherwise: bg / border /\n // text per state, gated by `showWhen: { state }`.\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n // Drag-over — overlay style: only the surface bg / border / icon tint change.\n { key: 'dragBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 8%, var(--color-card))', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragAccent', label: 'Icon Tint', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n // Focus — paints via :focus-within on the label (the hidden input owns focus).\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Error — surface tint + dedicated message slot below the drop area.\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Message Color', 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 // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'dropAreaColors', 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 // ── Shared geometry (always visible) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px' },\n { key: 'borderStyle', label: 'Border Style', control: 'select', defaultValue: 'dashed', options: ['dashed', 'solid', 'dotted'] },\n { key: 'borderWidth', label: 'Border Width', control: 'slider', defaultValue: 1.5, min: 1, max: 4, step: 0.5, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 8, max: 48, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 24, min: 8, max: 64, step: 2, unit: 'px' },\n { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 160, min: 80, max: 320, step: 10, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n // ── Icon sub-element ──\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 40, min: 20, max: 72, step: 2, unit: 'px', section: 'icon' },\n { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'icon' },\n // ── Text sub-elements ──\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 15, min: 12, max: 22, step: 1, unit: 'px', section: 'text' },\n { key: 'helpSize', label: 'Help Size', control: 'number', defaultValue: 13, min: 10, max: 16, step: 1, unit: 'px', section: 'text' },\n { key: 'helpColor', label: 'Help Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'text' },\n { key: 'allowedTypesSize', label: 'Allowed-types Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'text' },\n { key: 'allowedTypesColor', label: 'Allowed-types Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'text' },\n // ── File-list row knobs (only consumed when `withList: on`) ──\n { key: 'rowBg', label: 'Row Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'fileList' },\n { key: 'rowBorder', label: 'Row Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fileList' },\n { key: 'rowRadius', label: 'Row Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingX', label: 'Row Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingY', label: 'Row Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowNameColor', label: 'Filename', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'fileList' },\n { key: 'rowMetaColor', label: 'Meta Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n { key: 'rowIconColor', label: 'File Icon', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileList' },\n { key: 'removeIconColor', label: 'Remove Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // Download control. The key does not collide with REAL_CSS_PROPS, so the\n // generic `--uxm-file-upload-{kebab}` fallback already lands on the name\n // the stylesheet reads — no PER_COMPONENT_MAPPING entry needed.\n // No hover knob on purpose: the registry's `state` variants drive the DROP\n // AREA, not the rows, so a row-hover knob would save a value the canvas\n // could never show changing. `--uxm-file-upload-download-icon-hover-color`\n // stays available to consumers, exactly as the remove button's does.\n { key: 'downloadIconColor', label: 'Download Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // ── File List · Progress ──\n // Per-row progress strip (applied during status=\"uploading\"). It's a\n // single thin colored bar painted directly on the row's bottom edge —\n // no separate track element, so no `progressTrack` knob (the row's\n // own background IS the implicit track at 2px height).\n { key: 'progressFill', label: 'Progress Fill', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileListProgress' },\n { key: 'progressHeight', label: 'Progress Height', control: 'number', defaultValue: 2, min: 1, max: 6, step: 1, unit: 'px', section: 'fileListProgress' },\n // ── File List · Status ──\n // Per-status visual overrides — \"what changes when a row succeeds or\n // fails.\" Grouped together because they're all conditional styling\n // on the same base row, not standalone properties of any one state.\n { key: 'rowDoneBg', label: 'Done Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'fileListStatus' },\n { key: 'rowDoneBorderColor', label: 'Done Border', control: 'color', defaultValue: 'var(--color-success-border)', section: 'fileListStatus' },\n { key: 'rowDoneIconColor', label: 'Done Icon', control: 'color', defaultValue: 'var(--color-success-text)', section: 'fileListStatus' },\n { key: 'rowErrorBg', label: 'Error Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'fileListStatus' },\n { key: 'rowErrorBorderColor', label: 'Error Border', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'fileListStatus' },\n { key: 'rowErrorIconColor', label: 'Error Icon', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n { key: 'rowErrorMetaColor', label: 'Error Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'drag-over', label: 'Drag Over' },\n { value: 'focus', label: 'Focus' },\n { value: 'uploading', label: 'Uploading' },\n { value: 'error', label: 'Error' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onFiles', description: 'Fires when the user picks files (via picker or drop). Receives a native `File[]`.', payload: 'File[]' },\n { name: 'onRemove', description: \"Fires when a row's remove button is clicked (only when `showFileList` is on).\", payload: '{ id: string }' },\n { name: 'onDragEnter', description: 'Fires when a drag enters the drop area.', payload: 'DragEvent' },\n { name: 'onDragLeave', description: 'Fires when a drag leaves the drop area.', payload: 'DragEvent' },\n { name: 'onError', description: 'Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own — drive it from your validation in `onFiles`.', payload: '{ reason: string }' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'FileUpload',\n props: [\n { name: 'onFiles', type: '(files: File[]) => void', description: 'Receives picked or dropped files.' },\n { name: 'onRemove', type: '(id: string) => void', description: \"Called when a row's remove button is clicked. Only meaningful with `showFileList`.\" },\n { name: 'multiple', type: 'boolean', defaultValue: 'true', description: 'Allow selecting more than one file at a time. Maps to `<input multiple>`.' },\n { name: 'accept', type: 'string', description: 'Standard `<input accept>` filter, e.g. `\"image/*\"` or `\".pdf,.docx\"`. Runtime prop — not a workbench knob.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables click + drop interactions.' },\n { name: 'titleText', type: 'string', defaultValue: '\"Upload a file\"', description: 'Heading inside the drop area.' },\n { name: 'helpText', type: 'string', description: 'Hint line under the title. Defaults to a `multiple`-aware string if omitted.' },\n { name: 'allowedTypesText', type: 'string', description: 'Optional constraint line below the help text — e.g. \"PDF, DOCX · up to 10 MB\". Caller-controlled copy: the atom never invents it and never enforces it. Keep it in sync with the `accept` filter and your `onFiles` validation. If omitted, no slot renders.' },\n { name: 'error', type: 'string', description: 'Page-level error message (e.g. \"Connection lost\"). Paints the drop area in the `error` state and renders the message below it. Named `error` to match the rest of the input family. Distinct from per-file errors — set `status: \"error\"` + `errorMessage` on a `FileUploadFileMeta` for single-file failures.' },\n { name: 'errorMessage', type: 'string', description: 'Deprecated alias for `error` (back-compat); `error` wins when both are set.' },\n { name: 'files', type: 'FileUploadFileMeta[]', description: \"Files to display in the inline list under the drop area. Each row: `{ id, name, size, status?, progress?, errorMessage? }`. `status` is `queued \| uploading \| done \| error` and drives row rendering independently. List is always rendered when `files.length > 0` — to keep the list elsewhere on the page, just don't pass `files` to the atom.\" },\n { name: 'state', type: '\"default\" \| \"drag-over\" \| \"uploading\" \| \"error\"', description: 'Drop-area visual state. Caller-controlled — the atom never auto-derives this from per-file statuses. Set `\"uploading\"` for batch lockouts / pre-file validation / indeterminate uploads; the help text swaps to \"Uploading…\" and `aria-busy` is applied. Per-file states (queued/uploading/done/error) live on each `FileUploadFileMeta.status` and are orthogonal to this.' },\n { name: 'iconGlyph', type: 'string', defaultValue: '\"cloud-arrow-up\"', description: 'Override the drop-area icon glyph.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/file-upload.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const fileUploadDef: ComponentDef = {\n id: 'file-upload',\n name: 'File Upload',\n category: 'Inputs',\n description: 'File-upload atom. Click anywhere on the drop area opens the system file picker; dragging files in fires the drag-over state and drop sends them to `onFiles`. Two state spaces: (1) drop-area state covers default / hover / drag-over / focus / disabled / error (page-level errors only), and (2) per-file lifecycle status — `queued \| uploading \| done \| error` — lives on each `FileUploadFileMeta.status` and paints each row independently. The drop area never shows an aggregate progress bar; each row has its own. Visual-only atom: no built-in upload; `onFiles` returns native `File[]` for the caller to drive. v2 backlog: image rows render a `Thumbnail` preview keyed off MIME instead of the generic document glyph.',\n styleProperties: [\n // ── Per-state drop-area surface colors ──\n // Note: `dropAreaColors` (not the generic `fieldColors` used by\n // input-text / textarea / etc.) — the dropzone is a drop area, not\n // a text field. Same shape as fieldColors otherwise: bg / border /\n // text per state, gated by `showWhen: { state }`.\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'dropAreaColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'hover' } },\n // Drag-over — overlay style: only the surface bg / border / icon tint change.\n { key: 'dragBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 8%, var(--color-card))', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n { key: 'dragAccent', label: 'Icon Tint', control: 'color', defaultValue: 'var(--color-accent)', section: 'dragState', showWhen: { state: 'drag-over' } },\n // Focus — paints via :focus-within on the label (the hidden input owns focus).\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'dropAreaColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Error — surface tint + dedicated message slot below the drop area.\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'dropAreaColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Message Color', 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 // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'dropAreaColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'dropAreaColors', 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 // ── Shared geometry (always visible) ──\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px' },\n { key: 'borderStyle', label: 'Border Style', control: 'select', defaultValue: 'dashed', options: ['dashed', 'solid', 'dotted'] },\n { key: 'borderWidth', label: 'Border Width', control: 'slider', defaultValue: 1.5, min: 1, max: 4, step: 0.5, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 24, min: 8, max: 48, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 24, min: 8, max: 64, step: 2, unit: 'px' },\n { key: 'minHeight', label: 'Min Height', control: 'number', defaultValue: 160, min: 80, max: 320, step: 10, unit: 'px' },\n { key: 'gap', label: 'Gap', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px' },\n // ── Icon sub-element ──\n { key: 'iconSize', label: 'Icon Size', control: 'number', defaultValue: 40, min: 20, max: 72, step: 2, unit: 'px', section: 'icon' },\n { key: 'iconColor', label: 'Icon Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'icon' },\n // ── Text sub-elements ──\n { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 15, min: 12, max: 22, step: 1, unit: 'px', section: 'text' },\n { key: 'helpSize', label: 'Help Size', control: 'number', defaultValue: 13, min: 10, max: 16, step: 1, unit: 'px', section: 'text' },\n { key: 'helpColor', label: 'Help Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'text' },\n { key: 'allowedTypesSize', label: 'Allowed-types Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'text' },\n { key: 'allowedTypesColor', label: 'Allowed-types Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'text' },\n // ── File-list row knobs (only consumed when `withList: on`) ──\n { key: 'rowBg', label: 'Row Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'fileList' },\n { key: 'rowBorder', label: 'Row Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fileList' },\n { key: 'rowRadius', label: 'Row Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 6, min: 0, max: 16, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingX', label: 'Row Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowPaddingY', label: 'Row Padding Y', control: 'number', defaultValue: 8, min: 2, max: 20, step: 1, unit: 'px', section: 'fileList' },\n { key: 'rowNameColor', label: 'Filename', control: 'color', defaultValue: 'var(--color-text-strong)', section: 'fileList' },\n { key: 'rowMetaColor', label: 'Meta Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n { key: 'rowIconColor', label: 'File Icon', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileList' },\n { key: 'removeIconColor', label: 'Remove Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // Download control. The key does not collide with REAL_CSS_PROPS, so the\n // generic `--uxm-file-upload-{kebab}` fallback already lands on the name\n // the stylesheet reads — no PER_COMPONENT_MAPPING entry needed.\n // No hover knob on purpose: the registry's `state` variants drive the DROP\n // AREA, not the rows, so a row-hover knob would save a value the canvas\n // could never show changing. `--uxm-file-upload-download-icon-hover-color`\n // stays available to consumers, exactly as the remove button's does.\n { key: 'downloadIconColor', label: 'Download Icon', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fileList' },\n // ── File List · Progress ──\n // Per-row progress strip (applied during status=\"uploading\"). It's a\n // single thin colored bar painted directly on the row's bottom edge —\n // no separate track element, so no `progressTrack` knob (the row's\n // own background IS the implicit track at 2px height).\n { key: 'progressFill', label: 'Progress Fill', control: 'color', defaultValue: 'var(--color-accent)', section: 'fileListProgress' },\n { key: 'progressHeight', label: 'Progress Height', control: 'number', defaultValue: 2, min: 1, max: 6, step: 1, unit: 'px', section: 'fileListProgress' },\n // ── File List · Status ──\n // Per-status visual overrides — \"what changes when a row succeeds or\n // fails.\" Grouped together because they're all conditional styling\n // on the same base row, not standalone properties of any one state.\n { key: 'rowDoneBg', label: 'Done Background', control: 'color', defaultValue: 'var(--color-success-bg)', section: 'fileListStatus' },\n { key: 'rowDoneBorderColor', label: 'Done Border', control: 'color', defaultValue: 'var(--color-success-border)', section: 'fileListStatus' },\n { key: 'rowDoneIconColor', label: 'Done Icon', control: 'color', defaultValue: 'var(--color-success-text)', section: 'fileListStatus' },\n { key: 'rowErrorBg', label: 'Error Background', control: 'color', defaultValue: 'var(--color-danger-bg)', section: 'fileListStatus' },\n { key: 'rowErrorBorderColor', label: 'Error Border', control: 'color', defaultValue: 'var(--color-danger-border)', section: 'fileListStatus' },\n { key: 'rowErrorIconColor', label: 'Error Icon', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n { key: 'rowErrorMetaColor', label: 'Error Text', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fileListStatus' },\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'drag-over', label: 'Drag Over' },\n { value: 'focus', label: 'Focus' },\n { value: 'uploading', label: 'Uploading' },\n { value: 'error', label: 'Error' },\n { value: 'disabled', label: 'Disabled' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onFiles', description: 'Fires when the user picks files (via picker or drop). Receives a native `File[]`.', payload: 'File[]' },\n { name: 'onRemove', description: \"Fires when a row's remove button is clicked (only when `showFileList` is on).\", payload: '{ id: string }' },\n { name: 'onDragEnter', description: 'Fires when a drag enters the drop area.', payload: 'DragEvent' },\n { name: 'onDragLeave', description: 'Fires when a drag leaves the drop area.', payload: 'DragEvent' },\n { name: 'onError', description: 'Fires when the caller rejects a drop (e.g. wrong MIME). The atom never fires this on its own — drive it from your validation in `onFiles`.', payload: '{ reason: string }' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'FileUpload',\n props: [\n { name: 'onFiles', type: '(files: File[]) => void', description: 'Receives picked or dropped files.' },\n { name: 'onRemove', type: '(id: string) => void', description: \"Called when a row's remove button is clicked. Only meaningful with `showFileList`.\" },\n { name: 'multiple', type: 'boolean', defaultValue: 'true', description: 'Allow selecting more than one file at a time. Maps to `<input multiple>`.' },\n { name: 'accept', type: 'string', description: 'Standard `<input accept>` filter, e.g. `\"image/*\"` or `\".pdf,.docx\"`. Runtime prop — not a workbench knob.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables click + drop interactions.' },\n { name: 'titleText', type: 'string', defaultValue: '\"Upload a file\"', description: 'Heading inside the drop area.' },\n { name: 'helpText', type: 'string', description: 'Hint line under the title. Defaults to a `multiple`-aware string if omitted.' },\n { name: 'allowedTypesText', type: 'string', description: 'Optional constraint line below the help text — e.g. \"PDF, DOCX · up to 10 MB\". Caller-controlled copy: the atom never invents it and never enforces it. Keep it in sync with the `accept` filter and your `onFiles` validation. If omitted, no slot renders.' },\n { name: 'error', type: 'string', description: 'Page-level error message (e.g. \"Connection lost\"). Paints the drop area in the `error` state and renders the message below it. Named `error` to match the rest of the input family. Distinct from per-file errors — set `status: \"error\"` + `errorMessage` on a `FileUploadFileMeta` for single-file failures.' },\n { name: 'errorMessage', type: 'string', description: 'Deprecated alias for `error` (back-compat); `error` wins when both are set.' },\n { name: 'files', type: 'FileUploadFileMeta[]', description: \"Files to display in the inline list under the drop area. Each row: `{ id, name, size, status?, progress?, errorMessage? }`. `status` is `queued \| uploading \| done \| error` and drives row rendering independently. List is always rendered when `files.length > 0` — to keep the list elsewhere on the page, just don't pass `files` to the atom.\" },\n { name: 'state', type: '\"default\" \| \"drag-over\" \| \"uploading\" \| \"error\"', description: 'Drop-area visual state. Caller-controlled — the atom never auto-derives this from per-file statuses. Set `\"uploading\"` for batch lockouts / pre-file validation / indeterminate uploads; the help text swaps to \"Uploading…\" and `aria-busy` is applied. Per-file states (queued/uploading/done/error) live on each `FileUploadFileMeta.status` and are orthogonal to this.' },\n { name: 'iconGlyph', type: 'string', defaultValue: '\"cloud-arrow-up\"', description: 'Override the drop-area icon glyph.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/input-text.cjs CHANGED Viewed

@@ -80,7 +80,7 @@ const inputTextDef = {
     { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
   ],
   api: {
-    importPath: "@viax/uxm/ui",
+    importPath: "@viax.io/uxm/ui",
     importNames: "TextInput",
     props: [
       { name: "value", type: "string", description: "Current value (controlled)." },

package/dist/studio/lib/registry/inputs/input-text.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/input-text.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const inputTextDef: ComponentDef = {\n id: 'input-text',\n name: 'Text Input',\n category: 'Inputs',\n description: 'Standard text input field with label. State knobs cover default / hover / focus / disabled / error — error replaces the previous standalone `Input with Error` atom (one tone surface, one shape surface).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Label + Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Label theming AND label position live on FormField. This atom\n // is just the input element — no label rendered, no labelPosition\n // variant. Wrap with `<FormField>` when you want a label.\n // Previously had `labelColor` knob + shared `labelPositionVariant`\n // here; both only affected the workbench preview's hand-rolled\n // label and have been removed as part of the consolidation pass.\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires after the user commits a change (blur or Enter).', payload: '{ value: string }' },\n { name: 'onInput', description: 'Fires on every keystroke. High-frequency — use for live validation, not for save.', payload: '{ value: string }' },\n { name: 'onFocus', description: 'Fires when the field receives focus (click or Tab).', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax/uxm/ui',\n importNames: 'TextInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler. Read `e.target.value`.' },\n { name: 'placeholder', type: 'string', description: 'Placeholder shown when empty.' },\n { name: 'type', type: '\"text\" \| \"email\" \| \"tel\" \| \"url\" \| \"password\" \| \"search\"', defaultValue: '\"text\"', description: 'Native input type — affects keyboard and validation hints on mobile.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a clear (✕) button at the trailing edge when the field has content. On by default; the ✕ self-clears and fires `onChange` with \"\", so no wiring is needed for controlled fields. Pass `false` to opt out.' },\n { name: 'onClear', type: '() => void', description: 'Optional override for the clear action. By default the field clears itself (and notifies via `onChange`); pass `onClear` only for custom reset logic beyond emptying the value.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (aria-label, name, autoComplete, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../src/studio/lib/registry/inputs/input-text.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const inputTextDef: ComponentDef = {\n id: 'input-text',\n name: 'Text Input',\n category: 'Inputs',\n description: 'Standard text input field with label. State knobs cover default / hover / focus / disabled / error — error replaces the previous standalone `Input with Error` atom (one tone surface, one shape surface).',\n styleProperties: [\n // Default\n { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'default' } },\n { key: 'color', label: 'Text', control: 'color', defaultValue: 'var(--color-text)', section: 'fieldColors', showWhen: { state: 'default' } },\n // Hover\n { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'hover' } },\n { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'hover' } },\n // Focus\n { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'fieldColors', showWhen: { state: 'focus' } },\n { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n // Disabled\n { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledColor', label: 'Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'fieldColors', showWhen: { state: 'disabled' } },\n { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.6, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n // Error\n { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'fieldColors', showWhen: { state: 'error' } },\n { key: 'errorColor', label: 'Label + Message', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'errorState', showWhen: { state: 'error' } },\n { key: 'errorMessageSize', label: 'Message Size', control: 'number', defaultValue: 12, min: 10, max: 16, step: 1, unit: 'px', section: 'errorState', showWhen: { state: 'error' } },\n // Shared\n { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 10, min: 4, max: 20, step: 2, unit: 'px' },\n { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 14, min: 10, max: 20, step: 1, unit: 'px' },\n // Label theming AND label position live on FormField. This atom\n // is just the input element — no label rendered, no labelPosition\n // variant. Wrap with `<FormField>` when you want a label.\n // Previously had `labelColor` knob + shared `labelPositionVariant`\n // here; both only affected the workbench preview's hand-rolled\n // label and have been removed as part of the consolidation pass.\n ],\n layoutVariants: [\n {\n key: 'state',\n label: 'State',\n options: [\n { value: 'default', label: 'Default' },\n { value: 'hover', label: 'Hover' },\n { value: 'focus', label: 'Focus' },\n { value: 'disabled', label: 'Disabled' },\n { value: 'error', label: 'Error' },\n ],\n defaultValue: 'default',\n },\n ],\n events: [\n { name: 'onChange', description: 'Fires after the user commits a change (blur or Enter).', payload: '{ value: string }' },\n { name: 'onInput', description: 'Fires on every keystroke. High-frequency — use for live validation, not for save.', payload: '{ value: string }' },\n { name: 'onFocus', description: 'Fires when the field receives focus (click or Tab).', payload: 'FocusEvent' },\n { name: 'onBlur', description: 'Fires when the field loses focus.', payload: 'FocusEvent' },\n ],\n api: {\n importPath: '@viax.io/uxm/ui',\n importNames: 'TextInput',\n props: [\n { name: 'value', type: 'string', description: 'Current value (controlled).' },\n { name: 'onChange', type: '(e: ChangeEvent<HTMLInputElement>) => void', description: 'Change handler. Read `e.target.value`.' },\n { name: 'placeholder', type: 'string', description: 'Placeholder shown when empty.' },\n { name: 'type', type: '\"text\" \| \"email\" \| \"tel\" \| \"url\" \| \"password\" \| \"search\"', defaultValue: '\"text\"', description: 'Native input type — affects keyboard and validation hints on mobile.' },\n { name: 'disabled', type: 'boolean', defaultValue: 'false', description: 'Disables the input.' },\n { name: 'clearable', type: 'boolean', defaultValue: 'true', description: 'Show a clear (✕) button at the trailing edge when the field has content. On by default; the ✕ self-clears and fires `onChange` with \"\", so no wiring is needed for controlled fields. Pass `false` to opt out.' },\n { name: 'onClear', type: '() => void', description: 'Optional override for the clear action. By default the field clears itself (and notifies via `onChange`); pass `onClear` only for custom reset logic beyond emptying the value.' },\n { name: '...rest', type: 'InputHTMLAttributes<HTMLInputElement>', description: 'All other native input attributes (aria-label, name, autoComplete, etc.) pass through.' },\n ],\n },\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/inputs/input-text.js CHANGED Viewed

@@ -57,7 +57,7 @@ const inputTextDef = {
     { name: "onBlur", description: "Fires when the field loses focus.", payload: "FocusEvent" }
   ],
   api: {
-    importPath: "@viax/uxm/ui",
+    importPath: "@viax.io/uxm/ui",
     importNames: "TextInput",
     props: [
       { name: "value", type: "string", description: "Current value (controlled)." },