ionbase-ui 0.73.0 → 0.76.0

package/dist/meta/patterns/AgentRun.json

@@ -16,6 +16,20 @@
     "Alert",
     "Badge"
   ],
+  "drivenBy": {
+    "hook": "useAgentRun",
+    "note": "It turns the events a run reports into the props on AgentActivityStep (`status`), StreamingText (`outputProps`), AgentStop (`stopProps`) and ApprovalGate (`approvalProps`), and applies this pattern's states on the way: one active step, a stop keeps what was done and skips the rest, a failure marks the step that was running. It owns state, not markup or copy — which steps to show is `log`, and every sentence is yours. Feed it with `dispatch` from a live run or `replay(recording)` from a stored one; `agentRunFrom(events)` rebuilds a finished run without playing it.",
+    "events": [
+      "`run-started` — optionally with `steps: [{ id, label }]`, the plan, so steps the run never reaches can be named as not done",
+      "`step-started` { id, label? } — closes whichever step was active; exactly one is active at a time",
+      "`step-done` / `step-skipped` { id }",
+      "`step-failed` { id, error? }",
+      "`approval-requested` { id } — the step becomes the ApprovalGate; the run is `awaiting`",
+      "`approval-resolved` { id, decision: approved | rejected | expired, resolution? } — `expired` ends the run without acting",
+      "`output` { text } — appended; `output-done` ends streaming",
+      "`run-finished`, `run-failed` { error? }, `run-stopped` { resolution? } — the three ends a producer sends; after any end, later events are ignored"
+    ]
+  },
   "structure": [
     "A header row carrying the task name and the AgentStop control. The stop is the first thing on screen and it stays there for the whole run.",
     "An AgentActivity list of AgentActivityStep, one per step, in the order they happened. Exactly one step is `active` at a time.",

package/dist/meta/patterns/HumanApproval.json

@@ -13,6 +13,10 @@
     "AgentStop",
     "Alert"
   ],
+  "drivenBy": {
+    "hook": "useAgentRun",
+    "note": "`approvalProps` carries the gate's `status`, `isSubmitting` and `resolution`, and `onApprove`/`onReject` when `onDecision` is given. A decision that throws stays pending with `state.approval.error` set — show it, because a decision the server never received must not look made. A stop or an expiry while pending resolves the gate as `expired`, never as approved."
+  },
   "structure": [
     "The gate appears in place, where the run reached it — inside the step log, not in a dialog that covers it.",
     "The AgentActivityStep that is waiting stays `active`; the ApprovalGate is its `detail`.",

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.73.0",
+  "version": "0.76.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "AgentRun": {
@@ -15,6 +15,7 @@
         "Alert",
         "Badge"
       ],
+      "drivenBy": "useAgentRun",
       "states": [
         "loading",
         "empty",
@@ -113,6 +114,7 @@
         "AgentStop",
         "Alert"
       ],
+      "drivenBy": "useAgentRun",
       "states": [
         "loading",
         "empty",

package/dist/styles/chart.css

@@ -0,0 +1,275 @@
+/*
+ * Chart — styling for charts drawn with visx
+ *
+ * IonBase does not draw charts. visx does: it owns scales, shapes, axes and
+ * layout, and this file owns what they look like. Every rule is a class the
+ * product puts on a visx element — `chartAxisProps` and `chartGridProps` carry
+ * the axis and grid ones — so a chart themes with the page like everything
+ * else.
+ *
+ * CSS, NOT PROPS
+ *
+ * visx writes colour as SVG presentation attributes: `stroke="#222"` on an
+ * axis, `fill="#222"` and `font-family="Arial"` on a tick label, `#eaf0f6` on a
+ * grid line. A presentation attribute loses to any CSS declaration, so a class
+ * overrides all of them without a prop — and a CSS `var()` resolves in every
+ * browser, where a var() written into an attribute does not reliably.
+ *
+ * SERIES COLOUR IS ONE CUSTOM PROPERTY
+ *
+ * `.ion-chart-series-<n>` sets `--ion-chart-series` to `--chart-<n>`, and the
+ * line, area, bar, point and swatch rules read it. So a series is coloured in
+ * one place and its line, its points and its legend swatch cannot disagree —
+ * a legend that does not match its line is a chart that lies.
+ */
+
+.ion-chart {
+  display: grid;
+  gap: var(--spacing-12);
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-family-sans);
+}
+
+.ion-chart__caption {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+/* ---------------------------------------------------------------- axes */
+
+/* Tabular figures, so tick values line up down a vertical axis. */
+.ion-chart__tick {
+  fill: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-chart__axis-label {
+  fill: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+}
+
+.ion-chart__axis-line,
+.ion-chart__axis-tick line {
+  stroke: var(--border-default);
+}
+
+/* ---------------------------------------------------- gridlines, markers */
+
+/* visx puts the class on the group; the lines inside inherit nothing. */
+.ion-chart__grid line {
+  stroke: var(--border-subtle);
+}
+
+/* A target, a threshold, an average — a line the data is read against. */
+.ion-chart__reference {
+  stroke: var(--border-stronger);
+  stroke-dasharray: 4 4;
+}
+
+.ion-chart__reference-label {
+  fill: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+}
+
+/* The vertical rule under the pointer while a tooltip is open. */
+.ion-chart__crosshair {
+  stroke: var(--border-strong);
+  pointer-events: none;
+}
+
+/* -------------------------------------------------------------- series */
+
+.ion-chart-series-1 {
+  --ion-chart-series: var(--chart-1);
+}
+
+.ion-chart-series-2 {
+  --ion-chart-series: var(--chart-2);
+}
+
+.ion-chart-series-3 {
+  --ion-chart-series: var(--chart-3);
+}
+
+.ion-chart-series-4 {
+  --ion-chart-series: var(--chart-4);
+}
+
+.ion-chart-series-5 {
+  --ion-chart-series: var(--chart-5);
+}
+
+.ion-chart-series-6 {
+  --ion-chart-series: var(--chart-6);
+}
+
+.ion-chart-series-7 {
+  --ion-chart-series: var(--chart-7);
+}
+
+.ion-chart-series-8 {
+  --ion-chart-series: var(--chart-8);
+}
+
+.ion-chart__line {
+  fill: none;
+  stroke: var(--ion-chart-series, var(--chart-1));
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/*
+ * An area is the series at low opacity. The one place opacity is right: the
+ * fill sits behind its own full-strength line, which carries the 3:1 — the
+ * wash only says "this much".
+ */
+.ion-chart__area {
+  fill: var(--ion-chart-series, var(--chart-1));
+  fill-opacity: 0.16;
+  stroke: none;
+}
+
+.ion-chart__bar {
+  fill: var(--ion-chart-series, var(--chart-1));
+}
+
+/* A hollow point, ringed in the series and filled with the ground. */
+.ion-chart__point {
+  fill: var(--surface-default);
+  stroke: var(--ion-chart-series, var(--chart-1));
+  stroke-width: 2;
+}
+
+.ion-chart__point--active {
+  fill: var(--ion-chart-series, var(--chart-1));
+}
+
+/* ------------------------------------------------------------- heatmap */
+
+.ion-chart__heat--0 {
+  fill: var(--surface-sunken);
+}
+
+.ion-chart__heat--1 {
+  fill: var(--chart-sequential-1);
+}
+
+.ion-chart__heat--2 {
+  fill: var(--chart-sequential-2);
+}
+
+.ion-chart__heat--3 {
+  fill: var(--chart-sequential-3);
+}
+
+.ion-chart__heat--4 {
+  fill: var(--chart-sequential-4);
+}
+
+.ion-chart__heat--5 {
+  fill: var(--chart-sequential-5);
+}
+
+/* -------------------------------------------------------------- swatch */
+
+/* A series key: a square for bars and areas, a short rule for lines. */
+.ion-chart-swatch {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--radius-2xs);
+  background-color: var(--ion-chart-series, var(--chart-1));
+}
+
+.ion-chart-swatch--line {
+  height: 0.1875rem;
+  width: 0.875rem;
+  border-radius: var(--radius-full);
+}
+
+/* -------------------------------------------------------------- legend */
+
+.ion-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4) var(--spacing-16);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-family-sans);
+}
+
+.ion-chart-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+/* ------------------------------------------------------------- tooltip */
+
+/*
+ * The panel Popover and Toast use: raised, a subtle rim and the lg shadow, so
+ * a tooltip over a chart reads as the same family as every other floating
+ * surface. Pass visx's Tooltip `unstyled` and `applyPositionStyle` — this
+ * component is the box, visx only places it.
+ */
+.ion-chart-tooltip {
+  display: grid;
+  gap: var(--spacing-6);
+  min-width: 8rem;
+  max-width: 16rem;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background-color: var(--surface-raised);
+  box-shadow: var(--ion-shadow-shadow-lg);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  pointer-events: none;
+}
+
+.ion-chart-tooltip__title {
+  color: var(--text-default);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-chart-tooltip__rows {
+  display: grid;
+  gap: var(--spacing-4);
+  margin: 0;
+}
+
+.ion-chart-tooltip__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-12);
+}
+
+.ion-chart-tooltip__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.ion-chart-tooltip__value {
+  margin: 0;
+  color: var(--text-default);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}

package/dist/styles/index.css

@@ -92,6 +92,7 @@
 @import url('./date-range-picker.css');
 @import url('./stat-tile.css');
 @import url('./setting-row.css');
+@import url('./chart.css');
 
 /*
  * Visually hidden, but not hidden from assistive tech.

package/dist/styles/nav-item.css

@@ -1,7 +1,7 @@
 /*
  * Nav Item
  *
- * Measured from Figma `Nav Item` (70:22078). Two states only: Default, Hover.
+ * Measured from Figma `Nav Item` (70:22078): Default, Hover and Current.
  *
  * NO BACKGROUND ON HOVER — TEXT AND ICON RECOLOUR ONLY
  *
@@ -33,7 +33,10 @@
   font-family: var(--font-family-sans);
   font-size: var(--type-body-sm);
   line-height: var(--type-body-sm-line-height);
-  font-weight: var(--font-weight-regular);
+
+  /* Figma binds `font/weight/medium` in every state; this read regular from
+     the July package merge until 0.76.0. */
+  font-weight: var(--font-weight-medium);
   text-decoration: none;
   cursor: pointer;
   user-select: none;
@@ -62,6 +65,38 @@
   outline-offset: 2px;
 }
 
+/*
+ * CURRENT — THE TABS UNDERLINE, NOT THE SIDEBAR FILL
+ *
+ * Sidebar marks its current row with `surface/selected`, but NavItem never
+ * fills (see above), so it takes the other current state the system already
+ * has: Tabs' underline — `text/default` over a `border-width/thick` rule in
+ * `border/primary`. The rule is an inset shadow, not a border, so the current
+ * item is exactly as tall as the rest and a nav bar does not jump when the
+ * page changes. The weight does not change either, for the same reason.
+ *
+ * Colour alone would not do: `text/secondary` to `text/default` is a step a
+ * reader can miss. The rule is the part that is not colour.
+ */
+.ion-nav-item--current {
+  color: var(--text-default);
+  box-shadow: inset 0 calc(-1 * var(--border-width-thick)) 0
+    var(--border-primary);
+}
+
+.ion-nav-item--current .ion-nav-item__icon {
+  color: var(--icon-primary);
+}
+
+/* Forced colours drop box-shadow, which would erase the indicator entirely. */
+@media (forced-colors: active) {
+  .ion-nav-item--current {
+    text-decoration: underline;
+    text-decoration-thickness: var(--border-width-thick);
+    text-underline-offset: var(--spacing-4);
+  }
+}
+
 .ion-nav-item--disabled,
 .ion-nav-item[data-disabled='true'] {
   color: var(--text-disabled);

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.73.0. 73 components.
+Version 0.76.0. 75 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `NumberInput`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Textarea`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
+`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `ChartLegend`, `ChartTooltip`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `NumberInput`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Textarea`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
 
 ## Patterns
 
@@ -23,13 +23,21 @@ Compositions of the components above, in `dist/meta/patterns/`. Read `dist/meta/
 
 ## Drawing a chart?
 
-There is no chart component — use your charting library, and colour it from these tokens so it themes and passes contrast:
+Draw it with visx — IonBase does not draw charts and does not depend on visx — and style it with these, so it themes and passes contrast:
 
+- `<AxisBottom {...chartAxisProps} />`, `<GridRows {...chartGridProps} />` — axes and gridlines take the tokens instead of the `#222` visx writes.
+- `className={chartSeriesClass(n)}` on a series group, with `ion-chart__line`, `__area`, `__bar` or `__point` on its marks; `ion-chart__reference` for a target line; `ion-chart__heat--0…5` for a heatmap cell.
+- `ChartTooltip` inside `<TooltipWithBounds {...chartTooltipProps}>`, and `ChartLegend` for more than one series. Read their contracts.
+- Always a text summary and the values in a table: the tooltip is pointer-only.
 - `--chart-1` … `--chart-8` — categorical series, in order. Each clears 3:1 against `--surface-default`, `--surface-page` and `--surface-raised` in Light and Dark. Set them as CSS `fill` / `stroke`, not SVG attributes, which do not reliably resolve `var()`.
 - `--chart-sequential-1` … `--chart-sequential-5` — one hue, low to high, for magnitude (a heatmap). Use `--surface-sunken` for zero. Do not fake a ramp with opacity: it reads differently on every ground.
 - **Bin a wide range into the five steps; do not ask for more.** Like GitHub's contribution graph (four steps and empty): zero is its own level, and the non-zero values split into five equal groups by rank, each cut the top of its group — rank, so one outlier does not flatten the rest. Past five to seven steps of one hue, readers cannot tell neighbours apart.
 - **Continuous scale?** Blend neighbouring steps in CSS, which still themes: `color-mix(in oklab, var(--chart-sequential-2) 60%, var(--chart-sequential-3))`. A JS colour scale cannot read `var()`. Pair it with a labelled axis or tooltip.
 
+## Driving an agent run?
+
+Do not hand-build the state behind AgentActivity, ApprovalGate, StreamingText and AgentStop. `useAgentRun()` takes the events a run reports — `step-started`, `approval-requested`, `output`, `run-stopped` and the rest — and returns `log`, `stopProps`, `outputProps` and `approvalProps` to spread. It applies the AgentRun and HumanApproval patterns: one active step, a stop keeps what was done, an unanswered approval is never a yes. `replay(recording)` plays a stored run; `agentRunFrom(events)` rebuilds a finished one. The full event list is in `dist/meta/patterns/AgentRun.json` under `drivenBy`.
+
 ## Coming from a Figma design?
 
 `dist/figma-map.json` maps every Figma component and node id in the IonBase library to the React component and the real props — what Code Connect does, without needing an Organization plan. Look up the node id or the component name rather than guessing from a screenshot.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.73.0",
+  "version": "0.76.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",