@fungi.computer/caps 0.0.2 → 0.2.0

package/README.md

@@ -222,9 +222,9 @@ keep their shared seam.
 ### Class merging
 
 `@fungi.computer/caps/lib/cn` merges classes with `cn@0.2.6` and Stipe's
-[named spacing scale](https://stipe.shiit.app/concepts/#named-spacing). It
-accepts conditional strings, arrays and objects and keeps caller-last Tailwind
-overrides, so `cn("text-xs px-xs py-sm", "px-md")` gives
+[named spacing scale](https://docs.fungi.computer/stipe/concepts/#named-spacing).
+It accepts conditional strings, arrays and objects and keeps caller-last
+Tailwind overrides, so `cn("text-xs px-xs py-sm", "px-md")` gives
 `"text-xs py-sm px-md"`. The helper keeps typography and spacing names apart.
 
 ### Forms
@@ -550,9 +550,9 @@ marginalia, growth and type tokens, so they look right in `field-guide`,
 `field-guide-night` and the other editorial themes.
 
 - `@fungi.computer/caps/components/field-guide`: `Keycap` (a native keyboard
-  key), `StatusLed` (a static labelled light), `CartridgeLabel` (a ruled
-  cartridge face) and `SpecimenLabel` (plate annotation, catalogue metadata,
-  title and summary).
+  key), `CartridgeLabel` (a ruled cartridge face) and `SpecimenLabel` (plate
+  annotation, catalogue metadata, title and summary). Status lights are the
+  gooey `Status` bead from `@fungi.computer/caps/components/status`.
 - `@fungi.computer/caps/components/technonomicon`: `CigaretteCard`, `Masthead`,
   `SectionBar`, `Folio`, `IssueMasthead`, `Spread` and related editorial pieces.
 
@@ -1006,7 +1006,8 @@ its own control finish.
 ### Editorial pieces
 
 ```tsx
-import { Keycap, StatusLed } from "@fungi.computer/caps/components/field-guide";
+import { Keycap } from "@fungi.computer/caps/components/field-guide";
+import { Status } from "@fungi.computer/caps/components/status";
 import {
   Folio,
   Masthead,
@@ -1030,7 +1031,7 @@ export function FrontPage() {
       />
       <p>
         Press <Keycap>J</Keycap> for the next story.{" "}
-        <StatusLed active label="Online" />
+        <Status tone="success" label="Online" />
       </p>
       <Folio items={["The Spore Print", "Page A1"]} />
     </>

package/dist/components/button.js

@@ -37,8 +37,7 @@ export const Button = forwardRef(function Button({ asChild = false, children, cl
     const mountedResult = useRef(result).current;
     const node = useRef(null);
     useImperativeHandle(ref, () => node.current);
-    // Text labels compare by value; element labels re-measure each render.
-    useWidthTween(node, [loading, result, children]);
+    useWidthTween(node, loading, result);
     if (asChild) {
         return (_jsx(Slot, { ...props, "aria-busy": loading ? true : props["aria-busy"], "aria-disabled": disabled === true || loading ? true : undefined, className: classes, ref: node, children: children }));
     }
@@ -47,23 +46,45 @@ export const Button = forwardRef(function Button({ asChild = false, children, cl
 /**
  * When a button's label changes (loading, a result, new text) its width eases
  * to the new size instead of jumping, so neighbours never lurch.
+ *
+ * What counts as "changed" is what the button renders (its text, loading and
+ * result), never the identity of its children: a caller that builds a fresh
+ * array or element with the same words each render has not changed the label.
+ * Widths are layout (CSS) pixels from `offsetWidth`, the unit the animated
+ * `width` is in, so a scaled or zoomed ancestor cannot distort the glide. A
+ * button that has no box (an ancestor is `display: none`) records no width, so
+ * when it is shown it settles at its size instead of growing from nothing.
  */
-function useWidthTween(node, label) {
+function useWidthTween(node, loading, result) {
     const width = useRef(null);
+    const look = useRef(null);
     const tween = useRef(null);
+    // After every commit: the rendered text is only known once it is in the DOM.
     useLayoutEffect(() => {
         const element = node.current;
         if (!element)
             return;
+        const now = JSON.stringify([loading, result ?? null, element.textContent]);
+        const changed = now !== look.current;
+        look.current = now;
         const running = tween.current;
-        const from = running
-            ? element.getBoundingClientRect().width
-            : width.current;
-        running?.cancel();
-        tween.current = null;
-        const to = element.getBoundingClientRect().width;
-        width.current = to;
-        if (from === null || Math.abs(from - to) < 1 || !canAnimate(element))
+        // Nothing new to say: let a glide in progress finish undisturbed.
+        if (!changed && running)
+            return;
+        const from = running ? element.offsetWidth : width.current;
+        if (running) {
+            tween.current = null;
+            running.cancel();
+            element.style.removeProperty("overflow");
+            element.style.removeProperty("white-space");
+        }
+        const to = element.offsetWidth;
+        width.current = to > 0 ? to : null;
+        if (!changed ||
+            from === null ||
+            to === 0 ||
+            Math.abs(from - to) < 1 ||
+            !canAnimate(element))
             return;
         const motion = readMotion(element);
         if (motion.reduced)
@@ -82,7 +103,7 @@ function useWidthTween(node, label) {
         };
         animation.onfinish = done;
         animation.oncancel = done;
-    }, [node, ...label]);
+    });
 }
 /** How long the done beat holds before settling: long enough to read. */
 const resultHoldMs = 1100;

package/dist/components/field-guide.d.ts

@@ -5,16 +5,6 @@ export type KeycapProps = {
 } & HTMLAttributes<HTMLElement>;
 /** The shared field-guide treatment for a keyboard key. */
 export declare function Keycap({ children, className, ...props }: KeycapProps): import("react/jsx-runtime").JSX.Element;
-/** Semantic accent pigments for the static status light. */
-export type StatusLedTone = "spore" | "mycelium" | "fruiting";
-/** Props accepted by StatusLed. */
-export type StatusLedProps = {
-    active: boolean;
-    label: string;
-    tone?: StatusLedTone;
-} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
-/** A static, labelled indicator using the current field-guide pigment tokens. */
-export declare function StatusLed({ active, className, label, tone, ...props }: StatusLedProps): import("react/jsx-runtime").JSX.Element;
 /** Props accepted by CartridgeLabel. */
 export type CartridgeLabelProps = {
     title: string;

package/dist/components/field-guide.js

@@ -4,10 +4,6 @@ import { cn } from "../lib/cn.js";
 export function Keycap({ children, className, ...props }) {
     return (_jsx("kbd", { ...props, className: cn("caps-keycap", className), children: children }));
 }
-/** A static, labelled indicator using the current field-guide pigment tokens. */
-export function StatusLed({ active, className, label, tone = "mycelium", ...props }) {
-    return (_jsxs("span", { ...props, "aria-label": `${label}: ${active ? "on" : "off"}`, className: cn("caps-led", className), "data-active": active, "data-tone": tone, role: "img", children: [_jsx("span", { "aria-hidden": "true", className: "caps-led-bead" }), _jsx("span", { "aria-hidden": "true", children: label })] }));
-}
 /** A ruled, token-backed printed label for a physical game cartridge. */
 export function CartridgeLabel({ className, mark, subtitle, title, ...props }) {
     return (_jsxs("figure", { ...props, "aria-label": `${title} cartridge label`, className: cn("caps-cartridge-label", className), children: [_jsx("span", { "aria-hidden": "true", className: "caps-cartridge-label-rule" }), mark ? (_jsx("span", { "aria-hidden": "true", className: "caps-cartridge-label-mark", children: mark })) : null, _jsx("span", { className: "caps-cartridge-label-title", children: title }), subtitle ? (_jsx("span", { className: "caps-cartridge-label-subtitle", children: subtitle })) : null, _jsx("span", { "aria-hidden": "true", className: "caps-cartridge-label-rule" })] }));

package/dist/components/window-crumbs.d.ts

@@ -0,0 +1,48 @@
+import { type StatusTone } from "./status.js";
+/** One place in the content's path; `siblings` makes it a switcher. */
+export type WindowCrumb = {
+    id: string;
+    label: string;
+    /** Other places at this level, offered by a ▾ switcher on the crumb. */
+    siblings?: readonly {
+        id: string;
+        label: string;
+    }[];
+};
+/** A command the content offers in the header; the content owns its effect. */
+export type WindowCommand = {
+    id: string;
+    label: string;
+    /** Render a supported glyph alone; label remains the accessible name. */
+    icon?: "play";
+    /** Which Caps button a primary command wears; default `outline`. */
+    variant?: "primary" | "outline" | "ghost";
+    /** A menu item that removes or discards something. */
+    tone?: "destructive";
+    disabled?: boolean;
+};
+/** A quiet fact about the view: muted text led by the Caps status bead. */
+export type WindowStatus = {
+    id: string;
+    label: string;
+    /** Hide only the visible label, retaining it for assistive technology. */
+    presentation?: "bead";
+    tone?: Extract<StatusTone, "neutral" | "info" | "warning" | "success" | "error">;
+};
+/** The path as a trail; on a phone only `‹ parent › current` remain. */
+export declare function WindowCrumbs({ crumbs, popover, onCrumb, }: {
+    crumbs: readonly WindowCrumb[];
+    popover?: HTMLElement | null | undefined;
+    onCrumb?: ((crumbId: string, siblingId?: string) => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+/** Primary commands as buttons, the rest behind a ⋯ menu. */
+export declare function WindowCommands({ primary, menu, popover, onAction, }: {
+    primary?: readonly WindowCommand[] | undefined;
+    menu?: readonly WindowCommand[] | undefined;
+    popover?: HTMLElement | null | undefined;
+    onAction?: ((id: string) => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Settled beads reveal their labels on hover/focus; other state stays visible. */
+export declare function WindowStatuses({ status, }: {
+    status: readonly WindowStatus[];
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/window-crumbs.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Ellipsis, Play } from "lucide-react";
+import { Button } from "./button.js";
+import { Status } from "./status.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { IconButton } from "./icon-button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+/** The longest path shown whole; longer paths fold the middle into "…". */
+const CRUMBS_SHOWN = 4;
+function Separator() {
+    return (_jsx("span", { className: "caps-window-crumb-separator", "aria-hidden": "true", children: "\u203A" }));
+}
+function Crumb({ crumb, current, popover, onCrumb, }) {
+    const label = _jsx("span", { className: "caps-window-crumb-label", children: crumb.label });
+    const common = {
+        "data-caps-window-crumb": crumb.id,
+        "aria-current": current ? "page" : undefined,
+    };
+    if (crumb.siblings?.length) {
+        return (_jsxs(DropdownMenu, { modal: false, children: [_jsxs(DropdownMenuTrigger, { ...common, className: "caps-window-crumb shrink", render: _jsx(Button, { size: "xs", variant: "ghost" }), "aria-label": `${crumb.label}, switch`, children: [label, _jsx(ChevronDown, { "aria-hidden": "true", className: "size-3" })] }), _jsx(DropdownMenuContent, { align: "start", container: popover, children: crumb.siblings.map((sibling) => (_jsx(DropdownMenuItem, { onSelect: () => {
+                            onCrumb?.(crumb.id, sibling.id);
+                        }, children: sibling.label }, sibling.id))) })] }));
+    }
+    if (current || onCrumb === undefined)
+        return (_jsx("span", { ...common, className: "caps-window-crumb", children: label }));
+    return (_jsx(Button, { ...common, size: "xs", variant: "ghost", className: "caps-window-crumb shrink", onClick: () => {
+            onCrumb(crumb.id);
+        }, children: label }));
+}
+/** The path as a trail; on a phone only `‹ parent › current` remain. */
+export function WindowCrumbs({ crumbs, popover, onCrumb, }) {
+    const folded = crumbs.length > CRUMBS_SHOWN;
+    const head = folded ? crumbs.slice(0, 1) : crumbs.slice(0, -1);
+    const middle = folded ? crumbs.slice(1, -2) : [];
+    const tail = folded ? crumbs.slice(-2) : crumbs.slice(-1);
+    const last = crumbs.at(-1);
+    const parts = [];
+    const add = (crumb) => {
+        parts.push(_jsxs("span", { className: "caps-window-crumb-item", "data-caps-crumb-position": crumb.id === last?.id
+                ? "current"
+                : crumb.id === crumbs.at(-2)?.id
+                    ? "parent"
+                    : "ancestor", children: [parts.length > 0 ? _jsx(Separator, {}) : null, _jsx(Crumb, { crumb: crumb, current: crumb.id === last?.id, popover: popover, onCrumb: onCrumb })] }, crumb.id));
+    };
+    for (const crumb of head)
+        add(crumb);
+    if (middle.length > 0)
+        parts.push(_jsxs("span", { className: "caps-window-crumb-item", "data-caps-crumb-position": "ancestor", children: [_jsx(Separator, {}), _jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { className: "caps-window-crumb", render: _jsx(Button, { size: "xs", variant: "ghost" }), "aria-label": "More of the path", children: _jsx(Ellipsis, { "aria-hidden": "true", className: "size-3" }) }), _jsx(DropdownMenuContent, { align: "start", container: popover, children: middle.map((crumb) => (_jsx(DropdownMenuItem, { onSelect: () => {
+                                    onCrumb?.(crumb.id);
+                                }, children: crumb.label }, crumb.id))) })] })] }, "fold"));
+    for (const crumb of tail)
+        add(crumb);
+    return (_jsx("nav", { className: "caps-window-crumbs", "aria-label": "Path", children: parts }));
+}
+/** Primary commands as buttons, the rest behind a ⋯ menu. */
+export function WindowCommands({ primary, menu, popover, onAction, }) {
+    if (!primary?.length && !menu?.length)
+        return null;
+    return (_jsxs("div", { className: "caps-window-commands", role: "group", "aria-label": "Commands", children: [primary?.map((command) => command.icon === "play" ? (_jsx(IconButton, { icon: _jsx(Play, {}), "aria-label": command.label, title: command.label, variant: command.variant ?? "ghost", disabled: command.disabled === true, onClick: () => {
+                    onAction?.(command.id);
+                } }, command.id)) : (_jsx(Button, { size: "xs", variant: command.variant ?? "outline", disabled: command.disabled === true, onClick: () => {
+                    onAction?.(command.id);
+                }, children: command.label }, command.id))), menu?.length ? (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { render: _jsx(IconButton, { icon: _jsx(Ellipsis, {}), "aria-label": "More" }) }), _jsx(DropdownMenuContent, { align: "end", container: popover, children: menu.map((command) => (_jsx(DropdownMenuItem, { disabled: command.disabled === true, variant: command.tone === "destructive" ? "destructive" : "default", onSelect: () => {
+                                onAction?.(command.id);
+                            }, children: command.label }, command.id))) })] })) : null] }));
+}
+/** Settled beads reveal their labels on hover/focus; other state stays visible. */
+export function WindowStatuses({ status, }) {
+    if (status.length === 0)
+        return null;
+    return (_jsx("div", { className: "caps-window-statuses", role: "group", "aria-label": "State", children: status.map((item) => {
+            const beadOnly = item.presentation === "bead";
+            const readout = (_jsx(Status, { glyph: "dot", size: "compact", tone: item.tone ?? "neutral", label: beadOnly ? (_jsx("span", { className: "sr-only", children: item.label })) : (item.label), tabIndex: beadOnly ? 0 : undefined, title: beadOnly ? undefined : item.label, className: "caps-window-status" }, item.id));
+            return beadOnly ? (_jsxs(Tooltip, { side: "bottom", children: [_jsx(TooltipTrigger, { asChild: true, children: readout }), _jsx(TooltipContent, { children: item.label })] }, item.id)) : (readout);
+        }) }));
+}

package/dist/components/window.d.ts

@@ -1,4 +1,6 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { type WindowStatus, type WindowCommand, type WindowCrumb } from "./window-crumbs.js";
+export type { WindowCommand, WindowCrumb, WindowStatus, } from "./window-crumbs.js";
 /** Window presentation only. The host owns geometry, focus order and lifecycle. */
 export type WindowFrameProps = HTMLAttributes<HTMLElement> & {
     active?: boolean;
@@ -33,12 +35,30 @@ export type WindowHeaderProps = Omit<HTMLAttributes<HTMLElement>, "title" | "chi
     actions?: ReactNode;
     /** Present only while there is somewhere to go back to. */
     back?: WindowBackAction;
+    /**
+     * The content's path, shown in place of the title and subtitle. The last
+     * crumb is the current place; earlier ones are links, and a crumb with
+     * siblings is a switcher.
+     */
+    crumbs?: readonly WindowCrumb[];
+    /** Selected crumb, or the sibling chosen from a switcher crumb. */
+    onCrumb?: (crumbId: string, siblingId?: string) => void;
+    /** Quiet facts about the view, such as "Valid" or "Saved", with beads. */
+    status?: readonly WindowStatus[];
+    /** The view's own commands, as buttons before the window controls. */
+    primary?: readonly WindowCommand[];
+    /** Less common commands, behind a ⋯ menu. */
+    menu?: readonly WindowCommand[];
+    /** A primary or menu command the person used, by its id. */
+    onAction?: (id: string) => void;
+    /** Where header menus open; the host's popover layer. */
+    popover?: HTMLElement | null;
     /** `compact` is a slim bar for tiled layouts; touch targets keep 44px. */
     density?: "regular" | "compact";
     handleProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">;
 };
 /** The handle, Back and actions are siblings, so presses never start a drag. */
-export declare function WindowHeader({ title, subtitle, icon, actions, back, density, handleProps, className, ...props }: WindowHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WindowHeader({ title, subtitle, icon, actions, back, crumbs, onCrumb, primary, menu, status, onAction, popover, density, handleProps, className, ...props }: WindowHeaderProps): import("react/jsx-runtime").JSX.Element;
 /** Available callbacks determine available controls; no inert placeholder actions. */
 export type WindowActionsProps = {
     title: string;

package/dist/components/window.js

@@ -3,6 +3,7 @@ import { ArrowLeft, ArrowUpRight, Columns2, Maximize2, Minimize2, Minus, PanelsT
 import { forwardRef, } from "react";
 import { cn } from "../lib/cn.js";
 import { IconButton } from "./icon-button.js";
+import { WindowCommands, WindowCrumbs, WindowStatuses, } from "./window-crumbs.js";
 /** A clipped, rounded shell for either a tiled or floating application. */
 export const WindowFrame = forwardRef(function WindowFrame({ active = false, floating = false, fitContent = false, className, ...props }, ref) {
     return (_jsx("section", { ...props, ref: ref, className: cn("caps-window", className), "data-active": active, "data-floating": floating, "data-fit-content": fitContent }));
@@ -12,10 +13,11 @@ export function WindowSnapPreview({ className, ...props }) {
     return (_jsx("div", { ...props, "aria-hidden": "true", className: cn("caps-window-snap-preview", className) }));
 }
 /** The handle, Back and actions are siblings, so presses never start a drag. */
-export function WindowHeader({ title, subtitle, icon, actions, back, density = "regular", handleProps, className, ...props }) {
+export function WindowHeader({ title, subtitle, icon, actions, back, crumbs, onCrumb, primary, menu, status, onAction, popover, density = "regular", handleProps, className, ...props }) {
     const label = subtitle ? `${title} · ${subtitle}` : title;
-    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "caps-window-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "caps-window-name", children: title }), subtitle && (_jsxs("span", { className: "caps-window-subtitle", children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", subtitle] }))] }));
-    return (_jsxs("header", { ...props, className: cn("caps-window-header", className), "data-density": density, children: [back && (_jsx(IconButton, { className: "caps-window-back", "aria-label": back.label, title: back.hint ?? back.label, icon: _jsx(ArrowLeft, {}), onClick: back.onBack })), handleProps ? (_jsx("button", { ...handleProps, type: "button", "data-caps-window-handle": true, className: cn("caps-window-title", handleProps.className), title: label, children: content })) : (_jsx("div", { className: "caps-window-title", title: label, children: content })), actions] }));
+    const trail = crumbs !== undefined && crumbs.length > 0;
+    const content = trail ? null : (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "caps-window-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "caps-window-name", children: title }), subtitle && (_jsxs("span", { className: "caps-window-subtitle", children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", subtitle] }))] }));
+    return (_jsxs("header", { ...props, className: cn("caps-window-header", className), "data-density": density, children: [back && (_jsx(IconButton, { className: "caps-window-back", "aria-label": back.label, title: back.hint ?? back.label, icon: _jsx(ArrowLeft, {}), onClick: back.onBack })), trail ? (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "caps-window-icon", "aria-hidden": "true", children: icon })), _jsx(WindowCrumbs, { crumbs: crumbs, popover: popover, onCrumb: onCrumb })] })) : null, handleProps ? (_jsx("button", { ...handleProps, type: "button", "data-caps-window-handle": true, className: cn("caps-window-title", handleProps.className), title: label, ...(trail ? { "aria-label": label } : {}), children: content })) : (_jsx("div", { className: "caps-window-title", title: label, ...(trail ? { "aria-hidden": true } : {}), children: content })), status ? _jsx(WindowStatuses, { status: status }) : null, _jsx(WindowCommands, { primary: primary, menu: menu, popover: popover, onAction: onAction }), actions] }));
 }
 /** Consistent icons, ordering and accessible names for host-owned commands. */
 export function WindowActions({ title, floating = false, maximized = false, onPromote, onToggleFloating, onToggleMaximize, onMinimize, onClose, onSelect, }) {

package/dist/styles.css

@@ -5466,9 +5466,6 @@
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
-  .mb-xs {
-    margin-bottom: var(--spacing-xs);
-  }
   .status {
     @layer daisyui.l1.l2.l3 {
       display: inline-block;
@@ -5908,15 +5905,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-  .w-20 {
-    width: calc(var(--spacing) * 20);
-  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
-  .w-\[calc\(100\%-1rem\)\] {
-    width: calc(100% - 1rem);
-  }
   .w-auto {
     width: auto;
   }
@@ -5980,12 +5971,12 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .grow {
-    flex-grow: 1;
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -6175,9 +6166,6 @@
   .self-stretch {
     align-self: stretch;
   }
-  .justify-self-end {
-    justify-self: flex-end;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -6394,9 +6382,6 @@
   .p-lg {
     padding: var(--spacing-lg);
   }
-  .p-lg\! {
-    padding: var(--spacing-lg) !important;
-  }
   .p-md {
     padding: var(--spacing-md);
   }
@@ -6409,9 +6394,6 @@
   .p-xs {
     padding: var(--spacing-xs);
   }
-  .p-xs\! {
-    padding: var(--spacing-xs) !important;
-  }
   .caps-stat-compact {
     & > .stat {
       padding-block: var(--spacing-xs);
@@ -6448,15 +6430,6 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
-  .ps-md {
-    padding-inline-start: var(--spacing-md);
-  }
-  .ps-xs {
-    padding-inline-start: var(--spacing-xs);
-  }
-  .pe-sm {
-    padding-inline-end: var(--spacing-sm);
-  }
   .pt-3xl {
     padding-top: var(--spacing-3xl);
   }
@@ -6582,9 +6555,6 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
   .alert-error {
     @layer daisyui.l1.l2 {
       color: var(--color-error-content);
@@ -6771,9 +6741,6 @@
   .underline {
     text-decoration-line: underline;
   }
-  .opacity-50 {
-    opacity: 50%;
-  }
   .opacity-55 {
     opacity: 55%;
   }
@@ -7172,20 +7139,6 @@
       }
     }
   }
-  .hover\:gap-md {
-    &:hover {
-      @media (hover: hover) {
-        gap: var(--spacing-md);
-      }
-    }
-  }
-  .hover\:gap-sm {
-    &:hover {
-      @media (hover: hover) {
-        gap: var(--spacing-sm);
-      }
-    }
-  }
   .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
@@ -7214,11 +7167,6 @@
       }
     }
   }
-  .focus\:gap-xs {
-    &:focus {
-      gap: var(--spacing-xs);
-    }
-  }
   .focus-visible\:scale-100 {
     &:focus-visible {
       --tw-scale-x: 100%;
@@ -7373,16 +7321,6 @@
       }
     }
   }
-  .data-\[open\]\:bg-base-200 {
-    &[data-open] {
-      background-color: var(--color-base-200);
-    }
-  }
-  .data-\[open\]\:bg-base-300 {
-    &[data-open] {
-      background-color: var(--color-base-300);
-    }
-  }
   .motion-reduce\:transition-none {
     @media (prefers-reduced-motion: reduce) {
       transition-property: none;
@@ -7448,16 +7386,6 @@
       padding-inline: calc(var(--spacing) * 2);
     }
   }
-  .md\:px-lg {
-    @media (width >= 48rem) {
-      padding-inline: var(--spacing-lg);
-    }
-  }
-  .md\:px-xs {
-    @media (width >= 48rem) {
-      padding-inline: var(--spacing-xs);
-    }
-  }
   .md\:btn-xs {
     @media (width >= 48rem) {
       @layer daisyui.l1.l2 {
@@ -9152,37 +9080,6 @@
     font-family: var(--font-mono);
     line-height: 1;
   }
-  .caps-led {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    color: var(--marginalia-ink);
-    font-size: 0.75rem;
-  }
-  .caps-led-bead {
-    width: 0.625rem;
-    height: 0.625rem;
-    flex: none;
-    border: var(--card-rule-width) solid var(--card-rule);
-    border-radius: var(--radius-selector);
-    background: var(--caps-led-color);
-    box-shadow: 0 0 0 var(--card-rule-width) var(--caps-led-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: 0 0 0 var(--card-rule-width) color-mix(in srgb, var(--caps-led-color) 36%, transparent);
-    }
-  }
-  .caps-led[data-tone="spore"] {
-    --caps-led-color: var(--growth-spore);
-  }
-  .caps-led[data-tone="mycelium"] {
-    --caps-led-color: var(--growth-mycelium);
-  }
-  .caps-led[data-tone="fruiting"] {
-    --caps-led-color: var(--growth-fruiting);
-  }
-  .caps-led[data-active="false"] {
-    --caps-led-color: var(--marginalia-ink);
-  }
   .caps-cartridge-label {
     display: grid;
     justify-items: center;
@@ -14075,6 +13972,98 @@
       min-height: 44px;
     }
   }
+  .caps-window-header > .caps-window-icon {
+    margin-inline: var(--spacing-md) calc(var(--spacing-sm) - var(--spacing-2xs));
+  }
+  .caps-window-crumbs {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex-shrink: 1;
+    font-family: var(--caps-label-font, inherit);
+    font-size: 11px;
+    font-weight: 500;
+  }
+  .caps-window-crumb-item[data-caps-crumb-position="current"] {
+    font-weight: 600;
+  }
+  .caps-window-crumb-item {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+  .caps-window-crumb-separator {
+    padding-inline: var(--spacing-2xs);
+    color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb, currentColor 50%, transparent);
+    }
+  }
+  .caps-window-crumb {
+    min-width: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    gap: var(--spacing-2xs);
+  }
+  .caps-window-crumb-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .caps-window-crumb-item[data-caps-crumb-position="current"] .caps-window-crumb {
+    padding-inline: var(--spacing-xs);
+  }
+  .caps-window-crumbs:has(+ .caps-window-title) {
+    max-width: 70%;
+  }
+  .caps-window-statuses {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    flex-shrink: 0;
+    padding-inline-end: var(--spacing-sm);
+    font-size: 11px;
+    color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb, currentColor 65%, transparent);
+    }
+  }
+  .caps-window-commands {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2xs);
+    flex-shrink: 0;
+  }
+  @media (max-width: 640px) {
+    .caps-window-header:has(.caps-window-crumbs) {
+      flex-wrap: wrap;
+    }
+    .caps-window-crumbs {
+      min-width: min-content;
+      flex-shrink: 0;
+    }
+    .caps-window-crumb-item {
+      flex-shrink: 0;
+    }
+    .caps-window-statuses {
+      gap: var(--spacing-2xs);
+      padding-inline-end: var(--spacing-2xs);
+    }
+    .caps-window-status > span {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .caps-window-crumb-item[data-caps-crumb-position="ancestor"] {
+      display: none;
+    }
+    .caps-window-crumb-item[data-caps-crumb-position="parent"] .caps-window-crumb-separator {
+      display: none;
+    }
+  }
   .caps-window-body {
     flex: 1;
     min-height: 0;
@@ -14408,6 +14397,7 @@
     display: block;
     flex: none;
     overflow: visible;
+    pointer-events: none;
     transition: color var(--stipe-motion-normal) ease;
   }
   .caps-status-mark {
@@ -15112,9 +15102,6 @@
     font-size: var(--text-xs);
     white-space: nowrap;
   }
-  .caps-status-compact .caps-status-bead {
-    transform: scale(0.6);
-  }
   .caps-action-row-trailing {
     display: flex;
     width: 6rem;

package/docs/api/README.md

@@ -118,6 +118,7 @@
 | [components/undo-action](components/undo-action.md)                                 | -           |
 | [components/undo-toast](components/undo-toast.md)                                   | -           |
 | [components/visually-hidden](components/visually-hidden.md)                         | -           |
+| [components/window-crumbs](components/window-crumbs.md)                             | -           |
 | [components/window](components/window.md)                                           | -           |
 | [components/wizard](components/wizard.md)                                           | -           |
 | [enhance/cigarette-card](enhance/cigarette-card.md)                                 | -           |

package/docs/api/components/field-guide.md

@@ -26,35 +26,6 @@ A visible keyboard key from a shortcut or instruction.
 
 ---
 
-### StatusLedTone
-
-```ts
-type StatusLedTone = "spore" | "mycelium" | "fruiting";
-```
-
-Semantic accent pigments for the static status light.
-
----
-
-### StatusLedProps
-
-```ts
-type StatusLedProps = object &
-  Omit<HTMLAttributes<HTMLSpanElement>, "children">;
-```
-
-Props accepted by StatusLed.
-
-#### Type Declaration
-
-| Name     | Type                              |
-| -------- | --------------------------------- |
-| `active` | `boolean`                         |
-| `label`  | `string`                          |
-| `tone?`  | [`StatusLedTone`](#statusledtone) |
-
----
-
 ### CartridgeLabelProps
 
 ```ts
@@ -115,26 +86,6 @@ The shared field-guide treatment for a keyboard key.
 
 ---
 
-### StatusLed()
-
-```ts
-function StatusLed(__namedParameters): Element;
-```
-
-A static, labelled indicator using the current field-guide pigment tokens.
-
-#### Parameters
-
-| Parameter           | Type                                |
-| ------------------- | ----------------------------------- |
-| `__namedParameters` | [`StatusLedProps`](#statusledprops) |
-
-#### Returns
-
-`Element`
-
----
-
 ### CartridgeLabel()
 
 ```ts

package/docs/api/components/window-crumbs.md

@@ -0,0 +1,201 @@
+<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
+
+[**@fungi.computer/caps**](../README.md)
+
+---
+
+[@fungi.computer/caps](../README.md) / components/window-crumbs
+
+# components/window-crumbs
+
+## Type Aliases
+
+### WindowCrumb
+
+```ts
+type WindowCrumb = object;
+```
+
+One place in the content's path; `siblings` makes it a switcher.
+
+#### Properties
+
+##### id
+
+```ts
+id: string;
+```
+
+##### label
+
+```ts
+label: string;
+```
+
+##### siblings?
+
+```ts
+optional siblings?: readonly object[];
+```
+
+Other places at this level, offered by a ▾ switcher on the crumb.
+
+---
+
+### WindowCommand
+
+```ts
+type WindowCommand = object;
+```
+
+A command the content offers in the header; the content owns its effect.
+
+#### Properties
+
+##### id
+
+```ts
+id: string;
+```
+
+##### label
+
+```ts
+label: string;
+```
+
+##### icon?
+
+```ts
+optional icon?: "play";
+```
+
+Render a supported glyph alone; label remains the accessible name.
+
+##### variant?
+
+```ts
+optional variant?: "primary" | "outline" | "ghost";
+```
+
+Which Caps button a primary command wears; default `outline`.
+
+##### tone?
+
+```ts
+optional tone?: "destructive";
+```
+
+A menu item that removes or discards something.
+
+##### disabled?
+
+```ts
+optional disabled?: boolean;
+```
+
+---
+
+### WindowStatus
+
+```ts
+type WindowStatus = object;
+```
+
+A quiet fact about the view: muted text led by the Caps status bead.
+
+#### Properties
+
+##### id
+
+```ts
+id: string;
+```
+
+##### label
+
+```ts
+label: string;
+```
+
+##### presentation?
+
+```ts
+optional presentation?: "bead";
+```
+
+Hide only the visible label, retaining it for assistive technology.
+
+##### tone?
+
+```ts
+optional tone?: Extract<StatusTone, "neutral" | "info" | "warning" | "success" | "error">;
+```
+
+## Functions
+
+### WindowCrumbs()
+
+```ts
+function WindowCrumbs(__namedParameters): Element;
+```
+
+The path as a trail; on a phone only `‹ parent › current` remain.
+
+#### Parameters
+
+| Parameter                    | Type                                                                                                                                            |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `__namedParameters`          | \{ `crumbs`: readonly [`WindowCrumb`](#windowcrumb)[]; `popover?`: `HTMLElement` \| `null`; `onCrumb?`: (`crumbId`, `siblingId?`) => `void`; \} |
+| `__namedParameters.crumbs`   | readonly [`WindowCrumb`](#windowcrumb)[]                                                                                                        |
+| `__namedParameters.popover?` | `HTMLElement` \| `null`                                                                                                                         |
+| `__namedParameters.onCrumb?` | (`crumbId`, `siblingId?`) => `void`                                                                                                             |
+
+#### Returns
+
+`Element`
+
+---
+
+### WindowCommands()
+
+```ts
+function WindowCommands(__namedParameters): Element | null;
+```
+
+Primary commands as buttons, the rest behind a ⋯ menu.
+
+#### Parameters
+
+| Parameter                     | Type                                                                                                                                                                                       |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `__namedParameters`           | \{ `primary?`: readonly [`WindowCommand`](#windowcommand)[]; `menu?`: readonly [`WindowCommand`](#windowcommand)[]; `popover?`: `HTMLElement` \| `null`; `onAction?`: (`id`) => `void`; \} |
+| `__namedParameters.primary?`  | readonly [`WindowCommand`](#windowcommand)[]                                                                                                                                               |
+| `__namedParameters.menu?`     | readonly [`WindowCommand`](#windowcommand)[]                                                                                                                                               |
+| `__namedParameters.popover?`  | `HTMLElement` \| `null`                                                                                                                                                                    |
+| `__namedParameters.onAction?` | (`id`) => `void`                                                                                                                                                                           |
+
+#### Returns
+
+`Element` \| `null`
+
+---
+
+### WindowStatuses()
+
+```ts
+function WindowStatuses(__namedParameters): Element | null;
+```
+
+Settled beads reveal their labels on hover/focus; other state stays visible.
+
+#### Parameters
+
+| Parameter                  | Type                                                        |
+| -------------------------- | ----------------------------------------------------------- |
+| `__namedParameters`        | \{ `status`: readonly [`WindowStatus`](#windowstatus)[]; \} |
+| `__namedParameters.status` | readonly [`WindowStatus`](#windowstatus)[]                  |
+
+#### Returns
+
+`Element` \| `null`

package/docs/api/components/window.md

@@ -82,15 +82,22 @@ Supply handleProps only when the title is an interactive layout handle.
 
 #### Type Declaration
 
-| Name           | Type                                                                              | Description                                                          |
-| -------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `title`        | `string`                                                                          | -                                                                    |
-| `subtitle?`    | `string`                                                                          | Where the content is now, shown after the title and truncated first. |
-| `icon?`        | `ReactNode`                                                                       | -                                                                    |
-| `actions?`     | `ReactNode`                                                                       | -                                                                    |
-| `back?`        | [`WindowBackAction`](#windowbackaction)                                           | Present only while there is somewhere to go back to.                 |
-| `density?`     | `"regular"` \| `"compact"`                                                        | `compact` is a slim bar for tiled layouts; touch targets keep 44px.  |
-| `handleProps?` | `Omit`\<`ButtonHTMLAttributes`\<`HTMLButtonElement`\>, `"children"` \| `"type"`\> | -                                                                    |
+| Name           | Type                                                                              | Description                                                                                                                                                         |
+| -------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`        | `string`                                                                          | -                                                                                                                                                                   |
+| `subtitle?`    | `string`                                                                          | Where the content is now, shown after the title and truncated first.                                                                                                |
+| `icon?`        | `ReactNode`                                                                       | -                                                                                                                                                                   |
+| `actions?`     | `ReactNode`                                                                       | -                                                                                                                                                                   |
+| `back?`        | [`WindowBackAction`](#windowbackaction)                                           | Present only while there is somewhere to go back to.                                                                                                                |
+| `crumbs?`      | readonly [`WindowCrumb`](window-crumbs.md#windowcrumb)[]                          | The content's path, shown in place of the title and subtitle. The last crumb is the current place; earlier ones are links, and a crumb with siblings is a switcher. |
+| `onCrumb()?`   | (`crumbId`, `siblingId?`) => `void`                                               | Selected crumb, or the sibling chosen from a switcher crumb.                                                                                                        |
+| `status?`      | readonly [`WindowStatus`](window-crumbs.md#windowstatus)[]                        | Quiet facts about the view, such as "Valid" or "Saved", with beads.                                                                                                 |
+| `primary?`     | readonly [`WindowCommand`](window-crumbs.md#windowcommand)[]                      | The view's own commands, as buttons before the window controls.                                                                                                     |
+| `menu?`        | readonly [`WindowCommand`](window-crumbs.md#windowcommand)[]                      | Less common commands, behind a ⋯ menu.                                                                                                                              |
+| `onAction()?`  | (`id`) => `void`                                                                  | A primary or menu command the person used, by its id.                                                                                                               |
+| `popover?`     | `HTMLElement` \| `null`                                                           | Where header menus open; the host's popover layer.                                                                                                                  |
+| `density?`     | `"regular"` \| `"compact"`                                                        | `compact` is a slim bar for tiled layouts; touch targets keep 44px.                                                                                                 |
+| `handleProps?` | `Omit`\<`ButtonHTMLAttributes`\<`HTMLButtonElement`\>, `"children"` \| `"type"`\> | -                                                                                                                                                                   |
 
 ---
 
@@ -289,3 +296,21 @@ Consistent icons, ordering and accessible names for host-owned commands.
 #### Returns
 
 `Element`
+
+## References
+
+### WindowCommand
+
+Re-exports [WindowCommand](window-crumbs.md#windowcommand)
+
+---
+
+### WindowCrumb
+
+Re-exports [WindowCrumb](window-crumbs.md#windowcrumb)
+
+---
+
+### WindowStatus
+
+Re-exports [WindowStatus](window-crumbs.md#windowstatus)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -371,6 +371,7 @@
       "import": "./dist/blocks/card-grid.js"
     },
     "./fonts.css": "./src/fonts.css",
+    "./fonts-sans.css": "./src/fonts-sans.css",
     "./blocks/section-heading": {
       "types": "./dist/blocks/section-heading.d.ts",
       "import": "./dist/blocks/section-heading.js"
@@ -458,6 +459,7 @@
     "docs/api",
     "README.md",
     "src/fonts.css",
+    "src/fonts-sans.css",
     "src/status-tray.css",
     "src/app-status-bar.css"
   ],
@@ -468,9 +470,9 @@
     "effect": "4.0.2"
   },
   "devDependencies": {
-    "@fungi.computer/maosaico": "0.0.1",
-    "@fungi.computer/sprite": "0.0.1",
-    "@fungi.computer/sprite-zdog": "0.0.1",
+    "@fungi.computer/maosaico": "0.1.0",
+    "@fungi.computer/sprite": "0.2.0",
+    "@fungi.computer/sprite-zdog": "0.2.0",
     "@ladle/react": "5.1.1",
     "@tailwindcss/cli": "4.2.1",
     "@types/react": "18.3.3",
@@ -487,7 +489,7 @@
     "typescript": "5.9.3",
     "vite": "8.2.2",
     "vitest": "4.1.11",
-    "@fungi.computer/sigils": "0.0.1",
+    "@fungi.computer/sigils": "0.2.0",
     "postcss-value-parser": "4.2.0",
     "@tanstack/react-form": "1.33.2",
     "effect": "4.0.2",
@@ -496,7 +498,7 @@
   },
   "dependencies": {
     "@base-ui/react": "1.9.0",
-    "@fungi.computer/stipe": "0.0.1",
+    "@fungi.computer/stipe": "0.1.0",
     "@radix-ui/react-slot": "1.3.0",
     "@tailwindcss/typography": "0.5.19",
     "@tanstack/highlight": "0.0.9",

package/src/fonts-sans.css

@@ -0,0 +1 @@
+@import "@fungi.computer/stipe/fonts-sans.css";

package/src/styles.css

@@ -1,6 +1,6 @@
 /*
  * Caps' single style entry. Stipe owns Daisy's theme engine and all shared
- * semantic values; Caps only asks Tailwind to scan its editable source.
+ * semantic values; Caps only asks Tailwind to scan its own components.
  * Caps owns reading rhythm through Tailwind Typography's `prose`.
  */
 @import "@fungi.computer/stipe/styles.css";
@@ -9,7 +9,13 @@
 
 @plugin "@tailwindcss/typography";
 
+/* In the workspace Tailwind scans the component source; published, this
+ * entry ships without it, and the compiled components in dist carry the same
+ * class names. Tests ship in neither, so neither build styles them. */
 @source "./";
+@source "../dist/**/*.js";
+@source not "./**/*.test.tsx";
+@source not "./test-utils";
 
 /* The themed brand fill stays untouched. Link ink and focus rings keep the
    primary's hue and chroma and only move lightness toward the ink side of
@@ -411,35 +417,6 @@
     font-family: var(--font-mono);
     line-height: 1;
   }
-  .caps-led {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    color: var(--marginalia-ink);
-    font-size: 0.75rem;
-  }
-  .caps-led-bead {
-    width: 0.625rem;
-    height: 0.625rem;
-    flex: none;
-    border: var(--card-rule-width) solid var(--card-rule);
-    border-radius: var(--radius-selector);
-    background: var(--caps-led-color);
-    box-shadow: 0 0 0 var(--card-rule-width)
-      color-mix(in srgb, var(--caps-led-color) 36%, transparent);
-  }
-  .caps-led[data-tone="spore"] {
-    --caps-led-color: var(--growth-spore);
-  }
-  .caps-led[data-tone="mycelium"] {
-    --caps-led-color: var(--growth-mycelium);
-  }
-  .caps-led[data-tone="fruiting"] {
-    --caps-led-color: var(--growth-fruiting);
-  }
-  .caps-led[data-active="false"] {
-    --caps-led-color: var(--marginalia-ink);
-  }
   .caps-cartridge-label {
     display: grid;
     justify-items: center;
@@ -5849,6 +5826,104 @@
       min-height: 44px;
     }
   }
+  /* The path trail: flat text crumbs on the header face, no new colours.
+     It keeps the title's size and the header's 32px height, and its icon
+     sits where a plain title's icon sits, so switching views never shifts it. */
+  .caps-window-header > .caps-window-icon {
+    margin-inline: var(--spacing-md)
+      calc(var(--spacing-sm) - var(--spacing-2xs));
+  }
+  .caps-window-crumbs {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    flex-shrink: 1;
+    font-family: var(--caps-label-font, inherit);
+    font-size: 11px;
+    font-weight: 500;
+  }
+  .caps-window-crumb-item[data-caps-crumb-position="current"] {
+    font-weight: 600;
+  }
+  .caps-window-crumb-item {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+  .caps-window-crumb-separator {
+    padding-inline: var(--spacing-2xs);
+    color: color-mix(in srgb, currentColor 50%, transparent);
+  }
+  .caps-window-crumb {
+    min-width: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    gap: var(--spacing-2xs);
+  }
+  .caps-window-crumb-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .caps-window-crumb-item[data-caps-crumb-position="current"]
+    .caps-window-crumb {
+    padding-inline: var(--spacing-xs);
+  }
+  /* The trail keeps its width beside the empty title handle (a zero basis),
+     and gives way, crumb labels first, only when the row runs out of room. */
+  .caps-window-crumbs:has(+ .caps-window-title) {
+    max-width: 70%;
+  }
+  .caps-window-statuses {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    flex-shrink: 0;
+    padding-inline-end: var(--spacing-sm);
+    font-size: 11px;
+    color: color-mix(in srgb, currentColor 65%, transparent);
+  }
+  .caps-window-commands {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2xs);
+    flex-shrink: 0;
+  }
+  /* A phone keeps `‹ parent › current`; the rest of the trail is a tap away on Back. */
+  @media (max-width: 640px) {
+    /* Touch buttons cannot shrink below 44px. Reserve their path's width
+       instead of shrinking its containers underneath neighbouring targets. */
+    .caps-window-header:has(.caps-window-crumbs) {
+      flex-wrap: wrap;
+    }
+    .caps-window-crumbs {
+      min-width: min-content;
+      flex-shrink: 0;
+    }
+    .caps-window-crumb-item {
+      flex-shrink: 0;
+    }
+    /* State shrinks to its beads; the words stay for screen readers and a long press. */
+    .caps-window-statuses {
+      gap: var(--spacing-2xs);
+      padding-inline-end: var(--spacing-2xs);
+    }
+    .caps-window-status > span {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .caps-window-crumb-item[data-caps-crumb-position="ancestor"] {
+      display: none;
+    }
+    .caps-window-crumb-item[data-caps-crumb-position="parent"]
+      .caps-window-crumb-separator {
+      display: none;
+    }
+  }
   .caps-window-body {
     flex: 1;
     min-height: 0;
@@ -6260,6 +6335,8 @@
     display: block;
     flex: none;
     overflow: visible;
+    /* Decorative material overflows the bead; only its status wrapper is a target. */
+    pointer-events: none;
     transition: color var(--stipe-motion-normal) ease;
   }
 
@@ -7063,9 +7140,6 @@
     font-size: var(--text-xs);
     white-space: nowrap;
   }
-  .caps-status-compact .caps-status-bead {
-    transform: scale(0.6);
-  }
   .caps-action-row-trailing {
     display: flex;
     width: 6rem;