@tangle-network/ui 11.2.4 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 11.3.0
+
+### Minor Changes
+
+- e67a809: Raise the dark surface ladder to AA and add the page-level primitives.
+
+  In the dark spine, `--md3-surface-container-high` and `--md3-surface-container-highest` sat close enough to the ink ramp that `--text-dim` fell under 4.5:1 on them. The ladder is re-spaced and the ink ramp moves with it, so every ink tier clears AA on all five planes.
+
+  Dark status chips keep their hue, drop 14% chroma, and lift the fill to 1.50:1 from the card. A new `--run-mix-*` ramp carries proportional bars, spaced in relative luminance so adjacent segments clear the 3:1 floor for non-text contrast.
+
+  One light token moves: `--surface-warning-text` goes `#b45309` to `#ab4f09`. It is a contrast fix, not a hue change. The old value measured 4.16:1 on the light page canvas, under the 4.5:1 body floor, whenever the colour was used as text away from its own pill background; the new value measures 4.51:1 there and 5.25:1 on the pill. Every other light value is unchanged.
+
+  `@tangle-network/ui` gains four primitives: `PageHeader`, `StatusPill`, `MetricStrip`, and `Toolbar`/`FilterField`. All additive; no existing export changes.
+
 ## 11.2.4
 
 ### Patch Changes

package/dist/{chunk-HSMVDKL3.js → chunk-EJ5NBW7V.js}

@@ -1261,6 +1261,275 @@ function ThemeToggle() {
   );
 }
 
+// src/primitives/page-header.tsx
+import * as React12 from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var PageHeader = React12.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    actions,
+    meta,
+    titleId,
+    level = 1,
+    ...props
+  }, ref) => {
+    const Heading = level === 1 ? "h1" : "h2";
+    return /* @__PURE__ */ jsxs15("header", { ref, className: cn("mb-6", className), ...props, children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-3", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx17(
+            Heading,
+            {
+              id: titleId,
+              className: cn(
+                "text-balance font-semibold tracking-tight",
+                level === 1 ? "text-2xl" : "text-lg"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx17("p", { className: "mt-1 max-w-prose text-muted-foreground text-sm", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap items-center gap-2", children: actions })
+      ] }),
+      meta && /* @__PURE__ */ jsx17("div", { className: "mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--text-dim)] text-xs", children: meta })
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+
+// src/primitives/status-pill.tsx
+import * as React13 from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var TONE_SURFACE = {
+  success: "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] border-[var(--surface-success-border)]",
+  warning: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border-[var(--surface-warning-border)]",
+  danger: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border-[var(--surface-danger-border)]",
+  info: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+  // `running` shares the info triple on purpose. `--status-running` exists but
+  // is the green dot on a sandbox — a machine's power state, not a run's
+  // outcome — and it ships as one colour with no paired background or text
+  // tier, which is the pairing this component is built to guarantee. Green also
+  // already means SUCCEEDED here, so a green "running" pill would say a run had
+  // finished well while it was still going.
+  running: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+  neutral: "bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)] border-[var(--surface-neutral-border)]"
+};
+var TONE_TEXT = {
+  success: "text-[var(--surface-success-text)]",
+  warning: "text-[var(--surface-warning-text)]",
+  danger: "text-[var(--surface-danger-text)]",
+  info: "text-[var(--surface-info-text)]",
+  running: "text-[var(--surface-info-text)]",
+  neutral: "text-[var(--surface-neutral-text)]"
+};
+function ToneGlyph({ tone }) {
+  const common = {
+    viewBox: "0 0 8 8",
+    className: "size-2 shrink-0"
+  };
+  switch (tone) {
+    // Settled and good: a solid disc.
+    case "success":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "3.25" }) });
+    // Settled and bad: a disc with a bar through it, so it differs from
+    // success in OUTLINE and not only in hue.
+    case "danger":
+      return /* @__PURE__ */ jsxs16(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          children: [
+            /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "3.1", fill: "currentColor", opacity: "0.35" }),
+            /* @__PURE__ */ jsx18("path", { d: "M1.9 6.1 6.1 1.9", strokeLinecap: "round" })
+          ]
+        }
+      );
+    // Needs a person: a triangle.
+    case "warning":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M4 0.6 7.7 7.1H0.3z" }) });
+    // Still moving: an open ring, visibly hollow at 8px.
+    case "running":
+      return /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          children: /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "2.9" })
+        }
+      );
+    // Informational: a square, the only right-angled mark in the set.
+    case "info":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("rect", { x: "0.9", y: "0.9", width: "6.2", height: "6.2", rx: "1.2" }) });
+    // Nothing has happened: a dash. No enclosed area at all.
+    default:
+      return /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          children: /* @__PURE__ */ jsx18("path", { d: "M1 4h6", strokeLinecap: "round" })
+        }
+      );
+  }
+}
+var StatusPill = React13.forwardRef(
+  ({ className, tone, children, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs16(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium",
+        size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm",
+        bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]),
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: cn("inline-flex", bare && TONE_TEXT[tone]), children: /* @__PURE__ */ jsx18(ToneGlyph, { tone }) }),
+        children
+      ]
+    }
+  )
+);
+StatusPill.displayName = "StatusPill";
+
+// src/primitives/metric-strip.tsx
+import * as React14 from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var MetricStrip = React14.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx19(
+    "dl",
+    {
+      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
+    }
+  )
+);
+MetricStrip.displayName = "MetricStrip";
+var Metric = React14.forwardRef(
+  ({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      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,
+      children: [
+        /* @__PURE__ */ jsxs17("dt", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
+          /* @__PURE__ */ jsx19("span", { className: "truncate", children: label }),
+          attention && /* @__PURE__ */ jsx19(StatusPill, { tone: attention.tone, children: attention.label })
+        ] }),
+        /* @__PURE__ */ jsx19(
+          "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 : void 0,
+            children: value
+          }
+        ),
+        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.
+        /* @__PURE__ */ jsx19(
+          "dd",
+          {
+            className: "mt-0.5 truncate text-[var(--text-dim)] text-xs",
+            title: typeof hint === "string" ? hint : void 0,
+            children: hint
+          }
+        )
+      ]
+    }
+  )
+);
+Metric.displayName = "Metric";
+
+// src/primitives/toolbar.tsx
+import * as React15 from "react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var Toolbar = React15.forwardRef(
+  ({ className, search, filters, actions, ...props }, ref) => /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center",
+        className
+      ),
+      ...props,
+      children: [
+        search && /* @__PURE__ */ jsx20("div", { className: "min-w-0 lg:max-w-sm lg:flex-1", children: search }),
+        filters && // `py-1` leaves room for a focus ring above and below; horizontally the
+        // scroll container clips it, which is the trade a single-line filter row
+        // makes. No negative margin — pulling the row wider than its parent is
+        // what made every page report 4px of horizontal overflow.
+        /* @__PURE__ */ jsx20("div", { className: "flex min-w-0 items-center gap-2 overflow-x-auto py-1 lg:flex-1", children: filters }),
+        actions && /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: actions })
+      ]
+    }
+  )
+);
+Toolbar.displayName = "Toolbar";
+var FilterField = React15.forwardRef(
+  ({ className, label, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref,
+      className: cn("flex shrink-0 items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx20(
+          "label",
+          {
+            htmlFor,
+            className: "whitespace-nowrap text-muted-foreground text-xs",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+FilterField.displayName = "FilterField";
+
 export {
   Dialog,
   DialogTrigger,
@@ -1305,6 +1574,12 @@ export {
   SidebarDropZone,
   useTheme,
   ThemeToggle,
+  PageHeader,
+  StatusPill,
+  MetricStrip,
+  Metric,
+  Toolbar,
+  FilterField,
   Logo,
   TangleKnot
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, PageHeader, PageHeaderProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';

package/dist/index.js

@@ -76,9 +76,13 @@ import {
   DialogTrigger,
   DropZone,
   EmptyState,
+  FilterField,
   Input,
   Label,
   Logo,
+  Metric,
+  MetricStrip,
+  PageHeader,
   Progress,
   SegmentedControl,
   Select,
@@ -96,6 +100,7 @@ import {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   TangleKnot,
   TerminalCursor,
@@ -106,10 +111,11 @@ import {
   ThemeToggle,
   ToastContainer,
   ToastProvider,
+  Toolbar,
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-HSMVDKL3.js";
+} from "./chunk-EJ5NBW7V.js";
 import {
   Avatar,
   AvatarFallback,
@@ -388,6 +394,7 @@ export {
   FilePreview,
   FileTabs,
   FileTree,
+  FilterField,
   GitHubLoginButton,
   GlobResultsPreview,
   GrepResultsPreview,
@@ -401,7 +408,10 @@ export {
   Logo,
   Markdown,
   MessageList,
+  Metric,
+  MetricStrip,
   OpenUIArtifactRenderer,
+  PageHeader,
   Progress,
   QuestionPreview,
   RealtimeSessionRegistry,
@@ -424,6 +434,7 @@ export {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   TOOL_CATEGORY_ICONS,
   Table,
@@ -449,6 +460,7 @@ export {
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
+  Toolbar,
   UploadProgress,
   UserMenu,
   UserMessage,

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

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.2.4",
+  "version": "11.3.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -141,7 +141,7 @@
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
     "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.3.0"
+    "@tangle-network/brand": "^1.4.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";