@openkeyai/ui 0.1.0

package/dist/tailwind.js

@@ -0,0 +1,147 @@
+// src/tokens.ts
+var tokens = {
+  color: {
+    /** App-wide canvas. Dark navy with a touch of indigo. */
+    bg: "#0a0c1a",
+    /** Surface a half-step lighter than `bg`. Card / panel default. */
+    surface: "#11142a",
+    /** Surface above `surface` — popovers, hover states. */
+    surfaceRaised: "#181d3a",
+    /** Primary readable text. */
+    foreground: "#e6e8f5",
+    /** Lower-emphasis text. Captions, metadata. */
+    foregroundMuted: "#9097b8",
+    /** Subtle border default for cards / dividers. */
+    border: "rgba(150, 160, 220, 0.12)",
+    /** Indigo-violet primary, softened so it doesn't blow out the bg. */
+    accent: "#7c6cf5",
+    /** Brighter accent for focus rings + active links. */
+    accentBright: "#9b8af9",
+    /** Destructive action accent. */
+    destructive: "#ef4459",
+    /** Success / positive accent. */
+    success: "#34d399"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    /** Default for cards and surfaces. */
+    xl: "16px",
+    "2xl": "20px"},
+  font: {
+    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
+    sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    /** Geist Mono for code + hashes + token displays. */
+    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+  },
+  fontSize: {
+    xs: "11px",
+    sm: "13px",
+    base: "14px",
+    md: "16px",
+    lg: "18px",
+    xl: "22px"
+  },
+  shadow: {
+    /** Subtle pop on raised cards. */
+    sm: "0 1px 2px rgba(0, 0, 0, 0.25)",
+    /** Standard floating-pill / dropdown lift. */
+    md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)",
+    /** Modal-style. */
+    lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)"
+  },
+  motion: {
+    /** Default easing — feels good for most UI. */
+    ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    /** Quick interactions — hover, focus. */
+    fast: "120ms",
+    /** Standard — most state transitions. */
+    normal: "180ms",
+    /** Used for entrance / exit animations. */
+    slow: "260ms"
+  },
+  /** Z-index scale. Use these names, never raw numbers. */
+  z: {
+    raised: 10,
+    sticky: 30,
+    /** HubHeader sits here. */
+    header: 40,
+    overlay: 50,
+    modal: 60,
+    toast: 70
+  },
+  /** Component-specific dimensions. */
+  size: {
+    /** HubHeader height. Tools should leave this much top padding. */
+    headerHeight: "56px"
+  }
+};
+
+// src/tailwind.ts
+var hubTailwindPreset = {
+  theme: {
+    extend: {
+      colors: {
+        "okai-bg": tokens.color.bg,
+        "okai-surface": tokens.color.surface,
+        "okai-surface-raised": tokens.color.surfaceRaised,
+        "okai-foreground": tokens.color.foreground,
+        "okai-foreground-muted": tokens.color.foregroundMuted,
+        "okai-border": tokens.color.border,
+        "okai-accent": tokens.color.accent,
+        "okai-accent-bright": tokens.color.accentBright,
+        "okai-destructive": tokens.color.destructive,
+        "okai-success": tokens.color.success
+      },
+      borderRadius: {
+        "okai-sm": tokens.radius.sm,
+        "okai-md": tokens.radius.md,
+        "okai-lg": tokens.radius.lg,
+        "okai-xl": tokens.radius.xl,
+        "okai-2xl": tokens.radius["2xl"]
+      },
+      fontFamily: {
+        "okai-sans": tokens.font.sans.split(",").map((s) => s.trim()),
+        "okai-mono": tokens.font.mono.split(",").map((s) => s.trim())
+      },
+      fontSize: {
+        "okai-xs": tokens.fontSize.xs,
+        "okai-sm": tokens.fontSize.sm,
+        "okai-base": tokens.fontSize.base,
+        "okai-md": tokens.fontSize.md,
+        "okai-lg": tokens.fontSize.lg,
+        "okai-xl": tokens.fontSize.xl
+      },
+      boxShadow: {
+        "okai-sm": tokens.shadow.sm,
+        "okai-md": tokens.shadow.md,
+        "okai-lg": tokens.shadow.lg
+      },
+      transitionTimingFunction: {
+        "okai-ease": tokens.motion.ease
+      },
+      transitionDuration: {
+        "okai-fast": tokens.motion.fast.replace("ms", ""),
+        "okai-normal": tokens.motion.normal.replace("ms", ""),
+        "okai-slow": tokens.motion.slow.replace("ms", "")
+      },
+      zIndex: {
+        "okai-raised": String(tokens.z.raised),
+        "okai-sticky": String(tokens.z.sticky),
+        "okai-header": String(tokens.z.header),
+        "okai-overlay": String(tokens.z.overlay),
+        "okai-modal": String(tokens.z.modal),
+        "okai-toast": String(tokens.z.toast)
+      },
+      spacing: {
+        "okai-header": tokens.size.headerHeight
+      }
+    }
+  }
+};
+var tailwind_default = hubTailwindPreset;
+
+export { tailwind_default as default, hubTailwindPreset };
+//# sourceMappingURL=tailwind.js.map
+//# sourceMappingURL=tailwind.js.map

package/dist/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.js","sourcesContent":["/**\n * Design tokens — colors, spacing, typography, radius, motion.\n *\n * Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n *\n * Two consumption styles:\n *   1. As CSS custom properties — import `@openkeyai/ui/css` and use\n *      `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n *   2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n *      for programmatic colour pickups (charts, gradients).\n *\n * The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n */\n\nexport const tokens = {\n  color: {\n    /** App-wide canvas. Dark navy with a touch of indigo. */\n    bg: \"#0a0c1a\",\n    /** Surface a half-step lighter than `bg`. Card / panel default. */\n    surface: \"#11142a\",\n    /** Surface above `surface` — popovers, hover states. */\n    surfaceRaised: \"#181d3a\",\n    /** Primary readable text. */\n    foreground: \"#e6e8f5\",\n    /** Lower-emphasis text. Captions, metadata. */\n    foregroundMuted: \"#9097b8\",\n    /** Subtle border default for cards / dividers. */\n    border: \"rgba(150, 160, 220, 0.12)\",\n    /** Indigo-violet primary, softened so it doesn't blow out the bg. */\n    accent: \"#7c6cf5\",\n    /** Brighter accent for focus rings + active links. */\n    accentBright: \"#9b8af9\",\n    /** Destructive action accent. */\n    destructive: \"#ef4459\",\n    /** Success / positive accent. */\n    success: \"#34d399\",\n  },\n  /** 4px base. Use multiples of these for layout — keeps the grid honest. */\n  space: {\n    px: \"1px\",\n    \"0_5\": \"2px\",\n    \"1\": \"4px\",\n    \"1_5\": \"6px\",\n    \"2\": \"8px\",\n    \"3\": \"12px\",\n    \"4\": \"16px\",\n    \"5\": \"20px\",\n    \"6\": \"24px\",\n    \"8\": \"32px\",\n    \"10\": \"40px\",\n    \"12\": \"48px\",\n    \"16\": \"64px\",\n  },\n  radius: {\n    sm: \"4px\",\n    md: \"8px\",\n    lg: \"12px\",\n    /** Default for cards and surfaces. */\n    xl: \"16px\",\n    \"2xl\": \"20px\",\n    full: \"9999px\",\n  },\n  font: {\n    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */\n    sans:\n      \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n      '\"Segoe UI\", Roboto, sans-serif',\n    /** Geist Mono for code + hashes + token displays. */\n    mono:\n      \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n      '\"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    xs: \"11px\",\n    sm: \"13px\",\n    base: \"14px\",\n    md: \"16px\",\n    lg: \"18px\",\n    xl: \"22px\",\n  },\n  lineHeight: {\n    tight: \"1.2\",\n    normal: \"1.5\",\n    relaxed: \"1.65\",\n  },\n  shadow: {\n    /** Subtle pop on raised cards. */\n    sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n    /** Standard floating-pill / dropdown lift. */\n    md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n    /** Modal-style. */\n    lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n  },\n  motion: {\n    /** Default easing — feels good for most UI. */\n    ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n    /** Quick interactions — hover, focus. */\n    fast: \"120ms\",\n    /** Standard — most state transitions. */\n    normal: \"180ms\",\n    /** Used for entrance / exit animations. */\n    slow: \"260ms\",\n  },\n  /** Z-index scale. Use these names, never raw numbers. */\n  z: {\n    base: 0,\n    raised: 10,\n    sticky: 30,\n    /** HubHeader sits here. */\n    header: 40,\n    overlay: 50,\n    modal: 60,\n    toast: 70,\n  },\n  /** Component-specific dimensions. */\n  size: {\n    /** HubHeader height. Tools should leave this much top padding. */\n    headerHeight: \"56px\",\n  },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n","import { tokens } from \"./tokens\";\n\n/**\n * Tailwind preset for `@openkeyai/ui` consumers.\n *\n * Drop into a tool's `tailwind.config.ts`:\n *\n *   import { hubTailwindPreset } from \"@openkeyai/ui/tailwind\";\n *   export default {\n *     presets: [hubTailwindPreset],\n *     content: [...],\n *   } satisfies Config;\n *\n * The preset extends Tailwind's theme with the hub's tokens. It does NOT\n * override Tailwind's defaults — tools can still use the full standard\n * scale alongside the hub additions. Hub-flavoured names are prefixed with\n * `okai-` to avoid colliding with Tailwind's own colour names.\n *\n * We intentionally don't `require(\"tailwindcss\")` here — `tailwind` is a\n * peer concern of the consumer's stack and isn't a dep of this package.\n */\nexport const hubTailwindPreset = {\n  theme: {\n    extend: {\n      colors: {\n        \"okai-bg\": tokens.color.bg,\n        \"okai-surface\": tokens.color.surface,\n        \"okai-surface-raised\": tokens.color.surfaceRaised,\n        \"okai-foreground\": tokens.color.foreground,\n        \"okai-foreground-muted\": tokens.color.foregroundMuted,\n        \"okai-border\": tokens.color.border,\n        \"okai-accent\": tokens.color.accent,\n        \"okai-accent-bright\": tokens.color.accentBright,\n        \"okai-destructive\": tokens.color.destructive,\n        \"okai-success\": tokens.color.success,\n      },\n      borderRadius: {\n        \"okai-sm\": tokens.radius.sm,\n        \"okai-md\": tokens.radius.md,\n        \"okai-lg\": tokens.radius.lg,\n        \"okai-xl\": tokens.radius.xl,\n        \"okai-2xl\": tokens.radius[\"2xl\"],\n      },\n      fontFamily: {\n        \"okai-sans\": tokens.font.sans.split(\",\").map((s) => s.trim()),\n        \"okai-mono\": tokens.font.mono.split(\",\").map((s) => s.trim()),\n      },\n      fontSize: {\n        \"okai-xs\": tokens.fontSize.xs,\n        \"okai-sm\": tokens.fontSize.sm,\n        \"okai-base\": tokens.fontSize.base,\n        \"okai-md\": tokens.fontSize.md,\n        \"okai-lg\": tokens.fontSize.lg,\n        \"okai-xl\": tokens.fontSize.xl,\n      },\n      boxShadow: {\n        \"okai-sm\": tokens.shadow.sm,\n        \"okai-md\": tokens.shadow.md,\n        \"okai-lg\": tokens.shadow.lg,\n      },\n      transitionTimingFunction: {\n        \"okai-ease\": tokens.motion.ease,\n      },\n      transitionDuration: {\n        \"okai-fast\": tokens.motion.fast.replace(\"ms\", \"\"),\n        \"okai-normal\": tokens.motion.normal.replace(\"ms\", \"\"),\n        \"okai-slow\": tokens.motion.slow.replace(\"ms\", \"\"),\n      },\n      zIndex: {\n        \"okai-raised\": String(tokens.z.raised),\n        \"okai-sticky\": String(tokens.z.sticky),\n        \"okai-header\": String(tokens.z.header),\n        \"okai-overlay\": String(tokens.z.overlay),\n        \"okai-modal\": String(tokens.z.modal),\n        \"okai-toast\": String(tokens.z.toast),\n      },\n      spacing: {\n        \"okai-header\": tokens.size.headerHeight,\n      },\n    },\n  },\n} as const;\n\nexport type HubTailwindPreset = typeof hubTailwindPreset;\n\n// Default export so it can also be consumed via\n// `import preset from \"@openkeyai/ui/tailwind\"`.\nexport default hubTailwindPreset;\n"]}

package/dist/tokens.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+// src/tokens.ts
+var tokens = {
+  color: {
+    /** App-wide canvas. Dark navy with a touch of indigo. */
+    bg: "#0a0c1a",
+    /** Surface a half-step lighter than `bg`. Card / panel default. */
+    surface: "#11142a",
+    /** Surface above `surface` — popovers, hover states. */
+    surfaceRaised: "#181d3a",
+    /** Primary readable text. */
+    foreground: "#e6e8f5",
+    /** Lower-emphasis text. Captions, metadata. */
+    foregroundMuted: "#9097b8",
+    /** Subtle border default for cards / dividers. */
+    border: "rgba(150, 160, 220, 0.12)",
+    /** Indigo-violet primary, softened so it doesn't blow out the bg. */
+    accent: "#7c6cf5",
+    /** Brighter accent for focus rings + active links. */
+    accentBright: "#9b8af9",
+    /** Destructive action accent. */
+    destructive: "#ef4459",
+    /** Success / positive accent. */
+    success: "#34d399"
+  },
+  /** 4px base. Use multiples of these for layout — keeps the grid honest. */
+  space: {
+    px: "1px",
+    "0_5": "2px",
+    "1": "4px",
+    "1_5": "6px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    /** Default for cards and surfaces. */
+    xl: "16px",
+    "2xl": "20px",
+    full: "9999px"
+  },
+  font: {
+    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
+    sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    /** Geist Mono for code + hashes + token displays. */
+    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+  },
+  fontSize: {
+    xs: "11px",
+    sm: "13px",
+    base: "14px",
+    md: "16px",
+    lg: "18px",
+    xl: "22px"
+  },
+  lineHeight: {
+    tight: "1.2",
+    normal: "1.5",
+    relaxed: "1.65"
+  },
+  shadow: {
+    /** Subtle pop on raised cards. */
+    sm: "0 1px 2px rgba(0, 0, 0, 0.25)",
+    /** Standard floating-pill / dropdown lift. */
+    md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)",
+    /** Modal-style. */
+    lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)"
+  },
+  motion: {
+    /** Default easing — feels good for most UI. */
+    ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    /** Quick interactions — hover, focus. */
+    fast: "120ms",
+    /** Standard — most state transitions. */
+    normal: "180ms",
+    /** Used for entrance / exit animations. */
+    slow: "260ms"
+  },
+  /** Z-index scale. Use these names, never raw numbers. */
+  z: {
+    base: 0,
+    raised: 10,
+    sticky: 30,
+    /** HubHeader sits here. */
+    header: 40,
+    overlay: 50,
+    modal: 60,
+    toast: 70
+  },
+  /** Component-specific dimensions. */
+  size: {
+    /** HubHeader height. Tools should leave this much top padding. */
+    headerHeight: "56px"
+  }
+};
+
+exports.tokens = tokens;
+//# sourceMappingURL=tokens.cjs.map
+//# sourceMappingURL=tokens.cjs.map

package/dist/tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":";;;AAiBO,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA;AAAA,IAEL,EAAA,EAAI,SAAA;AAAA;AAAA,IAEJ,OAAA,EAAS,SAAA;AAAA;AAAA,IAET,aAAA,EAAe,SAAA;AAAA;AAAA,IAEf,UAAA,EAAY,SAAA;AAAA;AAAA,IAEZ,eAAA,EAAiB,SAAA;AAAA;AAAA,IAEjB,MAAA,EAAQ,2BAAA;AAAA;AAAA,IAER,MAAA,EAAQ,SAAA;AAAA;AAAA,IAER,YAAA,EAAc,SAAA;AAAA;AAAA,IAEd,WAAA,EAAa,SAAA;AAAA;AAAA,IAEb,OAAA,EAAS;AAAA,GACX;AAAA;AAAA,EAEA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,IAAA,EAAM;AAAA;AAAA,IAEJ,IAAA,EACE,oGAAA;AAAA;AAAA,IAGF,IAAA,EACE;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,KAAA;AAAA,IACP,MAAA,EAAQ,KAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,EAAA,EAAI,+BAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,kEAAA;AAAA;AAAA,IAEJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,IAAA,EAAM,gCAAA;AAAA;AAAA,IAEN,IAAA,EAAM,OAAA;AAAA;AAAA,IAEN,MAAA,EAAQ,OAAA;AAAA;AAAA,IAER,IAAA,EAAM;AAAA,GACR;AAAA;AAAA,EAEA,CAAA,EAAG;AAAA,IACD,IAAA,EAAM,CAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,MAAA,EAAQ,EAAA;AAAA;AAAA,IAER,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,EAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AAAA;AAAA,EAEA,IAAA,EAAM;AAAA;AAAA,IAEJ,YAAA,EAAc;AAAA;AAElB","file":"tokens.cjs","sourcesContent":["/**\n * Design tokens — colors, spacing, typography, radius, motion.\n *\n * Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n *\n * Two consumption styles:\n *   1. As CSS custom properties — import `@openkeyai/ui/css` and use\n *      `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n *   2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n *      for programmatic colour pickups (charts, gradients).\n *\n * The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n */\n\nexport const tokens = {\n  color: {\n    /** App-wide canvas. Dark navy with a touch of indigo. */\n    bg: \"#0a0c1a\",\n    /** Surface a half-step lighter than `bg`. Card / panel default. */\n    surface: \"#11142a\",\n    /** Surface above `surface` — popovers, hover states. */\n    surfaceRaised: \"#181d3a\",\n    /** Primary readable text. */\n    foreground: \"#e6e8f5\",\n    /** Lower-emphasis text. Captions, metadata. */\n    foregroundMuted: \"#9097b8\",\n    /** Subtle border default for cards / dividers. */\n    border: \"rgba(150, 160, 220, 0.12)\",\n    /** Indigo-violet primary, softened so it doesn't blow out the bg. */\n    accent: \"#7c6cf5\",\n    /** Brighter accent for focus rings + active links. */\n    accentBright: \"#9b8af9\",\n    /** Destructive action accent. */\n    destructive: \"#ef4459\",\n    /** Success / positive accent. */\n    success: \"#34d399\",\n  },\n  /** 4px base. Use multiples of these for layout — keeps the grid honest. */\n  space: {\n    px: \"1px\",\n    \"0_5\": \"2px\",\n    \"1\": \"4px\",\n    \"1_5\": \"6px\",\n    \"2\": \"8px\",\n    \"3\": \"12px\",\n    \"4\": \"16px\",\n    \"5\": \"20px\",\n    \"6\": \"24px\",\n    \"8\": \"32px\",\n    \"10\": \"40px\",\n    \"12\": \"48px\",\n    \"16\": \"64px\",\n  },\n  radius: {\n    sm: \"4px\",\n    md: \"8px\",\n    lg: \"12px\",\n    /** Default for cards and surfaces. */\n    xl: \"16px\",\n    \"2xl\": \"20px\",\n    full: \"9999px\",\n  },\n  font: {\n    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */\n    sans:\n      \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n      '\"Segoe UI\", Roboto, sans-serif',\n    /** Geist Mono for code + hashes + token displays. */\n    mono:\n      \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n      '\"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    xs: \"11px\",\n    sm: \"13px\",\n    base: \"14px\",\n    md: \"16px\",\n    lg: \"18px\",\n    xl: \"22px\",\n  },\n  lineHeight: {\n    tight: \"1.2\",\n    normal: \"1.5\",\n    relaxed: \"1.65\",\n  },\n  shadow: {\n    /** Subtle pop on raised cards. */\n    sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n    /** Standard floating-pill / dropdown lift. */\n    md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n    /** Modal-style. */\n    lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n  },\n  motion: {\n    /** Default easing — feels good for most UI. */\n    ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n    /** Quick interactions — hover, focus. */\n    fast: \"120ms\",\n    /** Standard — most state transitions. */\n    normal: \"180ms\",\n    /** Used for entrance / exit animations. */\n    slow: \"260ms\",\n  },\n  /** Z-index scale. Use these names, never raw numbers. */\n  z: {\n    base: 0,\n    raised: 10,\n    sticky: 30,\n    /** HubHeader sits here. */\n    header: 40,\n    overlay: 50,\n    modal: 60,\n    toast: 70,\n  },\n  /** Component-specific dimensions. */\n  size: {\n    /** HubHeader height. Tools should leave this much top padding. */\n    headerHeight: \"56px\",\n  },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n"]}

package/dist/tokens.d.cts

@@ -0,0 +1,121 @@
+/**
+ * Design tokens — colors, spacing, typography, radius, motion.
+ *
+ * Frozen-ish: visual changes that affect layout (header height, spacing
+ * scale, font sizes) require coordinated checks against deployed tools.
+ * See ../CLAUDE.md.
+ *
+ * Two consumption styles:
+ *   1. As CSS custom properties — import `@openkeyai/ui/css` and use
+ *      `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.
+ *   2. As a JS object — `import { tokens } from "@openkeyai/ui/tokens"`
+ *      for programmatic colour pickups (charts, gradients).
+ *
+ * The token names mirror the CSS variable names below the prefix.
+ * Example: `tokens.color.bg` ↔ `--okai-color-bg`.
+ */
+declare const tokens: {
+    readonly color: {
+        /** App-wide canvas. Dark navy with a touch of indigo. */
+        readonly bg: "#0a0c1a";
+        /** Surface a half-step lighter than `bg`. Card / panel default. */
+        readonly surface: "#11142a";
+        /** Surface above `surface` — popovers, hover states. */
+        readonly surfaceRaised: "#181d3a";
+        /** Primary readable text. */
+        readonly foreground: "#e6e8f5";
+        /** Lower-emphasis text. Captions, metadata. */
+        readonly foregroundMuted: "#9097b8";
+        /** Subtle border default for cards / dividers. */
+        readonly border: "rgba(150, 160, 220, 0.12)";
+        /** Indigo-violet primary, softened so it doesn't blow out the bg. */
+        readonly accent: "#7c6cf5";
+        /** Brighter accent for focus rings + active links. */
+        readonly accentBright: "#9b8af9";
+        /** Destructive action accent. */
+        readonly destructive: "#ef4459";
+        /** Success / positive accent. */
+        readonly success: "#34d399";
+    };
+    /** 4px base. Use multiples of these for layout — keeps the grid honest. */
+    readonly space: {
+        readonly px: "1px";
+        readonly "0_5": "2px";
+        readonly "1": "4px";
+        readonly "1_5": "6px";
+        readonly "2": "8px";
+        readonly "3": "12px";
+        readonly "4": "16px";
+        readonly "5": "20px";
+        readonly "6": "24px";
+        readonly "8": "32px";
+        readonly "10": "40px";
+        readonly "12": "48px";
+        readonly "16": "64px";
+    };
+    readonly radius: {
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        /** Default for cards and surfaces. */
+        readonly xl: "16px";
+        readonly "2xl": "20px";
+        readonly full: "9999px";
+    };
+    readonly font: {
+        /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
+        readonly sans: string;
+        /** Geist Mono for code + hashes + token displays. */
+        readonly mono: string;
+    };
+    readonly fontSize: {
+        readonly xs: "11px";
+        readonly sm: "13px";
+        readonly base: "14px";
+        readonly md: "16px";
+        readonly lg: "18px";
+        readonly xl: "22px";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.2";
+        readonly normal: "1.5";
+        readonly relaxed: "1.65";
+    };
+    readonly shadow: {
+        /** Subtle pop on raised cards. */
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.25)";
+        /** Standard floating-pill / dropdown lift. */
+        readonly md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)";
+        /** Modal-style. */
+        readonly lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)";
+    };
+    readonly motion: {
+        /** Default easing — feels good for most UI. */
+        readonly ease: "cubic-bezier(0.4, 0.0, 0.2, 1)";
+        /** Quick interactions — hover, focus. */
+        readonly fast: "120ms";
+        /** Standard — most state transitions. */
+        readonly normal: "180ms";
+        /** Used for entrance / exit animations. */
+        readonly slow: "260ms";
+    };
+    /** Z-index scale. Use these names, never raw numbers. */
+    readonly z: {
+        readonly base: 0;
+        readonly raised: 10;
+        readonly sticky: 30;
+        /** HubHeader sits here. */
+        readonly header: 40;
+        readonly overlay: 50;
+        readonly modal: 60;
+        readonly toast: 70;
+    };
+    /** Component-specific dimensions. */
+    readonly size: {
+        /** HubHeader height. Tools should leave this much top padding. */
+        readonly headerHeight: "56px";
+    };
+};
+type DesignTokens = typeof tokens;
+
+export { type DesignTokens, tokens };

package/dist/tokens.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Design tokens — colors, spacing, typography, radius, motion.
+ *
+ * Frozen-ish: visual changes that affect layout (header height, spacing
+ * scale, font sizes) require coordinated checks against deployed tools.
+ * See ../CLAUDE.md.
+ *
+ * Two consumption styles:
+ *   1. As CSS custom properties — import `@openkeyai/ui/css` and use
+ *      `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.
+ *   2. As a JS object — `import { tokens } from "@openkeyai/ui/tokens"`
+ *      for programmatic colour pickups (charts, gradients).
+ *
+ * The token names mirror the CSS variable names below the prefix.
+ * Example: `tokens.color.bg` ↔ `--okai-color-bg`.
+ */
+declare const tokens: {
+    readonly color: {
+        /** App-wide canvas. Dark navy with a touch of indigo. */
+        readonly bg: "#0a0c1a";
+        /** Surface a half-step lighter than `bg`. Card / panel default. */
+        readonly surface: "#11142a";
+        /** Surface above `surface` — popovers, hover states. */
+        readonly surfaceRaised: "#181d3a";
+        /** Primary readable text. */
+        readonly foreground: "#e6e8f5";
+        /** Lower-emphasis text. Captions, metadata. */
+        readonly foregroundMuted: "#9097b8";
+        /** Subtle border default for cards / dividers. */
+        readonly border: "rgba(150, 160, 220, 0.12)";
+        /** Indigo-violet primary, softened so it doesn't blow out the bg. */
+        readonly accent: "#7c6cf5";
+        /** Brighter accent for focus rings + active links. */
+        readonly accentBright: "#9b8af9";
+        /** Destructive action accent. */
+        readonly destructive: "#ef4459";
+        /** Success / positive accent. */
+        readonly success: "#34d399";
+    };
+    /** 4px base. Use multiples of these for layout — keeps the grid honest. */
+    readonly space: {
+        readonly px: "1px";
+        readonly "0_5": "2px";
+        readonly "1": "4px";
+        readonly "1_5": "6px";
+        readonly "2": "8px";
+        readonly "3": "12px";
+        readonly "4": "16px";
+        readonly "5": "20px";
+        readonly "6": "24px";
+        readonly "8": "32px";
+        readonly "10": "40px";
+        readonly "12": "48px";
+        readonly "16": "64px";
+    };
+    readonly radius: {
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        /** Default for cards and surfaces. */
+        readonly xl: "16px";
+        readonly "2xl": "20px";
+        readonly full: "9999px";
+    };
+    readonly font: {
+        /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
+        readonly sans: string;
+        /** Geist Mono for code + hashes + token displays. */
+        readonly mono: string;
+    };
+    readonly fontSize: {
+        readonly xs: "11px";
+        readonly sm: "13px";
+        readonly base: "14px";
+        readonly md: "16px";
+        readonly lg: "18px";
+        readonly xl: "22px";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.2";
+        readonly normal: "1.5";
+        readonly relaxed: "1.65";
+    };
+    readonly shadow: {
+        /** Subtle pop on raised cards. */
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.25)";
+        /** Standard floating-pill / dropdown lift. */
+        readonly md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)";
+        /** Modal-style. */
+        readonly lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)";
+    };
+    readonly motion: {
+        /** Default easing — feels good for most UI. */
+        readonly ease: "cubic-bezier(0.4, 0.0, 0.2, 1)";
+        /** Quick interactions — hover, focus. */
+        readonly fast: "120ms";
+        /** Standard — most state transitions. */
+        readonly normal: "180ms";
+        /** Used for entrance / exit animations. */
+        readonly slow: "260ms";
+    };
+    /** Z-index scale. Use these names, never raw numbers. */
+    readonly z: {
+        readonly base: 0;
+        readonly raised: 10;
+        readonly sticky: 30;
+        /** HubHeader sits here. */
+        readonly header: 40;
+        readonly overlay: 50;
+        readonly modal: 60;
+        readonly toast: 70;
+    };
+    /** Component-specific dimensions. */
+    readonly size: {
+        /** HubHeader height. Tools should leave this much top padding. */
+        readonly headerHeight: "56px";
+    };
+};
+type DesignTokens = typeof tokens;
+
+export { type DesignTokens, tokens };

package/dist/tokens.js

@@ -0,0 +1,107 @@
+// src/tokens.ts
+var tokens = {
+  color: {
+    /** App-wide canvas. Dark navy with a touch of indigo. */
+    bg: "#0a0c1a",
+    /** Surface a half-step lighter than `bg`. Card / panel default. */
+    surface: "#11142a",
+    /** Surface above `surface` — popovers, hover states. */
+    surfaceRaised: "#181d3a",
+    /** Primary readable text. */
+    foreground: "#e6e8f5",
+    /** Lower-emphasis text. Captions, metadata. */
+    foregroundMuted: "#9097b8",
+    /** Subtle border default for cards / dividers. */
+    border: "rgba(150, 160, 220, 0.12)",
+    /** Indigo-violet primary, softened so it doesn't blow out the bg. */
+    accent: "#7c6cf5",
+    /** Brighter accent for focus rings + active links. */
+    accentBright: "#9b8af9",
+    /** Destructive action accent. */
+    destructive: "#ef4459",
+    /** Success / positive accent. */
+    success: "#34d399"
+  },
+  /** 4px base. Use multiples of these for layout — keeps the grid honest. */
+  space: {
+    px: "1px",
+    "0_5": "2px",
+    "1": "4px",
+    "1_5": "6px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    /** Default for cards and surfaces. */
+    xl: "16px",
+    "2xl": "20px",
+    full: "9999px"
+  },
+  font: {
+    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */
+    sans: 'Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    /** Geist Mono for code + hashes + token displays. */
+    mono: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+  },
+  fontSize: {
+    xs: "11px",
+    sm: "13px",
+    base: "14px",
+    md: "16px",
+    lg: "18px",
+    xl: "22px"
+  },
+  lineHeight: {
+    tight: "1.2",
+    normal: "1.5",
+    relaxed: "1.65"
+  },
+  shadow: {
+    /** Subtle pop on raised cards. */
+    sm: "0 1px 2px rgba(0, 0, 0, 0.25)",
+    /** Standard floating-pill / dropdown lift. */
+    md: "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)",
+    /** Modal-style. */
+    lg: "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)"
+  },
+  motion: {
+    /** Default easing — feels good for most UI. */
+    ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+    /** Quick interactions — hover, focus. */
+    fast: "120ms",
+    /** Standard — most state transitions. */
+    normal: "180ms",
+    /** Used for entrance / exit animations. */
+    slow: "260ms"
+  },
+  /** Z-index scale. Use these names, never raw numbers. */
+  z: {
+    base: 0,
+    raised: 10,
+    sticky: 30,
+    /** HubHeader sits here. */
+    header: 40,
+    overlay: 50,
+    modal: 60,
+    toast: 70
+  },
+  /** Component-specific dimensions. */
+  size: {
+    /** HubHeader height. Tools should leave this much top padding. */
+    headerHeight: "56px"
+  }
+};
+
+export { tokens };
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":";AAiBO,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA;AAAA,IAEL,EAAA,EAAI,SAAA;AAAA;AAAA,IAEJ,OAAA,EAAS,SAAA;AAAA;AAAA,IAET,aAAA,EAAe,SAAA;AAAA;AAAA,IAEf,UAAA,EAAY,SAAA;AAAA;AAAA,IAEZ,eAAA,EAAiB,SAAA;AAAA;AAAA,IAEjB,MAAA,EAAQ,2BAAA;AAAA;AAAA,IAER,MAAA,EAAQ,SAAA;AAAA;AAAA,IAER,YAAA,EAAc,SAAA;AAAA;AAAA,IAEd,WAAA,EAAa,SAAA;AAAA;AAAA,IAEb,OAAA,EAAS;AAAA,GACX;AAAA;AAAA,EAEA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,GAAA,EAAK,KAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,GAAA,EAAK,MAAA;AAAA,IACL,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,MAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,IAAA,EAAM;AAAA;AAAA,IAEJ,IAAA,EACE,oGAAA;AAAA;AAAA,IAGF,IAAA,EACE;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,KAAA;AAAA,IACP,MAAA,EAAQ,KAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,EAAA,EAAI,+BAAA;AAAA;AAAA,IAEJ,EAAA,EAAI,kEAAA;AAAA;AAAA,IAEJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA;AAAA,IAEN,IAAA,EAAM,gCAAA;AAAA;AAAA,IAEN,IAAA,EAAM,OAAA;AAAA;AAAA,IAEN,MAAA,EAAQ,OAAA;AAAA;AAAA,IAER,IAAA,EAAM;AAAA,GACR;AAAA;AAAA,EAEA,CAAA,EAAG;AAAA,IACD,IAAA,EAAM,CAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,MAAA,EAAQ,EAAA;AAAA;AAAA,IAER,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,EAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AAAA;AAAA,EAEA,IAAA,EAAM;AAAA;AAAA,IAEJ,YAAA,EAAc;AAAA;AAElB","file":"tokens.js","sourcesContent":["/**\n * Design tokens — colors, spacing, typography, radius, motion.\n *\n * Frozen-ish: visual changes that affect layout (header height, spacing\n * scale, font sizes) require coordinated checks against deployed tools.\n * See ../CLAUDE.md.\n *\n * Two consumption styles:\n *   1. As CSS custom properties — import `@openkeyai/ui/css` and use\n *      `var(--okai-color-bg)` etc. The `<HubHeader />` component does this.\n *   2. As a JS object — `import { tokens } from \"@openkeyai/ui/tokens\"`\n *      for programmatic colour pickups (charts, gradients).\n *\n * The token names mirror the CSS variable names below the prefix.\n * Example: `tokens.color.bg` ↔ `--okai-color-bg`.\n */\n\nexport const tokens = {\n  color: {\n    /** App-wide canvas. Dark navy with a touch of indigo. */\n    bg: \"#0a0c1a\",\n    /** Surface a half-step lighter than `bg`. Card / panel default. */\n    surface: \"#11142a\",\n    /** Surface above `surface` — popovers, hover states. */\n    surfaceRaised: \"#181d3a\",\n    /** Primary readable text. */\n    foreground: \"#e6e8f5\",\n    /** Lower-emphasis text. Captions, metadata. */\n    foregroundMuted: \"#9097b8\",\n    /** Subtle border default for cards / dividers. */\n    border: \"rgba(150, 160, 220, 0.12)\",\n    /** Indigo-violet primary, softened so it doesn't blow out the bg. */\n    accent: \"#7c6cf5\",\n    /** Brighter accent for focus rings + active links. */\n    accentBright: \"#9b8af9\",\n    /** Destructive action accent. */\n    destructive: \"#ef4459\",\n    /** Success / positive accent. */\n    success: \"#34d399\",\n  },\n  /** 4px base. Use multiples of these for layout — keeps the grid honest. */\n  space: {\n    px: \"1px\",\n    \"0_5\": \"2px\",\n    \"1\": \"4px\",\n    \"1_5\": \"6px\",\n    \"2\": \"8px\",\n    \"3\": \"12px\",\n    \"4\": \"16px\",\n    \"5\": \"20px\",\n    \"6\": \"24px\",\n    \"8\": \"32px\",\n    \"10\": \"40px\",\n    \"12\": \"48px\",\n    \"16\": \"64px\",\n  },\n  radius: {\n    sm: \"4px\",\n    md: \"8px\",\n    lg: \"12px\",\n    /** Default for cards and surfaces. */\n    xl: \"16px\",\n    \"2xl\": \"20px\",\n    full: \"9999px\",\n  },\n  font: {\n    /** Geist Sans — opt-in by the consumer's stack. We just suggest it. */\n    sans:\n      \"Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \" +\n      '\"Segoe UI\", Roboto, sans-serif',\n    /** Geist Mono for code + hashes + token displays. */\n    mono:\n      \"Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \" +\n      '\"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    xs: \"11px\",\n    sm: \"13px\",\n    base: \"14px\",\n    md: \"16px\",\n    lg: \"18px\",\n    xl: \"22px\",\n  },\n  lineHeight: {\n    tight: \"1.2\",\n    normal: \"1.5\",\n    relaxed: \"1.65\",\n  },\n  shadow: {\n    /** Subtle pop on raised cards. */\n    sm: \"0 1px 2px rgba(0, 0, 0, 0.25)\",\n    /** Standard floating-pill / dropdown lift. */\n    md: \"0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)\",\n    /** Modal-style. */\n    lg: \"0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)\",\n  },\n  motion: {\n    /** Default easing — feels good for most UI. */\n    ease: \"cubic-bezier(0.4, 0.0, 0.2, 1)\",\n    /** Quick interactions — hover, focus. */\n    fast: \"120ms\",\n    /** Standard — most state transitions. */\n    normal: \"180ms\",\n    /** Used for entrance / exit animations. */\n    slow: \"260ms\",\n  },\n  /** Z-index scale. Use these names, never raw numbers. */\n  z: {\n    base: 0,\n    raised: 10,\n    sticky: 30,\n    /** HubHeader sits here. */\n    header: 40,\n    overlay: 50,\n    modal: 60,\n    toast: 70,\n  },\n  /** Component-specific dimensions. */\n  size: {\n    /** HubHeader height. Tools should leave this much top padding. */\n    headerHeight: \"56px\",\n  },\n} as const;\n\nexport type DesignTokens = typeof tokens;\n"]}