@openkeyai/ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,308 @@
+/* =============================================================================
+ * @openkeyai/ui — global stylesheet
+ *
+ * Tools import this exactly once at the top of their global CSS:
+ *
+ *   @import "@openkeyai/ui/css";
+ *
+ * It defines:
+ *   - `:where(:root)` custom properties for all design tokens
+ *   - Scoped `.okai-*` classes for every component we ship
+ *
+ * Why `:where(:root)` instead of `:root`? Zero specificity, so a tool's own
+ * brand overrides can win without `!important`. The HubHeader's component
+ * styles deliberately DO use real selectors — those can't be themed away
+ * (per docs/TOOL_CONTRACT.md in the hub repo).
+ *
+ * Class names use a `okai-` prefix (OpenKey AI) to avoid collisions with the
+ * tool's own utility classes. Inside the header, BEM-ish nesting keeps the
+ * selectors readable.
+ * ============================================================================= */
+
+:where(:root) {
+  /* ─── Colors ─────────────────────────────────────────────────────────── */
+  --okai-color-bg: #0a0c1a;
+  --okai-color-surface: #11142a;
+  --okai-color-surface-raised: #181d3a;
+  --okai-color-foreground: #e6e8f5;
+  --okai-color-foreground-muted: #9097b8;
+  --okai-color-border: rgba(150, 160, 220, 0.12);
+  --okai-color-accent: #7c6cf5;
+  --okai-color-accent-bright: #9b8af9;
+  --okai-color-destructive: #ef4459;
+  --okai-color-success: #34d399;
+
+  /* ─── Spacing (4px base) ─────────────────────────────────────────────── */
+  --okai-space-px: 1px;
+  --okai-space-0_5: 2px;
+  --okai-space-1: 4px;
+  --okai-space-1_5: 6px;
+  --okai-space-2: 8px;
+  --okai-space-3: 12px;
+  --okai-space-4: 16px;
+  --okai-space-5: 20px;
+  --okai-space-6: 24px;
+  --okai-space-8: 32px;
+  --okai-space-10: 40px;
+  --okai-space-12: 48px;
+  --okai-space-16: 64px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────────── */
+  --okai-radius-sm: 4px;
+  --okai-radius-md: 8px;
+  --okai-radius-lg: 12px;
+  --okai-radius-xl: 16px;
+  --okai-radius-2xl: 20px;
+  --okai-radius-full: 9999px;
+
+  /* ─── Typography ─────────────────────────────────────────────────────── */
+  --okai-font-sans: Geist, ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --okai-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", monospace;
+  --okai-fs-xs: 11px;
+  --okai-fs-sm: 13px;
+  --okai-fs-base: 14px;
+  --okai-fs-md: 16px;
+  --okai-fs-lg: 18px;
+  --okai-fs-xl: 22px;
+  --okai-lh-tight: 1.2;
+  --okai-lh-normal: 1.5;
+
+  /* ─── Shadows ────────────────────────────────────────────────────────── */
+  --okai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+  --okai-shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.5),
+    0 2px 6px rgba(0, 0, 0, 0.3);
+  --okai-shadow-lg: 0 20px 60px -20px rgba(0, 0, 0, 0.6),
+    0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* ─── Motion ─────────────────────────────────────────────────────────── */
+  --okai-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --okai-dur-fast: 120ms;
+  --okai-dur-normal: 180ms;
+  --okai-dur-slow: 260ms;
+
+  /* ─── Z-index ────────────────────────────────────────────────────────── */
+  --okai-z-base: 0;
+  --okai-z-raised: 10;
+  --okai-z-sticky: 30;
+  --okai-z-header: 40;
+  --okai-z-overlay: 50;
+  --okai-z-modal: 60;
+  --okai-z-toast: 70;
+
+  /* ─── Component sizes ────────────────────────────────────────────────── */
+  --okai-header-h: 56px;
+}
+
+/* =============================================================================
+ * HubHeader
+ *
+ * Mandatory in every tool. The CSS lives here (not in the component) so the
+ * SAME styles can be reproduced in a server-rendered HTML fallback if a tool
+ * ever wants one. The component just sets classes.
+ *
+ * Layout: a fixed-top horizontal bar with three regions —
+ *   [.brand]  [.spacer + .tool-name]  [.right + .user]
+ * ============================================================================= */
+
+.okai-header {
+  /* Position: fixed across the top of the viewport. Tools should leave
+     `var(--okai-header-h)` worth of top padding on their root. */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--okai-z-header);
+  display: flex;
+  align-items: center;
+  height: var(--okai-header-h);
+  padding: 0 var(--okai-space-4);
+  gap: var(--okai-space-4);
+
+  /* Glass surface — matches the hub's app shell language. */
+  background: color-mix(in srgb, var(--okai-color-bg) 80%, transparent);
+  -webkit-backdrop-filter: saturate(140%) blur(12px);
+  backdrop-filter: saturate(140%) blur(12px);
+  border-bottom: 1px solid var(--okai-color-border);
+
+  /* Typography — we deliberately set this so the header looks consistent
+     even when the consumer hasn't loaded Geist. */
+  font-family: var(--okai-font-sans);
+  font-size: var(--okai-fs-sm);
+  line-height: var(--okai-lh-tight);
+  color: var(--okai-color-foreground);
+
+  /* Defensive resets — tools' own button/anchor rules shouldn't bleed in. */
+  box-sizing: border-box;
+}
+
+.okai-header *,
+.okai-header *::before,
+.okai-header *::after {
+  box-sizing: border-box;
+}
+
+/* Brand: hub icon + "OpenKey AI" wordmark, links to the hub. */
+.okai-header__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--okai-space-2);
+  color: var(--okai-color-foreground);
+  text-decoration: none;
+  border-radius: var(--okai-radius-md);
+  padding: var(--okai-space-1) var(--okai-space-2);
+  transition: background-color var(--okai-dur-fast) var(--okai-ease);
+}
+.okai-header__brand:hover,
+.okai-header__brand:focus-visible {
+  background-color: color-mix(
+    in srgb,
+    var(--okai-color-accent) 12%,
+    transparent
+  );
+  outline: none;
+}
+
+.okai-header__brand-mark {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--okai-radius-md);
+  background: linear-gradient(
+    135deg,
+    var(--okai-color-accent),
+    var(--okai-color-accent-bright)
+  );
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+}
+
+.okai-header__brand-text {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+/* Divider between brand and tool name. */
+.okai-header__divider {
+  width: 1px;
+  height: 20px;
+  background-color: var(--okai-color-border);
+  flex-shrink: 0;
+}
+
+.okai-header__tool-name {
+  font-weight: 500;
+  color: var(--okai-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Pushes the right side away from the centre. */
+.okai-header__spacer {
+  flex: 1 1 auto;
+}
+
+.okai-header__right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--okai-space-2);
+}
+
+/* User chip — avatar + display name. */
+.okai-header__user {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--okai-space-2);
+  padding: var(--okai-space-1) var(--okai-space-3) var(--okai-space-1)
+    var(--okai-space-1);
+  border-radius: var(--okai-radius-full);
+  background-color: color-mix(
+    in srgb,
+    var(--okai-color-foreground) 6%,
+    transparent
+  );
+  color: var(--okai-color-foreground);
+  text-decoration: none;
+  transition: background-color var(--okai-dur-fast) var(--okai-ease);
+  max-width: 220px;
+}
+.okai-header__user:hover,
+.okai-header__user:focus-visible {
+  background-color: color-mix(
+    in srgb,
+    var(--okai-color-foreground) 10%,
+    transparent
+  );
+  outline: none;
+}
+
+.okai-header__user-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--okai-radius-full);
+  background-color: var(--okai-color-surface-raised);
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+}
+
+/* Initials fallback when there's no avatar URL. */
+.okai-header__user-fallback {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--okai-radius-full);
+  background: linear-gradient(
+    135deg,
+    var(--okai-color-accent),
+    var(--okai-color-accent-bright)
+  );
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.okai-header__user-name {
+  font-size: var(--okai-fs-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Sign-in CTA when no user is supplied. */
+.okai-header__signin {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--okai-space-1_5) var(--okai-space-3);
+  border-radius: var(--okai-radius-full);
+  background: linear-gradient(
+    135deg,
+    var(--okai-color-accent),
+    var(--okai-color-accent-bright)
+  );
+  color: white;
+  font-size: var(--okai-fs-sm);
+  font-weight: 500;
+  text-decoration: none;
+  transition: filter var(--okai-dur-fast) var(--okai-ease);
+}
+.okai-header__signin:hover,
+.okai-header__signin:focus-visible {
+  filter: brightness(1.1);
+  outline: none;
+}
+
+/* On narrow viewports, drop the wordmark + display name to save room. */
+@media (max-width: 640px) {
+  .okai-header__brand-text,
+  .okai-header__user-name {
+    display: none;
+  }
+  .okai-header__user {
+    padding: var(--okai-space-1);
+  }
+}

package/dist/tailwind.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// 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;
+
+exports.default = tailwind_default;
+exports.hubTailwindPreset = hubTailwindPreset;
+//# sourceMappingURL=tailwind.cjs.map
+//# sourceMappingURL=tailwind.cjs.map

package/dist/tailwind.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts","../src/tailwind.ts"],"names":[],"mappings":"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","file":"tailwind.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","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/tailwind.d.cts

@@ -0,0 +1,83 @@
+/**
+ * Tailwind preset for `@openkeyai/ui` consumers.
+ *
+ * Drop into a tool's `tailwind.config.ts`:
+ *
+ *   import { hubTailwindPreset } from "@openkeyai/ui/tailwind";
+ *   export default {
+ *     presets: [hubTailwindPreset],
+ *     content: [...],
+ *   } satisfies Config;
+ *
+ * The preset extends Tailwind's theme with the hub's tokens. It does NOT
+ * override Tailwind's defaults — tools can still use the full standard
+ * scale alongside the hub additions. Hub-flavoured names are prefixed with
+ * `okai-` to avoid colliding with Tailwind's own colour names.
+ *
+ * We intentionally don't `require("tailwindcss")` here — `tailwind` is a
+ * peer concern of the consumer's stack and isn't a dep of this package.
+ */
+declare const hubTailwindPreset: {
+    readonly theme: {
+        readonly extend: {
+            readonly colors: {
+                readonly "okai-bg": "#0a0c1a";
+                readonly "okai-surface": "#11142a";
+                readonly "okai-surface-raised": "#181d3a";
+                readonly "okai-foreground": "#e6e8f5";
+                readonly "okai-foreground-muted": "#9097b8";
+                readonly "okai-border": "rgba(150, 160, 220, 0.12)";
+                readonly "okai-accent": "#7c6cf5";
+                readonly "okai-accent-bright": "#9b8af9";
+                readonly "okai-destructive": "#ef4459";
+                readonly "okai-success": "#34d399";
+            };
+            readonly borderRadius: {
+                readonly "okai-sm": "4px";
+                readonly "okai-md": "8px";
+                readonly "okai-lg": "12px";
+                readonly "okai-xl": "16px";
+                readonly "okai-2xl": "20px";
+            };
+            readonly fontFamily: {
+                readonly "okai-sans": string[];
+                readonly "okai-mono": string[];
+            };
+            readonly fontSize: {
+                readonly "okai-xs": "11px";
+                readonly "okai-sm": "13px";
+                readonly "okai-base": "14px";
+                readonly "okai-md": "16px";
+                readonly "okai-lg": "18px";
+                readonly "okai-xl": "22px";
+            };
+            readonly boxShadow: {
+                readonly "okai-sm": "0 1px 2px rgba(0, 0, 0, 0.25)";
+                readonly "okai-md": "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)";
+                readonly "okai-lg": "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)";
+            };
+            readonly transitionTimingFunction: {
+                readonly "okai-ease": "cubic-bezier(0.4, 0.0, 0.2, 1)";
+            };
+            readonly transitionDuration: {
+                readonly "okai-fast": string;
+                readonly "okai-normal": string;
+                readonly "okai-slow": string;
+            };
+            readonly zIndex: {
+                readonly "okai-raised": string;
+                readonly "okai-sticky": string;
+                readonly "okai-header": string;
+                readonly "okai-overlay": string;
+                readonly "okai-modal": string;
+                readonly "okai-toast": string;
+            };
+            readonly spacing: {
+                readonly "okai-header": "56px";
+            };
+        };
+    };
+};
+type HubTailwindPreset = typeof hubTailwindPreset;
+
+export { type HubTailwindPreset, hubTailwindPreset as default, hubTailwindPreset };

package/dist/tailwind.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Tailwind preset for `@openkeyai/ui` consumers.
+ *
+ * Drop into a tool's `tailwind.config.ts`:
+ *
+ *   import { hubTailwindPreset } from "@openkeyai/ui/tailwind";
+ *   export default {
+ *     presets: [hubTailwindPreset],
+ *     content: [...],
+ *   } satisfies Config;
+ *
+ * The preset extends Tailwind's theme with the hub's tokens. It does NOT
+ * override Tailwind's defaults — tools can still use the full standard
+ * scale alongside the hub additions. Hub-flavoured names are prefixed with
+ * `okai-` to avoid colliding with Tailwind's own colour names.
+ *
+ * We intentionally don't `require("tailwindcss")` here — `tailwind` is a
+ * peer concern of the consumer's stack and isn't a dep of this package.
+ */
+declare const hubTailwindPreset: {
+    readonly theme: {
+        readonly extend: {
+            readonly colors: {
+                readonly "okai-bg": "#0a0c1a";
+                readonly "okai-surface": "#11142a";
+                readonly "okai-surface-raised": "#181d3a";
+                readonly "okai-foreground": "#e6e8f5";
+                readonly "okai-foreground-muted": "#9097b8";
+                readonly "okai-border": "rgba(150, 160, 220, 0.12)";
+                readonly "okai-accent": "#7c6cf5";
+                readonly "okai-accent-bright": "#9b8af9";
+                readonly "okai-destructive": "#ef4459";
+                readonly "okai-success": "#34d399";
+            };
+            readonly borderRadius: {
+                readonly "okai-sm": "4px";
+                readonly "okai-md": "8px";
+                readonly "okai-lg": "12px";
+                readonly "okai-xl": "16px";
+                readonly "okai-2xl": "20px";
+            };
+            readonly fontFamily: {
+                readonly "okai-sans": string[];
+                readonly "okai-mono": string[];
+            };
+            readonly fontSize: {
+                readonly "okai-xs": "11px";
+                readonly "okai-sm": "13px";
+                readonly "okai-base": "14px";
+                readonly "okai-md": "16px";
+                readonly "okai-lg": "18px";
+                readonly "okai-xl": "22px";
+            };
+            readonly boxShadow: {
+                readonly "okai-sm": "0 1px 2px rgba(0, 0, 0, 0.25)";
+                readonly "okai-md": "0 6px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)";
+                readonly "okai-lg": "0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4)";
+            };
+            readonly transitionTimingFunction: {
+                readonly "okai-ease": "cubic-bezier(0.4, 0.0, 0.2, 1)";
+            };
+            readonly transitionDuration: {
+                readonly "okai-fast": string;
+                readonly "okai-normal": string;
+                readonly "okai-slow": string;
+            };
+            readonly zIndex: {
+                readonly "okai-raised": string;
+                readonly "okai-sticky": string;
+                readonly "okai-header": string;
+                readonly "okai-overlay": string;
+                readonly "okai-modal": string;
+                readonly "okai-toast": string;
+            };
+            readonly spacing: {
+                readonly "okai-header": "56px";
+            };
+        };
+    };
+};
+type HubTailwindPreset = typeof hubTailwindPreset;
+
+export { type HubTailwindPreset, hubTailwindPreset as default, hubTailwindPreset };