@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/lib/registry/composite/button-group.cjs

@@ -0,0 +1,76 @@
+"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 button_group_exports = {};
+__export(button_group_exports, {
+  buttonGroupDef: () => buttonGroupDef
+});
+module.exports = __toCommonJS(button_group_exports);
+const buttonGroupDef = {
+  id: "button-group",
+  name: "Button Group",
+  category: "Composite",
+  description: "Segmented button group with connected buttons. State knobs cover default / hover / focus / active / disabled across the individual button \u2014 the connecting border and outer frame are shared.",
+  styleProperties: [
+    // ── Frame (shared across all states — the connecting borders and
+    // outer rounded frame define the group as a single unit)
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px", section: "frame" },
+    // ── Per-state colors (filtered by State variant). Unlike the other
+    // segmented atoms, each button has its own non-transparent bg so
+    // every state owns both bg and text.
+    { key: "inactiveBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "default" } },
+    { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+    { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+    { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+    { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { state: "active" } },
+    { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "active" } },
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "disabled" } },
+    { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+    // Focus ring + disabled opacity in their own sections.
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // ── Shared sizing (applies to every button state)
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 2, unit: "px" }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "active", label: "Active" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user picks a different option.", payload: "{ value: string }" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buttonGroupDef
+});
+//# sourceMappingURL=button-group.cjs.map

package/dist/studio/lib/registry/composite/button-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/button-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const buttonGroupDef: ComponentDef = {\n  id: 'button-group',\n  name: 'Button Group',\n  category: 'Composite',\n  description: 'Segmented button group with connected buttons. State knobs cover default / hover / focus / active / disabled across the individual button — the connecting border and outer frame are shared.',\n  styleProperties: [\n    // ── Frame (shared across all states — the connecting borders and\n    // outer rounded frame define the group as a single unit)\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'frame' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'frame' },\n    // ── Per-state colors (filtered by State variant). Unlike the other\n    // segmented atoms, each button has its own non-transparent bg so\n    // every state owns both bg and text.\n    { key: 'inactiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'inactiveText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'states', showWhen: { state: 'disabled' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections.\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // ── Shared sizing (applies to every button state)\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 4, max: 16, step: 2, unit: 'px' },\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: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,iBAA+B;AAAA,EAC1C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA;AAAA,IAGf,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,QAAQ;AAAA,IACrH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI1I,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACjJ,EAAE,KAAK,gBAAgB,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,OAAO,UAAU,EAAE;AAAA,IACzJ,EAAE,KAAK,WAAW,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACnJ,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IAC9I,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IAC9I,EAAE,KAAK,YAAY,OAAO,cAAc,SAAS,SAAS,cAAc,8BAA8B,SAAS,UAAU,UAAU,EAAE,OAAO,SAAS,EAAE;AAAA,IACvJ,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,UAAU,UAAU,EAAE,OAAO,SAAS,EAAE;AAAA,IACvJ,EAAE,KAAK,cAAc,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA,IAClJ,EAAE,KAAK,gBAAgB,OAAO,cAAc,SAAS,SAAS,cAAc,2BAA2B,SAAS,UAAU,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1J,EAAE,KAAK,aAAa,OAAO,cAAc,SAAS,SAAS,cAAc,uBAAuB,SAAS,cAAc,UAAU,EAAE,OAAO,QAAQ,EAAE;AAAA,IACpJ,EAAE,KAAK,mBAAmB,OAAO,WAAW,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,GAAG,MAAM,MAAM,SAAS,iBAAiB,UAAU,EAAE,OAAO,WAAW,EAAE;AAAA;AAAA,IAE1K,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAClH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACjH,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,EAClH;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,QACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,QACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,QACnC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,MACzC;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,EAAE,MAAM,YAAY,aAAa,iDAAiD,SAAS,oBAAoB;AAAA,EACjH;AACF;","names":[]}

package/dist/studio/lib/registry/composite/button-group.d.ts

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

package/dist/studio/lib/registry/composite/button-group.d.ts.map

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

package/dist/studio/lib/registry/composite/button-group.js

@@ -0,0 +1,52 @@
+const buttonGroupDef = {
+  id: "button-group",
+  name: "Button Group",
+  category: "Composite",
+  description: "Segmented button group with connected buttons. State knobs cover default / hover / focus / active / disabled across the individual button \u2014 the connecting border and outer frame are shared.",
+  styleProperties: [
+    // ── Frame (shared across all states — the connecting borders and
+    // outer rounded frame define the group as a single unit)
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 8, min: 0, max: 20, step: 1, unit: "px", section: "frame" },
+    // ── Per-state colors (filtered by State variant). Unlike the other
+    // segmented atoms, each button has its own non-transparent bg so
+    // every state owns both bg and text.
+    { key: "inactiveBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "default" } },
+    { key: "inactiveText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "default" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "states", showWhen: { state: "hover" } },
+    { key: "hoverText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "hover" } },
+    { key: "focusText", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "states", showWhen: { state: "focus" } },
+    { key: "activeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "states", showWhen: { state: "active" } },
+    { key: "activeText", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "states", showWhen: { state: "active" } },
+    { key: "disabledBg", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "states", showWhen: { state: "disabled" } },
+    { key: "disabledText", label: "Text Color", control: "color", defaultValue: "var(--color-text-muted)", section: "states", showWhen: { state: "disabled" } },
+    // Focus ring + disabled opacity in their own sections.
+    { key: "focusRing", label: "Ring Color", control: "color", defaultValue: "var(--color-accent)", section: "focusState", showWhen: { state: "focus" } },
+    { key: "disabledOpacity", label: "Opacity", control: "slider", defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: "disabledState", showWhen: { state: "disabled" } },
+    // ── Shared sizing (applies to every button state)
+    { key: "fontSize", label: "Font Size", control: "number", defaultValue: 13, min: 10, max: 18, step: 1, unit: "px" },
+    { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+    { key: "paddingY", label: "Padding Y", control: "number", defaultValue: 8, min: 4, max: 16, step: 2, unit: "px" }
+  ],
+  layoutVariants: [
+    {
+      key: "state",
+      label: "State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "active", label: "Active" },
+        { value: "disabled", label: "Disabled" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user picks a different option.", payload: "{ value: string }" }
+  ]
+};
+export {
+  buttonGroupDef
+};
+//# sourceMappingURL=button-group.js.map

package/dist/studio/lib/registry/composite/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/button-group.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const buttonGroupDef: ComponentDef = {\n  id: 'button-group',\n  name: 'Button Group',\n  category: 'Composite',\n  description: 'Segmented button group with connected buttons. State knobs cover default / hover / focus / active / disabled across the individual button — the connecting border and outer frame are shared.',\n  styleProperties: [\n    // ── Frame (shared across all states — the connecting borders and\n    // outer rounded frame define the group as a single unit)\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'frame' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 8, min: 0, max: 20, step: 1, unit: 'px', section: 'frame' },\n    // ── Per-state colors (filtered by State variant). Unlike the other\n    // segmented atoms, each button has its own non-transparent bg so\n    // every state owns both bg and text.\n    { key: 'inactiveBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'inactiveText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'default' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'hoverText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'hover' } },\n    { key: 'focusText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'states', showWhen: { state: 'focus' } },\n    { key: 'activeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'activeText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'states', showWhen: { state: 'active' } },\n    { key: 'disabledBg', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'states', showWhen: { state: 'disabled' } },\n    { key: 'disabledText', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'states', showWhen: { state: 'disabled' } },\n    // Focus ring + disabled opacity in their own sections.\n    { key: 'focusRing', label: 'Ring Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'focusState', showWhen: { state: 'focus' } },\n    { key: 'disabledOpacity', label: 'Opacity', control: 'slider', defaultValue: 0.5, min: 0.1, max: 1, step: 0.05, section: 'disabledState', showWhen: { state: 'disabled' } },\n    // ── Shared sizing (applies to every button state)\n    { key: 'fontSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 10, max: 18, step: 1, unit: 'px' },\n    { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n    { key: 'paddingY', label: 'Padding Y', control: 'number', defaultValue: 8, min: 4, max: 16, step: 2, unit: 'px' },\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: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a different option.', payload: '{ value: string }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/calendar.cjs

@@ -0,0 +1,116 @@
+"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 calendar_exports = {};
+__export(calendar_exports, {
+  calendarDef: () => calendarDef
+});
+module.exports = __toCommonJS(calendar_exports);
+const calendarDef = {
+  id: "calendar",
+  name: "Calendar",
+  category: "Display",
+  description: "Month-view calendar. Selects today on mount; click a day to move the selection. Today's outline stays put regardless of selection. Light-touch atom \u2014 selection state internal (overridable), no library binding.",
+  styleProperties: [
+    // ── Frame: the outer container's surface, border, corners, padding.
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "frame" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 24, step: 1, unit: "px", section: "frame" },
+    { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px", section: "frame" },
+    // Elevation — on by default (the floating-surface look), tunable rather
+    // than a bare on/off: the box-shadow is built from these three vars.
+    // (Code can still drop it entirely with the `shadow={false}` prop.)
+    { key: "shadowColor", label: "Color", control: "color", defaultValue: "rgba(0, 0, 0, 0.12)", section: "shadow" },
+    { key: "shadowBlur", label: "Blur", control: "slider", defaultValue: 20, min: 0, max: 48, step: 1, unit: "px", section: "shadow" },
+    { key: "shadowOffsetY", label: "Offset Y", control: "slider", defaultValue: 6, min: 0, max: 24, step: 1, unit: "px", section: "shadow" },
+    // ── Header: month / year label + prev/next nav buttons.
+    { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "header" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 12, max: 20, step: 1, unit: "px", section: "header" },
+    { key: "navColor", label: "Nav Button Color", control: "color", defaultValue: "var(--color-text-muted)", section: "header" },
+    // ── Weekday row: the "Sun Mon Tue..." labels above the day grid.
+    { key: "weekdayColor", label: "Weekday Color", control: "color", defaultValue: "var(--color-text-muted)", section: "weekday" },
+    { key: "weekdaySize", label: "Weekday Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px", section: "weekday" },
+    // ── Shared States: state colors that apply across day, month, and
+    // year cells. Tuning these once changes all three cell types in the
+    // matching state. Section appears only for the four states whose
+    // knobs live here (default / today / selected / hover). Listed before
+    // per-cell-type sections so designers tune cross-cutting concerns first.
+    { key: "defaultColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "shared-states", showWhen: { cellState: "default" } },
+    { key: "todayBorderColor", label: "Outline Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+    { key: "todayColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+    { key: "selectedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "selected" } },
+    { key: "selectedColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "shared-states", showWhen: { cellState: "selected" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-text) 6%, transparent)", section: "shared-states", showWhen: { cellState: "hover" } },
+    // ── Date Cell: dimensions + day-only state colors. In-range / range
+    // edges / outside-month / disabled only exist on day cells, so their
+    // color knobs live here gated by `cellState`. (Today, selected, hover,
+    // and default text color are shared across all cell types — those
+    // live in "Shared States" above.)
+    { key: "cellSize", label: "Cell Size", control: "number", defaultValue: 36, min: 28, max: 48, step: 2, unit: "px", section: "day-cell" },
+    { key: "cellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "day-cell" },
+    { key: "cellRadius", label: "Cell Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "day-cell" },
+    { key: "inRangeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "day-cell", showWhen: { cellState: "in-range" } },
+    { key: "inRangeColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "in-range" } },
+    { key: "rangeStartBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-start" } },
+    { key: "rangeStartColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-start" } },
+    { key: "rangeEndBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-end" } },
+    { key: "rangeEndColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-end" } },
+    { key: "outsideColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "outside" } },
+    { key: "disabledColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "disabled" } },
+    // ── Month & Year Cells: drill-up navigation surfaces. One Cell Size
+    // knob drives both dimensions (square cells, same pattern as Date Cell)
+    // and is shared between month and year cells — they live in the same
+    // 4-col grid with the same visual role, so one set of knobs is enough.
+    // Knob keeps the `monthCell` prefix; CSS for both `.uxm-calendar__month`
+    // and `.uxm-calendar__year` reads it.
+    { key: "monthCellSize", label: "Cell Size", control: "number", defaultValue: 64, min: 40, max: 120, step: 4, unit: "px", section: "month-year-cells" },
+    { key: "monthCellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "month-year-cells" },
+    // ── Today button: the footer action that jumps the view back to the
+    // current month. Its own knobs (not the today-CELL ones above).
+    { key: "todayButtonColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent)", section: "todayButton" },
+    { key: "todayButtonHoverBg", label: "Hover Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-accent) 12%, transparent)", section: "todayButton" },
+    { key: "todayButtonSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "todayButton" }
+  ],
+  layoutVariants: [
+    {
+      key: "cellState",
+      label: "Cell State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "today", label: "Today" },
+        { value: "selected", label: "Selected" },
+        { value: "in-range", label: "In Range" },
+        { value: "range-start", label: "Range Start" },
+        { value: "range-end", label: "Range End" },
+        { value: "outside", label: "Outside Month" },
+        { value: "disabled", label: "Disabled" },
+        { value: "hover", label: "Hover" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user picks a date cell.", payload: "{ value: Date }" },
+    { name: "onMonthChange", description: "Fires when the user navigates to a different month via the prev/next chevrons or by tapping the header.", payload: "{ year: number, month: number }" }
+  ]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calendarDef
+});
+//# sourceMappingURL=calendar.cjs.map

package/dist/studio/lib/registry/composite/calendar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/calendar.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const calendarDef: ComponentDef = {\n  id: 'calendar',\n  name: 'Calendar',\n  category: 'Display',\n  description: \"Month-view calendar. Selects today on mount; click a day to move the selection. Today's outline stays put regardless of selection. Light-touch atom — selection state internal (overridable), no library binding.\",\n  styleProperties: [\n    // ── Frame: the outer container's surface, border, corners, padding.\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'frame' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'frame' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px', section: 'frame' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 16, min: 4, max: 32, step: 2, unit: 'px', section: 'frame' },\n    // Elevation — on by default (the floating-surface look), tunable rather\n    // than a bare on/off: the box-shadow is built from these three vars.\n    // (Code can still drop it entirely with the `shadow={false}` prop.)\n    { key: 'shadowColor', label: 'Color', control: 'color', defaultValue: 'rgba(0, 0, 0, 0.12)', section: 'shadow' },\n    { key: 'shadowBlur', label: 'Blur', control: 'slider', defaultValue: 20, min: 0, max: 48, step: 1, unit: 'px', section: 'shadow' },\n    { key: 'shadowOffsetY', label: 'Offset Y', control: 'slider', defaultValue: 6, min: 0, max: 24, step: 1, unit: 'px', section: 'shadow' },\n\n    // ── Header: month / year label + prev/next nav buttons.\n    { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text)', section: 'header' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 14, min: 12, max: 20, step: 1, unit: 'px', section: 'header' },\n    { key: 'navColor', label: 'Nav Button Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'header' },\n\n    // ── Weekday row: the \"Sun Mon Tue...\" labels above the day grid.\n    { key: 'weekdayColor', label: 'Weekday Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'weekday' },\n    { key: 'weekdaySize', label: 'Weekday Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'weekday' },\n\n    // ── Shared States: state colors that apply across day, month, and\n    // year cells. Tuning these once changes all three cell types in the\n    // matching state. Section appears only for the four states whose\n    // knobs live here (default / today / selected / hover). Listed before\n    // per-cell-type sections so designers tune cross-cutting concerns first.\n    { key: 'defaultColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'shared-states', showWhen: { cellState: 'default' } },\n    { key: 'todayBorderColor', label: 'Outline Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'today' } },\n    { key: 'todayColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'today' } },\n    { key: 'selectedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'selected' } },\n    { key: 'selectedColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'shared-states', showWhen: { cellState: 'selected' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-text) 6%, transparent)', section: 'shared-states', showWhen: { cellState: 'hover' } },\n\n    // ── Date Cell: dimensions + day-only state colors. In-range / range\n    // edges / outside-month / disabled only exist on day cells, so their\n    // color knobs live here gated by `cellState`. (Today, selected, hover,\n    // and default text color are shared across all cell types — those\n    // live in \"Shared States\" above.)\n    { key: 'cellSize', label: 'Cell Size', control: 'number', defaultValue: 36, min: 28, max: 48, step: 2, unit: 'px', section: 'day-cell' },\n    { key: 'cellFontSize', label: 'Cell Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'day-cell' },\n    { key: 'cellRadius', label: 'Cell Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'day-cell' },\n    { key: 'inRangeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'day-cell', showWhen: { cellState: 'in-range' } },\n    { key: 'inRangeColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'in-range' } },\n    { key: 'rangeStartBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'range-start' } },\n    { key: 'rangeStartColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'day-cell', showWhen: { cellState: 'range-start' } },\n    { key: 'rangeEndBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'range-end' } },\n    { key: 'rangeEndColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'day-cell', showWhen: { cellState: 'range-end' } },\n    { key: 'outsideColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'day-cell', showWhen: { cellState: 'outside' } },\n    { key: 'disabledColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'day-cell', showWhen: { cellState: 'disabled' } },\n\n    // ── Month & Year Cells: drill-up navigation surfaces. One Cell Size\n    // knob drives both dimensions (square cells, same pattern as Date Cell)\n    // and is shared between month and year cells — they live in the same\n    // 4-col grid with the same visual role, so one set of knobs is enough.\n    // Knob keeps the `monthCell` prefix; CSS for both `.uxm-calendar__month`\n    // and `.uxm-calendar__year` reads it.\n    { key: 'monthCellSize', label: 'Cell Size', control: 'number', defaultValue: 64, min: 40, max: 120, step: 4, unit: 'px', section: 'month-year-cells' },\n    { key: 'monthCellFontSize', label: 'Cell Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'month-year-cells' },\n\n    // ── Today button: the footer action that jumps the view back to the\n    // current month. Its own knobs (not the today-CELL ones above).\n    { key: 'todayButtonColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'todayButton' },\n    { key: 'todayButtonHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 12%, transparent)', section: 'todayButton' },\n    { key: 'todayButtonSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'todayButton' },\n  ],\n  layoutVariants: [\n    {\n      key: 'cellState',\n      label: 'Cell State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'today', label: 'Today' },\n        { value: 'selected', label: 'Selected' },\n        { value: 'in-range', label: 'In Range' },\n        { value: 'range-start', label: 'Range Start' },\n        { value: 'range-end', label: 'Range End' },\n        { value: 'outside', label: 'Outside Month' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'hover', label: 'Hover' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a date cell.', payload: '{ value: Date }' },\n    { name: 'onMonthChange', description: 'Fires when the user navigates to a different month via the prev/next chevrons or by tapping the header.', payload: '{ year: number, month: number }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/calendar.d.ts

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

package/dist/studio/lib/registry/composite/calendar.d.ts.map

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

package/dist/studio/lib/registry/composite/calendar.js

@@ -0,0 +1,92 @@
+const calendarDef = {
+  id: "calendar",
+  name: "Calendar",
+  category: "Display",
+  description: "Month-view calendar. Selects today on mount; click a day to move the selection. Today's outline stays put regardless of selection. Light-touch atom \u2014 selection state internal (overridable), no library binding.",
+  styleProperties: [
+    // ── Frame: the outer container's surface, border, corners, padding.
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface)", section: "frame" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "frame" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 24, step: 1, unit: "px", section: "frame" },
+    { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 4, max: 32, step: 2, unit: "px", section: "frame" },
+    // Elevation — on by default (the floating-surface look), tunable rather
+    // than a bare on/off: the box-shadow is built from these three vars.
+    // (Code can still drop it entirely with the `shadow={false}` prop.)
+    { key: "shadowColor", label: "Color", control: "color", defaultValue: "rgba(0, 0, 0, 0.12)", section: "shadow" },
+    { key: "shadowBlur", label: "Blur", control: "slider", defaultValue: 20, min: 0, max: 48, step: 1, unit: "px", section: "shadow" },
+    { key: "shadowOffsetY", label: "Offset Y", control: "slider", defaultValue: 6, min: 0, max: 24, step: 1, unit: "px", section: "shadow" },
+    // ── Header: month / year label + prev/next nav buttons.
+    { key: "titleColor", label: "Title Color", control: "color", defaultValue: "var(--color-text)", section: "header" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 12, max: 20, step: 1, unit: "px", section: "header" },
+    { key: "navColor", label: "Nav Button Color", control: "color", defaultValue: "var(--color-text-muted)", section: "header" },
+    // ── Weekday row: the "Sun Mon Tue..." labels above the day grid.
+    { key: "weekdayColor", label: "Weekday Color", control: "color", defaultValue: "var(--color-text-muted)", section: "weekday" },
+    { key: "weekdaySize", label: "Weekday Size", control: "number", defaultValue: 11, min: 9, max: 14, step: 1, unit: "px", section: "weekday" },
+    // ── Shared States: state colors that apply across day, month, and
+    // year cells. Tuning these once changes all three cell types in the
+    // matching state. Section appears only for the four states whose
+    // knobs live here (default / today / selected / hover). Listed before
+    // per-cell-type sections so designers tune cross-cutting concerns first.
+    { key: "defaultColor", label: "Text Color", control: "color", defaultValue: "var(--color-text)", section: "shared-states", showWhen: { cellState: "default" } },
+    { key: "todayBorderColor", label: "Outline Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+    { key: "todayColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "today" } },
+    { key: "selectedBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "shared-states", showWhen: { cellState: "selected" } },
+    { key: "selectedColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "shared-states", showWhen: { cellState: "selected" } },
+    { key: "hoverBg", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-text) 6%, transparent)", section: "shared-states", showWhen: { cellState: "hover" } },
+    // ── Date Cell: dimensions + day-only state colors. In-range / range
+    // edges / outside-month / disabled only exist on day cells, so their
+    // color knobs live here gated by `cellState`. (Today, selected, hover,
+    // and default text color are shared across all cell types — those
+    // live in "Shared States" above.)
+    { key: "cellSize", label: "Cell Size", control: "number", defaultValue: 36, min: 28, max: 48, step: 2, unit: "px", section: "day-cell" },
+    { key: "cellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "day-cell" },
+    { key: "cellRadius", label: "Cell Radius", control: "slider", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "day-cell" },
+    { key: "inRangeBg", label: "Background", control: "color", defaultValue: "var(--color-accent-subtle)", section: "day-cell", showWhen: { cellState: "in-range" } },
+    { key: "inRangeColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "in-range" } },
+    { key: "rangeStartBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-start" } },
+    { key: "rangeStartColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-start" } },
+    { key: "rangeEndBg", label: "Background", control: "color", defaultValue: "var(--color-accent-bold)", section: "day-cell", showWhen: { cellState: "range-end" } },
+    { key: "rangeEndColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-inverse)", section: "day-cell", showWhen: { cellState: "range-end" } },
+    { key: "outsideColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "outside" } },
+    { key: "disabledColor", label: "Text Color", control: "color", defaultValue: "var(--color-text-subtle)", section: "day-cell", showWhen: { cellState: "disabled" } },
+    // ── Month & Year Cells: drill-up navigation surfaces. One Cell Size
+    // knob drives both dimensions (square cells, same pattern as Date Cell)
+    // and is shared between month and year cells — they live in the same
+    // 4-col grid with the same visual role, so one set of knobs is enough.
+    // Knob keeps the `monthCell` prefix; CSS for both `.uxm-calendar__month`
+    // and `.uxm-calendar__year` reads it.
+    { key: "monthCellSize", label: "Cell Size", control: "number", defaultValue: 64, min: 40, max: 120, step: 4, unit: "px", section: "month-year-cells" },
+    { key: "monthCellFontSize", label: "Cell Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "month-year-cells" },
+    // ── Today button: the footer action that jumps the view back to the
+    // current month. Its own knobs (not the today-CELL ones above).
+    { key: "todayButtonColor", label: "Text Color", control: "color", defaultValue: "var(--color-accent)", section: "todayButton" },
+    { key: "todayButtonHoverBg", label: "Hover Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-accent) 12%, transparent)", section: "todayButton" },
+    { key: "todayButtonSize", label: "Font Size", control: "number", defaultValue: 13, min: 11, max: 18, step: 1, unit: "px", section: "todayButton" }
+  ],
+  layoutVariants: [
+    {
+      key: "cellState",
+      label: "Cell State",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "today", label: "Today" },
+        { value: "selected", label: "Selected" },
+        { value: "in-range", label: "In Range" },
+        { value: "range-start", label: "Range Start" },
+        { value: "range-end", label: "Range End" },
+        { value: "outside", label: "Outside Month" },
+        { value: "disabled", label: "Disabled" },
+        { value: "hover", label: "Hover" }
+      ],
+      defaultValue: "default"
+    }
+  ],
+  events: [
+    { name: "onChange", description: "Fires when the user picks a date cell.", payload: "{ value: Date }" },
+    { name: "onMonthChange", description: "Fires when the user navigates to a different month via the prev/next chevrons or by tapping the header.", payload: "{ year: number, month: number }" }
+  ]
+};
+export {
+  calendarDef
+};
+//# sourceMappingURL=calendar.js.map

package/dist/studio/lib/registry/composite/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/calendar.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const calendarDef: ComponentDef = {\n  id: 'calendar',\n  name: 'Calendar',\n  category: 'Display',\n  description: \"Month-view calendar. Selects today on mount; click a day to move the selection. Today's outline stays put regardless of selection. Light-touch atom — selection state internal (overridable), no library binding.\",\n  styleProperties: [\n    // ── Frame: the outer container's surface, border, corners, padding.\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface)', section: 'frame' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'frame' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 24, step: 1, unit: 'px', section: 'frame' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 16, min: 4, max: 32, step: 2, unit: 'px', section: 'frame' },\n    // Elevation — on by default (the floating-surface look), tunable rather\n    // than a bare on/off: the box-shadow is built from these three vars.\n    // (Code can still drop it entirely with the `shadow={false}` prop.)\n    { key: 'shadowColor', label: 'Color', control: 'color', defaultValue: 'rgba(0, 0, 0, 0.12)', section: 'shadow' },\n    { key: 'shadowBlur', label: 'Blur', control: 'slider', defaultValue: 20, min: 0, max: 48, step: 1, unit: 'px', section: 'shadow' },\n    { key: 'shadowOffsetY', label: 'Offset Y', control: 'slider', defaultValue: 6, min: 0, max: 24, step: 1, unit: 'px', section: 'shadow' },\n\n    // ── Header: month / year label + prev/next nav buttons.\n    { key: 'titleColor', label: 'Title Color', control: 'color', defaultValue: 'var(--color-text)', section: 'header' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 14, min: 12, max: 20, step: 1, unit: 'px', section: 'header' },\n    { key: 'navColor', label: 'Nav Button Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'header' },\n\n    // ── Weekday row: the \"Sun Mon Tue...\" labels above the day grid.\n    { key: 'weekdayColor', label: 'Weekday Color', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'weekday' },\n    { key: 'weekdaySize', label: 'Weekday Size', control: 'number', defaultValue: 11, min: 9, max: 14, step: 1, unit: 'px', section: 'weekday' },\n\n    // ── Shared States: state colors that apply across day, month, and\n    // year cells. Tuning these once changes all three cell types in the\n    // matching state. Section appears only for the four states whose\n    // knobs live here (default / today / selected / hover). Listed before\n    // per-cell-type sections so designers tune cross-cutting concerns first.\n    { key: 'defaultColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text)', section: 'shared-states', showWhen: { cellState: 'default' } },\n    { key: 'todayBorderColor', label: 'Outline Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'today' } },\n    { key: 'todayColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'today' } },\n    { key: 'selectedBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'shared-states', showWhen: { cellState: 'selected' } },\n    { key: 'selectedColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'shared-states', showWhen: { cellState: 'selected' } },\n    { key: 'hoverBg', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-text) 6%, transparent)', section: 'shared-states', showWhen: { cellState: 'hover' } },\n\n    // ── Date Cell: dimensions + day-only state colors. In-range / range\n    // edges / outside-month / disabled only exist on day cells, so their\n    // color knobs live here gated by `cellState`. (Today, selected, hover,\n    // and default text color are shared across all cell types — those\n    // live in \"Shared States\" above.)\n    { key: 'cellSize', label: 'Cell Size', control: 'number', defaultValue: 36, min: 28, max: 48, step: 2, unit: 'px', section: 'day-cell' },\n    { key: 'cellFontSize', label: 'Cell Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'day-cell' },\n    { key: 'cellRadius', label: 'Cell Radius', control: 'slider', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'day-cell' },\n    { key: 'inRangeBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-subtle)', section: 'day-cell', showWhen: { cellState: 'in-range' } },\n    { key: 'inRangeColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'in-range' } },\n    { key: 'rangeStartBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'range-start' } },\n    { key: 'rangeStartColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'day-cell', showWhen: { cellState: 'range-start' } },\n    { key: 'rangeEndBg', label: 'Background', control: 'color', defaultValue: 'var(--color-accent-bold)', section: 'day-cell', showWhen: { cellState: 'range-end' } },\n    { key: 'rangeEndColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-inverse)', section: 'day-cell', showWhen: { cellState: 'range-end' } },\n    { key: 'outsideColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'day-cell', showWhen: { cellState: 'outside' } },\n    { key: 'disabledColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-text-subtle)', section: 'day-cell', showWhen: { cellState: 'disabled' } },\n\n    // ── Month & Year Cells: drill-up navigation surfaces. One Cell Size\n    // knob drives both dimensions (square cells, same pattern as Date Cell)\n    // and is shared between month and year cells — they live in the same\n    // 4-col grid with the same visual role, so one set of knobs is enough.\n    // Knob keeps the `monthCell` prefix; CSS for both `.uxm-calendar__month`\n    // and `.uxm-calendar__year` reads it.\n    { key: 'monthCellSize', label: 'Cell Size', control: 'number', defaultValue: 64, min: 40, max: 120, step: 4, unit: 'px', section: 'month-year-cells' },\n    { key: 'monthCellFontSize', label: 'Cell Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'month-year-cells' },\n\n    // ── Today button: the footer action that jumps the view back to the\n    // current month. Its own knobs (not the today-CELL ones above).\n    { key: 'todayButtonColor', label: 'Text Color', control: 'color', defaultValue: 'var(--color-accent)', section: 'todayButton' },\n    { key: 'todayButtonHoverBg', label: 'Hover Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-accent) 12%, transparent)', section: 'todayButton' },\n    { key: 'todayButtonSize', label: 'Font Size', control: 'number', defaultValue: 13, min: 11, max: 18, step: 1, unit: 'px', section: 'todayButton' },\n  ],\n  layoutVariants: [\n    {\n      key: 'cellState',\n      label: 'Cell State',\n      options: [\n        { value: 'default', label: 'Default' },\n        { value: 'today', label: 'Today' },\n        { value: 'selected', label: 'Selected' },\n        { value: 'in-range', label: 'In Range' },\n        { value: 'range-start', label: 'Range Start' },\n        { value: 'range-end', label: 'Range End' },\n        { value: 'outside', label: 'Outside Month' },\n        { value: 'disabled', label: 'Disabled' },\n        { value: 'hover', label: 'Hover' },\n      ],\n      defaultValue: 'default',\n    },\n  ],\n  events: [\n    { name: 'onChange', description: 'Fires when the user picks a date cell.', payload: '{ value: Date }' },\n    { name: 'onMonthChange', description: 'Fires when the user navigates to a different month via the prev/next chevrons or by tapping the header.', payload: '{ year: number, month: number }' },\n  ],\n};\n"],"mappings":"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","names":[]}

package/dist/studio/lib/registry/composite/content-tooltip.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 content_tooltip_exports = {};
+__export(content_tooltip_exports, {
+  contentTooltipDef: () => contentTooltipDef
+});
+module.exports = __toCommonJS(content_tooltip_exports);
+const contentTooltipDef = {
+  id: "content-tooltip",
+  name: "Content Tooltip",
+  category: "Composite",
+  description: "Rich tooltip with title, description, and action.",
+  styleProperties: [
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 20, step: 1, unit: "px" },
+    { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 8, max: 32, step: 4, unit: "px" },
+    { key: "shadow", label: "Shadow", control: "toggle", defaultValue: true },
+    { key: "maxWidth", label: "Max Width", control: "number", defaultValue: 280, min: 180, max: 400, step: 20, unit: "px" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px" }
+  ],
+  layoutVariants: []
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  contentTooltipDef
+});
+//# sourceMappingURL=content-tooltip.cjs.map

package/dist/studio/lib/registry/composite/content-tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/content-tooltip.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const contentTooltipDef: ComponentDef = {\n  id: 'content-tooltip',\n  name: 'Content Tooltip',\n  category: 'Composite',\n  description: 'Rich tooltip with title, description, and action.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 20, step: 1, unit: 'px' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 16, min: 8, max: 32, step: 4, unit: 'px' },\n    { key: 'shadow', label: 'Shadow', control: 'toggle', defaultValue: true },\n    { key: 'maxWidth', label: 'Max Width', control: 'number', defaultValue: 280, min: 180, max: 400, step: 20, unit: 'px' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 14, min: 11, max: 18, step: 1, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAkC;AAAA,EAC7C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,WAAW,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC9G,EAAE,KAAK,UAAU,OAAO,UAAU,SAAS,UAAU,cAAc,KAAK;AAAA,IACxE,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK;AAAA,IACtH,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/content-tooltip.d.ts

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

package/dist/studio/lib/registry/composite/content-tooltip.d.ts.map

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

package/dist/studio/lib/registry/composite/content-tooltip.js

@@ -0,0 +1,20 @@
+const contentTooltipDef = {
+  id: "content-tooltip",
+  name: "Content Tooltip",
+  category: "Composite",
+  description: "Rich tooltip with title, description, and action.",
+  styleProperties: [
+    { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-card)", section: "colors" },
+    { key: "borderColor", label: "Border Color", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+    { key: "borderRadius", label: "Border Radius", control: "slider", defaultValue: 12, min: 0, max: 20, step: 1, unit: "px" },
+    { key: "padding", label: "Padding", control: "number", defaultValue: 16, min: 8, max: 32, step: 4, unit: "px" },
+    { key: "shadow", label: "Shadow", control: "toggle", defaultValue: true },
+    { key: "maxWidth", label: "Max Width", control: "number", defaultValue: 280, min: 180, max: 400, step: 20, unit: "px" },
+    { key: "titleSize", label: "Title Size", control: "number", defaultValue: 14, min: 11, max: 18, step: 1, unit: "px" }
+  ],
+  layoutVariants: []
+};
+export {
+  contentTooltipDef
+};
+//# sourceMappingURL=content-tooltip.js.map

package/dist/studio/lib/registry/composite/content-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/studio/lib/registry/composite/content-tooltip.ts"],"sourcesContent":["import type { ComponentDef } from '../../types';\n\nexport const contentTooltipDef: ComponentDef = {\n  id: 'content-tooltip',\n  name: 'Content Tooltip',\n  category: 'Composite',\n  description: 'Rich tooltip with title, description, and action.',\n  styleProperties: [\n    { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-card)', section: 'colors' },\n    { key: 'borderColor', label: 'Border Color', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n    { key: 'borderRadius', label: 'Border Radius', control: 'slider', defaultValue: 12, min: 0, max: 20, step: 1, unit: 'px' },\n    { key: 'padding', label: 'Padding', control: 'number', defaultValue: 16, min: 8, max: 32, step: 4, unit: 'px' },\n    { key: 'shadow', label: 'Shadow', control: 'toggle', defaultValue: true },\n    { key: 'maxWidth', label: 'Max Width', control: 'number', defaultValue: 280, min: 180, max: 400, step: 20, unit: 'px' },\n    { key: 'titleSize', label: 'Title Size', control: 'number', defaultValue: 14, min: 11, max: 18, step: 1, unit: 'px' },\n  ],\n  layoutVariants: [],\n};\n"],"mappings":"AAEO,MAAM,oBAAkC;AAAA,EAC7C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,IACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,qBAAqB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,eAAe,OAAO,gBAAgB,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,IACtH,EAAE,KAAK,gBAAgB,OAAO,iBAAiB,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IACzH,EAAE,KAAK,WAAW,OAAO,WAAW,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,IAC9G,EAAE,KAAK,UAAU,OAAO,UAAU,SAAS,UAAU,cAAc,KAAK;AAAA,IACxE,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK;AAAA,IACtH,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":[]}