@tangle-network/ui 11.49.0 → 11.50.2

package/src/primitives/page-shell.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
+import { bindSettingsNav } from "../presentation";
 
 export interface PageShellProps {
   children?: ReactNode;
@@ -17,9 +18,12 @@ export interface PageShellProps {
    * column. `settings` is a 48rem column of cards whose navigation is a sticky
    * 13rem column of rows when its frame is at least 60rem wide, and a sticky
    * 56px tab strip under the header below that; the current link
-   * (`aria-current="page"`) is centred by scrolling the strip only. Put
-   * links (or a list of links) in `navigation`; an `svg` in a link shows only
-   * in the column, and an element with `data-count` sits at its end.
+   * (`aria-current="page"`) is centred by scrolling the strip only
+   * ({@link bindSettingsNav}). Put links (or a list of links) in `navigation`;
+   * an `svg` in a link shows only in the column, and an element with
+   * `data-count` sits at its end. A host whose page scrolls under its own
+   * sticky header sets `--tangle-settings-sticky-top` on the frame or an
+   * ancestor, such as `var(--shell-header-height)`, and the nav sticks below it.
    */
   measure?: "reading" | "settings";
   navigationLabel?: string;
@@ -27,60 +31,6 @@ export interface PageShellProps {
   className?: string;
 }
 
-/**
- * Centre the current link of a horizontally scrolling nav, so the links on
- * both sides show that the strip scrolls. It moves the strip, never the page.
- * It centres when the current link changes (or first becomes reachable), never
- * on scroll, arrow taps or re-renders that keep the same current link, so a
- * user who scrolls to the first or last section stays there. Resize and font
- * swaps re-centre only until the user first scrolls the strip.
- */
-function useCurrentLinkInView(ref: React.RefObject<HTMLElement | null>, enabled: boolean) {
-  React.useEffect(() => {
-    const nav = ref.current;
-    if (!enabled || !nav) return;
-    let centredKey: string | null = null;
-    let userScrolled = false;
-    const reveal = (layoutOnly: boolean) => {
-      if (nav.scrollWidth <= nav.clientWidth) return;
-      const current = nav.querySelector<HTMLElement>('[aria-current="page"]');
-      if (!current) return;
-      const key = current.getAttribute("href") ?? current.textContent ?? "";
-      if (key !== centredKey) userScrolled = false;
-      else if (!layoutOnly || userScrolled) return;
-      centredKey = key;
-      const strip = nav.getBoundingClientRect();
-      const link = current.getBoundingClientRect();
-      nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
-    };
-    const onUser = () => { userScrolled = true; };
-    nav.addEventListener("pointerdown", onUser, { passive: true });
-    nav.addEventListener("touchstart", onUser, { passive: true });
-    nav.addEventListener("wheel", onUser, { passive: true });
-    nav.addEventListener("keydown", onUser);
-    let live = true;
-    reveal(false);
-    // A web font swap widens the tabs without resizing the strip, so the
-    // resize observer alone would leave the current tab where it was.
-    void document.fonts?.ready.then(() => { if (live) reveal(true); });
-    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
-    resize?.observe(nav);
-    // Links that a caller replaces (sections loaded later, a new aria-current)
-    // can change the current link; the same current link is left where it is.
-    const links = new MutationObserver(() => reveal(false));
-    links.observe(nav, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["aria-current"] });
-    return () => {
-      live = false;
-      resize?.disconnect();
-      links.disconnect();
-      nav.removeEventListener("pointerdown", onUser);
-      nav.removeEventListener("touchstart", onUser);
-      nav.removeEventListener("wheel", onUser);
-      nav.removeEventListener("keydown", onUser);
-    };
-  }, [ref, enabled]);
-}
-
 /**
  * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
  * width, gutter and vertical rhythm, not an application shell or a card grid.
@@ -93,7 +43,8 @@ function useCurrentLinkInView(ref: React.RefObject<HTMLElement | null>, enabled:
 export function PageShell({ children, className, navigation, article, outline, header, measure = "reading", navigationLabel = "Sections", outlineLabel = "On this page" }: PageShellProps) {
   const navRef = React.useRef<HTMLElement>(null);
   const settings = measure === "settings";
-  useCurrentLinkInView(navRef, settings && Boolean(navigation));
+  const hasNavigation = Boolean(navigation);
+  React.useEffect(() => (settings && hasNavigation && navRef.current ? bindSettingsNav(navRef.current) : undefined), [settings, hasNavigation]);
   if (navigation || article || outline || header || settings) {
     const shell = <div className={cn("tangle-reading-shell", !settings && className)} data-measure={settings ? "settings" : undefined}>
       {header && <div className="tangle-reading-header">{header}</div>}

package/src/primitives/progress.stories.tsx

@@ -38,6 +38,16 @@ export const SandboxWithValue: Story = {
   ),
 }
 
+export const Tones: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      {(['neutral', 'success', 'warning', 'danger'] as const).map((tone) => (
+        <Progress key={tone} value={tone === 'danger' ? 100 : 70} tone={tone} aria-label={`${tone} reading`} />
+      ))}
+    </div>
+  ),
+}
+
 export const Empty: Story = {
   render: () => <Progress value={0} className="w-80" />,
 }

package/src/primitives/progress.tsx

@@ -1,16 +1,27 @@
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 import { cn } from "../lib/utils";
+import type { StatusTone } from "./status-pill";
+
+// A status ink is also its fill (Brand tokens), so a toned bar matches the state text beside it.
+const TONE_FILL = {
+  neutral: "bg-[var(--surface-neutral-text)]",
+  success: "bg-[var(--surface-success-text)]",
+  warning: "bg-[var(--surface-warning-text)]",
+  danger: "bg-[var(--surface-danger-text)]",
+} satisfies Partial<Record<StatusTone, string>>;
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
     variant?: "default" | "sandbox";
+    /** A state the reading is in, such as `danger` at a limit; it replaces the variant's fill. */
+    tone?: keyof typeof TONE_FILL;
     showValue?: boolean;
   }
 >(
   (
-    { className, value, variant = "default", showValue = false, ...props },
+    { className, value, variant = "default", tone, showValue = false, ...props },
     ref,
   ) => {
     const indicatorVariants = {
@@ -31,7 +42,7 @@ const Progress = React.forwardRef<
           <ProgressPrimitive.Indicator
             className={cn(
               "h-full w-full flex-1 transition-all duration-300 ease-out",
-              indicatorVariants[variant],
+              tone ? TONE_FILL[tone] : indicatorVariants[variant],
             )}
             style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
           />

package/src/primitives/settings.stories.tsx

@@ -1,17 +1,20 @@
 import { Bell, Bot, Check, CreditCard, Inbox, Loader2, Settings, Users, Workflow } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar, AvatarFallback } from "./avatar";
 import { Button } from "./button";
 import { Card } from "./card";
 import { Field, fieldMessageId } from "./field";
 import { Input, Textarea } from "./input";
+import { Metric, MetricStrip } from "./metric-strip";
 import { PageHeader } from "./page-header";
 import { PageShell } from "./page-shell";
 import { SegmentedControl } from "./segmented-control";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./settings";
+import { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection } from "./settings";
+import type { StatusTone } from "./status-pill";
 import { Switch } from "./switch";
+import { bindSettingsNav } from "../presentation";
 
 /** Example data only: no routing, persistence or fetching. Every state is drawn at once so one screenshot shows them all. */
 
@@ -35,6 +38,8 @@ function Saved() {
 
 interface Automation { name: string; meta: string; state: string; verb: string; ownerOnly?: boolean; error?: string }
 
+const AUTOMATION_TONE: Record<string, StatusTone> = { Active: "success", Paused: "neutral", "Couldn't start": "danger" };
+
 const automations: Automation[] = [
   { name: "Weekly competitor scan", meta: "Mondays at 09:00", state: "Active", verb: "Pause" },
   { name: "Inbound lead triage", meta: "When a signed webhook arrives", state: "Paused", verb: "Resume", ownerOnly: true },
@@ -152,7 +157,8 @@ function SettingsPage({ sectionsLoadLater = false, withoutNavigation = false, cl
                 key={job.name}
                 title={<a href={`#${job.name}`}>{job.name}</a>}
                 meta={job.meta}
-                status={job.error ? <span className="font-medium text-[var(--surface-danger-text)]">{job.state}</span> : job.state}
+                status={job.state}
+                tone={AUTOMATION_TONE[job.state]}
                 error={job.error}
                 action={{
                   label: job.verb,
@@ -277,6 +283,85 @@ function SettingsValuesExample() {
   );
 }
 
+const webhooks: Array<{ url: string; events: string[]; state: string; tone: StatusTone }> = [
+  { url: "https://hooks.fieldnote-analytics.example/intelligence/v1/trace-events", events: ["trace.completed", "eval.regressed", "budget.exceeded"], state: "Active", tone: "success" },
+  { url: "https://ops.fieldnote.example/alerts/webhooks/intelligence_regressions", events: ["eval.regressed"], state: "Inactive", tone: "neutral" },
+  { url: "https://n8n.fieldnote.example/webhook/7f3c2a91-5d4e-4b8a-9c61-2e0f8d7a4b13", events: ["budget.exceeded", "alert.triggered"], state: "Failing", tone: "danger" },
+];
+
+const alertRules: Array<{ name: string; rule: string; severity: string; tone: StatusTone }> = [
+  { name: "Error rate", rule: "Above 5% for 10 minutes", severity: "Critical", tone: "danger" },
+  { name: "p95 latency", rule: "Above 4 s for 15 minutes", severity: "Warning", tone: "warning" },
+  { name: "Daily spend", rule: "Above $40 in a day", severity: "Notice", tone: "neutral" },
+];
+
+/** Notes (figure, empty, loading, notice, refusal), toned list states, and long URLs and event names in narrow columns. */
+function NotesAndTonesExample() {
+  return (
+    <div className="mx-auto max-w-3xl space-y-6 p-6 max-sm:p-4">
+      <SettingsSection id="webhooks" title="Webhooks" description="Signed POSTs when traces, evals or budgets change.">
+        <SettingsNote>
+          <MetricStrip columns={2} aria-label="Last 7 days">
+            <Metric label="Deliveries" value="1,284" />
+            <Metric label="Failed" value="3" />
+          </MetricStrip>
+        </SettingsNote>
+        <SettingsList aria-label="Webhook endpoints" columns={{ status: "7rem", action: "8rem", menu: "36px" }}>
+          {webhooks.map((hook) => (
+            <SettingsListItem
+              key={hook.url}
+              title={<a href={`#${hook.state}`}>{hook.url}</a>}
+              meta={hook.events.join(", ")}
+              status={hook.state}
+              tone={hook.tone}
+              action={{ label: "Send test", onSelect: () => undefined }}
+              menu={[{ label: "Delete…", tone: "danger", onSelect: () => undefined }]}
+            />
+          ))}
+        </SettingsList>
+        <SettingsNote tone="warning" role="status">One endpoint failed its last three deliveries. It pauses after five.</SettingsNote>
+      </SettingsSection>
+      <SettingsSection id="alert-rules" title="Alert rules">
+        <SettingsList aria-label="Alert rules" columns={{ status: "7rem", menu: "36px" }}>
+          {alertRules.map((rule) => (
+            <SettingsListItem key={rule.name} title={rule.name} meta={rule.rule} status={rule.severity} tone={rule.tone} menu={[{ label: "Delete…", tone: "danger", onSelect: () => undefined }]} />
+          ))}
+        </SettingsList>
+      </SettingsSection>
+      <SettingsSection id="saved-versions" title="Saved versions">
+        <SettingsNote tone="muted">No saved versions yet.</SettingsNote>
+        <SettingsNote tone="muted" role="status"><span className="inline-flex items-center gap-1.5"><Loader2 aria-hidden="true" className="size-4 animate-spin motion-reduce:animate-none" />Loading saved versions…</span></SettingsNote>
+        <SettingsNote tone="danger" role="alert">Couldn't load saved versions. The workspace didn't answer; nothing changed.</SettingsNote>
+      </SettingsSection>
+    </div>
+  );
+}
+
+const HOST_SECTIONS = [["account", "Account"], ["keys", "API keys"], ["usage", "Usage"], ["billing", "Billing"], ["webhooks", "Webhooks"], ["team", "Team"]] as const;
+
+/** What a server-rendered host such as tangle-router writes: PageShell's settings markup, with no React inside it. */
+const HOST_MARKUP = `<div class="tangle-settings-frame" style="--tangle-settings-sticky-top: var(--shell-header-height)">
+<div class="tangle-reading-shell" data-measure="settings">
+<div class="tangle-reading-header"><h1 class="tangle-heading" data-variant="section">Settings</h1></div>
+<nav aria-label="Settings sections" class="tangle-reading-nav"><ul role="list">${HOST_SECTIONS.map(([id, label]) => `<li><a href="/settings-doc/${id}"${id === "usage" ? ' aria-current="page"' : ""}>${label}</a></li>`).join("")}</ul></nav>
+<article class="tangle-reading-article">${["Usage", "Limits", "Sources"].map((name) => `<section role="region" aria-label="${name}" data-slot="card" class="rounded-[var(--radius-lg)] border border-border bg-card p-5" style="min-height: 28rem"><h2 class="font-semibold">${name}</h2></section>`).join("")}</article>
+</div></div>`;
+
+/** A host whose document scrolls under its own sticky header, with server markup bound by bindSettingsNav. */
+function ServerRenderedHostExample() {
+  const root = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const nav = root.current?.querySelector<HTMLElement>("nav");
+    return nav ? bindSettingsNav(nav) : undefined;
+  }, []);
+  return (
+    <>
+      <header className="sticky top-0 z-10 flex h-[var(--shell-header-height)] items-center border-b border-border bg-background px-6 font-medium text-sm">Host header</header>
+      <div ref={root} dangerouslySetInnerHTML={{ __html: HOST_MARKUP }} />
+    </>
+  );
+}
+
 const meta = {
   title: "Primitives/Settings",
   component: SettingsSection,
@@ -302,3 +387,9 @@ export const Fields: Story = { render: () => <FieldsExample /> };
 
 /** Values preserve ReactNode content and coexist with controls; only value rows stack in a narrow compact layout. */
 export const Values: Story = { render: () => <SettingsValuesExample /> };
+
+/** Every line that is not a row, list states in their tone, and long URLs and event names wrapping whole at 390. */
+export const NotesAndTones: Story = { render: () => <NotesAndTonesExample /> };
+
+/** tangle-router's case: server-rendered settings markup under a sticky host header, bound with bindSettingsNav. */
+export const ServerRenderedHost: Story = { render: () => <ServerRenderedHostExample /> };

package/src/primitives/settings.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+import { CircleAlert, Ellipsis, Lock, TriangleAlert, type LucideIcon } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
@@ -9,6 +9,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { fieldMessageId } from "./field";
 import { InfoTip } from "./info-tip";
 import { Label } from "./label";
+import { StatusGlyph, type StatusTone } from "./status-pill";
 
 /*
  * Settings rows and lists answer to their section card's width, not the
@@ -21,25 +22,46 @@ import { Label } from "./label";
  */
 
 const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const GUTTER = "px-5 py-4 @max-[34rem]/settings-section:px-4";
 const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
 const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
 
-function ErrorLine({ id, className, children }: { id?: string; className?: string; children: React.ReactNode }) {
+interface LineProps { id?: string; role?: "status" | "alert"; className?: string; children: React.ReactNode }
+
+function GlyphLine({ icon: Icon, className, children, ...props }: LineProps & { icon: LucideIcon }) {
   return (
-    <div id={id} role="alert" className={cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className)}>
-      <CircleAlert aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+    <div {...props} className={cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", className)}>
+      <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
       <div className="min-w-0">{children}</div>
     </div>
   );
 }
 
-function LockLine({ id, className, children }: { id?: string; className?: string; children: React.ReactNode }) {
-  return (
-    <div id={id} className={cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className)}>
-      <Lock aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
-      <div className="min-w-0">{children}</div>
-    </div>
-  );
+const ErrorLine = ({ className, ...props }: LineProps) => <GlyphLine icon={CircleAlert} role="alert" className={cn(ERROR_TEXT, className)} {...props} />;
+const LockLine = ({ className, ...props }: LineProps) => <GlyphLine icon={Lock} className={cn("text-muted-foreground", className)} {...props} />;
+
+// A long identifier (a URL, an address, an event name) is one unit: it moves to the next line
+// whole, and only one wider than its column breaks, at its own punctuation, where a style guide
+// breaks a URL: after a slash run or `@`, before `. - _ ? # & =`. A mid-word break is the last resort.
+const TOKEN_BREAK = /(?<=[/@])(?=[^/])|(?<=[\p{L}\p{N}])(?=[.\-_?#&=][\p{L}\p{N}])/u;
+
+function breakTokens(node: React.ReactNode): React.ReactNode {
+  if (typeof node === "string") {
+    if (!TOKEN_BREAK.test(node)) return node;
+    return node.split(/(\s+)/).map((word, index) => {
+      const parts = word.split(TOKEN_BREAK);
+      return parts.length < 2 ? word : (
+        <span key={index} className="inline-block max-w-full [text-decoration:inherit]">
+          {parts.map((part, at) => <React.Fragment key={at}>{at > 0 && <wbr />}{part}</React.Fragment>)}
+        </span>
+      );
+    });
+  }
+  if (Array.isArray(node)) return React.Children.map(node, breakTokens);
+  if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children != null && typeof node.props.children !== "function") {
+    return React.cloneElement(node, undefined, breakTokens(node.props.children));
+  }
+  return node;
 }
 
 export type SettingsRowLayout = "inline" | "compact" | "stacked";
@@ -123,7 +145,8 @@ export function SettingsRow(props: SettingsRowProps) {
       id={id}
       data-layout={layout}
       className={cn(
-        "grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4",
+        "grid min-w-0 items-center gap-x-8 gap-y-3",
+        GUTTER,
         SCROLL_OFFSET,
         DIVIDED,
         ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout],
@@ -150,7 +173,7 @@ export function SettingsRow(props: SettingsRowProps) {
       </div>
       {(hasValue || (control != null && control !== false)) && (
         <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout])}>
-          {hasValue && <span data-slot="settings-value" className={cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono")}>{value}</span>}
+          {hasValue && <span data-slot="settings-value" className={cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono")}>{breakTokens(value)}</span>}
           {control}
         </div>
       )}
@@ -194,7 +217,7 @@ export function SettingsSection({
       data-tone={tone}
       className={cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]")}
     >
-      <div className="flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4">
+      <div className={cn("flex items-start justify-between gap-4 @max-[34rem]/settings-section:flex-wrap", GUTTER)}>
         <div className="min-w-0">
           <div className="flex items-center gap-1.5">
             <CardTitle as="h2" id={titleId} className={cn("leading-6 [overflow-wrap:anywhere]", danger && ERROR_TEXT)}>{title}</CardTitle>
@@ -216,6 +239,40 @@ export function SettingsSection({
   );
 }
 
+const NOTE_TONE = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  warning: "text-[color:var(--surface-warning-text)]",
+  danger: ERROR_TEXT,
+} as const;
+
+const NOTE_GLYPH: Partial<Record<keyof typeof NOTE_TONE, LucideIcon>> = { warning: TriangleAlert, danger: CircleAlert };
+
+export interface SettingsNoteProps {
+  /**
+   * `default` keeps the body ink, for a figure such as a MetricStrip or an inline form.
+   * `muted` is an empty list or a loading line. `warning` (a notice) and `danger` (a refusal)
+   * lead with a glyph, so the tone is not carried by colour alone.
+   */
+  tone?: keyof typeof NOTE_TONE;
+  /** `status` announces a change politely; `alert` announces a refusal at once. */
+  role?: "status" | "alert";
+  children?: React.ReactNode;
+}
+
+/**
+ * A line or block of a {@link SettingsSection} that is not a row: an empty list, a loading line,
+ * a notice, a refusal or a figure. It takes the rows' gutters and divider, so it lines up with
+ * the rows and lists around it.
+ */
+export function SettingsNote({ tone = "default", role, children }: SettingsNoteProps) {
+  const className = cn("min-w-0", GUTTER, DIVIDED, NOTE_TONE[tone]);
+  const glyph = NOTE_GLYPH[tone];
+  return glyph
+    ? <GlyphLine icon={glyph} role={role} className={className}>{children}</GlyphLine>
+    : <div role={role} className={cn("text-sm leading-5 [overflow-wrap:anywhere]", className)}>{children}</div>;
+}
+
 /** Track widths for a {@link SettingsList}. Every slot its items use needs a column, except status and menu, which have fallbacks. */
 export interface SettingsListColumns {
   /** A logo or avatar column, such as `"36px"`. */
@@ -310,6 +367,8 @@ export interface SettingsListItemProps {
   meta?: React.ReactNode;
   /** The item's state as plain text, or a control that sets it (a role select). */
   status?: React.ReactNode;
+  /** The state's tone, drawn as a glyph before it in the tone's ink; the state's text keeps its colour. */
+  tone?: StatusTone;
   /** Shown under the meta in danger text and announced. */
   error?: React.ReactNode;
   /** The one verb the item needs at rest. It is drawn as an outline button, so it never reads as the state beside it. */
@@ -359,7 +418,7 @@ const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34re
  * that name. Without a status column the state follows the meta, and without
  * a menu column the ⋯ menu ends the action cell.
  */
-export function SettingsListItem({ leading, title, meta, status, error, action, menu }: SettingsListItemProps) {
+export function SettingsListItem({ leading, title, meta, status, tone, error, action, menu }: SettingsListItemProps) {
   const columns = React.useContext(SettingsListContext);
   const titleId = React.useId();
   const reasonId = `${titleId}-reason`;
@@ -376,6 +435,8 @@ export function SettingsListItem({ leading, title, meta, status, error, action,
       {action.label}
     </Button>
   );
+  const state = tone && status != null ? <><StatusGlyph tone={tone} /><span className="min-w-0">{status}</span></> : status;
+  const toned = tone && "flex items-center gap-1.5";
   const actionCell = (actionButton || (menuNode && !columns.menu)) && (
     <>{actionButton}{!columns.menu && menuNode}</>
   );
@@ -392,17 +453,17 @@ export function SettingsListItem({ leading, title, meta, status, error, action,
           id={titleId}
           className="font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]"
         >
-          {title}
+          {breakTokens(title)}
         </div>
-        {meta != null && <div className="text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{meta}</div>}
-        {status != null && !columns.status && <div className="mt-1 text-sm leading-5 text-muted-foreground">{status}</div>}
+        {meta != null && <div className="text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{breakTokens(meta)}</div>}
+        {status != null && !columns.status && <div className={cn("mt-1 text-sm leading-5 text-muted-foreground", toned)}>{state}</div>}
         {locked && <LockLine id={reasonId} className="mt-1">{action?.disabledReason}</LockLine>}
       </div>
       {error != null && (
         <ErrorLine className="col-start-[main] row-start-2 mt-1 @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-3">{error}</ErrorLine>
       )}
       {status != null && columns.status && (
-        <div className={cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS)}>{status}</div>
+        <div className={cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", toned, NARROW_STATUS)}>{state}</div>
       )}
       {actionCell && (
         <div className="col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1">{actionCell}</div>

package/src/primitives/status-pill.tsx

@@ -170,6 +170,13 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
   }
 }
 
+const GLYPH = "inline-flex [&>svg]:size-3 [&>svg]:shrink-0";
+
+/** The tone's glyph in the tone's ink, before a label that keeps its own colour, as `bare` draws it. */
+export function StatusGlyph({ tone }: { tone: StatusTone }) {
+  return <span aria-hidden="true" className={cn(GLYPH, TONE_TEXT[tone])}><ToneGlyph tone={tone} /></span>;
+}
+
 const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(
   ({ className, tone, children, icon, bare = false, size = "sm", ...props }, ref) => (
     <span
@@ -186,7 +193,7 @@ const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(
     >
       {/* In `bare` mode the tone rides on the glyph alone, so it is scoped to
           the wrapper the glyph sits in rather than applied to the whole pill. */}
-      <span aria-hidden="true" className={cn("inline-flex [&>svg]:size-3 [&>svg]:shrink-0", bare && TONE_TEXT[tone])}>
+      <span aria-hidden="true" className={cn(GLYPH, bare && TONE_TEXT[tone])}>
         {icon ?? <ToneGlyph tone={tone} />}
       </span>
       {children}

package/src/styles/presentation.css

@@ -28,7 +28,7 @@
 .tangle-reading-header { grid-column: 1 / -1; min-width: 0; }
 /* PageShell measure="settings". The frame is the query container, so the layout follows the content area's width, not the viewport's.
    Below 60rem the navigation is a sticky tab strip whose track is the divider; from 60rem it is a sticky 13rem column beside a 48rem article.
-   Without a nav the page is the 48rem column alone. */
+   Without a nav the page is the 48rem column alone. A host whose page scrolls under its own sticky header sets --tangle-settings-sticky-top. */
 .tangle-settings-frame { container: tangle-settings / inline-size; width: 100%; min-width: 0; }
 .tangle-reading-shell[data-measure="settings"] { --tangle-settings-gutter: 1.5rem; grid-template-columns: minmax(0,1fr); gap: 0; max-width: calc(13rem + 2.5rem + 48rem + 4rem); padding: 1.5rem var(--tangle-settings-gutter) 3rem; }
 /* Without a nav the shell is the column and its gutters, so the centred shell centres the column and its header. */
@@ -37,7 +37,7 @@
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-header > * { margin-bottom: 0; }
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-outline { display: none; }
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-article { max-width: 48rem; display: flex; flex-direction: column; gap: 1.5rem; }
-.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 0.25rem; height: var(--shell-header-height); max-height: none; margin: 0 calc(-1 * var(--tangle-settings-gutter)) 1.25rem; padding: 0 var(--tangle-settings-gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; background: hsl(var(--background)); box-shadow: inset 0 -1px 0 hsl(var(--border)); }
+.tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { position: sticky; top: var(--tangle-settings-sticky-top, 0px); z-index: 3; display: flex; align-items: flex-end; gap: 0.25rem; height: var(--shell-header-height); max-height: none; margin: 0 calc(-1 * var(--tangle-settings-gutter)) 1.25rem; padding: 0 var(--tangle-settings-gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; background: hsl(var(--background)); box-shadow: inset 0 -1px 0 hsl(var(--border)); }
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav::-webkit-scrollbar { display: none; }
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav > :is(ul, ol) { display: flex; flex: none; align-items: flex-end; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
 .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a { flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: var(--control-height-lg, 2.75rem); padding: 0 0.75rem; color: hsl(var(--muted-foreground)); font-size: var(--font-size-label, 0.875rem); font-weight: 500; line-height: 1.25rem; white-space: nowrap; text-decoration: none; transition: color var(--motion-control), background-color var(--motion-control), box-shadow var(--motion-control); }
@@ -55,7 +55,7 @@
   .tangle-reading-shell[data-measure="settings"] { --tangle-settings-gutter: 2rem; grid-template-columns: minmax(0,48rem); column-gap: 2.5rem; align-items: start; padding: 2rem; }
   .tangle-reading-shell[data-measure="settings"]:has(> .tangle-reading-nav) { grid-template-columns: 13rem minmax(0,48rem); }
   .tangle-reading-shell[data-measure="settings"] > .tangle-reading-header { margin-bottom: 1.75rem; }
-  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { top: 2rem; flex-direction: column; align-items: stretch; gap: 2px; height: auto; margin: 0; padding: 0; overflow: visible; background: none; box-shadow: none; }
+  .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav { top: calc(var(--tangle-settings-sticky-top, 0px) + 2rem); flex-direction: column; align-items: stretch; gap: 2px; height: auto; margin: 0; padding: 0; overflow: visible; background: none; box-shadow: none; }
   .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav > :is(ul, ol) { flex-direction: column; align-items: stretch; gap: 2px; }
   .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a { min-height: var(--control-height, 2.25rem); gap: 0.625rem; padding: 0 0.625rem; border-radius: var(--radius-md); }
   .tangle-reading-shell[data-measure="settings"] > .tangle-reading-nav a > svg { display: block; flex: none; width: 1rem; height: 1rem; }