@viax.io/uxm 4.36.0

package/dist/studio/favicon-sync.js

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useUxm } from "./lib/context.js";
+const LINK_ID = "uxm-brand-favicon";
+function FaviconSync() {
+  const { brand, theme } = useUxm();
+  const favicon = theme === "dark" ? brand.faviconUrlDark || brand.faviconUrl : brand.faviconUrl;
+  useEffect(() => {
+    if (!favicon) return;
+    document.querySelectorAll(`link#${LINK_ID}`).forEach((el) => el.remove());
+    document.querySelectorAll("link[rel='icon'], link[rel='shortcut icon']").forEach((el) => {
+      if (el.id !== LINK_ID) el.setAttribute("disabled", "true");
+    });
+    const link = document.createElement("link");
+    link.id = LINK_ID;
+    link.rel = "icon";
+    link.href = favicon + (favicon.includes("?") ? "&" : "?") + "v=" + Date.now();
+    document.head.appendChild(link);
+  }, [favicon]);
+  return null;
+}
+export {
+  FaviconSync
+};
+//# sourceMappingURL=favicon-sync.js.map

package/dist/studio/favicon-sync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/favicon-sync.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useUxm } from './lib/context';\n\nconst LINK_ID = 'uxm-brand-favicon';\n\n/**\n * Syncs the document favicon to the workbench brand. Host-opt-in via\n * `UxmApp`'s `syncFavicon` prop (off by default) so a host that manages its\n * own favicon (e.g. a Next app) isn't double-driven. Resolves the dark\n * favicon when the workbench theme is dark, falling back to the light one.\n */\nexport function FaviconSync() {\n  const { brand, theme } = useUxm();\n  const favicon =\n    theme === 'dark' ? brand.faviconUrlDark || brand.faviconUrl : brand.faviconUrl;\n\n  useEffect(() => {\n    if (!favicon) return;\n\n    document.querySelectorAll(`link#${LINK_ID}`).forEach((el) => el.remove());\n    document\n      .querySelectorAll(\"link[rel='icon'], link[rel='shortcut icon']\")\n      .forEach((el) => {\n        if (el.id !== LINK_ID) el.setAttribute('disabled', 'true');\n      });\n\n    const link = document.createElement('link');\n    link.id = LINK_ID;\n    link.rel = 'icon';\n    // Cache-bust so the browser swaps the tab icon immediately on change.\n    link.href = favicon + (favicon.includes('?') ? '&' : '?') + 'v=' + Date.now();\n    document.head.appendChild(link);\n  }, [favicon]);\n\n  return null;\n}"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AAEvB,MAAM,UAAU;AAQT,SAAS,cAAc;AAC5B,QAAM,EAAE,OAAO,MAAM,IAAI,OAAO;AAChC,QAAM,UACJ,UAAU,SAAS,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAEtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,aAAS,iBAAiB,QAAQ,OAAO,EAAE,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC;AACxE,aACG,iBAAiB,6CAA6C,EAC9D,QAAQ,CAAC,OAAO;AACf,UAAI,GAAG,OAAO,QAAS,IAAG,aAAa,YAAY,MAAM;AAAA,IAC3D,CAAC;AAEH,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AAEX,SAAK,OAAO,WAAW,QAAQ,SAAS,GAAG,IAAI,MAAM,OAAO,OAAO,KAAK,IAAI;AAC5E,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}

package/dist/studio/index.cjs

@@ -0,0 +1,50 @@
+"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 studio_exports = {};
+__export(studio_exports, {
+  UxmApp: () => import_uxm_app.UxmApp,
+  UxmProvider: () => import_context.UxmProvider,
+  categoryColors: () => import_registry.categoryColors,
+  createClientPersistence: () => import_persistence.createClientPersistence,
+  createHttpPersistence: () => import_persistence.createHttpPersistence,
+  createReadOnlyPersistence: () => import_persistence.createReadOnlyPersistence,
+  generateOverridesCss: () => import_persistence.generateOverridesCss,
+  getComponentDef: () => import_registry.getComponentDef,
+  registry: () => import_registry.registry,
+  useUxm: () => import_context.useUxm
+});
+module.exports = __toCommonJS(studio_exports);
+var import_uxm_app = require("./uxm-app.cjs");
+var import_context = require("./lib/context.cjs");
+var import_registry = require("./lib/registry/index.cjs");
+var import_persistence = require("./persistence/index.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UxmApp,
+  UxmProvider,
+  categoryColors,
+  createClientPersistence,
+  createHttpPersistence,
+  createReadOnlyPersistence,
+  generateOverridesCss,
+  getComponentDef,
+  registry,
+  useUxm
+});
+//# sourceMappingURL=index.cjs.map

package/dist/studio/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/index.ts"],"sourcesContent":["/**\n * @viax.io/uxm/studio — the UXM design workbench (sidebar + canvas + properties\n * panel + previews + editors), the same portal shipped at modo's `/uxm` route.\n *\n * Decoupled from any specific backend via `StudioPersistence`: inject\n * `createHttpPersistence()` to read/write against a Hono API, or\n * `createReadOnlyPersistence()` for a static portal (live-preview only).\n *\n * Styles ship separately as `@viax.io/uxm/studio.css` — import it once in the\n * host; it bundles tokens + UI atom CSS + the Tailwind utilities the shell\n * uses, so no host Tailwind config is required.\n */\nexport { UxmApp } from './uxm-app';\nexport type { UxmAppProps } from './uxm-app';\nexport { UxmProvider, useUxm } from './lib/context';\nexport { registry, getComponentDef, categoryColors } from './lib/registry';\nexport type {\n  BrandConfig,\n  BrandTokens,\n  Category,\n  ComponentDef,\n  EditorControlType,\n  LayoutVariant,\n  PreviewProps,\n  StyleOverrides,\n  StyleProperty,\n} from './lib/types';\n\n// Persistence contract + adapters + the single CSS generator (R5/R7).\nexport {\n  createReadOnlyPersistence,\n  createClientPersistence,\n  createHttpPersistence,\n  generateOverridesCss,\n} from './persistence';\nexport type {\n  StudioPersistence,\n  StudioState,\n  AllOverrides,\n} from './persistence';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,qBAAuB;AAEvB,qBAAoC;AACpC,sBAA0D;AAc1D,yBAKO;","names":[]}

package/dist/studio/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @viax.io/uxm/studio — the UXM design workbench (sidebar + canvas + properties
+ * panel + previews + editors), the same portal shipped at modo's `/uxm` route.
+ *
+ * Decoupled from any specific backend via `StudioPersistence`: inject
+ * `createHttpPersistence()` to read/write against a Hono API, or
+ * `createReadOnlyPersistence()` for a static portal (live-preview only).
+ *
+ * Styles ship separately as `@viax.io/uxm/studio.css` — import it once in the
+ * host; it bundles tokens + UI atom CSS + the Tailwind utilities the shell
+ * uses, so no host Tailwind config is required.
+ */
+export { UxmApp } from './uxm-app.js';
+export type { UxmAppProps } from './uxm-app.js';
+export { UxmProvider, useUxm } from './lib/context.js';
+export { registry, getComponentDef, categoryColors } from './lib/registry/index.js';
+export type { BrandConfig, BrandTokens, Category, ComponentDef, EditorControlType, LayoutVariant, PreviewProps, StyleOverrides, StyleProperty, } from './lib/types.js';
+export { createReadOnlyPersistence, createClientPersistence, createHttpPersistence, generateOverridesCss, } from './persistence/index.js';
+export type { StudioPersistence, StudioState, AllOverrides, } from './persistence/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/studio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/studio/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC3E,YAAY,EACV,WAAW,EACX,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,YAAY,GACb,MAAM,eAAe,CAAC"}

package/dist/studio/index.js

@@ -0,0 +1,22 @@
+import { UxmApp } from "./uxm-app.js";
+import { UxmProvider, useUxm } from "./lib/context.js";
+import { registry, getComponentDef, categoryColors } from "./lib/registry/index.js";
+import {
+  createReadOnlyPersistence,
+  createClientPersistence,
+  createHttpPersistence,
+  generateOverridesCss
+} from "./persistence/index.js";
+export {
+  UxmApp,
+  UxmProvider,
+  categoryColors,
+  createClientPersistence,
+  createHttpPersistence,
+  createReadOnlyPersistence,
+  generateOverridesCss,
+  getComponentDef,
+  registry,
+  useUxm
+};
+//# sourceMappingURL=index.js.map

package/dist/studio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/index.ts"],"sourcesContent":["/**\n * @viax.io/uxm/studio — the UXM design workbench (sidebar + canvas + properties\n * panel + previews + editors), the same portal shipped at modo's `/uxm` route.\n *\n * Decoupled from any specific backend via `StudioPersistence`: inject\n * `createHttpPersistence()` to read/write against a Hono API, or\n * `createReadOnlyPersistence()` for a static portal (live-preview only).\n *\n * Styles ship separately as `@viax.io/uxm/studio.css` — import it once in the\n * host; it bundles tokens + UI atom CSS + the Tailwind utilities the shell\n * uses, so no host Tailwind config is required.\n */\nexport { UxmApp } from './uxm-app';\nexport type { UxmAppProps } from './uxm-app';\nexport { UxmProvider, useUxm } from './lib/context';\nexport { registry, getComponentDef, categoryColors } from './lib/registry';\nexport type {\n  BrandConfig,\n  BrandTokens,\n  Category,\n  ComponentDef,\n  EditorControlType,\n  LayoutVariant,\n  PreviewProps,\n  StyleOverrides,\n  StyleProperty,\n} from './lib/types';\n\n// Persistence contract + adapters + the single CSS generator (R5/R7).\nexport {\n  createReadOnlyPersistence,\n  createClientPersistence,\n  createHttpPersistence,\n  generateOverridesCss,\n} from './persistence';\nexport type {\n  StudioPersistence,\n  StudioState,\n  AllOverrides,\n} from './persistence';\n"],"mappings":"AAYA,SAAS,cAAc;AAEvB,SAAS,aAAa,cAAc;AACpC,SAAS,UAAU,iBAAiB,sBAAsB;AAc1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/studio/lib/context.cjs

@@ -0,0 +1,207 @@
+"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 context_exports = {};
+__export(context_exports, {
+  UxmProvider: () => UxmProvider,
+  useUxm: () => useUxm
+});
+module.exports = __toCommonJS(context_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_read_only = require("../persistence/read-only.cjs");
+var import_registry = require("./registry/index.cjs");
+const EVENT_LOG_LIMIT = 200;
+const UxmContext = (0, import_react.createContext)(null);
+const THEME_STORAGE_KEY = "uxm:theme";
+const defaultPersistence = (0, import_read_only.createReadOnlyPersistence)();
+const RETIRED_VARIANT_KEYS = {
+  // Retired when the Icon preview became a whole-set grid — there is no single
+  // glyph to pick any more, so the def declares no variants at all.
+  icon: ["glyph"]
+};
+function stripVariantKeysFromOverrides(raw) {
+  const cleaned = {};
+  for (const [compId, compOverrides] of Object.entries(raw)) {
+    const def = (0, import_registry.getComponentDef)(compId);
+    if (!def) {
+      cleaned[compId] = compOverrides;
+      continue;
+    }
+    const variantKeys = /* @__PURE__ */ new Set([
+      ...def.layoutVariants.map((v) => v.key),
+      ...RETIRED_VARIANT_KEYS[compId] ?? []
+    ]);
+    const filtered = {};
+    for (const [k, v] of Object.entries(compOverrides)) {
+      if (!variantKeys.has(k)) filtered[k] = v;
+    }
+    if (Object.keys(filtered).length > 0) cleaned[compId] = filtered;
+  }
+  return cleaned;
+}
+function UxmProvider({
+  children,
+  persistence = defaultPersistence
+}) {
+  const [selectedId, setSelectedId] = (0, import_react.useState)(import_registry.registry[0].id);
+  const [allOverrides, setAllOverrides] = (0, import_react.useState)({});
+  const [currentVariants, setCurrentVariants] = (0, import_react.useState)({});
+  const [theme, setThemeState] = (0, import_react.useState)("light");
+  const [brand, setBrandState] = (0, import_react.useState)({});
+  const [eventLog, setEventLog] = (0, import_react.useState)([]);
+  const eventCounter = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    setEventLog([]);
+    eventCounter.current = 0;
+  }, [selectedId]);
+  const pushEvent = (0, import_react.useCallback)((e) => {
+    const ts = Date.now();
+    eventCounter.current += 1;
+    const entry = {
+      id: `${ts}-${eventCounter.current}`,
+      ts,
+      ...e
+    };
+    setEventLog((prev) => {
+      const next = [entry, ...prev];
+      return next.length > EVENT_LOG_LIMIT ? next.slice(0, EVENT_LOG_LIMIT) : next;
+    });
+  }, []);
+  const clearEvents = (0, import_react.useCallback)(() => {
+    setEventLog([]);
+    eventCounter.current = 0;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    persistence.load().then((data) => {
+      if (!data) return;
+      if (data.overrides && Object.keys(data.overrides).length > 0) {
+        setAllOverrides(stripVariantKeysFromOverrides(data.overrides));
+      }
+      if (data.brand && typeof data.brand === "object") {
+        setBrandState(data.brand);
+      }
+    }).catch(() => {
+    });
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored === "light" || stored === "dark") setThemeState(stored);
+    } catch {
+    }
+  }, [persistence]);
+  const setTheme = (0, import_react.useCallback)((t) => {
+    setThemeState(t);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, t);
+    } catch {
+    }
+  }, []);
+  const setBrand = (0, import_react.useCallback)((partial) => {
+    setBrandState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const getOverrides = (0, import_react.useCallback)(
+    (id) => allOverrides[id] ?? {},
+    [allOverrides]
+  );
+  const setOverride = (0, import_react.useCallback)(
+    (componentId, key, value) => {
+      setAllOverrides((prev) => ({
+        ...prev,
+        [componentId]: { ...prev[componentId], [key]: value }
+      }));
+    },
+    []
+  );
+  const getAllOverrides = (0, import_react.useCallback)(
+    () => allOverrides,
+    [allOverrides]
+  );
+  const resetOverride = (0, import_react.useCallback)((componentId, key) => {
+    setAllOverrides((prev) => {
+      const compOverrides = prev[componentId];
+      if (!compOverrides || !(key in compOverrides)) return prev;
+      const nextComp = { ...compOverrides };
+      delete nextComp[key];
+      const next = { ...prev };
+      if (Object.keys(nextComp).length === 0) {
+        delete next[componentId];
+      } else {
+        next[componentId] = nextComp;
+      }
+      return next;
+    });
+  }, []);
+  const resetOverrides = (0, import_react.useCallback)((componentId) => {
+    setAllOverrides((prev) => {
+      const next = { ...prev };
+      delete next[componentId];
+      return next;
+    });
+  }, []);
+  const selectComponent = (0, import_react.useCallback)((id) => {
+    setSelectedId(id);
+    setCurrentVariants({});
+  }, []);
+  const getCurrentVariants = (0, import_react.useCallback)(
+    () => currentVariants,
+    [currentVariants]
+  );
+  const setVariant = (0, import_react.useCallback)(
+    (key, value) => {
+      setCurrentVariants((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    UxmContext.Provider,
+    {
+      value: {
+        selectedId,
+        selectComponent,
+        getOverrides,
+        getAllOverrides,
+        setOverride,
+        resetOverride,
+        resetOverrides,
+        getCurrentVariants,
+        setVariant,
+        theme,
+        setTheme,
+        brand,
+        setBrand,
+        eventLog,
+        pushEvent,
+        clearEvents,
+        persistence,
+        capabilities: persistence.capabilities
+      },
+      children
+    }
+  );
+}
+function useUxm() {
+  const ctx = (0, import_react.useContext)(UxmContext);
+  if (!ctx) throw new Error("useUxm must be used within UxmProvider");
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UxmProvider,
+  useUxm
+});
+//# sourceMappingURL=context.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/context.tsx"],"sourcesContent":["import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from 'react';\n\nimport { createReadOnlyPersistence } from '../persistence/read-only';\n\nimport { getComponentDef, registry } from './registry';\n\nimport type { BrandConfig, StyleOverrides } from './types';\nimport type { StudioPersistence } from '../persistence/types';\n\n\nexport type Theme = 'light' | 'dark';\n\n/** A captured runtime event, shown in the Events tab's live log. */\nexport interface LoggedEvent {\n  /** Unique id — used as React key. Wall-clock ms is fine for ordering\n   *  and dedupe; a counter suffix handles the rare same-tick burst. */\n  id: string;\n  /** When the event fired (wall-clock ms). */\n  ts: number;\n  /** Canonical handler name, e.g. \"onClick\". */\n  name: string;\n  /** Short payload preview (already JSON-stringified, truncated). */\n  payload: string;\n  /** Tag name of the DOM target that fired the event, for context. */\n  target: string;\n}\n\n/** Cap on the log size — prevents runaway memory if a Slider's onChange\n *  fires hundreds of times during a drag. The oldest entries fall off. */\nconst EVENT_LOG_LIMIT = 200;\n\ninterface UxmContextValue {\n  selectedId: string;\n  selectComponent: (id: string) => void;\n  getOverrides: (id: string) => StyleOverrides;\n  getAllOverrides: () => Record<string, StyleOverrides>;\n  setOverride: (componentId: string, key: string, value: string | number | boolean) => void;\n  resetOverride: (componentId: string, key: string) => void;\n  resetOverrides: (componentId: string) => void;\n  /** Variant selections are ephemeral UI state for the currently-selected\n   * component — they decide which knobs are visible in the panel, but never\n   * persist to overrides or get saved to components.css/json. Resets to\n   * empty on every `selectComponent`. */\n  getCurrentVariants: () => Record<string, string | number | boolean>;\n  setVariant: (key: string, value: string | number | boolean) => void;\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  brand: BrandConfig;\n  setBrand: (partial: Partial<BrandConfig>) => void;\n  /** Event log for the currently-selected component. Resets on selection change. */\n  eventLog: LoggedEvent[];\n  /** Push a captured event into the log. Called by the canvas wrapper. */\n  pushEvent: (e: Omit<LoggedEvent, 'id' | 'ts'>) => void;\n  /** Clear the log for the current component. */\n  clearEvents: () => void;\n  /** Injected persistence backend (HTTP for app, read-only for static portal). */\n  persistence: StudioPersistence;\n  /** Convenience mirror of `persistence.capabilities` for UI gating. */\n  capabilities: StudioPersistence['capabilities'];\n}\n\nconst UxmContext = createContext<UxmContextValue | null>(null);\n\nconst THEME_STORAGE_KEY = 'uxm:theme';\n\n// Stable default so consumers that omit `persistence` reuse one instance instead\n// of getting a fresh object every render (which would re-run the load effect).\nconst defaultPersistence = createReadOnlyPersistence();\n\n/**\n * Variant keys a def no longer DECLARES but that legacy saves may still carry,\n * because the variant was retired after it had already been persisted.\n *\n * Matching only against the live registry would let these through: the key is\n * absent from `layoutVariants`, so the filter below treats it as a style edit.\n * It then counts towards the panel's \"has overrides\" check (a phantom Reset\n * button on an untouched install) and, because it matches no entry in\n * `PER_COMPONENT_MAPPING` and no real CSS property, `generateOverridesCss`\n * emits it as a dead `--uxm-{id}-{key}` declaration on every save.\n *\n * Same bookkeeping as the RETIRED-knob mappings in `generate-css.ts`: a key is\n * only ever added here, never removed, because old saves never stop existing.\n */\nconst RETIRED_VARIANT_KEYS: Record<string, readonly string[]> = {\n  // Retired when the Icon preview became a whole-set grid — there is no single\n  // glyph to pick any more, so the def declares no variants at all.\n  icon: ['glyph'],\n};\n\n/**\n * Strip layoutVariant keys from a loaded overrides bag. Legacy saves\n * (from before variants were ephemeral) wrote variant values into the\n * same `overrides` dict as style edits — historical artifacts now,\n * ignored by everything but the panel's \"has overrides\" checks. Filter\n * at load time so the invariant holds: `overrides[componentId]` only\n * ever contains styleProperty edits.\n */\nfunction stripVariantKeysFromOverrides(\n  raw: Record<string, StyleOverrides>,\n): Record<string, StyleOverrides> {\n  const cleaned: Record<string, StyleOverrides> = {};\n  for (const [compId, compOverrides] of Object.entries(raw)) {\n    const def = getComponentDef(compId);\n    if (!def) {\n      cleaned[compId] = compOverrides;\n      continue;\n    }\n    const variantKeys = new Set([\n      ...def.layoutVariants.map((v) => v.key),\n      ...(RETIRED_VARIANT_KEYS[compId] ?? []),\n    ]);\n    const filtered: StyleOverrides = {};\n    for (const [k, v] of Object.entries(compOverrides)) {\n      if (!variantKeys.has(k)) filtered[k] = v;\n    }\n    if (Object.keys(filtered).length > 0) cleaned[compId] = filtered;\n  }\n  return cleaned;\n}\n\nexport function UxmProvider({\n  children,\n  persistence = defaultPersistence,\n}: {\n  children: ReactNode;\n  persistence?: StudioPersistence;\n}) {\n  const [selectedId, setSelectedId] = useState(registry[0].id);\n  const [allOverrides, setAllOverrides] = useState<Record<string, StyleOverrides>>({});\n  const [currentVariants, setCurrentVariants] = useState<Record<string, string | number | boolean>>({});\n  const [theme, setThemeState] = useState<Theme>('light');\n  const [brand, setBrandState] = useState<BrandConfig>({});\n  // The log lives on a single state array, not keyed by component id —\n  // it represents the *current* selected component's recent activity.\n  // Switching components clears it (via the effect below). A counter ref\n  // breaks id collisions when many events fire in the same millisecond\n  // (Slider drag, keyboard repeat).\n  const [eventLog, setEventLog] = useState<LoggedEvent[]>([]);\n  const eventCounter = useRef(0);\n\n  // Reset log on selection change — the panel always shows fresh activity\n  // for the component currently being inspected.\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional reset of the event log when the inspected component changes\n    setEventLog([]);\n    eventCounter.current = 0;\n  }, [selectedId]);\n\n  const pushEvent = useCallback((e: Omit<LoggedEvent, 'id' | 'ts'>) => {\n    const ts = Date.now();\n    eventCounter.current += 1;\n    const entry: LoggedEvent = {\n      id: `${ts}-${eventCounter.current}`,\n      ts,\n      ...e,\n    };\n    setEventLog((prev) => {\n      // Prepend so newest sits on top; cap at LIMIT.\n      const next = [entry, ...prev];\n      return next.length > EVENT_LOG_LIMIT ? next.slice(0, EVENT_LOG_LIMIT) : next;\n    });\n  }, []);\n\n  const clearEvents = useCallback(() => {\n    setEventLog([]);\n    eventCounter.current = 0;\n  }, []);\n\n  // Load saved overrides + theme on mount, via the injected persistence\n  // backend (HTTP in the app, read-only/seed in the static portal).\n  useEffect(() => {\n    persistence\n      .load()\n      .then((data) => {\n        if (!data) return;\n        if (data.overrides && Object.keys(data.overrides).length > 0) {\n          setAllOverrides(stripVariantKeysFromOverrides(data.overrides));\n        }\n        if (data.brand && typeof data.brand === 'object') {\n          setBrandState(data.brand);\n        }\n      })\n      .catch(() => {\n        /* ignore load failures — fall back to defaults */\n      });\n\n    try {\n      const stored = localStorage.getItem(THEME_STORAGE_KEY);\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-shot read of persisted theme on mount\n      if (stored === 'light' || stored === 'dark') setThemeState(stored);\n    } catch {\n      /* ignore unavailable localStorage */\n    }\n  }, [persistence]);\n\n  const setTheme = useCallback((t: Theme) => {\n    setThemeState(t);\n    try { localStorage.setItem(THEME_STORAGE_KEY, t); } catch { /* ignore */ }\n  }, []);\n\n  const setBrand = useCallback((partial: Partial<BrandConfig>) => {\n    setBrandState((prev) => ({ ...prev, ...partial }));\n  }, []);\n\n  const getOverrides = useCallback(\n    (id: string) => allOverrides[id] ?? {},\n    [allOverrides],\n  );\n\n  const setOverride = useCallback(\n    (componentId: string, key: string, value: string | number | boolean) => {\n      setAllOverrides((prev) => ({\n        ...prev,\n        [componentId]: { ...prev[componentId], [key]: value },\n      }));\n    },\n    [],\n  );\n\n  const getAllOverrides = useCallback(\n    () => allOverrides,\n    [allOverrides],\n  );\n\n  const resetOverride = useCallback((componentId: string, key: string) => {\n    setAllOverrides((prev) => {\n      const compOverrides = prev[componentId];\n      if (!compOverrides || !(key in compOverrides)) return prev;\n      const nextComp = { ...compOverrides };\n      delete nextComp[key];\n      const next = { ...prev };\n      if (Object.keys(nextComp).length === 0) {\n        delete next[componentId];\n      } else {\n        next[componentId] = nextComp;\n      }\n      return next;\n    });\n  }, []);\n\n  const resetOverrides = useCallback((componentId: string) => {\n    setAllOverrides((prev) => {\n      const next = { ...prev };\n      delete next[componentId];\n      return next;\n    });\n  }, []);\n\n  /**\n   * Select a component and reset its variant selections to defaults.\n   *\n   * Variants are ephemeral UI state (\"which knobs am I currently editing\")\n   * — they reset on every component switch so designers always land on\n   * the canonical default view of an atom. Style edits stay in overrides\n   * and persist; variant selections are session-only and per-component.\n   */\n  const selectComponent = useCallback((id: string) => {\n    setSelectedId(id);\n    setCurrentVariants({});\n  }, []);\n\n  const getCurrentVariants = useCallback(\n    () => currentVariants,\n    [currentVariants],\n  );\n\n  const setVariant = useCallback(\n    (key: string, value: string | number | boolean) => {\n      setCurrentVariants((prev) => ({ ...prev, [key]: value }));\n    },\n    [],\n  );\n\n  return (\n    <UxmContext.Provider\n      value={{\n        selectedId,\n        selectComponent,\n        getOverrides,\n        getAllOverrides,\n        setOverride,\n        resetOverride,\n        resetOverrides,\n        getCurrentVariants,\n        setVariant,\n        theme,\n        setTheme,\n        brand,\n        setBrand,\n        eventLog,\n        pushEvent,\n        clearEvents,\n        persistence,\n        capabilities: persistence.capabilities,\n      }}\n    >\n      {children}\n    </UxmContext.Provider>\n  );\n}\n\nexport function useUxm() {\n  const ctx = useContext(UxmContext);\n  if (!ctx) throw new Error('useUxm must be used within UxmProvider');\n  return ctx;\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import type { BrandConfig, StyleOverrides } from './types.js';
+import type { StudioPersistence } from '../persistence/types.js';
+export type Theme = 'light' | 'dark';
+/** A captured runtime event, shown in the Events tab's live log. */
+export interface LoggedEvent {
+    /** Unique id — used as React key. Wall-clock ms is fine for ordering
+     *  and dedupe; a counter suffix handles the rare same-tick burst. */
+    id: string;
+    /** When the event fired (wall-clock ms). */
+    ts: number;
+    /** Canonical handler name, e.g. "onClick". */
+    name: string;
+    /** Short payload preview (already JSON-stringified, truncated). */
+    payload: string;
+    /** Tag name of the DOM target that fired the event, for context. */
+    target: string;
+}
+interface UxmContextValue {
+    selectedId: string;
+    selectComponent: (id: string) => void;
+    getOverrides: (id: string) => StyleOverrides;
+    getAllOverrides: () => Record<string, StyleOverrides>;
+    setOverride: (componentId: string, key: string, value: string | number | boolean) => void;
+    resetOverride: (componentId: string, key: string) => void;
+    resetOverrides: (componentId: string) => void;
+    /** Variant selections are ephemeral UI state for the currently-selected
+     * component — they decide which knobs are visible in the panel, but never
+     * persist to overrides or get saved to components.css/json. Resets to
+     * empty on every `selectComponent`. */
+    getCurrentVariants: () => Record<string, string | number | boolean>;
+    setVariant: (key: string, value: string | number | boolean) => void;
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    brand: BrandConfig;
+    setBrand: (partial: Partial<BrandConfig>) => void;
+    /** Event log for the currently-selected component. Resets on selection change. */
+    eventLog: LoggedEvent[];
+    /** Push a captured event into the log. Called by the canvas wrapper. */
+    pushEvent: (e: Omit<LoggedEvent, 'id' | 'ts'>) => void;
+    /** Clear the log for the current component. */
+    clearEvents: () => void;
+    /** Injected persistence backend (HTTP for app, read-only for static portal). */
+    persistence: StudioPersistence;
+    /** Convenience mirror of `persistence.capabilities` for UI gating. */
+    capabilities: StudioPersistence['capabilities'];
+}
+export declare function UxmProvider({ children, persistence, }: {
+    children: ReactNode;
+    persistence?: StudioPersistence;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useUxm(): UxmContextValue;
+export {};
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/studio/lib/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5G,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,oEAAoE;AACpE,MAAM,WAAW,WAAW;IAC1B;yEACqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;CAChB;AAMD,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,cAAc,CAAC;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACtD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IAC1F,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;;2CAGuC;IACvC,kBAAkB,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACpE,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACpE,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,kFAAkF;IAClF,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,wEAAwE;IACxE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACvD,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gFAAgF;IAChF,WAAW,EAAE,iBAAiB,CAAC;IAC/B,sEAAsE;IACtE,YAAY,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACjD;AA6DD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,WAAgC,GACjC,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC;CACjC,2CA6KA;AAED,wBAAgB,MAAM,oBAIrB"}

package/dist/studio/lib/context.js

@@ -0,0 +1,182 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
+import { createReadOnlyPersistence } from "../persistence/read-only.js";
+import { getComponentDef, registry } from "./registry/index.js";
+const EVENT_LOG_LIMIT = 200;
+const UxmContext = createContext(null);
+const THEME_STORAGE_KEY = "uxm:theme";
+const defaultPersistence = createReadOnlyPersistence();
+const RETIRED_VARIANT_KEYS = {
+  // Retired when the Icon preview became a whole-set grid — there is no single
+  // glyph to pick any more, so the def declares no variants at all.
+  icon: ["glyph"]
+};
+function stripVariantKeysFromOverrides(raw) {
+  const cleaned = {};
+  for (const [compId, compOverrides] of Object.entries(raw)) {
+    const def = getComponentDef(compId);
+    if (!def) {
+      cleaned[compId] = compOverrides;
+      continue;
+    }
+    const variantKeys = /* @__PURE__ */ new Set([
+      ...def.layoutVariants.map((v) => v.key),
+      ...RETIRED_VARIANT_KEYS[compId] ?? []
+    ]);
+    const filtered = {};
+    for (const [k, v] of Object.entries(compOverrides)) {
+      if (!variantKeys.has(k)) filtered[k] = v;
+    }
+    if (Object.keys(filtered).length > 0) cleaned[compId] = filtered;
+  }
+  return cleaned;
+}
+function UxmProvider({
+  children,
+  persistence = defaultPersistence
+}) {
+  const [selectedId, setSelectedId] = useState(registry[0].id);
+  const [allOverrides, setAllOverrides] = useState({});
+  const [currentVariants, setCurrentVariants] = useState({});
+  const [theme, setThemeState] = useState("light");
+  const [brand, setBrandState] = useState({});
+  const [eventLog, setEventLog] = useState([]);
+  const eventCounter = useRef(0);
+  useEffect(() => {
+    setEventLog([]);
+    eventCounter.current = 0;
+  }, [selectedId]);
+  const pushEvent = useCallback((e) => {
+    const ts = Date.now();
+    eventCounter.current += 1;
+    const entry = {
+      id: `${ts}-${eventCounter.current}`,
+      ts,
+      ...e
+    };
+    setEventLog((prev) => {
+      const next = [entry, ...prev];
+      return next.length > EVENT_LOG_LIMIT ? next.slice(0, EVENT_LOG_LIMIT) : next;
+    });
+  }, []);
+  const clearEvents = useCallback(() => {
+    setEventLog([]);
+    eventCounter.current = 0;
+  }, []);
+  useEffect(() => {
+    persistence.load().then((data) => {
+      if (!data) return;
+      if (data.overrides && Object.keys(data.overrides).length > 0) {
+        setAllOverrides(stripVariantKeysFromOverrides(data.overrides));
+      }
+      if (data.brand && typeof data.brand === "object") {
+        setBrandState(data.brand);
+      }
+    }).catch(() => {
+    });
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored === "light" || stored === "dark") setThemeState(stored);
+    } catch {
+    }
+  }, [persistence]);
+  const setTheme = useCallback((t) => {
+    setThemeState(t);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, t);
+    } catch {
+    }
+  }, []);
+  const setBrand = useCallback((partial) => {
+    setBrandState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const getOverrides = useCallback(
+    (id) => allOverrides[id] ?? {},
+    [allOverrides]
+  );
+  const setOverride = useCallback(
+    (componentId, key, value) => {
+      setAllOverrides((prev) => ({
+        ...prev,
+        [componentId]: { ...prev[componentId], [key]: value }
+      }));
+    },
+    []
+  );
+  const getAllOverrides = useCallback(
+    () => allOverrides,
+    [allOverrides]
+  );
+  const resetOverride = useCallback((componentId, key) => {
+    setAllOverrides((prev) => {
+      const compOverrides = prev[componentId];
+      if (!compOverrides || !(key in compOverrides)) return prev;
+      const nextComp = { ...compOverrides };
+      delete nextComp[key];
+      const next = { ...prev };
+      if (Object.keys(nextComp).length === 0) {
+        delete next[componentId];
+      } else {
+        next[componentId] = nextComp;
+      }
+      return next;
+    });
+  }, []);
+  const resetOverrides = useCallback((componentId) => {
+    setAllOverrides((prev) => {
+      const next = { ...prev };
+      delete next[componentId];
+      return next;
+    });
+  }, []);
+  const selectComponent = useCallback((id) => {
+    setSelectedId(id);
+    setCurrentVariants({});
+  }, []);
+  const getCurrentVariants = useCallback(
+    () => currentVariants,
+    [currentVariants]
+  );
+  const setVariant = useCallback(
+    (key, value) => {
+      setCurrentVariants((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    UxmContext.Provider,
+    {
+      value: {
+        selectedId,
+        selectComponent,
+        getOverrides,
+        getAllOverrides,
+        setOverride,
+        resetOverride,
+        resetOverrides,
+        getCurrentVariants,
+        setVariant,
+        theme,
+        setTheme,
+        brand,
+        setBrand,
+        eventLog,
+        pushEvent,
+        clearEvents,
+        persistence,
+        capabilities: persistence.capabilities
+      },
+      children
+    }
+  );
+}
+function useUxm() {
+  const ctx = useContext(UxmContext);
+  if (!ctx) throw new Error("useUxm must be used within UxmProvider");
+  return ctx;
+}
+export {
+  UxmProvider,
+  useUxm
+};
+//# sourceMappingURL=context.js.map