ionbase-ui 0.70.0 → 0.75.0

package/dist/meta/index.json

@@ -1,10 +1,23 @@
 {
   "package": "ionbase-ui",
-  "version": "0.70.0",
+  "version": "0.75.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
+    "useAgentRun",
     "useToast"
   ],
+  "helpers": [
+    "agentRunFrom",
+    "agentRunHasEnded",
+    "agentRunLog",
+    "agentRunReducer",
+    "chartAxisProps",
+    "chartGridProps",
+    "chartSeriesClass",
+    "chartTooltipProps",
+    "initialAgentRunState",
+    "replayAgentRun"
+  ],
   "components": {
     "Accordion": {
       "summary": "Sections that collapse, with the document's heading structure intact. Holds the open set and the heading level.",
@@ -235,6 +248,25 @@
       "detail": "dist/meta/Button.json",
       "hasIntent": true
     },
+    "ChartLegend": {
+      "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.",
+      "status": "stable",
+      "variants": {
+        "shape": [
+          "square",
+          "line"
+        ]
+      },
+      "detail": "dist/meta/ChartLegend.json",
+      "hasIntent": true
+    },
+    "ChartTooltip": {
+      "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/ChartTooltip.json",
+      "hasIntent": true
+    },
     "Checkbox": {
       "summary": "A native checkbox with the system's styling, supporting an indeterminate state.",
       "status": "stable",
@@ -705,6 +737,13 @@
       "detail": "dist/meta/Select.json",
       "hasIntent": true
     },
+    "SettingRow": {
+      "summary": "One setting: its name and description on the left, the control on the right — and the control named and described by them automatically.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/SettingRow.json",
+      "hasIntent": true
+    },
     "Sidebar": {
       "summary": "An application's navigation as a column: pinned header and footer that take any component, a scrolling body of titled, collapsible sections, and nested items that expand.",
       "status": "stable",
@@ -752,6 +791,30 @@
       "detail": "dist/meta/Spinner.json",
       "hasIntent": true
     },
+    "StatGroup": {
+      "summary": "A row of StatTiles, as a description list. Wraps on its own — no breakpoints in the caller's code.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/StatGroup.json",
+      "hasIntent": true
+    },
+    "StatTile": {
+      "summary": "One headline figure and how it moved against a comparison period. Good and bad come from `goodWhen`, never from the sign alone.",
+      "status": "stable",
+      "variants": {
+        "changeUnit": [
+          "points",
+          "percent"
+        ],
+        "goodWhen": [
+          "neutral",
+          "up",
+          "down"
+        ]
+      },
+      "detail": "dist/meta/StatTile.json",
+      "hasIntent": true
+    },
     "Stepper": {
       "summary": "Where the user is in a task that has an order. An ordered list of steps, each stating its position and status in text.",
       "status": "stable",

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/SettingsPanel.json

@@ -6,6 +6,7 @@
     "the settings are grouped and the groups are worth naming"
   ],
   "composes": [
+    "SettingRow",
     "Toggle",
     "Checkbox",
     "RadioGroup",
@@ -21,7 +22,7 @@
   ],
   "structure": [
     "Named groups, separated by Divider, each with a heading.",
-    "One row per setting: label and description on the left, control on the right.",
+    "One SettingRow per setting: label and description on the left, control on the right, wired together by the row.",
     "For save-on-submit panels, a save bar that appears only when something is dirty, with save and discard.",
     "Tabs for panels large enough that a single scroll is unreasonable — but never with unsaved changes hidden behind an inactive tab."
   ],

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.70.0",
+  "version": "0.75.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",
@@ -147,6 +149,7 @@
     "SettingsPanel": {
       "summary": "Grouped settings that either apply immediately or are saved together — never both in one panel.",
       "composes": [
+        "SettingRow",
         "Toggle",
         "Checkbox",
         "RadioGroup",

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

@@ -90,6 +90,9 @@
  */
 @import url('./date-picker.css');
 @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/setting-row.css

@@ -0,0 +1,58 @@
+/*
+ * SettingRow
+ *
+ * Promoted from the demo app's settings screen: the name and description on the
+ * left in `text/default` and `text/secondary`, the control on the right, 16px
+ * apart. The label is the Body/Default Semibold rung, the description a step
+ * down on body-sm.
+ *
+ * IT STACKS BY ITS OWN WIDTH
+ *
+ * The demo stacked the row below a 767px VIEWPORT, which is the wrong question:
+ * a settings row in a 360px drawer on a desktop is just as cramped as one on a
+ * phone. The row is a size container and the inner flex reads it, so it stacks
+ * wherever it is narrow. Container queries apply to descendants only, which is
+ * why there is an `__inner` at all.
+ */
+.ion-setting-row {
+  container-type: inline-size;
+  font-family: var(--font-family-sans);
+}
+
+.ion-setting-row__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+}
+
+.ion-setting-row__text {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.ion-setting-row__label {
+  color: var(--text-default);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-setting-row__description {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-setting-row__control {
+  flex-shrink: 0;
+}
+
+@container (width < 30rem) {
+  .ion-setting-row__inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+  }
+}

package/dist/styles/stat-tile.css

@@ -0,0 +1,66 @@
+/*
+ * StatTile, StatGroup
+ *
+ * Promoted from the demo app's Overview KPI row, where the measurements were
+ * settled against a real dashboard rather than invented here: a card on
+ * `surface/default` with a `border/subtle` rule and the `lg` radius, the label
+ * a rung down in `text/secondary`, the figure on the h4 rung, and the change as
+ * a small Badge beside a caption.
+ *
+ * THE GRID NEEDS NO BREAKPOINT
+ *
+ * `auto-fit` with a minimum tile width wraps on its own: four tiles in a row on
+ * a desktop, two on a phone. The minimum is `min(100%, 10rem)` so a single tile
+ * in a container narrower than 10rem shrinks instead of overflowing it.
+ */
+.ion-stat-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  gap: var(--spacing-12);
+  margin: 0;
+}
+
+.ion-stat-tile {
+  display: grid;
+  align-content: start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background-color: var(--surface-default);
+  font-family: var(--font-family-sans);
+}
+
+.ion-stat-tile__label {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-stat-tile__body {
+  display: grid;
+  gap: var(--spacing-6);
+  margin: 0;
+}
+
+/* Tabular figures, so a row of tiles lines its digits up as values change. */
+.ion-stat-tile__value {
+  color: var(--text-default);
+  font-size: var(--type-h4);
+  line-height: var(--type-h4-line-height);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-stat-tile__change {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-6);
+}
+
+.ion-stat-tile__comparison {
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+}

package/dist/styles/tokens/base.css

@@ -214,14 +214,6 @@
   --information-700: #4715b2;
   --information-800: #350e8b;
   --information-900: #260769;
-  --chart-1: #286ef0;
-  --chart-2: #14994e;
-  --chart-3: #4f3cc8;
-  --chart-4: #ea5600;
-  --chart-5: #df2679;
-  --chart-6: #a97a14;
-  --chart-7: #eb3737;
-  --chart-8: #6b7280;
   --base-white: #ffffff;
   --base-black: #000000;
   --alpha-black-05: rgba(0, 0, 0, 0.05);
@@ -256,6 +248,8 @@
   --palette-1-50: #f6f8f9;
   --palette-1-200: #e5e7eb;
   --palette-1-300: #dde0e4;
+  --palette-1-400: #9ca3b0;
+  --palette-1-500: #6b7280;
   --palette-1-600: #4b5563;
   --palette-1-700: #384252;
   --palette-1-800: #1d2735;
@@ -263,6 +257,8 @@
   --palette-2-50: #ebf7ff;
   --palette-2-200: #c7e4fa;
   --palette-2-300: #9fd5f9;
+  --palette-2-400: #609cf0;
+  --palette-2-500: #286ef0;
   --palette-2-600: #1c62e3;
   --palette-2-700: #1541b2;
   --palette-2-800: #0e2d8b;
@@ -270,6 +266,8 @@
   --palette-3-50: #f6f1f8;
   --palette-3-200: #dfd4fc;
   --palette-3-300: #adadf5;
+  --palette-3-400: #9a8ff4;
+  --palette-3-500: #786cdd;
   --palette-3-600: #4f3cc8;
   --palette-3-700: #4715b2;
   --palette-3-800: #350e8b;
@@ -277,6 +275,8 @@
   --palette-4-50: #fdf2f8;
   --palette-4-200: #fbd0e8;
   --palette-4-300: #f9a9d5;
+  --palette-4-400: #f773b7;
+  --palette-4-500: #df2679;
   --palette-4-600: #c3135c;
   --palette-4-700: #a0134b;
   --palette-4-800: #881141;
@@ -284,6 +284,8 @@
   --palette-5-50: #fff6ea;
   --palette-5-200: #fedbb4;
   --palette-5-300: #fdc17c;
+  --palette-5-400: #ef8539;
+  --palette-5-500: #ea5600;
   --palette-5-600: #af3e0e;
   --palette-5-700: #8e2f07;
   --palette-5-800: #671f07;
@@ -291,6 +293,8 @@
   --palette-6-50: #f8fefc;
   --palette-6-200: #c6ebdc;
   --palette-6-300: #82d8b4;
+  --palette-6-400: #39b378;
+  --palette-6-500: #14994e;
   --palette-6-600: #0d7d38;
   --palette-6-700: #076426;
   --palette-6-800: #054d1a;
@@ -298,10 +302,21 @@
   --palette-7-50: #fef1f1;
   --palette-7-200: #fed2d2;
   --palette-7-300: #ffadad;
+  --palette-7-400: #f56b6b;
+  --palette-7-500: #eb3737;
   --palette-7-600: #c61616;
   --palette-7-700: #ad1515;
   --palette-7-800: #850e0e;
   --palette-7-900: #650a0a;
+  --palette-8-50: #fefce7;
+  --palette-8-200: #faef9e;
+  --palette-8-300: #f0dc7a;
+  --palette-8-400: #eac534;
+  --palette-8-500: #c89809;
+  --palette-8-600: #a97a14;
+  --palette-8-700: #91700d;
+  --palette-8-800: #795a0c;
+  --palette-8-900: #6f4815;
   --text-default: #131923;
   --text-secondary: #384252;
   --text-tertiary: #4b5563;
@@ -435,6 +450,19 @@
   --ring-focus: #286ef0;
   --ring-error: #eb3737;
   --ring-offset: #ffffff;
+  --chart-1: #286ef0;
+  --chart-2: #14994e;
+  --chart-3: #4f3cc8;
+  --chart-4: #ea5600;
+  --chart-5: #df2679;
+  --chart-6: #a97a14;
+  --chart-7: #eb3737;
+  --chart-8: #6b7280;
+  --chart-sequential-1: #9fd5f9;
+  --chart-sequential-2: #609cf0;
+  --chart-sequential-3: #286ef0;
+  --chart-sequential-4: #1541b2;
+  --chart-sequential-5: #071e69;
   --grid-margin: 80px;
   --grid-gutter: 24px;
   --grid-columns: 12;