@viax.io/uxm 4.36.0

package/dist/studio/uxm-app.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/uxm-app.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { BrandFontStyles } from './brand-font-styles';\nimport { BrandTokenStyles } from './brand-token-styles';\nimport { FaviconSync } from './favicon-sync';\nimport { UxmProvider, useUxm } from './lib/context';\nimport { getComponentDef } from './lib/registry';\nimport { MobileGallery } from './mobile-gallery';\nimport { Canvas } from './shell/canvas';\nimport { PropertiesPanel } from './shell/properties-panel';\nimport { Sidebar } from './shell/sidebar';\nimport { ThemeSync } from './theme-sync';\n\nimport type { StudioPersistence } from './persistence/types';\nimport type { ReactNode } from 'react';\n\nconst DESKTOP_QUERY = '(min-width: 1024px)';\n\nexport interface UxmAppProps {\n  /** Renders the workbench in embedded mode (no full-page chrome). */\n  embed?: boolean;\n  /**\n   * Persistence backend. Defaults (via UxmProvider) to a read-only adapter\n   * suitable for the static portal — inject `createHttpPersistence()` to\n   * enable Save/Upload against a backend.\n   */\n  persistence?: StudioPersistence;\n  /**\n   * Sync the document `<link rel=\"icon\">` to the brand favicon. Off by\n   * default so a host that owns its own favicon (e.g. a Next app) isn't\n   * double-driven; the static portal opts in.\n   */\n  syncFavicon?: boolean;\n  /**\n   * Optional host-provided actions rendered in the canvas top bar, right after\n   * the Preview & Publish button (e.g. a user avatar / account menu). Desktop\n   * chrome only — the mobile gallery does not render it.\n   */\n  headerActions?: ReactNode;\n}\n\nexport function UxmApp({ embed = false, persistence, syncFavicon = false, headerActions }: UxmAppProps) {\n  return (\n    <UxmProvider persistence={persistence}>\n      <BrandTokenStyles />\n      <BrandFontStyles />\n      {syncFavicon && <FaviconSync />}\n      {!embed && <ThemeSync />}\n      {/* Flex column so the read-only DemoNotice banner takes its own height and\n          the h-full shell fills the rest instead of overflowing the viewport. */}\n      <div className=\"flex flex-col h-full\">\n        <DemoNotice />\n        <div className=\"flex-1 min-h-0\">\n          <UxmAppShell embed={embed} headerActions={headerActions} />\n        </div>\n      </div>\n    </UxmProvider>\n  );\n}\n\n/**\n * Read-only banner shown when persistence is disabled (static portal). Makes\n * it clear that live edits are preview-only and won't be saved (R2).\n */\nfunction DemoNotice() {\n  const { capabilities } = useUxm();\n  if (capabilities.persist) return null;\n  return (\n    <div\n      role=\"status\"\n      className=\"bg-accent-subtle text-accent-bold text-xs text-center px-4 py-1.5 border-b border-border\"\n    >\n      Demo mode — changes are preview-only and won&apos;t be saved.\n    </div>\n  );\n}\n\nfunction UxmAppShell({ embed, headerActions }: { embed: boolean; headerActions?: ReactNode }) {\n  const [isDesktop, setIsDesktop] = useState(true);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const mql = window.matchMedia(DESKTOP_QUERY);\n    const apply = (matches: boolean) => setIsDesktop(matches);\n    apply(mql.matches);\n    const onChange = (e: MediaQueryListEvent) => apply(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  if (!isDesktop) {\n    return <MobileGallery />;\n  }\n\n  return <DesktopShell embed={embed} headerActions={headerActions} />;\n}\n\ntype Orientation = 'horizontal' | 'vertical';\n\nfunction DesktopShell({ embed, headerActions }: { embed: boolean; headerActions?: ReactNode }) {\n  const { selectedId } = useUxm();\n  const [orientation, setOrientation] = useState<Orientation>('horizontal');\n  const [panelWidth, setPanelWidth] = useState(320);\n  const [panelHeight, setPanelHeight] = useState(280);\n  const def = getComponentDef(selectedId);\n  const showPropertiesPanel = !!def && (def.styleProperties.length > 0 || def.layoutVariants.length > 0);\n  const dragging = useRef(false);\n  const startPos = useRef(0);\n  const startSize = useRef(0);\n  const dragCleanup = useRef<(() => void) | null>(null);\n\n  const onResizeStart = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    dragging.current = true;\n    const isHorizontal = orientation === 'horizontal';\n    startPos.current = isHorizontal ? e.clientX : e.clientY;\n    startSize.current = isHorizontal ? panelWidth : panelHeight;\n\n    const onMouseMove = (ev: MouseEvent) => {\n      if (!dragging.current) return;\n      if (isHorizontal) {\n        const delta = startPos.current - ev.clientX;\n        setPanelWidth(Math.min(600, Math.max(240, startSize.current + delta)));\n      } else {\n        const delta = startPos.current - ev.clientY;\n        setPanelHeight(Math.min(560, Math.max(160, startSize.current + delta)));\n      }\n    };\n\n    const cleanup = () => {\n      dragging.current = false;\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      dragCleanup.current = null;\n    };\n\n    const onMouseUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';\n    document.body.style.userSelect = 'none';\n    dragCleanup.current = cleanup;\n  }, [orientation, panelWidth, panelHeight]);\n\n  useEffect(() => {\n    return () => {\n      dragCleanup.current?.();\n    };\n  }, []);\n\n  const toggleOrientation = useCallback(\n    () => setOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal')),\n    [],\n  );\n\n  return (\n    <div\n      className={`grid h-full text-text ${embed ? 'bg-card' : ''}`}\n      style={{ gridTemplateColumns: '260px 1fr' }}\n    >\n      <Sidebar embed={embed} />\n      <div\n        className={`flex min-w-0 min-h-0 ${\n          orientation === 'horizontal' ? 'flex-row' : 'flex-col'\n        }`}\n      >\n        <div className=\"flex-1 min-w-0 min-h-0\">\n          <Canvas embed={embed} headerActions={headerActions} />\n        </div>\n        {showPropertiesPanel && (\n          <div\n            className=\"relative flex shrink-0\"\n            style={\n              orientation === 'horizontal'\n                ? { width: panelWidth }\n                : { height: panelHeight }\n            }\n          >\n            {/* Resize handle */}\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer-driven splitter handle; keyboard resize is out of scope */}\n            <div\n              onMouseDown={onResizeStart}\n              className={`absolute z-20 group ${\n                orientation === 'horizontal'\n                  ? 'left-0 top-0 bottom-0 w-1.5 cursor-col-resize'\n                  : 'left-0 right-0 top-0 h-1.5 cursor-row-resize'\n              }`}\n              style={\n                orientation === 'horizontal'\n                  ? { marginLeft: -3 }\n                  : { marginTop: -3 }\n              }\n            >\n              <div className=\"h-full w-full transition-colors group-hover:bg-accent/30 group-active:bg-accent/50\" />\n            </div>\n            <PropertiesPanel\n              embed={embed}\n              orientation={orientation}\n              onToggleOrientation={toggleOrientation}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/studio/uxm-app.d.ts

@@ -0,0 +1,26 @@
+import type { StudioPersistence } from './persistence/types.js';
+import type { ReactNode } from 'react';
+export interface UxmAppProps {
+    /** Renders the workbench in embedded mode (no full-page chrome). */
+    embed?: boolean;
+    /**
+     * Persistence backend. Defaults (via UxmProvider) to a read-only adapter
+     * suitable for the static portal — inject `createHttpPersistence()` to
+     * enable Save/Upload against a backend.
+     */
+    persistence?: StudioPersistence;
+    /**
+     * Sync the document `<link rel="icon">` to the brand favicon. Off by
+     * default so a host that owns its own favicon (e.g. a Next app) isn't
+     * double-driven; the static portal opts in.
+     */
+    syncFavicon?: boolean;
+    /**
+     * Optional host-provided actions rendered in the canvas top bar, right after
+     * the Preview & Publish button (e.g. a user avatar / account menu). Desktop
+     * chrome only — the mobile gallery does not render it.
+     */
+    headerActions?: ReactNode;
+}
+export declare function UxmApp({ embed, persistence, syncFavicon, headerActions }: UxmAppProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=uxm-app.d.ts.map

package/dist/studio/uxm-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uxm-app.d.ts","sourceRoot":"","sources":["../../src/studio/uxm-app.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAa,EAAE,WAAW,EAAE,WAAmB,EAAE,aAAa,EAAE,EAAE,WAAW,2CAiBrG"}

package/dist/studio/uxm-app.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { BrandFontStyles } from "./brand-font-styles.js";
+import { BrandTokenStyles } from "./brand-token-styles.js";
+import { FaviconSync } from "./favicon-sync.js";
+import { UxmProvider, useUxm } from "./lib/context.js";
+import { getComponentDef } from "./lib/registry/index.js";
+import { MobileGallery } from "./mobile-gallery.js";
+import { Canvas } from "./shell/canvas.js";
+import { PropertiesPanel } from "./shell/properties-panel.js";
+import { Sidebar } from "./shell/sidebar.js";
+import { ThemeSync } from "./theme-sync.js";
+const DESKTOP_QUERY = "(min-width: 1024px)";
+function UxmApp({ embed = false, persistence, syncFavicon = false, headerActions }) {
+  return /* @__PURE__ */ jsxs(UxmProvider, { persistence, children: [
+    /* @__PURE__ */ jsx(BrandTokenStyles, {}),
+    /* @__PURE__ */ jsx(BrandFontStyles, {}),
+    syncFavicon && /* @__PURE__ */ jsx(FaviconSync, {}),
+    !embed && /* @__PURE__ */ jsx(ThemeSync, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ jsx(DemoNotice, {}),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(UxmAppShell, { embed, headerActions }) })
+    ] })
+  ] });
+}
+function DemoNotice() {
+  const { capabilities } = useUxm();
+  if (capabilities.persist) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      className: "bg-accent-subtle text-accent-bold text-xs text-center px-4 py-1.5 border-b border-border",
+      children: "Demo mode \u2014 changes are preview-only and won't be saved."
+    }
+  );
+}
+function UxmAppShell({ embed, headerActions }) {
+  const [isDesktop, setIsDesktop] = useState(true);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(DESKTOP_QUERY);
+    const apply = (matches) => setIsDesktop(matches);
+    apply(mql.matches);
+    const onChange = (e) => apply(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  if (!isDesktop) {
+    return /* @__PURE__ */ jsx(MobileGallery, {});
+  }
+  return /* @__PURE__ */ jsx(DesktopShell, { embed, headerActions });
+}
+function DesktopShell({ embed, headerActions }) {
+  const { selectedId } = useUxm();
+  const [orientation, setOrientation] = useState("horizontal");
+  const [panelWidth, setPanelWidth] = useState(320);
+  const [panelHeight, setPanelHeight] = useState(280);
+  const def = getComponentDef(selectedId);
+  const showPropertiesPanel = !!def && (def.styleProperties.length > 0 || def.layoutVariants.length > 0);
+  const dragging = useRef(false);
+  const startPos = useRef(0);
+  const startSize = useRef(0);
+  const dragCleanup = useRef(null);
+  const onResizeStart = useCallback((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const isHorizontal = orientation === "horizontal";
+    startPos.current = isHorizontal ? e.clientX : e.clientY;
+    startSize.current = isHorizontal ? panelWidth : panelHeight;
+    const onMouseMove = (ev) => {
+      if (!dragging.current) return;
+      if (isHorizontal) {
+        const delta = startPos.current - ev.clientX;
+        setPanelWidth(Math.min(600, Math.max(240, startSize.current + delta)));
+      } else {
+        const delta = startPos.current - ev.clientY;
+        setPanelHeight(Math.min(560, Math.max(160, startSize.current + delta)));
+      }
+    };
+    const cleanup = () => {
+      dragging.current = false;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      dragCleanup.current = null;
+    };
+    const onMouseUp = () => {
+      cleanup();
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    dragCleanup.current = cleanup;
+  }, [orientation, panelWidth, panelHeight]);
+  useEffect(() => {
+    return () => {
+      dragCleanup.current?.();
+    };
+  }, []);
+  const toggleOrientation = useCallback(
+    () => setOrientation((o) => o === "horizontal" ? "vertical" : "horizontal"),
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `grid h-full text-text ${embed ? "bg-card" : ""}`,
+      style: { gridTemplateColumns: "260px 1fr" },
+      children: [
+        /* @__PURE__ */ jsx(Sidebar, { embed }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex min-w-0 min-h-0 ${orientation === "horizontal" ? "flex-row" : "flex-col"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 min-h-0", children: /* @__PURE__ */ jsx(Canvas, { embed, headerActions }) }),
+              showPropertiesPanel && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "relative flex shrink-0",
+                  style: orientation === "horizontal" ? { width: panelWidth } : { height: panelHeight },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        onMouseDown: onResizeStart,
+                        className: `absolute z-20 group ${orientation === "horizontal" ? "left-0 top-0 bottom-0 w-1.5 cursor-col-resize" : "left-0 right-0 top-0 h-1.5 cursor-row-resize"}`,
+                        style: orientation === "horizontal" ? { marginLeft: -3 } : { marginTop: -3 },
+                        children: /* @__PURE__ */ jsx("div", { className: "h-full w-full transition-colors group-hover:bg-accent/30 group-active:bg-accent/50" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      PropertiesPanel,
+                      {
+                        embed,
+                        orientation,
+                        onToggleOrientation: toggleOrientation
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UxmApp
+};
+//# sourceMappingURL=uxm-app.js.map

package/dist/studio/uxm-app.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/uxm-app.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { BrandFontStyles } from './brand-font-styles';\nimport { BrandTokenStyles } from './brand-token-styles';\nimport { FaviconSync } from './favicon-sync';\nimport { UxmProvider, useUxm } from './lib/context';\nimport { getComponentDef } from './lib/registry';\nimport { MobileGallery } from './mobile-gallery';\nimport { Canvas } from './shell/canvas';\nimport { PropertiesPanel } from './shell/properties-panel';\nimport { Sidebar } from './shell/sidebar';\nimport { ThemeSync } from './theme-sync';\n\nimport type { StudioPersistence } from './persistence/types';\nimport type { ReactNode } from 'react';\n\nconst DESKTOP_QUERY = '(min-width: 1024px)';\n\nexport interface UxmAppProps {\n  /** Renders the workbench in embedded mode (no full-page chrome). */\n  embed?: boolean;\n  /**\n   * Persistence backend. Defaults (via UxmProvider) to a read-only adapter\n   * suitable for the static portal — inject `createHttpPersistence()` to\n   * enable Save/Upload against a backend.\n   */\n  persistence?: StudioPersistence;\n  /**\n   * Sync the document `<link rel=\"icon\">` to the brand favicon. Off by\n   * default so a host that owns its own favicon (e.g. a Next app) isn't\n   * double-driven; the static portal opts in.\n   */\n  syncFavicon?: boolean;\n  /**\n   * Optional host-provided actions rendered in the canvas top bar, right after\n   * the Preview & Publish button (e.g. a user avatar / account menu). Desktop\n   * chrome only — the mobile gallery does not render it.\n   */\n  headerActions?: ReactNode;\n}\n\nexport function UxmApp({ embed = false, persistence, syncFavicon = false, headerActions }: UxmAppProps) {\n  return (\n    <UxmProvider persistence={persistence}>\n      <BrandTokenStyles />\n      <BrandFontStyles />\n      {syncFavicon && <FaviconSync />}\n      {!embed && <ThemeSync />}\n      {/* Flex column so the read-only DemoNotice banner takes its own height and\n          the h-full shell fills the rest instead of overflowing the viewport. */}\n      <div className=\"flex flex-col h-full\">\n        <DemoNotice />\n        <div className=\"flex-1 min-h-0\">\n          <UxmAppShell embed={embed} headerActions={headerActions} />\n        </div>\n      </div>\n    </UxmProvider>\n  );\n}\n\n/**\n * Read-only banner shown when persistence is disabled (static portal). Makes\n * it clear that live edits are preview-only and won't be saved (R2).\n */\nfunction DemoNotice() {\n  const { capabilities } = useUxm();\n  if (capabilities.persist) return null;\n  return (\n    <div\n      role=\"status\"\n      className=\"bg-accent-subtle text-accent-bold text-xs text-center px-4 py-1.5 border-b border-border\"\n    >\n      Demo mode — changes are preview-only and won&apos;t be saved.\n    </div>\n  );\n}\n\nfunction UxmAppShell({ embed, headerActions }: { embed: boolean; headerActions?: ReactNode }) {\n  const [isDesktop, setIsDesktop] = useState(true);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const mql = window.matchMedia(DESKTOP_QUERY);\n    const apply = (matches: boolean) => setIsDesktop(matches);\n    apply(mql.matches);\n    const onChange = (e: MediaQueryListEvent) => apply(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  if (!isDesktop) {\n    return <MobileGallery />;\n  }\n\n  return <DesktopShell embed={embed} headerActions={headerActions} />;\n}\n\ntype Orientation = 'horizontal' | 'vertical';\n\nfunction DesktopShell({ embed, headerActions }: { embed: boolean; headerActions?: ReactNode }) {\n  const { selectedId } = useUxm();\n  const [orientation, setOrientation] = useState<Orientation>('horizontal');\n  const [panelWidth, setPanelWidth] = useState(320);\n  const [panelHeight, setPanelHeight] = useState(280);\n  const def = getComponentDef(selectedId);\n  const showPropertiesPanel = !!def && (def.styleProperties.length > 0 || def.layoutVariants.length > 0);\n  const dragging = useRef(false);\n  const startPos = useRef(0);\n  const startSize = useRef(0);\n  const dragCleanup = useRef<(() => void) | null>(null);\n\n  const onResizeStart = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    dragging.current = true;\n    const isHorizontal = orientation === 'horizontal';\n    startPos.current = isHorizontal ? e.clientX : e.clientY;\n    startSize.current = isHorizontal ? panelWidth : panelHeight;\n\n    const onMouseMove = (ev: MouseEvent) => {\n      if (!dragging.current) return;\n      if (isHorizontal) {\n        const delta = startPos.current - ev.clientX;\n        setPanelWidth(Math.min(600, Math.max(240, startSize.current + delta)));\n      } else {\n        const delta = startPos.current - ev.clientY;\n        setPanelHeight(Math.min(560, Math.max(160, startSize.current + delta)));\n      }\n    };\n\n    const cleanup = () => {\n      dragging.current = false;\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      dragCleanup.current = null;\n    };\n\n    const onMouseUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';\n    document.body.style.userSelect = 'none';\n    dragCleanup.current = cleanup;\n  }, [orientation, panelWidth, panelHeight]);\n\n  useEffect(() => {\n    return () => {\n      dragCleanup.current?.();\n    };\n  }, []);\n\n  const toggleOrientation = useCallback(\n    () => setOrientation((o) => (o === 'horizontal' ? 'vertical' : 'horizontal')),\n    [],\n  );\n\n  return (\n    <div\n      className={`grid h-full text-text ${embed ? 'bg-card' : ''}`}\n      style={{ gridTemplateColumns: '260px 1fr' }}\n    >\n      <Sidebar embed={embed} />\n      <div\n        className={`flex min-w-0 min-h-0 ${\n          orientation === 'horizontal' ? 'flex-row' : 'flex-col'\n        }`}\n      >\n        <div className=\"flex-1 min-w-0 min-h-0\">\n          <Canvas embed={embed} headerActions={headerActions} />\n        </div>\n        {showPropertiesPanel && (\n          <div\n            className=\"relative flex shrink-0\"\n            style={\n              orientation === 'horizontal'\n                ? { width: panelWidth }\n                : { height: panelHeight }\n            }\n          >\n            {/* Resize handle */}\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer-driven splitter handle; keyboard resize is out of scope */}\n            <div\n              onMouseDown={onResizeStart}\n              className={`absolute z-20 group ${\n                orientation === 'horizontal'\n                  ? 'left-0 top-0 bottom-0 w-1.5 cursor-col-resize'\n                  : 'left-0 right-0 top-0 h-1.5 cursor-row-resize'\n              }`}\n              style={\n                orientation === 'horizontal'\n                  ? { marginLeft: -3 }\n                  : { marginTop: -3 }\n              }\n            >\n              <div className=\"h-full w-full transition-colors group-hover:bg-accent/30 group-active:bg-accent/50\" />\n            </div>\n            <PropertiesPanel\n              embed={embed}\n              orientation={orientation}\n              onToggleOrientation={toggleOrientation}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tokens/index.cjs

@@ -0,0 +1,84 @@
+"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 tokens_exports = {};
+__export(tokens_exports, {
+  findToken: () => findToken,
+  isTokenValue: () => isTokenValue,
+  resolveHex: () => resolveHex,
+  themeTokens: () => themeTokens
+});
+module.exports = __toCommonJS(tokens_exports);
+const themeTokens = [
+  // ── Surfaces ──
+  { name: "Surface", variable: "var(--color-surface)", cssVar: "--color-surface", hex: "#F8F7F6", darkHex: "#232220", group: "surfaces" },
+  { name: "Surface Alt", variable: "var(--color-surface-alt)", cssVar: "--color-surface-alt", hex: "#F2F1F0", darkHex: "#2A2927", group: "surfaces" },
+  { name: "Card", variable: "var(--color-card)", cssVar: "--color-card", hex: "#FFFFFF", darkHex: "#1B1A18", group: "surfaces" },
+  // ── Text ──
+  { name: "Text", variable: "var(--color-text)", cssVar: "--color-text", hex: "#1E1E1E", darkHex: "#F5F5F5", group: "text" },
+  { name: "Text Strong", variable: "var(--color-text-strong)", cssVar: "--color-text-strong", hex: "#4A4A4A", darkHex: "#C8C8C8", group: "text" },
+  { name: "Text Muted", variable: "var(--color-text-muted)", cssVar: "--color-text-muted", hex: "#9CA3AF", darkHex: "#A3A3A3", group: "text" },
+  { name: "Text Subtle", variable: "var(--color-text-subtle)", cssVar: "--color-text-subtle", hex: "#CBD5E1", darkHex: "#6E6E6E", group: "text" },
+  { name: "Text Inverse", variable: "var(--color-text-inverse)", cssVar: "--color-text-inverse", hex: "#FFFFFF", darkHex: "#1B1A18", group: "text" },
+  // ── Borders ──
+  { name: "Border", variable: "var(--color-border)", cssVar: "--color-border", hex: "#EBEBEA", darkHex: "#444240", group: "borders" },
+  // ── Accent ── (brand colour first; the others derive from its hue)
+  { name: "Accent", variable: "var(--color-accent)", cssVar: "--color-accent", hex: "#3ECC87", darkHex: "#4FD99A", group: "accent", identity: true },
+  { name: "Accent Subtle", variable: "var(--color-accent-subtle)", cssVar: "--color-accent-subtle", hex: "#E6FFD1", darkHex: "#1A4A2C", group: "accent" },
+  { name: "Accent Light", variable: "var(--color-accent-light)", cssVar: "--color-accent-light", hex: "#90E9B8", darkHex: "#3AA36A", group: "accent" },
+  { name: "Accent Bold", variable: "var(--color-accent-bold)", cssVar: "--color-accent-bold", hex: "#1E7150", darkHex: "#8AE6B4", group: "accent" },
+  // ── Highlights ──
+  { name: "Highlight Warm", variable: "var(--color-highlight-warm)", cssVar: "--color-highlight-warm", hex: "#FCD0A1", darkHex: "#8A5A2B", group: "highlights" },
+  { name: "Highlight Cool", variable: "var(--color-highlight-cool)", cssVar: "--color-highlight-cool", hex: "#C3BEF7", darkHex: "#4D4A7F", group: "highlights" },
+  { name: "On Highlight Warm", variable: "var(--color-on-highlight-warm)", cssVar: "--color-on-highlight-warm", hex: "#7C6B3E", darkHex: "#FCD0A1", group: "highlights" },
+  { name: "On Highlight Cool", variable: "var(--color-on-highlight-cool)", cssVar: "--color-on-highlight-cool", hex: "#5B54A0", darkHex: "#C3BEF7", group: "highlights" },
+  // ── Category markers ──
+  { name: "Composite", variable: "var(--color-category-composite)", cssVar: "--color-category-composite", hex: "#F472B6", darkHex: "#F9A8D4", group: "categories" },
+  { name: "Diagram", variable: "var(--color-category-diagram)", cssVar: "--color-category-diagram", hex: "#6366F1", darkHex: "#818CF8", group: "categories" },
+  // ── Semantic ──
+  { name: "Success Bg", variable: "var(--color-success-bg)", cssVar: "--color-success-bg", hex: "#F0FDF4", darkHex: "#1A3924", group: "semantic" },
+  { name: "Success Text", variable: "var(--color-success-text)", cssVar: "--color-success-text", hex: "#166534", darkHex: "#86EFAC", group: "semantic" },
+  { name: "Success Border", variable: "var(--color-success-border)", cssVar: "--color-success-border", hex: "#BBF7D0", darkHex: "#2F6040", group: "semantic" },
+  { name: "Warning Bg", variable: "var(--color-warning-bg)", cssVar: "--color-warning-bg", hex: "#FFFBEB", darkHex: "#3A2D1B", group: "semantic" },
+  { name: "Warning Text", variable: "var(--color-warning-text)", cssVar: "--color-warning-text", hex: "#92400E", darkHex: "#FCD34D", group: "semantic" },
+  { name: "Warning Border", variable: "var(--color-warning-border)", cssVar: "--color-warning-border", hex: "#FDE68A", darkHex: "#5E4D30", group: "semantic" },
+  { name: "Danger Bg", variable: "var(--color-danger-bg)", cssVar: "--color-danger-bg", hex: "#FEF2F2", darkHex: "#3A2022", group: "semantic" },
+  { name: "Danger Text", variable: "var(--color-danger-text)", cssVar: "--color-danger-text", hex: "#991B1B", darkHex: "#FCA5A5", group: "semantic" },
+  { name: "Danger Border", variable: "var(--color-danger-border)", cssVar: "--color-danger-border", hex: "#FECACA", darkHex: "#5E3034", group: "semantic" },
+  { name: "Info Bg", variable: "var(--color-info-bg)", cssVar: "--color-info-bg", hex: "#EFF6FF", darkHex: "#1A2E4C", group: "semantic" },
+  { name: "Info Text", variable: "var(--color-info-text)", cssVar: "--color-info-text", hex: "#1E40AF", darkHex: "#93C5FD", group: "semantic" },
+  { name: "Info Border", variable: "var(--color-info-border)", cssVar: "--color-info-border", hex: "#BFDBFE", darkHex: "#31507F", group: "semantic" }
+];
+function findToken(value) {
+  return themeTokens.find((t) => t.variable === value);
+}
+function isTokenValue(value) {
+  return value.startsWith("var(--color-");
+}
+function resolveHex(value) {
+  const token = findToken(value);
+  return token ? token.hex : value;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  findToken,
+  isTokenValue,
+  resolveHex,
+  themeTokens
+});
+//# sourceMappingURL=index.cjs.map

package/dist/tokens/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/index.ts"],"sourcesContent":["export interface ThemeToken {\n  name: string;\n  variable: string;\n  cssVar: string;\n  hex: string;\n  darkHex: string;\n  group: 'surfaces' | 'text' | 'borders' | 'accent' | 'highlights' | 'categories' | 'semantic';\n  /**\n   * Promoted into Brand Settings' Identity section as a top-level brand knob\n   * (the full token list stays the expert layer). Curated HERE, in the\n   * canonical catalog, so the promotion survives token reshuffles — a\n   * hardcoded list in the editor would silently drift. Keep this rare: it\n   * only earns its place on tokens that FAN OUT (the accent base drives the\n   * whole ramp), not ones that merely relocate a row.\n   */\n  identity?: boolean;\n}\n\nexport const themeTokens: ThemeToken[] = [\n  // ── Surfaces ──\n  { name: 'Surface', variable: 'var(--color-surface)', cssVar: '--color-surface', hex: '#F8F7F6', darkHex: '#232220', group: 'surfaces' },\n  { name: 'Surface Alt', variable: 'var(--color-surface-alt)', cssVar: '--color-surface-alt', hex: '#F2F1F0', darkHex: '#2A2927', group: 'surfaces' },\n  { name: 'Card', variable: 'var(--color-card)', cssVar: '--color-card', hex: '#FFFFFF', darkHex: '#1B1A18', group: 'surfaces' },\n\n  // ── Text ──\n  { name: 'Text', variable: 'var(--color-text)', cssVar: '--color-text', hex: '#1E1E1E', darkHex: '#F5F5F5', group: 'text' },\n  { name: 'Text Strong', variable: 'var(--color-text-strong)', cssVar: '--color-text-strong', hex: '#4A4A4A', darkHex: '#C8C8C8', group: 'text' },\n  { name: 'Text Muted', variable: 'var(--color-text-muted)', cssVar: '--color-text-muted', hex: '#9CA3AF', darkHex: '#A3A3A3', group: 'text' },\n  { name: 'Text Subtle', variable: 'var(--color-text-subtle)', cssVar: '--color-text-subtle', hex: '#CBD5E1', darkHex: '#6E6E6E', group: 'text' },\n  { name: 'Text Inverse', variable: 'var(--color-text-inverse)', cssVar: '--color-text-inverse', hex: '#FFFFFF', darkHex: '#1B1A18', group: 'text' },\n\n  // ── Borders ──\n  { name: 'Border', variable: 'var(--color-border)', cssVar: '--color-border', hex: '#EBEBEA', darkHex: '#444240', group: 'borders' },\n\n  // ── Accent ── (brand colour first; the others derive from its hue)\n  { name: 'Accent', variable: 'var(--color-accent)', cssVar: '--color-accent', hex: '#3ECC87', darkHex: '#4FD99A', group: 'accent', identity: true },\n  { name: 'Accent Subtle', variable: 'var(--color-accent-subtle)', cssVar: '--color-accent-subtle', hex: '#E6FFD1', darkHex: '#1A4A2C', group: 'accent' },\n  { name: 'Accent Light', variable: 'var(--color-accent-light)', cssVar: '--color-accent-light', hex: '#90E9B8', darkHex: '#3AA36A', group: 'accent' },\n  { name: 'Accent Bold', variable: 'var(--color-accent-bold)', cssVar: '--color-accent-bold', hex: '#1E7150', darkHex: '#8AE6B4', group: 'accent' },\n\n  // ── Highlights ──\n  { name: 'Highlight Warm', variable: 'var(--color-highlight-warm)', cssVar: '--color-highlight-warm', hex: '#FCD0A1', darkHex: '#8A5A2B', group: 'highlights' },\n  { name: 'Highlight Cool', variable: 'var(--color-highlight-cool)', cssVar: '--color-highlight-cool', hex: '#C3BEF7', darkHex: '#4D4A7F', group: 'highlights' },\n  { name: 'On Highlight Warm', variable: 'var(--color-on-highlight-warm)', cssVar: '--color-on-highlight-warm', hex: '#7C6B3E', darkHex: '#FCD0A1', group: 'highlights' },\n  { name: 'On Highlight Cool', variable: 'var(--color-on-highlight-cool)', cssVar: '--color-on-highlight-cool', hex: '#5B54A0', darkHex: '#C3BEF7', group: 'highlights' },\n\n  // ── Category markers ──\n  { name: 'Composite', variable: 'var(--color-category-composite)', cssVar: '--color-category-composite', hex: '#F472B6', darkHex: '#F9A8D4', group: 'categories' },\n  { name: 'Diagram', variable: 'var(--color-category-diagram)', cssVar: '--color-category-diagram', hex: '#6366F1', darkHex: '#818CF8', group: 'categories' },\n\n  // ── Semantic ──\n  { name: 'Success Bg', variable: 'var(--color-success-bg)', cssVar: '--color-success-bg', hex: '#F0FDF4', darkHex: '#1A3924', group: 'semantic' },\n  { name: 'Success Text', variable: 'var(--color-success-text)', cssVar: '--color-success-text', hex: '#166534', darkHex: '#86EFAC', group: 'semantic' },\n  { name: 'Success Border', variable: 'var(--color-success-border)', cssVar: '--color-success-border', hex: '#BBF7D0', darkHex: '#2F6040', group: 'semantic' },\n  { name: 'Warning Bg', variable: 'var(--color-warning-bg)', cssVar: '--color-warning-bg', hex: '#FFFBEB', darkHex: '#3A2D1B', group: 'semantic' },\n  { name: 'Warning Text', variable: 'var(--color-warning-text)', cssVar: '--color-warning-text', hex: '#92400E', darkHex: '#FCD34D', group: 'semantic' },\n  { name: 'Warning Border', variable: 'var(--color-warning-border)', cssVar: '--color-warning-border', hex: '#FDE68A', darkHex: '#5E4D30', group: 'semantic' },\n  { name: 'Danger Bg', variable: 'var(--color-danger-bg)', cssVar: '--color-danger-bg', hex: '#FEF2F2', darkHex: '#3A2022', group: 'semantic' },\n  { name: 'Danger Text', variable: 'var(--color-danger-text)', cssVar: '--color-danger-text', hex: '#991B1B', darkHex: '#FCA5A5', group: 'semantic' },\n  { name: 'Danger Border', variable: 'var(--color-danger-border)', cssVar: '--color-danger-border', hex: '#FECACA', darkHex: '#5E3034', group: 'semantic' },\n  { name: 'Info Bg', variable: 'var(--color-info-bg)', cssVar: '--color-info-bg', hex: '#EFF6FF', darkHex: '#1A2E4C', group: 'semantic' },\n  { name: 'Info Text', variable: 'var(--color-info-text)', cssVar: '--color-info-text', hex: '#1E40AF', darkHex: '#93C5FD', group: 'semantic' },\n  { name: 'Info Border', variable: 'var(--color-info-border)', cssVar: '--color-info-border', hex: '#BFDBFE', darkHex: '#31507F', group: 'semantic' },\n];\n\n/** Look up a token by its CSS variable string */\nexport function findToken(value: string): ThemeToken | undefined {\n  return themeTokens.find((t) => t.variable === value);\n}\n\n/** Check if a value is a theme token reference (vs a raw hex) */\nexport function isTokenValue(value: string): boolean {\n  return value.startsWith('var(--color-');\n}\n\n/** Get the display hex for a value — resolves tokens to their hex, passes through raw hex */\nexport function resolveHex(value: string): string {\n  const token = findToken(value);\n  return token ? token.hex : value;\n}\n"],"mappings":"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","names":[]}

package/dist/tokens/index.css

@@ -0,0 +1,229 @@
+:root {
+  /* ── Surfaces ── */
+  --color-surface: #F8F7F6;
+  --color-surface-alt: #F2F1F0;
+  --color-card: #FFFFFF;
+
+  /* ── Text ── */
+  --color-text: #1E1E1E;
+  --color-text-strong: #4A4A4A;
+  --color-text-muted: #9CA3AF;
+  --color-text-subtle: #CBD5E1;
+  --color-text-inverse: #FFFFFF;
+
+  /* ── Borders ── */
+  --color-border: #EBEBEA;
+
+  /* ── Accent (primary action) ── */
+  --color-accent-subtle: #E6FFD1;
+  --color-accent-light: #90E9B8;
+  --color-accent: #3ECC87;
+  --color-accent-bold: #1E7150;
+
+  /* Drop-target highlight, shared by every canvas atom that can receive a drag
+     (LifecycleGroupBox today). A semantic ALIAS, not a literal: it follows the
+     brand accent through both themes, which is why there is no override in the
+     dark block below and why it is absent from `themeTokens` — an entry there
+     needs a light/dark hex pair, and pinning one would freeze the colour away
+     from accent. Consumers who want a distinct drop colour set this one var. */
+  --color-drop-target: var(--color-accent);
+
+  /* ── Highlights ── */
+  --color-highlight-warm: #FCD0A1;
+  --color-highlight-cool: #C3BEF7;
+  --color-on-highlight-warm: #7C6B3E;
+  --color-on-highlight-cool: #5B54A0;
+
+  /* ── Category markers ── */
+  --color-category-composite: #F472B6;
+  --color-category-diagram: #6366F1;
+
+  /* ── Semantic ── */
+  --color-success-bg: #F0FDF4;
+  --color-success-text: #166534;
+  --color-success-border: #BBF7D0;
+  --color-info-bg: #EFF6FF;
+  --color-info-text: #1E40AF;
+  --color-info-border: #BFDBFE;
+  --color-warning-bg: #FFFBEB;
+  --color-warning-text: #92400E;
+  --color-warning-border: #FDE68A;
+  --color-danger-bg: #FEF2F2;
+  --color-danger-text: #991B1B;
+  --color-danger-border: #FECACA;
+
+  /* Canvas dot-grid colour (overridden in dark) */
+  --color-canvas-dot: #E0E0E0;
+
+  /* Theme-agnostic preview swatches — always render their named mode,
+     regardless of the active global theme. Not overridden below. */
+  --color-preview-bg-light: #FFFFFF;
+  --color-preview-bg-dark: #232220;
+  --color-preview-border-light: #EBEBEA;
+  --color-preview-border-dark: #444240;
+
+  /* Elevation — semantic shadow scales. Theme-aware via the
+     overrides in [data-theme="dark"]. Two-layer composites are
+     intentional for soft, spread elevation. */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.10);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.18);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
+  --shadow-modal: var(--shadow-2xl);
+
+  /* ── Typography ──
+     No font file is bundled; reference the family name with a system
+     fallback stack so `--font-sans` resolves even when Inter is absent. */
+  --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Dark theme.
+
+   The neutral ramp deliberately sits ABOVE near-black: card L*9, surface L*13,
+   surface-alt L*17, in the same register as GitHub's dimmed theme and a notch
+   lighter than VS Code's default. The previous ramp (L* 3 / 6 / 10, card at
+   #0B0B0B) read as pure black under the cards and inputs that cover most of a
+   page. Large black fields raise perceived contrast to the point of halation
+   around light text, and they leave no room BELOW the surfaces for a shadow or
+   a well to register.
+
+   Two properties are load-bearing if you retune these:
+
+   1. ORDER. card < surface < surface-alt in lightness — cards and inputs are
+      darker than the page, so they read as wells. That is inverted from light
+      mode (where card is the brightest) and it is the existing convention
+      here, not an accident. Changing it is a redesign, not a retune.
+
+   2. WARMTH. Every neutral carries an R-B delta of 3-4, echoing the light
+      palette's own faint warmth (delta 2 at L*~95). Push it further and the
+      greys read brown; drop it to zero and dark mode stops matching light.
+
+   Tinted panels (accent-subtle, the semantic bgs and borders) were lifted with
+   the surfaces, by enough to KEEP their old separation from the page rather
+   than merely move — lift them less than the page and a banner ends up closer
+   to its background than it started, which is the opposite of the intent.
+
+   TWO EXCEPTIONS, both deliberate. `--color-highlight-warm` / `-cool` did NOT
+   move. They are mid-tones squeezed from both sides: lifting warm far enough
+   to clear 3:1 against the page (#96632F) drops `--color-on-highlight-warm`
+   text sitting on it from 4.10 to 3.56, and cool cannot reach 3:1 at any value
+   that keeps its own text above 3.1. Text contrast outranks a decorative fill
+   boundary, so both stay put and the chips separate from the page at 2.71 and
+   1.97 — Avatar is the only atom painting one raw (avatar.scss), and its
+   initials sit at 7.40 on the chip, so content legibility never depended on
+   the fill edge. Revisit only together with the `on-highlight-*` pair.
+
+   ⚠️ UPGRADING AN EXISTING DEPLOYMENT. Brand Settings saves ONE override per
+   token with a per-token reset, so partial customisation is normal — and a
+   tenant who pinned some dark tokens keeps them while the rest move here. A
+   saved `--color-card: #000000` against the new #232220 page is a far harder
+   step than either palette intends. Nothing in the library can detect this;
+   whoever owns a themed deployment should re-check its saved dark overrides
+   against this ramp, or clear them to adopt it wholesale. */
+[data-theme="dark"] {
+  /* ── Surfaces ── */
+  --color-surface: #232220;
+  --color-surface-alt: #2A2927;
+  --color-card: #1B1A18;
+
+  /* ── Text ── */
+  --color-text: #F5F5F5;
+  --color-text-strong: #C8C8C8;
+  --color-text-muted: #A3A3A3;
+  --color-text-subtle: #6E6E6E;
+  --color-text-inverse: #1B1A18;
+
+  /* ── Borders ── */
+  --color-border: #444240;
+
+  /* ── Accent ── */
+  --color-accent-subtle: #1A4A2C;
+  --color-accent-light: #3AA36A;
+  --color-accent: #4FD99A;
+  --color-accent-bold: #8AE6B4;
+
+  /* ── Highlights ── */
+  --color-highlight-warm: #8A5A2B;
+  --color-highlight-cool: #4D4A7F;
+  --color-on-highlight-warm: #FCD0A1;
+  --color-on-highlight-cool: #C3BEF7;
+
+  /* ── Category markers ── */
+  --color-category-composite: #F9A8D4;
+  --color-category-diagram: #818CF8;
+
+  /* ── Semantic ── */
+  --color-success-bg: #1A3924;
+  --color-success-text: #86EFAC;
+  --color-success-border: #2F6040;
+  --color-info-bg: #1A2E4C;
+  --color-info-text: #93C5FD;
+  --color-info-border: #31507F;
+  --color-warning-bg: #3A2D1B;
+  --color-warning-text: #FCD34D;
+  --color-warning-border: #5E4D30;
+  --color-danger-bg: #3A2022;
+  --color-danger-text: #FCA5A5;
+  --color-danger-border: #5E3034;
+
+  /* Canvas dot-grid colour */
+  --color-canvas-dot: #383634;
+
+  /* Elevation — deeper alpha on dark surfaces so shadows still register. */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.45);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.50);
+  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.55);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+@theme inline {
+  --color-surface: var(--color-surface);
+  --color-surface-alt: var(--color-surface-alt);
+  --color-card: var(--color-card);
+  --color-text: var(--color-text);
+  --color-text-strong: var(--color-text-strong);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-subtle: var(--color-text-subtle);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-border: var(--color-border);
+  --color-accent-subtle: var(--color-accent-subtle);
+  --color-accent-light: var(--color-accent-light);
+  --color-accent: var(--color-accent);
+  --color-accent-bold: var(--color-accent-bold);
+  --color-highlight-warm: var(--color-highlight-warm);
+  --color-highlight-cool: var(--color-highlight-cool);
+  --color-on-highlight-warm: var(--color-on-highlight-warm);
+  --color-on-highlight-cool: var(--color-on-highlight-cool);
+  --color-category-composite: var(--color-category-composite);
+  --color-category-diagram: var(--color-category-diagram);
+  --color-danger-text: var(--color-danger-text);
+  --color-success-bg: var(--color-success-bg);
+  --color-success-text: var(--color-success-text);
+  --color-success-border: var(--color-success-border);
+  --color-info-bg: var(--color-info-bg);
+  --color-info-text: var(--color-info-text);
+  --color-info-border: var(--color-info-border);
+  --color-warning-bg: var(--color-warning-bg);
+  --color-warning-text: var(--color-warning-text);
+  --color-warning-border: var(--color-warning-border);
+  --color-danger-bg: var(--color-danger-bg);
+  --color-danger-border: var(--color-danger-border);
+  --font-sans: var(--font-inter);
+
+  /* semantic aliases used by component classes */
+  --color-cream: var(--color-surface);
+  --color-warm-gray: var(--color-surface-alt);
+  --color-ink: var(--color-text);
+  --color-green: var(--color-accent);
+  --color-mint: var(--color-accent-light);
+  --color-forest: var(--color-accent-bold);
+  --color-peach: var(--color-highlight-warm);
+  --color-lavender: var(--color-highlight-cool);
+  --color-lime: var(--color-accent-subtle);
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,25 @@
+export interface ThemeToken {
+    name: string;
+    variable: string;
+    cssVar: string;
+    hex: string;
+    darkHex: string;
+    group: 'surfaces' | 'text' | 'borders' | 'accent' | 'highlights' | 'categories' | 'semantic';
+    /**
+     * Promoted into Brand Settings' Identity section as a top-level brand knob
+     * (the full token list stays the expert layer). Curated HERE, in the
+     * canonical catalog, so the promotion survives token reshuffles — a
+     * hardcoded list in the editor would silently drift. Keep this rare: it
+     * only earns its place on tokens that FAN OUT (the accent base drives the
+     * whole ramp), not ones that merely relocate a row.
+     */
+    identity?: boolean;
+}
+export declare const themeTokens: ThemeToken[];
+/** Look up a token by its CSS variable string */
+export declare function findToken(value: string): ThemeToken | undefined;
+/** Check if a value is a theme token reference (vs a raw hex) */
+export declare function isTokenValue(value: string): boolean;
+/** Get the display hex for a value — resolves tokens to their hex, passes through raw hex */
+export declare function resolveHex(value: string): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,CAAC;IAC7F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,UAAU,EA6CnC,CAAC;AAEF,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAE/D;AAED,iEAAiE;AACjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEnD;AAED,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGhD"}