@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/composite/pill-select.cjs

@@ -0,0 +1,120 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pill_select_exports = {};
+__export(pill_select_exports, {
+  pillSelectDef: () => pillSelectDef
+});
+module.exports = __toCommonJS(pill_select_exports);
+const pillSelectDef = {
+  id: "pill-select",
+  name: "Pill Select",
+  category: "Composite",
+  description: `Multi-select tag input. Selected values render as <Chip mode="input"> (chip theming lives on the Chip atom's registry). This shell owns the field shape and state visuals \u2014 default / hover / focus / disabled \u2014 matching the input-text / input-with-icon family.`,
+  styleProperties: [
+    // Field colors (per state). The visible field is `.uxm-pill-select__
+    // field` — an inner div on the layout-only `.uxm-pill-select` root.
+    // `backgroundColor` and `borderColor` are REAL_CSS_PROPS so they're
+    // routed through `--uxm-pill-select-{bg,border-color}` via
+    // PER_COMPONENT_MAPPING in save/route.ts (otherwise saves would land
+    // on the layout wrapper and silently no-op). The per-state keys
+    // (hoverBg, focusBorder, …) are custom names that route through the
+    // kebab fallback path correctly.
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "default" } },
+    { key: "placeholderColor", label: "Placeholder", control: "color", defaultValue: "var(--color-text-muted)", section: "colors", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "hover" } },
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled defaults intentionally match the default state — the
+    // visible "disabled" signal comes from the chips inside (which
+    // receive the forwarded `disabled` prop and render the Chip atom's
+    // own muted palette) plus `cursor: not-allowed` and the field
+    // being skipped in the tab order. Stacking an opacity dim on the
+    // wrapper would double-dim the already-muted chips and ruin
+    // readability, so opacity defaults to 1 — exposed as a knob if the
+    // brand really wants a dimmed disabled treatment.
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 1, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error state — field-style atom (constrained picker), so it gets
+    // the standard error surface: red border + bg on the inner `__field`,
+    // plus the shared message knobs. errorBg / errorBorder paint the
+    // field; errorColor + errorMessageSize theme the `__error-message`
+    // below it. The latter two share keys with the rest of the input
+    // family so the editor's "Match in N Inputs" sync links them. All
+    // four kebab through the fallback path to `--uxm-pill-select-error-*`
+    // (declared on the root, cascade down to `__field`). `colors` section
+    // for bg/border matches the other per-state field colors above.
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "colors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shape (universal, no showWhen). Keys `radius` and `chipGap` are
+    // deliberately NOT named `borderRadius` / `gap` (which would land
+    // in REAL_CSS_PROPS and emit plain CSS on the root); the field-
+    // radius lives on the inner `__field`, and `chipGap` is the field's
+    // flex gap. `paddingX` / `paddingY` ARE REAL_CSS_PROPS — routed via
+    // PER_COMPONENT_MAPPING so they land on `__field`, not the root.
+    { key: "radius", label: "Field Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "chipGap", label: "Chip Gap", control: "number", defaultValue: 6, min: 2, max: 12, step: 2, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 10, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 20, step: 2, unit: "px" }
+    // Label rendering is the consumer's responsibility — the atom
+    // doesn't own a `<label>` element. Preview-only label knobs
+    // (labelColor, labelSize) were removed pending a project-wide
+    // decision on label theming has now landed: FormField is the sole
+    // owner. Wrap pill-select in `<FormField>` to add a label; this
+    // atom is just the multi-select field. labelPosition variant was
+    // removed here for the same reason — labels are FormField's concern.
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    },
+    // Chip layout variant — `inside` keeps chips inline within the
+    // trigger (tag-input pattern); `below` puts them in a separate row
+    // beneath the trigger (filter-bar pattern). Default `below` —
+    // modern default, trigger stays a constant height. Consumers
+    // wanting the classic compact "To:" tag-input switch to `inside`.
+    {
+      key: "chipsPosition",
+      label: "Chips Position",
+      options: [
+        { value: "below", label: "Below" },
+        { value: "inside", label: "Inside" }
+      ],
+      defaultValue: "below"
+    }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pillSelectDef
+});
+//# sourceMappingURL=pill-select.cjs.map

package/dist/studio/lib/registry/composite/pill-select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/pill-select.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const pillSelectDef: ComponentDef = {\n  id: 'pill-select',\n  name: 'Pill Select',\n  category: 'Composite',\n  description: \"Multi-select tag input. Selected values render as <Chip mode=\\\"input\\\"> (chip theming lives on the Chip atom's registry). This shell owns the field shape and state visuals — default / hover / focus / disabled — matching the input-text / input-with-icon family.\",\n  styleProperties: [\n    // Field colors (per state). The visible field is `.uxm-pill-select__\n    // field` — an inner div on the layout-only `.uxm-pill-select` root.\n    // `backgroundColor` and `borderColor` are REAL_CSS_PROPS so they're\n    // routed through `--uxm-pill-select-{bg,border-color}` via\n    // PER_COMPONENT_MAPPING in save/route.ts (otherwise saves would land\n    // on the layout wrapper and silently no-op). The per-state keys\n    // (hoverBg, focusBorder, …) are custom names that route through the\n    // kebab fallback path correctly.\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'placeholderColor', label: 'Placeholder', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'hover' } },\n    { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors', showWhen: { state: 'hover' } },\n    { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled defaults intentionally match the default state — the\n    // visible \"disabled\" signal comes from the chips inside (which\n    // receive the forwarded `disabled` prop and render the Chip atom's\n    // own muted palette) plus `cursor: not-allowed` and the field\n    // being skipped in the tab order. Stacking an opacity dim on the\n    // wrapper would double-dim the already-muted chips and ruin\n    // readability, so opacity defaults to 1 — exposed as a knob if the\n    // brand really wants a dimmed disabled treatment.\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'disabled' } },\n    { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors', showWhen: { state: 'disabled' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 1, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Error state — field-style atom (constrained picker), so it gets\n    // the standard error surface: red border + bg on the inner `__field`,\n    // plus the shared message knobs. errorBg / errorBorder paint the\n    // field; errorColor + errorMessageSize theme the `__error-message`\n    // below it. The latter two share keys with the rest of the input\n    // family so the editor's \"Match in N Inputs\" sync links them. All\n    // four kebab through the fallback path to `--uxm-pill-select-error-*`\n    // (declared on the root, cascade down to `__field`). `colors` section\n    // for bg/border matches the other per-state field colors above.\n    { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'error' } },\n    { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', 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    // Shape (universal, no showWhen). Keys `radius` and `chipGap` are\n    // deliberately NOT named `borderRadius` / `gap` (which would land\n    // in REAL_CSS_PROPS and emit plain CSS on the root); the field-\n    // radius lives on the inner `__field`, and `chipGap` is the field's\n    // flex gap. `paddingX` / `paddingY` ARE REAL_CSS_PROPS — routed via\n    // PER_COMPONENT_MAPPING so they land on `__field`, not the root.\n    { key: 'radius', label: 'Field Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'chipGap', label: 'Chip Gap', control: 'number', defaultValue: 6, min: 2, max: 12, step: 2, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 4, max: 20, step: 2, unit: 'px' },\n    // Label rendering is the consumer's responsibility — the atom\n    // doesn't own a `<label>` element. Preview-only label knobs\n    // (labelColor, labelSize) were removed pending a project-wide\n    // decision on label theming has now landed: FormField is the sole\n    // owner. Wrap pill-select in `<FormField>` to add a label; this\n    // atom is just the multi-select field. labelPosition variant was\n    // removed here for the same reason — labels are FormField's concern.\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    // Chip layout variant — `inside` keeps chips inline within the\n    // trigger (tag-input pattern); `below` puts them in a separate row\n    // beneath the trigger (filter-bar pattern). Default `below` —\n    // modern default, trigger stays a constant height. Consumers\n    // wanting the classic compact \"To:\" tag-input switch to `inside`.\n    {\n      key: 'chipsPosition',\n      label: 'Chips Position',\n      options: [\n        { value: 'below', label: 'Below' },\n        { value: 'inside', label: 'Inside' },\n      ],\n      defaultValue: 'below',\n    },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/pill-select.d.ts

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

package/dist/studio/lib/registry/composite/pill-select.d.ts.map

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

package/dist/studio/lib/registry/composite/pill-select.js

@@ -0,0 +1,96 @@
+const pillSelectDef = {
+  id: "pill-select",
+  name: "Pill Select",
+  category: "Composite",
+  description: `Multi-select tag input. Selected values render as <Chip mode="input"> (chip theming lives on the Chip atom's registry). This shell owns the field shape and state visuals \u2014 default / hover / focus / disabled \u2014 matching the input-text / input-with-icon family.`,
+  styleProperties: [
+    // Field colors (per state). The visible field is `.uxm-pill-select__
+    // field` — an inner div on the layout-only `.uxm-pill-select` root.
+    // `backgroundColor` and `borderColor` are REAL_CSS_PROPS so they're
+    // routed through `--uxm-pill-select-{bg,border-color}` via
+    // PER_COMPONENT_MAPPING in save/route.ts (otherwise saves would land
+    // on the layout wrapper and silently no-op). The per-state keys
+    // (hoverBg, focusBorder, …) are custom names that route through the
+    // kebab fallback path correctly.
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "default" } },
+    { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "default" } },
+    { key: "placeholderColor", label: "Placeholder", control: "color", defaultValue: "var(--color-text-muted)", section: "colors", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "hover" } },
+    { key: "hoverBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "hover" } },
+    { key: "focusBorder", label: "Border", control: "color", defaultValue: "var(--color-accent)", section: "colors", showWhen: { state: "focus" } },
+    { key: "focusRing", label: "Ring", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    // Disabled defaults intentionally match the default state — the
+    // visible "disabled" signal comes from the chips inside (which
+    // receive the forwarded `disabled` prop and render the Chip atom's
+    // own muted palette) plus `cursor: not-allowed` and the field
+    // being skipped in the tab order. Stacking an opacity dim on the
+    // wrapper would double-dim the already-muted chips and ruin
+    // readability, so opacity defaults to 1 — exposed as a knob if the
+    // brand really wants a dimmed disabled treatment.
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "disabled" } },
+    { key: "disabledBorder", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors", showWhen: { state: "disabled" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 1, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // Error state — field-style atom (constrained picker), so it gets
+    // the standard error surface: red border + bg on the inner `__field`,
+    // plus the shared message knobs. errorBg / errorBorder paint the
+    // field; errorColor + errorMessageSize theme the `__error-message`
+    // below it. The latter two share keys with the rest of the input
+    // family so the editor's "Match in N Inputs" sync links them. All
+    // four kebab through the fallback path to `--uxm-pill-select-error-*`
+    // (declared on the root, cascade down to `__field`). `colors` section
+    // for bg/border matches the other per-state field colors above.
+    { key: "errorBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors", showWhen: { state: "error" } },
+    { key: "errorBorder", label: "Border", control: "color", defaultValue: "var(--color-danger-text)", section: "colors", showWhen: { state: "error" } },
+    { key: "errorColor", label: "Label + Message", control: "color", defaultValue: "var(--color-danger-text)", section: "errorState", showWhen: { state: "error" } },
+    { key: "errorMessageSize", label: "Message Size", control: "number", defaultValue: 12, min: 10, max: 16, step: 1, unit: "px", section: "errorState", showWhen: { state: "error" } },
+    // Shape (universal, no showWhen). Keys `radius` and `chipGap` are
+    // deliberately NOT named `borderRadius` / `gap` (which would land
+    // in REAL_CSS_PROPS and emit plain CSS on the root); the field-
+    // radius lives on the inner `__field`, and `chipGap` is the field's
+    // flex gap. `paddingX` / `paddingY` ARE REAL_CSS_PROPS — routed via
+    // PER_COMPONENT_MAPPING so they land on `__field`, not the root.
+    { key: "radius", label: "Field Radius", control: "slider", defaultValue: 8, min: 0, max: 16, step: 1, unit: "px" },
+    { key: "chipGap", label: "Chip Gap", control: "number", defaultValue: 6, min: 2, max: 12, step: 2, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 10, min: 4, max: 24, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 20, step: 2, unit: "px" }
+    // Label rendering is the consumer's responsibility — the atom
+    // doesn't own a `<label>` element. Preview-only label knobs
+    // (labelColor, labelSize) were removed pending a project-wide
+    // decision on label theming has now landed: FormField is the sole
+    // owner. Wrap pill-select in `<FormField>` to add a label; this
+    // atom is just the multi-select field. labelPosition variant was
+    // removed here for the same reason — labels are FormField's concern.
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "disabled", label: "Disabled" },
+        { value: "error", label: "Error" }
+      ],
+      defaultValue: "default"
+    },
+    // Chip layout variant — `inside` keeps chips inline within the
+    // trigger (tag-input pattern); `below` puts them in a separate row
+    // beneath the trigger (filter-bar pattern). Default `below` —
+    // modern default, trigger stays a constant height. Consumers
+    // wanting the classic compact "To:" tag-input switch to `inside`.
+    {
+      key: "chipsPosition",
+      label: "Chips Position",
+      options: [
+        { value: "below", label: "Below" },
+        { value: "inside", label: "Inside" }
+      ],
+      defaultValue: "below"
+    }
+  ]
+};
+export {
+  pillSelectDef
+};
+//# sourceMappingURL=pill-select.js.map

package/dist/studio/lib/registry/composite/pill-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/pill-select.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const pillSelectDef: ComponentDef = {\n  id: 'pill-select',\n  name: 'Pill Select',\n  category: 'Composite',\n  description: \"Multi-select tag input. Selected values render as <Chip mode=\\\"input\\\"> (chip theming lives on the Chip atom's registry). This shell owns the field shape and state visuals — default / hover / focus / disabled — matching the input-text / input-with-icon family.\",\n  styleProperties: [\n    // Field colors (per state). The visible field is `.uxm-pill-select__\n    // field` — an inner div on the layout-only `.uxm-pill-select` root.\n    // `backgroundColor` and `borderColor` are REAL_CSS_PROPS so they're\n    // routed through `--uxm-pill-select-{bg,border-color}` via\n    // PER_COMPONENT_MAPPING in save/route.ts (otherwise saves would land\n    // on the layout wrapper and silently no-op). The per-state keys\n    // (hoverBg, focusBorder, …) are custom names that route through the\n    // kebab fallback path correctly.\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'placeholderColor', label: 'Placeholder', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'hover' } },\n    { key: 'hoverBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors', showWhen: { state: 'hover' } },\n    { key: 'focusBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-accent)', section: 'colors', showWhen: { state: 'focus' } },\n    { key: 'focusRing', label: 'Ring', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    // Disabled defaults intentionally match the default state — the\n    // visible \"disabled\" signal comes from the chips inside (which\n    // receive the forwarded `disabled` prop and render the Chip atom's\n    // own muted palette) plus `cursor: not-allowed` and the field\n    // being skipped in the tab order. Stacking an opacity dim on the\n    // wrapper would double-dim the already-muted chips and ruin\n    // readability, so opacity defaults to 1 — exposed as a knob if the\n    // brand really wants a dimmed disabled treatment.\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'disabled' } },\n    { key: 'disabledBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors', showWhen: { state: 'disabled' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 1, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // Error state — field-style atom (constrained picker), so it gets\n    // the standard error surface: red border + bg on the inner `__field`,\n    // plus the shared message knobs. errorBg / errorBorder paint the\n    // field; errorColor + errorMessageSize theme the `__error-message`\n    // below it. The latter two share keys with the rest of the input\n    // family so the editor's \"Match in N Inputs\" sync links them. All\n    // four kebab through the fallback path to `--uxm-pill-select-error-*`\n    // (declared on the root, cascade down to `__field`). `colors` section\n    // for bg/border matches the other per-state field colors above.\n    { key: 'errorBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors', showWhen: { state: 'error' } },\n    { key: 'errorBorder', label: 'Border', control: 'color', defaultValue: 'var(--color-danger-text)', section: 'colors', 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    // Shape (universal, no showWhen). Keys `radius` and `chipGap` are\n    // deliberately NOT named `borderRadius` / `gap` (which would land\n    // in REAL_CSS_PROPS and emit plain CSS on the root); the field-\n    // radius lives on the inner `__field`, and `chipGap` is the field's\n    // flex gap. `paddingX` / `paddingY` ARE REAL_CSS_PROPS — routed via\n    // PER_COMPONENT_MAPPING so they land on `__field`, not the root.\n    { key: 'radius', label: 'Field Radius', control: 'slider', defaultValue: 8, min: 0, max: 16, step: 1, unit: 'px' },\n    { key: 'chipGap', label: 'Chip Gap', control: 'number', defaultValue: 6, min: 2, max: 12, step: 2, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 10, min: 4, max: 24, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 4, max: 20, step: 2, unit: 'px' },\n    // Label rendering is the consumer's responsibility — the atom\n    // doesn't own a `<label>` element. Preview-only label knobs\n    // (labelColor, labelSize) were removed pending a project-wide\n    // decision on label theming has now landed: FormField is the sole\n    // owner. Wrap pill-select in `<FormField>` to add a label; this\n    // atom is just the multi-select field. labelPosition variant was\n    // removed here for the same reason — labels are FormField's concern.\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    // Chip layout variant — `inside` keeps chips inline within the\n    // trigger (tag-input pattern); `below` puts them in a separate row\n    // beneath the trigger (filter-bar pattern). Default `below` —\n    // modern default, trigger stays a constant height. Consumers\n    // wanting the classic compact \"To:\" tag-input switch to `inside`.\n    {\n      key: 'chipsPosition',\n      label: 'Chips Position',\n      options: [\n        { value: 'below', label: 'Below' },\n        { value: 'inside', label: 'Inside' },\n      ],\n      defaultValue: 'below',\n    },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/property-field.cjs

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var property_field_exports = {};
+__export(property_field_exports, {
+  propertyFieldDef: () => propertyFieldDef
+});
+module.exports = __toCommonJS(property_field_exports);
+const propertyFieldDef = {
+  id: "property-field",
+  name: "Property Field",
+  category: "Display",
+  description: "Single label + monospace value pair used for metadata readouts. The grid layout that arranges multiple PropertyFields is a separate atom (`property-grid`).",
+  styleProperties: [
+    { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+    { key: "labelSize", label: "Label Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "valueColor", label: "Value Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+    { key: "valueSize", label: "Value Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+    { key: "gap", label: "Label/Value Gap", control: "number", defaultValue: 4, min: 2, max: 12, step: 1, unit: "px" }
+  ],
+  layoutVariants: [
+    // Label case + value font as guided presets. The preview maps each to the
+    // `--uxm-property-field-label-transform` / `-label-tracking` / `-value-font`
+    // vars: uppercase carries 0.06em tracking (the "eyebrow" look), sentence
+    // drops both to none/normal; monospace is the data look, proportional is
+    // the body typeface (for prose grids). Defaults reproduce today.
+    {
+      key: "labelCase",
+      label: "Label Case",
+      options: [
+        { value: "uppercase", label: "Uppercase" },
+        { value: "sentence", label: "Sentence" }
+      ],
+      defaultValue: "uppercase"
+    },
+    {
+      key: "valueFont",
+      label: "Value Font",
+      options: [
+        { value: "monospace", label: "Monospace" },
+        { value: "proportional", label: "Proportional" }
+      ],
+      defaultValue: "monospace"
+    }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  propertyFieldDef
+});
+//# sourceMappingURL=property-field.cjs.map

package/dist/studio/lib/registry/composite/property-field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/property-field.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const propertyFieldDef: ComponentDef = {\n  id: 'property-field',\n  name: 'Property Field',\n  category: 'Display',\n  description: 'Single label + monospace value pair used for metadata readouts. The grid layout that arranges multiple PropertyFields is a separate atom (`property-grid`).',\n  styleProperties: [\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n    { key: 'labelSize', label: 'Label Size', control: 'number', defaultValue: 10, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n    { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Label/Value Gap', control: 'number', defaultValue: 4, min: 2, max: 12, step: 1, unit: 'px' },\n  ],\n  layoutVariants: [\n    // Label case + value font as guided presets. The preview maps each to the\n    // `--uxm-property-field-label-transform` / `-label-tracking` / `-value-font`\n    // vars: uppercase carries 0.06em tracking (the \"eyebrow\" look), sentence\n    // drops both to none/normal; monospace is the data look, proportional is\n    // the body typeface (for prose grids). Defaults reproduce today.\n    {\n      key: 'labelCase',\n      label: 'Label Case',\n      options: [\n        { value: 'uppercase', label: 'Uppercase' },\n        { value: 'sentence', label: 'Sentence' },\n      ],\n      defaultValue: 'uppercase',\n    },\n    {\n      key: 'valueFont',\n      label: 'Value Font',\n      options: [\n        { value: 'monospace', label: 'Monospace' },\n        { value: 'proportional', label: 'Proportional' },\n      ],\n      defaultValue: 'monospace',\n    },\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,IACxH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACnH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IAClH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,OAAO,OAAO,mBAAmB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACnH;AAAA,EACA,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,QACzC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,MACzC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,QACzC,EAAE,OAAO,gBAAgB,OAAO,eAAe;AAAA,MACjD;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}

package/dist/studio/lib/registry/composite/property-field.d.ts

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

package/dist/studio/lib/registry/composite/property-field.d.ts.map

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

package/dist/studio/lib/registry/composite/property-field.js

@@ -0,0 +1,42 @@
+const propertyFieldDef = {
+  id: "property-field",
+  name: "Property Field",
+  category: "Display",
+  description: "Single label + monospace value pair used for metadata readouts. The grid layout that arranges multiple PropertyFields is a separate atom (`property-grid`).",
+  styleProperties: [
+    { key: "labelColor", label: "Label Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+    { key: "labelSize", label: "Label Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "valueColor", label: "Value Color", control: "color", defaultValue: "var(--color-text)", section: "colors" },
+    { key: "valueSize", label: "Value Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px" },
+    { key: "gap", label: "Label/Value Gap", control: "number", defaultValue: 4, min: 2, max: 12, step: 1, unit: "px" }
+  ],
+  layoutVariants: [
+    // Label case + value font as guided presets. The preview maps each to the
+    // `--uxm-property-field-label-transform` / `-label-tracking` / `-value-font`
+    // vars: uppercase carries 0.06em tracking (the "eyebrow" look), sentence
+    // drops both to none/normal; monospace is the data look, proportional is
+    // the body typeface (for prose grids). Defaults reproduce today.
+    {
+      key: "labelCase",
+      label: "Label Case",
+      options: [
+        { value: "uppercase", label: "Uppercase" },
+        { value: "sentence", label: "Sentence" }
+      ],
+      defaultValue: "uppercase"
+    },
+    {
+      key: "valueFont",
+      label: "Value Font",
+      options: [
+        { value: "monospace", label: "Monospace" },
+        { value: "proportional", label: "Proportional" }
+      ],
+      defaultValue: "monospace"
+    }
+  ]
+};
+export {
+  propertyFieldDef
+};
+//# sourceMappingURL=property-field.js.map

package/dist/studio/lib/registry/composite/property-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/property-field.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const propertyFieldDef: ComponentDef = {\n  id: 'property-field',\n  name: 'Property Field',\n  category: 'Display',\n  description: 'Single label + monospace value pair used for metadata readouts. The grid layout that arranges multiple PropertyFields is a separate atom (`property-grid`).',\n  styleProperties: [\n    { key: 'labelColor', label: 'Label Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n    { key: 'labelSize', label: 'Label Size', control: 'number', defaultValue: 10, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'valueColor', label: 'Value Color', control: 'color', defaultValue: 'var(--color-text)', section: 'colors' },\n    { key: 'valueSize', label: 'Value Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Label/Value Gap', control: 'number', defaultValue: 4, min: 2, max: 12, step: 1, unit: 'px' },\n  ],\n  layoutVariants: [\n    // Label case + value font as guided presets. The preview maps each to the\n    // `--uxm-property-field-label-transform` / `-label-tracking` / `-value-font`\n    // vars: uppercase carries 0.06em tracking (the \"eyebrow\" look), sentence\n    // drops both to none/normal; monospace is the data look, proportional is\n    // the body typeface (for prose grids). Defaults reproduce today.\n    {\n      key: 'labelCase',\n      label: 'Label Case',\n      options: [\n        { value: 'uppercase', label: 'Uppercase' },\n        { value: 'sentence', label: 'Sentence' },\n      ],\n      defaultValue: 'uppercase',\n    },\n    {\n      key: 'valueFont',\n      label: 'Value Font',\n      options: [\n        { value: 'monospace', label: 'Monospace' },\n        { value: 'proportional', label: 'Proportional' },\n      ],\n      defaultValue: 'monospace',\n    },\n  ],\n};\n"],"mappings":"AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,IACxH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACnH,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IAClH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,OAAO,OAAO,mBAAmB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACnH;AAAA,EACA,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,QACzC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,MACzC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,QACzC,EAAE,OAAO,gBAAgB,OAAO,eAAe;AAAA,MACjD;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}

package/dist/studio/lib/registry/composite/property-grid.cjs

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var property_grid_exports = {};
+__export(property_grid_exports, {
+  propertyGridDef: () => propertyGridDef
+});
+module.exports = __toCommonJS(property_grid_exports);
+const propertyGridDef = {
+  id: "property-grid",
+  name: "Property Grid",
+  category: "Display",
+  description: "Auto-fill grid wrapper that lays out PropertyField pairs. Layout-only \u2014 chip / field theming flows through the PropertyField atom's own registry.",
+  styleProperties: [
+    { key: "rowGap", label: "Row Gap", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px" },
+    { key: "columnGap", label: "Column Gap", control: "number", defaultValue: 32, min: 12, max: 64, step: 4, unit: "px" }
+  ],
+  layoutVariants: []
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  propertyGridDef
+});
+//# sourceMappingURL=property-grid.cjs.map

package/dist/studio/lib/registry/composite/property-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/property-grid.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const propertyGridDef: ComponentDef = {\n  id: 'property-grid',\n  name: 'Property Grid',\n  category: 'Display',\n  description: \"Auto-fill grid wrapper that lays out PropertyField pairs. Layout-only — chip / field theming flows through the PropertyField atom's own registry.\",\n  styleProperties: [\n    { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 2, unit: 'px' },\n    { key: 'columnGap', label: 'Column Gap', control: 'number', defaultValue: 32, min: 12, max: 64, step: 4, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,kBAAgC;AAAA,EAC3C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,UAAU,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC7G,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACtH;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}

package/dist/studio/lib/registry/composite/property-grid.d.ts

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

package/dist/studio/lib/registry/composite/property-grid.d.ts.map

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

package/dist/studio/lib/registry/composite/property-grid.js

@@ -0,0 +1,15 @@
+const propertyGridDef = {
+  id: "property-grid",
+  name: "Property Grid",
+  category: "Display",
+  description: "Auto-fill grid wrapper that lays out PropertyField pairs. Layout-only \u2014 chip / field theming flows through the PropertyField atom's own registry.",
+  styleProperties: [
+    { key: "rowGap", label: "Row Gap", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px" },
+    { key: "columnGap", label: "Column Gap", control: "number", defaultValue: 32, min: 12, max: 64, step: 4, unit: "px" }
+  ],
+  layoutVariants: []
+};
+export {
+  propertyGridDef
+};
+//# sourceMappingURL=property-grid.js.map

package/dist/studio/lib/registry/composite/property-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/property-grid.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const propertyGridDef: ComponentDef = {\n  id: 'property-grid',\n  name: 'Property Grid',\n  category: 'Display',\n  description: \"Auto-fill grid wrapper that lays out PropertyField pairs. Layout-only — chip / field theming flows through the PropertyField atom's own registry.\",\n  styleProperties: [\n    { key: 'rowGap', label: 'Row Gap', control: 'number', defaultValue: 16, min: 4, max: 32, step: 2, unit: 'px' },\n    { key: 'columnGap', label: 'Column Gap', control: 'number', defaultValue: 32, min: 12, max: 64, step: 4, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":"AAEO,MAAM,kBAAgC;AAAA,EAC3C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,UAAU,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC7G,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EACtH;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}

package/dist/studio/lib/registry/composite/section-header.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var section_header_exports = {};
+__export(section_header_exports, {
+  sectionHeaderDef: () => sectionHeaderDef
+});
+module.exports = __toCommonJS(section_header_exports);
+const sectionHeaderDef = {
+  id: "section-header",
+  name: "Section Header",
+  category: "Display",
+  description: 'Small uppercase label for grouping fields in dense settings panels \u2014 the "VARIANT" / "COLORS" / "STYLE" labels above grouped form rows. Distinct from PageHeader (page-level) and DetailSection (bordered card).',
+  styleProperties: [
+    { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "colors" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "titleWeight", label: "Title Weight", control: "select", defaultValue: "600", options: ["500", "600", "700"] },
+    { key: "subtitleColor", label: "Subtitle Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+    { key: "subtitleSize", label: "Subtitle Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "gap", label: "Title-Subtitle Gap", control: "number", defaultValue: 2, min: 0, max: 12, step: 1, unit: "px" },
+    { key: "marginBottom", label: "Margin Bottom", control: "number", defaultValue: 12, min: 0, max: 32, step: 2, unit: "px" }
+  ],
+  layoutVariants: []
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sectionHeaderDef
+});
+//# sourceMappingURL=section-header.cjs.map

package/dist/studio/lib/registry/composite/section-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/section-header.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sectionHeaderDef: ComponentDef = {\n  id: 'section-header',\n  name: 'Section Header',\n  category: 'Display',\n  description: 'Small uppercase label for grouping fields in dense settings panels — the \"VARIANT\" / \"COLORS\" / \"STYLE\" labels above grouped form rows. Distinct from PageHeader (page-level) and DetailSection (bordered card).',\n  styleProperties: [\n    { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'colors' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'titleWeight', label: 'Title Weight', control: 'select', defaultValue: '600', options: ['500', '600', '700'] },\n    { key: 'subtitleColor', label: 'Subtitle Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n    { key: 'subtitleSize', label: 'Subtitle Size', control: 'number', defaultValue: 10, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Title-Subtitle Gap', control: 'number', defaultValue: 2, min: 0, max: 12, step: 1, unit: 'px' },\n    { key: 'marginBottom', label: 'Margin Bottom', control: 'number', defaultValue: 12, min: 0, max: 32, step: 2, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACnH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,OAAO,SAAS,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,IACpH,EAAE,KAAK,iBAAiB,OAAO,kBAAkB,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,IAC9H,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,OAAO,OAAO,sBAAsB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EAC3H;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}

package/dist/studio/lib/registry/composite/section-header.d.ts

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

package/dist/studio/lib/registry/composite/section-header.d.ts.map

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

package/dist/studio/lib/registry/composite/section-header.js

@@ -0,0 +1,20 @@
+const sectionHeaderDef = {
+  id: "section-header",
+  name: "Section Header",
+  category: "Display",
+  description: 'Small uppercase label for grouping fields in dense settings panels \u2014 the "VARIANT" / "COLORS" / "STYLE" labels above grouped form rows. Distinct from PageHeader (page-level) and DetailSection (bordered card).',
+  styleProperties: [
+    { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "colors" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "titleWeight", label: "Title Weight", control: "select", defaultValue: "600", options: ["500", "600", "700"] },
+    { key: "subtitleColor", label: "Subtitle Color", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+    { key: "subtitleSize", label: "Subtitle Size", control: "number", defaultValue: 10, min: 9, max: 14, step: 1, unit: "px" },
+    { key: "gap", label: "Title-Subtitle Gap", control: "number", defaultValue: 2, min: 0, max: 12, step: 1, unit: "px" },
+    { key: "marginBottom", label: "Margin Bottom", control: "number", defaultValue: 12, min: 0, max: 32, step: 2, unit: "px" }
+  ],
+  layoutVariants: []
+};
+export {
+  sectionHeaderDef
+};
+//# sourceMappingURL=section-header.js.map

package/dist/studio/lib/registry/composite/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/section-header.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const sectionHeaderDef: ComponentDef = {\n  id: 'section-header',\n  name: 'Section Header',\n  category: 'Display',\n  description: 'Small uppercase label for grouping fields in dense settings panels — the \"VARIANT\" / \"COLORS\" / \"STYLE\" labels above grouped form rows. Distinct from PageHeader (page-level) and DetailSection (bordered card).',\n  styleProperties: [\n    { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'colors' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'titleWeight', label: 'Title Weight', control: 'select', defaultValue: '600', options: ['500', '600', '700'] },\n    { key: 'subtitleColor', label: 'Subtitle Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n    { key: 'subtitleSize', label: 'Subtitle Size', control: 'number', defaultValue: 10, min: 9, max: 14, step: 1, unit: 'px' },\n    { key: 'gap', label: 'Title-Subtitle Gap', control: 'number', defaultValue: 2, min: 0, max: 12, step: 1, unit: 'px' },\n    { key: 'marginBottom', label: 'Margin Bottom', control: 'number', defaultValue: 12, min: 0, max: 32, step: 2, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":"AAEO,MAAM,mBAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,cAAc,OAAO,eAAe,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,IACzH,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACnH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,UAAU,cAAc,OAAO,SAAS,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,IACpH,EAAE,KAAK,iBAAiB,OAAO,kBAAkB,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,IAC9H,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,OAAO,OAAO,sBAAsB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACpH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EAC3H;AAAA,EACA,gBAAgB,CAAC;AACnB;","names":[]}