@viax.io/uxm 4.36.0

package/dist/studio/lib/registry/layout.cjs

@@ -0,0 +1,104 @@
+"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 layout_exports = {};
+__export(layout_exports, {
+  layoutDefs: () => layoutDefs
+});
+module.exports = __toCommonJS(layout_exports);
+const layoutDefs = [
+  // ── Layout ──
+  // Boring building blocks for page composition. No colour, no chrome —
+  // these encode "items, related, with a consistent rhythm" so page
+  // authors and AI page-generation pipelines don't pick gap values
+  // ad-hoc. The editor knobs theme the gap rhythm globally.
+  {
+    id: "responsive-grid",
+    name: "Responsive Grid",
+    category: "Layout",
+    description: "Auto-fit grid that wraps children based on a minimum column width. Adapts to its container's width without media queries \u2014 same instance lays out as 4-up in a wide pane and 1-up in a narrow drawer.",
+    styleProperties: [
+      { key: "min", label: "Min Column Width", control: "text", defaultValue: "200px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 16, min: 0, max: 48, step: 2, unit: "px" }
+    ],
+    layoutVariants: [],
+    canvasBackground: false
+  },
+  {
+    id: "stack",
+    name: "Stack",
+    category: "Layout",
+    description: "Vertical flex column with a consistent gap. The boring building block that replaces ad-hoc div soup in page layouts.",
+    styleProperties: [
+      { key: "gap", label: "Gap", control: "number", defaultValue: 16, min: 0, max: 48, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "align",
+        label: "Align",
+        options: [
+          { value: "stretch", label: "Stretch" },
+          { value: "start", label: "Start" },
+          { value: "center", label: "Center" },
+          { value: "end", label: "End" }
+        ],
+        defaultValue: "stretch"
+      }
+    ],
+    canvasBackground: false
+  },
+  {
+    id: "cluster",
+    name: "Cluster",
+    category: "Layout",
+    description: "Horizontal row that wraps when there's not enough room \u2014 tag lists, filter chips, button rows. Wrap-friendly by design.",
+    styleProperties: [
+      { key: "gap", label: "Gap", control: "number", defaultValue: 12, min: 0, max: 32, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "align",
+        label: "Align",
+        options: [
+          { value: "center", label: "Center" },
+          { value: "start", label: "Start" },
+          { value: "end", label: "End" },
+          { value: "baseline", label: "Baseline" }
+        ],
+        defaultValue: "center"
+      },
+      {
+        key: "justify",
+        label: "Justify",
+        options: [
+          { value: "start", label: "Start" },
+          { value: "center", label: "Center" },
+          { value: "end", label: "End" },
+          { value: "between", label: "Space Between" }
+        ],
+        defaultValue: "start"
+      }
+    ],
+    canvasBackground: false
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  layoutDefs
+});
+//# sourceMappingURL=layout.cjs.map

package/dist/studio/lib/registry/layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/lib/registry/layout.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const layoutDefs: ComponentDef[] = [\n  // ── Layout ──\n  // Boring building blocks for page composition. No colour, no chrome —\n  // these encode \"items, related, with a consistent rhythm\" so page\n  // authors and AI page-generation pipelines don't pick gap values\n  // ad-hoc. The editor knobs theme the gap rhythm globally.\n  {\n    id: 'responsive-grid',\n    name: 'Responsive Grid',\n    category: 'Layout',\n    description: \"Auto-fit grid that wraps children based on a minimum column width. Adapts to its container's width without media queries — same instance lays out as 4-up in a wide pane and 1-up in a narrow drawer.\",\n    styleProperties: [\n      { key: 'min', label: 'Min Column Width', control: 'text', defaultValue: '200px' },\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 16, min: 0, max: 48, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [],\n    canvasBackground: false,\n  },\n  {\n    id: 'stack',\n    name: 'Stack',\n    category: 'Layout',\n    description: 'Vertical flex column with a consistent gap. The boring building block that replaces ad-hoc div soup in page layouts.',\n    styleProperties: [\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 16, min: 0, max: 48, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'align',\n        label: 'Align',\n        options: [\n          { value: 'stretch', label: 'Stretch' },\n          { value: 'start', label: 'Start' },\n          { value: 'center', label: 'Center' },\n          { value: 'end', label: 'End' },\n        ],\n        defaultValue: 'stretch',\n      },\n    ],\n    canvasBackground: false,\n  },\n  {\n    id: 'cluster',\n    name: 'Cluster',\n    category: 'Layout',\n    description: \"Horizontal row that wraps when there's not enough room — tag lists, filter chips, button rows. Wrap-friendly by design.\",\n    styleProperties: [\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 0, max: 32, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'align',\n        label: 'Align',\n        options: [\n          { value: 'center', label: 'Center' },\n          { value: 'start', label: 'Start' },\n          { value: 'end', label: 'End' },\n          { value: 'baseline', label: 'Baseline' },\n        ],\n        defaultValue: 'center',\n      },\n      {\n        key: 'justify',\n        label: 'Justify',\n        options: [\n          { value: 'start', label: 'Start' },\n          { value: 'center', label: 'Center' },\n          { value: 'end', label: 'End' },\n          { value: 'between', label: 'Space Between' },\n        ],\n        defaultValue: 'start',\n      },\n    ],\n    canvasBackground: false,\n  },\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,aAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,oBAAoB,SAAS,QAAQ,cAAc,QAAQ;AAAA,MAChF,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB,CAAC;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,QAC/B;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC7B,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC7B,EAAE,OAAO,WAAW,OAAO,gBAAgB;AAAA,QAC7C;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;","names":[]}

package/dist/studio/lib/registry/layout.d.ts

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

package/dist/studio/lib/registry/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/studio/lib/registry/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAAY,EA2EpC,CAAC"}

package/dist/studio/lib/registry/layout.js

@@ -0,0 +1,80 @@
+const layoutDefs = [
+  // ── Layout ──
+  // Boring building blocks for page composition. No colour, no chrome —
+  // these encode "items, related, with a consistent rhythm" so page
+  // authors and AI page-generation pipelines don't pick gap values
+  // ad-hoc. The editor knobs theme the gap rhythm globally.
+  {
+    id: "responsive-grid",
+    name: "Responsive Grid",
+    category: "Layout",
+    description: "Auto-fit grid that wraps children based on a minimum column width. Adapts to its container's width without media queries \u2014 same instance lays out as 4-up in a wide pane and 1-up in a narrow drawer.",
+    styleProperties: [
+      { key: "min", label: "Min Column Width", control: "text", defaultValue: "200px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 16, min: 0, max: 48, step: 2, unit: "px" }
+    ],
+    layoutVariants: [],
+    canvasBackground: false
+  },
+  {
+    id: "stack",
+    name: "Stack",
+    category: "Layout",
+    description: "Vertical flex column with a consistent gap. The boring building block that replaces ad-hoc div soup in page layouts.",
+    styleProperties: [
+      { key: "gap", label: "Gap", control: "number", defaultValue: 16, min: 0, max: 48, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "align",
+        label: "Align",
+        options: [
+          { value: "stretch", label: "Stretch" },
+          { value: "start", label: "Start" },
+          { value: "center", label: "Center" },
+          { value: "end", label: "End" }
+        ],
+        defaultValue: "stretch"
+      }
+    ],
+    canvasBackground: false
+  },
+  {
+    id: "cluster",
+    name: "Cluster",
+    category: "Layout",
+    description: "Horizontal row that wraps when there's not enough room \u2014 tag lists, filter chips, button rows. Wrap-friendly by design.",
+    styleProperties: [
+      { key: "gap", label: "Gap", control: "number", defaultValue: 12, min: 0, max: 32, step: 2, unit: "px" }
+    ],
+    layoutVariants: [
+      {
+        key: "align",
+        label: "Align",
+        options: [
+          { value: "center", label: "Center" },
+          { value: "start", label: "Start" },
+          { value: "end", label: "End" },
+          { value: "baseline", label: "Baseline" }
+        ],
+        defaultValue: "center"
+      },
+      {
+        key: "justify",
+        label: "Justify",
+        options: [
+          { value: "start", label: "Start" },
+          { value: "center", label: "Center" },
+          { value: "end", label: "End" },
+          { value: "between", label: "Space Between" }
+        ],
+        defaultValue: "start"
+      }
+    ],
+    canvasBackground: false
+  }
+];
+export {
+  layoutDefs
+};
+//# sourceMappingURL=layout.js.map

package/dist/studio/lib/registry/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/lib/registry/layout.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const layoutDefs: ComponentDef[] = [\n  // ── Layout ──\n  // Boring building blocks for page composition. No colour, no chrome —\n  // these encode \"items, related, with a consistent rhythm\" so page\n  // authors and AI page-generation pipelines don't pick gap values\n  // ad-hoc. The editor knobs theme the gap rhythm globally.\n  {\n    id: 'responsive-grid',\n    name: 'Responsive Grid',\n    category: 'Layout',\n    description: \"Auto-fit grid that wraps children based on a minimum column width. Adapts to its container's width without media queries — same instance lays out as 4-up in a wide pane and 1-up in a narrow drawer.\",\n    styleProperties: [\n      { key: 'min', label: 'Min Column Width', control: 'text', defaultValue: '200px' },\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 16, min: 0, max: 48, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [],\n    canvasBackground: false,\n  },\n  {\n    id: 'stack',\n    name: 'Stack',\n    category: 'Layout',\n    description: 'Vertical flex column with a consistent gap. The boring building block that replaces ad-hoc div soup in page layouts.',\n    styleProperties: [\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 16, min: 0, max: 48, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'align',\n        label: 'Align',\n        options: [\n          { value: 'stretch', label: 'Stretch' },\n          { value: 'start', label: 'Start' },\n          { value: 'center', label: 'Center' },\n          { value: 'end', label: 'End' },\n        ],\n        defaultValue: 'stretch',\n      },\n    ],\n    canvasBackground: false,\n  },\n  {\n    id: 'cluster',\n    name: 'Cluster',\n    category: 'Layout',\n    description: \"Horizontal row that wraps when there's not enough room — tag lists, filter chips, button rows. Wrap-friendly by design.\",\n    styleProperties: [\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 0, max: 32, step: 2, unit: 'px' },\n    ],\n    layoutVariants: [\n      {\n        key: 'align',\n        label: 'Align',\n        options: [\n          { value: 'center', label: 'Center' },\n          { value: 'start', label: 'Start' },\n          { value: 'end', label: 'End' },\n          { value: 'baseline', label: 'Baseline' },\n        ],\n        defaultValue: 'center',\n      },\n      {\n        key: 'justify',\n        label: 'Justify',\n        options: [\n          { value: 'start', label: 'Start' },\n          { value: 'center', label: 'Center' },\n          { value: 'end', label: 'End' },\n          { value: 'between', label: 'Space Between' },\n        ],\n        defaultValue: 'start',\n      },\n    ],\n    canvasBackground: false,\n  },\n];\n"],"mappings":"AAEO,MAAM,aAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,oBAAoB,SAAS,QAAQ,cAAc,QAAQ;AAAA,MAChF,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB,CAAC;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,QAC/B;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACxG;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC7B,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,QACzC;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,UACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACnC,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC7B,EAAE,OAAO,WAAW,OAAO,gBAAgB;AAAA,QAC7C;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;","names":[]}

package/dist/studio/lib/types.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/dist/studio/lib/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/types.ts"],"sourcesContent":["export type Category = 'App' | 'Buttons' | 'Inputs' | 'Display' | 'Feedback' | 'Forms' | 'Composite' | 'Configuration' | 'Diagram' | 'Icons' | 'Layout';\n\nexport interface BrandTokens {\n  light?: Record<string, string>;\n  dark?: Record<string, string>;\n}\n\nexport interface BrandConfig {\n  logoUrl?: string;\n  iconUrl?: string;\n  faviconUrl?: string;\n  logoUrlDark?: string;\n  iconUrlDark?: string;\n  faviconUrlDark?: string;\n  fontFamily?: string;\n  /** Typeface for heading surfaces. Unset = headings inherit the body face. */\n  headingFontFamily?: string;\n  /** Weight for heading surfaces ('500' | '600' | '700'). Unset = each\n   *  component keeps its own default (600, or 700 for the display sizes). */\n  headingFontWeight?: string;\n  /** Per-role heading refinements, layered UNDER the umbrella above: unset =\n   *  the role follows `headingFontFamily` / `headingFontWeight`. Roles are\n   *  display (StatCard value, ErrorPage code), h1 (PageHeader / ErrorPage\n   *  title) and h2 (DetailSection / SegmentRow title). */\n  displayFontFamily?: string;\n  displayFontWeight?: string;\n  displayScale?: string;\n  pageTitleFontFamily?: string;\n  pageTitleFontWeight?: string;\n  pageTitleScale?: string;\n  sectionTitleFontFamily?: string;\n  sectionTitleFontWeight?: string;\n  sectionTitleScale?: string;\n  /** Base text size multiplier applied to every font-size in the library. */\n  typeScale?: string;\n  /** Line height for multi-line body copy. Unset = each surface's own value. */\n  bodyLineHeight?: string;\n  tokens?: BrandTokens;\n}\n\nexport type EditorControlType = 'color' | 'number' | 'select' | 'toggle' | 'slider' | 'text';\n\nexport interface StyleProperty {\n  key: string;\n  label: string;\n  control: EditorControlType;\n  defaultValue: string | number | boolean;\n  options?: string[];\n  min?: number;\n  max?: number;\n  step?: number;\n  unit?: string;\n  /** Variant scoping. A string matches one variant value; a string[] matches\n   *  any of several (same shape as a LayoutVariant option's `showWhen`) — use\n   *  the array form for \"this knob applies to several types / states\" instead\n   *  of a `'a|b'` string, which is compared verbatim and can never match. */\n  showWhen?: Record<string, string | string[]>;\n  section?: string;\n}\n\nexport interface LayoutVariant {\n  key: string;\n  label: string;\n  options: Array<{\n    value: string;\n    label: string;\n    /** Per-option scoping. A string matches one variant value; a string[]\n     *  matches any of several (e.g. show `editing` only for the input-like\n     *  types `['text','number','date']`, hiding it for the pickers). */\n    showWhen?: Record<string, string | string[]>;\n  }>;\n  defaultValue: string;\n  /** Variant-level scoping — same shape as styleProperties.showWhen. The\n   *  entire variant picker is hidden when its conditions aren't met by\n   *  the current variant selections. Use to hide a picker that's\n   *  irrelevant in a given context (e.g. the State picker on list-item\n   *  when `trailing` is `meta` / `none`). */\n  showWhen?: Record<string, string>;\n}\n\n/**\n * One emitted event a component fires during interaction. Surfaces in\n * the Events tab of the Properties pane: a static spec on top (what\n * fires when, with what payload) and a live log below (chronological\n * capture of real events from the canvas).\n *\n * Names use the canonical React handler name (`onClick`, `onChange`)\n * rather than the DOM event name (`click`, `change`) so the spec reads\n * the way a consumer would type it in JSX. The DOM-event → handler\n * mapping lives in canvas.tsx's capture wrapper.\n */\nexport interface EventSpec {\n  /** Handler name, e.g. \"onClick\". */\n  name: string;\n  /** Short prose describing what triggers the event. */\n  description: string;\n  /** TypeScript-ish payload signature, e.g. \"MouseEvent\" or \"{ value: string }\". */\n  payload?: string;\n  /** Variant scoping — same shape as styleProperties.showWhen. */\n  showWhen?: Record<string, string>;\n}\n\n/**\n * One prop in the developer-facing API documentation. Surfaces in the\n * Dev tab's API section as a row in the props table.\n *\n * Authored alongside the atom (in the registry) rather than auto-\n * extracted from TypeScript today. The shape mirrors what an\n * extraction tool (react-docgen-typescript, ts-morph) would emit, so a\n * future build-time generator can populate this slot without changing\n * the consumer shape.\n */\nexport interface PropSpec {\n  /** Prop name as it appears in JSX, e.g. \"variant\". */\n  name: string;\n  /** TypeScript-ish type signature, e.g. `\"primary\" | \"ghost\"`, `ReactNode`, `(e: MouseEvent) => void`. */\n  type: string;\n  /** Whether the prop is required (no `?` in the source interface). */\n  required?: boolean;\n  /** Default value as it appears in the destructured fn signature, stringified. */\n  defaultValue?: string;\n  /** Short prose — JSDoc summary, or hand-authored description. */\n  description?: string;\n}\n\n/**\n * Developer-facing API documentation for a component. Drives the Dev\n * tab's API section (import path + props table + usage snippet).\n * Optional — atoms without `api` show only Events + Variant Matrix.\n */\nexport interface ComponentApi {\n  /** Import path consumers use, e.g. \"@modo/uxm/ui\". */\n  importPath: string;\n  /** Named export(s) to import. Single string or array for atoms that ship multiple exports (Button family). */\n  importNames: string | string[];\n  /** Props in declaration order — exclude inherited HTML attributes for clarity. */\n  props: PropSpec[];\n}\n\nexport interface ComponentDef {\n  id: string;\n  name: string;\n  category: Category;\n  description: string;\n  styleProperties: StyleProperty[];\n  layoutVariants: LayoutVariant[];\n  canvasBackground?: boolean;\n  /**\n   * Fill the canvas width and top-align instead of the default center-both-\n   * axes layout. For previews that are galleries / long lists (e.g. the Icon\n   * set grid) where centering wastes horizontal space and — worse — re-centres\n   * vertically as content height changes (a filter shrinking results makes the\n   * whole block jump); top-aligning keeps it anchored so filtering stays in\n   * place.\n   */\n  canvasFill?: boolean;\n  /** Optional event-API documentation, surfaced in the Events tab. */\n  events?: EventSpec[];\n  /** Optional dev-facing API documentation, surfaced in the Dev tab. */\n  api?: ComponentApi;\n}\n\nexport type StyleOverrides = Record<string, string | number | boolean>;\n\n// Authoritative PreviewProps now lives in @viax.io/uxm/previews. Re-exported\n// here so the rest of the shell (registry, panels) keeps working without\n// import-site changes.\nexport type { PreviewProps } from '@/previews';\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/studio/lib/types.d.ts

@@ -0,0 +1,155 @@
+export type Category = 'App' | 'Buttons' | 'Inputs' | 'Display' | 'Feedback' | 'Forms' | 'Composite' | 'Configuration' | 'Diagram' | 'Icons' | 'Layout';
+export interface BrandTokens {
+    light?: Record<string, string>;
+    dark?: Record<string, string>;
+}
+export interface BrandConfig {
+    logoUrl?: string;
+    iconUrl?: string;
+    faviconUrl?: string;
+    logoUrlDark?: string;
+    iconUrlDark?: string;
+    faviconUrlDark?: string;
+    fontFamily?: string;
+    /** Typeface for heading surfaces. Unset = headings inherit the body face. */
+    headingFontFamily?: string;
+    /** Weight for heading surfaces ('500' | '600' | '700'). Unset = each
+     *  component keeps its own default (600, or 700 for the display sizes). */
+    headingFontWeight?: string;
+    /** Per-role heading refinements, layered UNDER the umbrella above: unset =
+     *  the role follows `headingFontFamily` / `headingFontWeight`. Roles are
+     *  display (StatCard value, ErrorPage code), h1 (PageHeader / ErrorPage
+     *  title) and h2 (DetailSection / SegmentRow title). */
+    displayFontFamily?: string;
+    displayFontWeight?: string;
+    displayScale?: string;
+    pageTitleFontFamily?: string;
+    pageTitleFontWeight?: string;
+    pageTitleScale?: string;
+    sectionTitleFontFamily?: string;
+    sectionTitleFontWeight?: string;
+    sectionTitleScale?: string;
+    /** Base text size multiplier applied to every font-size in the library. */
+    typeScale?: string;
+    /** Line height for multi-line body copy. Unset = each surface's own value. */
+    bodyLineHeight?: string;
+    tokens?: BrandTokens;
+}
+export type EditorControlType = 'color' | 'number' | 'select' | 'toggle' | 'slider' | 'text';
+export interface StyleProperty {
+    key: string;
+    label: string;
+    control: EditorControlType;
+    defaultValue: string | number | boolean;
+    options?: string[];
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    /** Variant scoping. A string matches one variant value; a string[] matches
+     *  any of several (same shape as a LayoutVariant option's `showWhen`) — use
+     *  the array form for "this knob applies to several types / states" instead
+     *  of a `'a|b'` string, which is compared verbatim and can never match. */
+    showWhen?: Record<string, string | string[]>;
+    section?: string;
+}
+export interface LayoutVariant {
+    key: string;
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+        /** Per-option scoping. A string matches one variant value; a string[]
+         *  matches any of several (e.g. show `editing` only for the input-like
+         *  types `['text','number','date']`, hiding it for the pickers). */
+        showWhen?: Record<string, string | string[]>;
+    }>;
+    defaultValue: string;
+    /** Variant-level scoping — same shape as styleProperties.showWhen. The
+     *  entire variant picker is hidden when its conditions aren't met by
+     *  the current variant selections. Use to hide a picker that's
+     *  irrelevant in a given context (e.g. the State picker on list-item
+     *  when `trailing` is `meta` / `none`). */
+    showWhen?: Record<string, string>;
+}
+/**
+ * One emitted event a component fires during interaction. Surfaces in
+ * the Events tab of the Properties pane: a static spec on top (what
+ * fires when, with what payload) and a live log below (chronological
+ * capture of real events from the canvas).
+ *
+ * Names use the canonical React handler name (`onClick`, `onChange`)
+ * rather than the DOM event name (`click`, `change`) so the spec reads
+ * the way a consumer would type it in JSX. The DOM-event → handler
+ * mapping lives in canvas.tsx's capture wrapper.
+ */
+export interface EventSpec {
+    /** Handler name, e.g. "onClick". */
+    name: string;
+    /** Short prose describing what triggers the event. */
+    description: string;
+    /** TypeScript-ish payload signature, e.g. "MouseEvent" or "{ value: string }". */
+    payload?: string;
+    /** Variant scoping — same shape as styleProperties.showWhen. */
+    showWhen?: Record<string, string>;
+}
+/**
+ * One prop in the developer-facing API documentation. Surfaces in the
+ * Dev tab's API section as a row in the props table.
+ *
+ * Authored alongside the atom (in the registry) rather than auto-
+ * extracted from TypeScript today. The shape mirrors what an
+ * extraction tool (react-docgen-typescript, ts-morph) would emit, so a
+ * future build-time generator can populate this slot without changing
+ * the consumer shape.
+ */
+export interface PropSpec {
+    /** Prop name as it appears in JSX, e.g. "variant". */
+    name: string;
+    /** TypeScript-ish type signature, e.g. `"primary" | "ghost"`, `ReactNode`, `(e: MouseEvent) => void`. */
+    type: string;
+    /** Whether the prop is required (no `?` in the source interface). */
+    required?: boolean;
+    /** Default value as it appears in the destructured fn signature, stringified. */
+    defaultValue?: string;
+    /** Short prose — JSDoc summary, or hand-authored description. */
+    description?: string;
+}
+/**
+ * Developer-facing API documentation for a component. Drives the Dev
+ * tab's API section (import path + props table + usage snippet).
+ * Optional — atoms without `api` show only Events + Variant Matrix.
+ */
+export interface ComponentApi {
+    /** Import path consumers use, e.g. "@modo/uxm/ui". */
+    importPath: string;
+    /** Named export(s) to import. Single string or array for atoms that ship multiple exports (Button family). */
+    importNames: string | string[];
+    /** Props in declaration order — exclude inherited HTML attributes for clarity. */
+    props: PropSpec[];
+}
+export interface ComponentDef {
+    id: string;
+    name: string;
+    category: Category;
+    description: string;
+    styleProperties: StyleProperty[];
+    layoutVariants: LayoutVariant[];
+    canvasBackground?: boolean;
+    /**
+     * Fill the canvas width and top-align instead of the default center-both-
+     * axes layout. For previews that are galleries / long lists (e.g. the Icon
+     * set grid) where centering wastes horizontal space and — worse — re-centres
+     * vertically as content height changes (a filter shrinking results makes the
+     * whole block jump); top-aligning keeps it anchored so filtering stays in
+     * place.
+     */
+    canvasFill?: boolean;
+    /** Optional event-API documentation, surfaced in the Events tab. */
+    events?: EventSpec[];
+    /** Optional dev-facing API documentation, surfaced in the Dev tab. */
+    api?: ComponentApi;
+}
+export type StyleOverrides = Record<string, string | number | boolean>;
+export type { PreviewProps } from '../../previews/index.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/studio/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/studio/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,GAAG,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExJ,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;+EAC2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;4DAGwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7F,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;+EAG2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd;;4EAEoE;QACpE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;KAC9C,CAAC,CAAC;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;+CAI2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,WAAW,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAQ;IACvB,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,yGAAyG;IACzG,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,kFAAkF;IAClF,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,aAAa,EAAE,CAAC;IACjC,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,sEAAsE;IACtE,GAAG,CAAC,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAKvE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/studio/lib/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/studio/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/studio/lib/use-global-theme.cjs

@@ -0,0 +1,42 @@
+"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 use_global_theme_exports = {};
+__export(use_global_theme_exports, {
+  useGlobalTheme: () => useGlobalTheme
+});
+module.exports = __toCommonJS(use_global_theme_exports);
+var import_react = require("react");
+function useGlobalTheme() {
+  return (0, import_react.useSyncExternalStore)(
+    (cb) => {
+      if (typeof document === "undefined") return () => {
+      };
+      const obs = new MutationObserver(cb);
+      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+      return () => obs.disconnect();
+    },
+    () => document.documentElement.dataset.theme === "dark" ? "dark" : "light",
+    () => "light"
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGlobalTheme
+});
+//# sourceMappingURL=use-global-theme.cjs.map

package/dist/studio/lib/use-global-theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/use-global-theme.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * Reads the current global theme from `document.documentElement.dataset.theme`\n * and re-renders when it changes. Lets UXM previews react to the host app's\n * light/dark toggle without owning theme state themselves.\n */\nexport function useGlobalTheme(): 'light' | 'dark' {\n  return useSyncExternalStore(\n    (cb) => {\n      if (typeof document === 'undefined') return () => {};\n      const obs = new MutationObserver(cb);\n      obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });\n      return () => obs.disconnect();\n    },\n    () => (document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'),\n    () => 'light',\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAO9B,SAAS,iBAAmC;AACjD,aAAO;AAAA,IACL,CAAC,OAAO;AACN,UAAI,OAAO,aAAa,YAAa,QAAO,MAAM;AAAA,MAAC;AACnD,YAAM,MAAM,IAAI,iBAAiB,EAAE;AACnC,UAAI,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,YAAY,EAAE,CAAC;AAC3F,aAAO,MAAM,IAAI,WAAW;AAAA,IAC9B;AAAA,IACA,MAAO,SAAS,gBAAgB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpE,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/studio/lib/use-global-theme.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reads the current global theme from `document.documentElement.dataset.theme`
+ * and re-renders when it changes. Lets UXM previews react to the host app's
+ * light/dark toggle without owning theme state themselves.
+ */
+export declare function useGlobalTheme(): 'light' | 'dark';
+//# sourceMappingURL=use-global-theme.d.ts.map

package/dist/studio/lib/use-global-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-global-theme.d.ts","sourceRoot":"","sources":["../../../src/studio/lib/use-global-theme.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,OAAO,GAAG,MAAM,CAWjD"}

package/dist/studio/lib/use-global-theme.js

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+function useGlobalTheme() {
+  return useSyncExternalStore(
+    (cb) => {
+      if (typeof document === "undefined") return () => {
+      };
+      const obs = new MutationObserver(cb);
+      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+      return () => obs.disconnect();
+    },
+    () => document.documentElement.dataset.theme === "dark" ? "dark" : "light",
+    () => "light"
+  );
+}
+export {
+  useGlobalTheme
+};
+//# sourceMappingURL=use-global-theme.js.map

package/dist/studio/lib/use-global-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/use-global-theme.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * Reads the current global theme from `document.documentElement.dataset.theme`\n * and re-renders when it changes. Lets UXM previews react to the host app's\n * light/dark toggle without owning theme state themselves.\n */\nexport function useGlobalTheme(): 'light' | 'dark' {\n  return useSyncExternalStore(\n    (cb) => {\n      if (typeof document === 'undefined') return () => {};\n      const obs = new MutationObserver(cb);\n      obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });\n      return () => obs.disconnect();\n    },\n    () => (document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'),\n    () => 'light',\n  );\n}\n"],"mappings":"AAAA,SAAS,4BAA4B;AAO9B,SAAS,iBAAmC;AACjD,SAAO;AAAA,IACL,CAAC,OAAO;AACN,UAAI,OAAO,aAAa,YAAa,QAAO,MAAM;AAAA,MAAC;AACnD,YAAM,MAAM,IAAI,iBAAiB,EAAE;AACnC,UAAI,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,YAAY,EAAE,CAAC;AAC3F,aAAO,MAAM,IAAI,WAAW;AAAA,IAC9B;AAAA,IACA,MAAO,SAAS,gBAAgB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpE,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/studio/mobile-gallery.cjs

@@ -0,0 +1,133 @@
+"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 mobile_gallery_exports = {};
+__export(mobile_gallery_exports, {
+  MobileGallery: () => MobileGallery
+});
+module.exports = __toCommonJS(mobile_gallery_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_previews = require("../previews/index.cjs");
+var import_ui = require("../ui/index.cjs");
+var import_context = require("./lib/context.cjs");
+var import_preview_shell = require("./lib/preview-shell.cjs");
+var import_registry = require("./lib/registry/index.cjs");
+var import_canvas = require("./shell/canvas.cjs");
+function resolveStylesAndVariants(def, overrides) {
+  const styles = {};
+  for (const prop of def.styleProperties) {
+    styles[prop.key] = overrides[prop.key] ?? prop.defaultValue;
+  }
+  const variants = {};
+  for (const v of def.layoutVariants) {
+    variants[v.key] = v.defaultValue;
+  }
+  return { styles, variants };
+}
+function MobileGallery() {
+  const { getAllOverrides } = (0, import_context.useUxm)();
+  const shell = (0, import_preview_shell.usePreviewShell)();
+  const allOverrides = getAllOverrides();
+  const galleryItems = (0, import_react.useMemo)(
+    () => import_registry.registry.filter((def) => def.id !== "brand-settings"),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full flex-col overflow-y-auto bg-card text-text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3 border-b border-border bg-accent-subtle/40 px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "sparkle", size: 20, className: "shrink-0 text-accent-bold" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[13px] font-semibold text-text", children: "Viewing on a small screen" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[12px] text-text-strong leading-relaxed", children: [
+          "Component editing is a desktop experience. You can still tweak brand settings below and browse the component gallery. ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-accent-bold", children: "Open UXM on desktop" }),
+          " to change styles, run the WCAG checker, and publish."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "border-b border-border px-4 py-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mb-3 text-[11px] font-semibold uppercase tracking-wider text-text-muted", children: "Brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_previews.BrandSettingsPreview,
+        {
+          styles: {},
+          variants: {},
+          componentId: "brand-settings",
+          shell
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "px-4 py-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mb-3 text-[11px] font-semibold uppercase tracking-wider text-text-muted", children: "Components" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: galleryItems.map((def) => {
+        const Preview = import_canvas.previewMap[def.id];
+        if (!Preview) return null;
+        const overrides = allOverrides[def.id] ?? {};
+        const { styles, variants } = resolveStylesAndVariants(def, overrides);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "article",
+          {
+            className: "overflow-hidden rounded-lg border border-border bg-surface",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "flex items-start justify-between gap-2 border-b border-border px-4 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "truncate text-[14px] font-semibold text-text", children: def.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-[11px] text-text-muted", children: def.description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "span",
+                  {
+                    className: "shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium text-text-strong",
+                    style: { backgroundColor: "var(--color-surface-alt)" },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "h-1.5 w-1.5 rounded-full",
+                          style: { backgroundColor: import_registry.categoryColors[def.category] }
+                        }
+                      ),
+                      def.category
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "flex min-h-[120px] items-center justify-center overflow-auto bg-card p-6",
+                  style: {
+                    backgroundImage: "radial-gradient(circle, var(--color-canvas-dot) 1px, transparent 1px)",
+                    backgroundSize: "20px 20px"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { pointerEvents: "none", maxWidth: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Preview, { styles, variants, componentId: def.id, shell }) })
+                }
+              )
+            ]
+          },
+          def.id
+        );
+      }) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobileGallery
+});
+//# sourceMappingURL=mobile-gallery.cjs.map