@tangle-network/ui 11.2.4 → 11.4.0

package/dist/primitives.d.ts

@@ -336,4 +336,174 @@ declare function useTheme(): {
 };
 declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };
+/**
+ * The one masthead every console page opens with.
+ *
+ * A page identifies itself in three separate registers, and each gets its own
+ * slot here so they cannot compete for the same one:
+ *
+ *   - `title` — what the page IS. The `<h1>`, and the only `<h1>`.
+ *   - `description` — one line on what it is for. Prose belongs here, never in
+ *     the title slot: a paragraph rendered where a heading goes reads as body
+ *     copy to a sighted reader and as nothing at all to a screen reader, which
+ *     is how a page ends up with no accessible name.
+ *   - `actions` — what the reader can DO from here, right-aligned and wrapping
+ *     under the title on a narrow viewport rather than squeezing it.
+ *
+ * `meta` is the fourth register and the one most often missing: the small facts
+ * that qualify everything below (a count, a scope, a window). They sit on their
+ * own line under the title so a reader can tell the difference between "this
+ * page has nothing in it" and "this filter matches nothing".
+ *
+ * `titleId` is exposed so a page can point `aria-labelledby` at the heading
+ * from a region further down without minting a second copy of the string.
+ */
+interface PageHeaderProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    actions?: React$1.ReactNode;
+    meta?: React$1.ReactNode;
+    titleId?: string;
+    /** Renders the title one step down for a nested/tab surface. */
+    level?: 1 | 2;
+}
+declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * A run/resource state, told three ways at once.
+ *
+ * Status is the one place a console cannot afford to speak in colour alone: a
+ * red dot and a green dot are the same dot to roughly one man in twelve, and
+ * identical in a greyscale print or a screenshot pasted into a ticket. So every
+ * pill carries all three channels — a GLYPH whose silhouette differs per tone,
+ * the tone's COLOUR, and the state's own LABEL as text.
+ *
+ * The glyphs are chosen to survive at 8px and to differ in outline rather than
+ * in fill: a ring reads as "still open", a solid disc as "settled", a slashed
+ * disc as "stopped". Two states never share one silhouette.
+ *
+ * Each tone draws its fill, border and text from ONE matched token triple.
+ * That pairing is the whole point: a status colour is solved against its own
+ * background, and nothing guarantees it against an arbitrary one. A component
+ * that always brings its own background cannot be placed onto a plane that
+ * breaks it.
+ */
+type StatusTone = "success" | "warning" | "danger" | "info" | "neutral" | "running";
+interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+    tone: StatusTone;
+    children: React$1.ReactNode;
+    /**
+     * Drops the fill and border, leaving a toned GLYPH beside a label in the
+     * inherited body colour.
+     *
+     * The label deliberately does not keep the tone. Every status text token
+     * clears the 4.5:1 body floor on the page canvas — a gate holds them there —
+     * but in light the margin is thin (4.51:1 for warning, 4.54:1 for success),
+     * and the canvas is only one of the planes a caller can put a pill on. The
+     * glyph keeps the tone instead because a glyph is non-text content against a
+     * 3:1 floor, so the tone still reads with room to spare on any plane.
+     *
+     * For a control that supplies its own surface (a chip, a selected row).
+     */
+    bare?: boolean;
+    size?: "sm" | "md";
+}
+declare const StatusPill: React$1.ForwardRefExoticComponent<StatusPillProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * The headline figures for a console page, as ONE statement rather than four.
+ *
+ * A row of separate stat cards is the default and it is usually wrong here.
+ * Each card is a box that must be tall enough for its longest member, so a row
+ * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
+ * mostly empty; and four bordered boxes read as four unrelated facts when they
+ * are four readings of one account. `MetricStrip` puts them on one plane
+ * divided by hairlines: same information, one object, no holes.
+ *
+ * The divider is a border on the item rather than a `divide-*` utility on the
+ * parent, because these wrap. `divide-x` draws from DOM order and leaves a
+ * stray rule at the start of every wrapped line; a per-item leading border
+ * suppressed at each row start does not.
+ */
+interface MetricStripProps extends React$1.HTMLAttributes<HTMLDListElement> {
+    children: React$1.ReactNode;
+}
+declare const MetricStrip: React$1.ForwardRefExoticComponent<MetricStripProps & React$1.RefAttributes<HTMLDListElement>>;
+interface MetricProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label: React$1.ReactNode;
+    value: React$1.ReactNode;
+    /** The qualifying line: which wallet, which window, what the limit is. */
+    hint?: React$1.ReactNode;
+    /** Raises the value's tone and shows a pill beside the label. A metric is
+     *  `attention` only when a person has to DO something — not merely when a
+     *  number is zero. */
+    attention?: {
+        tone: StatusTone;
+        label: string;
+    };
+}
+/**
+ * One reading inside a `MetricStrip`.
+ *
+ * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
+ * described term rather than as two loose strings — the semantic that makes a
+ * figure legible without the visual grouping.
+ *
+ * The value is `tabular-nums`: these sit in a row and change on a timer, and
+ * proportional digits make the column jitter every time a 1 becomes an 8.
+ */
+declare const Metric: React$1.ForwardRefExoticComponent<MetricProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The control row above a table or list: search, filters, then the view switch.
+ *
+ * It exists because the alternative keeps producing the same two failures. A
+ * bare flex row gives every control its natural width, so a search field sits
+ * at 1120px on one line and three selects stack full-width beneath it — three
+ * enormous empty bars where a compact bar belongs. And each control brought its
+ * own visual language, so one row carried a native `<select>`, a custom input
+ * and a segmented control side by side.
+ *
+ * So search and filters SHARE the free space and `actions` stays at its content
+ * width, and the row is the one place those controls are composed, which is what
+ * keeps them looking like one set.
+ *
+ * Sharing is deliberate, and the alternative is worse. Giving the filter row its
+ * content width starves search: measured with a 537px filter row in an 832px
+ * toolbar, the search field collapses to 89px. Letting both flex bounds the
+ * filter row instead, so it scrolls within its half — 313px each in that same
+ * case — and search stays usable however many filters a page adds. `max-w-sm`
+ * then stops search claiming more than it can use when there are few filters.
+ *
+ * On a narrow viewport the row becomes a column and the filters scroll
+ * horizontally as a group rather than wrapping into a tall stack that pushes
+ * the table itself below the fold.
+ */
+/**
+ * Slots only — `children` is omitted deliberately. A free child would render as
+ * a bare flex item with none of the `min-w-0` / `shrink-0` guards the named
+ * slots carry, so it would size itself off its content and push the row into
+ * the overflow this layout exists to prevent.
+ */
+interface ToolbarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The one control that expands to fill the row. */
+    search?: React$1.ReactNode;
+    /** Filters, in reading order. Kept on one scrollable line when space runs out. */
+    filters?: React$1.ReactNode;
+    /** View switches and exports, pinned to the end. */
+    actions?: React$1.ReactNode;
+}
+declare const Toolbar: React$1.ForwardRefExoticComponent<ToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A labelled filter control. The label is visible, not a placeholder: a select
+ * whose current value IS its label ("All products") tells the reader what is
+ * selected but never what the control governs, so a row of three reads as three
+ * unrelated words.
+ */
+interface FilterFieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    htmlFor?: string;
+}
+declare const FilterField: React$1.ForwardRefExoticComponent<FilterFieldProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };

package/dist/primitives.js

@@ -11,9 +11,13 @@ import {
   DialogTrigger,
   DropZone,
   EmptyState,
+  FilterField,
   Input,
   Label,
   Logo,
+  Metric,
+  MetricStrip,
+  PageHeader,
   Progress,
   SegmentedControl,
   Select,
@@ -31,6 +35,7 @@ import {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   TangleKnot,
   TerminalCursor,
@@ -41,10 +46,11 @@ import {
   ThemeToggle,
   ToastContainer,
   ToastProvider,
+  Toolbar,
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-HSMVDKL3.js";
+} from "./chunk-EJ5NBW7V.js";
 import {
   Avatar,
   AvatarFallback,
@@ -144,10 +150,14 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EmptyState,
+  FilterField,
   InlineCode,
   Input,
   Label,
   Logo,
+  Metric,
+  MetricStrip,
+  PageHeader,
   Progress,
   SegmentedControl,
   Select,
@@ -165,6 +175,7 @@ export {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   Table,
   TableBody,
@@ -187,6 +198,7 @@ export {
   ThemeToggle,
   ToastContainer,
   ToastProvider,
+  Toolbar,
   UploadProgress,
   badgeVariants,
   buttonVariants,

package/dist/redaction.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+/**
+ * Viewer for a server-produced redacted document. Renders text inline and each
+ * redacted span as a masked chip; clicking a chip asks the server to reveal that
+ * one span. The original plaintext is NEVER in the document the client holds —
+ * the chip carries only an id + kind; `onReveal` round-trips to the server, where
+ * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
+ * and writes the audit trail. So authz + audit are server-truth; this is display.
+ *
+ * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
+ * only `{ id, kind }` per span; the cipher stays server-side.
+ */
+type RedactedDocSegment = {
+    type: "text";
+    text: string;
+} | {
+    type: "redacted";
+    id: string;
+    kind: string;
+};
+interface RedactedDocumentData {
+    segments: RedactedDocSegment[];
+}
+interface RevealResult {
+    ok: boolean;
+    value?: string;
+    /** e.g. `forbidden` | `not_found` when `ok` is false. */
+    reason?: string;
+}
+interface RedactedDocumentProps {
+    document: RedactedDocumentData;
+    /** Reveal one span by id. Wire to a server route that calls agent-app's
+     *  `revealSpan` (authz + audit happen there). Resolves with the original. */
+    onReveal: (spanId: string) => Promise<RevealResult>;
+    /** Display label for a redaction kind (default: the kind, upper-cased). */
+    labelForKind?: (kind: string) => string;
+    className?: string;
+}
+declare function RedactedDocument({ document, onReveal, labelForKind, className, }: RedactedDocumentProps): ReactNode;
+
+export { type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, type RevealResult };

package/dist/redaction.js

@@ -0,0 +1,7 @@
+import {
+  RedactedDocument
+} from "./chunk-HGML45QH.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  RedactedDocument
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.2.4",
+  "version": "11.4.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -101,6 +101,11 @@
       "types": "./dist/nav.d.ts",
       "import": "./dist/nav.js",
       "default": "./dist/nav.js"
+    },
+    "./redaction": {
+      "types": "./dist/redaction.d.ts",
+      "import": "./dist/redaction.js",
+      "default": "./dist/redaction.js"
     }
   },
   "dependencies": {
@@ -141,7 +146,7 @@
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
     "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.3.0"
+    "@tangle-network/brand": "^1.5.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/primitives/index.ts

@@ -118,3 +118,15 @@ export { CodeBlock, CopyButton, InlineCode } from "./code-block";
 export type { CodeBlockProps, InlineCodeProps } from "./code-block";
 
 export { ThemeToggle, useTheme } from "./theme-toggle";
+
+export { PageHeader } from "./page-header";
+export type { PageHeaderProps } from "./page-header";
+
+export { StatusPill } from "./status-pill";
+export type { StatusPillProps, StatusTone } from "./status-pill";
+
+export { MetricStrip, Metric } from "./metric-strip";
+export type { MetricStripProps, MetricProps } from "./metric-strip";
+
+export { Toolbar, FilterField } from "./toolbar";
+export type { ToolbarProps, FilterFieldProps } from "./toolbar";

package/src/primitives/metric-strip.test.tsx

@@ -0,0 +1,181 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Metric, MetricStrip } from "./metric-strip";
+
+describe("MetricStrip", () => {
+  it("pairs each label with its value as a described term", () => {
+    render(
+      <MetricStrip>
+        <Metric label="Balance" value="$248.55" />
+      </MetricStrip>,
+    );
+    // The label is wrapped for truncation, so assert the term it belongs to.
+    expect(screen.getByText("Balance").closest("dt")).not.toBeNull();
+    expect(screen.getByText("$248.55").tagName).toBe("DD");
+  });
+
+  // axe's `definition-list` rule allows only dt, dd, script, template and div
+  // as direct children of a dl. The hint is a second dd for this reason: a <p>
+  // between the terms is a violation, and it was one.
+  it("puts only permitted elements directly inside the dl", () => {
+    const { container } = render(
+      <MetricStrip>
+        <Metric label="Spend" value="$12.00" hint="This month" />
+        <Metric label="Runs" value="41" />
+      </MetricStrip>,
+    );
+    const dl = container.querySelector("dl") as HTMLElement;
+    const permitted = new Set(["DT", "DD", "SCRIPT", "TEMPLATE", "DIV"]);
+    for (const child of Array.from(dl.children)) {
+      expect(permitted).toContain(child.tagName);
+    }
+  });
+
+  it("renders the hint as a dd rather than a paragraph", () => {
+    render(
+      <MetricStrip>
+        <Metric label="Spend" value="$12.00" hint="Personal wallet" />
+      </MetricStrip>,
+    );
+    const hint = screen.getByText("Personal wallet");
+    expect(hint.tagName).toBe("DD");
+  });
+
+  it("omits the hint entirely when not given", () => {
+    const { container } = render(
+      <MetricStrip>
+        <Metric label="Runs" value="41" />
+      </MetricStrip>,
+    );
+    expect(container.querySelectorAll("dd")).toHaveLength(1);
+  });
+
+  // `attention` means a person has to do something, so it shows a pill next to
+  // the label. A zero on its own is not attention.
+  it("shows a pill beside the label only when attention is set", () => {
+    const { rerender, container } = render(
+      <MetricStrip>
+        <Metric label="Balance" value="$0.00" />
+      </MetricStrip>,
+    );
+    expect(container.querySelector("svg")).toBeNull();
+
+    rerender(
+      <MetricStrip>
+        <Metric
+          attention={{ tone: "danger", label: "Empty" }}
+          label="Balance"
+          value="$0.00"
+        />
+      </MetricStrip>,
+    );
+    expect(screen.getByText("Empty")).toBeInTheDocument();
+    expect(container.querySelector("svg")).not.toBeNull();
+  });
+
+  it("raises the value's tone only for a danger attention", () => {
+    const { container } = render(
+      <MetricStrip>
+        <Metric
+          attention={{ tone: "danger", label: "Empty" }}
+          label="Balance"
+          value="$0.00"
+        />
+      </MetricStrip>,
+    );
+    const value = screen.getByText("$0.00");
+    expect(value.className).toContain("--surface-danger-text");
+    expect(container.querySelectorAll("dd")).toHaveLength(1);
+  });
+
+  // The divider is drawn only where it belongs, never drawn and then
+  // suppressed: `border-l` alongside `border-l-0` variants puts both in one
+  // conflict group whose winner is decided by emitted-rule order, and that
+  // resolved the wrong way at every breakpoint — every item kept a left border,
+  // including the first in each row.
+  it("draws the divider without a suppressing counterpart", () => {
+    const { container } = render(
+      <MetricStrip>
+        <Metric label="Balance" value="$0.00" />
+      </MetricStrip>,
+    );
+    const item = (container.querySelector("dl") as HTMLElement)
+      .children[0] as HTMLElement;
+    expect(item.className).not.toContain("border-l-0");
+  });
+
+  // The row-start test has to name the same column count the grid does, at each
+  // breakpoint. Nothing in the type system ties them together, so changing the
+  // grid to three columns without moving the divider puts a rule mid-row. Read
+  // both out of the rendered classes and require them to agree, so the coupling
+  // is enforced rather than only described.
+  it("keeps the divider's row-start test matching the grid's column count", () => {
+    const { container } = render(
+      <MetricStrip>
+        <Metric label="Balance" value="$0.00" />
+      </MetricStrip>,
+    );
+    const dl = container.querySelector("dl") as HTMLElement;
+    const item = dl.children[0] as HTMLElement;
+
+    // `grid-cols-N` unprefixed is the base breakpoint; `<bp>:grid-cols-N` is that
+    // breakpoint. The divider spells the same breakpoints as `max-<bp>:` / `<bp>:`.
+    const columnsAt = (prefix: string) => {
+      const re = prefix
+        ? new RegExp(`(?:^| )${prefix}:grid-cols-(\\d+)(?: |$)`)
+        : /(?:^| )grid-cols-(\d+)(?: |$)/;
+      const m = dl.className.match(re);
+      return m ? Number(m[1]) : null;
+    };
+    const modulusAt = (prefix: string) => {
+      const m = item.className.match(
+        new RegExp(`(?:^| )${prefix}:\\[&:not\\(:nth-child\\((\\d+)n\\+1\\)\\)\\]:border-l(?: |$)`),
+      );
+      return m ? Number(m[1]) : null;
+    };
+
+    // base grid (below sm) is guarded by the `max-sm:` divider rule
+    expect(modulusAt("max-sm")).toBe(columnsAt(""));
+    // the `sm:` grid is guarded by the `sm:` divider rule
+    expect(modulusAt("sm")).toBe(columnsAt("sm"));
+
+    // Every grid-cols breakpoint the strip declares must have a divider rule.
+    const declared = [...dl.className.matchAll(/(?:^| )(?:([a-z]+):)?grid-cols-\d+(?= |$)/g)]
+      .map((m) => m[1] ?? "");
+    for (const bp of declared) {
+      const guard = bp === "" ? "max-sm" : bp;
+      expect(
+        modulusAt(guard),
+        `grid-cols at "${bp || "base"}" has no matching ${guard}: divider rule`,
+      ).not.toBeNull();
+    }
+  });
+
+  it("titles the hint too, so a truncated qualifier stays recoverable", () => {
+    render(
+      <MetricStrip>
+        <Metric
+          hint="Personal wallet (0x1234abcd5678efgh)"
+          label="Balance"
+          value="$248.55"
+        />
+      </MetricStrip>,
+    );
+    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute(
+      "title",
+      "Personal wallet (0x1234abcd5678efgh)",
+    );
+  });
+
+  it("titles a string value so a truncated figure stays readable", () => {
+    render(
+      <MetricStrip>
+        <Metric label="Balance" value="$1,284,003.10" />
+      </MetricStrip>,
+    );
+    expect(screen.getByText("$1,284,003.10")).toHaveAttribute(
+      "title",
+      "$1,284,003.10",
+    );
+  });
+});

package/src/primitives/metric-strip.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { StatusPill, type StatusTone } from "./status-pill";
+
+/**
+ * The headline figures for a console page, as ONE statement rather than four.
+ *
+ * A row of separate stat cards is the default and it is usually wrong here.
+ * Each card is a box that must be tall enough for its longest member, so a row
+ * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
+ * mostly empty; and four bordered boxes read as four unrelated facts when they
+ * are four readings of one account. `MetricStrip` puts them on one plane
+ * divided by hairlines: same information, one object, no holes.
+ *
+ * The divider is a border on the item rather than a `divide-*` utility on the
+ * parent, because these wrap. `divide-x` draws from DOM order and leaves a
+ * stray rule at the start of every wrapped line; a per-item leading border
+ * suppressed at each row start does not.
+ */
+export interface MetricStripProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  children: React.ReactNode;
+}
+
+const MetricStrip = React.forwardRef<HTMLDListElement, MetricStripProps>(
+  ({ className, children, ...props }, ref) => (
+    <dl
+      ref={ref}
+      className={cn(
+        "grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </dl>
+  ),
+);
+MetricStrip.displayName = "MetricStrip";
+
+export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** The qualifying line: which wallet, which window, what the limit is. */
+  hint?: React.ReactNode;
+  /** Raises the value's tone and shows a pill beside the label. A metric is
+   *  `attention` only when a person has to DO something — not merely when a
+   *  number is zero. */
+  attention?: { tone: StatusTone; label: string };
+}
+
+/**
+ * One reading inside a `MetricStrip`.
+ *
+ * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
+ * described term rather than as two loose strings — the semantic that makes a
+ * figure legible without the visual grouping.
+ *
+ * The value is `tabular-nums`: these sit in a row and change on a timer, and
+ * proportional digits make the column jitter every time a 1 becomes an 8.
+ */
+const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
+  ({ className, label, value, hint, attention, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        // Leading hairline, DRAWN only where a divider belongs — never drawn
+        // and then suppressed. Stating it as `border-l` plus `border-l-0`
+        // variants puts both in one conflict group, where the winner is decided
+        // by emitted-rule order rather than by intent; that resolved the wrong
+        // way at every breakpoint and left a rule down the start of each row.
+        // `:not(:nth-child(Nn+1))` is the row-start test for the column count
+        // at that breakpoint, so no rule ever contradicts another.
+        //
+        // N is COUPLED to the grid template on `MetricStrip`: 2 columns below
+        // `sm`, 4 from `sm`. A new breakpoint there — `md:grid-cols-3`, say —
+        // needs its `md:[&:not(:nth-child(3n+1))]:border-l` here in the same
+        // change, or the dividers land mid-row at that width.
+        "border-border p-4 sm:p-5",
+        "max-sm:[&:not(:nth-child(2n+1))]:border-l",
+        "sm:[&:not(:nth-child(4n+1))]:border-l",
+        className,
+      )}
+      {...props}
+    >
+      <dt className="flex items-center gap-2 text-muted-foreground text-sm">
+        <span className="truncate">{label}</span>
+        {attention && (
+          <StatusPill tone={attention.tone}>{attention.label}</StatusPill>
+        )}
+      </dt>
+      {/* `truncate`, and a step down until the column is wide enough for the
+          longest figure this strip carries. A balance renders as "$248.55" on a
+          funded account and as "$1,284,003.10" on a busy one, and at four
+          columns the wide case has nowhere to go — it either overflows its cell
+          or pushes the whole strip past the page. */}
+      <dd
+        className={cn(
+          "mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+          attention?.tone === "danger" && "text-[var(--surface-danger-text)]",
+        )}
+        title={typeof value === "string" ? value : undefined}
+      >
+        {value}
+      </dd>
+      {hint && (
+        // Titled for the same reason the value is: the line truncates, and a
+        // hint is where the qualifying detail lives — which wallet, which
+        // window — so a clipped one is the case most worth recovering.
+        <dd
+          className="mt-0.5 truncate text-[var(--text-dim)] text-xs"
+          title={typeof hint === "string" ? hint : undefined}
+        >
+          {hint}
+        </dd>
+      )}
+    </div>
+  ),
+);
+Metric.displayName = "Metric";
+
+export { Metric, MetricStrip };