@fungi.computer/caps 0.8.0 → 0.10.0

package/README.md

@@ -832,6 +832,17 @@ your App owns the words.
 - `Keycap touch="hide"` drops a keyboard legend on touch-first devices;
   `KeycapButton` hides its `shortcut` legend that way.
 
+- `SetupNotice` (`blocks/setup-notice`) names a missing setup with its one fix:
+  `need` (title), `cause` (one sentence), required `fix`, optional `secondary`
+  and `available` (what still works), and `variant` `panel` (an EmptyState
+  panel), `banner` or `inline` (a warning Alert). While `fix.pending` the button
+  shows the Loader and reads "Waiting for {waitingFor}…". Render it only while
+  the setup is missing; the host unmounts it when the fact turns ready. One
+  notice per window, and the notice is the call to action.
+- `FailureLine` (`components/failure-line`) is the item failure: an error dot,
+  one plain line, labelled `Retry` / `Dismiss`, and "Failed {n} times" once when
+  `count` is above 1. `density` is `row` or `tile`. Never use the `bang` glyph.
+
 Which key and which status light:
 
 | Need                                                                | Use                     |
@@ -843,6 +854,14 @@ Which key and which status light:
 
 `bang` is for unread beads only. Never put it in a button or chip; use a dot.
 
+### Toaster CSS placement
+
+`Toaster` wraps Sonner, which injects its own unlayered stylesheet at runtime.
+Anything inside a cascade layer loses to it, so the toast rules (Stipe token
+variables, font, close button, icons) live unlayered near the top of
+`src/styles.css`, with raised specificity. Keep new toast rules there, not in
+`first-run.css` or a layer.
+
 ### Hairlines
 
 `--stipe-hairline` (about 22%) outlines controls: Keycap, Button and chips keep

package/dist/blocks/app-bar.d.ts

@@ -15,8 +15,10 @@ export type AppBarProps = {
     /** Portal container for the App dial; defaults to the document body. */
     container?: HTMLElement | null;
     windows: readonly AppBarItem[];
-    /** Team Apps available to launch from the speed dial. */
+    /** Apps available to launch from the speed dial. */
     launchers: readonly AppBarItem[];
+    /** The Apps section heading and its launcher name; the host owns the wording. */
+    appsLabel?: string;
     /** Recent Sessions supplied by the shell's session owner. */
     sessions?: readonly AppBarItem[];
     /** Keep long launcher names readable instead of truncating them. */
@@ -40,4 +42,4 @@ export type AppBarProps = {
     };
 };
 /** An anchored launcher between persistent running apps and a spring-out app tray. */
-export declare function AppBar({ container, windows, launchers, sessions, launcherLabels, alwaysExpanded, isOpen, onOpenChange, emptyLabel, launcher, primaryAction, }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppBar({ container, windows, launchers, sessions, appsLabel, launcherLabels, alwaysExpanded, isOpen, onOpenChange, emptyLabel, launcher, primaryAction, }: AppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/app-bar.js

@@ -42,7 +42,7 @@ function AppBarItemView({ item, available, expanded, onSelect, onClose, session
                 }, children: [_jsx("span", { ref: icon, className: "caps-app-bar-icon", "aria-hidden": "true", children: item.icon ?? _jsx(PanelsTopLeft, {}) }), available ? (_jsx("span", { className: "caps-app-bar-item-label", children: item.label })) : null] }), item.onClose ? (_jsx("button", { type: "button", className: "caps-app-bar-close", "aria-label": `Close ${item.label}`, tabIndex: tabIndex, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) })) : null] }));
 }
 /** An anchored launcher between persistent running apps and a spring-out app tray. */
-export function AppBar({ container, windows, launchers, sessions = [], launcherLabels = "truncate", alwaysExpanded = false, isOpen, onOpenChange, emptyLabel, launcher, primaryAction, }) {
+export function AppBar({ container, windows, launchers, sessions = [], appsLabel = "Apps", launcherLabels = "truncate", alwaysExpanded = false, isOpen, onOpenChange, emptyLabel, launcher, primaryAction, }) {
     const popoverRoot = useOverlayRoot("popover");
     const portalContainer = container ?? popoverRoot;
     const [internalOpen, setInternalOpen] = useState(false);
@@ -232,9 +232,9 @@ export function AppBar({ container, windows, launchers, sessions = [], launcherL
         else
             setOpen(next);
     };
-    return (_jsx(BasePopover.Root, { open: expanded, onOpenChange: changeOpen, modal: false, children: _jsxs("nav", { ref: root, style: appBarStyle, className: "caps-app-bar", "aria-label": "Team Apps and Sessions launcher", "data-open": expanded ? "true" : "false", children: [_jsx("div", { ref: runningRef, className: "caps-app-bar-region caps-app-bar-items", role: "group", "aria-label": "Running apps", "aria-hidden": "false", children: windows.map((item) => renderItem(item, false)) }), _jsx("div", { className: "caps-app-bar-launcher", children: _jsx("button", { ref: launcherRef, type: "button", className: "caps-app-bar-launcher-button", "aria-label": launcher.label, title: launcher.label, "aria-expanded": expanded, "aria-controls": primaryAction ? actionId : availableId, onClick: () => {
+    return (_jsx(BasePopover.Root, { open: expanded, onOpenChange: changeOpen, modal: false, children: _jsxs("nav", { ref: root, style: appBarStyle, className: "caps-app-bar", "aria-label": `${appsLabel} and Sessions launcher`, "data-open": expanded ? "true" : "false", children: [_jsx("div", { ref: runningRef, className: "caps-app-bar-region caps-app-bar-items", role: "group", "aria-label": "Running apps", "aria-hidden": "false", children: windows.map((item) => renderItem(item, false)) }), _jsx("div", { className: "caps-app-bar-launcher", children: _jsx("button", { ref: launcherRef, type: "button", className: "caps-app-bar-launcher-button", "aria-label": launcher.label, title: launcher.label, "aria-expanded": expanded, "aria-controls": primaryAction ? actionId : availableId, onClick: () => {
                             setOpen(!open);
-                        }, children: _jsx("span", { className: "caps-app-bar-mascot", "aria-hidden": "true", children: launcher.icon ?? _jsx(PanelsTopLeft, {}) }) }) }), portalContainer ? (_jsx(BasePopover.Portal, { container: portalContainer, keepMounted: true, children: _jsx(BasePopover.Positioner, { anchor: root, side: "bottom", align: "start", sideOffset: 4, collisionPadding: 8, collisionBoundary: portalContainer === document.body ? undefined : portalContainer, className: "caps-app-bar-positioner", children: _jsxs(BasePopover.Popup, { initialFocus: false, finalFocus: false, style: appBarStyle, ref: availableRef, id: availableId, className: "caps-app-bar-region caps-app-bar-launchers", role: "group", "aria-label": "Speed dial", "aria-hidden": !expanded, children: [launchers.length > 0 ? (_jsxs("div", { className: "caps-app-bar-section", role: "group", "aria-label": "Team Apps", children: [_jsx("span", { className: "caps-app-bar-section-label", children: "Team Apps" }), _jsx("div", { className: "caps-app-bar-app-list", children: launchers.map((item) => renderItem(item, true)) })] })) : null, sessions.length > 0 ? (_jsxs("div", { className: "caps-app-bar-section caps-app-bar-sessions", role: "group", "aria-label": "Recent Sessions", children: [_jsx("span", { className: "caps-app-bar-section-label", children: "Recent Sessions" }), _jsx("div", { className: "caps-app-bar-session-list", children: sessions.map((item) => renderItem(item, true, true)) })] })) : null, launchers.length === 0 &&
+                        }, children: _jsx("span", { className: "caps-app-bar-mascot", "aria-hidden": "true", children: launcher.icon ?? _jsx(PanelsTopLeft, {}) }) }) }), portalContainer ? (_jsx(BasePopover.Portal, { container: portalContainer, keepMounted: true, children: _jsx(BasePopover.Positioner, { anchor: root, side: "bottom", align: "start", sideOffset: 4, collisionPadding: 8, collisionBoundary: portalContainer === document.body ? undefined : portalContainer, className: "caps-app-bar-positioner", children: _jsxs(BasePopover.Popup, { initialFocus: false, finalFocus: false, style: appBarStyle, ref: availableRef, id: availableId, className: "caps-app-bar-region caps-app-bar-launchers", role: "group", "aria-label": "Speed dial", "aria-hidden": !expanded, children: [launchers.length > 0 ? (_jsxs("div", { className: "caps-app-bar-section", role: "group", "aria-label": appsLabel, children: [_jsx("span", { className: "caps-app-bar-section-label", children: appsLabel }), _jsx("div", { className: "caps-app-bar-app-list", children: launchers.map((item) => renderItem(item, true)) })] })) : null, sessions.length > 0 ? (_jsxs("div", { className: "caps-app-bar-section caps-app-bar-sessions", role: "group", "aria-label": "Recent Sessions", children: [_jsx("span", { className: "caps-app-bar-section-label", children: "Recent Sessions" }), _jsx("div", { className: "caps-app-bar-session-list", children: sessions.map((item) => renderItem(item, true, true)) })] })) : null, launchers.length === 0 &&
                                     sessions.length === 0 &&
                                     emptyLabel ? (_jsx("span", { className: "caps-app-bar-empty", role: "status", children: emptyLabel })) : null] }) }) })) : null, primaryAction && portalContainer ? (_jsx(BasePopover.Root, { open: open, onOpenChange: changeOpen, modal: false, children: _jsx(BasePopover.Portal, { container: portalContainer, keepMounted: true, children: _jsx(BasePopover.Positioner, { anchor: launcherRef, side: "bottom", align: "end", sideOffset: 8, collisionPadding: 8, collisionBoundary: portalContainer === document.body
                                 ? undefined

package/dist/blocks/setup-notice.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** A step the person takes to finish setup. */
+export type SetupNoticeAction = Readonly<{
+    label: string;
+    /** Called when the step is chosen. */
+    onSelect: () => void;
+}>;
+/** The required fix; `pending` means it opened Settings and is waiting. */
+export type SetupNoticeFix = SetupNoticeAction & Readonly<{
+    pending?: boolean;
+}>;
+/** Props accepted by SetupNotice. */
+export type SetupNoticeProps = Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    /** The title, such as "Connect a model to start chatting". */
+    need: ReactNode;
+    /** One sentence naming the real cause. */
+    cause: ReactNode;
+    /** The one primary fix; never a dead CTA. */
+    fix: SetupNoticeFix;
+    secondary?: SetupNoticeAction;
+    /** What still works meanwhile, such as "Uploads work now". */
+    available?: ReactNode;
+    /** The panel's own glyph (an App icon, say) in place of the warning bead; ignored by `banner` and `inline`. */
+    visual?: Exclude<ReactNode, string>;
+    /** Names what is awaited while pending, after "Waiting for". */
+    waitingFor?: string;
+    /** `panel` replaces an empty state; `banner` and `inline` sit above or in content. */
+    variant: "panel" | "inline" | "banner";
+};
+/**
+ * Missing setup, named with its fix. Render it only while the setup fact is
+ * missing; when the fact turns ready the host unmounts it (and may toast).
+ */
+export declare function SetupNotice({ available, cause, className, fix, need, secondary, variant, visual, waitingFor, ...props }: SetupNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/setup-notice.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert } from "../components/alert.js";
+import { Button } from "../components/button.js";
+import { Status } from "../components/status.js";
+import { cn } from "../lib/cn.js";
+import { EmptyState } from "./empty-state.js";
+/**
+ * Missing setup, named with its fix. Render it only while the setup fact is
+ * missing; when the fact turns ready the host unmounts it (and may toast).
+ */
+export function SetupNotice({ available, cause, className, fix, need, secondary, variant, visual, waitingFor = "setup", ...props }) {
+    const pending = fix.pending === true;
+    const label = pending ? `Waiting for ${waitingFor}…` : fix.label;
+    const detail = available ? (_jsxs(_Fragment, { children: [cause, " ", _jsx("span", { className: "caps-setup-notice-available", children: available })] })) : (cause);
+    if (variant === "panel") {
+        return (_jsx(EmptyState, { ...props, actions: secondary ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: secondary.onSelect, children: secondary.label })) : undefined, className: cn("caps-setup-notice", className), "data-variant": "panel", description: detail, primaryAction: {
+                label,
+                onSelect: fix.onSelect,
+                pending,
+            }, title: need, variant: "panel", visual: visual ?? (_jsx(Status, { className: "caps-setup-notice-dot", glyph: "dot", tone: "warning" })) }));
+    }
+    return (_jsx("div", { className: "caps-setup-notice-frame", children: _jsx(Alert, { ...props, action: _jsxs("span", { className: "caps-setup-notice-actions", children: [secondary ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: secondary.onSelect, children: secondary.label })) : null, _jsx(Button, { loading: pending, size: "sm", variant: "outline", onClick: fix.onSelect, children: label })] }), className: cn("caps-setup-notice", className), "data-variant": variant, description: detail, role: "status", title: _jsxs("span", { className: "caps-setup-notice-title", children: [_jsx(Status, { glyph: "dot", tone: "warning" }), need] }), tone: "warning" }) }));
+}

package/dist/components/confirm-action.d.ts

@@ -1,3 +1,4 @@
+import { type ButtonSize, type ButtonVariant } from "./button.js";
 /** A deliberate hold, or an exact phrase before a destructive action. */
 export type ConfirmActionProps = {
     /** The action's trigger label and dialog title. */
@@ -8,6 +9,10 @@ export type ConfirmActionProps = {
     onConfirm: () => Promise<void>;
     /** Caller-owned, safe-to-display failure copy; rejection details are never displayed. */
     error?: string;
+    /** The trigger key's look; destructive by default, quiet where a toolbar needs it. */
+    variant?: ButtonVariant;
+    /** The trigger key's size. */
+    size?: ButtonSize;
 } & ({
     mode: "hold";
     phrase?: never;
@@ -20,4 +25,4 @@ export type ConfirmActionProps = {
  * confirmations available for retry. Type mode closes on success and restores
  * focus through Dialog. A pending action cannot be dismissed or cancelled.
  */
-export declare function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phrase, }: ConfirmActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmAction({ label, confirmLabel, onConfirm, error, variant, size, mode, phrase, }: ConfirmActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/confirm-action.js

@@ -10,7 +10,7 @@ import { Input } from "./input.js";
  * confirmations available for retry. Type mode closes on success and restores
  * focus through Dialog. A pending action cannot be dismissed or cancelled.
  */
-export function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phrase, }) {
+export function ConfirmAction({ label, confirmLabel, onConfirm, error, variant = "destructive", size, mode, phrase, }) {
     const [open, setOpen] = useState(false);
     const [typed, setTyped] = useState("");
     const [state, setState] = useState("idle");
@@ -45,7 +45,7 @@ export function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phr
         }
     }
     if (mode === "hold") {
-        return (_jsxs("div", { className: "grid gap-sm", children: [_jsx(HoldButton, { variant: "destructive", loading: busy, result: result, holdHint: confirmLabel, onConfirm: () => void confirm(), children: label }), _jsx(FieldError, { children: message })] }));
+        return (_jsxs("div", { className: "grid gap-sm", children: [_jsx(HoldButton, { variant: variant, ...(size === undefined ? {} : { size }), loading: busy, result: result, holdHint: confirmLabel, onConfirm: () => void confirm(), children: label }), _jsx(FieldError, { children: message })] }));
     }
     return (_jsxs(Dialog, { open: open, onOpenChange: (next, details) => {
             if (pending.current) {
@@ -55,7 +55,7 @@ export function ConfirmAction({ label, confirmLabel, onConfirm, error, mode, phr
             setOpen(next);
             setTyped("");
             setState("idle");
-        }, children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "destructive" }), children: label }), _jsx(DialogContent, { initialFocus: input, children: _jsxs(Form, { busy: busy, onSubmit: (event) => {
+        }, children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: variant, ...(size === undefined ? {} : { size }) }), children: label }), _jsx(DialogContent, { initialFocus: input, children: _jsxs(Form, { busy: busy, onSubmit: (event) => {
                         event.preventDefault();
                         void confirm();
                     }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: label }), _jsx(DialogDescription, { children: "Type the phrase exactly to confirm." })] }), _jsx(Field, { label: `Type ${phrase} to confirm`, children: _jsx(Input, { ref: input, autoComplete: "off", autoCapitalize: "none", spellCheck: false, value: typed, onChange: (event) => {

package/dist/components/dialog.js

@@ -43,7 +43,7 @@ export const DialogPopup = forwardRef(function DialogPopup({ className, finalFoc
     const dialog = useDialogContext();
     return (_jsx(BaseDialog.Popup, { ...props, "data-size": size, className: (state) => cn("caps-dialog-popup overflow-y-auto overscroll-contain rounded-box bg-base-100 p-lg text-base-content shadow-xl", size === "fill"
             ? "fixed inset-0 h-full w-full max-w-none"
-            : "max-h-screen w-11/12 max-w-(--container-lg)", resolveClassName(className, state)), finalFocus: dialog.interactionOwner === "host" ? false : (finalFocus ?? true), ref: ref }));
+            : "caps-dialog-popup-default", resolveClassName(className, state)), finalFocus: dialog.interactionOwner === "host" ? false : (finalFocus ?? true), ref: ref }));
 });
 /**
  * The default portal, backdrop and popup composition for a Dialog.

package/dist/components/failure-line.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by FailureLine. */
+export type FailureLineProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** One plain line naming the real cause; never a raw code. */
+    message: ReactNode;
+    /** Called when Retry is chosen; without it no Retry button shows. */
+    onRetry?: () => void;
+    /** Called when Dismiss is chosen; without it no Dismiss button shows. */
+    onDismiss?: () => void;
+    retryLabel?: string;
+    dismissLabel?: string;
+    /** A more specific accessible name for Retry, such as "Retry prompt". */
+    retryAriaLabel?: string;
+    /** A more specific accessible name for Dismiss. */
+    dismissAriaLabel?: string;
+    /** How many times it failed; above 1 the line adds a "Failed" line with the count once. */
+    count?: number;
+    /** `row` sits in a list or under a control; `tile` fills a media tile. */
+    density?: "row" | "tile";
+    /** `status` is polite; use `alert` only for a single, urgent failure. */
+    role?: "status" | "alert";
+};
+/**
+ * One item failure: an error dot, one line, and labelled Retry and Dismiss.
+ * It never uses the bang glyph; the dot is the whole signal.
+ */
+export declare const FailureLine: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** One plain line naming the real cause; never a raw code. */
+    message: ReactNode;
+    /** Called when Retry is chosen; without it no Retry button shows. */
+    onRetry?: () => void;
+    /** Called when Dismiss is chosen; without it no Dismiss button shows. */
+    onDismiss?: () => void;
+    retryLabel?: string;
+    dismissLabel?: string;
+    /** A more specific accessible name for Retry, such as "Retry prompt". */
+    retryAriaLabel?: string;
+    /** A more specific accessible name for Dismiss. */
+    dismissAriaLabel?: string;
+    /** How many times it failed; above 1 the line adds a "Failed" line with the count once. */
+    count?: number;
+    /** `row` sits in a list or under a control; `tile` fills a media tile. */
+    density?: "row" | "tile";
+    /** `status` is polite; use `alert` only for a single, urgent failure. */
+    role?: "status" | "alert";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/failure-line.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "./button.js";
+import { Status } from "./status.js";
+import { cn } from "../lib/cn.js";
+/**
+ * One item failure: an error dot, one line, and labelled Retry and Dismiss.
+ * It never uses the bang glyph; the dot is the whole signal.
+ */
+export const FailureLine = forwardRef(function FailureLine({ className, count, density = "row", dismissAriaLabel, dismissLabel = "Dismiss", message, onDismiss, onRetry, retryAriaLabel, retryLabel = "Retry", role = "status", ...props }, ref) {
+    return (_jsxs("div", { ...props, className: cn("caps-failure-line", className), "data-density": density, ref: ref, role: role, children: [_jsx(Status, { glyph: "dot", tone: "error" }), _jsxs("span", { className: "caps-failure-line-copy", children: [_jsx("span", { children: message }), count !== undefined && count > 1 ? (_jsxs("span", { className: "caps-failure-line-count", children: ["Failed ", count, " times"] })) : null] }), onRetry || onDismiss ? (_jsxs("span", { className: "caps-failure-line-actions", children: [onRetry ? (_jsx(Button, { "aria-label": retryAriaLabel, size: "sm", variant: "outline", onClick: onRetry, children: retryLabel })) : null, onDismiss ? (_jsx(Button, { "aria-label": dismissAriaLabel, size: "sm", variant: "ghost", onClick: onDismiss, children: dismissLabel })) : null] })) : null] }));
+});

package/dist/components/keycap.d.ts

@@ -4,8 +4,11 @@ import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "
  * hovered or focused; the rest follow the theme.
  */
 export type KeycapTone = "neutral" | "primary" | "accent" | "inverse" | "destructive";
-/** Keycap sizes: a legend chip, a dock key and a big face key. */
-export type KeycapSize = "sm" | "md" | "lg";
+/**
+ * Keycap sizes: `hint` is a muted inline shortcut caption (caption height, no
+ * plastic), then a legend chip, a dock key and a big face key.
+ */
+export type KeycapSize = "hint" | "sm" | "md" | "lg";
 /** Props accepted by Keycap. */
 export type KeycapProps = HTMLAttributes<HTMLElement> & {
     tone?: KeycapTone;

package/dist/components/toaster.d.ts

@@ -1,4 +1,8 @@
 import { type ToasterProps } from "sonner";
 export { toast } from "sonner";
-/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+/**
+ * Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
+ * Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
+ * restyles open toasts; Sonner's own light and dark palettes are overridden.
+ */
 export declare function Toaster({ className, ...props }: ToasterProps): import("react").ReactPortal | null;

package/dist/components/toaster.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster as Sonner } from "sonner";
+import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { Loader } from "./loader.js";
+import { Status } from "./status.js";
 import { createPortal } from "react-dom";
 import { useOverlayRoot } from "./overlay-root.js";
 export { toast } from "sonner";
-/** Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface. */
+/**
+ * Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
+ * Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
+ * restyles open toasts; Sonner's own light and dark palettes are overridden.
+ */
 export function Toaster({ className, ...props }) {
     const root = useOverlayRoot("toast");
     if (!root)
         return null;
-    return createPortal(_jsx(Sonner, { position: "top-right", swipeDirections: ["right", "top"], offset: 16, gap: 8, className: cn("caps-toaster", className), ...props }), root);
+    return createPortal(_jsx(Sonner, { position: "top-right", swipeDirections: ["right", "top"], offset: 16, gap: 8, icons: {
+            close: _jsx(X, { "aria-hidden": "true", size: 12 }),
+            success: _jsx(Status, { glyph: "dot", tone: "success" }),
+            error: _jsx(Status, { glyph: "dot", tone: "error" }),
+            warning: _jsx(Status, { glyph: "dot", tone: "warning" }),
+            info: _jsx(Status, { glyph: "dot", tone: "info" }),
+            loading: (_jsx(Loader, { decorative: true, size: "sm", tone: "current", variant: "wander" })),
+        }, className: cn("caps-toaster", className), ...props }), root);
 }

package/dist/styles.css

@@ -5795,6 +5795,10 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-48 {
+    width: calc(var(--spacing) * 48);
+    height: calc(var(--spacing) * 48);
+  }
   .size-\[var\(--stipe-icon-size-lg\)\] {
     width: var(--stipe-icon-size-lg);
     height: var(--stipe-icon-size-lg);
@@ -8787,6 +8791,101 @@
   position: static;
   flex: none;
 }
+@layer utilities {
+  .caps-setup-notice-frame {
+    container-type: inline-size;
+  }
+  .caps-setup-notice-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+  .caps-setup-notice[data-variant] {
+    border-color: var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
+    }
+    background: var(--color-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix( in oklab, var(--color-warning) 12%, var(--stipe-surface-raised) );
+    }
+    color: var(--color-base-content);
+  }
+  .caps-setup-notice-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+  .caps-setup-notice-dot {
+    margin-block: var(--spacing-md);
+    scale: 2.5;
+  }
+  .caps-setup-notice-available {
+    color: var(--stipe-fg-muted);
+  }
+  .caps-setup-notice[data-variant="inline"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-sm);
+  }
+  .caps-setup-notice[data-variant="banner"] {
+    border-radius: 0;
+    border-inline: 0;
+  }
+  @container (width <= 36rem) {
+    .caps-setup-notice[data-variant] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .caps-setup-notice[data-variant] > * {
+      flex: none;
+      width: 100%;
+    }
+    .caps-setup-notice-actions {
+      justify-content: flex-start;
+    }
+  }
+  .caps-failure-line {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    font-size: var(--text-sm);
+  }
+  .caps-failure-line-copy {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line-count {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-xs);
+  }
+  .caps-failure-line > .caps-status {
+    margin-block-start: var(--spacing-2xs);
+  }
+  .caps-failure-line-actions {
+    display: flex;
+    flex: none;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line[data-density="tile"] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--spacing-md);
+    text-align: center;
+  }
+  .caps-failure-line[data-density="tile"] > .caps-status {
+    margin-block-start: 0;
+  }
+  .caps-failure-line[data-density="tile"] .caps-failure-line-copy {
+    flex: none;
+  }
+}
 :root, [data-theme] {
   --caps-primary-text: light-dark(
     oklch(from var(--color-primary) clamp(0.2, l, 0.4) c h),
@@ -8806,6 +8905,130 @@
 .caps-toaster[data-sonner-toaster] {
   z-index: var(--stipe-layer-toast);
 }
+.caps-toaster[data-sonner-toaster][data-sonner-theme] {
+  font-family: inherit;
+  --border-radius: var(--radius-box);
+  --normal-bg: var(--stipe-surface-raised);
+  --normal-bg-hover: var(--color-base-200);
+  --normal-border: var(--stipe-hairline-quiet);
+  --normal-border-hover: var(--stipe-hairline);
+  --normal-text: var(--color-base-content);
+  --success-bg: var(--color-success);
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-bg: color-mix(
+    in oklab,
+    var(--color-success) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --success-border: var(--color-success);
+  @supports (color: color-mix(in lab, red, red)) {
+    --success-border: color-mix(in oklab, var(--color-success) 35%, transparent);
+  }
+  --success-text: var(--color-base-content);
+  --info-bg: var(--color-info);
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-bg: color-mix(
+    in oklab,
+    var(--color-info) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --info-border: var(--color-info);
+  @supports (color: color-mix(in lab, red, red)) {
+    --info-border: color-mix(in oklab, var(--color-info) 35%, transparent);
+  }
+  --info-text: var(--color-base-content);
+  --warning-bg: var(--color-warning);
+  @supports (color: color-mix(in lab, red, red)) {
+    --warning-bg: color-mix(
+    in oklab,
+    var(--color-warning) 12%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --warning-border: var(--color-warning);
+  @supports (color: color-mix(in lab, red, red)) {
+    --warning-border: color-mix(in oklab, var(--color-warning) 40%, transparent);
+  }
+  --warning-text: var(--color-base-content);
+  --error-bg: var(--color-error);
+  @supports (color: color-mix(in lab, red, red)) {
+    --error-bg: color-mix(
+    in oklab,
+    var(--color-error) 10%,
+    var(--stipe-surface-raised)
+  );
+  }
+  --error-border: var(--color-error);
+  @supports (color: color-mix(in lab, red, red)) {
+    --error-border: color-mix(in oklab, var(--color-error) 40%, transparent);
+  }
+  --error-text: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  font-size: var(--text-sm);
+  line-height: 1.35;
+  box-shadow: 0 0.25rem 0.75rem var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 0.25rem 0.75rem color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 14%), transparent );
+  }
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] {
+  align-items: flex-start;
+  font-family: inherit;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] {
+  align-items: center;
+  height: calc(var(--text-sm) * 1.35);
+  margin: 0;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-description] {
+  color: var(--color-base-content);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
+  }
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] {
+  position: static;
+  order: 99;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  transform: none;
+  flex: none;
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] {
+  color: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="success"] [data-icon] {
+  color: var(--color-success);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="error"] [data-icon] {
+  color: var(--color-error);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="warning"] [data-icon] {
+  color: var(--color-warning);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled][data-type="info"] [data-icon] {
+  color: var(--color-info);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-base-content);
+  background: var(--stipe-surface-raised);
+  border: var(--border) solid var(--stipe-hairline);
+  transition-duration: var(--stipe-motion-fast);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:hover {
+  background: var(--color-base-200);
+  border-color: var(--stipe-hairline);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:focus-visible {
+  outline: 2px solid var(--caps-focus-ring);
+  outline-offset: 1px;
+  box-shadow: none;
+}
 @layer caps-dropdown {
   .caps-dropdown-popup {
     max-height: var(--available-height);
@@ -10201,6 +10424,11 @@
   .caps-shortcuts dt, .caps-shortcuts dd {
     margin: 0;
   }
+  .caps-dialog-popup-default {
+    width: min( var(--container-lg), calc( 100% - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)) ) );
+    max-width: none;
+    max-height: calc( 100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)) );
+  }
   dialog.caps-surface {
     color: inherit;
   }
@@ -16759,6 +16987,23 @@
     min-width: var(--caps-keycap-label-min-width, auto);
     line-height: var(--caps-keycap-label-line-height, inherit);
   }
+  .caps-keycap[data-size="hint"] {
+    display: inline-block;
+    min-width: 0;
+    min-height: 0;
+    margin-inline: var(--spacing-2xs);
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--radius-selector);
+    border-color: var(--stipe-hairline-quiet);
+    background: transparent;
+    box-shadow: none;
+    color: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+    }
+    font-size: var(--text-xs);
+    line-height: 1.25;
+  }
   .caps-keycap-button .caps-keycap {
     flex: var(--caps-keycap-shortcut-flex, 0 1 auto);
     min-width: var( --caps-keycap-shortcut-size, var(--caps-keycap-legend-min-size, 2rem) );

package/docs/api/README.md

@@ -30,6 +30,7 @@
 | [blocks/result-state](blocks/result-state.md)                                       | -           |
 | [blocks/section-card](blocks/section-card.md)                                       | -           |
 | [blocks/section-heading](blocks/section-heading.md)                                 | -           |
+| [blocks/setup-notice](blocks/setup-notice.md)                                       | -           |
 | [blocks/spec-sheet](blocks/spec-sheet.md)                                           | -           |
 | [blocks/status-tray](blocks/status-tray.md)                                         | -           |
 | [blocks/upload-queue](blocks/upload-queue.md)                                       | -           |
@@ -53,6 +54,7 @@
 | [components/diff-view](components/diff-view.md)                                     | -           |
 | [components/disclosure](components/disclosure.md)                                   | -           |
 | [components/dropdown-menu](components/dropdown-menu.md)                             | -           |
+| [components/failure-line](components/failure-line.md)                               | -           |
 | [components/field-guide](components/field-guide.md)                                 | -           |
 | [components/field](components/field.md)                                             | -           |
 | [components/game-feedback](components/game-feedback.md)                             | -           |

package/docs/api/blocks/app-bar.md

@@ -100,7 +100,15 @@ windows: readonly AppBarItem[];
 launchers: readonly AppBarItem[];
 ```
 
-Team Apps available to launch from the speed dial.
+Apps available to launch from the speed dial.
+
+##### appsLabel?
+
+```ts
+optional appsLabel?: string;
+```
+
+The Apps section heading and its launcher name; the host owns the wording.
 
 ##### sessions?
 

package/docs/api/blocks/setup-notice.md

@@ -0,0 +1,83 @@
+<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
+
+[**@fungi.computer/caps**](../README.md)
+
+---
+
+[@fungi.computer/caps](../README.md) / blocks/setup-notice
+
+# blocks/setup-notice
+
+## Type Aliases
+
+### SetupNoticeAction
+
+```ts
+type SetupNoticeAction = Readonly<{
+  label: string;
+  onSelect: () => void;
+}>;
+```
+
+A step the person takes to finish setup.
+
+---
+
+### SetupNoticeFix
+
+```ts
+type SetupNoticeFix = SetupNoticeAction &
+  Readonly<{
+    pending?: boolean;
+  }>;
+```
+
+The required fix; `pending` means it opened Settings and is waiting.
+
+---
+
+### SetupNoticeProps
+
+```ts
+type SetupNoticeProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  "title" | "children"
+> &
+  object;
+```
+
+Props accepted by SetupNotice.
+
+#### Type Declaration
+
+| Name          | Type                                      | Description                                                                                              |
+| ------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `need`        | `ReactNode`                               | The title, such as "Connect a model to start chatting".                                                  |
+| `cause`       | `ReactNode`                               | One sentence naming the real cause.                                                                      |
+| `fix`         | [`SetupNoticeFix`](#setupnoticefix)       | The one primary fix; never a dead CTA.                                                                   |
+| `secondary?`  | [`SetupNoticeAction`](#setupnoticeaction) | -                                                                                                        |
+| `available?`  | `ReactNode`                               | What still works meanwhile, such as "Uploads work now".                                                  |
+| `visual?`     | `Exclude`\<`ReactNode`, `string`\>        | The panel's own glyph (an App icon, say) in place of the warning bead; ignored by `banner` and `inline`. |
+| `waitingFor?` | `string`                                  | Names what is awaited while pending, after "Waiting for".                                                |
+| `variant`     | `"panel"` \| `"inline"` \| `"banner"`     | `panel` replaces an empty state; `banner` and `inline` sit above or in content.                          |
+
+## Functions
+
+### SetupNotice()
+
+```ts
+function SetupNotice(__namedParameters): Element;
+```
+
+Missing setup, named with its fix. Render it only while the setup fact is
+missing; when the fact turns ready the host unmounts it (and may toast).
+
+#### Parameters
+
+| Parameter           | Type                                    |
+| ------------------- | --------------------------------------- |
+| `__namedParameters` | [`SetupNoticeProps`](#setupnoticeprops) |
+
+#### Returns
+
+`Element`

package/docs/api/components/confirm-action.md

@@ -28,12 +28,14 @@ A deliberate hold, or an exact phrase before a destructive action.
 
 #### Type Declaration
 
-| Name           | Type                      | Description                                                                        |
-| -------------- | ------------------------- | ---------------------------------------------------------------------------------- |
-| `label`        | `string`                  | The action's trigger label and dialog title.                                       |
-| `confirmLabel` | `string`                  | The destructive key's label (and the hold gesture's instruction).                  |
-| `onConfirm()`  | () => `Promise`\<`void`\> | Resolve on success; reject on failure. The component prevents concurrent calls.    |
-| `error?`       | `string`                  | Caller-owned, safe-to-display failure copy; rejection details are never displayed. |
+| Name           | Type                                       | Description                                                                        |
+| -------------- | ------------------------------------------ | ---------------------------------------------------------------------------------- |
+| `label`        | `string`                                   | The action's trigger label and dialog title.                                       |
+| `confirmLabel` | `string`                                   | The destructive key's label (and the hold gesture's instruction).                  |
+| `onConfirm()`  | () => `Promise`\<`void`\>                  | Resolve on success; reject on failure. The component prevents concurrent calls.    |
+| `error?`       | `string`                                   | Caller-owned, safe-to-display failure copy; rejection details are never displayed. |
+| `variant?`     | [`ButtonVariant`](button.md#buttonvariant) | The trigger key's look; destructive by default, quiet where a toolbar needs it.    |
+| `size?`        | [`ButtonSize`](button.md#buttonsize)       | The trigger key's size.                                                            |
 
 ## Functions
 

package/docs/api/components/failure-line.md

@@ -0,0 +1,50 @@
+<!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
+
+[**@fungi.computer/caps**](../README.md)
+
+---
+
+[@fungi.computer/caps](../README.md) / components/failure-line
+
+# components/failure-line
+
+## Type Aliases
+
+### FailureLineProps
+
+```ts
+type FailureLineProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
+  object;
+```
+
+Props accepted by FailureLine.
+
+#### Type Declaration
+
+| Name                | Type                    | Description                                                                          |
+| ------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
+| `message`           | `ReactNode`             | One plain line naming the real cause; never a raw code.                              |
+| `onRetry()?`        | () => `void`            | Called when Retry is chosen; without it no Retry button shows.                       |
+| `onDismiss()?`      | () => `void`            | Called when Dismiss is chosen; without it no Dismiss button shows.                   |
+| `retryLabel?`       | `string`                | -                                                                                    |
+| `dismissLabel?`     | `string`                | -                                                                                    |
+| `retryAriaLabel?`   | `string`                | A more specific accessible name for Retry, such as "Retry prompt".                   |
+| `dismissAriaLabel?` | `string`                | A more specific accessible name for Dismiss.                                         |
+| `count?`            | `number`                | How many times it failed; above 1 the line adds a "Failed" line with the count once. |
+| `density?`          | `"row"` \| `"tile"`     | `row` sits in a list or under a control; `tile` fills a media tile.                  |
+| `role?`             | `"status"` \| `"alert"` | `status` is polite; use `alert` only for a single, urgent failure.                   |
+
+## Variables
+
+### FailureLine
+
+```ts
+const FailureLine: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
+    object &
+    RefAttributes<HTMLDivElement>
+>;
+```
+
+One item failure: an error dot, one line, and labelled Retry and Dismiss. It
+never uses the bang glyph; the dot is the whole signal.

package/docs/api/components/keycap.md

@@ -24,10 +24,11 @@ until hovered or focused; the rest follow the theme.
 ### KeycapSize
 
 ```ts
-type KeycapSize = "sm" | "md" | "lg";
+type KeycapSize = "hint" | "sm" | "md" | "lg";
 ```
 
-Keycap sizes: a legend chip, a dock key and a big face key.
+Keycap sizes: `hint` is a muted inline shortcut caption (caption height, no
+plastic), then a legend chip, a dock key and a big face key.
 
 ---
 

package/docs/api/components/toaster.md

@@ -17,6 +17,8 @@ function Toaster(__namedParameters): ReactPortal | null;
 ```
 
 Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
+Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
+restyles open toasts; Sonner's own light and dark palettes are overridden.
 
 #### Parameters
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -242,6 +242,10 @@
       "types": "./dist/components/alert.d.ts",
       "import": "./dist/components/alert.js"
     },
+    "./components/failure-line": {
+      "types": "./dist/components/failure-line.d.ts",
+      "import": "./dist/components/failure-line.js"
+    },
     "./components/status": {
       "types": "./dist/components/status.d.ts",
       "import": "./dist/components/status.js"
@@ -338,6 +342,10 @@
       "types": "./dist/blocks/async-state.d.ts",
       "import": "./dist/blocks/async-state.js"
     },
+    "./blocks/setup-notice": {
+      "types": "./dist/blocks/setup-notice.d.ts",
+      "import": "./dist/blocks/setup-notice.js"
+    },
     "./blocks/loading-state": {
       "types": "./dist/blocks/loading-state.d.ts",
       "import": "./dist/blocks/loading-state.js"
@@ -465,7 +473,8 @@
     "src/fonts-display.css",
     "src/fonts-mono.css",
     "src/status-tray.css",
-    "src/app-status-bar.css"
+    "src/app-status-bar.css",
+    "src/first-run.css"
   ],
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -475,8 +484,8 @@
   },
   "devDependencies": {
     "@fungi.computer/maosaico": "0.1.1",
-    "@fungi.computer/sprite": "0.2.1",
-    "@fungi.computer/sprite-zdog": "0.3.1",
+    "@fungi.computer/sprite": "0.2.2",
+    "@fungi.computer/sprite-zdog": "0.3.2",
     "@ladle/react": "5.1.1",
     "@tailwindcss/cli": "4.2.1",
     "@types/react": "18.3.3",

package/src/first-run.css

@@ -0,0 +1,100 @@
+/*
+ * First-run kit: SetupNotice (alert variants) and FailureLine. The panel
+ * variant is an ordinary EmptyState panel and needs no rules here.
+ */
+@layer utilities {
+  .caps-setup-notice-frame {
+    container-type: inline-size;
+  }
+  .caps-setup-notice-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+  .caps-setup-notice[data-variant] {
+    border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
+    background: color-mix(
+      in oklab,
+      var(--color-warning) 12%,
+      var(--stipe-surface-raised)
+    );
+    color: var(--color-base-content);
+  }
+  .caps-setup-notice-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+  /* The panel's art: a warning bead at a size that holds the title. */
+  .caps-setup-notice-dot {
+    margin-block: var(--spacing-md);
+    scale: 2.5;
+  }
+  .caps-setup-notice-available {
+    color: var(--stipe-fg-muted);
+  }
+  .caps-setup-notice[data-variant="inline"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-sm);
+  }
+  .caps-setup-notice[data-variant="banner"] {
+    border-radius: 0;
+    border-inline: 0;
+  }
+  /* Narrow frame (a phone, or a narrow window): actions go under the copy. */
+  @container (width <= 36rem) {
+    .caps-setup-notice[data-variant] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .caps-setup-notice[data-variant] > * {
+      flex: none;
+      width: 100%;
+    }
+    .caps-setup-notice-actions {
+      justify-content: flex-start;
+    }
+  }
+
+  .caps-failure-line {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    font-size: var(--text-sm);
+  }
+  .caps-failure-line-copy {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line-count {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-xs);
+  }
+  .caps-failure-line > .caps-status {
+    margin-block-start: var(--spacing-2xs);
+  }
+  .caps-failure-line-actions {
+    display: flex;
+    flex: none;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line[data-density="tile"] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--spacing-md);
+    text-align: center;
+  }
+  .caps-failure-line[data-density="tile"] > .caps-status {
+    margin-block-start: 0;
+  }
+  .caps-failure-line[data-density="tile"] .caps-failure-line-copy {
+    flex: none;
+  }
+}

package/src/styles.css

@@ -6,6 +6,7 @@
 @import "@fungi.computer/stipe/styles.css";
 @import "./status-tray.css";
 @import "./app-status-bar.css";
+@import "./first-run.css";
 
 @plugin "@tailwindcss/typography";
 
@@ -42,6 +43,134 @@
   z-index: var(--stipe-layer-toast);
 }
 
+/* Unlayered on purpose: Sonner injects an unlayered sheet at runtime, which
+   would outrank anything inside a cascade layer. */
+/* Sonner paints from --normal-* and per-type variables; point them at the
+   Stipe tokens so latte, mocha and any data-theme switch are followed. */
+.caps-toaster[data-sonner-toaster][data-sonner-theme] {
+  font-family: inherit;
+  --border-radius: var(--radius-box);
+  --normal-bg: var(--stipe-surface-raised);
+  --normal-bg-hover: var(--color-base-200);
+  --normal-border: var(--stipe-hairline-quiet);
+  --normal-border-hover: var(--stipe-hairline);
+  --normal-text: var(--color-base-content);
+  --success-bg: color-mix(
+    in oklab,
+    var(--color-success) 10%,
+    var(--stipe-surface-raised)
+  );
+  --success-border: color-mix(in oklab, var(--color-success) 35%, transparent);
+  --success-text: var(--color-base-content);
+  --info-bg: color-mix(
+    in oklab,
+    var(--color-info) 10%,
+    var(--stipe-surface-raised)
+  );
+  --info-border: color-mix(in oklab, var(--color-info) 35%, transparent);
+  --info-text: var(--color-base-content);
+  --warning-bg: color-mix(
+    in oklab,
+    var(--color-warning) 12%,
+    var(--stipe-surface-raised)
+  );
+  --warning-border: color-mix(in oklab, var(--color-warning) 40%, transparent);
+  --warning-text: var(--color-base-content);
+  --error-bg: color-mix(
+    in oklab,
+    var(--color-error) 10%,
+    var(--stipe-surface-raised)
+  );
+  --error-border: color-mix(in oklab, var(--color-error) 40%, transparent);
+  --error-text: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  font-size: var(--text-sm);
+  line-height: 1.35;
+  box-shadow: 0 0.25rem 0.75rem
+    color-mix(
+      in oklab,
+      var(--color-base-content) calc(var(--depth) * 14%),
+      transparent
+    );
+}
+.caps-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] {
+  align-items: flex-start;
+  font-family: inherit;
+}
+/* The icon sits on the title line, not centred on a two-line block. */
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-icon] {
+  align-items: center;
+  height: calc(var(--text-sm) * 1.35);
+  margin: 0;
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-description] {
+  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
+}
+/* One close position: inline at the end, top-aligned with the first line. */
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button] {
+  position: static;
+  order: 99;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  transform: none;
+  flex: none;
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-icon] {
+  color: var(--color-base-content);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="success"]
+  [data-icon] {
+  color: var(--color-success);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="error"]
+  [data-icon] {
+  color: var(--color-error);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="warning"]
+  [data-icon] {
+  color: var(--color-warning);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled][data-type="info"]
+  [data-icon] {
+  color: var(--color-info);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button] {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-base-content);
+  background: var(--stipe-surface-raised);
+  border: var(--border) solid var(--stipe-hairline);
+  transition-duration: var(--stipe-motion-fast);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button]:hover {
+  background: var(--color-base-200);
+  border-color: var(--stipe-hairline);
+}
+.caps-toaster[data-sonner-toaster]
+  [data-sonner-toast][data-styled]
+  [data-close-button]:focus-visible {
+  outline: 2px solid var(--caps-focus-ring);
+  outline-offset: 1px;
+  box-shadow: none;
+}
+
 @layer caps-dropdown {
   .caps-dropdown-popup {
     max-height: var(--available-height);
@@ -1568,6 +1697,22 @@
   .caps-shortcuts dd {
     margin: 0;
   }
+  /* A default dialog keeps a 16px gutter on each side (more where the device
+     has a safe-area inset) and never outgrows the screen vertically. */
+  .caps-dialog-popup-default {
+    width: min(
+      var(--container-lg),
+      calc(
+        100% - max(1rem, env(safe-area-inset-left)) -
+          max(1rem, env(safe-area-inset-right))
+      )
+    );
+    max-width: none;
+    max-height: calc(
+      100dvh - max(1rem, env(safe-area-inset-top)) -
+        max(1rem, env(safe-area-inset-bottom))
+    );
+  }
   dialog.caps-surface {
     color: inherit;
   }
@@ -9052,6 +9197,21 @@
     min-width: var(--caps-keycap-label-min-width, auto);
     line-height: var(--caps-keycap-label-line-height, inherit);
   }
+  /* An inline shortcut caption: reads as text, never as another button. */
+  .caps-keycap[data-size="hint"] {
+    display: inline-block;
+    min-width: 0;
+    min-height: 0;
+    margin-inline: var(--spacing-2xs);
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--radius-selector);
+    border-color: var(--stipe-hairline-quiet);
+    background: transparent;
+    box-shadow: none;
+    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+    font-size: var(--text-xs);
+    line-height: 1.25;
+  }
   .caps-keycap-button .caps-keycap {
     flex: var(--caps-keycap-shortcut-flex, 0 1 auto);
     min-width: var(