@openkeyai/ui 0.1.0 → 1.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React4 from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/hub-header.tsx
 var DEFAULT_HUB_URL = "https://openkeyai.com";
@@ -86,10 +86,115 @@ function HubHeader({
     }
   );
 }
+var cx = (...parts) => parts.filter(Boolean).join(" ");
+var Button = React4.forwardRef(
+  function Button2({
+    variant = "primary",
+    size = "md",
+    iconOnly = false,
+    className,
+    type = "button",
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: cx(
+          "okai-btn",
+          `okai-btn--${variant}`,
+          `okai-btn--${size}`,
+          iconOnly && "okai-btn--icon",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var cx2 = (...parts) => parts.filter(Boolean).join(" ");
+var Card = React4.forwardRef(function Card2({ level = 1, interactive = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx2(
+        "okai-card",
+        `okai-card--level-${level}`,
+        interactive && "okai-card--interactive",
+        className
+      ),
+      ...rest
+    }
+  );
+});
+var cx3 = (...parts) => parts.filter(Boolean).join(" ");
+var Input = React4.forwardRef(
+  function Input2({ className, mono, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cx3("okai-input", mono && "okai-input--mono", className),
+        ...rest
+      }
+    );
+  }
+);
+var Select = React4.forwardRef(
+  function Select2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("select", { ref, className: cx3("okai-select", className), ...rest });
+  }
+);
+var Textarea = React4.forwardRef(
+  function Textarea2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: cx3("okai-textarea", className),
+        ...rest
+      }
+    );
+  }
+);
+var cx4 = (...parts) => parts.filter(Boolean).join(" ");
+function Badge({
+  variant = "default",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx4("okai-badge", `okai-badge--${variant}`, className),
+      ...rest
+    }
+  );
+}
+var cx5 = (...parts) => parts.filter(Boolean).join(" ");
+function Stat({
+  label,
+  value,
+  sub,
+  icon,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx5("okai-stat", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("span", { className: "okai-stat__label", children: [
+      icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: icon }) : null,
+      label
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "okai-stat__value", children: value }),
+    sub ? /* @__PURE__ */ jsx("span", { className: "okai-stat__sub", children: sub }) : null
+  ] });
+}
 
 // src/index.ts
-var UI_VERSION = "0.1.0";
+var UI_VERSION = "1.0.0";
 
-export { HubHeader, UI_VERSION };
+export { Badge, Button, Card, HubHeader, Input, Select, Stat, Textarea, UI_VERSION };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/hub-header.tsx","../src/index.ts"],"names":[],"mappings":";;;;AAiDA,IAAM,eAAA,GAAkB,uBAAA;AAExB,SAAS,YAAY,IAAA,EAAsB;AACzC,EAAA,MAAM,KAAA,GAAQ,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AACrD,EAAA,MAAM,KAAA,GAAQ,MAAM,CAAC,CAAA;AACrB,EAAA,IAAI,CAAC,OAAO,OAAO,GAAA;AACnB,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG,OAAO,MAAM,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,CAAE,WAAA,EAAY;AAC7D,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA,IAAK,KAAA;AACxC,EAAA,OAAA,CAAA,CAAS,KAAA,CAAM,CAAC,CAAA,IAAK,EAAA,KAAO,KAAK,CAAC,CAAA,IAAK,EAAA,CAAA,EAAK,WAAA,EAAY,IAAK,GAAA;AAC/D;AAKO,SAAS,SAAA,CAAU;AAAA,EACxB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA,GAAS,eAAA;AAAA,EACT,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,OAAA,GAAU,MAAA;AAChB,EAAA,MAAM,cAAc,CAAA,EAAG,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAC,CAAA,iBAAA,CAAA;AAChD,EAAA,MAAM,aAAa,CAAA,EAAG,MAAA,CAAO,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAC,CAAA,MAAA,CAAA;AAE/C,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EACE,SAAA,GAAY,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,GAAK,aAAA;AAAA,MAE3C,KAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,qBAAA,EAAoB,YAAA;AAAA,MAEpB,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,oBAAA;AAAA,YACV,IAAA,EAAM,OAAA;AAAA,YACN,YAAA,EAAW,qBAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA0B,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,8BAC7D,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA0B,QAAA,EAAA,YAAA,EAAU;AAAA;AAAA;AAAA,SACtD;AAAA,wBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EAAuB,eAAY,MAAA,EAAO,CAAA;AAAA,4BAEzD,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,KAAA,EAAO,UAC7C,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,wBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qBAAA,EAAsB,eAAY,MAAA,EAAO,CAAA;AAAA,QAExD,aAAa,IAAA,mBACZ,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EAAsB,qBAAU,CAAA,GAC7C,IAAA;AAAA,QAEH,IAAA,mBACC,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,mBAAA;AAAA,YACV,IAAA,EAAM,WAAA;AAAA,YACN,KAAA,EAAO,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,WAAA;AAAA,YAC1B,YAAA,EAAY,CAAA,iBAAA,EAAoB,IAAA,CAAK,WAAW,CAAA,CAAA;AAAA,YAE/C,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,SAAA,mBACJ,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,0BAAA;AAAA,kBACV,IAAA,EAAK,KAAA;AAAA,kBACL,cAAY,IAAA,CAAK,WAAA;AAAA,kBACjB,OAAO,EAAE,eAAA,EAAiB,CAAA,IAAA,EAAO,IAAA,CAAK,SAAS,CAAA,CAAA,CAAA;AAAI;AAAA,eACrD,mBAEA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,4BAAA;AAAA,kBACV,aAAA,EAAY,MAAA;AAAA,kBAEX,QAAA,EAAA,WAAA,CAAY,KAAK,WAAW;AAAA;AAAA,eAC/B;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAA0B,eAAK,WAAA,EAAY;AAAA;AAAA;AAAA,SAC7D,mBAEA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,IAAA,EAAM,UAAA;AAAA,YACN,YAAA,EAAW,uBAAA;AAAA,YACZ,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,GAEJ;AAEJ;;;ACnHO,IAAM,UAAA,GAAa","file":"index.js","sourcesContent":["import * as React from \"react\";\n\n/**\n * Mandatory shared header for every OpenKey AI tool.\n *\n * What it gives the user (consistent across every tool):\n *   - The hub brand mark — clicking it returns to the hub\n *   - The tool's name — so users know which tool they're in\n *   - The signed-in user (avatar + display name) — clicking opens the hub\n *     account page\n *   - A sign-in CTA when no user is provided\n *\n * What it deliberately does NOT do (per docs/TOOL_CONTRACT.md):\n *   - Provide props to hide the brand mark, tool name, or user/sign-in chip\n *   - Theme the colours away from the hub palette\n *   - Allow the tool to swap the brand text\n *\n * The header is fixed to the top of the viewport at `z-index:\n * var(--okai-z-header)` and is `var(--okai-header-h)` tall. Tools should\n * leave that much top padding on their root layout. The styles live in\n * `@openkeyai/ui/css` — import it once in the tool's global CSS.\n *\n * SSR-safe: pure render, no client-only APIs in the default path.\n */\nexport type HubHeaderUser = {\n  /** Visible label on the chip. */\n  displayName: string;\n  /** Optional avatar; falls back to initials when missing. */\n  avatarUrl?: string | null;\n  /** Used as a tooltip and accessible label. Not displayed. */\n  email?: string;\n};\n\nexport type HubHeaderProps = {\n  /** Display name of the tool. Goes after the divider. */\n  toolName: string;\n  /** Signed-in user, or null/undefined to show the Sign in CTA. */\n  user?: HubHeaderUser | null;\n  /** Override the hub root URL. Defaults to https://openkeyai.com. */\n  hubUrl?: string;\n  /** Optional right-side slot — tool-specific controls (settings, help, …).\n   *  Rendered BEFORE the user chip so the chip always ends the row. */\n  rightSlot?: React.ReactNode;\n  /** Forwarded to the outer <header>. Avoid resetting position/z-index. */\n  className?: string;\n  /** Optional inline style override for the outer <header>. */\n  style?: React.CSSProperties;\n};\n\nconst DEFAULT_HUB_URL = \"https://openkeyai.com\";\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  const first = parts[0];\n  if (!first) return \"?\";\n  if (parts.length === 1) return first.slice(0, 2).toUpperCase();\n  const last = parts[parts.length - 1] ?? first;\n  return ((first[0] ?? \"\") + (last[0] ?? \"\")).toUpperCase() || \"?\";\n}\n\n/**\n * `<HubHeader />` — the mandatory header. See module doc above.\n */\nexport function HubHeader({\n  toolName,\n  user,\n  hubUrl = DEFAULT_HUB_URL,\n  rightSlot,\n  className,\n  style,\n}: HubHeaderProps) {\n  const hubHref = hubUrl;\n  const accountHref = `${hubUrl.replace(/\\/$/, \"\")}/settings/account`;\n  const signInHref = `${hubUrl.replace(/\\/$/, \"\")}/login`;\n\n  return (\n    <header\n      className={\n        className ? `okai-header ${className}` : \"okai-header\"\n      }\n      style={style}\n      role=\"banner\"\n      data-okai-component=\"hub-header\"\n    >\n      <a\n        className=\"okai-header__brand\"\n        href={hubHref}\n        aria-label=\"Open OpenKey AI hub\"\n      >\n        <span className=\"okai-header__brand-mark\" aria-hidden=\"true\" />\n        <span className=\"okai-header__brand-text\">OpenKey AI</span>\n      </a>\n\n      <span className=\"okai-header__divider\" aria-hidden=\"true\" />\n\n      <span className=\"okai-header__tool-name\" title={toolName}>\n        {toolName}\n      </span>\n\n      <span className=\"okai-header__spacer\" aria-hidden=\"true\" />\n\n      {rightSlot != null ? (\n        <div className=\"okai-header__right\">{rightSlot}</div>\n      ) : null}\n\n      {user ? (\n        <a\n          className=\"okai-header__user\"\n          href={accountHref}\n          title={user.email ?? user.displayName}\n          aria-label={`Open account for ${user.displayName}`}\n        >\n          {user.avatarUrl ? (\n            <span\n              className=\"okai-header__user-avatar\"\n              role=\"img\"\n              aria-label={user.displayName}\n              style={{ backgroundImage: `url(${user.avatarUrl})` }}\n            />\n          ) : (\n            <span\n              className=\"okai-header__user-fallback\"\n              aria-hidden=\"true\"\n            >\n              {getInitials(user.displayName)}\n            </span>\n          )}\n          <span className=\"okai-header__user-name\">{user.displayName}</span>\n        </a>\n      ) : (\n        <a\n          className=\"okai-header__signin\"\n          href={signInHref}\n          aria-label=\"Sign in to OpenKey AI\"\n        >\n          Sign in\n        </a>\n      )}\n    </header>\n  );\n}\n","/**\n * `@openkeyai/ui` — public entry.\n *\n * Every OpenKey AI tool installs this package and mounts <HubHeader /> in\n * its root layout. CI in `Scott-Builds-AI/.github` enforces the mounting\n * via an AST scanner (lands in Phase 9).\n *\n * Entry paths:\n *   - \"@openkeyai/ui\"              → React components + their types (this file)\n *   - \"@openkeyai/ui/tokens\"       → Design tokens as a JS object\n *   - \"@openkeyai/ui/tailwind\"     → Tailwind preset\n *   - \"@openkeyai/ui/css\"          → The global stylesheet (CSS custom\n *                                    properties + scoped .okai-* classes).\n *                                    MUST be imported once by the consumer.\n *\n * See README.md for the canonical mounting pattern.\n */\n\nexport { HubHeader } from \"./components/hub-header\";\nexport type {\n  HubHeaderProps,\n  HubHeaderUser,\n} from \"./components/hub-header\";\n\n/** Bumped on each release. Useful for tools to log which UI version they shipped against. */\nexport const UI_VERSION = \"0.1.0\";\n"]}
+{"version":3,"sources":["../src/components/hub-header.tsx","../src/components/button.tsx","../src/components/card.tsx","../src/components/input.tsx","../src/components/badge.tsx","../src/components/stat.tsx","../src/index.ts"],"names":["React2","Button","jsx","cx","React3","Card","Input","Select","Textarea","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\n\n/**\n * Mandatory shared header for every OpenKey AI tool.\n *\n * What it gives the user (consistent across every tool):\n *   - The hub brand mark — clicking it returns to the hub\n *   - The tool's name — so users know which tool they're in\n *   - The signed-in user (avatar + display name) — clicking opens the hub\n *     account page\n *   - A sign-in CTA when no user is provided\n *\n * What it deliberately does NOT do (per docs/TOOL_CONTRACT.md):\n *   - Provide props to hide the brand mark, tool name, or user/sign-in chip\n *   - Theme the colours away from the hub palette\n *   - Allow the tool to swap the brand text\n *\n * The header is fixed to the top of the viewport at `z-index:\n * var(--okai-z-header)` and is `var(--okai-header-h)` tall. Tools should\n * leave that much top padding on their root layout. The styles live in\n * `@openkeyai/ui/css` — import it once in the tool's global CSS.\n *\n * SSR-safe: pure render, no client-only APIs in the default path.\n */\nexport type HubHeaderUser = {\n  /** Visible label on the chip. */\n  displayName: string;\n  /** Optional avatar; falls back to initials when missing. */\n  avatarUrl?: string | null;\n  /** Used as a tooltip and accessible label. Not displayed. */\n  email?: string;\n};\n\nexport type HubHeaderProps = {\n  /** Display name of the tool. Goes after the divider. */\n  toolName: string;\n  /** Signed-in user, or null/undefined to show the Sign in CTA. */\n  user?: HubHeaderUser | null;\n  /** Override the hub root URL. Defaults to https://openkeyai.com. */\n  hubUrl?: string;\n  /** Optional right-side slot — tool-specific controls (settings, help, …).\n   *  Rendered BEFORE the user chip so the chip always ends the row. */\n  rightSlot?: React.ReactNode;\n  /** Forwarded to the outer <header>. Avoid resetting position/z-index. */\n  className?: string;\n  /** Optional inline style override for the outer <header>. */\n  style?: React.CSSProperties;\n};\n\nconst DEFAULT_HUB_URL = \"https://openkeyai.com\";\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  const first = parts[0];\n  if (!first) return \"?\";\n  if (parts.length === 1) return first.slice(0, 2).toUpperCase();\n  const last = parts[parts.length - 1] ?? first;\n  return ((first[0] ?? \"\") + (last[0] ?? \"\")).toUpperCase() || \"?\";\n}\n\n/**\n * `<HubHeader />` — the mandatory header. See module doc above.\n */\nexport function HubHeader({\n  toolName,\n  user,\n  hubUrl = DEFAULT_HUB_URL,\n  rightSlot,\n  className,\n  style,\n}: HubHeaderProps) {\n  const hubHref = hubUrl;\n  const accountHref = `${hubUrl.replace(/\\/$/, \"\")}/settings/account`;\n  const signInHref = `${hubUrl.replace(/\\/$/, \"\")}/login`;\n\n  return (\n    <header\n      className={\n        className ? `okai-header ${className}` : \"okai-header\"\n      }\n      style={style}\n      role=\"banner\"\n      data-okai-component=\"hub-header\"\n    >\n      <a\n        className=\"okai-header__brand\"\n        href={hubHref}\n        aria-label=\"Open OpenKey AI hub\"\n      >\n        <span className=\"okai-header__brand-mark\" aria-hidden=\"true\" />\n        <span className=\"okai-header__brand-text\">OpenKey AI</span>\n      </a>\n\n      <span className=\"okai-header__divider\" aria-hidden=\"true\" />\n\n      <span className=\"okai-header__tool-name\" title={toolName}>\n        {toolName}\n      </span>\n\n      <span className=\"okai-header__spacer\" aria-hidden=\"true\" />\n\n      {rightSlot != null ? (\n        <div className=\"okai-header__right\">{rightSlot}</div>\n      ) : null}\n\n      {user ? (\n        <a\n          className=\"okai-header__user\"\n          href={accountHref}\n          title={user.email ?? user.displayName}\n          aria-label={`Open account for ${user.displayName}`}\n        >\n          {user.avatarUrl ? (\n            <span\n              className=\"okai-header__user-avatar\"\n              role=\"img\"\n              aria-label={user.displayName}\n              style={{ backgroundImage: `url(${user.avatarUrl})` }}\n            />\n          ) : (\n            <span\n              className=\"okai-header__user-fallback\"\n              aria-hidden=\"true\"\n            >\n              {getInitials(user.displayName)}\n            </span>\n          )}\n          <span className=\"okai-header__user-name\">{user.displayName}</span>\n        </a>\n      ) : (\n        <a\n          className=\"okai-header__signin\"\n          href={signInHref}\n          aria-label=\"Sign in to OpenKey AI\"\n        >\n          Sign in\n        </a>\n      )}\n    </header>\n  );\n}\n","import * as React from \"react\";\n\n/**\n * `<Button>` — base interaction primitive.\n *\n * Five variants × three sizes:\n *   - `primary` — solid brand fill. Default CTAs.\n *   - `secondary` — outlined. Pair with a primary, never alone as the\n *     only action on a surface.\n *   - `tonal` — Material 3 tonal: brand-tinted container with\n *     readable foreground. Use for emphasised non-primary actions.\n *   - `text` — no border, no fill. Inline links inside dense UI.\n *   - `destructive` — danger color. Confirm-destruction dialogs.\n *\n * Pass `iconOnly` for square aspect-ratio buttons (toolbars, icon\n * pills). The label slot still acts as the accessible name.\n *\n * Renders a real `<button>` by default — pass `asChild` to render the\n * children as the root element (e.g. `<Link>` from your router).\n */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tonal\"\n  | \"text\"\n  | \"destructive\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type ButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\"\n> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Square button with no horizontal padding — children should be a single icon. */\n  iconOnly?: boolean;\n  /** Additional className stacked on top of `okai-btn` modifiers. */\n  className?: string;\n};\n\nconst cx = (...parts: Array<string | false | null | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"md\",\n      iconOnly = false,\n      className,\n      type = \"button\",\n      ...rest\n    },\n    ref,\n  ) {\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={cx(\n          \"okai-btn\",\n          `okai-btn--${variant}`,\n          `okai-btn--${size}`,\n          iconOnly && \"okai-btn--icon\",\n          className,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\n","import * as React from \"react\";\n\n/**\n * `<Card>` — surface primitive.\n *\n * Four elevation levels matching the hub's Material 3 tonal model:\n *\n *   - `0` — flat, inline with the page. No border, no shadow.\n *   - `1` — default card. Single subtle shadow + surface lift.\n *   - `2` — nested cards (inside another card). Stronger surface lift.\n *   - `3` — floating elements (popovers, toasts). Visible shadow.\n *\n * `interactive` makes the card hover-aware (cursor pointer + background\n * shift). Wrap a router `<Link>` around it for click-through cards, or\n * use the `as` prop to render a custom element.\n */\nexport type CardLevel = 0 | 1 | 2 | 3;\n\nexport type CardProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"className\"\n> & {\n  level?: CardLevel;\n  interactive?: boolean;\n  className?: string;\n};\n\nconst cx = (...parts: Array<string | false | null | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { level = 1, interactive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        \"okai-card\",\n        `okai-card--level-${level}`,\n        interactive && \"okai-card--interactive\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n","import * as React from \"react\";\n\n/**\n * Form controls — `<Input>`, `<Select>`, `<Textarea>`.\n *\n * Plain forwardable wrappers around the native elements with the\n * matching `okai-*` class. Use `mono` on `<Input>` for monospace fields\n * (slugs, ids, tokens).\n *\n * Validation + accessible labels are the consumer's responsibility — we\n * don't ship a `<Form />` wrapper.\n */\n\nconst cx = (...parts: Array<string | false | null | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport type InputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"className\"\n> & {\n  className?: string;\n  /** Use monospace face — for slugs, ids, tokens. */\n  mono?: boolean;\n};\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input({ className, mono, ...rest }, ref) {\n    return (\n      <input\n        ref={ref}\n        className={cx(\"okai-input\", mono && \"okai-input--mono\", className)}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type SelectProps = Omit<\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  function Select({ className, ...rest }, ref) {\n    return (\n      <select ref={ref} className={cx(\"okai-select\", className)} {...rest} />\n    );\n  },\n);\n\nexport type TextareaProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea({ className, ...rest }, ref) {\n    return (\n      <textarea\n        ref={ref}\n        className={cx(\"okai-textarea\", className)}\n        {...rest}\n      />\n    );\n  },\n);\n","import * as React from \"react\";\n\n/**\n * `<Badge>` — pill for status, tags, identifiers.\n *\n * Six variants:\n *   - `default` — neutral grey tint\n *   - `brand` — brand-tinted (Material 3 container surface)\n *   - `success` — sage. \\\"Operational\\\", \\\"Approved\\\".\n *   - `warning` — amber. \\\"Monitoring\\\", \\\"Pending review\\\".\n *   - `danger` — coral. \\\"Failed\\\", \\\"Suspended\\\".\n *   - `monitoring` — slightly softer warning. \\\"Watching\\\".\n */\nexport type BadgeVariant =\n  | \"default\"\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"monitoring\";\n\nexport type BadgeProps = Omit<\n  React.HTMLAttributes<HTMLSpanElement>,\n  \"className\"\n> & {\n  variant?: BadgeVariant;\n  className?: string;\n};\n\nconst cx = (...parts: Array<string | false | null | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport function Badge({\n  variant = \"default\",\n  className,\n  ...rest\n}: BadgeProps) {\n  return (\n    <span\n      className={cx(\"okai-badge\", `okai-badge--${variant}`, className)}\n      {...rest}\n    />\n  );\n}\n","import * as React from \"react\";\n\n/**\n * `<Stat>` — big numeric value + tiny uppercase label.\n *\n * Used in tool-owner dashboards, /status pages, admin counters. The\n * value renders in monospace + tabular-nums so digits don't shift\n * when the number ticks.\n *\n *   <Stat label=\"Subscribers\" value=\"1,284\" />\n *   <Stat label=\"Active 30d\" value=\"98\" sub=\"across 12 tools\" />\n *   <Stat label=\"MRR\" value=\"£3,852\" icon={<TrendingUp />} />\n */\nexport type StatProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"className\" | \"children\"\n> & {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  /** Optional smaller line under the value. */\n  sub?: React.ReactNode;\n  /** Optional icon rendered before the label. */\n  icon?: React.ReactNode;\n  className?: string;\n};\n\nconst cx = (...parts: Array<string | false | null | undefined>) =>\n  parts.filter(Boolean).join(\" \");\n\nexport function Stat({\n  label,\n  value,\n  sub,\n  icon,\n  className,\n  ...rest\n}: StatProps) {\n  return (\n    <div className={cx(\"okai-stat\", className)} {...rest}>\n      <span className=\"okai-stat__label\">\n        {icon ? <span aria-hidden>{icon}</span> : null}\n        {label}\n      </span>\n      <span className=\"okai-stat__value\">{value}</span>\n      {sub ? <span className=\"okai-stat__sub\">{sub}</span> : null}\n    </div>\n  );\n}\n","/**\n * `@openkeyai/ui` — public entry.\n *\n * Every OpenKey AI tool installs this package and mounts <HubHeader /> in\n * its root layout. CI enforces the mounting via an AST scanner\n * (see Phase 9 in the hub's BUILD_PLAN.md).\n *\n * **v1.0.0** — Major version. Palette swap (cool indigo → warm coral),\n * Material 3 elevation, light + dark themes, Roboto Flex display, plus\n * base components: `<Button>`, `<Card>`, `<Input>`, `<Select>`,\n * `<Textarea>`, `<Badge>`, `<Stat>`. Existing v0.x token NAMES are\n * preserved — only color values shifted.\n *\n * Entry paths:\n *   - \"@openkeyai/ui\"              → React components + their types (this file)\n *   - \"@openkeyai/ui/tokens\"       → Design tokens as a JS object\n *                                    (dark + light + shared)\n *   - \"@openkeyai/ui/tailwind\"     → Tailwind preset\n *   - \"@openkeyai/ui/css\"          → The global stylesheet (CSS custom\n *                                    properties + scoped .okai-* classes).\n *                                    MUST be imported once by the consumer.\n *\n * See README.md for the canonical mounting pattern + migration guide.\n */\n\nexport { HubHeader } from \"./components/hub-header\";\nexport type {\n  HubHeaderProps,\n  HubHeaderUser,\n} from \"./components/hub-header\";\n\nexport { Button } from \"./components/button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./components/button\";\n\nexport { Card } from \"./components/card\";\nexport type { CardLevel, CardProps } from \"./components/card\";\n\nexport { Input, Select, Textarea } from \"./components/input\";\nexport type {\n  InputProps,\n  SelectProps,\n  TextareaProps,\n} from \"./components/input\";\n\nexport { Badge } from \"./components/badge\";\nexport type { BadgeProps, BadgeVariant } from \"./components/badge\";\n\nexport { Stat } from \"./components/stat\";\nexport type { StatProps } from \"./components/stat\";\n\n/** Bumped on each release. Useful for tools to log which UI version they shipped against. */\nexport const UI_VERSION = \"1.0.0\";\n"]}

package/dist/styles.css

@@ -20,17 +20,29 @@
  * ============================================================================= */
 
 :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;
+  /* ─── Colors — DARK (default) ──────────────────────────────────────────
+   * v1.0.0 palette swap: cool indigo-violet → warm coral. Material 3
+   * key-color + Claude-warm anchors. See README for migration map. */
+  --okai-color-bg: oklch(0.13 0.008 35);
+  --okai-color-surface: oklch(0.17 0.010 35);
+  --okai-color-surface-1: oklch(0.17 0.010 35);
+  --okai-color-surface-2: oklch(0.21 0.012 35);
+  --okai-color-surface-3: oklch(0.25 0.014 35);
+  --okai-color-surface-4: oklch(0.29 0.016 35);
+  --okai-color-surface-raised: oklch(0.21 0.012 35);
+  --okai-color-foreground: oklch(0.96 0.005 35);
+  --okai-color-foreground-muted: oklch(0.74 0.008 35);
+  --okai-color-foreground-subtle: oklch(0.58 0.010 35);
+  --okai-color-border: oklch(1 0 0 / 0.08);
+  --okai-color-border-strong: oklch(1 0 0 / 0.14);
+  --okai-color-accent: oklch(0.76 0.17 35);
+  --okai-color-accent-bright: oklch(0.82 0.17 35);
+  --okai-color-accent-container: oklch(0.30 0.13 28 / 0.25);
+  --okai-color-on-accent-container: oklch(0.88 0.085 35);
+  --okai-color-on-accent: oklch(0.13 0.008 35);
+  --okai-color-destructive: oklch(0.74 0.18 28);
+  --okai-color-success: oklch(0.84 0.08 150);
+  --okai-color-warning: oklch(0.88 0.12 80);
 
   /* ─── Spacing (4px base) ─────────────────────────────────────────────── */
   --okai-space-px: 1px;
@@ -47,12 +59,14 @@
   --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;
+  /* ─── Radius — Material 3 shape scale ──────────────────────────────────
+   * Generous radii, predictable family. One radius per element. */
+  --okai-radius-xs: 6px;
+  --okai-radius-sm: 10px;
+  --okai-radius-md: 14px;
+  --okai-radius-lg: 20px;
+  --okai-radius-xl: 28px;
+  --okai-radius-2xl: 36px;
   --okai-radius-full: 9999px;
 
   /* ─── Typography ─────────────────────────────────────────────────────── */
@@ -60,27 +74,39 @@
     BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --okai-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
     Consolas, "Liberation Mono", monospace;
+  /* Display — Roboto Flex via consumer-loaded next/font. Falls back to
+     the body sans if the consumer hasn't wired --font-display. */
+  --okai-font-display: var(--font-display, Geist, ui-sans-serif, system-ui, sans-serif);
   --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-fs-2xl: 28px;
+  --okai-fs-3xl: 36px;
+  --okai-fs-4xl: 48px;
+  --okai-fs-display: 60px;
+  --okai-lh-display: 1.05;
   --okai-lh-tight: 1.2;
   --okai-lh-normal: 1.5;
+  --okai-lh-relaxed: 1.65;
 
-  /* ─── 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);
+  /* ─── Shadows ──────────────────────────────────────────────────────────
+   * Dark mode: lighter shadows; surface lift carries hierarchy. */
+  --okai-shadow-sm:
+    0 1px 0 oklch(1 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.20);
+  --okai-shadow-md:
+    0 1px 0 oklch(1 0 0 / 0.05), 0 12px 28px oklch(0 0 0 / 0.30);
+  --okai-shadow-lg:
+    0 1px 0 oklch(1 0 0 / 0.06), 0 24px 56px oklch(0 0 0 / 0.38);
 
-  /* ─── Motion ─────────────────────────────────────────────────────────── */
-  --okai-ease: cubic-bezier(0.4, 0, 0.2, 1);
-  --okai-dur-fast: 120ms;
-  --okai-dur-normal: 180ms;
-  --okai-dur-slow: 260ms;
+  /* ─── Motion — Material 3 easing + duration ────────────────────────── */
+  --okai-ease: cubic-bezier(0.2, 0.0, 0.0, 1.0);
+  --okai-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
+  --okai-dur-fast: 160ms;
+  --okai-dur-normal: 280ms;
+  --okai-dur-slow: 400ms;
 
   /* ─── Z-index ────────────────────────────────────────────────────────── */
   --okai-z-base: 0;
@@ -95,6 +121,62 @@
   --okai-header-h: 56px;
 }
 
+/* ─── Light theme — opt-in by setting <html data-theme="light">. ────────
+ *
+ * Warm off-white surfaces (Claude-inspired). Real soft shadows because
+ * surface lift no longer carries hierarchy in light mode.
+ */
+:where(:root[data-theme="light"]) {
+  --okai-color-bg: oklch(0.985 0.005 35);
+  --okai-color-surface: oklch(1 0 0);
+  --okai-color-surface-1: oklch(1 0 0);
+  --okai-color-surface-2: oklch(0.96 0.006 35);
+  --okai-color-surface-3: oklch(0.93 0.008 35);
+  --okai-color-surface-4: oklch(0.90 0.010 35);
+  --okai-color-surface-raised: oklch(0.96 0.006 35);
+  --okai-color-foreground: oklch(0.18 0.012 35);
+  --okai-color-foreground-muted: oklch(0.42 0.012 50);
+  --okai-color-foreground-subtle: oklch(0.58 0.010 50);
+  --okai-color-border: oklch(0 0 0 / 0.08);
+  --okai-color-border-strong: oklch(0 0 0 / 0.16);
+  --okai-color-accent: oklch(0.64 0.21 30);
+  --okai-color-accent-bright: oklch(0.56 0.20 28);
+  --okai-color-accent-container: oklch(0.93 0.045 35);
+  --okai-color-on-accent-container: oklch(0.30 0.13 28);
+  --okai-color-on-accent: oklch(1 0 0);
+  --okai-color-destructive: oklch(0.55 0.21 28);
+  --okai-color-success: oklch(0.52 0.10 150);
+  --okai-color-warning: oklch(0.60 0.15 70);
+
+  /* Real shadow in light mode. */
+  --okai-shadow-sm:
+    0 1px 2px oklch(0.13 0.008 35 / 0.06),
+    0 4px 12px oklch(0.13 0.008 35 / 0.06);
+  --okai-shadow-md:
+    0 2px 4px oklch(0.13 0.008 35 / 0.08),
+    0 12px 28px oklch(0.13 0.008 35 / 0.10);
+  --okai-shadow-lg:
+    0 4px 8px oklch(0.13 0.008 35 / 0.10),
+    0 24px 56px oklch(0.13 0.008 35 / 0.14);
+}
+
+/* Reduce motion respects user preference across the system. */
+@media (prefers-reduced-motion: reduce) {
+  :where(:root) {
+    --okai-dur-fast: 0ms;
+    --okai-dur-normal: 0ms;
+    --okai-dur-slow: 0ms;
+  }
+}
+
+/* ─── Display font utility ──────────────────────────────────────────────
+ * Drop on hero headlines for the Material display character. */
+.okai-display {
+  font-family: var(--okai-font-display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
 /* =============================================================================
  * HubHeader
  *
@@ -306,3 +388,244 @@
     padding: var(--okai-space-1);
   }
 }
+
+/* =============================================================================
+ * Base components (v1.0.0)
+ *
+ * Every component renders with a single root class `okai-<comp>` + variant
+ * modifiers `okai-<comp>--<variant>`. Consumers can layer their own
+ * className on top — the base styles use low specificity so they're
+ * easy to override per-tool.
+ * ============================================================================= */
+
+/* ─── Button ──────────────────────────────────────────────────────────── */
+
+.okai-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--okai-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--okai-radius-md);
+  padding: 0 var(--okai-space-4);
+  height: 38px;
+  font-family: var(--okai-font-sans);
+  font-size: var(--okai-fs-sm);
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--okai-dur-fast) var(--okai-ease),
+    border-color var(--okai-dur-fast) var(--okai-ease),
+    color var(--okai-dur-fast) var(--okai-ease),
+    transform var(--okai-dur-fast) var(--okai-ease);
+}
+.okai-btn:focus-visible {
+  outline: 2px solid var(--okai-color-accent-bright);
+  outline-offset: 2px;
+}
+.okai-btn:disabled,
+.okai-btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Sizes */
+.okai-btn--sm { height: 30px; padding: 0 var(--okai-space-3); font-size: var(--okai-fs-xs); }
+.okai-btn--md { /* default */ }
+.okai-btn--lg { height: 46px; padding: 0 var(--okai-space-5); font-size: var(--okai-fs-base); }
+
+/* Variants */
+.okai-btn--primary {
+  background: var(--okai-color-accent);
+  color: var(--okai-color-on-accent);
+}
+.okai-btn--primary:hover { background: var(--okai-color-accent-bright); }
+
+.okai-btn--secondary {
+  background: transparent;
+  color: var(--okai-color-foreground);
+  border-color: var(--okai-color-border-strong);
+}
+.okai-btn--secondary:hover {
+  background: color-mix(in srgb, var(--okai-color-foreground) 6%, transparent);
+}
+
+.okai-btn--tonal {
+  background: var(--okai-color-accent-container);
+  color: var(--okai-color-on-accent-container);
+}
+.okai-btn--tonal:hover {
+  background: color-mix(in srgb, var(--okai-color-accent) 18%, transparent);
+}
+
+.okai-btn--text {
+  background: transparent;
+  color: var(--okai-color-foreground-muted);
+}
+.okai-btn--text:hover {
+  background: color-mix(in srgb, var(--okai-color-foreground) 6%, transparent);
+  color: var(--okai-color-foreground);
+}
+
+.okai-btn--destructive {
+  background: var(--okai-color-destructive);
+  color: oklch(1 0 0);
+}
+.okai-btn--destructive:hover {
+  filter: brightness(1.06);
+}
+
+/* Icon-only square button — square ratio, padding zeroed. */
+.okai-btn--icon { padding: 0; aspect-ratio: 1 / 1; }
+
+
+/* ─── Card ────────────────────────────────────────────────────────────── */
+
+.okai-card {
+  background: var(--okai-color-surface-1);
+  color: var(--okai-color-foreground);
+  border: 1px solid var(--okai-color-border);
+  border-radius: var(--okai-radius-lg);
+  padding: var(--okai-space-5);
+  box-shadow: none;
+}
+.okai-card--level-0 { background: transparent; border-color: transparent; padding: 0; }
+.okai-card--level-1 { box-shadow: var(--okai-shadow-sm); }
+.okai-card--level-2 {
+  background: var(--okai-color-surface-2);
+  box-shadow: var(--okai-shadow-md);
+}
+.okai-card--level-3 {
+  background: var(--okai-color-surface-3);
+  box-shadow: var(--okai-shadow-lg);
+}
+
+/* Optional interactive card variant — hover lifts. */
+.okai-card--interactive {
+  transition:
+    background-color var(--okai-dur-fast) var(--okai-ease),
+    border-color var(--okai-dur-fast) var(--okai-ease),
+    transform var(--okai-dur-fast) var(--okai-ease);
+  cursor: pointer;
+}
+.okai-card--interactive:hover {
+  background: var(--okai-color-surface-2);
+  border-color: var(--okai-color-border-strong);
+}
+
+
+/* ─── Input / Select / Textarea ────────────────────────────────────────── */
+
+.okai-input,
+.okai-select,
+.okai-textarea {
+  display: block;
+  width: 100%;
+  background: var(--okai-color-surface);
+  color: var(--okai-color-foreground);
+  border: 1px solid var(--okai-color-border-strong);
+  border-radius: var(--okai-radius-sm);
+  padding: var(--okai-space-2) var(--okai-space-3);
+  font-family: var(--okai-font-sans);
+  font-size: var(--okai-fs-sm);
+  line-height: var(--okai-lh-normal);
+  transition: border-color var(--okai-dur-fast) var(--okai-ease),
+    box-shadow var(--okai-dur-fast) var(--okai-ease);
+  -webkit-appearance: none;
+  appearance: none;
+}
+.okai-input::placeholder,
+.okai-textarea::placeholder {
+  color: var(--okai-color-foreground-subtle);
+}
+.okai-input:focus-visible,
+.okai-select:focus-visible,
+.okai-textarea:focus-visible {
+  outline: none;
+  border-color: var(--okai-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--okai-color-accent) 25%, transparent);
+}
+.okai-input:disabled,
+.okai-select:disabled,
+.okai-textarea:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.okai-textarea { min-height: 96px; resize: vertical; }
+.okai-input--mono { font-family: var(--okai-font-mono); }
+
+
+/* ─── Badge ──────────────────────────────────────────────────────────── */
+
+.okai-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--okai-space-1);
+  padding: var(--okai-space-0_5) var(--okai-space-2);
+  border-radius: var(--okai-radius-full);
+  font-family: var(--okai-font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.4;
+}
+.okai-badge--default {
+  background: color-mix(in srgb, var(--okai-color-foreground) 10%, transparent);
+  color: var(--okai-color-foreground-muted);
+}
+.okai-badge--brand {
+  background: var(--okai-color-accent-container);
+  color: var(--okai-color-on-accent-container);
+}
+.okai-badge--success {
+  background: color-mix(in srgb, var(--okai-color-success) 20%, transparent);
+  color: var(--okai-color-success);
+}
+.okai-badge--warning {
+  background: color-mix(in srgb, var(--okai-color-warning) 22%, transparent);
+  color: var(--okai-color-warning);
+}
+.okai-badge--danger {
+  background: color-mix(in srgb, var(--okai-color-destructive) 22%, transparent);
+  color: var(--okai-color-destructive);
+}
+.okai-badge--monitoring {
+  background: color-mix(in srgb, var(--okai-color-warning) 18%, transparent);
+  color: var(--okai-color-warning);
+}
+
+
+/* ─── Stat ────────────────────────────────────────────────────────────── */
+
+.okai-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--okai-space-1);
+}
+.okai-stat__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--okai-space-1_5);
+  font-family: var(--okai-font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--okai-color-foreground-muted);
+}
+.okai-stat__value {
+  font-family: var(--okai-font-mono);
+  font-size: var(--okai-fs-2xl);
+  font-weight: 600;
+  line-height: var(--okai-lh-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--okai-color-foreground);
+}
+.okai-stat__sub {
+  font-size: var(--okai-fs-xs);
+  color: var(--okai-color-foreground-subtle);
+}