@visualli/core 0.1.7 → 0.2.1

package/src/generated/designSystem.ts

@@ -0,0 +1,758 @@
+// GENERATED by scripts/gen-design-system.mjs from design-system/ (tokens/tokens.json, tokens/tokens.css). Do not edit.
+// Change the design system instead; the next `npm run build` regenerates this file.
+
+/** Version of the design system these modules were generated from. */
+export const DESIGN_SYSTEM_VERSION = "0.2.1" as const;
+
+export const THEME_NAMES = [
+  "light",
+  "dark",
+  "focus-light",
+  "focus-dark",
+  "colorsafe-light",
+  "colorsafe-dark",
+  "contrast-light",
+  "contrast-dark"
+] as const;
+export type ThemeName = (typeof THEME_NAMES)[number];
+
+/** Every token for every theme (each theme already merged over "light"). Keys match the CSS custom properties. */
+export const TOKENS: Readonly<Record<ThemeName, Readonly<Record<string, string>>>> = {
+  "light": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#f6f3ee",
+    "surface": "#ffffff",
+    "surface-sunken": "#f0ece5",
+    "surface-overlay": "#ffffff",
+    "line": "#e4dfd6",
+    "line-strong": "#7a7f94",
+    "ink": "#182140",
+    "ink-muted": "#4f5671",
+    "ink-subtle": "#5f647c",
+    "action": "#182140",
+    "on-action": "#ffffff",
+    "focus": "#325e8c",
+    "link": "#2f5a87",
+    "selection": "rgba(18, 199, 211, 0.28)",
+    "node-ink": "#182140",
+    "edge": "#2a3048",
+    "edge-label": "#4f5671",
+    "topic-teal": "#87f2f8",
+    "topic-teal-ring": "#00cdd5",
+    "topic-harbor": "#bcdbff",
+    "topic-harbor-ring": "#76b2f5",
+    "topic-iris": "#e0c8fe",
+    "topic-iris-ring": "#bd96ea",
+    "topic-berry": "#ffbdc4",
+    "topic-berry-ring": "#f47e8f",
+    "topic-coral": "#ffc7b2",
+    "topic-coral-ring": "#f38e65",
+    "topic-amber": "#ffcf9d",
+    "topic-amber-ring": "#eb9c38",
+    "topic-sun": "#ffea94",
+    "topic-sun-ring": "#dfbd04",
+    "topic-stone": "#e0dacf",
+    "topic-stone-ring": "#bab09f",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)",
+    "shadow-pop": "0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "dark": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#0f1220",
+    "surface": "#171b2b",
+    "surface-sunken": "#0f1220",
+    "surface-overlay": "#212639",
+    "line": "#2b3148",
+    "line-strong": "#6c7392",
+    "ink": "#eef0f7",
+    "ink-muted": "#b3b8cc",
+    "ink-subtle": "#8f95ae",
+    "action": "#f6f3ee",
+    "on-action": "#182140",
+    "focus": "#12c7d3",
+    "link": "#5fd8e1",
+    "selection": "rgba(18, 199, 211, 0.32)",
+    "node-ink": "#182140",
+    "edge": "#c9cddc",
+    "edge-label": "#b3b8cc",
+    "topic-teal": "#87f2f8",
+    "topic-teal-ring": "#0fc5cd",
+    "topic-harbor": "#bcdbff",
+    "topic-harbor-ring": "#73aceb",
+    "topic-iris": "#e0c8fe",
+    "topic-iris-ring": "#b691e1",
+    "topic-berry": "#ffbdc4",
+    "topic-berry-ring": "#eb798a",
+    "topic-coral": "#ffc7b2",
+    "topic-coral-ring": "#ea8962",
+    "topic-amber": "#ffcf9d",
+    "topic-amber-ring": "#e29737",
+    "topic-sun": "#ffea94",
+    "topic-sun-ring": "#d8b70a",
+    "topic-stone": "#e0dacf",
+    "topic-stone-ring": "#b4a999",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35)",
+    "shadow-pop": "0 2px 4px rgba(0, 0, 0, 0.50), 0 16px 40px rgba(0, 0, 0, 0.50)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "focus-light": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#f4f2ee",
+    "surface": "#ffffff",
+    "surface-sunken": "#f0ece5",
+    "surface-overlay": "#ffffff",
+    "line": "#e4dfd6",
+    "line-strong": "#7a7f94",
+    "ink": "#182140",
+    "ink-muted": "#4f5671",
+    "ink-subtle": "#5f647c",
+    "action": "#182140",
+    "on-action": "#ffffff",
+    "focus": "#325e8c",
+    "link": "#2f5a87",
+    "selection": "rgba(18, 199, 211, 0.28)",
+    "node-ink": "#182140",
+    "edge": "#5a6079",
+    "edge-label": "#5a6079",
+    "topic-teal": "#bce8ea",
+    "topic-teal-ring": "#67c6cb",
+    "topic-harbor": "#c9d9ec",
+    "topic-harbor-ring": "#8bb2de",
+    "topic-iris": "#d9cfe8",
+    "topic-iris-ring": "#b79ed4",
+    "topic-berry": "#edc6c9",
+    "topic-berry-ring": "#da9099",
+    "topic-coral": "#eecec1",
+    "topic-coral-ring": "#db9b82",
+    "topic-amber": "#eed4ba",
+    "topic-amber-ring": "#d6a570",
+    "topic-sun": "#f4eac1",
+    "topic-sun-ring": "#d2bf73",
+    "topic-stone": "#dddad5",
+    "topic-stone-ring": "#bab09f",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)",
+    "shadow-pop": "0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "focus-dark": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#12141c",
+    "surface": "#171b2b",
+    "surface-sunken": "#0f1220",
+    "surface-overlay": "#212639",
+    "line": "#2b3148",
+    "line-strong": "#6c7392",
+    "ink": "#eef0f7",
+    "ink-muted": "#b3b8cc",
+    "ink-subtle": "#8f95ae",
+    "action": "#f6f3ee",
+    "on-action": "#182140",
+    "focus": "#12c7d3",
+    "link": "#5fd8e1",
+    "selection": "rgba(18, 199, 211, 0.32)",
+    "node-ink": "#182140",
+    "edge": "#a9aec0",
+    "edge-label": "#b3b8cc",
+    "topic-teal": "#bce8ea",
+    "topic-teal-ring": "#71bdc1",
+    "topic-harbor": "#c9d9ec",
+    "topic-harbor-ring": "#8cabce",
+    "topic-iris": "#d9cfe8",
+    "topic-iris-ring": "#ae9bc6",
+    "topic-berry": "#edc6c9",
+    "topic-berry-ring": "#cc8e95",
+    "topic-coral": "#eecec1",
+    "topic-coral-ring": "#cd9884",
+    "topic-amber": "#eed4ba",
+    "topic-amber-ring": "#c9a176",
+    "topic-sun": "#f4eac1",
+    "topic-sun-ring": "#c9b97a",
+    "topic-stone": "#dddad5",
+    "topic-stone-ring": "#b4a999",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)",
+    "shadow-pop": "0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "colorsafe-light": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#f6f3ee",
+    "surface": "#ffffff",
+    "surface-sunken": "#f0ece5",
+    "surface-overlay": "#ffffff",
+    "line": "#e4dfd6",
+    "line-strong": "#7a7f94",
+    "ink": "#182140",
+    "ink-muted": "#4f5671",
+    "ink-subtle": "#5f647c",
+    "action": "#182140",
+    "on-action": "#ffffff",
+    "focus": "#325e8c",
+    "link": "#2f5a87",
+    "selection": "rgba(18, 199, 211, 0.28)",
+    "node-ink": "#182140",
+    "edge": "#2a3048",
+    "edge-label": "#4f5671",
+    "topic-teal": "#b0ecbc",
+    "topic-teal-ring": "#6cc982",
+    "topic-harbor": "#abdbfe",
+    "topic-harbor-ring": "#60b4ec",
+    "topic-iris": "#f6bde2",
+    "topic-iris-ring": "#dc87c0",
+    "topic-berry": "#feb79e",
+    "topic-berry-ring": "#ec7f58",
+    "topic-coral": "#fece96",
+    "topic-coral-ring": "#e49d41",
+    "topic-amber": "#b2e8fa",
+    "topic-amber-ring": "#5cc4e2",
+    "topic-sun": "#f6f097",
+    "topic-sun-ring": "#d0c637",
+    "topic-stone": "#dbdbdb",
+    "topic-stone-ring": "#b7afb1",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)",
+    "shadow-pop": "0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "colorsafe-dark": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#0f1220",
+    "surface": "#171b2b",
+    "surface-sunken": "#0f1220",
+    "surface-overlay": "#212639",
+    "line": "#2b3148",
+    "line-strong": "#6c7392",
+    "ink": "#eef0f7",
+    "ink-muted": "#b3b8cc",
+    "ink-subtle": "#8f95ae",
+    "action": "#f6f3ee",
+    "on-action": "#182140",
+    "focus": "#12c7d3",
+    "link": "#5fd8e1",
+    "selection": "rgba(18, 199, 211, 0.32)",
+    "node-ink": "#182140",
+    "edge": "#c9cddc",
+    "edge-label": "#b3b8cc",
+    "topic-teal": "#b0ecbc",
+    "topic-teal-ring": "#69c27e",
+    "topic-harbor": "#abdbfe",
+    "topic-harbor-ring": "#5eade2",
+    "topic-iris": "#f6bde2",
+    "topic-iris-ring": "#d383b9",
+    "topic-berry": "#feb79e",
+    "topic-berry-ring": "#e37a55",
+    "topic-coral": "#fece96",
+    "topic-coral-ring": "#db9840",
+    "topic-amber": "#b2e8fa",
+    "topic-amber-ring": "#5bbdda",
+    "topic-sun": "#f6f097",
+    "topic-sun-ring": "#c9bf37",
+    "topic-stone": "#dbdbdb",
+    "topic-stone-ring": "#b1a8aa",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "0 1px 2px rgba(24, 33, 64, 0.06), 0 8px 24px rgba(24, 33, 64, 0.08)",
+    "shadow-pop": "0 2px 4px rgba(24, 33, 64, 0.08), 0 16px 40px rgba(24, 33, 64, 0.14)",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "contrast-light": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#ffffff",
+    "surface": "#ffffff",
+    "surface-sunken": "#f2f2f2",
+    "surface-overlay": "#ffffff",
+    "line": "#5c6178",
+    "line-strong": "#000000",
+    "ink": "#000000",
+    "ink-muted": "#1f2433",
+    "ink-subtle": "#3a3f52",
+    "action": "#000000",
+    "on-action": "#ffffff",
+    "focus": "#0b4a8f",
+    "link": "#0b4a8f",
+    "selection": "rgba(18, 199, 211, 0.28)",
+    "node-ink": "#000000",
+    "edge": "#000000",
+    "edge-label": "#1f2433",
+    "topic-teal": "#87f2f8",
+    "topic-teal-ring": "#006b70",
+    "topic-harbor": "#bcdbff",
+    "topic-harbor-ring": "#0e599d",
+    "topic-iris": "#e0c8fe",
+    "topic-iris-ring": "#683b92",
+    "topic-berry": "#ffbdc4",
+    "topic-berry-ring": "#96173a",
+    "topic-coral": "#ffc7b2",
+    "topic-coral-ring": "#923400",
+    "topic-amber": "#ffcf9d",
+    "topic-amber-ring": "#7e4d00",
+    "topic-sun": "#ffea94",
+    "topic-sun-ring": "#7a6600",
+    "topic-stone": "#e0dacf",
+    "topic-stone-ring": "#63594b",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "none",
+    "shadow-pop": "none",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  },
+  "contrast-dark": {
+    "font-display": "\"Atkinson Hyperlegible Next\", system-ui, sans-serif",
+    "font-ui": "\"Atkinson Hyperlegible Next\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+    "font-hand": "Kalam, \"Atkinson Hyperlegible Next\", cursive",
+    "font-note": "Caveat, Kalam, cursive",
+    "font-mono": "\"Atkinson Hyperlegible Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
+    "canvas": "#000000",
+    "surface": "#000000",
+    "surface-sunken": "#0d0d0d",
+    "surface-overlay": "#0d0d0d",
+    "line": "#9aa0b8",
+    "line-strong": "#ffffff",
+    "ink": "#ffffff",
+    "ink-muted": "#e6e8f0",
+    "ink-subtle": "#c8ccda",
+    "action": "#ffffff",
+    "on-action": "#000000",
+    "focus": "#5fe8f0",
+    "link": "#7ff0f5",
+    "selection": "rgba(18, 199, 211, 0.32)",
+    "node-ink": "#000000",
+    "edge": "#ffffff",
+    "edge-label": "#e6e8f0",
+    "topic-teal": "#87f2f8",
+    "topic-teal-ring": "#64eff7",
+    "topic-harbor": "#bcdbff",
+    "topic-harbor-ring": "#b0d5fe",
+    "topic-iris": "#e0c8fe",
+    "topic-iris-ring": "#dcbfff",
+    "topic-berry": "#ffbdc4",
+    "topic-berry-ring": "#feb3bb",
+    "topic-coral": "#ffc7b2",
+    "topic-coral-ring": "#ffbea5",
+    "topic-amber": "#ffcf9d",
+    "topic-amber-ring": "#ffc78a",
+    "topic-sun": "#ffea94",
+    "topic-sun-ring": "#ffe26d",
+    "topic-stone": "#e0dacf",
+    "topic-stone-ring": "#ddd3c2",
+    "space-1": "4px",
+    "space-2": "8px",
+    "space-3": "12px",
+    "space-4": "16px",
+    "space-7": "48px",
+    "radius-sm": "10px",
+    "radius-md": "16px",
+    "radius-lg": "24px",
+    "radius-pill": "999px",
+    "shadow-float": "none",
+    "shadow-pop": "none",
+    "node-width": "200px",
+    "node-height": "148px",
+    "node-stroke": "3px",
+    "edge-width": "2.5px",
+    "edge-gap": "15px",
+    "edge-arc-max": "45px",
+    "immersion-alpha": "0.15",
+    "zoom-min": "0.3",
+    "zoom-max": "5",
+    "duration-instant": "100ms",
+    "duration-quick": "160ms",
+    "duration-base": "240ms",
+    "duration-zoom": "500ms",
+    "duration-reveal": "420ms",
+    "stagger-reveal": "70ms",
+    "ease-zoom": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    "ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "ease-bloom": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+    "z-chrome": "10",
+    "z-card": "20",
+    "z-menu": "40"
+  }
+};
+
+/** Topic palette names (token pairs `topic-<name>` / `topic-<name>-ring`). */
+export const TOPICS = [
+  "teal",
+  "harbor",
+  "iris",
+  "berry",
+  "coral",
+  "amber",
+  "sun",
+  "stone"
+] as const;
+export type TopicName = (typeof TOPICS)[number];
+
+/** Numeric tokens (px / ms stripped), camel-cased: nodeWidth, nodeStroke, edgeWidth, edgeGap, durationBase, zoomMin ... */
+export const METRICS = {
+  "space1": 4,
+  "space2": 8,
+  "space3": 12,
+  "space4": 16,
+  "space7": 48,
+  "radiusSm": 10,
+  "radiusMd": 16,
+  "radiusLg": 24,
+  "radiusPill": 999,
+  "nodeWidth": 200,
+  "nodeHeight": 148,
+  "nodeStroke": 3,
+  "edgeWidth": 2.5,
+  "edgeGap": 15,
+  "edgeArcMax": 45,
+  "immersionAlpha": 0.15,
+  "zoomMin": 0.3,
+  "zoomMax": 5,
+  "durationInstant": 100,
+  "durationQuick": 160,
+  "durationBase": 240,
+  "durationZoom": 500,
+  "durationReveal": 420,
+  "staggerReveal": 70,
+  "zChrome": 10,
+  "zCard": 20,
+  "zMenu": 40
+} as const;
+/** Overrides applied when motion is reduced. */
+export const METRICS_REDUCED_MOTION = {
+  "durationInstant": 120,
+  "durationQuick": 0,
+  "durationBase": 0,
+  "durationZoom": 0,
+  "durationReveal": 0,
+  "staggerReveal": 0
+} as const;
+
+/** Canvas type styles (family is a token name: font-hand, font-note, font-ui ...). */
+export const TYPE_STYLES = {
+  "heading": {
+    "family": "font-ui",
+    "size": 17,
+    "lineHeight": 24,
+    "weight": 700
+  },
+  "body": {
+    "family": "font-ui",
+    "size": 15,
+    "lineHeight": 22,
+    "weight": 400
+  },
+  "body-sm": {
+    "family": "font-ui",
+    "size": 13,
+    "lineHeight": 18,
+    "weight": 400
+  },
+  "label": {
+    "family": "font-ui",
+    "size": 13,
+    "lineHeight": 16,
+    "weight": 600,
+    "letterSpacing": 0.01
+  },
+  "caption": {
+    "family": "font-ui",
+    "size": 12,
+    "lineHeight": 16,
+    "weight": 400
+  },
+  "node-root": {
+    "family": "font-hand",
+    "size": 30,
+    "lineHeight": 34,
+    "weight": 700
+  },
+  "node-label": {
+    "family": "font-hand",
+    "size": 22,
+    "lineHeight": 26,
+    "weight": 700
+  },
+  "edge-label": {
+    "family": "font-note",
+    "size": 18,
+    "lineHeight": 20,
+    "weight": 500
+  },
+  "annotation": {
+    "family": "font-note",
+    "size": 24,
+    "lineHeight": 26,
+    "weight": 600
+  }
+} as const;
+
+/** Canvas styling extracted from css/spec.css (node labels, hover, shadows, connector dashes, group frames). */
+export const CANVAS_STYLE = {
+  "node": {
+    "selectedStrokeWidth": 4,
+    "hoverRingsRotate": -2,
+    "hoverRingsScale": 1.015,
+    "hoverLift": -2,
+    "dimmedOpacity": 1,
+    "dimmedOpacityFocus": 0.4,
+    "dimmedOpacityTouch": 0.6,
+    "dimmedOpacityFocusTouch": 0.4,
+    "shadowLight": "0 6px 14px rgba(24, 33, 64, .10)",
+    "shadowDark": "0 0 22px rgba(255, 255, 255, .10)"
+  },
+  "edge": {
+    "dash": [
+      7,
+      7
+    ],
+    "labelWeight": 500,
+    "labelSize": 18,
+    "readableLabelSize": 14,
+    "readableLabelWeight": 600,
+    "labelHaloWidth": 5
+  },
+  "group": {
+    "strokeWidth": 1.5,
+    "dash": [
+      10,
+      6
+    ],
+    "labelWeight": 700,
+    "labelLineHeight": 1.1,
+    "labelSize": 26,
+    "labelPadding": {
+      "top": 6,
+      "x": 22,
+      "bottom": 8
+    },
+    "labelMaxWidth": 420,
+    "labelBorderWidth": 1.5,
+    "labelFill": "topic-stone",
+    "labelBorder": "topic-stone-ring",
+    "labelInk": "node-ink",
+    "contrastLabelBorderWidth": 2,
+    "contrastLabelBorder": "line-strong"
+  }
+} as const;