@fungi.computer/caps 0.1.0 → 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

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/window-crumbs.d.ts

@@ -13,6 +13,8 @@ export type WindowCrumb = {
 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. */
@@ -23,6 +25,8 @@ export type WindowCommand = {
 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. */
@@ -38,7 +42,7 @@ export declare function WindowCommands({ primary, menu, popover, onAction, }: {
     popover?: HTMLElement | null | undefined;
     onAction?: ((id: string) => void) | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
-/** Muted state text with the Caps status bead; hidden on a phone. */
+/** 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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, Ellipsis } from "lucide-react";
+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() {
@@ -16,13 +17,13 @@ function Crumb({ crumb, current, popover, onCrumb, }) {
         "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: "sm", 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: () => {
+        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: "sm", variant: "ghost", className: "caps-window-crumb shrink", onClick: () => {
+    return (_jsx(Button, { ...common, size: "xs", variant: "ghost", className: "caps-window-crumb shrink", onClick: () => {
             onCrumb(crumb.id);
         }, children: label }));
 }
@@ -44,7 +45,7 @@ export function WindowCrumbs({ crumbs, popover, onCrumb, }) {
     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: "sm", 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: () => {
+        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)
@@ -55,15 +56,21 @@ export function WindowCrumbs({ crumbs, popover, onCrumb, }) {
 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) => (_jsx(Button, { size: "sm", variant: command.variant ?? "outline", disabled: command.disabled === true, onClick: () => {
+    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] }));
 }
-/** Muted state text with the Caps status bead; hidden on a phone. */
+/** 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) => (_jsx(Status, { glyph: "dot", size: "compact", tone: item.tone ?? "neutral", label: item.label, title: item.label, className: "caps-window-status" }, item.id))) }));
+    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/styles.css

@@ -13972,8 +13972,8 @@
       min-height: 44px;
     }
   }
-  .caps-window-header:has(> .caps-window-crumbs) {
-    min-height: 40px;
+  .caps-window-header > .caps-window-icon {
+    margin-inline: var(--spacing-md) calc(var(--spacing-sm) - var(--spacing-2xs));
   }
   .caps-window-crumbs {
     display: flex;
@@ -13981,7 +13981,7 @@
     min-width: 0;
     flex-shrink: 1;
     font-family: var(--caps-label-font, inherit);
-    font-size: var(--text-sm);
+    font-size: 11px;
     font-weight: 500;
   }
   .caps-window-crumb-item[data-caps-crumb-position="current"] {
@@ -14022,7 +14022,7 @@
     gap: var(--spacing-sm);
     flex-shrink: 0;
     padding-inline-end: var(--spacing-sm);
-    font-size: var(--text-sm);
+    font-size: 11px;
     color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in srgb, currentColor 65%, transparent);
@@ -14035,6 +14035,16 @@
     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);
@@ -14387,6 +14397,7 @@
     display: block;
     flex: none;
     overflow: visible;
+    pointer-events: none;
     transition: color var(--stipe-motion-normal) ease;
   }
   .caps-status-mark {

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

@@ -64,6 +64,14 @@ id: string;
 label: string;
 ```
 
+##### icon?
+
+```ts
+optional icon?: "play";
+```
+
+Render a supported glyph alone; label remains the accessible name.
+
 ##### variant?
 
 ```ts
@@ -110,6 +118,14 @@ id: string;
 label: string;
 ```
 
+##### presentation?
+
+```ts
+optional presentation?: "bead";
+```
+
+Hide only the visible label, retaining it for assistive technology.
+
 ##### tone?
 
 ```ts
@@ -171,7 +187,7 @@ Primary commands as buttons, the rest behind a ⋯ menu.
 function WindowStatuses(__namedParameters): Element | null;
 ```
 
-Muted state text with the Caps status bead; hidden on a phone.
+Settled beads reveal their labels on hover/focus; other state stays visible.
 
 #### Parameters
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.1.0",
+  "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.1.0",
-    "@fungi.computer/sprite-zdog": "0.1.0",
+    "@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.1.0",
+    "@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

@@ -5827,9 +5827,11 @@
     }
   }
   /* The path trail: flat text crumbs on the header face, no new colours.
-     A header that carries a path reads at body size, one control high. */
-  .caps-window-header:has(> .caps-window-crumbs) {
-    min-height: 40px;
+     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;
@@ -5837,7 +5839,7 @@
     min-width: 0;
     flex-shrink: 1;
     font-family: var(--caps-label-font, inherit);
-    font-size: var(--text-sm);
+    font-size: 11px;
     font-weight: 500;
   }
   .caps-window-crumb-item[data-caps-crumb-position="current"] {
@@ -5878,7 +5880,7 @@
     gap: var(--spacing-sm);
     flex-shrink: 0;
     padding-inline-end: var(--spacing-sm);
-    font-size: var(--text-sm);
+    font-size: 11px;
     color: color-mix(in srgb, currentColor 65%, transparent);
   }
   .caps-window-commands {
@@ -5889,6 +5891,18 @@
   }
   /* 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);
@@ -6321,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;
   }