@usetheo/ui 0.35.1 → 0.35.3

package/README.md

@@ -1,7 +1,62 @@
 # @usetheo/ui
 
-Violet Forge design system — the generic React components + primitives that form the non-AI foundation of the Theo UI stack. Apache-2.0, ESM-only.
+Violet Forge design system — the generic React components and primitives that form the non-AI
+foundation of the Theo UI stack. Apache-2.0, ESM-only.
 
-**54 components** (39 primitives + 15 composites) + the Violet Forge foundation (`cn`, tailwind-preset, themes). Depended on by `@theokit/ui` (the AI-native layer).
+This is the layer with **no agent in it**: the shell, the tables, the forms, the feedback states,
+the dashboard pieces. [`@theokit/ui`](https://github.com/usetheokit/theokit-ui) builds on top of it
+with the agent surfaces (chat threads, tool calls, approval cards) and shares the same tokens, so
+the two compose without a visual seam.
+
+**Rule of thumb:** if the component would exist in an app with no agent in it, it belongs here.
+
+## Install
+
+```bash
+pnpm add @usetheo/ui
+```
+
+Or copy a single component, shadcn-style, from the published registry:
+
+```bash
+npx shadcn@latest add https://usetheodev.github.io/usetheo-ui/r/data-table.json
+```
+
+## Catalog
+
+<!-- BEGIN:catalog -->
+
+**87 components** — 45 primitives + 42 composites.
+
+### Primitives (45)
+
+`ActionBar` · `Alert` · `Avatar` · `Badge` · `Breadcrumb` · `Button` · `Card` · `Checkbox` · `Combobox` · `CopyButton` · `DangerZone` · `DescriptionList` · `Dialog` · `DropdownMenu` · `EmptyState` · `FileDropzone` · `FormField` · `Input` · `JsonViewer` · `Label` · `LoginSplit` · `MetricsPanel` · `Pagination` · `PinInput` · `PlanBadge` · `Progress` · `RadioGroup` · `ScrollArea` · `Select` · `Sheet` · `Sidebar` · `Skeleton` · `Slider` · `SocialAuthRow` · `StatTile` · `StatusDot` · `Switch` · `Table` · `Tabs` · `Textarea` · `Timestamp` · `Toast` · `Tooltip` · `Topnav` · `UpdateBanner`
+
+### Composites (42)
+
+`AccountMenu` · `AnnotationInput` · `AnnotationSummaryGroup` · `AttributesTable` · `ChatMessageCard` · `CodeBlock` · `CommandPalette` · `CommentThread` · `ConfirmDialog` · `DataTable` · `DatasetItemDiff` · `DeploymentRow` · `DiffView` · `DomainConfig` · `EnvVarEditor` · `EvaluatorForm` · `Histogram` · `IoCards` · `MessageBranchSelector` · `MetricCard` · `PageShell` · `PercentileChart` · `PreviewEnvCard` · `PriceBreakdown` · `ProjectCard` · `PromptTemplateEditor` · `PromptVersionDiff` · `RollbackUi` · `SessionSummary` · `SessionTimeline` · `SeverityBadge` · `SpanGraph` · `SpanTree` · `SpanWaterfall` · `StatusIndicator` · `Stepper` · `TagInput` · `TaskHeader` · `TokenCostBreakdown` · `TraceCompare` · `TraceTranscript` · `TrendChart`
+
+<!-- END:catalog -->
+
+Generated from `src/components/` by `pnpm sync:readme` — do not edit the block above by hand.
+
+## Theming
+
+The tokens come from the Violet Forge foundation shipped here (`tailwind-preset`, `themes`, `cn`).
+Consumers that also install `@theokit/ui` get the same token names, so a theme defined once applies
+to both packages.
+
+## Development
+
+```bash
+pnpm install
+pnpm dev              # Ladle catalog
+pnpm test
+pnpm typecheck
+pnpm lint
+pnpm build
+pnpm sync:readme      # regenerate the catalog block above
+pnpm registry:build   # rebuild registry/r/*.json for the shadcn path
+```
 
 > Seeded from `theo-ui` @ `2b46eca` (2026-07-03, AI-exclusive pivot milestone M-B).

package/dist/components/composites/metric-card/metric-card.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 /**
  * MetricCard — dashboard metric tile (composite).
  *
- * Pattern recurrente "Card + CardHeader + value + delta + trend icon" promoted
+ * Recurring pattern "Card + CardHeader + value + delta + trend icon" promoted
  * to a first-class composite per ADR-0007 community-best-practices plan.
  *
  * Trend → token mapping (default `invertTrend=false`):

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -51,37 +51,38 @@ export declare function niceMax(values: number[]): number;
  */
 export declare function seriesPath(points: TrendPoint[], xScale: (x: number) => number, yScale: (y: number) => number): string;
 /**
- * Quais posicoes do eixo recebem rotulo.
+ * Which axis positions receive a label.
  *
- * Rotular 31 pontos em ~450px e ilegivel; rotular so as pontas nao responde "quando foi o pico".
- * A densidade sai da largura REAL (`viewW`, que o ResizeObserver ja rastreia), com o primeiro e o
- * ultimo SEMPRE presentes: sao as bordas da janela, e sem eles o leitor nao sabe de quando ate
- * quando o grafico fala.
+ * Labelling 31 points in ~450px is illegible; labelling only the edges does not answer "when was
+ * the spike". The density comes from the REAL width (`viewW`, which the ResizeObserver already
+ * tracks), with the first and the last ALWAYS present: they are the window's edges, and without
+ * them the reader does not know from when to when the chart speaks.
  *
- * Fora do JSX porque e aritmetica, e aritmetica isolada e aritmetica que a mutacao alcanca.
+ * Outside the JSX because it is arithmetic, and isolated arithmetic is arithmetic mutation reaches.
  */
 export declare function xTicks(axisXs: number[], viewW: number): number[];
 /**
- * Quais pontos recebem marcador.
+ * Which points receive a marker.
  *
- * Duas razões distintas para marcar, e a segunda só apareceu quando séries com lacuna passaram a
- * existir (M144):
+ * Two distinct reasons to mark, and the second only appeared once series with gaps came to exist
+ * (M144):
  *
- * 1. **Série esparsa** (< `SPARSE_MARKER_MAX` pontos FINITOS) — 1-4 pontos leem como um penhasco
- *    dramático; o marcador ancora o leitor no dado real. Regra do M76 — que passou a contar dado,
- *    não slot, porque a densificação do M144 desfez a equivalência entre os dois.
- * 2. **Ponto isolado** — um ponto finito cercado de lacunas dos dois lados vira um `M` sozinho no
- *    `path`, e um `M` sozinho **desenha nada**: bounding-box zero, invisível. O dado existe, está
- *    correto, e o operador não vê. Medido no e2e do M144 (`d="M419.86,92.00 M448.00,36.00"`).
+ * 1. **Sparse series** (< `SPARSE_MARKER_MAX` FINITE points) — 1-4 points read as a dramatic
+ *    cliff; the marker anchors the reader on the real data. M76's rule — which now counts data,
+ *    not slots, because M144's densification broke the equivalence between the two.
+ * 2. **Isolated point** — a finite point surrounded by gaps on both sides becomes a lone `M` in
+ *    the `path`, and a lone `M` **draws nothing**: zero bounding box, invisible. The data exists,
+ *    it is correct, and the operator does not see it. Measured in M144's e2e
+ *    (`d="M419.86,92.00 M448.00,36.00"`).
  *
- * A regra antiga só cobria (1), chaveando no TOTAL de pontos em vez de perguntar se o ponto de fato
- * é desenhado — apesar de o comentário dela já declarar a intenção *"a dot keeps real data from
- * rendering as an invisible line"*. Depois da densificação, uma série de 30 dias com dois dias
- * finitos separados por lacuna cai fora de (1) e desaparece. Chart.js e Plotly marcam o ponto
- * isolado exatamente por isto.
+ * The old rule covered only (1), keying on the TOTAL number of points instead of asking whether
+ * the point is actually drawn — even though its own comment already stated the intent *"a dot
+ * keeps real data from rendering as an invisible line"*. After the densification, a 30-day series
+ * with two finite days separated by a gap falls outside (1) and disappears. Chart.js and Plotly
+ * mark the isolated point for exactly this reason.
  *
- * Fora do JSX de propósito: é a aritmética da decisão, e aritmética isolada é aritmética que a
- * mutação alcança.
+ * Outside the JSX on purpose: it is the decision's arithmetic, and isolated arithmetic is the kind
+ * a mutation reaches.
  */
 export declare function markedPoints(points: TrendPoint[]): TrendPoint[];
 export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
@@ -98,18 +99,18 @@ export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
      */
     yMax?: number;
     /**
-     * Formata o `x` para o eixo e para a tabela acessivel. **Opcional de proposito.**
+     * Formats the `x` for the axis and for the accessible table. **Optional on purpose.**
      *
-     * O contrato do `x` e ambiguo — "bucket index or epoch-ms" — e na pratica quase unanime: das seis
-     * fabricas de serie do consumidor, cinco passam INDICE e uma passa epoch-ms. Inferir por magnitude
-     * funcionaria e seria a forma exata do defeito que este componente ja pagou (a regra de marcador
-     * do M76 chaveava em `points.length` em vez de perguntar o que queria saber, e a densificacao do
-     * M144 a desligou em silencio). Quem sabe o que o `x` significa e o chamador.
+     * The `x` contract is ambiguous — "bucket index or epoch-ms" — and in practice nearly unanimous:
+     * of the consumer's six series factories, five pass an INDEX and one passes epoch-ms. Inferring by
+     * magnitude would work, and would be the exact shape of the defect this component has already paid
+     * for (M76's marker rule keyed on `points.length` instead of asking what it wanted to know, and
+     * M144's densification switched it off silently). The one who knows what `x` means is the caller.
      *
-     * Sem esta prop, nada muda: nenhum rotulo de eixo X e desenhado e a tabela segue numerando.
+     * Without this prop nothing changes: no X-axis label is drawn and the table keeps numbering.
      */
     xFormatter?: (x: number) => string;
-    /** Cabecalho da primeira coluna da tabela acessivel. "Point" sobre datas seria desonesto. */
+    /** Header of the accessible table's first column. "Point" over dates would be dishonest. */
     xLabel?: string;
 }
 declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;

package/dist/index.js

@@ -593,7 +593,7 @@ var buttonVariants = cva(
       },
       size: {
         sm: "h-8 px-3 text-body-sm",
-        // md: tier ajustável via density (CSS var on :root). See D3 ADR of
+        // md: tier adjustable via density (CSS var on :root). See D3 ADR of
         // faang-density-tightening plan. Default `comfortable` density makes
         // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.
         md: "h-[var(--theo-control-h,2rem)] px-[var(--theo-control-px,0.75rem)] text-body-sm",
@@ -4936,17 +4936,19 @@ function DataTableDefaultBody(props) {
   }
   const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;
   return (
-    // `overflow-x-auto`: uma tabela mais larga que o contêiner ROLA dentro dele, em vez de vazar por
-    // cima do resto da página. Medido no consumidor: 11 colunas produziam 1838 px dentro de 1486 px,
-    // e a raiz era só `w-full` — então o excesso escapava e desconfigurava a tela inteira. Não era
-    // defeito de uma tela: era desta raiz, e alcançava qualquer consumidor com colunas demais.
+    // `overflow-x-auto`: a table wider than its container SCROLLS inside it, instead of spilling
+    // over the rest of the page. Measured in the consumer: 11 columns produced 1838 px inside
+    // 1486 px, and the root was only `w-full` — so the excess escaped and broke the whole screen.
+    // It was not one screen's defect: it was this root's, and it reached any consumer with too
+    // many columns.
     //
-    // A variante virtualizada já fazia isto; a não-virtualizada é que tinha ficado para trás.
+    // The virtualised variant already did this; the non-virtualised one had fallen behind.
     //
-    // Efeito colateral declarado: com `overflow-x` diferente de `visible`, o CSS computa `overflow-y`
-    // como `auto` — logo este `div` vira contexto de rolagem, e um `stickyHeader` passa a grudar nele
-    // e não na viewport. Para o cabeçalho grudar de fato, o consumidor precisa dar altura máxima ao
-    // contêiner (`className="max-h-[...]"`), que é o que torna a rolagem vertical real.
+    // Declared side effect: with `overflow-x` set to anything other than `visible`, CSS computes
+    // `overflow-y` as `auto` — so this `div` becomes a scroll container, and a `stickyHeader` now
+    // sticks to it rather than to the viewport. For the header to actually stick, the consumer has
+    // to give the container a max height (`className="max-h-[...]"`), which is what makes the
+    // vertical scrolling real.
     /* @__PURE__ */ jsxs("div", { className: cn("w-full overflow-x-auto", className), children: [
       /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(Table.Header, { className: stickyHeader ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsx(
@@ -5109,14 +5111,14 @@ function niceMax(values) {
 }
 function seriesPath(points, xScale, yScale) {
   const out = [];
-  let emTrecho = false;
+  let inStretch = false;
   for (const p of points) {
     if (!Number.isFinite(p.y)) {
-      emTrecho = false;
+      inStretch = false;
       continue;
     }
-    out.push(`${emTrecho ? "L" : "M"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`);
-    emTrecho = true;
+    out.push(`${inStretch ? "L" : "M"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`);
+    inStretch = true;
   }
   return out.join(" ");
 }
@@ -5128,17 +5130,19 @@ function xTicks(axisXs, viewW) {
   if (axisXs.length <= 2) return [...axisXs];
   const maxTicks = Math.max(2, Math.floor((viewW - PAD.left - PAD.right) / MIN_TICK_PX2));
   if (axisXs.length <= maxTicks) return [...axisXs];
-  const passo = (axisXs.length - 1) / (maxTicks - 1);
-  const escolhidos = /* @__PURE__ */ new Set();
-  for (let i = 0; i < maxTicks; i++) escolhidos.add(Math.round(i * passo));
-  return [...escolhidos].sort((a, b) => a - b).map((i) => axisXs[i]);
+  const step = (axisXs.length - 1) / (maxTicks - 1);
+  const chosen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < maxTicks; i++) chosen.add(Math.round(i * step));
+  return [...chosen].sort((a, b) => a - b).map((i) => axisXs[i]);
 }
 var SPARSE_MARKER_MAX = 5;
 function markedPoints(points) {
-  const finito = (p) => Number.isFinite(p?.y);
-  const finitos = points.filter(finito);
-  if (finitos.length < SPARSE_MARKER_MAX) return finitos;
-  return points.filter((p, i) => finito(p) && !finito(points[i - 1]) && !finito(points[i + 1]));
+  const isFinitePoint = (p) => Number.isFinite(p?.y);
+  const finitePoints = points.filter(isFinitePoint);
+  if (finitePoints.length < SPARSE_MARKER_MAX) return finitePoints;
+  return points.filter(
+    (p, i) => isFinitePoint(p) && !isFinitePoint(points[i - 1]) && !isFinitePoint(points[i + 1])
+  );
 }
 var TrendChart = forwardRef(
   ({
@@ -5210,16 +5214,16 @@ var TrendChart = forwardRef(
           "data-slot": "trend-chart-surface",
           className: "relative",
           onMouseMove: (e) => {
-            const caixa = e.currentTarget.getBoundingClientRect();
-            if (caixa.width === 0 || axisXs.length === 0) return;
-            const frac = (e.clientX - caixa.left) / caixa.width;
-            const alvo = xMin + frac * (xMax - xMin);
-            let melhor = 0;
+            const box = e.currentTarget.getBoundingClientRect();
+            if (box.width === 0 || axisXs.length === 0) return;
+            const frac = (e.clientX - box.left) / box.width;
+            const target = xMin + frac * (xMax - xMin);
+            let best = 0;
             for (let i = 1; i < axisXs.length; i++) {
-              if (Math.abs(axisXs[i] - alvo) < Math.abs(axisXs[melhor] - alvo))
-                melhor = i;
+              if (Math.abs(axisXs[i] - target) < Math.abs(axisXs[best] - target))
+                best = i;
             }
-            setHoverIdx(melhor);
+            setHoverIdx(best);
           },
           onMouseLeave: () => setHoverIdx(null),
           children: [

package/package.json

@@ -1,10 +1,33 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.35.1",
-  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
+  "version": "0.35.3",
   "type": "module",
   "license": "Apache-2.0",
-  "description": "Violet Forge design system \u2014 generic React components + primitives (the non-AI foundation of @theokit/ui).",
+  "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "ui",
+    "tailwind",
+    "radix",
+    "primitives",
+    "dashboard",
+    "theo",
+    "violet-forge"
+  ],
+  "homepage": "https://github.com/usetheodev/usetheo-ui#readme",
+  "bugs": {
+    "url": "https://github.com/usetheodev/usetheo-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/usetheodev/usetheo-ui.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -22,19 +45,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "dev": "ladle serve",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src",
-    "lint:ci": "biome check src",
-    "format:check": "biome format src",
-    "test": "vitest run",
-    "test:run": "vitest run",
-    "build": "tsup && tsc -p tsconfig.dts.json",
-    "prepublishOnly": "npm run build",
-    "registry:build": "tsx scripts/build-registry.ts",
-    "registry:validate": "tsx scripts/validate-registry.ts"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -64,6 +74,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@changesets/cli": "^2.31.1",
     "@ladle/react": "^4.1.2",
     "@tailwindcss/vite": "^4.3.2",
     "@testing-library/jest-dom": "^6.6.3",
@@ -84,5 +95,21 @@
     "vitest": "^4.1.8",
     "vitest-axe": "^0.1.0"
   },
-  "_provenance": "seeded from theo-ui @ 2b46eca (2026-07-03, pivot M-B)"
-}
+  "_provenance": "seeded from theo-ui @ 2b46eca (2026-07-03, pivot M-B)",
+  "scripts": {
+    "dev": "ladle serve",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src",
+    "lint:ci": "biome check src",
+    "format:check": "biome format src",
+    "test": "vitest run",
+    "test:run": "vitest run",
+    "build": "tsup && tsc -p tsconfig.dts.json",
+    "registry:build": "tsx scripts/build-registry.ts",
+    "registry:validate": "tsx scripts/validate-registry.ts",
+    "changeset": "changeset",
+    "version-packages": "changeset version && pnpm run sync:readme",
+    "release": "pnpm run build && changeset publish",
+    "sync:readme": "tsx scripts/sync-readme.ts"
+  }
+}