@viax.io/uxm 4.36.0

package/dist/studio/lib/context.js.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":"AAkRI;AAlRJ,SAAS,eAAe,YAAY,UAAU,aAAa,WAAW,cAA8B;AAEpG,SAAS,iCAAiC;AAE1C,SAAS,iBAAiB,gBAAgB;AAyB1C,MAAM,kBAAkB;AAgCxB,MAAM,aAAa,cAAsC,IAAI;AAE7D,MAAM,oBAAoB;AAI1B,MAAM,qBAAqB,0BAA0B;AAgBrD,MAAM,uBAA0D;AAAA;AAAA;AAAA,EAG9D,MAAM,CAAC,OAAO;AAChB;AAUA,SAAS,8BACP,KACgC;AAChC,QAAM,UAA0C,CAAC;AACjD,aAAW,CAAC,QAAQ,aAAa,KAAK,OAAO,QAAQ,GAAG,GAAG;AACzD,UAAM,MAAM,gBAAgB,MAAM;AAClC,QAAI,CAAC,KAAK;AACR,cAAQ,MAAM,IAAI;AAClB;AAAA,IACF;AACA,UAAM,cAAc,oBAAI,IAAI;AAAA,MAC1B,GAAG,IAAI,eAAe,IAAI,CAAC,MAAM,EAAE,GAAG;AAAA,MACtC,GAAI,qBAAqB,MAAM,KAAK,CAAC;AAAA,IACvC,CAAC;AACD,UAAM,WAA2B,CAAC;AAClC,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,aAAa,GAAG;AAClD,UAAI,CAAC,YAAY,IAAI,CAAC,EAAG,UAAS,CAAC,IAAI;AAAA,IACzC;AACA,QAAI,OAAO,KAAK,QAAQ,EAAE,SAAS,EAAG,SAAQ,MAAM,IAAI;AAAA,EAC1D;AACA,SAAO;AACT;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAChB,GAGG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,SAAS,CAAC,EAAE,EAAE;AAC3D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAyC,CAAC,CAAC;AACnF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAoD,CAAC,CAAC;AACpG,QAAM,CAAC,OAAO,aAAa,IAAI,SAAgB,OAAO;AACtD,QAAM,CAAC,OAAO,aAAa,IAAI,SAAsB,CAAC,CAAC;AAMvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,CAAC,CAAC;AAC1D,QAAM,eAAe,OAAO,CAAC;AAI7B,YAAU,MAAM;AAEd,gBAAY,CAAC,CAAC;AACd,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,YAAY,YAAY,CAAC,MAAsC;AACnE,UAAM,KAAK,KAAK,IAAI;AACpB,iBAAa,WAAW;AACxB,UAAM,QAAqB;AAAA,MACzB,IAAI,GAAG,EAAE,IAAI,aAAa,OAAO;AAAA,MACjC;AAAA,MACA,GAAG;AAAA,IACL;AACA,gBAAY,CAAC,SAAS;AAEpB,YAAM,OAAO,CAAC,OAAO,GAAG,IAAI;AAC5B,aAAO,KAAK,SAAS,kBAAkB,KAAK,MAAM,GAAG,eAAe,IAAI;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,gBAAY,CAAC,CAAC;AACd,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,CAAC;AAIL,YAAU,MAAM;AACd,gBACG,KAAK,EACL,KAAK,CAAC,SAAS;AACd,UAAI,CAAC,KAAM;AACX,UAAI,KAAK,aAAa,OAAO,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAC5D,wBAAgB,8BAA8B,KAAK,SAAS,CAAC;AAAA,MAC/D;AACA,UAAI,KAAK,SAAS,OAAO,KAAK,UAAU,UAAU;AAChD,sBAAc,KAAK,KAAK;AAAA,MAC1B;AAAA,IACF,CAAC,EACA,MAAM,MAAM;AAAA,IAEb,CAAC;AAEH,QAAI;AACF,YAAM,SAAS,aAAa,QAAQ,iBAAiB;AAErD,UAAI,WAAW,WAAW,WAAW,OAAQ,eAAc,MAAM;AAAA,IACnE,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,WAAW,YAAY,CAAC,MAAa;AACzC,kBAAc,CAAC;AACf,QAAI;AAAE,mBAAa,QAAQ,mBAAmB,CAAC;AAAA,IAAG,QAAQ;AAAA,IAAe;AAAA,EAC3E,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YAAY,CAAC,YAAkC;AAC9D,kBAAc,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,QAAQ,EAAE;AAAA,EACnD,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe;AAAA,IACnB,CAAC,OAAe,aAAa,EAAE,KAAK,CAAC;AAAA,IACrC,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,aAAqB,KAAa,UAAqC;AACtE,sBAAgB,CAAC,UAAU;AAAA,QACzB,GAAG;AAAA,QACH,CAAC,WAAW,GAAG,EAAE,GAAG,KAAK,WAAW,GAAG,CAAC,GAAG,GAAG,MAAM;AAAA,MACtD,EAAE;AAAA,IACJ;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,gBAAgB,YAAY,CAAC,aAAqB,QAAgB;AACtE,oBAAgB,CAAC,SAAS;AACxB,YAAM,gBAAgB,KAAK,WAAW;AACtC,UAAI,CAAC,iBAAiB,EAAE,OAAO,eAAgB,QAAO;AACtD,YAAM,WAAW,EAAE,GAAG,cAAc;AACpC,aAAO,SAAS,GAAG;AACnB,YAAM,OAAO,EAAE,GAAG,KAAK;AACvB,UAAI,OAAO,KAAK,QAAQ,EAAE,WAAW,GAAG;AACtC,eAAO,KAAK,WAAW;AAAA,MACzB,OAAO;AACL,aAAK,WAAW,IAAI;AAAA,MACtB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,CAAC,gBAAwB;AAC1D,oBAAgB,CAAC,SAAS;AACxB,YAAM,OAAO,EAAE,GAAG,KAAK;AACvB,aAAO,KAAK,WAAW;AACvB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAUL,QAAM,kBAAkB,YAAY,CAAC,OAAe;AAClD,kBAAc,EAAE;AAChB,uBAAmB,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,KAAa,UAAqC;AACjD,yBAAmB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,EAAE;AAAA,IAC1D;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,YAAY;AAAA,MAC5B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,SAAS;AACvB,QAAM,MAAM,WAAW,UAAU;AACjC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,wCAAwC;AAClE,SAAO;AACT;","names":[]}

package/dist/studio/lib/preview-shell.cjs

@@ -0,0 +1,43 @@
+"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 preview_shell_exports = {};
+__export(preview_shell_exports, {
+  usePreviewShell: () => usePreviewShell
+});
+module.exports = __toCommonJS(preview_shell_exports);
+var import_react = require("react");
+var import_context = require("./context.cjs");
+function usePreviewShell() {
+  const { brand, setBrand, theme, setTheme, persistence, capabilities } = (0, import_context.useUxm)();
+  return (0, import_react.useMemo)(
+    () => ({
+      brand,
+      setBrand,
+      theme,
+      setTheme,
+      uploadAsset: capabilities.upload ? persistence.uploadAsset : void 0
+    }),
+    [brand, setBrand, theme, setTheme, persistence, capabilities.upload]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePreviewShell
+});
+//# sourceMappingURL=preview-shell.cjs.map

package/dist/studio/lib/preview-shell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/preview-shell.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { PreviewShellContext } from '@/previews';\n\nimport { useUxm } from './context';\n\n/**\n * Reshape the Studio UxmContext into the slim `PreviewShellContext` that\n * shell-coupled previews (brand-settings, app-sidebar, login-page) expect.\n * The previews that ignore `shell` receive a stable reference and incur no\n * extra re-renders.\n *\n * `uploadAsset` is routed through the injected persistence backend (no direct\n * `fetch` here). When the backend can't upload (read-only static portal) it is\n * omitted entirely — previews then keep their upload UI inert (R2/R7).\n */\nexport function usePreviewShell(): PreviewShellContext {\n  const { brand, setBrand, theme, setTheme, persistence, capabilities } = useUxm();\n  return useMemo(\n    () => ({\n      brand,\n      setBrand,\n      theme,\n      setTheme,\n      uploadAsset: capabilities.upload ? persistence.uploadAsset : undefined,\n    }),\n    [brand, setBrand, theme, setTheme, persistence, capabilities.upload],\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AAIxB,qBAAuB;AAYhB,SAAS,kBAAuC;AACrD,QAAM,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,aAAa,QAAI,uBAAO;AAC/E,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,aAAa,SAAS,YAAY,cAAc;AAAA,IAC/D;AAAA,IACA,CAAC,OAAO,UAAU,OAAO,UAAU,aAAa,aAAa,MAAM;AAAA,EACrE;AACF;","names":[]}

package/dist/studio/lib/preview-shell.d.ts

@@ -0,0 +1,13 @@
+import type { PreviewShellContext } from '../../previews/index.js';
+/**
+ * Reshape the Studio UxmContext into the slim `PreviewShellContext` that
+ * shell-coupled previews (brand-settings, app-sidebar, login-page) expect.
+ * The previews that ignore `shell` receive a stable reference and incur no
+ * extra re-renders.
+ *
+ * `uploadAsset` is routed through the injected persistence backend (no direct
+ * `fetch` here). When the backend can't upload (read-only static portal) it is
+ * omitted entirely — previews then keep their upload UI inert (R2/R7).
+ */
+export declare function usePreviewShell(): PreviewShellContext;
+//# sourceMappingURL=preview-shell.d.ts.map

package/dist/studio/lib/preview-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-shell.d.ts","sourceRoot":"","sources":["../../../src/studio/lib/preview-shell.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAItD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,mBAAmB,CAYrD"}

package/dist/studio/lib/preview-shell.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useUxm } from "./context.js";
+function usePreviewShell() {
+  const { brand, setBrand, theme, setTheme, persistence, capabilities } = useUxm();
+  return useMemo(
+    () => ({
+      brand,
+      setBrand,
+      theme,
+      setTheme,
+      uploadAsset: capabilities.upload ? persistence.uploadAsset : void 0
+    }),
+    [brand, setBrand, theme, setTheme, persistence, capabilities.upload]
+  );
+}
+export {
+  usePreviewShell
+};
+//# sourceMappingURL=preview-shell.js.map

package/dist/studio/lib/preview-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/lib/preview-shell.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { PreviewShellContext } from '@/previews';\n\nimport { useUxm } from './context';\n\n/**\n * Reshape the Studio UxmContext into the slim `PreviewShellContext` that\n * shell-coupled previews (brand-settings, app-sidebar, login-page) expect.\n * The previews that ignore `shell` receive a stable reference and incur no\n * extra re-renders.\n *\n * `uploadAsset` is routed through the injected persistence backend (no direct\n * `fetch` here). When the backend can't upload (read-only static portal) it is\n * omitted entirely — previews then keep their upload UI inert (R2/R7).\n */\nexport function usePreviewShell(): PreviewShellContext {\n  const { brand, setBrand, theme, setTheme, persistence, capabilities } = useUxm();\n  return useMemo(\n    () => ({\n      brand,\n      setBrand,\n      theme,\n      setTheme,\n      uploadAsset: capabilities.upload ? persistence.uploadAsset : undefined,\n    }),\n    [brand, setBrand, theme, setTheme, persistence, capabilities.upload],\n  );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAIxB,SAAS,cAAc;AAYhB,SAAS,kBAAuC;AACrD,QAAM,EAAE,OAAO,UAAU,OAAO,UAAU,aAAa,aAAa,IAAI,OAAO;AAC/E,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,aAAa,SAAS,YAAY,cAAc;AAAA,IAC/D;AAAA,IACA,CAAC,OAAO,UAAU,OAAO,UAAU,aAAa,aAAa,MAAM;AAAA,EACrE;AACF;","names":[]}

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

@@ -0,0 +1,131 @@
+"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 app_exports = {};
+__export(app_exports, {
+  appDefs: () => appDefs
+});
+module.exports = __toCommonJS(app_exports);
+const appDefs = [
+  // ── App ──
+  {
+    id: "brand-settings",
+    name: "Brand Settings",
+    category: "App",
+    description: "Configure the Modo logo, sidebar icon, and primary font.",
+    styleProperties: [],
+    layoutVariants: [],
+    canvasBackground: false
+  },
+  {
+    id: "app-sidebar",
+    name: "App Sidebar",
+    category: "App",
+    description: "Left navigation: brand row, an optional header slot at the head of the rail, sectioned nav items, an optional footer slot, expand/collapse. Both slots survive collapse.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "expandedWidth", label: "Expanded Width", control: "number", defaultValue: 256, min: 200, max: 320, step: 4, unit: "px" },
+      { key: "collapsedWidth", label: "Collapsed Width", control: "number", defaultValue: 64, min: 48, max: 96, step: 4, unit: "px" },
+      { key: "headingColor", label: "Section Heading", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "footerColor", label: "Footer Text", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      // Both slots align to `__nav`'s 8px, so a control in either lines its text
+      // up with the nav rows (8 + the child's own 12 = 20px, where a nav label
+      // starts). The footer used to carry a 24px caption inset, which put a
+      // control at 36px and cost it 32px of width — an address ellipsised for no
+      // reason. The knobs stay so a caption can take the deeper inset back.
+      //
+      // Each sits in its OWN section rather than beside the width knobs. The
+      // panel derives a section's subtitle from the union of `showWhen` keys
+      // across every knob inside it, so a gated knob dropped in with the
+      // ungated widths made the whole section read "Per Header Slot x Footer
+      // Slot" — a claim that is false for Expanded/Collapsed Width. Same rule
+      // the `avatar` entry states: a section is either all-shared or all-gated.
+      // One key per section also keeps the subtitle to "Per Header Slot - On"
+      // instead of an "A x B" that implies each knob depends on both.
+      { key: "leadPadding", label: "Padding", control: "number", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "headerSlot", showWhen: { headerSlot: "on" } },
+      { key: "footerPadding", label: "Padding", control: "number", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "footerSlot", showWhen: { footerSlot: "on" } }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "expanded", label: "Expanded" },
+          { value: "collapsed", label: "Collapsed" }
+        ],
+        defaultValue: "expanded"
+      },
+      {
+        // The head slot is off in plenty of shells (a single-tenant app has no
+        // switcher), so it is a picker rather than always-on content — and with
+        // it off you can still see that the sidebar reserves nothing for it.
+        key: "headerSlot",
+        label: "Header Slot",
+        options: [
+          { value: "on", label: "On" },
+          { value: "off", label: "Off" }
+        ],
+        defaultValue: "on"
+      },
+      {
+        // Both slots are optional, so both get a picker. One without the other
+        // would imply the footer is structural — and with either off you can see
+        // that the sidebar reserves no space for a slot it was not given.
+        key: "footerSlot",
+        label: "Footer Slot",
+        options: [
+          { value: "on", label: "On" },
+          { value: "off", label: "Off" }
+        ],
+        defaultValue: "on"
+      },
+      {
+        // Auto-assign a distinct icon colour per item from a categorical
+        // palette (cycling) for scannability, vs the monochromatic default.
+        key: "autoIconColors",
+        label: "Auto Icon Colors",
+        options: [
+          { value: "off", label: "Off" },
+          { value: "on", label: "On" }
+        ],
+        defaultValue: "off"
+      }
+    ]
+  },
+  {
+    id: "app-top-bar",
+    name: "App Top Bar",
+    category: "App",
+    description: "Top header: search, mobile menu trigger, primary action, theme toggle, avatar slot.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface-alt) 50%, transparent)", section: "colors" },
+      { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "height", label: "Height", control: "number", defaultValue: 64, min: 48, max: 96, step: 4, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "searchMaxWidth", label: "Search Max Width", control: "number", defaultValue: 320, min: 160, max: 480, step: 8, unit: "px" }
+    ],
+    layoutVariants: []
+  }
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  appDefs
+});
+//# sourceMappingURL=app.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/lib/registry/app.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const appDefs: ComponentDef[] = [\n  // ── App ──\n  {\n    id: 'brand-settings',\n    name: 'Brand Settings',\n    category: 'App',\n    description: 'Configure the Modo logo, sidebar icon, and primary font.',\n    styleProperties: [],\n    layoutVariants: [],\n    canvasBackground: false,\n  },\n  {\n    id: 'app-sidebar',\n    name: 'App Sidebar',\n    category: 'App',\n    description:\n      'Left navigation: brand row, an optional header slot at the head of the rail, sectioned nav items, an optional footer slot, expand/collapse. Both slots survive collapse.',\n    styleProperties: [\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'colors' },\n      { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n      { key: 'expandedWidth', label: 'Expanded Width', control: 'number', defaultValue: 256, min: 200, max: 320, step: 4, unit: 'px' },\n      { key: 'collapsedWidth', label: 'Collapsed Width', control: 'number', defaultValue: 64, min: 48, max: 96, step: 4, unit: 'px' },\n      { key: 'headingColor', label: 'Section Heading', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n      { key: 'footerColor', label: 'Footer Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n      // Both slots align to `__nav`'s 8px, so a control in either lines its text\n      // up with the nav rows (8 + the child's own 12 = 20px, where a nav label\n      // starts). The footer used to carry a 24px caption inset, which put a\n      // control at 36px and cost it 32px of width — an address ellipsised for no\n      // reason. The knobs stay so a caption can take the deeper inset back.\n      //\n      // Each sits in its OWN section rather than beside the width knobs. The\n      // panel derives a section's subtitle from the union of `showWhen` keys\n      // across every knob inside it, so a gated knob dropped in with the\n      // ungated widths made the whole section read \"Per Header Slot x Footer\n      // Slot\" — a claim that is false for Expanded/Collapsed Width. Same rule\n      // the `avatar` entry states: a section is either all-shared or all-gated.\n      // One key per section also keeps the subtitle to \"Per Header Slot - On\"\n      // instead of an \"A x B\" that implies each knob depends on both.\n      { key: 'leadPadding', label: 'Padding', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'headerSlot', showWhen: { headerSlot: 'on' } },\n      { key: 'footerPadding', label: 'Padding', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'footerSlot', showWhen: { footerSlot: 'on' } },\n    ],\n    layoutVariants: [\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'expanded', label: 'Expanded' },\n          { value: 'collapsed', label: 'Collapsed' },\n        ],\n        defaultValue: 'expanded',\n      },\n      {\n        // The head slot is off in plenty of shells (a single-tenant app has no\n        // switcher), so it is a picker rather than always-on content — and with\n        // it off you can still see that the sidebar reserves nothing for it.\n        key: 'headerSlot',\n        label: 'Header Slot',\n        options: [\n          { value: 'on', label: 'On' },\n          { value: 'off', label: 'Off' },\n        ],\n        defaultValue: 'on',\n      },\n      {\n        // Both slots are optional, so both get a picker. One without the other\n        // would imply the footer is structural — and with either off you can see\n        // that the sidebar reserves no space for a slot it was not given.\n        key: 'footerSlot',\n        label: 'Footer Slot',\n        options: [\n          { value: 'on', label: 'On' },\n          { value: 'off', label: 'Off' },\n        ],\n        defaultValue: 'on',\n      },\n      {\n        // Auto-assign a distinct icon colour per item from a categorical\n        // palette (cycling) for scannability, vs the monochromatic default.\n        key: 'autoIconColors',\n        label: 'Auto Icon Colors',\n        options: [\n          { value: 'off', label: 'Off' },\n          { value: 'on', label: 'On' },\n        ],\n        defaultValue: 'off',\n      },\n    ],\n  },\n  {\n    id: 'app-top-bar',\n    name: 'App Top Bar',\n    category: 'App',\n    description: 'Top header: search, mobile menu trigger, primary action, theme toggle, avatar slot.',\n    styleProperties: [\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-surface-alt) 50%, transparent)', section: 'colors' },\n      { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n      { key: 'height', label: 'Height', control: 'number', defaultValue: 64, min: 48, max: 96, step: 4, unit: 'px' },\n      { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n      { key: 'searchMaxWidth', label: 'Search Max Width', control: 'number', defaultValue: 320, min: 160, max: 480, step: 8, unit: 'px' },\n    ],\n    layoutVariants: [],\n  },\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,UAA0B;AAAA;AAAA,EAErC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB,CAAC;AAAA,IAClB,gBAAgB,CAAC;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aACE;AAAA,IACF,iBAAiB;AAAA,MACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,4BAA4B,SAAS,SAAS;AAAA,MAC7H,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,MAChH,EAAE,KAAK,iBAAiB,OAAO,kBAAkB,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,MAC/H,EAAE,KAAK,kBAAkB,OAAO,mBAAmB,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MAC9H,EAAE,KAAK,gBAAgB,OAAO,mBAAmB,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA,MAC9H,EAAE,KAAK,eAAe,OAAO,eAAe,SAAS,SAAS,cAAc,2BAA2B,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAezH,EAAE,KAAK,eAAe,OAAO,WAAW,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,cAAc,UAAU,EAAE,YAAY,KAAK,EAAE;AAAA,MACxK,EAAE,KAAK,iBAAiB,OAAO,WAAW,SAAS,UAAU,cAAc,GAAG,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,cAAc,UAAU,EAAE,YAAY,KAAK,EAAE;AAAA,IAC5K;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,UACvC,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,QAC3C;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA;AAAA;AAAA;AAAA,QAIE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,UAC3B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,QAC/B;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA;AAAA;AAAA;AAAA,QAIE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,UAC3B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,QAC/B;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,MACA;AAAA;AAAA;AAAA,QAGE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC7B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,QAC7B;AAAA,QACA,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,MACf,EAAE,KAAK,mBAAmB,OAAO,cAAc,SAAS,SAAS,cAAc,iEAAiE,SAAS,SAAS;AAAA,MAClK,EAAE,KAAK,eAAe,OAAO,UAAU,SAAS,SAAS,cAAc,uBAAuB,SAAS,SAAS;AAAA,MAChH,EAAE,KAAK,UAAU,OAAO,UAAU,SAAS,UAAU,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MAC7G,EAAE,KAAK,YAAY,OAAO,aAAa,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MACjH,EAAE,KAAK,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,IAAI,KAAK,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,KAAK;AAAA,MACtG,EAAE,KAAK,kBAAkB,OAAO,oBAAoB,SAAS,UAAU,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,GAAG,MAAM,KAAK;AAAA,IACpI;AAAA,IACA,gBAAgB,CAAC;AAAA,EACnB;AACF;","names":[]}

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

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

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

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

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

@@ -0,0 +1,107 @@
+const appDefs = [
+  // ── App ──
+  {
+    id: "brand-settings",
+    name: "Brand Settings",
+    category: "App",
+    description: "Configure the Modo logo, sidebar icon, and primary font.",
+    styleProperties: [],
+    layoutVariants: [],
+    canvasBackground: false
+  },
+  {
+    id: "app-sidebar",
+    name: "App Sidebar",
+    category: "App",
+    description: "Left navigation: brand row, an optional header slot at the head of the rail, sectioned nav items, an optional footer slot, expand/collapse. Both slots survive collapse.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "var(--color-surface-alt)", section: "colors" },
+      { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "expandedWidth", label: "Expanded Width", control: "number", defaultValue: 256, min: 200, max: 320, step: 4, unit: "px" },
+      { key: "collapsedWidth", label: "Collapsed Width", control: "number", defaultValue: 64, min: 48, max: 96, step: 4, unit: "px" },
+      { key: "headingColor", label: "Section Heading", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      { key: "footerColor", label: "Footer Text", control: "color", defaultValue: "var(--color-text-muted)", section: "colors" },
+      // Both slots align to `__nav`'s 8px, so a control in either lines its text
+      // up with the nav rows (8 + the child's own 12 = 20px, where a nav label
+      // starts). The footer used to carry a 24px caption inset, which put a
+      // control at 36px and cost it 32px of width — an address ellipsised for no
+      // reason. The knobs stay so a caption can take the deeper inset back.
+      //
+      // Each sits in its OWN section rather than beside the width knobs. The
+      // panel derives a section's subtitle from the union of `showWhen` keys
+      // across every knob inside it, so a gated knob dropped in with the
+      // ungated widths made the whole section read "Per Header Slot x Footer
+      // Slot" — a claim that is false for Expanded/Collapsed Width. Same rule
+      // the `avatar` entry states: a section is either all-shared or all-gated.
+      // One key per section also keeps the subtitle to "Per Header Slot - On"
+      // instead of an "A x B" that implies each knob depends on both.
+      { key: "leadPadding", label: "Padding", control: "number", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "headerSlot", showWhen: { headerSlot: "on" } },
+      { key: "footerPadding", label: "Padding", control: "number", defaultValue: 8, min: 0, max: 24, step: 1, unit: "px", section: "footerSlot", showWhen: { footerSlot: "on" } }
+    ],
+    layoutVariants: [
+      {
+        key: "state",
+        label: "State",
+        options: [
+          { value: "expanded", label: "Expanded" },
+          { value: "collapsed", label: "Collapsed" }
+        ],
+        defaultValue: "expanded"
+      },
+      {
+        // The head slot is off in plenty of shells (a single-tenant app has no
+        // switcher), so it is a picker rather than always-on content — and with
+        // it off you can still see that the sidebar reserves nothing for it.
+        key: "headerSlot",
+        label: "Header Slot",
+        options: [
+          { value: "on", label: "On" },
+          { value: "off", label: "Off" }
+        ],
+        defaultValue: "on"
+      },
+      {
+        // Both slots are optional, so both get a picker. One without the other
+        // would imply the footer is structural — and with either off you can see
+        // that the sidebar reserves no space for a slot it was not given.
+        key: "footerSlot",
+        label: "Footer Slot",
+        options: [
+          { value: "on", label: "On" },
+          { value: "off", label: "Off" }
+        ],
+        defaultValue: "on"
+      },
+      {
+        // Auto-assign a distinct icon colour per item from a categorical
+        // palette (cycling) for scannability, vs the monochromatic default.
+        key: "autoIconColors",
+        label: "Auto Icon Colors",
+        options: [
+          { value: "off", label: "Off" },
+          { value: "on", label: "On" }
+        ],
+        defaultValue: "off"
+      }
+    ]
+  },
+  {
+    id: "app-top-bar",
+    name: "App Top Bar",
+    category: "App",
+    description: "Top header: search, mobile menu trigger, primary action, theme toggle, avatar slot.",
+    styleProperties: [
+      { key: "backgroundColor", label: "Background", control: "color", defaultValue: "color-mix(in srgb, var(--color-surface-alt) 50%, transparent)", section: "colors" },
+      { key: "borderColor", label: "Border", control: "color", defaultValue: "var(--color-border)", section: "colors" },
+      { key: "height", label: "Height", control: "number", defaultValue: 64, min: 48, max: 96, step: 4, unit: "px" },
+      { key: "paddingX", label: "Padding X", control: "number", defaultValue: 16, min: 8, max: 32, step: 2, unit: "px" },
+      { key: "gap", label: "Gap", control: "number", defaultValue: 12, min: 4, max: 24, step: 2, unit: "px" },
+      { key: "searchMaxWidth", label: "Search Max Width", control: "number", defaultValue: 320, min: 160, max: 480, step: 8, unit: "px" }
+    ],
+    layoutVariants: []
+  }
+];
+export {
+  appDefs
+};
+//# sourceMappingURL=app.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/lib/registry/app.ts"],"sourcesContent":["import type { ComponentDef } from '../types';\n\nexport const appDefs: ComponentDef[] = [\n  // ── App ──\n  {\n    id: 'brand-settings',\n    name: 'Brand Settings',\n    category: 'App',\n    description: 'Configure the Modo logo, sidebar icon, and primary font.',\n    styleProperties: [],\n    layoutVariants: [],\n    canvasBackground: false,\n  },\n  {\n    id: 'app-sidebar',\n    name: 'App Sidebar',\n    category: 'App',\n    description:\n      'Left navigation: brand row, an optional header slot at the head of the rail, sectioned nav items, an optional footer slot, expand/collapse. Both slots survive collapse.',\n    styleProperties: [\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'var(--color-surface-alt)', section: 'colors' },\n      { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n      { key: 'expandedWidth', label: 'Expanded Width', control: 'number', defaultValue: 256, min: 200, max: 320, step: 4, unit: 'px' },\n      { key: 'collapsedWidth', label: 'Collapsed Width', control: 'number', defaultValue: 64, min: 48, max: 96, step: 4, unit: 'px' },\n      { key: 'headingColor', label: 'Section Heading', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n      { key: 'footerColor', label: 'Footer Text', control: 'color', defaultValue: 'var(--color-text-muted)', section: 'colors' },\n      // Both slots align to `__nav`'s 8px, so a control in either lines its text\n      // up with the nav rows (8 + the child's own 12 = 20px, where a nav label\n      // starts). The footer used to carry a 24px caption inset, which put a\n      // control at 36px and cost it 32px of width — an address ellipsised for no\n      // reason. The knobs stay so a caption can take the deeper inset back.\n      //\n      // Each sits in its OWN section rather than beside the width knobs. The\n      // panel derives a section's subtitle from the union of `showWhen` keys\n      // across every knob inside it, so a gated knob dropped in with the\n      // ungated widths made the whole section read \"Per Header Slot x Footer\n      // Slot\" — a claim that is false for Expanded/Collapsed Width. Same rule\n      // the `avatar` entry states: a section is either all-shared or all-gated.\n      // One key per section also keeps the subtitle to \"Per Header Slot - On\"\n      // instead of an \"A x B\" that implies each knob depends on both.\n      { key: 'leadPadding', label: 'Padding', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'headerSlot', showWhen: { headerSlot: 'on' } },\n      { key: 'footerPadding', label: 'Padding', control: 'number', defaultValue: 8, min: 0, max: 24, step: 1, unit: 'px', section: 'footerSlot', showWhen: { footerSlot: 'on' } },\n    ],\n    layoutVariants: [\n      {\n        key: 'state',\n        label: 'State',\n        options: [\n          { value: 'expanded', label: 'Expanded' },\n          { value: 'collapsed', label: 'Collapsed' },\n        ],\n        defaultValue: 'expanded',\n      },\n      {\n        // The head slot is off in plenty of shells (a single-tenant app has no\n        // switcher), so it is a picker rather than always-on content — and with\n        // it off you can still see that the sidebar reserves nothing for it.\n        key: 'headerSlot',\n        label: 'Header Slot',\n        options: [\n          { value: 'on', label: 'On' },\n          { value: 'off', label: 'Off' },\n        ],\n        defaultValue: 'on',\n      },\n      {\n        // Both slots are optional, so both get a picker. One without the other\n        // would imply the footer is structural — and with either off you can see\n        // that the sidebar reserves no space for a slot it was not given.\n        key: 'footerSlot',\n        label: 'Footer Slot',\n        options: [\n          { value: 'on', label: 'On' },\n          { value: 'off', label: 'Off' },\n        ],\n        defaultValue: 'on',\n      },\n      {\n        // Auto-assign a distinct icon colour per item from a categorical\n        // palette (cycling) for scannability, vs the monochromatic default.\n        key: 'autoIconColors',\n        label: 'Auto Icon Colors',\n        options: [\n          { value: 'off', label: 'Off' },\n          { value: 'on', label: 'On' },\n        ],\n        defaultValue: 'off',\n      },\n    ],\n  },\n  {\n    id: 'app-top-bar',\n    name: 'App Top Bar',\n    category: 'App',\n    description: 'Top header: search, mobile menu trigger, primary action, theme toggle, avatar slot.',\n    styleProperties: [\n      { key: 'backgroundColor', label: 'Background', control: 'color', defaultValue: 'color-mix(in srgb, var(--color-surface-alt) 50%, transparent)', section: 'colors' },\n      { key: 'borderColor', label: 'Border', control: 'color', defaultValue: 'var(--color-border)', section: 'colors' },\n      { key: 'height', label: 'Height', control: 'number', defaultValue: 64, min: 48, max: 96, step: 4, unit: 'px' },\n      { key: 'paddingX', label: 'Padding X', control: 'number', defaultValue: 16, min: 8, max: 32, step: 2, unit: 'px' },\n      { key: 'gap', label: 'Gap', control: 'number', defaultValue: 12, min: 4, max: 24, step: 2, unit: 'px' },\n      { key: 'searchMaxWidth', label: 'Search Max Width', control: 'number', defaultValue: 320, min: 160, max: 480, step: 8, unit: 'px' },\n    ],\n    layoutVariants: [],\n  },\n];\n"],"mappings":"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","names":[]}