@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/shell/properties-panel/property-row.cjs

@@ -0,0 +1,155 @@
+"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_row_exports = {};
+__export(property_row_exports, {
+  PropertyRow: () => PropertyRow,
+  renderEditor: () => renderEditor
+});
+module.exports = __toCommonJS(property_row_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../../ui/index.cjs");
+var import_ui2 = require("../../../ui/index.cjs");
+var import_ui3 = require("../../../ui/index.cjs");
+var import_color_picker = require("../../editors/color-picker.cjs");
+var import_number_input = require("../../editors/number-input.cjs");
+var import_select_input = require("../../editors/select-input.cjs");
+var import_slider_input = require("../../editors/slider-input.cjs");
+var import_text_input = require("../../editors/text-input.cjs");
+var import_toggle_input = require("../../editors/toggle-input.cjs");
+function renderEditor(control, args) {
+  const { label, value, onChange, prop } = args;
+  switch (control) {
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_picker.ColorPicker, { label, value, onChange });
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_number_input.NumberInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min,
+          max: prop.max,
+          step: prop.step,
+          unit: prop.unit
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_slider_input.SliderInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min ?? 0,
+          max: prop.max ?? 100,
+          step: prop.step ?? 1,
+          unit: prop.unit
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_select_input.SelectInput,
+        {
+          label,
+          value,
+          onChange,
+          options: (prop.options ?? []).map((o) => ({ value: o, label: o }))
+        }
+      );
+    case "toggle":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_input.ToggleInput, { label, value, onChange });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text_input.TextInput, { label, value, onChange });
+  }
+}
+function PropertyRow({
+  cascadeCount,
+  onCascade,
+  category,
+  propLabel,
+  synced,
+  justMatched,
+  isOverridden,
+  onReset,
+  children
+}) {
+  const resetIconStyle = {
+    ["--uxm-icon-button-size"]: "16px",
+    color: "var(--color-text-subtle)",
+    position: "absolute",
+    right: 0,
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+  const resetButton = isOverridden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui2.IconButton,
+    {
+      onClick: onReset,
+      title: `Reset ${propLabel} to default`,
+      "aria-label": `Reset ${propLabel} to default`,
+      style: resetIconStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "refresh", size: 12, strokeWidth: 2.25, "aria-hidden": true })
+    }
+  ) : null;
+  if (cascadeCount === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] });
+  }
+  const hideLink = synced && !justMatched;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pl-3 -ml-3 border-l-2 border-accent-bold/30", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] }),
+    !hideLink && (justMatched ? (
+      // The success-state confirmation is intentionally left as a plain
+      // span — it's a one-off transient state ("just matched"), not a
+      // tappable action, so it doesn't fit InlineAction's button shape.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 10, strokeWidth: 3 }),
+        "Matched in ",
+        cascadeCount,
+        " other ",
+        category
+      ] })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ui3.InlineAction,
+      {
+        onClick: onCascade,
+        title: `Apply "${propLabel}" to ${cascadeCount} other ${category}`,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "arrow-down", strokeWidth: 2.5 }),
+        children: [
+          "Match in ",
+          cascadeCount,
+          " other ",
+          category
+        ]
+      }
+    ) }))
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PropertyRow,
+  renderEditor
+});
+//# sourceMappingURL=property-row.cjs.map

package/dist/studio/shell/properties-panel/property-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/property-row.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\n\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\nimport { InlineAction } from '@/ui';\n\nimport { ColorPicker } from '../../editors/color-picker';\nimport { NumberInput } from '../../editors/number-input';\nimport { SelectInput } from '../../editors/select-input';\nimport { SliderInput } from '../../editors/slider-input';\nimport { TextInput } from '../../editors/text-input';\nimport { ToggleInput } from '../../editors/toggle-input';\n\nimport type { ComponentDef } from '../../lib/types';\n\nexport function renderEditor(\n  control: ComponentDef['styleProperties'][number]['control'],\n  args: {\n    label: string;\n    value: string | number | boolean;\n    onChange: (v: string | number | boolean) => void;\n    prop: ComponentDef['styleProperties'][number];\n  },\n): ReactNode {\n  const { label, value, onChange, prop } = args;\n  switch (control) {\n    case 'color':\n      return <ColorPicker label={label} value={value as string} onChange={onChange} />;\n    case 'number':\n      return (\n        <NumberInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min}\n          max={prop.max}\n          step={prop.step}\n          unit={prop.unit}\n        />\n      );\n    case 'slider':\n      return (\n        <SliderInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min ?? 0}\n          max={prop.max ?? 100}\n          step={prop.step ?? 1}\n          unit={prop.unit}\n        />\n      );\n    case 'select':\n      return (\n        <SelectInput\n          label={label}\n          value={value as string}\n          onChange={onChange}\n          options={(prop.options ?? []).map((o) => ({ value: o, label: o }))}\n        />\n      );\n    case 'toggle':\n      return <ToggleInput label={label} value={value as boolean} onChange={onChange} />;\n    case 'text':\n      return <TextInput label={label} value={value as string} onChange={onChange} />;\n  }\n}\n\nexport function PropertyRow({\n  cascadeCount,\n  onCascade,\n  category,\n  propLabel,\n  synced,\n  justMatched,\n  isOverridden,\n  onReset,\n  children,\n}: {\n  cascadeCount: number;\n  onCascade: () => void;\n  category: string;\n  propLabel: string;\n  synced: boolean;\n  justMatched: boolean;\n  isOverridden: boolean;\n  onReset: () => void;\n  children: ReactNode;\n}) {\n  // 16×16 footprint matches the previous `h-4 w-4` chrome — IconButton's\n  // default is 32×32, so we override via the size var. Absolute\n  // positioning lives inline since this is a panel-specific placement\n  // (centred to the field row), not part of the atom's API.\n  const resetIconStyle: CSSProperties = {\n    ['--uxm-icon-button-size' as string]: '16px',\n    color: 'var(--color-text-subtle)',\n    position: 'absolute',\n    right: 0,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  };\n  const resetButton = isOverridden ? (\n    <IconButton\n      onClick={onReset}\n      title={`Reset ${propLabel} to default`}\n      aria-label={`Reset ${propLabel} to default`}\n      style={resetIconStyle}\n    >\n      <Icon glyph=\"refresh\" size={12} strokeWidth={2.25} aria-hidden />\n    </IconButton>\n  ) : null;\n\n  if (cascadeCount === 0) {\n    return (\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n    );\n  }\n\n  // Show post-cascade confirmation briefly; once that fades, hide the link until the value diverges again.\n  const hideLink = synced && !justMatched;\n\n  return (\n    <div className=\"pl-3 -ml-3 border-l-2 border-accent-bold/30\">\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n      {!hideLink && (\n        justMatched ? (\n          // The success-state confirmation is intentionally left as a plain\n          // span — it's a one-off transient state (\"just matched\"), not a\n          // tappable action, so it doesn't fit InlineAction's button shape.\n          <span className=\"mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold\">\n            <Icon glyph=\"check\" size={10} strokeWidth={3} />\n            Matched in {cascadeCount} other {category}\n          </span>\n        ) : (\n          <div className=\"mt-1.5\">\n            <InlineAction\n              onClick={onCascade}\n              title={`Apply \"${propLabel}\" to ${cascadeCount} other ${category}`}\n              icon={<Icon glyph=\"arrow-down\" strokeWidth={2.5} />}\n            >\n              Match in {cascadeCount} other {category}\n            </InlineAction>\n          </div>\n        )\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/studio/shell/properties-panel/property-row.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import type { ComponentDef } from '../../lib/types.js';
+export declare function renderEditor(control: ComponentDef['styleProperties'][number]['control'], args: {
+    label: string;
+    value: string | number | boolean;
+    onChange: (v: string | number | boolean) => void;
+    prop: ComponentDef['styleProperties'][number];
+}): ReactNode;
+export declare function PropertyRow({ cascadeCount, onCascade, category, propLabel, synced, justMatched, isOverridden, onReset, children, }: {
+    cascadeCount: number;
+    onCascade: () => void;
+    category: string;
+    propLabel: string;
+    synced: boolean;
+    justMatched: boolean;
+    isOverridden: boolean;
+    onReset: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=property-row.d.ts.map

package/dist/studio/shell/properties-panel/property-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-row.d.ts","sourceRoot":"","sources":["../../../../src/studio/shell/properties-panel/property-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAa3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,wBAAgB,YAAY,CAC1B,OAAO,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,EAC3D,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACjD,IAAI,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC/C,GACA,SAAS,CA2CX;AAED,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,YAAY,EACZ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAiEA"}

package/dist/studio/shell/properties-panel/property-row.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../../../ui/index.js";
+import { IconButton } from "../../../ui/index.js";
+import { InlineAction } from "../../../ui/index.js";
+import { ColorPicker } from "../../editors/color-picker.js";
+import { NumberInput } from "../../editors/number-input.js";
+import { SelectInput } from "../../editors/select-input.js";
+import { SliderInput } from "../../editors/slider-input.js";
+import { TextInput } from "../../editors/text-input.js";
+import { ToggleInput } from "../../editors/toggle-input.js";
+function renderEditor(control, args) {
+  const { label, value, onChange, prop } = args;
+  switch (control) {
+    case "color":
+      return /* @__PURE__ */ jsx(ColorPicker, { label, value, onChange });
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min,
+          max: prop.max,
+          step: prop.step,
+          unit: prop.unit
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ jsx(
+        SliderInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min ?? 0,
+          max: prop.max ?? 100,
+          step: prop.step ?? 1,
+          unit: prop.unit
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectInput,
+        {
+          label,
+          value,
+          onChange,
+          options: (prop.options ?? []).map((o) => ({ value: o, label: o }))
+        }
+      );
+    case "toggle":
+      return /* @__PURE__ */ jsx(ToggleInput, { label, value, onChange });
+    case "text":
+      return /* @__PURE__ */ jsx(TextInput, { label, value, onChange });
+  }
+}
+function PropertyRow({
+  cascadeCount,
+  onCascade,
+  category,
+  propLabel,
+  synced,
+  justMatched,
+  isOverridden,
+  onReset,
+  children
+}) {
+  const resetIconStyle = {
+    ["--uxm-icon-button-size"]: "16px",
+    color: "var(--color-text-subtle)",
+    position: "absolute",
+    right: 0,
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+  const resetButton = isOverridden ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onReset,
+      title: `Reset ${propLabel} to default`,
+      "aria-label": `Reset ${propLabel} to default`,
+      style: resetIconStyle,
+      children: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", size: 12, strokeWidth: 2.25, "aria-hidden": true })
+    }
+  ) : null;
+  if (cascadeCount === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] });
+  }
+  const hideLink = synced && !justMatched;
+  return /* @__PURE__ */ jsxs("div", { className: "pl-3 -ml-3 border-l-2 border-accent-bold/30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] }),
+    !hideLink && (justMatched ? (
+      // The success-state confirmation is intentionally left as a plain
+      // span — it's a one-off transient state ("just matched"), not a
+      // tappable action, so it doesn't fit InlineAction's button shape.
+      /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold", children: [
+        /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 10, strokeWidth: 3 }),
+        "Matched in ",
+        cascadeCount,
+        " other ",
+        category
+      ] })
+    ) : /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxs(
+      InlineAction,
+      {
+        onClick: onCascade,
+        title: `Apply "${propLabel}" to ${cascadeCount} other ${category}`,
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "arrow-down", strokeWidth: 2.5 }),
+        children: [
+          "Match in ",
+          cascadeCount,
+          " other ",
+          category
+        ]
+      }
+    ) }))
+  ] });
+}
+export {
+  PropertyRow,
+  renderEditor
+};
+//# sourceMappingURL=property-row.js.map

package/dist/studio/shell/properties-panel/property-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/property-row.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\n\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\nimport { InlineAction } from '@/ui';\n\nimport { ColorPicker } from '../../editors/color-picker';\nimport { NumberInput } from '../../editors/number-input';\nimport { SelectInput } from '../../editors/select-input';\nimport { SliderInput } from '../../editors/slider-input';\nimport { TextInput } from '../../editors/text-input';\nimport { ToggleInput } from '../../editors/toggle-input';\n\nimport type { ComponentDef } from '../../lib/types';\n\nexport function renderEditor(\n  control: ComponentDef['styleProperties'][number]['control'],\n  args: {\n    label: string;\n    value: string | number | boolean;\n    onChange: (v: string | number | boolean) => void;\n    prop: ComponentDef['styleProperties'][number];\n  },\n): ReactNode {\n  const { label, value, onChange, prop } = args;\n  switch (control) {\n    case 'color':\n      return <ColorPicker label={label} value={value as string} onChange={onChange} />;\n    case 'number':\n      return (\n        <NumberInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min}\n          max={prop.max}\n          step={prop.step}\n          unit={prop.unit}\n        />\n      );\n    case 'slider':\n      return (\n        <SliderInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min ?? 0}\n          max={prop.max ?? 100}\n          step={prop.step ?? 1}\n          unit={prop.unit}\n        />\n      );\n    case 'select':\n      return (\n        <SelectInput\n          label={label}\n          value={value as string}\n          onChange={onChange}\n          options={(prop.options ?? []).map((o) => ({ value: o, label: o }))}\n        />\n      );\n    case 'toggle':\n      return <ToggleInput label={label} value={value as boolean} onChange={onChange} />;\n    case 'text':\n      return <TextInput label={label} value={value as string} onChange={onChange} />;\n  }\n}\n\nexport function PropertyRow({\n  cascadeCount,\n  onCascade,\n  category,\n  propLabel,\n  synced,\n  justMatched,\n  isOverridden,\n  onReset,\n  children,\n}: {\n  cascadeCount: number;\n  onCascade: () => void;\n  category: string;\n  propLabel: string;\n  synced: boolean;\n  justMatched: boolean;\n  isOverridden: boolean;\n  onReset: () => void;\n  children: ReactNode;\n}) {\n  // 16×16 footprint matches the previous `h-4 w-4` chrome — IconButton's\n  // default is 32×32, so we override via the size var. Absolute\n  // positioning lives inline since this is a panel-specific placement\n  // (centred to the field row), not part of the atom's API.\n  const resetIconStyle: CSSProperties = {\n    ['--uxm-icon-button-size' as string]: '16px',\n    color: 'var(--color-text-subtle)',\n    position: 'absolute',\n    right: 0,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  };\n  const resetButton = isOverridden ? (\n    <IconButton\n      onClick={onReset}\n      title={`Reset ${propLabel} to default`}\n      aria-label={`Reset ${propLabel} to default`}\n      style={resetIconStyle}\n    >\n      <Icon glyph=\"refresh\" size={12} strokeWidth={2.25} aria-hidden />\n    </IconButton>\n  ) : null;\n\n  if (cascadeCount === 0) {\n    return (\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n    );\n  }\n\n  // Show post-cascade confirmation briefly; once that fades, hide the link until the value diverges again.\n  const hideLink = synced && !justMatched;\n\n  return (\n    <div className=\"pl-3 -ml-3 border-l-2 border-accent-bold/30\">\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n      {!hideLink && (\n        justMatched ? (\n          // The success-state confirmation is intentionally left as a plain\n          // span — it's a one-off transient state (\"just matched\"), not a\n          // tappable action, so it doesn't fit InlineAction's button shape.\n          <span className=\"mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold\">\n            <Icon glyph=\"check\" size={10} strokeWidth={3} />\n            Matched in {cascadeCount} other {category}\n          </span>\n        ) : (\n          <div className=\"mt-1.5\">\n            <InlineAction\n              onClick={onCascade}\n              title={`Apply \"${propLabel}\" to ${cascadeCount} other ${category}`}\n              icon={<Icon glyph=\"arrow-down\" strokeWidth={2.5} />}\n            >\n              Match in {cascadeCount} other {category}\n            </InlineAction>\n          </div>\n        )\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/studio/shell/properties-panel/variant-matrix.cjs

@@ -0,0 +1,177 @@
+"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 variant_matrix_exports = {};
+__export(variant_matrix_exports, {
+  VariantMatrix: () => VariantMatrix
+});
+module.exports = __toCommonJS(variant_matrix_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../../ui/index.cjs");
+var import_preview_shell = require("../../lib/preview-shell.cjs");
+var import_canvas = require("../canvas.cjs");
+function VariantMatrix({
+  def,
+  styles,
+  currentVariants
+}) {
+  const Preview = import_canvas.previewMap[def.id];
+  const shell = (0, import_preview_shell.usePreviewShell)();
+  if (!Preview) {
+    return null;
+  }
+  const MATRIX_AXIS_OPTION_CAP = 8;
+  const gateLocks = {};
+  for (const v of def.layoutVariants) {
+    const showWhen = v.showWhen;
+    if (!showWhen) continue;
+    for (const [gateKey, gateVal] of Object.entries(showWhen)) {
+      if (!(gateKey in gateLocks)) gateLocks[gateKey] = gateVal;
+    }
+  }
+  const expandable = def.layoutVariants.filter(
+    (v) => v.options.length <= MATRIX_AXIS_OPTION_CAP && !(v.key in gateLocks)
+  );
+  if (expandable.length === 0) {
+    return null;
+  }
+  const [axisX, axisY] = expandable;
+  const baseVariants = {};
+  for (const v of def.layoutVariants) {
+    baseVariants[v.key] = gateLocks[v.key] ?? currentVariants[v.key] ?? v.defaultValue;
+  }
+  const xs = axisX.options;
+  const ys = axisY ? axisY.options : null;
+  const renderCell = (cellVariants, caption) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "rounded border border-border bg-card overflow-hidden",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "flex items-center justify-center p-3",
+            style: {
+              // Read-only thumbnail. Clip wide atoms so they don't blow up
+              // the cell width; centred so small atoms stay readable.
+              //
+              // Sizing: minHeight gives small atoms (icon buttons, chips) a
+              // consistent visual weight; maxHeight caps tall atoms (Card,
+              // LifecycleNodeCard) so a single oversized atom can't make
+              // every row in a 2D grid 200px tall. Scale 0.6 is the sweet
+              // spot for the atoms we ship today — wide ones (SideFlexpane,
+              // AppSidebar) still clip, but everything fits the cell width
+              // budget at typical panel sizes.
+              pointerEvents: "none",
+              minHeight: 80,
+              maxHeight: 140,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "uxm-matrix-cell-preview",
+                style: { transform: "scale(0.6)", transformOrigin: "center" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Preview,
+                  {
+                    styles,
+                    variants: cellVariants,
+                    componentId: def.id,
+                    shell
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-border/60 px-2 py-1 text-[10px] font-medium text-text-muted truncate text-center", children: caption })
+      ]
+    },
+    caption
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.SectionHeader, { children: "Variant Matrix" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "-mx-5 overflow-x-auto px-5", children: ys ? (
+      // 2D grid: ys as rows, xs as columns. Each row has a leading
+      // row-label cell so the user can read both axes without
+      // hovering captions. `minmax(120px, 1fr)` gives cells a
+      // legible floor — narrower than that and atoms (esp. Card,
+      // StatCard, button-with-icon) lose meaningful detail even at
+      // 0.6 scale.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "grid gap-1.5",
+          style: {
+            gridTemplateColumns: `auto repeat(${xs.length}, minmax(120px, 1fr))`,
+            minWidth: "min-content"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+            xs.map((x) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-center truncate",
+                children: x.label
+              },
+              `xh-${x.value}`
+            )),
+            ys.map((y) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "self-center pr-1 text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-right truncate", children: y.label }),
+              xs.map((x) => {
+                const cellV = {
+                  ...baseVariants,
+                  [axisX.key]: x.value,
+                  [axisY.key]: y.value
+                };
+                return renderCell(cellV, `${x.label} / ${y.label}`);
+              })
+            ] }, `row-${y.value}`))
+          ]
+        }
+      )
+    ) : (
+      // 1D row of thumbnails. `auto-fit` lets it reflow to multiple
+      // rows on narrow panes — when the parent is wide enough we
+      // get one row; when it isn't, cells wrap rather than scroll.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "grid gap-1.5",
+          style: {
+            gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))"
+          },
+          children: xs.map((x) => {
+            const cellV = {
+              ...baseVariants,
+              [axisX.key]: x.value
+            };
+            return renderCell(cellV, x.label);
+          })
+        }
+      )
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariantMatrix
+});
+//# sourceMappingURL=variant-matrix.cjs.map

package/dist/studio/shell/properties-panel/variant-matrix.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/variant-matrix.tsx"],"sourcesContent":["import { Fragment } from 'react';\n\nimport { SectionHeader } from '@/ui';\n\nimport { usePreviewShell } from '../../lib/preview-shell';\nimport { previewMap } from '../canvas';\n\nimport type { ComponentDef, PreviewProps } from '../../lib/types';\n\n/**\n * Dev tab — Variant Matrix section. Renders every variant × variant\n * combination of the current component as a thumbnail grid. Each cell\n * is the real Preview component (same `previewMap` the canvas uses)\n * with variants locked to that cell's combination; styles flow from\n * the user's current overrides so saved theming carries through.\n *\n * Layout strategy:\n *   - 1 variant   → single column of N thumbnails\n *   - 2 variants  → 2D grid (variant 1 as columns, variant 2 as rows)\n *   - 3+ variants → first two as the matrix axes; remaining variants\n *                   stay at their default value (3-D grids don't read\n *                   well in a panel; if a particular axis matters,\n *                   the user can pick it in the Visual tab and re-\n *                   visit the matrix)\n *\n * Each cell:\n *   - `pointer-events: none` so the thumbnail doesn't capture clicks\n *     (matches the MobileGallery's read-only convention)\n *   - `overflow: hidden` so wide atoms (SideFlexpane, AppSidebar) clip\n *     rather than overflow the matrix\n *   - thin caption beneath labeling the variant value\n */\nexport function VariantMatrix({\n  def,\n  styles,\n  currentVariants,\n}: {\n  def: ComponentDef;\n  styles: Record<string, string | number | boolean>;\n  currentVariants: Record<string, string | number | boolean>;\n}) {\n  const Preview = previewMap[def.id];\n  const shell = usePreviewShell();\n  if (!Preview) {\n    return null;\n  }\n\n  // Filter variants suitable for matrix expansion. Two ineligibility\n  // rules — both about cells that \"don't make sense\":\n  //\n  //   1. Large-enum variants (`glyph` with 56 icons): content\n  //      selections, not visual variants. A 56×5 grid is pure noise.\n  //      Heuristic cap: 8 options.\n  //\n  //   2. Gating variants: a variant V is a \"gate\" if some OTHER variant\n  //      references it from a `showWhen` clause. Example: list-item's\n  //      `state` has `showWhen: { mode: \"interactive\" }`, so `mode` is\n  //      a gate. Expanding both as axes produces rows like (static,\n  //      hover) / (static, focus) / etc., where every cell collapses\n  //      to the same static rendering — wasted space. We instead lock\n  //      the gate to the value the dependent needs (here: \"interactive\")\n  //      and only expand the dependent.\n  const MATRIX_AXIS_OPTION_CAP = 8;\n\n  // Collect the gate map: gateKey → required value (from the FIRST\n  // dependent's showWhen). Most components have a single dependent per\n  // gate, so \"first wins\" is fine in practice; if conflicts ever come\n  // up, the registry author can pick the variant order they want.\n  const gateLocks: Record<string, string> = {};\n  for (const v of def.layoutVariants) {\n    const showWhen = (v as { showWhen?: Record<string, string> }).showWhen;\n    if (!showWhen) continue;\n    for (const [gateKey, gateVal] of Object.entries(showWhen)) {\n      if (!(gateKey in gateLocks)) gateLocks[gateKey] = gateVal;\n    }\n  }\n\n  const expandable = def.layoutVariants.filter(\n    (v) =>\n      v.options.length <= MATRIX_AXIS_OPTION_CAP &&\n      !(v.key in gateLocks),\n  );\n\n  // If nothing's expandable, the matrix has nothing meaningful to\n  // compare — hide the section. The Visual tab still covers variant\n  // selection via the picker.\n  if (expandable.length === 0) {\n    return null;\n  }\n\n  const [axisX, axisY] = expandable;\n  // Base variants — three priority layers:\n  //   1. Gate locks (from another variant's showWhen) win first, so\n  //      the matrix shows the dependent variant in the context where\n  //      it actually applies.\n  //   2. User's current selection from the editor (so e.g. the icon-\n  //      button matrix reflects the user's picked glyph).\n  //   3. Variant defaults as a final fallback.\n  const baseVariants: Record<string, string> = {};\n  for (const v of def.layoutVariants) {\n    baseVariants[v.key] =\n      gateLocks[v.key]\n      ?? (currentVariants[v.key] as string | undefined)\n      ?? v.defaultValue;\n  }\n\n  const xs = axisX.options;\n  const ys = axisY ? axisY.options : null;\n\n  const renderCell = (cellVariants: Record<string, string>, caption: string) => (\n    <div\n      key={caption}\n      className=\"rounded border border-border bg-card overflow-hidden\"\n    >\n      <div\n        className=\"flex items-center justify-center p-3\"\n        style={{\n          // Read-only thumbnail. Clip wide atoms so they don't blow up\n          // the cell width; centred so small atoms stay readable.\n          //\n          // Sizing: minHeight gives small atoms (icon buttons, chips) a\n          // consistent visual weight; maxHeight caps tall atoms (Card,\n          // LifecycleNodeCard) so a single oversized atom can't make\n          // every row in a 2D grid 200px tall. Scale 0.6 is the sweet\n          // spot for the atoms we ship today — wide ones (SideFlexpane,\n          // AppSidebar) still clip, but everything fits the cell width\n          // budget at typical panel sizes.\n          pointerEvents: 'none',\n          minHeight: 80,\n          maxHeight: 140,\n          overflow: 'hidden',\n        }}\n      >\n        <div\n          className=\"uxm-matrix-cell-preview\"\n          style={{ transform: 'scale(0.6)', transformOrigin: 'center' }}\n        >\n          <Preview\n            styles={styles as PreviewProps['styles']}\n            variants={cellVariants}\n            componentId={def.id}\n            shell={shell}\n          />\n        </div>\n      </div>\n      <div className=\"border-t border-border/60 px-2 py-1 text-[10px] font-medium text-text-muted truncate text-center\">\n        {caption}\n      </div>\n    </div>\n  );\n\n  return (\n    <div>\n      <SectionHeader>Variant Matrix</SectionHeader>\n      {/* Horizontal-scroll wrapper. Cells have a 120px minimum so they\n          stay readable; if the panel is too narrow to show every column\n          at that width, the matrix scrolls instead of crushing cells\n          into illegibility. -mx-5 + px-5 lets the scroll surface bleed\n          to the panel edges so a thumb shadow at the right edge hints\n          at \"more content\". */}\n      <div className=\"-mx-5 overflow-x-auto px-5\">\n        {ys ? (\n          // 2D grid: ys as rows, xs as columns. Each row has a leading\n          // row-label cell so the user can read both axes without\n          // hovering captions. `minmax(120px, 1fr)` gives cells a\n          // legible floor — narrower than that and atoms (esp. Card,\n          // StatCard, button-with-icon) lose meaningful detail even at\n          // 0.6 scale.\n          <div\n            className=\"grid gap-1.5\"\n            style={{\n              gridTemplateColumns: `auto repeat(${xs.length}, minmax(120px, 1fr))`,\n              minWidth: 'min-content',\n            }}\n          >\n            {/* corner cell + column headers */}\n            <div />\n            {xs.map((x) => (\n              <div\n                key={`xh-${x.value}`}\n                className=\"text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-center truncate\"\n              >\n                {x.label}\n              </div>\n            ))}\n            {ys.map((y) => (\n              <Fragment key={`row-${y.value}`}>\n                <div className=\"self-center pr-1 text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-right truncate\">\n                  {y.label}\n                </div>\n                {xs.map((x) => {\n                  const cellV: Record<string, string> = {\n                    ...baseVariants,\n                    [axisX.key]: x.value,\n                    [axisY.key]: y.value,\n                  };\n                  return renderCell(cellV, `${x.label} / ${y.label}`);\n                })}\n              </Fragment>\n            ))}\n          </div>\n        ) : (\n          // 1D row of thumbnails. `auto-fit` lets it reflow to multiple\n          // rows on narrow panes — when the parent is wide enough we\n          // get one row; when it isn't, cells wrap rather than scroll.\n          <div\n            className=\"grid gap-1.5\"\n            style={{\n              gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n            }}\n          >\n            {xs.map((x) => {\n              const cellV: Record<string, string> = {\n                ...baseVariants,\n                [axisX.key]: x.value,\n              };\n              return renderCell(cellV, x.label);\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/studio/shell/properties-panel/variant-matrix.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentDef } from '../../lib/types.js';
+/**
+ * Dev tab — Variant Matrix section. Renders every variant × variant
+ * combination of the current component as a thumbnail grid. Each cell
+ * is the real Preview component (same `previewMap` the canvas uses)
+ * with variants locked to that cell's combination; styles flow from
+ * the user's current overrides so saved theming carries through.
+ *
+ * Layout strategy:
+ *   - 1 variant   → single column of N thumbnails
+ *   - 2 variants  → 2D grid (variant 1 as columns, variant 2 as rows)
+ *   - 3+ variants → first two as the matrix axes; remaining variants
+ *                   stay at their default value (3-D grids don't read
+ *                   well in a panel; if a particular axis matters,
+ *                   the user can pick it in the Visual tab and re-
+ *                   visit the matrix)
+ *
+ * Each cell:
+ *   - `pointer-events: none` so the thumbnail doesn't capture clicks
+ *     (matches the MobileGallery's read-only convention)
+ *   - `overflow: hidden` so wide atoms (SideFlexpane, AppSidebar) clip
+ *     rather than overflow the matrix
+ *   - thin caption beneath labeling the variant value
+ */
+export declare function VariantMatrix({ def, styles, currentVariants, }: {
+    def: ComponentDef;
+    styles: Record<string, string | number | boolean>;
+    currentVariants: Record<string, string | number | boolean>;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=variant-matrix.d.ts.map

package/dist/studio/shell/properties-panel/variant-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-matrix.d.ts","sourceRoot":"","sources":["../../../../src/studio/shell/properties-panel/variant-matrix.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,MAAM,EACN,eAAe,GAChB,EAAE;IACD,GAAG,EAAE,YAAY,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAClD,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CAC5D,sCAuLA"}