@odla-ai/ui 0.1.0

package/css/components/nav.css

@@ -0,0 +1,96 @@
+/* @odla-ai/ui — navigation & layout chrome */
+
+/* App shell: fixed sidebar + content column. */
+.layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  min-height: 100vh;
+}
+.sidebar {
+  background: var(--ui-surface);
+  border-right: 1px solid var(--ui-border);
+  padding: var(--ui-space-4);
+}
+.main { padding: var(--ui-space-5) var(--ui-space-6); max-width: 1100px; min-width: 0; }
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--ui-space-4);
+}
+.head h2 { margin: 0; font-weight: 700; }
+.brand {
+  font-family: var(--ui-font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 18px;
+  margin-bottom: var(--ui-space-4);
+}
+.brand small { color: var(--ui-text-muted); font-weight: 500; }
+
+/* Sidebar nav entry (button or link). */
+.navitem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  font-weight: 600;
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  padding: 8px 10px;
+  margin-bottom: var(--ui-space-2);
+  cursor: pointer;
+  text-decoration: none;
+}
+.navitem:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.navitem.active {
+  background: var(--ui-accent-soft);
+  border-color: var(--ui-accent);
+  color: var(--ui-accent-strong);
+}
+
+/* Content containers. */
+.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--ui-space-4); }
+.wrap.narrow { max-width: 640px; }
+
+/* Utility row + muted text (ubiquitous in app chrome). */
+.row { display: flex; gap: var(--ui-space-2); align-items: center; }
+.muted { color: var(--ui-text-muted); }
+
+/* Off-canvas drawer. Toggle .open on both drawer and overlay. */
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(340px, 88vw);
+  background: var(--ui-surface);
+  border-left: 1px solid var(--ui-border);
+  padding: var(--ui-space-4);
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  z-index: 1001;
+}
+.drawer.open { transform: translateX(0); }
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+  z-index: 1000;
+}
+.drawer-overlay.open { opacity: 1; pointer-events: auto; }
+
+/* Page footer strip. */
+.footer {
+  border-top: 1px solid var(--ui-border);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-text-sm);
+  padding: var(--ui-space-5) 0;
+  margin-top: var(--ui-space-7);
+}

package/css/components/table.css

@@ -0,0 +1,34 @@
+/* @odla-ai/ui — data tables
+   `.table` is the class equivalent of a themed bare <table>.
+   Wrap in `.table-wrap` for scroll + sticky header. */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ui-text-md);
+}
+.table td,
+.table th {
+  text-align: left;
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--ui-border);
+}
+.table th { color: var(--ui-text-muted); font-weight: 600; }
+.table td { font-variant-numeric: tabular-nums; }
+
+/* Scroll container; header sticks against the sunken surface. */
+.table-wrap { overflow: auto; max-height: 420px; }
+.table-wrap .table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--ui-surface-2);
+  z-index: 1;
+}
+
+/* Signed values. */
+.table .pos { color: var(--ui-good); }
+.table .neg { color: var(--ui-danger); }
+
+/* Inline-editable cells (data browsers). */
+.table td.editable { cursor: text; }
+.table td.editable:hover { background: var(--ui-accent-soft); }

package/css/tokens.css

@@ -0,0 +1,138 @@
+/* ══════════════════════════════════════════════════════════════
+   @odla-ai/ui — token defaults
+   Every block is wrapped in :where() so it has ZERO specificity:
+   a theme's plain `:root { … }` definitions always win, regardless
+   of stylesheet load order. Without a theme, these neutral values
+   (grayscale + restrained blue) render sanely on their own.
+   Contract data lives in js/tokens.js; themes map their palettes
+   onto the required tier in themes/<name>/ui.css.
+   ══════════════════════════════════════════════════════════════ */
+
+:where(:root) {
+  /* ─── Required tier: neutral fallbacks (themes override all of these) ─── */
+  --ui-bg: #f7f7f5;
+  --ui-surface: #ffffff;
+  --ui-surface-2: #efefec;
+  --ui-text: #24272b;
+  --ui-text-muted: #64686e;
+  --ui-text-faint: #9b9fa6;
+  --ui-border: #dfe0dc;
+  --ui-border-strong: #b9bbb5;
+  --ui-accent: #3b5e8c;
+  --ui-accent-strong: #2e4a70;
+  --ui-accent-soft: rgba(59, 94, 140, 0.1);
+  --ui-on-accent: #ffffff;
+  --ui-good: #4a7c59;
+  --ui-good-soft: rgba(74, 124, 89, 0.12);
+  --ui-warn: #a07d2e;
+  --ui-warn-soft: rgba(160, 125, 46, 0.12);
+  --ui-danger: #a8433a;
+  --ui-danger-soft: rgba(168, 67, 58, 0.1);
+  --ui-code-bg: #efefec;
+  --ui-code-text: #33363b;
+  --ui-shadow: 0 1px 2px rgba(36, 39, 43, 0.04), 0 8px 24px rgba(36, 39, 43, 0.06);
+  --ui-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --ui-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --ui-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* ─── Defaulted tier: universal scales ─── */
+  --ui-space-1: 4px;
+  --ui-space-2: 8px;
+  --ui-space-3: 12px;
+  --ui-space-4: 16px;
+  --ui-space-5: 24px;
+  --ui-space-6: 32px;
+  --ui-space-7: 48px;
+  --ui-space-8: 64px;
+  --ui-radius-sm: 4px;
+  --ui-radius-md: 7px;
+  --ui-radius-lg: 10px;
+  --ui-radius-pill: 999px;
+  --ui-text-xs: 11px;
+  --ui-text-sm: 12px;
+  --ui-text-md: 13px;
+  --ui-text-lg: 15px;
+  --ui-tracking-caps: 0.06em;
+  --ui-focus: 0 0 0 3px var(--ui-accent-soft);
+
+  /* ─── Chart roles (derived; themes may override for richer palettes) ─── */
+  --ui-chart-1: var(--ui-accent);
+  --ui-chart-2: var(--ui-good);
+  --ui-chart-3: var(--ui-warn);
+  --ui-chart-4: var(--ui-danger);
+  --ui-chart-5: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-text));
+  --ui-chart-6: var(--ui-text-faint);
+  --ui-chart-grid: color-mix(in srgb, var(--ui-text) 8%, transparent);
+  --ui-chart-grid-zero: color-mix(in srgb, var(--ui-text) 22%, transparent);
+  --ui-chart-axis: var(--ui-text-muted);
+  --ui-chart-axis-faint: var(--ui-text-faint);
+  --ui-chart-band: color-mix(in srgb, var(--ui-accent) 10%, transparent);
+  --ui-chart-band-strong: color-mix(in srgb, var(--ui-accent) 22%, transparent);
+  --ui-chart-pos: var(--ui-good);
+  --ui-chart-neg: var(--ui-danger);
+  --ui-chart-tip-bg: color-mix(in srgb, var(--ui-text) 92%, transparent);
+  --ui-chart-tip-text: var(--ui-bg);
+  --ui-chart-dot-stroke: var(--ui-bg);
+
+  /* ─── Chat roles (derived) ─── */
+  --ui-chat-user-bg: var(--ui-accent-soft);
+  --ui-chat-user-text: var(--ui-text);
+  --ui-chat-assistant-bg: var(--ui-surface);
+  --ui-chat-thinking-bg: var(--ui-surface-2);
+  --ui-chat-thinking-text: var(--ui-text-muted);
+  --ui-chat-tool-accent: var(--ui-accent);
+}
+
+/* Neutral dark fallbacks — only the required tier changes; the derived
+   tiers track it automatically via var()/color-mix(). Themes that define
+   their own dark palettes override these the same zero-specificity way. */
+:where([data-theme="dark"]) {
+  --ui-bg: #17181b;
+  --ui-surface: #1f2125;
+  --ui-surface-2: #26282d;
+  --ui-text: #e6e6e3;
+  --ui-text-muted: #a2a6ad;
+  --ui-text-faint: #6f737a;
+  --ui-border: #33363c;
+  --ui-border-strong: #4a4e56;
+  --ui-accent: #7ba1d4;
+  --ui-accent-strong: #97b7e2;
+  --ui-accent-soft: rgba(123, 161, 212, 0.14);
+  --ui-on-accent: #14161a;
+  --ui-good: #7fae8e;
+  --ui-good-soft: rgba(127, 174, 142, 0.14);
+  --ui-warn: #c5a75e;
+  --ui-warn-soft: rgba(197, 167, 94, 0.14);
+  --ui-danger: #cf7a72;
+  --ui-danger-soft: rgba(207, 122, 114, 0.14);
+  --ui-code-bg: #26282d;
+  --ui-code-text: #d4d5d2;
+  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) {
+    --ui-bg: #17181b;
+    --ui-surface: #1f2125;
+    --ui-surface-2: #26282d;
+    --ui-text: #e6e6e3;
+    --ui-text-muted: #a2a6ad;
+    --ui-text-faint: #6f737a;
+    --ui-border: #33363c;
+    --ui-border-strong: #4a4e56;
+    --ui-accent: #7ba1d4;
+    --ui-accent-strong: #97b7e2;
+    --ui-accent-soft: rgba(123, 161, 212, 0.14);
+    --ui-on-accent: #14161a;
+    --ui-good: #7fae8e;
+    --ui-good-soft: rgba(127, 174, 142, 0.14);
+    --ui-warn: #c5a75e;
+    --ui-warn-soft: rgba(197, 167, 94, 0.14);
+    --ui-danger: #cf7a72;
+    --ui-danger-soft: rgba(207, 122, 114, 0.14);
+    --ui-code-bg: #26282d;
+    --ui-code-text: #d4d5d2;
+    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    variant?: ButtonVariant;
+    mini?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FieldProps extends ComponentPropsWithoutRef<"div"> {
+    label?: ReactNode;
+    htmlFor?: string;
+    error?: ReactNode;
+    hint?: ReactNode;
+    children?: ReactNode;
+}
+declare function Field({ label, htmlFor, error, hint, children, className, ...rest }: FieldProps): react.JSX.Element;
+
+interface InputProps extends ComponentPropsWithoutRef<"input"> {
+    invalid?: boolean;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SelectOption {
+    value: string;
+    label?: string;
+}
+interface SelectProps extends ComponentPropsWithoutRef<"select"> {
+    invalid?: boolean;
+    /** Shorthand for simple value/label option lists; children win if present. */
+    options?: SelectOption[];
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends ComponentPropsWithoutRef<"input"> {
+    label?: ReactNode;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
+    invalid?: boolean;
+    /** Body-font textarea for prose; default is mono (data/config editing). */
+    prose?: boolean;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare function cx(...parts: Array<string | false | null | undefined>): string;
+
+export { Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, Field, type FieldProps, Input, type InputProps, Select, type SelectOption, type SelectProps, Textarea, type TextareaProps, cx };

package/dist/index.js

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/button.tsx
+
+// src/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var Button = forwardRef(function Button2({ variant = "primary", mini, className, type = "button", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cx("btn", variant !== "primary" && variant, mini && "mini", className),
+      ...rest
+    }
+  );
+});
+function Field({ label, htmlFor, error, hint, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("field", className), ...rest, children: [
+    label != null && /* @__PURE__ */ jsx("label", { className: "field-label", htmlFor, children: label }),
+    children,
+    error != null && /* @__PURE__ */ jsx("p", { className: "field-error", children: error }),
+    error == null && hint != null && /* @__PURE__ */ jsx("p", { className: "field-hint", children: hint })
+  ] });
+}
+var Input = forwardRef(function Input2({ invalid, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: cx("input", invalid && "invalid", className),
+      "aria-invalid": invalid || void 0,
+      ...rest
+    }
+  );
+});
+var Select = forwardRef(function Select2({ invalid, options, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      ref,
+      className: cx("select", invalid && "invalid", className),
+      "aria-invalid": invalid || void 0,
+      ...rest,
+      children: children ?? options?.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label ?? o.value }, o.value))
+    }
+  );
+});
+var Checkbox = forwardRef(function Checkbox2({ label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs("label", { className: cx("check", className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", ...rest }),
+    label != null && /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+});
+var Textarea = forwardRef(function Textarea2({ invalid, prose, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      className: cx("textarea", prose && "prose-input", invalid && "invalid", className),
+      "aria-invalid": invalid || void 0,
+      ...rest
+    }
+  );
+});
+
+export { Button, Checkbox, Field, Input, Select, Textarea, cx };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cx.ts","../src/button.tsx","../src/field.tsx","../src/input.tsx","../src/select.tsx","../src/checkbox.tsx","../src/textarea.tsx"],"names":["Button","jsx","forwardRef","Input","Select","Checkbox","jsxs","Textarea"],"mappings":";;;;;;AAAO,SAAS,MAAM,KAAA,EAAyD;AAC7E,EAAA,OAAO,KAAA,CAAM,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACvC;ACSO,IAAM,MAAA,GAAS,UAAA,CAA2C,SAASA,OAAAA,CACxE,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,EAAM,SAAA,EAAW,IAAA,GAAO,QAAA,EAAU,GAAG,IAAA,IAC5D,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,GAAG,KAAA,EAAO,OAAA,KAAY,aAAa,OAAA,EAAS,IAAA,IAAQ,QAAQ,SAAS,CAAA;AAAA,MAC/E,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;ACVM,SAAS,KAAA,CAAM,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,MAAM,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAAe;AAC/F,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,SAAS,SAAS,CAAA,EAAI,GAAG,IAAA,EACzC,QAAA,EAAA;AAAA,IAAA,KAAA,IAAS,wBACRC,GAAAA,CAAC,WAAM,SAAA,EAAU,aAAA,EAAc,SAC5B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IAED,QAAA;AAAA,IACA,SAAS,IAAA,oBAAQA,IAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACnD,KAAA,IAAS,QAAQ,IAAA,IAAQ,IAAA,oBAAQA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,YAAA,EAAc,QAAA,EAAA,IAAA,EAAK;AAAA,GAAA,EACpE,CAAA;AAEJ;ACnBO,IAAM,KAAA,GAAQC,UAAAA,CAAyC,SAASC,MAAAA,CACrE,EAAE,SAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EAC9B,GAAA,EACA;AACA,EAAA,uBACEF,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,OAAA,EAAS,OAAA,IAAW,WAAW,SAAS,CAAA;AAAA,MACtD,gBAAc,OAAA,IAAW,MAAA;AAAA,MACxB,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;ACLM,IAAM,MAAA,GAASC,UAAAA,CAA2C,SAASE,OAAAA,CACxE,EAAE,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,EAAK,EACjD,GAAA,EACA;AACA,EAAA,uBACEH,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,OAAA,IAAW,WAAW,SAAS,CAAA;AAAA,MACvD,gBAAc,OAAA,IAAW,MAAA;AAAA,MACxB,GAAG,IAAA;AAAA,MAEH,sBACC,OAAA,EAAS,GAAA,CAAI,CAAC,CAAA,qBACZA,GAAAA,CAAC,QAAA,EAAA,EAAqB,KAAA,EAAO,CAAA,CAAE,OAC5B,QAAA,EAAA,CAAA,CAAE,KAAA,IAAS,EAAE,KAAA,EAAA,EADH,CAAA,CAAE,KAEf,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;ACzBM,IAAM,QAAA,GAAWC,UAAAA,CAA4C,SAASG,SAAAA,CAC3E,EAAE,OAAO,SAAA,EAAW,GAAG,IAAA,EAAK,EAC5B,GAAA,EACA;AACA,EAAA,uBACEC,IAAAA,CAAC,OAAA,EAAA,EAAM,WAAW,EAAA,CAAG,OAAA,EAAS,SAAS,CAAA,EACrC,QAAA,EAAA;AAAA,oBAAAL,IAAC,OAAA,EAAA,EAAM,GAAA,EAAU,IAAA,EAAK,UAAA,EAAY,GAAG,IAAA,EAAM,CAAA;AAAA,IAC1C,KAAA,IAAS,IAAA,oBAAQA,GAAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACjC,CAAA;AAEJ,CAAC;ACTM,IAAM,QAAA,GAAWC,UAAAA,CAA+C,SAASK,SAAAA,CAC9E,EAAE,OAAA,EAAS,KAAA,EAAO,SAAA,EAAW,GAAG,IAAA,EAAK,EACrC,GAAA,EACA;AACA,EAAA,uBACEN,GAAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,EAAA,CAAG,UAAA,EAAY,SAAS,aAAA,EAAe,OAAA,IAAW,WAAW,SAAS,CAAA;AAAA,MACjF,gBAAc,OAAA,IAAW,MAAA;AAAA,MACxB,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC","file":"index.js","sourcesContent":["export function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  mini?: boolean;\n}\n\n// `.btn` alone is the primary variant; modifiers chain as extra classes.\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant = \"primary\", mini, className, type = \"button\", ...rest },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cx(\"btn\", variant !== \"primary\" && variant, mini && \"mini\", className)}\n      {...rest}\n    />\n  );\n});\n","import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport interface FieldProps extends ComponentPropsWithoutRef<\"div\"> {\n  label?: ReactNode;\n  htmlFor?: string;\n  error?: ReactNode;\n  hint?: ReactNode;\n  children?: ReactNode;\n}\n\n// Label above the control, error/hint below. Pass htmlFor to link the label\n// to the wrapped control's id.\nexport function Field({ label, htmlFor, error, hint, children, className, ...rest }: FieldProps) {\n  return (\n    <div className={cx(\"field\", className)} {...rest}>\n      {label != null && (\n        <label className=\"field-label\" htmlFor={htmlFor}>\n          {label}\n        </label>\n      )}\n      {children}\n      {error != null && <p className=\"field-error\">{error}</p>}\n      {error == null && hint != null && <p className=\"field-hint\">{hint}</p>}\n    </div>\n  );\n}\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport interface InputProps extends ComponentPropsWithoutRef<\"input\"> {\n  invalid?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { invalid, className, ...rest },\n  ref\n) {\n  return (\n    <input\n      ref={ref}\n      className={cx(\"input\", invalid && \"invalid\", className)}\n      aria-invalid={invalid || undefined}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport interface SelectOption {\n  value: string;\n  label?: string;\n}\n\nexport interface SelectProps extends ComponentPropsWithoutRef<\"select\"> {\n  invalid?: boolean;\n  /** Shorthand for simple value/label option lists; children win if present. */\n  options?: SelectOption[];\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n  { invalid, options, className, children, ...rest },\n  ref\n) {\n  return (\n    <select\n      ref={ref}\n      className={cx(\"select\", invalid && \"invalid\", className)}\n      aria-invalid={invalid || undefined}\n      {...rest}\n    >\n      {children ??\n        options?.map((o) => (\n          <option key={o.value} value={o.value}>\n            {o.label ?? o.value}\n          </option>\n        ))}\n    </select>\n  );\n});\n","import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport interface CheckboxProps extends ComponentPropsWithoutRef<\"input\"> {\n  label?: ReactNode;\n}\n\n// A .check label wrapping the input, so the text is part of the hit target.\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { label, className, ...rest },\n  ref\n) {\n  return (\n    <label className={cx(\"check\", className)}>\n      <input ref={ref} type=\"checkbox\" {...rest} />\n      {label != null && <span>{label}</span>}\n    </label>\n  );\n});\n","import { forwardRef, type ComponentPropsWithoutRef } from \"react\";\nimport { cx } from \"./cx.js\";\n\nexport interface TextareaProps extends ComponentPropsWithoutRef<\"textarea\"> {\n  invalid?: boolean;\n  /** Body-font textarea for prose; default is mono (data/config editing). */\n  prose?: boolean;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { invalid, prose, className, ...rest },\n  ref\n) {\n  return (\n    <textarea\n      ref={ref}\n      className={cx(\"textarea\", prose && \"prose-input\", invalid && \"invalid\", className)}\n      aria-invalid={invalid || undefined}\n      {...rest}\n    />\n  );\n});\n"]}

package/fonts/editorial.css

@@ -0,0 +1,46 @@
+/* Cormorant Garamond display serif — the salt/editorial stack.
+   The @font-face blocks re-source DIGITS ONLY (U+0030-0039) to Cormorant
+   Infant: Garamond's "1" is an unflagged stem that misreads as I or l.
+   Blog themes @import their own fonts; this file is for standalone apps. */
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
+
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "Cormorant Garamond";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyJU44g9vKiM1sORYSiWeAsLN997_Il2xMEbK0UPg.woff2) format("woff2");
+  unicode-range: U+0030-0039;
+}

package/fonts/fira-code.css

@@ -0,0 +1,2 @@
+/* Fira Code — data/chart monospace ("mono for every number"). */
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap");

package/fonts/lora.css

@@ -0,0 +1,2 @@
+/* Lora — long-form body serif (the juniper theme's stack). */
+@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");

package/fonts/plex.css

@@ -0,0 +1,4 @@
+/* IBM Plex Sans + IBM Plex Mono — the paper theme's stack.
+   HTML consumers may prefer <link> tags (add preconnects to
+   fonts.googleapis.com / fonts.gstatic.com either way). */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

package/fonts/satoshi.css

@@ -0,0 +1,2 @@
+/* Satoshi — geometric sans (Fontshare CDN). Pairs with editorial.css. */
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

package/fonts/system.css

@@ -0,0 +1,3 @@
+/* System stacks only — deliberately empty (the clay path: zero external
+   font requests). Exists so every consumer can uniformly import a fonts
+   file regardless of stack choice. */

package/index.css

@@ -0,0 +1,14 @@
+/* @odla-ai/ui — bundler barrel: token defaults + every component sheet.
+   Fonts and themes are deliberate consumer choices — load them separately:
+     fonts/<stack>.css → themes/<name>/styles.css + themes/<name>/ui.css → this file.
+   File-copy consumers (no bundler) use the pre-flattened odla-ui.css instead.
+   Keep this import list in sync with scripts/gen-css.mjs. */
+@import "./css/tokens.css";
+@import "./css/components/buttons.css";
+@import "./css/components/forms.css";
+@import "./css/components/cards.css";
+@import "./css/components/table.css";
+@import "./css/components/nav.css";
+@import "./css/components/feedback.css";
+@import "./css/components/chat.css";
+@import "./css/components/chart.css";

package/js/canvas.js

@@ -0,0 +1,113 @@
+// Canvas chart primitives — pure geometry + drawing, no palette globals.
+// Colors come from readPalette() (js/palette.js); pass them in explicitly.
+
+// Hi-DPI canvas setup sized to the parent element. Returns the 2d context
+// plus CSS-pixel width/height, transform pre-scaled so all drawing happens
+// in CSS pixels.
+export function fitCanvas(cv, { aspect = 0.52, maxH = 440, minH = 240, pad = 16 } = {}) {
+  const rect = cv.parentElement.getBoundingClientRect();
+  const w = Math.max(280, rect.width - pad);
+  const h = Math.round(Math.min(maxH, Math.max(minH, w * aspect)));
+  const dpr = window.devicePixelRatio || 1;
+  cv.width = Math.round(w * dpr);
+  cv.height = Math.round(h * dpr);
+  cv.style.width = w + "px";
+  cv.style.height = h + "px";
+  const ctx = cv.getContext("2d");
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  return { ctx, w, h };
+}
+
+// "Nice" axis tick values covering [min, max] with ~n steps.
+export function niceTicks(min, max, n = 5) {
+  const span = max - min || 1;
+  const raw = span / n;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
+  const out = [];
+  let t = Math.ceil(min / step) * step;
+  for (; t <= max + step / 1000; t += step) out.push(Math.abs(t) < step / 1000 ? 0 : t);
+  return out;
+}
+
+// Rounded-rect path (radius clamped to the box). Caller fills/strokes.
+export function roundRect(c, x, y, w, h, r) {
+  r = Math.min(r, w / 2, h / 2);
+  c.beginPath();
+  c.moveTo(x + r, y);
+  c.arcTo(x + w, y, x + w, y + h, r);
+  c.arcTo(x + w, y + h, x, y + h, r);
+  c.arcTo(x, y + h, x, y, r);
+  c.arcTo(x, y, x + w, y, r);
+  c.closePath();
+}
+
+// Filled band between two series. xs/loYs/hiYs are pixel arrays of equal
+// length (percentile ribbons, confidence bands).
+export function bandFill(c, xs, loYs, hiYs, fill) {
+  c.fillStyle = fill;
+  c.beginPath();
+  for (let i = 0; i < xs.length; i++) {
+    i === 0 ? c.moveTo(xs[i], hiYs[i]) : c.lineTo(xs[i], hiYs[i]);
+  }
+  for (let i = xs.length - 1; i >= 0; i--) c.lineTo(xs[i], loYs[i]);
+  c.closePath();
+  c.fill();
+}
+
+// Polyline path through pixel points. Caller sets strokeStyle and strokes.
+export function linePath(c, xs, ys) {
+  c.beginPath();
+  for (let i = 0; i < xs.length; i++) {
+    i === 0 ? c.moveTo(xs[i], ys[i]) : c.lineTo(xs[i], ys[i]);
+  }
+}
+
+// Marker dot with a contrasting ring (stroke usually palette.dotStroke).
+export function dot(c, x, y, color, { r = 3.5, stroke } = {}) {
+  c.fillStyle = color;
+  c.beginPath();
+  c.arc(x, y, r, 0, 7);
+  c.fill();
+  if (stroke) {
+    c.strokeStyle = stroke;
+    c.lineWidth = 1.5;
+    c.stroke();
+  }
+}
+
+// Hover tooltip: dark rounded box, one line per entry, per-line colors,
+// flips left of the cursor near rightBound.
+export function drawTip(c, x, y, lines, colors, { rightBound = Infinity, tipBg = "rgba(20,20,20,0.92)", font = "11px monospace", pad = 8 } = {}) {
+  c.font = font;
+  let w = 0;
+  for (const l of lines) w = Math.max(w, c.measureText(l).width);
+  w += pad * 2;
+  const h = lines.length * 15 + 10;
+  let bx = x + 12;
+  if (bx + w > rightBound) bx = x - 12 - w;
+  c.fillStyle = tipBg;
+  roundRect(c, bx, y, w, h, 4);
+  c.fill();
+  c.textAlign = "left";
+  c.textBaseline = "top";
+  lines.forEach((l, i) => {
+    c.fillStyle = colors[i] || colors[colors.length - 1];
+    c.fillText(l, bx + pad, y + 6 + i * 15);
+  });
+}
+
+// Coalesce a burst of events (slider drags, resizes) into one rAF render.
+export function rafThrottle(fn) {
+  let pending = false;
+  return (...args) => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      fn(...args);
+    });
+  };
+}

package/js/index.js

@@ -0,0 +1,24 @@
+// @odla-ai/ui vanilla barrel — buildless-importable ESM.
+// CSS lives in index.css / odla-ui.css / themes/; React/Preact wrappers in
+// the "@odla-ai/ui/components" subpath.
+export {
+  UI_TOKENS,
+  REQUIRED_TOKENS,
+  DEFAULTED_TOKENS,
+  CHART_TOKENS,
+  CHAT_TOKENS,
+  THEMES,
+  BLOG_THEMES,
+} from "./tokens.js";
+export { THEME_NO_FLASH, initTheme, currentTheme, toggleTheme, bindThemeToggle } from "./theme.js";
+export { cssVar, readPalette } from "./palette.js";
+export {
+  fitCanvas,
+  niceTicks,
+  roundRect,
+  bandFill,
+  linePath,
+  dot,
+  drawTip,
+  rafThrottle,
+} from "./canvas.js";

package/js/palette.js

@@ -0,0 +1,37 @@
+// Chart/UI palette read from the --ui-* custom properties, so canvas
+// rendering and the stylesheet can never drift (single source of truth).
+// Re-read after toggleTheme() — computed values change with the mode.
+
+export function cssVar(name, root = document.documentElement) {
+  return getComputedStyle(root).getPropertyValue(name).trim();
+}
+
+export function readPalette(root = document.documentElement) {
+  const cs = getComputedStyle(root);
+  const g = (n) => cs.getPropertyValue(n).trim() || "#000";
+  return {
+    bg: g("--ui-bg"),
+    surface: g("--ui-surface"),
+    text: g("--ui-text"),
+    muted: g("--ui-text-muted"),
+    faint: g("--ui-text-faint"),
+    border: g("--ui-border"),
+    accent: g("--ui-accent"),
+    good: g("--ui-good"),
+    warn: g("--ui-warn"),
+    danger: g("--ui-danger"),
+    series: [1, 2, 3, 4, 5, 6].map((i) => g(`--ui-chart-${i}`)),
+    grid: g("--ui-chart-grid"),
+    gridZero: g("--ui-chart-grid-zero"),
+    axis: g("--ui-chart-axis"),
+    axisFaint: g("--ui-chart-axis-faint"),
+    band: g("--ui-chart-band"),
+    bandStrong: g("--ui-chart-band-strong"),
+    pos: g("--ui-chart-pos"),
+    neg: g("--ui-chart-neg"),
+    tipBg: g("--ui-chart-tip-bg"),
+    tipText: g("--ui-chart-tip-text"),
+    dotStroke: g("--ui-chart-dot-stroke"),
+    fontMono: g("--ui-font-mono") || "monospace",
+  };
+}