@tangle-network/ui 11.14.0 → 11.15.1

package/src/chat/synthetic-text.tsx

@@ -0,0 +1,51 @@
+import type { SessionPart } from "../types/parts";
+
+/** Internal transcript chrome, never attributed to a user or model. */
+export function SyntheticText({ text }: { text: string }) {
+  if (!text.trim()) return null;
+  return (
+    <div
+      role="note"
+      aria-label="Application note"
+      data-synthetic-text=""
+      className="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
+    >
+      <div className="mb-1 font-medium">Application note</div>
+      {/* Plain React text: receipts are not Markdown or executable OpenUI. */}
+      <div className="break-words whitespace-pre-wrap">{text}</div>
+    </div>
+  );
+}
+
+export interface UserTextSegment {
+  /** Original part index, so subsequent streamed parts do not change keys. */
+  index: number;
+  synthetic: boolean;
+  text: string;
+}
+
+/** Keep the existing joined user bubble, splitting only at application notes. */
+export function userTextSegments(parts: SessionPart[]): UserTextSegment[] {
+  const segments: UserTextSegment[] = [];
+  let pending: string[] = [];
+  let start = 0;
+  const flush = () => {
+    const text = pending.join("\n");
+    if (text.trim()) segments.push({ index: start, synthetic: false, text });
+    pending = [];
+  };
+  parts.forEach((part, index) => {
+    if (part.type !== "text") return;
+    if (part.synthetic) {
+      flush();
+      if (part.text.trim()) {
+        segments.push({ index, synthetic: true, text: part.text });
+      }
+    } else {
+      if (pending.length === 0) start = index;
+      pending.push(part.text);
+    }
+  });
+  flush();
+  return segments;
+}

package/src/chat/user-message.tsx

@@ -1,6 +1,7 @@
 import { memo, type ReactNode } from "react";
 import type { SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
+import { SyntheticText, userTextSegments } from "./synthetic-text";
 
 export interface UserMessageProps {
   /** Session-model input: text is derived from these parts. */
@@ -16,47 +17,64 @@ function formatTime(date: Date): string {
   return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
 }
 
+function MessageActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+function UserBubble({ text, timestamp, actions }: {
+  text: string;
+  timestamp?: Date;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex justify-end">
+      <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
+        <div className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background">
+          {timestamp ? (
+            <span
+              data-user-message-time=""
+              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+            >
+              {formatTime(timestamp)}
+            </span>
+          ) : null}
+          <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
+            {text}
+          </div>
+        </div>
+        {actions ? <MessageActions>{actions}</MessageActions> : null}
+      </div>
+    </div>
+  );
+}
+
 /**
- * The single user message bubble uses inverse theme colors. The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
+ * User speech retains the inverse-theme bubble and direct-content contract.
+ * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export const UserMessage = memo(
   ({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => {
-    const text =
-      content ??
-      (parts ?? [])
-        .filter((p) => p.type === "text")
-        .map((p) => (p as { text: string }).text)
-        .join("\n");
-
-    if (!text.trim()) return null;
-
+    // Explicit direct content (including empty content) still overrides parts.
+    if (content != null) {
+      return content.trim() ? <UserBubble text={content} timestamp={timestamp} actions={actions} /> : null;
+    }
+    const segments = userTextSegments(parts ?? []);
+    if (segments.length === 0) return null;
+    if (segments.length === 1 && !segments[0].synthetic) {
+      return <UserBubble text={segments[0].text} timestamp={timestamp} actions={actions} />;
+    }
     return (
-      <div className="flex justify-end">
-        <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
-          <div
-            className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"
-          >
-            {timestamp ? (
-              <span
-                data-user-message-time=""
-                className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
-              >
-                {formatTime(timestamp)}
-              </span>
-            ) : null}
-            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
-              {text}
-            </div>
-          </div>
-          {actions ? (
-            <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
-              {actions}
-            </div>
-          ) : null}
-        </div>
+      <div className="space-y-2">
+        {segments.map((segment) => segment.synthetic ? (
+          <SyntheticText key={segment.index} text={segment.text} />
+        ) : (
+          <UserBubble key={segment.index} text={segment.text} timestamp={timestamp} />
+        ))}
+        {actions ? <MessageActions>{actions}</MessageActions> : null}
       </div>
     );
   },

package/src/lib/control-presentation.ts

@@ -0,0 +1,26 @@
+import { focusField } from "./focus";
+import { cn } from "./utils";
+
+// Time-valued tokens only: --transition-fast is a legacy duration + easing
+// shorthand, not a valid transition-duration. Reuse Brand's scoped vocabulary.
+export const controlMotion =
+  "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+
+// Explicit opt-in sizes. Legacy defaults and sm/lg/icon sizes stay unchanged.
+// Compact follows the consumer's density token; touch does not shrink with it.
+export const controlSizes = {
+  compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+  touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",
+} as const;
+
+// --input is the shadcn border/track role, NOT a field background. --bg-input
+// resolves the recessed well inside every canonical/named light/dark scope.
+// An autofill inset shadow coexists with the Tailwind focus ring; never hide
+// autofill with a seconds-long background transition or clear the focus halo.
+export const fieldPresentation = cn(
+  focusField,
+  controlMotion,
+  "min-w-0 bg-[var(--bg-input)] text-foreground",
+  "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]",
+  "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]",
+);

package/src/primitives/button.tsx

@@ -1,27 +1,28 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
+import { controlMotion, controlSizes } from "../lib/control-presentation";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 const buttonVariants = cva(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
         outline:
-          "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
+          "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
         secondary:
-          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
         ghost:
-          "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
-        link: "text-primary underline-offset-4 hover:underline",
+          "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
+        link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
         sandbox:
-          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
+          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
       },
       size: {
         default: "h-[var(--control-height)] px-4 py-2",
@@ -29,6 +30,7 @@ const buttonVariants = cva(
         lg: "h-11 rounded-lg px-7 text-sm",
         xl: "h-13 rounded-xl px-9 text-base",
         icon: "h-[var(--control-height)] w-[var(--control-height)]",
+        ...controlSizes,
       },
     },
     defaultVariants: {
@@ -41,7 +43,7 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | null;
+  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/src/primitives/control-presentation.stories.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Input, Textarea } from "./input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Metric, MetricStrip } from "./metric-strip";
+
+function Contract() {
+  const [actions, setActions] = React.useState(0);
+  const [choice, setChoice] = React.useState("one");
+  return (
+    <main className="mx-auto max-w-5xl space-y-6 bg-background p-4 text-foreground" data-presentation-contract>
+      <h1 className="text-xl font-semibold">Field and metric presentation</h1>
+      {(["default", "compact", "touch"] as const).map((size) => (
+        <section key={size} data-size-row={size} className="space-y-2">
+          <h2 className="font-semibold">{size}</h2>
+          <div className="flex flex-wrap items-end gap-3">
+            <Input size={size} aria-label={`${size} field`} placeholder="Project name" className="w-48 max-w-full" />
+            <Select value={choice} onValueChange={setChoice}>
+              <SelectTrigger size={size} aria-label={`${size} choice`} className="w-48 max-w-full"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="one">First account</SelectItem>
+                <SelectItem value="two">Second account with a descriptive long name</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size={size} onClick={() => setActions((value) => value + 1)}>Save</Button>
+          </div>
+          <Textarea size={size} aria-label={`${size} notes`} placeholder="Details" />
+        </section>
+      ))}
+      <section className="space-y-2" data-state-controls>
+        <h2 className="font-semibold">States and actions</h2>
+        <Input label="Email" autoComplete="email" name="email" defaultValue="reader@example.test" />
+        <Input label="Invalid field" hint="The hint remains available" error="Please correct this value" defaultValue="invalid" />
+        <Input label="Disabled field" disabled defaultValue="Unavailable" />
+        <div className="flex flex-wrap gap-3">
+          <Button loading data-pending>Publish</Button>
+          <Button disabled>Disabled action</Button>
+          <Button variant="link" data-link-action onClick={() => setActions((value) => value + 1)}>Review details</Button>
+          <Button asChild loading><a href="#unavailable" data-pending-link>Pending link</a></Button>
+          <Button size="touch" className="h-auto max-w-full whitespace-normal" data-long-action onClick={() => setActions((value) => value + 1)}>Save changes and return to the organization workspace</Button>
+        </div>
+        <output data-action-count>{actions}</output>
+        <output data-choice>{choice}</output>
+      </section>
+      <section data-density style={{ "--control-height": "32px" } as React.CSSProperties} className="flex flex-wrap gap-3">
+        <Input size="compact" aria-label="Dense field" className="w-48" />
+        <Select><SelectTrigger size="compact" aria-label="Dense choice" className="w-48"><SelectValue placeholder="Choose" /></SelectTrigger></Select>
+        <Button size="compact">Dense action</Button>
+        <Button size="touch">Touch action</Button>
+      </section>
+      <section data-theme="light" className="space-y-3 rounded-lg bg-card p-4 text-foreground" data-scope="light">
+        <Input aria-label="Light island" defaultValue="Light ink and well" />
+        <div data-theme="dark" className="space-y-3 rounded-lg bg-card p-4 text-foreground" data-scope="dark">
+          <Input aria-label="Dark island" defaultValue="Nested dark ink and well" />
+          <div data-theme="aubergine-light" className="rounded-lg bg-card p-4 text-foreground" data-scope="named-light">
+            <Input aria-label="Named island" defaultValue="Nested named light well" />
+          </div>
+        </div>
+      </section>
+      {([3, 4, 5, 6] as const).map((columns) => (
+        <MetricStrip key={columns} columns={columns} data-columns={columns}>
+          {Array.from({ length: columns }, (_, i) => <Metric key={i}
+            label={i === 0 ? "Available balance · Organization operations wallet" : `Metric ${i}`}
+            value={i === 0 ? "$1,284,003.10" : i === 1 ? 0 : i === 2 ? "—" : "12345678901234567890"}
+            hint={i === 0 ? "LongUnbrokenAccountIdentity12345678901234567890" : i === 1 ? 0 : "Current window"} />)}
+        </MetricStrip>
+      ))}
+      <MetricStrip data-legacy-summary className="sm:grid-cols-3">
+        <Metric className="max-sm:col-span-2 max-sm:border-b" label="Total spent" value="$123.45" />
+        <Metric className="max-sm:border-l-0!" label="Calls" value={0} />
+        <Metric className="max-sm:border-l!" label="Average" value="$0.000000" />
+      </MetricStrip>
+    </main>
+  );
+}
+const meta = { title: "Primitives/Control Presentation", component: Contract, parameters: { layout: "fullscreen" } } satisfies Meta<typeof Contract>;
+export default meta;
+export const Presentation: StoryObj<typeof meta> = {};

package/src/primitives/control-presentation.test.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { controlMotion, fieldPresentation } from "../lib/control-presentation";
+import { Button, buttonVariants } from "./button";
+import { Input, Textarea } from "./input";
+import { Select, SelectTrigger, SelectValue } from "./select";
+
+afterEach(cleanup);
+
+describe("shared control presentation", () => {
+  it("uses the field well, not the border/track alias, with scoped foreground and time-only motion", () => {
+    expect(fieldPresentation).toContain("bg-[var(--bg-input)]");
+    expect(fieldPresentation.split(" ")).not.toContain("bg-input");
+    expect(fieldPresentation.split(" ")).not.toContain("bg-card");
+    expect(fieldPresentation).toContain("border-border");
+    expect(fieldPresentation).toContain("text-foreground");
+    expect(fieldPresentation).not.toContain("duration-150");
+    expect(controlMotion).toContain("duration-[var(--duration-fast)]");
+    expect(controlMotion).not.toContain("--transition-fast");
+    expect(controlMotion).toContain("motion-reduce:duration-0");
+  });
+
+  it("keeps original defaults and aligns only explicit compact/touch sizes", () => {
+    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button>Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+    expect(screen.getByLabelText("Input").className.split(" ")).toContain("h-11");
+    expect(screen.getByLabelText("Textarea").className).toContain("min-h-[120px]");
+    expect(screen.getByLabelText("Select").className.split(" ")).toContain("h-9");
+    expect(screen.getByText("Action").className).toContain("h-[var(--control-height)]");
+    for (const size of ["compact", "touch"] as const) {
+      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size}>Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+      for (const name of ["Input", "Select"]) {
+        expect(screen.getByLabelText(name).className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
+        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
+      }
+      expect(screen.getByText("Action").className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
+      expect(screen.getByLabelText("Textarea")).not.toHaveAttribute("size");
+    }
+  });
+
+  it("preserves field and trigger refs, caller overrides, invalid/disabled and autofill attributes", () => {
+    const input = React.createRef<HTMLInputElement>();
+    const textarea = React.createRef<HTMLTextAreaElement>();
+    const trigger = React.createRef<HTMLButtonElement>();
+    render(<><Input ref={input} aria-label="Email" autoComplete="email" aria-invalid className="h-8 bg-card" /><Textarea ref={textarea} aria-label="Notes" disabled /><Select disabled><SelectTrigger ref={trigger} aria-label="Choice" size="touch" className="h-12"><SelectValue placeholder="Choose" /></SelectTrigger></Select></>);
+    expect(input.current).toBe(screen.getByLabelText("Email"));
+    expect(input.current).toHaveAttribute("autocomplete", "email");
+    expect(input.current).toHaveAttribute("aria-invalid", "true");
+    expect(input.current!.className).toContain("autofill:shadow-");
+    expect(input.current!.className.split(" ")).toContain("bg-card");
+    expect(input.current!.className).not.toContain("bg-[var(--bg-input)]");
+    expect(textarea.current).toBeDisabled();
+    expect(trigger.current).toBe(screen.getByLabelText("Choice"));
+    expect(trigger.current).toBeDisabled();
+    expect(trigger.current!.className.split(" ")).toContain("h-12");
+  });
+
+  it("uses accent ink for link actions while retaining filled action foregrounds and scale motion", () => {
+    expect(buttonVariants({ variant: "link" })).toContain("text-[var(--accent-text)]");
+    expect(buttonVariants({ variant: "default" })).toContain("text-primary-foreground");
+    expect(buttonVariants({ variant: "destructive" })).toContain("text-destructive-foreground");
+    expect(buttonVariants({ variant: "sandbox" })).toContain("text-[var(--btn-primary-text)]");
+    expect(buttonVariants()).not.toContain("transition-all");
+    expect(buttonVariants()).toContain("box-shadow,transform,scale");
+    expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
+  });
+});

package/src/primitives/input.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { focusField, focusFieldInvalid } from "../lib/focus";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation";
+import { focusFieldInvalid } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { Label } from "./label";
 
@@ -9,8 +10,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   cn(
-    "flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
-    focusField,
+    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    fieldPresentation,
   ),
   {
     variants: {
@@ -24,6 +25,7 @@ const inputVariants = cva(
         default: "h-11",
         sm: "h-9 px-3",
         lg: "h-12 px-5",
+        ...controlSizes,
       }
     },
     defaultVariants: {
@@ -89,6 +91,8 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
+  /** Opt in to density/typing presentation without changing the default 120px well. */
+  size?: "default" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;
@@ -98,7 +102,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     // `variant` is taken out so it never reaches the DOM element.
     {
-      className, variant: _variant, label, error, hint, id,
+      className, variant: _variant, size = "default", label, error, hint, id,
       "aria-describedby": describedBy, "aria-invalid": invalid, ...props
     },
     ref,
@@ -112,11 +116,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         id={textareaId}
         className={cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm",
+          "flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm",
           "placeholder:text-muted-foreground",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          focusField,
+          fieldPresentation,
           error && focusFieldInvalid,
+          size === "compact" && "min-h-24 px-3 py-2",
+          size === "touch" && "text-base",
           className,
         )}
         ref={ref}

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Metric, MetricStrip } from "./metric-strip";
+
+const meta = {
+  title: "Primitives/MetricStrip",
+  component: MetricStrip,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof MetricStrip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const readings = [
+  { label: "Available balance · project wallet", value: "$1,284,003.10", hint: "This account only; not the organization total" },
+  { label: "Calls", value: 0, hint: "Known zero" },
+  { label: "Pending amount", value: "—", hint: "Not yet available" },
+  { label: "Average cost / call", value: "$0.000123", hint: "Current window" },
+  { label: "LongUnbrokenAccountIdentity1234567890", value: "12345678901234567890", hint: 0 },
+  { label: "Errors requiring review", value: 0, hint: "No inferred warning" },
+];
+
+export const Default: Story = {
+  args: { children: readings.slice(0, 4).map((reading) => <Metric key={reading.label} {...reading} />) },
+};
+
+export const ThreeToSix: Story = {
+  args: { children: null },
+  render: () => (
+    <div className="space-y-6">
+      {([3, 4, 5, 6] as const).map((columns) => (
+        <section key={columns} className="space-y-2">
+          <h2 className="text-lg font-semibold">{columns} metrics</h2>
+          <MetricStrip columns={columns} aria-label={`${columns} metrics`}>
+            {readings.slice(0, columns).map((reading) => <Metric key={reading.label} {...reading} />)}
+          </MetricStrip>
+        </section>
+      ))}
+    </div>
+  ),
+};