@odla-ai/ui 0.1.0

package/README.md

@@ -0,0 +1,88 @@
+# @odla-ai/ui
+
+The odla design system: one semantic token contract (`--ui-*`), five themes,
+class-scoped component CSS, canvas chart helpers, and optional React/Preact
+form components. CSS-first — every odla surface can consume it, from
+zero-build static sites to Vite React apps.
+
+- **Tokens**: colors, text tiers, status, fonts, spacing, radius, focus,
+  chart and chat roles. Defaults ship at zero specificity (`:where()`), so
+  themes and app overrides always win.
+- **Themes**: `paper` (the odla Studio's warm-paper dashboard look),
+  `juniper`, `salt`, `chalk`, `clay` (the blog themes — `@odla-ai/blog`
+  resolves them from this package). Each theme = `styles.css` (its own
+  palette) + `ui.css` (mapping onto the contract) + `theme.json`.
+- **Components (CSS)**: buttons/segmented/tabs/pills, form fields with
+  validation states, cards/panels/badges, data tables, app-shell layout +
+  drawer, toasts/banners/dropzones, chat surfaces (message bubbles,
+  tool-call cards, thinking panels, composer — shaped by `@odla-ai/ai`'s
+  streaming contract), chart containers.
+- **JS helpers** (buildless ESM): light/dark toggle with no-flash snippet,
+  a `--ui-*` palette reader for canvas, and chart primitives
+  (`fitCanvas`, `niceTicks`, `bandFill`, `drawTip`, …).
+- **`/components`**: `Button`, `Field`, `Input`, `Select`, `Checkbox`,
+  `Textarea` — authored once against the `react` API, runs on React 18/19
+  natively and on Preact via `preact/compat` aliasing (Vite alias or a
+  browser import map for buildless islands).
+
+## Install
+
+```bash
+npm install @odla-ai/ui
+```
+
+## 60-second start (Vite + React)
+
+```js
+// main.tsx
+import "@odla-ai/ui/fonts/plex.css";
+import "@odla-ai/ui/themes/paper/styles.css";
+import "@odla-ai/ui/themes/paper/ui.css";
+import "@odla-ai/ui/index.css";
+```
+
+```tsx
+import { Button, Field, Input } from "@odla-ai/ui/components";
+
+<div className="card">
+  <h4>New note</h4>
+  <Field label="Title" htmlFor="t">
+    <Input id="t" placeholder="…" />
+  </Field>
+  <div className="row">
+    <Button>Save</Button>
+    <Button variant="secondary">Cancel</Button>
+  </div>
+</div>
+```
+
+Static sites copy `odla-ui.css` (pre-flattened, no imports) plus a theme's
+`styles.css` + `ui.css` and use the same classes in plain HTML.
+
+## Themes
+
+| Theme | Look | Fonts |
+| --- | --- | --- |
+| `paper` | Warm paper dashboard (the odla Studio) | IBM Plex Sans/Mono (`fonts/plex.css`) |
+| `juniper` | Quiet long-form reading, violet accents | Lora + Gill Sans stack |
+| `salt` | Warm editorial cream/moss/rust | Cormorant Garamond + Satoshi |
+| `chalk` | Chalkboard on graph paper | Cormorant + Spectral + JetBrains Mono |
+| `clay` | Warm light editorial, terracotta | System stacks only (zero font requests) |
+
+Dark mode: every theme defines dark tokens on `[data-theme="dark"]` and the
+`prefers-color-scheme` fallback (kept byte-identical — tested). Toggle with
+`toggleTheme()` from the JS helpers.
+
+The full contract — token tables, class inventory, recipes, invariants —
+lives in [llms.txt](./llms.txt) (bundled for agents, good for humans too).
+
+## Development
+
+```bash
+npm test -w @odla-ai/ui      # builds dist, then node --test
+npm run gen:css -w @odla-ai/ui   # refresh odla-ui.css after editing css/
+```
+
+Tests enforce: theme dark-block identity across all five themes, full
+`--ui-*` coverage per theme, class-scoped selectors (no bare elements) in
+component sheets, `odla-ui.css` freshness, and component render output.

package/css/components/buttons.css

@@ -0,0 +1,118 @@
+/* @odla-ai/ui — buttons & controls
+   Class-scoped by design: no bare-element rules, so these sheets coexist
+   with themes (e.g. blog themes) that style bare elements themselves.
+   `.btn` alone renders the primary variant; modifiers chain (.btn.ghost). */
+
+.btn {
+  font: inherit;
+  font-weight: 600;
+  background: var(--ui-accent);
+  color: var(--ui-on-accent);
+  border: 0;
+  padding: 7px 13px;
+  border-radius: var(--ui-radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.btn:hover { background: var(--ui-accent-strong); }
+.btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
+.btn:disabled { opacity: 0.45; cursor: default; }
+
+.btn.secondary {
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+}
+.btn.secondary:hover { background: var(--ui-surface-2); }
+
+.btn.ghost {
+  background: transparent;
+  color: var(--ui-accent);
+  border: 0;
+}
+.btn.ghost:hover { background: var(--ui-accent-soft); }
+
+.btn.danger { background: var(--ui-danger); color: var(--ui-on-accent); }
+.btn.danger:hover { background: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-text)); }
+
+.btn.mini { padding: 3px 9px; font-size: var(--ui-text-sm); }
+
+/* Segmented control: a strip of buttons, one active (.on). */
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface);
+  overflow: hidden;
+}
+.seg button {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: transparent;
+  color: var(--ui-text-muted);
+  border: 0;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.seg button + button { border-left: 1px solid var(--ui-border); }
+.seg button:hover { color: var(--ui-text); }
+.seg button.on,
+.seg button[aria-pressed="true"] {
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+  font-weight: 600;
+}
+
+/* Underlined tab bar; the active tab carries .on (or aria-selected). */
+.tabs {
+  display: flex;
+  gap: var(--ui-space-4);
+  border-bottom: 1px solid var(--ui-border);
+}
+.tabs button {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: transparent;
+  color: var(--ui-text-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 8px 2px;
+  cursor: pointer;
+}
+.tabs button:hover { color: var(--ui-text); }
+.tabs button.on,
+.tabs button[aria-selected="true"] {
+  color: var(--ui-text);
+  border-bottom-color: var(--ui-accent);
+  font-weight: 600;
+}
+
+/* Status/metadata pill: quiet, mono, rounded. */
+.pill {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  padding: 3px 9px;
+  border-radius: var(--ui-radius-pill);
+  color: var(--ui-text-muted);
+}
+
+/* Interactive chip (link chips, removable filters). */
+.chip {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  padding: 2px 7px;
+  margin: 1px 3px 1px 0;
+  border-radius: 6px;
+  background: var(--ui-accent-soft);
+  border: 1px solid var(--ui-border);
+  color: var(--ui-accent-strong);
+  cursor: pointer;
+}
+.chip:hover { border-color: var(--ui-accent); }

package/css/components/cards.css

@@ -0,0 +1,66 @@
+/* @odla-ai/ui — cards, panels, badges */
+
+.card {
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  padding: 14px;
+  box-shadow: var(--ui-shadow);
+}
+.card h4 {
+  margin: 0 0 var(--ui-space-2);
+  color: var(--ui-text-muted);
+  font-weight: 600;
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+}
+
+/* KPI card grid. */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--ui-space-3);
+  margin: var(--ui-space-4) 0;
+}
+.metric { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
+
+.panel {
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  padding: var(--ui-space-4);
+  margin: var(--ui-space-4) 0;
+  box-shadow: var(--ui-shadow);
+}
+.panel h3 { margin: 0 0 var(--ui-space-3); font-weight: 700; }
+
+/* Status badge: neutral by default, status variants chain. */
+.badge {
+  display: inline-block;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  color: var(--ui-text-muted);
+}
+.badge.good { background: var(--ui-good-soft); border-color: var(--ui-good); color: var(--ui-good); }
+.badge.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.badge.danger { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+.badge.accent { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); }
+
+/* Pass/fail verdict pill (permission inspectors, test results). */
+.verdict {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: var(--ui-radius-pill);
+}
+.verdict-pass { background: var(--ui-good-soft); color: var(--ui-good); border: 1px solid var(--ui-good); }
+.verdict-fail { background: var(--ui-danger-soft); color: var(--ui-danger); border: 1px solid var(--ui-danger); }

package/css/components/chart.css

@@ -0,0 +1,24 @@
+/* @odla-ai/ui — chart containers
+   Rendering happens on <canvas> via js/canvas.js; colors come from the
+   --ui-chart-* tokens read with js/palette.js readPalette(). */
+
+.chart { position: relative; }
+.chart canvas { display: block; width: 100%; }
+
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-3);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  color: var(--ui-text-muted);
+  margin-top: var(--ui-space-2);
+}
+.chart-key { display: inline-flex; align-items: center; gap: 5px; }
+.chart-key i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--ui-radius-sm);
+  background: currentColor;
+}

package/css/components/chat.css

@@ -0,0 +1,167 @@
+/* @odla-ai/ui — chat surfaces
+   Shaped by the @odla-ai/ai content-block contract: text, tool_use,
+   tool_result, thinking blocks; streaming deltas; usage; typed errors. */
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4);
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.chat-msg { display: flex; flex-direction: column; align-items: flex-start; }
+.chat-msg.user { align-items: flex-end; }
+
+.chat-bubble {
+  max-width: 88%;
+  padding: 10px 14px;
+  border-radius: var(--ui-radius-lg);
+  font-size: var(--ui-text-lg);
+  line-height: 1.55;
+  overflow-wrap: break-word;
+}
+.chat-msg.user .chat-bubble {
+  background: var(--ui-chat-user-bg);
+  color: var(--ui-chat-user-text);
+}
+.chat-msg.assistant .chat-bubble {
+  background: var(--ui-chat-assistant-bg);
+  border: 1px solid var(--ui-border);
+}
+.chat-bubble pre {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-code-bg);
+  color: var(--ui-code-text);
+  border-radius: var(--ui-radius-sm);
+  padding: 10px 12px;
+  overflow-x: auto;
+}
+
+/* Collapsible reasoning panel (ThinkingBlock) — use a <details>. */
+.chat-thinking {
+  align-self: stretch;
+  background: var(--ui-chat-thinking-bg);
+  color: var(--ui-chat-thinking-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-text-sm);
+  padding: 6px 10px;
+}
+.chat-thinking summary {
+  cursor: pointer;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+}
+.chat-thinking[open] summary { margin-bottom: 6px; }
+
+/* Tool-call card (ToolUseBlock): name + streamed args. */
+.chat-tool {
+  align-self: stretch;
+  border: 1px solid var(--ui-border);
+  border-left: 3px solid var(--ui-chat-tool-accent);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface);
+  padding: 8px 12px;
+}
+.chat-tool-name {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  font-weight: 600;
+  color: var(--ui-chat-tool-accent);
+}
+.chat-tool-args {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-code-bg);
+  color: var(--ui-code-text);
+  border-radius: var(--ui-radius-sm);
+  padding: 8px 10px;
+  margin: 6px 0 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+/* Tool-result card (ToolResultBlock); .error for isError results. */
+.chat-result {
+  align-self: stretch;
+  border: 1px solid var(--ui-border);
+  border-left: 3px solid var(--ui-good);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-2);
+  padding: 8px 12px;
+  font-size: var(--ui-text-md);
+}
+.chat-result.error {
+  border-left-color: var(--ui-danger);
+  background: var(--ui-danger-soft);
+  color: var(--ui-danger);
+}
+
+/* Streaming caret appended during text/thinking deltas. */
+.chat-cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.1em;
+  background: var(--ui-accent);
+  vertical-align: text-bottom;
+  animation: ui-blink 1s steps(1) infinite;
+}
+@keyframes ui-blink {
+  50% { opacity: 0; }
+}
+
+/* Composer bar. */
+.chat-composer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: var(--ui-space-2);
+  align-items: flex-end;
+  background: var(--ui-surface);
+  border-top: 1px solid var(--ui-border);
+  padding: var(--ui-space-3);
+}
+.chat-composer .textarea { flex: 1; min-height: 40px; max-height: 200px; }
+
+/* Token/cost footer (OracleUsage). */
+.chat-usage {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  color: var(--ui-text-faint);
+  text-align: right;
+}
+
+/* Error/stop-reason notices (rate_limit, context_window, refusal, …). */
+.chat-banner {
+  align-self: stretch;
+  padding: 8px 12px;
+  border-radius: var(--ui-radius-md);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface-2);
+  font-size: var(--ui-text-md);
+}
+.chat-banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.chat-banner.error { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+
+/* Attachment chip (image/document blocks in history or composer). */
+.chat-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-surface-2);
+  color: var(--ui-text-muted);
+  padding: 3px 8px;
+}
+.chat-attachment img {
+  max-height: 48px;
+  border-radius: var(--ui-radius-sm);
+  display: block;
+}

package/css/components/feedback.css

@@ -0,0 +1,77 @@
+/* @odla-ai/ui — toasts, banners, dropzones, activity indicators */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--ui-text);
+  color: var(--ui-bg);
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: var(--ui-text-md);
+  box-shadow: var(--ui-shadow);
+  z-index: 1100;
+}
+.toast.good { border-left: 3px solid var(--ui-good); }
+.toast.warn { border-left: 3px solid var(--ui-warn); }
+.toast.danger { border-left: 3px solid var(--ui-danger); }
+
+/* Inline notice bar. */
+.banner {
+  padding: 10px 14px;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-2);
+  font-size: var(--ui-text-md);
+  margin: var(--ui-space-3) 0;
+}
+.banner.good { background: var(--ui-good-soft); border-color: var(--ui-good); color: var(--ui-good); }
+.banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.banner.error { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+
+/* File-drop target; add .drag while a file hovers. */
+.dropzone {
+  border: 1.5px dashed var(--ui-border);
+  border-radius: 8px;
+  padding: 18px;
+  text-align: center;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-text-md);
+  background: var(--ui-surface-2);
+  margin-bottom: 14px;
+}
+.dropzone.drag {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+}
+
+/* Live-activity pulse dot. */
+.live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ui-good);
+  margin-right: 6px;
+  animation: ui-pulse 1.4s infinite;
+}
+@keyframes ui-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* Border spinner. */
+.spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ui-border);
+  border-top-color: var(--ui-accent);
+  border-radius: 50%;
+  animation: ui-spin 0.8s linear infinite;
+  vertical-align: middle;
+}
+@keyframes ui-spin {
+  to { transform: rotate(360deg); }
+}

package/css/components/forms.css

@@ -0,0 +1,132 @@
+/* @odla-ai/ui — form fields
+   .input/.select/.textarea are the class equivalents of themed bare
+   elements; .field wraps a label + control + error/hint. */
+
+.input,
+.select,
+.textarea {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  padding: 8px 10px;
+  width: 100%;
+}
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--ui-accent);
+  box-shadow: var(--ui-focus);
+}
+.input::placeholder,
+.textarea::placeholder { color: var(--ui-text-faint); }
+.input:disabled,
+.select:disabled,
+.textarea:disabled { opacity: 0.55; cursor: default; }
+
+.textarea {
+  font-family: var(--ui-font-mono);
+  resize: vertical;
+  min-height: 72px;
+}
+.textarea.prose-input { font-family: inherit; }
+
+.input.invalid,
+.select.invalid,
+.textarea.invalid,
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"] {
+  border-color: var(--ui-danger);
+}
+.input.invalid:focus,
+.select.invalid:focus,
+.textarea.invalid:focus,
+.input[aria-invalid="true"]:focus,
+.select[aria-invalid="true"]:focus,
+.textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 3px var(--ui-danger-soft);
+}
+
+/* Field wrapper: label above control, error/hint below. */
+.field { margin: 0 0 var(--ui-space-4); }
+.field-label {
+  display: block;
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+  color: var(--ui-text-muted);
+  margin: 0 0 4px;
+}
+.field-error { color: var(--ui-danger); font-size: var(--ui-text-md); margin: 4px 0 0; }
+.field-hint { color: var(--ui-text-faint); font-size: var(--ui-text-sm); margin: 4px 0 0; }
+
+/* Checkbox/radio with label. */
+.check {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  cursor: pointer;
+  font-size: var(--ui-text-md);
+}
+.check input {
+  accent-color: var(--ui-accent);
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+/* Styled range slider. */
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-border);
+  outline: none;
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ui-accent);
+  border: 2px solid var(--ui-surface);
+  cursor: pointer;
+}
+.range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ui-accent);
+  border: 2px solid var(--ui-surface);
+  cursor: pointer;
+}
+.range:focus-visible { box-shadow: var(--ui-focus); }
+
+/* Grouped form area (e.g. schema-aware add-row forms). */
+.form-well {
+  padding: var(--ui-space-3);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  margin-bottom: var(--ui-space-3);
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 8px 14px;
+  align-items: center;
+}
+.form-grid label {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  color: var(--ui-text);
+}
+.form-grid .type { color: var(--ui-text-faint); font-size: var(--ui-text-xs); }