@stephen-netu/design-system 0.2.2 → 0.5.1

package/package.json

@@ -1,12 +1,32 @@
 {
   "name": "@stephen-netu/design-system",
-  "version": "0.2.2",
+  "version": "0.5.1",
   "description": "KOS LEAP Design System — Neo-brutalist industrial UI with brass accent",
   "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "scripts": {
+    "tokens:generate": "tsx scripts/generate-tokens-json.ts",
+    "prebuild": "pnpm tokens:generate",
+    "build": "svelte-package -i src -o dist",
+    "postbuild": "pnpm tokens:generate",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "pnpm build && changeset publish",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:layers": "node scripts/checks/import-graph.mjs",
+    "check:tokens": "node scripts/checks/token-audit.mjs",
+    "check:exports": "node scripts/checks/check-exports.mjs",
+    "check:all": "pnpm check && pnpm check:layers && pnpm check:tokens && pnpm check:vite-pin",
+    "check:vite-pin": "node -e \"const v=require('./package.json').devDependencies.vite;if(v!=='5.4.21'){console.error('vite pin violated: found '+v+', must stay at 5.4.21 (LEAP workspace standard — see LEAP/pnpm-workspace.yaml before bumping)');process.exit(1)}\""
+  },
   "files": [
     "dist/**/*.svelte",
     "dist/**/*.svelte.js",
@@ -37,6 +57,19 @@
       "svelte": "./dist/u0-primitives/index.js",
       "default": "./dist/u0-primitives/index.js"
     },
+    "./u0-primitives/web-components": {
+      "types": "./dist/u0-primitives/web-components/index.d.ts",
+      "default": "./dist/u0-primitives/web-components/index.js"
+    },
+    "./u0-primitives/web-components/button-component": {
+      "types": "./dist/u0-primitives/web-components/button-component.d.ts",
+      "default": "./dist/u0-primitives/web-components/button-component.js"
+    },
+    "./u0-primitives/web-components/input-component": {
+      "types": "./dist/u0-primitives/web-components/input-component.d.ts",
+      "default": "./dist/u0-primitives/web-components/input-component.js"
+    },
+    "./u0-primitives/input/Input.svelte": "./dist/u0-primitives/input/Input.svelte",
     "./u0-primitives/surface-state/SurfaceState.svelte": "./dist/u0-primitives/surface-state/SurfaceState.svelte",
     "./u0-primitives/badge/ValidityBadge.svelte": "./dist/u0-primitives/badge/ValidityBadge.svelte",
     "./u0-primitives/badge/validity-utils": "./dist/u0-primitives/badge/validity-utils.js",
@@ -58,6 +91,7 @@
     "./spatial/LodRenderer.svelte": "./dist/spatial/LodRenderer.svelte",
     "./spatial/SnapZoomCamera.svelte": "./dist/spatial/SnapZoomCamera.svelte",
     "./spatial/BspTilingCanvas.svelte": "./dist/spatial/BspTilingCanvas.svelte",
+    "./spatial/ParticleAssembleMark.svelte": "./dist/spatial/ParticleAssembleMark.svelte",
     "./s0-lifecycle": "./dist/s0-lifecycle/index.js",
     "./s0-state": "./dist/s0-state/index.js",
     "./t0-transport": "./dist/t0-transport/index.js",
@@ -82,7 +116,9 @@
     "./g0-generative": "./dist/g0-generative/index.js",
     "./entity-graph-view": "./dist/entity-graph-view/index.js",
     "./tokens.css": "./dist/p0-primitives/tokens/tokens.css",
+    "./tokens/validity-tokens.css": "./dist/p0-primitives/tokens/validity-tokens.css",
     "./tokens/control-room.css": "./dist/p0-primitives/tokens/control-room.css",
+    "./tokens/ambient.css": "./dist/p0-primitives/tokens/ambient.css",
     "./d0-tokens.css": "./dist/d0-data-viz/d0-tokens.css",
     "./n0-tokens.css": "./dist/n0-node-graph/n0-tokens.css",
     "./base.css": "./dist/base.css",
@@ -92,11 +128,8 @@
     "./x0-enchanted-blocks": "./dist/x0-enchanted-blocks/index.js",
     "./editor": "./dist/editor/index.js",
     "./editor/MarkdownEditor.svelte": "./dist/editor/MarkdownEditor.svelte",
-    "./demos": "./dist/demos/index.js",
-    "./demos/BspZoneDemo.svelte": "./dist/demos/BspZoneDemo.svelte",
-    "./demos/NodepadBlocksShowcase.svelte": "./dist/demos/NodepadBlocksShowcase.svelte",
-    "./demos/BspSizingInfographic.svelte": "./dist/demos/BspSizingInfographic.svelte",
-    "./demos/ControlRoomDemo.svelte": "./dist/demos/ControlRoomDemo.svelte",
+    "./editor/CorrectionTooltip.svelte": "./dist/editor/components/CorrectionTooltip.svelte",
+    "./editor/extensions/autocomplete": "./dist/editor/extensions/autocomplete.js",
     "./fabric": "./dist/fabric/index.js",
     "./fabric/layout": "./dist/fabric/layout/index.js",
     "./fabric/layout/GlassBox.svelte": "./dist/fabric/layout/GlassBox.svelte",
@@ -106,6 +139,7 @@
     "./fabric/navigation": "./dist/fabric/navigation/index.js",
     "./fabric/navigation/ActivityRail.svelte": "./dist/fabric/navigation/ActivityRail.svelte",
     "./fabric/data": "./dist/fabric/data/index.js",
+    "./fabric/data/FileTree.svelte": "./dist/fabric/data/FileTree.svelte",
     "./fabric/input": "./dist/fabric/input/index.js",
     "./fabric/input/AppHeaderBar.svelte": "./dist/fabric/input/AppHeaderBar.svelte",
     "./fabric/input/KeyboardShortcuts.svelte": "./dist/fabric/input/KeyboardShortcuts.svelte",
@@ -143,7 +177,7 @@
     "@codemirror/lint": "^6.8.0",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/view": "^6.43.1",
     "codemirror": "^6.0.1",
     "d3-force": "^3.0.0",
     "elkjs": "^0.9.3",
@@ -154,6 +188,7 @@
     "markmap-lib": "^0.18.0",
     "markmap-view": "^0.18.0",
     "mermaid": "^11.0.0",
+    "dompurify": "^3.4.9",
     "perfect-arrows": "^0.3.7",
     "svelte-canvas": "^2.1.0"
   },
@@ -194,24 +229,5 @@
   ],
   "author": "Stephen Netu",
   "license": "MIT",
-  "scripts": {
-    "tokens:generate": "tsx scripts/generate-tokens-json.ts",
-    "prebuild": "pnpm tokens:generate",
-    "build": "svelte-package -i src -o dist",
-    "postbuild": "pnpm tokens:generate",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "release": "pnpm build && changeset publish",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "test": "vitest run",
-    "test:e2e": "playwright test",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:layers": "node scripts/checks/import-graph.mjs",
-    "check:tokens": "node scripts/checks/token-audit.mjs",
-    "check:exports": "node scripts/checks/check-exports.mjs",
-    "check:all": "pnpm check && pnpm check:layers && pnpm check:tokens && pnpm check:vite-pin",
-    "check:vite-pin": "node -e \"const v=require('./package.json').devDependencies.vite;if(v!=='5.4.21'){console.error('vite pin violated: found '+v+', must stay at 5.4.21 (LEAP workspace standard — see LEAP/pnpm-workspace.yaml before bumping)');process.exit(1)}\""
-  }
-}
+  "packageManager": "pnpm@11.5.2"
+}

package/src/p0-primitives/tokens/ambient.css

@@ -0,0 +1,76 @@
+/* @kos/design-system — Ambient Layer
+   Opt-in decorative tokens for marketing/docs/onboarding surfaces —
+   NOT auto-imported (see src/index.ts). Import explicitly:
+     import '@stephen-netu/design-system/tokens/ambient.css';
+
+   Everything here derives from the existing single-seed accent engine
+   (--accent-primary → color-mix()) already defined in tokens.css. No
+   hardcoded hues are introduced — swapping --accent-primary re-themes
+   every gradient/glow defined here for free. Do not add hardcoded
+   parallel palettes; that reintroduces the "brass leak" anti-pattern
+   tokens.css's own comments warn against. */
+
+:root {
+  /* --- Gradient --- */
+  --gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--color-accent-secondary) 100%);
+
+  /* --- Ambient glow layers — low-opacity radial fields for hero/empty-state backgrounds --- */
+  --glow-ambient-1: color-mix(in srgb, var(--accent-primary) 7%, transparent);
+  --glow-ambient-2: color-mix(in srgb, var(--color-accent-secondary) 5%, transparent);
+  --glow-ambient-3: color-mix(in srgb, var(--accent-primary) 3%, transparent);
+}
+
+/* --- Gradient text --- */
+.text-gradient-accent {
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* --- Ambient background glow ---
+   Apply to a positioned container; renders a fixed-feel radial glow trio
+   behind its content. Marketing/docs surfaces only — do not use on
+   console/product chrome. */
+.bg-ambient-glow {
+  position: relative;
+}
+.bg-ambient-glow::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(900px 600px at 10% -10%, var(--glow-ambient-1), transparent 65%),
+    radial-gradient(700px 500px at 92% 8%, var(--glow-ambient-2), transparent 60%),
+    radial-gradient(1000px 800px at 50% 140%, var(--glow-ambient-3), transparent 70%);
+}
+.bg-ambient-glow > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* --- Scroll reveal (see p0-primitives/utils/reveal.ts) ---
+   Marketing/docs surfaces only — never wire into console/product chrome. */
+@keyframes ds-reveal-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ds-reveal {
+  opacity: 0;
+}
+
+.ds-reveal.ds-reveal-in {
+  animation: ds-reveal-fade-up 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) both;
+  animation-delay: var(--ds-reveal-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reveal,
+  .ds-reveal.ds-reveal-in {
+    opacity: 1;
+    animation: none;
+  }
+}

package/src/p0-primitives/tokens/tokens.css

@@ -28,14 +28,25 @@
   --color-card-text-secondary: #a8a08c;
   --color-card-text-tertiary: #6b6558;
 
-   /* --- Accent (default: brass, user-controllable via --accent-*) --- */
+   /* --- Accent — SINGLE-SEED ENGINE ----------------------------------------
+      A consumer sets ONE value, --accent-primary (the in-app accent dropdown),
+      and the whole accent system recomputes via color-mix. No value below is
+      pinned to a hue, so any user color stays coherent across light/dark.
+      (Was: 7 hand-picked brass values + brass rgba ramps that ignored the
+      user's choice — the "brass leak".) --accent-* remain consumer override
+      hooks (token-audit ACCENT_HOOKS); components consume --color-accent* only.
+
+      Browser support: color-mix() requires Chrome 111+, Safari 16.2+, Firefox
+      113+. Fallbacks below use var(--accent-primary) directly (no hue shift),
+      which is acceptable on legacy browsers — the seed itself is still
+      controllable. */
    --accent-primary: #b87333;
-   --accent-hover: #d4892f;
-   --accent-active: #8a5526;
-   --accent-glow: rgba(184, 115, 51, 0.28);
-   --accent-muted: rgba(184, 115, 51, 0.16);
-   --accent-subtle: rgba(184, 115, 51, 0.08);
-   --accent-faint: rgba(184, 115, 51, 0.04);
+   --accent-hover: var(--accent-primary);
+   --accent-active: var(--accent-primary);
+   --accent-glow: var(--accent-primary);
+   --accent-muted: var(--accent-primary);
+   --accent-subtle: var(--accent-primary);
+   --accent-faint: var(--accent-primary);
    --color-accent: var(--accent-primary);
    --color-accent-hover: var(--accent-hover);
    --color-accent-active: var(--accent-active);
@@ -43,9 +54,43 @@
    --color-accent-muted: var(--accent-muted);
    --color-accent-subtle: var(--accent-subtle);
    --color-accent-faint: var(--accent-faint);
-   --color-accent-secondary: #d4a574;  /* Companion warm tone (n4 kind colors) */
+   --color-accent-secondary: var(--accent-primary);
+}
+
+@supports (color-mix(in srgb, red, transparent)) {
+  :root {
+   --accent-hover: color-mix(in oklab, var(--accent-primary), #fff 16%);
+   --accent-active: color-mix(in oklab, var(--accent-primary), #000 22%);
+   --accent-glow: color-mix(in srgb, var(--accent-primary) 28%, transparent);
+   --accent-muted: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+   --accent-subtle: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+   --accent-faint: color-mix(in srgb, var(--accent-primary) 4%, transparent);
+   --color-accent-hover: var(--accent-hover);
+   --color-accent-active: var(--accent-active);
+   --color-accent-glow: var(--accent-glow);
+   --color-accent-muted: var(--accent-muted);
+   --color-accent-subtle: var(--accent-subtle);
+   --color-accent-faint: var(--accent-faint);
+   --color-accent-secondary: color-mix(in oklab, var(--accent-primary), #fff 26%);
+   --overlay-accent-06: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+   --overlay-accent-08: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+   --overlay-accent-12: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+   --overlay-accent-18: color-mix(in srgb, var(--accent-primary) 18%, transparent);
+   --overlay-accent-30: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+   --overlay-accent-45: color-mix(in srgb, var(--accent-primary) 45%, transparent);
+   --overlay-accent-50: color-mix(in srgb, var(--accent-primary) 50%, transparent);
+   --overlay-accent-55: color-mix(in srgb, var(--accent-primary) 55%, transparent);
+   --grid-line: color-mix(in srgb, var(--accent-primary) 3%, transparent);
+   --grid-dot: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+   --grid-major: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+   --shadow-glow: 0 0 12px color-mix(in srgb, var(--accent-primary) 15%, transparent);
+   --shadow-glow-lg: 0 0 24px color-mix(in srgb, var(--accent-primary) 25%, transparent);
+   --shadow-accent-glow: 0 0 16px color-mix(in srgb, var(--accent-primary) 15%, transparent), 0 0 32px color-mix(in srgb, var(--accent-primary) 5%, transparent);
+  }
+}
 
-   /* Overlay levels — white opacity ramps for borders, backgrounds, hover states */
+:root {
+   /* --- Overlay levels — white opacity ramps for borders, backgrounds, hover states */
    --overlay-white-02: rgba(255, 255, 255, 0.02);
    --overlay-white-03: rgba(255, 255, 255, 0.03);
    --overlay-white-04: rgba(255, 255, 255, 0.04);
@@ -57,15 +102,16 @@
    --overlay-white-22: rgba(255, 255, 255, 0.22);
    --overlay-white-25: rgba(255, 255, 255, 0.25);
 
-   /* Overlay levels — accent color opacity ramps */
-   --overlay-accent-06: rgba(184, 115, 51, 0.06);
-   --overlay-accent-08: rgba(184, 115, 51, 0.08);
-   --overlay-accent-12: rgba(184, 115, 51, 0.12);
-   --overlay-accent-18: rgba(184, 115, 51, 0.18);
-   --overlay-accent-30: rgba(184, 115, 51, 0.30);
-   --overlay-accent-45: rgba(184, 115, 51, 0.45);
-   --overlay-accent-50: rgba(184, 115, 51, 0.50);
-   --overlay-accent-55: rgba(184, 115, 51, 0.55);
+   /* Overlay levels — accent color opacity ramps
+      (fallback: transparent for browsers without color-mix) */
+   --overlay-accent-06: transparent;
+   --overlay-accent-08: transparent;
+   --overlay-accent-12: transparent;
+   --overlay-accent-18: transparent;
+   --overlay-accent-30: transparent;
+   --overlay-accent-45: transparent;
+   --overlay-accent-50: transparent;
+   --overlay-accent-55: transparent;
 
     /* Overlay levels — status color opacity ramps */
     --overlay-success-06: rgba(79, 168, 162, 0.06);
@@ -128,7 +174,7 @@
   --border-subtle: rgba(255, 255, 255, 0.06);
   --border-default: #3a3630;
   --border-hover: #6b6558;
-  --border-focus: #b87333;
+  --border-focus: var(--accent-primary);
   --border-alert: #c14a4a;
   --border-warning: #d4a04c;
   --divider-color: #181c20;
@@ -138,10 +184,10 @@
   --color-border-subtle: var(--border-subtle);
   --color-border-default: var(--border-default);
 
-  /* --- Grid (canvas patterns) --- */
-  --grid-line: rgba(184, 115, 51, 0.03);
-  --grid-dot: rgba(184, 115, 51, 0.06);
-  --grid-major: rgba(184, 115, 51, 0.1);
+   /* --- Grid (canvas patterns) --- */
+   --grid-line: transparent;
+   --grid-dot: transparent;
+   --grid-major: transparent;
 
   /* --- Typography --- */
   --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
@@ -158,6 +204,17 @@
   --text-3xl: 1.875rem;
   --text-4xl: 2.25rem;
 
+  /* --- Font weight (fixes phantom --font-weight-* referenced by g0 Text.svelte) --- */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* --- Line height (fixes phantom --line-height-* referenced by g0 Text.svelte) --- */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.7;
+
   /* --- Spacing --- */
   --space-05: 0.125rem;
   --space-1: 0.25rem;
@@ -194,12 +251,12 @@
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-xl: none;
-  --shadow-glow: 0 0 12px rgba(184, 115, 51, 0.15);
-  --shadow-glow-lg: 0 0 24px rgba(184, 115, 51, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
-  --shadow-card: none;
-  --shadow-card-hover: none;
-  --shadow-accent-glow: 0 0 16px rgba(184, 115, 51, 0.15), 0 0 32px rgba(184, 115, 51, 0.05);
+   --shadow-glow: 0 0 12px rgba(0, 0, 0, 0.4);
+   --shadow-glow-lg: 0 0 24px rgba(0, 0, 0, 0.4);
+   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+   --shadow-card: none;
+   --shadow-card-hover: none;
+   --shadow-accent-glow: 0 0 16px rgba(0, 0, 0, 0.4), 0 0 32px rgba(0, 0, 0, 0.4);
 
   /* --- Transitions --- */
   --transition-fast: 120ms ease;
@@ -255,4 +312,42 @@
   --z-tooltip: 1070;
   --z-toast: 1080;
   --z-glass-box: 9000;
+
+  /* --- Density (system default = COMPACT) ----------------------------------
+     A first-class density tier. Surfaces opt into a calibration with
+     [data-density]: comfortable (reading/writing — editor, prose, forms),
+     compact (default, general UI), cockpit (monitoring/data-dense — dashboards,
+     logs, registries, manifold panels). Same components, three calibrations.
+     Components consume these --ui-* tokens for sizing/type instead of raw px.
+     Cockpit sits at the legibility floors: data 10px, label 9px, row/target
+     20px, pad 3px, leading 1.22 (note: 20px trips WCAG 2.5.8's 24px pref, so
+     cockpit is opt-in, never the global default). */
+  --ui-control-h: 24px;  /* button / input / select height */
+  --ui-row-h: 24px;      /* table / list row height (pointer target) */
+  --ui-pad-x: 8px;
+  --ui-pad-y: 5px;
+  --ui-gap: 1px;         /* hairline grid gap — the ruled spine */
+  --ui-font: 13px;       /* body / control text */
+  --ui-font-sm: 12px;
+  --ui-data: 11px;       /* monospace data / table cells */
+  --ui-label: 10px;      /* uppercase micro-labels */
+  --ui-leading: 1.35;
+  --ui-icon: 14px;
+}
+
+/* Density calibrations — set [data-density] on any container or surface. */
+[data-density="comfortable"] {
+  --ui-control-h: 30px; --ui-row-h: 30px; --ui-pad-x: 12px; --ui-pad-y: 8px;
+  --ui-gap: 1px; --ui-font: 14px; --ui-font-sm: 13px; --ui-data: 13px;
+  --ui-label: 11px; --ui-leading: 1.45; --ui-icon: 16px;
+}
+[data-density="compact"] {
+  --ui-control-h: 24px; --ui-row-h: 24px; --ui-pad-x: 8px; --ui-pad-y: 5px;
+  --ui-gap: 1px; --ui-font: 13px; --ui-font-sm: 12px; --ui-data: 11px;
+  --ui-label: 10px; --ui-leading: 1.35; --ui-icon: 14px;
+}
+[data-density="cockpit"] {
+  --ui-control-h: 20px; --ui-row-h: 20px; --ui-pad-x: 6px; --ui-pad-y: 3px;
+  --ui-gap: 1px; --ui-font: 12px; --ui-font-sm: 11px; --ui-data: 10px;
+  --ui-label: 9px; --ui-leading: 1.22; --ui-icon: 13px;
 }

package/src/p0-primitives/tokens/tokens.json

@@ -52,6 +52,17 @@
       "divider": "var(--divider-color)"
     }
   },
+  "shadows": {
+    "glow": "var(--shadow-glow)",
+    "glowLg": "var(--shadow-glow-lg)",
+    "sm": "var(--shadow-sm)",
+    "md": "var(--shadow-md)",
+    "lg": "var(--shadow-lg)",
+    "xl": "var(--shadow-xl)",
+    "inner": "var(--shadow-inner)",
+    "card": "var(--shadow-card)",
+    "cardHover": "var(--shadow-card-hover)"
+  },
   "epistemic": {
     "cleared": "var(--epistemic-cleared)",
     "clearedGlow": "var(--epistemic-cleared-glow)",
@@ -114,17 +125,6 @@
     "xl": "var(--radius-xl)",
     "full": "var(--radius-full)"
   },
-  "shadows": {
-    "sm": "var(--shadow-sm)",
-    "md": "var(--shadow-md)",
-    "lg": "var(--shadow-lg)",
-    "xl": "var(--shadow-xl)",
-    "glow": "var(--shadow-glow)",
-    "glowLg": "var(--shadow-glow-lg)",
-    "inner": "var(--shadow-inner)",
-    "card": "var(--shadow-card)",
-    "cardHover": "var(--shadow-card-hover)"
-  },
   "animations": {
     "fast": "var(--transition-fast)",
     "normal": "var(--transition-normal)",
@@ -143,6 +143,18 @@
     "accent_muted": "var(--accent-muted)",
     "accent_subtle": "var(--accent-subtle)",
     "accent_faint": "var(--accent-faint)",
+    "overlay_accent_06": "var(--overlay-accent-06)",
+    "overlay_accent_08": "var(--overlay-accent-08)",
+    "overlay_accent_12": "var(--overlay-accent-12)",
+    "overlay_accent_18": "var(--overlay-accent-18)",
+    "overlay_accent_30": "var(--overlay-accent-30)",
+    "overlay_accent_45": "var(--overlay-accent-45)",
+    "overlay_accent_50": "var(--overlay-accent-50)",
+    "overlay_accent_55": "var(--overlay-accent-55)",
+    "grid_line": "var(--grid-line)",
+    "grid_dot": "var(--grid-dot)",
+    "grid_major": "var(--grid-major)",
+    "shadow_accent_glow": "var(--shadow-accent-glow)",
     "overlay_white_02": "var(--overlay-white-02)",
     "overlay_white_03": "var(--overlay-white-03)",
     "overlay_white_04": "var(--overlay-white-04)",
@@ -153,14 +165,6 @@
     "overlay_white_18": "var(--overlay-white-18)",
     "overlay_white_22": "var(--overlay-white-22)",
     "overlay_white_25": "var(--overlay-white-25)",
-    "overlay_accent_06": "var(--overlay-accent-06)",
-    "overlay_accent_08": "var(--overlay-accent-08)",
-    "overlay_accent_12": "var(--overlay-accent-12)",
-    "overlay_accent_18": "var(--overlay-accent-18)",
-    "overlay_accent_30": "var(--overlay-accent-30)",
-    "overlay_accent_45": "var(--overlay-accent-45)",
-    "overlay_accent_50": "var(--overlay-accent-50)",
-    "overlay_accent_55": "var(--overlay-accent-55)",
     "overlay_success_06": "var(--overlay-success-06)",
     "overlay_warning_06": "var(--overlay-warning-06)",
     "overlay_error_06": "var(--overlay-error-06)",
@@ -176,10 +180,14 @@
     "color_border": "var(--color-border)",
     "color_border_subtle": "var(--color-border-subtle)",
     "color_border_default": "var(--color-border-default)",
-    "grid_line": "var(--grid-line)",
-    "grid_dot": "var(--grid-dot)",
-    "grid_major": "var(--grid-major)",
     "text_2xs": "var(--text-2xs)",
+    "font_weight_normal": "var(--font-weight-normal)",
+    "font_weight_medium": "var(--font-weight-medium)",
+    "font_weight_semibold": "var(--font-weight-semibold)",
+    "font_weight_bold": "var(--font-weight-bold)",
+    "line_height_tight": "var(--line-height-tight)",
+    "line_height_normal": "var(--line-height-normal)",
+    "line_height_relaxed": "var(--line-height-relaxed)",
     "border_width_thin": "var(--border-width-thin)",
     "border_width_default": "var(--border-width-default)",
     "border_width_heavy": "var(--border-width-heavy)",
@@ -188,7 +196,6 @@
     "blur_md": "var(--blur-md)",
     "blur_lg": "var(--blur-lg)",
     "radius_xs": "var(--radius-xs)",
-    "shadow_accent_glow": "var(--shadow-accent-glow)",
     "color_bg_primary": "var(--color-bg-primary)",
     "color_bg_secondary": "var(--color-bg-secondary)",
     "color_bg_tertiary": "var(--color-bg-tertiary)",
@@ -224,6 +231,17 @@
     "z_popover": "var(--z-popover)",
     "z_tooltip": "var(--z-tooltip)",
     "z_toast": "var(--z-toast)",
-    "z_glass_box": "var(--z-glass-box)"
+    "z_glass_box": "var(--z-glass-box)",
+    "ui_control_h": "var(--ui-control-h)",
+    "ui_row_h": "var(--ui-row-h)",
+    "ui_pad_x": "var(--ui-pad-x)",
+    "ui_pad_y": "var(--ui-pad-y)",
+    "ui_gap": "var(--ui-gap)",
+    "ui_font": "var(--ui-font)",
+    "ui_font_sm": "var(--ui-font-sm)",
+    "ui_data": "var(--ui-data)",
+    "ui_label": "var(--ui-label)",
+    "ui_leading": "var(--ui-leading)",
+    "ui_icon": "var(--ui-icon)"
   }
 }