@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/blocks/resource-select.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Combobox } from "../components/combobox.js";
+/** A resource-selection block with caller-owned options and selected value. */
+export const ResourceSelect = forwardRef(function ResourceSelect({ onSelect, options, placeholder = "Select an option", triggerProps, value, }, ref) {
+    const { className, ...nativeTriggerProps } = triggerProps ?? {};
+    return (_jsx(Combobox, { triggerRef: ref, getKey: (item) => item.id, getLabel: (item) => item.label, getSearchText: (item) => item.searchText ?? item.label, isDisabled: (item) => item.disabled === true, items: options, onValueChange: (_next, item) => {
+            if (item)
+                onSelect(item);
+        }, placeholder: placeholder, renderItem: (item) => _jsx("span", { children: item.label }), value: value ?? null, trigger: _jsx("button", { ...nativeTriggerProps, className: [
+                "btn btn-xs btn-ghost w-full justify-between text-left font-normal",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), type: "button", children: options.find((item) => item.id === value)?.label ?? placeholder }) }));
+});

package/dist/blocks/result-state.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by ResultState. */
+export type ResultStateProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    actions?: ReactNode;
+    description: ReactNode;
+    icon?: ReactNode;
+    title: ReactNode;
+};
+/** A labelled result presentation; hosts own its meaning and next actions. */
+export declare const ResultState: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    actions?: ReactNode;
+    description: ReactNode;
+    icon?: ReactNode;
+    title: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/blocks/result-state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+/** A labelled result presentation; hosts own its meaning and next actions. */
+export const ResultState = forwardRef(function ResultState({ actions, className, description, icon, title, ...props }, ref) {
+    const titleId = useId();
+    return (_jsxs("section", { ...props, "aria-labelledby": props["aria-labelledby"] ?? titleId, className: cn("result-state", className), ref: ref, children: [icon ? _jsx("div", { "aria-hidden": "true", children: icon }) : null, _jsx("h2", { id: props["aria-labelledby"] ? undefined : titleId, children: title }), _jsx("p", { children: description }), actions ? _jsx("div", { className: "result-state-actions", children: actions }) : null] }));
+});

package/dist/blocks/section-card.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by SectionCard. */
+export type SectionCardProps = HTMLAttributes<HTMLDivElement> & {
+    /** The host-provided section heading. */
+    heading: ReactNode;
+    /** Optional host-provided supporting copy. */
+    description?: ReactNode;
+    /** Optional host-provided controls or status content. */
+    actions?: ReactNode;
+    /** The section body, supplied by the host through normal composition. */
+    children?: ReactNode;
+    /** Inside a SectionGrid, `full` spans every column; `auto` takes one. */
+    span?: "auto" | "full";
+    /** Heading level; the host keeps its document outline. Defaults to 3. */
+    headingLevel?: 2 | 3;
+};
+/** A presentational card shell. It does not assign behavior to action content. */
+export declare const SectionCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The host-provided section heading. */
+    heading: ReactNode;
+    /** Optional host-provided supporting copy. */
+    description?: ReactNode;
+    /** Optional host-provided controls or status content. */
+    actions?: ReactNode;
+    /** The section body, supplied by the host through normal composition. */
+    children?: ReactNode;
+    /** Inside a SectionGrid, `full` spans every column; `auto` takes one. */
+    span?: "auto" | "full";
+    /** Heading level; the host keeps its document outline. Defaults to 3. */
+    headingLevel?: 2 | 3;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/section-card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../components/card.js";
+/** A presentational card shell. It does not assign behavior to action content. */
+export const SectionCard = forwardRef(function SectionCard({ actions, children, className, description, heading, headingLevel = 3, span = "auto", ...rootProps }, ref) {
+    return (_jsxs(Card, { ...rootProps, className: className, "data-span": span === "full" ? "full" : undefined, ref: ref, variant: "outline", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "caps-section-card-heading-row", children: [_jsx(CardTitle, { level: headingLevel, children: heading }), actions ? (_jsx("div", { className: "caps-section-card-actions", children: actions })) : null] }), description ? (_jsx(CardDescription, { children: description })) : null] }), children !== undefined ? _jsx(CardContent, { children: children }) : null] }));
+});

package/dist/blocks/section-heading.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from "react";
+/** A shelf or section title with shared case and tracking. */
+export declare const SectionHeading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+/** Supported Eyebrow tones. `live` marks something happening right now. */
+export type EyebrowTone = "quiet" | "primary" | "secondary" | "live";
+/** Props accepted by Eyebrow. */
+export type EyebrowProps = HTMLAttributes<HTMLParagraphElement> & {
+    tone?: EyebrowTone;
+};
+/** A small contextual label with shared case and tracking. */
+export declare const Eyebrow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    tone?: EyebrowTone;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/blocks/section-heading.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A shelf or section title with shared case and tracking. */
+export const SectionHeading = forwardRef(function SectionHeading({ className, ...props }, ref) {
+    return (_jsx("h2", { ...props, ref: ref, className: cn("caps-section-heading", className) }));
+});
+/** A small contextual label with shared case and tracking. */
+export const Eyebrow = forwardRef(function Eyebrow({ className, tone = "quiet", ...props }, ref) {
+    return (_jsx("p", { ...props, ref: ref, className: cn("caps-eyebrow", className), "data-tone": tone }));
+});

package/dist/blocks/spec-sheet.d.ts

@@ -0,0 +1,125 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by SpecRuler. */
+export type SpecRulerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** A short section label, such as `01 · Plans`. */
+    label: ReactNode;
+};
+/**
+ * A tick-marked rule that separates sections, with crosshairs at both ends.
+ * It is decorative: the section heading carries the accessible name.
+ */
+export declare const SpecRuler: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** A short section label, such as `01 · Plans`. */
+    label: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by SpecFrame. */
+export type SpecFrameProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Caller-owned media, such as an `img` with its own alt text. */
+    children: ReactNode;
+    /** A short printed caption under the frame. */
+    caption?: ReactNode;
+    /** `inverse` seats dark media, such as a terminal readout, in the frame. */
+    surface?: "default" | "inverse";
+};
+/** A figure seated in a hatched band, like a plate in a printed manual. */
+export declare const SpecFrame: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Caller-owned media, such as an `img` with its own alt text. */
+    children: ReactNode;
+    /** A short printed caption under the frame. */
+    caption?: ReactNode;
+    /** `inverse` seats dark media, such as a terminal readout, in the frame. */
+    surface?: "default" | "inverse";
+} & import("react").RefAttributes<HTMLElement>>;
+/** One fact in a SpecFacts strip. */
+export type SpecFact = {
+    id: string;
+    value: ReactNode;
+    label: ReactNode;
+};
+/** Props accepted by SpecFacts. */
+export type SpecFactsProps = Omit<HTMLAttributes<HTMLDListElement>, "children"> & {
+    facts: readonly SpecFact[];
+};
+/** A ruled strip of short facts: a big value over a small label. */
+export declare const SpecFacts: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDListElement>, "children"> & {
+    facts: readonly SpecFact[];
+} & import("react").RefAttributes<HTMLDListElement>>;
+/** One step in a SpecSteps list. */
+export type SpecStep = {
+    id: string;
+    title: ReactNode;
+    body: ReactNode;
+};
+/** Props accepted by SpecSteps. */
+export type SpecStepsProps = Omit<HTMLAttributes<HTMLOListElement>, "children"> & {
+    steps: readonly SpecStep[];
+};
+/** A numbered row of steps in ruled cells, numbered 01, 02 and on. */
+export declare const SpecSteps: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLOListElement>, "children"> & {
+    steps: readonly SpecStep[];
+} & import("react").RefAttributes<HTMLOListElement>>;
+/** One question in a SpecFaq list. */
+export type SpecFaqItem = {
+    id: string;
+    question: ReactNode;
+    /** Caller-reviewed answer content. */
+    answer: ReactNode;
+};
+/** Props accepted by SpecFaq. */
+export type SpecFaqProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    items: readonly SpecFaqItem[];
+    /** Ids of the items that start open. */
+    defaultOpen?: readonly string[];
+};
+/**
+ * Questions and answers as native disclosures. It works without JavaScript,
+ * and every answer stays in the document for search and find-in-page.
+ */
+export declare const SpecFaq: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    items: readonly SpecFaqItem[];
+    /** Ids of the items that start open. */
+    defaultOpen?: readonly string[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** One labelled part of a SpecDiagram, placed in percent of the art. */
+export type SpecDiagramMarker = {
+    id: string;
+    /** A short tag drawn on the art, such as `A`. */
+    tag: string;
+    /** Distance from the art's left edge, 0 to 100. */
+    x: number;
+    /** Distance from the art's top edge, 0 to 100. */
+    y: number;
+    label: ReactNode;
+    note?: ReactNode;
+};
+/** Props accepted by SpecDiagram. */
+export type SpecDiagramProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Caller-owned art, such as an `img` with its own alt text. */
+    art: ReactNode;
+    markers: readonly SpecDiagramMarker[];
+};
+/**
+ * A manual-style parts diagram: tags drawn on the art and a legend that
+ * names each part. The legend is the accessible text; tags are decorative.
+ */
+export declare const SpecDiagram: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Caller-owned art, such as an `img` with its own alt text. */
+    art: ReactNode;
+    markers: readonly SpecDiagramMarker[];
+} & import("react").RefAttributes<HTMLElement>>;
+/** Props accepted by SpecPrintFilter. */
+export type SpecPrintFilterProps = {
+    /** Misregistration of the second ink, in CSS pixels. Defaults to 2, 1. */
+    offset?: {
+        x: number;
+        y: number;
+    };
+};
+/**
+ * The `#caps-print` SVG filter, rendered once per page. It turns 1-bit art
+ * (dark ink on light paper) into the theme's ink on a transparent ground,
+ * with a second ink printed slightly off register underneath, like a two-drum
+ * risograph. Art opts in through the theme's `--caps-print-filter`; the inks
+ * come from `--caps-print-ink` and `--caps-print-offset`.
+ */
+export declare function SpecPrintFilter({ offset, }: SpecPrintFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/spec-sheet.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A tick-marked rule that separates sections, with crosshairs at both ends.
+ * It is decorative: the section heading carries the accessible name.
+ */
+export const SpecRuler = forwardRef(function SpecRuler({ className, label, ...props }, ref) {
+    return (_jsx("div", { "aria-hidden": "true", ...props, className: cn("caps-spec-ruler", className), ref: ref, children: _jsx("span", { className: "caps-spec-ruler-label", children: label }) }));
+});
+/** A figure seated in a hatched band, like a plate in a printed manual. */
+export const SpecFrame = forwardRef(function SpecFrame({ caption, children, className, surface = "default", ...props }, ref) {
+    return (_jsxs("figure", { ...props, className: cn("caps-spec-frame", className), "data-surface": surface, ref: ref, children: [_jsx("div", { className: "caps-spec-frame-window", children: children }), caption !== undefined ? (_jsx("figcaption", { className: "caps-spec-frame-caption", children: caption })) : null] }));
+});
+/** A ruled strip of short facts: a big value over a small label. */
+export const SpecFacts = forwardRef(function SpecFacts({ className, facts, ...props }, ref) {
+    return (_jsx("dl", { ...props, className: cn("caps-spec-facts", className), ref: ref, children: facts.map((fact) => (_jsxs("div", { className: "caps-spec-fact", children: [_jsx("dt", { className: "caps-spec-fact-label", children: fact.label }), _jsx("dd", { className: "caps-spec-fact-value", children: fact.value })] }, fact.id))) }));
+});
+/** A numbered row of steps in ruled cells, numbered 01, 02 and on. */
+export const SpecSteps = forwardRef(function SpecSteps({ className, steps, ...props }, ref) {
+    return (_jsx("ol", { ...props, className: cn("caps-spec-steps", className), ref: ref, children: steps.map((step, index) => (_jsxs("li", { className: "caps-spec-step", children: [_jsx("span", { "aria-hidden": "true", className: "caps-spec-step-number", children: String(index + 1).padStart(2, "0") }), _jsx("h3", { className: "caps-spec-step-title", children: step.title }), _jsx("div", { className: "caps-spec-step-body", children: step.body })] }, step.id))) }));
+});
+/**
+ * Questions and answers as native disclosures. It works without JavaScript,
+ * and every answer stays in the document for search and find-in-page.
+ */
+export const SpecFaq = forwardRef(function SpecFaq({ className, defaultOpen = [], items, ...props }, ref) {
+    return (_jsx("div", { ...props, className: cn("caps-spec-faq", className), ref: ref, children: items.map((item, index) => (_jsxs("details", { className: "caps-spec-faq-item", open: defaultOpen.includes(item.id) || undefined, children: [_jsxs("summary", { className: "caps-spec-faq-question", children: [_jsx("span", { "aria-hidden": "true", className: "caps-spec-faq-number", children: String(index + 1).padStart(2, "0") }), _jsx("span", { className: "caps-spec-faq-text", children: item.question }), _jsx("span", { "aria-hidden": "true", className: "caps-spec-faq-mark" })] }), _jsx("div", { className: "caps-spec-faq-answer", children: item.answer })] }, item.id))) }));
+});
+const percent = (value) => `${String(Math.min(100, Math.max(0, value)))}%`;
+/**
+ * A manual-style parts diagram: tags drawn on the art and a legend that
+ * names each part. The legend is the accessible text; tags are decorative.
+ */
+export const SpecDiagram = forwardRef(function SpecDiagram({ art, className, markers, ...props }, ref) {
+    return (_jsxs("figure", { ...props, className: cn("caps-spec-diagram", className), ref: ref, children: [_jsxs("div", { className: "caps-spec-diagram-art", children: [art, markers.map((marker) => (_jsx("span", { "aria-hidden": "true", className: "caps-spec-diagram-tag", style: { left: percent(marker.x), top: percent(marker.y) }, children: marker.tag }, marker.id)))] }), _jsx("figcaption", { className: "caps-spec-diagram-legend", children: _jsx("ul", { children: markers.map((marker) => (_jsxs("li", { children: [_jsx("span", { "aria-hidden": "true", className: "caps-spec-diagram-key", children: marker.tag }), _jsx("span", { className: "caps-spec-diagram-label", children: marker.label }), marker.note !== undefined ? (_jsx("span", { className: "caps-spec-diagram-note", children: marker.note })) : null] }, marker.id))) }) })] }));
+});
+/**
+ * The `#caps-print` SVG filter, rendered once per page. It turns 1-bit art
+ * (dark ink on light paper) into the theme's ink on a transparent ground,
+ * with a second ink printed slightly off register underneath, like a two-drum
+ * risograph. Art opts in through the theme's `--caps-print-filter`; the inks
+ * come from `--caps-print-ink` and `--caps-print-offset`.
+ */
+export function SpecPrintFilter({ offset = { x: 2, y: 1 }, }) {
+    return (_jsx("svg", { "aria-hidden": "true", className: "caps-print-filter", focusable: "false", children: _jsxs("filter", { colorInterpolationFilters: "sRGB", height: "100%", id: "caps-print", width: "100%", x: "0", y: "0", children: [_jsx("feColorMatrix", { in: "SourceGraphic", result: "darkness", type: "matrix", values: "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.2976 -1.0013 -0.1011 0 1.3" }), _jsx("feComposite", { in: "darkness", in2: "SourceAlpha", operator: "in", result: "coverage" }), _jsx("feFlood", { className: "caps-print-filter-offset", result: "offsetInk" }), _jsx("feComposite", { in: "offsetInk", in2: "coverage", operator: "in", result: "offsetPrint" }), _jsx("feOffset", { dx: offset.x, dy: offset.y, in: "offsetPrint", result: "offsetShifted" }), _jsx("feFlood", { className: "caps-print-filter-ink", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "coverage", operator: "in", result: "inkPrint" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "offsetShifted" }), _jsx("feMergeNode", { in: "inkPrint" })] })] }) }));
+}

package/dist/blocks/status-tray.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type StatusGlyph, type StatusMotion, type StatusTone } from "../components/status.js";
+/**
+ * One footer readout and the small tray it opens. Semantic data only: the
+ * chip's finish, the tray's material and the seam between them come from
+ * theme tokens (`--caps-status-tray-*`), never from a prop.
+ */
+export type StatusTrayItem = Readonly<{
+    id: string;
+    /** Short readout, e.g. "Ports". */
+    label: ReactNode;
+    /** Positive counts render after the label; zero is hidden. */
+    count?: number;
+    /** A live-state bead before the label. Omit for none. */
+    tone?: StatusTone;
+    glyph?: StatusGlyph;
+    motion?: StatusMotion;
+    /** Accessible name when the label alone is ambiguous. */
+    accessibleLabel?: string;
+    /** Tray heading; defaults to the label. */
+    title?: ReactNode;
+    /** Tray header actions such as Refresh. */
+    actions?: ReactNode;
+    /** Tray body. */
+    content: ReactNode;
+    /** Keep the chip but disable opening, e.g. no Computer. */
+    disabled?: boolean;
+    /**
+     * Controls placed right after this chip, in DOM and keyboard order, so a
+     * host can interleave its own controls between chips.
+     */
+    after?: ReactNode;
+}>;
+/** Controlled selection and structural slots for a row of footer trays. */
+export type StatusTrayProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Readouts and their tray contents in display order. */
+    items: readonly StatusTrayItem[];
+    /** Which tray is open. The host owns this state. */
+    openId: string | null;
+    /** Requests a selection change or dismissal. */
+    onOpenChange: (id: string | null) => void;
+    /** Leading readouts that never open a tray (connection state, etc.). */
+    leading?: ReactNode;
+    /** Trailing controls after the chips (Send, Expand, …). */
+    trailing?: ReactNode;
+    /**
+     * Structural seat. `housing` sits on the plastic below a screen; `screen`
+     * sits inside a Display as flat, screen-native text (the wiki's screen
+     * material rule); `host` means a host's own chrome draws the chips, so
+     * only the open tray renders here. The look of each seat is theme-owned.
+     */
+    placement?: "housing" | "screen" | "host";
+    /** Which edge the tray aligns to. */
+    align?: "start" | "end";
+    /**
+     * For `host` placement: where the host's trigger starts, in CSS pixels from
+     * this tray's inline start, so the open tray sits above it.
+     */
+    hostInset?: number;
+};
+/** A footer row of readout chips; one opens its tray above the row at a time. */
+export declare function StatusTray({ items, openId, onOpenChange, leading, trailing, placement, align, hostInset, className, ...props }: StatusTrayProps): import("react/jsx-runtime").JSX.Element;
+/** A group of tray rows. Precede it with a DataListHeading to label it. */
+export declare function StatusTrayList({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * One line: the host's icon, a title, a muted detail that truncates, and a
+ * quiet text action (a ghost Button) at the end.
+ */
+export declare function StatusTrayRow({ icon, primary, secondary, actions, className, ...props }: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The App's own icon for this kind of row, e.g. a Sigil or a Status. */
+    icon?: ReactNode;
+    primary: ReactNode;
+    secondary?: ReactNode;
+    actions?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A quiet sentence for an empty or unavailable feed. Empty reads "All caught
+ * up." unless the host says otherwise; unavailable takes a `title`.
+ */
+export declare function StatusTrayNote({ children, title, }: {
+    children?: ReactNode;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/status-tray.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Fragment, useEffect, useId, useRef, } from "react";
+import { IconButton } from "../components/icon-button.js";
+import { Popover, PopoverAnchor } from "../components/popover.js";
+import { Status, } from "../components/status.js";
+import { cn } from "../lib/cn.js";
+/** A footer row of readout chips; one opens its tray above the row at a time. */
+export function StatusTray({ items, openId, onOpenChange, leading, trailing, placement = "housing", align = "end", hostInset, className, ...props }) {
+    const scope = useId();
+    const root = useRef(null);
+    const panel = useRef(null);
+    const triggers = useRef(new Map());
+    const open = items.find((item) => item.id === openId && !item.disabled);
+    const activeId = open?.id;
+    const close = () => {
+        if (activeId)
+            triggers.current.get(activeId)?.focus();
+        onOpenChange(null);
+    };
+    useEffect(() => {
+        if (activeId)
+            panel.current?.focus();
+    }, [activeId]);
+    useEffect(() => {
+        // A dynamic position is a custom property; the stylesheet clamps it.
+        if (hostInset === undefined)
+            root.current?.style.removeProperty("--caps-status-tray-host-inset");
+        else
+            root.current?.style.setProperty("--caps-status-tray-host-inset", `${String(Math.max(0, hostInset))}px`);
+    }, [hostInset]);
+    useEffect(() => {
+        if (!activeId)
+            return;
+        const onKey = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            triggers.current.get(activeId)?.focus();
+            onOpenChange(null);
+        };
+        const onPointer = (event) => {
+            if (event.target instanceof Node && !root.current?.contains(event.target))
+                onOpenChange(null);
+        };
+        document.addEventListener("keydown", onKey);
+        document.addEventListener("pointerdown", onPointer);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            document.removeEventListener("pointerdown", onPointer);
+        };
+    }, [activeId, onOpenChange]);
+    return (_jsxs(PopoverAnchor, { ...props, ref: root, className: cn("caps-status-tray", className), "data-placement": placement, "data-align": align, children: [open ? (_jsxs(Popover, { open: true, ref: panel, tabIndex: -1, side: "top", id: `${scope}-${open.id}`, role: "dialog", "aria-labelledby": `${scope}-title`, className: "caps-status-tray-panel", "data-status-tray-panel": open.id, children: [_jsxs("div", { className: "caps-status-tray-head", children: [open.tone ? (_jsx(Status, { size: "compact", tone: open.tone, glyph: open.glyph ?? "dot" })) : null, _jsx("span", { id: `${scope}-title`, className: "caps-status-tray-title", children: open.title ?? open.label }), open.actions, _jsx(IconButton, { "aria-label": "Close tray", icon: _jsx(X, { "aria-hidden": "true" }), onClick: close })] }), _jsx("div", { className: "caps-status-tray-body", children: open.content })] })) : null, placement === "host" ? null : (_jsxs("div", { className: "caps-status-tray-row", children: [leading, _jsx("div", { className: "caps-status-tray-chips", children: items.map((item) => (_jsxs(Fragment, { children: [_jsxs("button", { ref: (node) => {
+                                        if (node)
+                                            triggers.current.set(item.id, node);
+                                        else
+                                            triggers.current.delete(item.id);
+                                    }, type: "button", className: "caps-status-tray-chip", "aria-expanded": activeId === item.id, "aria-controls": activeId === item.id ? `${scope}-${item.id}` : undefined, "aria-label": item.accessibleLabel, disabled: item.disabled, title: item.disabled ? item.accessibleLabel : undefined, "aria-haspopup": "dialog", "data-status-tray-chip": item.id, onClick: () => {
+                                        onOpenChange(openId === item.id ? null : item.id);
+                                    }, children: [item.tone ? (_jsx(Status, { size: "compact", glyph: item.glyph ?? "dot", motion: item.motion ?? "none", tone: item.tone })) : null, _jsx("span", { className: "caps-status-tray-label", children: item.label }), item.count !== undefined && item.count > 0 ? (_jsx("span", { className: "caps-status-tray-count", children: item.count })) : null] }), item.after] }, item.id))) }), trailing] }))] }));
+}
+/** A group of tray rows. Precede it with a DataListHeading to label it. */
+export function StatusTrayList({ children, className, ...props }) {
+    return (_jsx("div", { ...props, className: cn("caps-status-tray-list", className), children: children }));
+}
+/**
+ * One line: the host's icon, a title, a muted detail that truncates, and a
+ * quiet text action (a ghost Button) at the end.
+ */
+export function StatusTrayRow({ icon, primary, secondary, actions, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn("caps-status-tray-item", className), children: [icon ? _jsx("span", { className: "caps-status-tray-icon", children: icon }) : null, _jsxs("span", { className: "caps-status-tray-text", children: [_jsx("span", { className: "caps-status-tray-primary", children: primary }), secondary ? (_jsx("span", { className: "caps-status-tray-secondary", children: secondary })) : null] }), actions ? (_jsx("span", { className: "caps-status-tray-actions", children: actions })) : null] }));
+}
+/**
+ * A quiet sentence for an empty or unavailable feed. Empty reads "All caught
+ * up." unless the host says otherwise; unavailable takes a `title`.
+ */
+export function StatusTrayNote({ children = "All caught up.", title, }) {
+    return (_jsxs("div", { className: "caps-status-tray-note", children: [title ? (_jsx("strong", { className: "caps-status-tray-note-title", children: title })) : null, _jsx("p", { children: children })] }));
+}

package/dist/blocks/upload-queue.d.ts

@@ -0,0 +1,48 @@
+import type { JSX } from "react";
+/**
+ * LAW — queue thumbnails are decorative. The adjacent filename is the row's
+ * accessible file fact; lifecycle status, progress, and actions remain named.
+ */
+export type UploadQueueAction = Readonly<{
+    accessibleLabel: string;
+    label: string;
+}>;
+/** Caller-owned labels for the row actions that may be shown. */
+export type UploadQueueActions = Readonly<{
+    cancel?: UploadQueueAction;
+    remove?: UploadQueueAction;
+    retry?: UploadQueueAction;
+}>;
+/** Caller-provided upload queue item data. */
+export type UploadQueueItem = Readonly<{
+    actions: UploadQueueActions;
+    alert?: string;
+    id: string;
+    name: string;
+    preview: UploadQueuePreview;
+    /** Null means the transport does not report byte progress. */
+    progress: number | null;
+    progressLabel: string;
+    statusLabel: string;
+}>;
+/** A caller-provided file or image preview for one upload row. */
+export type UploadQueuePreview = Readonly<{
+    kind: "file";
+}> | Readonly<{
+    kind: "image";
+    url: string;
+}>;
+/** Props accepted by UploadQueue. */
+export type UploadQueueProps = Readonly<{
+    className?: string;
+    items: readonly UploadQueueItem[];
+    /** Handles a caller-requested cancellation. */
+    onCancel: (id: string) => Promise<void> | void;
+    /** Handles removal of a completed or failed row. */
+    onRemove: (id: string) => void;
+    /** Handles a caller-requested retry. */
+    onRetry: (id: string) => Promise<void> | void;
+    rowClassName?: string;
+}>;
+/** Product-neutral upload facts and affordances; lifecycle stays with the host. */
+export declare function UploadQueue({ className, items, onCancel, onRemove, onRetry, rowClassName, }: UploadQueueProps): JSX.Element | null;

package/dist/blocks/upload-queue.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileImage, RotateCcw, X } from "lucide-react";
+import { IconButton } from "../components/icon-button.js";
+import { Progress } from "../components/progress.js";
+/** Product-neutral upload facts and affordances; lifecycle stays with the host. */
+export function UploadQueue({ className, items, onCancel, onRemove, onRetry, rowClassName, }) {
+    if (!items.length)
+        return null;
+    return (_jsx("div", { "aria-live": "polite", className: `caps-upload-queue flex w-full min-w-0 flex-col gap-sm ${className ?? ""}`, "data-upload-rows": true, children: items.map((item) => (_jsx(UploadQueueRow, { item: item, onCancel: onCancel, onRemove: onRemove, onRetry: onRetry, ...(rowClassName === undefined ? {} : { rowClassName }) }, item.id))) }));
+}
+function UploadQueueAction({ action, id, onAction, retry = false, }) {
+    if (!action)
+        return null;
+    return (_jsx(IconButton, { "aria-label": action.accessibleLabel, title: action.label, variant: "ghost", size: "xs", className: "motion-reduce:transition-none", icon: retry ? _jsx(RotateCcw, {}) : _jsx(X, {}), onClick: () => void onAction(id), type: "button" }));
+}
+function UploadQueueDetails({ item }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block min-w-0 truncate", title: item.name, children: item.name }), _jsx("div", { className: "caps-upload-details", children: _jsxs("span", { "aria-live": item.alert ? "assertive" : undefined, className: "caps-upload-status min-w-0 break-words", "data-upload-status": true, role: item.alert ? "alert" : undefined, children: [item.alert ?? item.statusLabel, " ", item.progressLabel] }) })] }));
+}
+function UploadQueueRow({ item, onCancel, onRemove, onRetry, rowClassName, }) {
+    return (_jsxs("div", { className: `caps-upload-row grid w-full min-w-0 max-w-full grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-sm p-sm text-xs ${rowClassName ?? ""}`, children: [item.preview.kind === "image" ? (_jsx("img", { alt: "", className: "caps-upload-preview mask mask-squircle size-8 shrink-0 object-cover", src: item.preview.url })) : (_jsx("span", { "aria-hidden": "true", className: "caps-upload-preview mask mask-squircle flex size-8 shrink-0 items-center justify-center bg-base-300", children: _jsx(FileImage, { className: "size-4" }) })), _jsx(UploadQueueDetails, { item: item }), _jsx(UploadQueueRowActions, { actions: item.actions, id: item.id, onCancel: onCancel, onRemove: onRemove, onRetry: onRetry }), _jsx(Progress, { "aria-label": `${item.name} progress`, className: "caps-upload-progress", tone: item.alert ? "error" : item.progress === 100 ? "success" : "accent", max: 100, value: item.progress ?? (item.alert ? 0 : undefined) })] }));
+}
+function UploadQueueRowActions({ actions, id, onCancel, onRemove, onRetry, }) {
+    return (_jsxs("div", { className: "caps-upload-actions flex min-w-0 flex-wrap justify-end gap-xs", children: [_jsx(UploadQueueAction, { action: actions.retry, id: id, onAction: onRetry, retry: true }), _jsx(UploadQueueAction, { action: actions.cancel, id: id, onAction: onCancel }), _jsx(UploadQueueAction, { action: actions.remove, id: id, onAction: onRemove })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+/** A full-width, structured action for a data list. */
+export type ActionRowProps = Omit<ButtonProps, "children"> & {
+    icon?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    density?: "regular" | "compact";
+    /** `lg` gives a character-sized mark (a sprite head) more room than an icon. */
+    iconSize?: "default" | "lg";
+    /** `card` molds the row into its own raised plastic card. */
+    appearance?: "plain" | "card";
+};
+/** Render a clear label, supporting detail, and optional trailing status. */
+export declare function ActionRow({ description, icon, label, density, appearance, iconSize, size, trailing, ...buttonProps }: ActionRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/action-row.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { cn } from "../lib/cn.js";
+/** Render a clear label, supporting detail, and optional trailing status. */
+export function ActionRow({ description, icon, label, density = "regular", appearance = "plain", iconSize = "default", size, trailing, ...buttonProps }) {
+    return (_jsxs(Button, { ...buttonProps, className: cn("caps-action-row", appearance === "card" && "caps-action-row-card", density === "compact"
+            ? "h-auto min-h-10 w-full justify-start gap-xs px-xs py-2xs text-left"
+            : "h-auto min-h-14 w-full justify-start gap-sm px-sm py-xs text-left", buttonProps.className), size: size ?? (density === "compact" ? "default" : "lg"), variant: buttonProps.variant ?? "ghost", children: [icon ? (_jsx("span", { className: density === "compact"
+                    ? `grid ${iconSize === "lg" ? "size-8" : "size-7"} shrink-0 place-items-center [&_:is(svg,.caps-monogram)]:size-5`
+                    : `grid ${iconSize === "lg" ? "size-12" : "size-10"} shrink-0 place-items-center [&_:is(svg,.caps-monogram)]:size-7`, children: icon })) : null, _jsxs("span", { className: "caps-action-row-copy", children: [_jsx("span", { className: "caps-action-row-label max-w-full truncate", children: label }), description ? (_jsx("span", { className: "caps-action-row-description max-w-full truncate", children: description })) : null] }), trailing ? (_jsx("span", { className: "caps-action-row-trailing", children: trailing })) : null] }));
+}

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+/** Where a piece of agent work stands. */
+export type ActivityState = "running" | "done" | "failed";
+/** Short elapsed time: `0.4s`, `4.2s`, `42s`, `3m 05s`. */
+export declare function formatElapsed(milliseconds: number): string;
+/**
+ * A clock that ticks while `running` and holds still otherwise. Times are
+ * epoch milliseconds (`Date.now()`), owned by the caller.
+ */
+export declare function useElapsed(startedAt: number, finishedAt: number | undefined, running: boolean): number;
+/** Props accepted by ActivityLine. */
+export type ActivityLineProps = Readonly<{
+    state: ActivityState;
+    /** When the work started (epoch ms). */
+    startedAt: number;
+    /** When it ended (epoch ms); otherwise the moment it stopped running. */
+    finishedAt?: number | undefined;
+    /** What is happening, such as "Thinking". */
+    label: string;
+    /** How finished work reads before its time, such as "Thought for". */
+    doneLabel: string;
+    /** How stopped work reads before its time, such as "Stopped after". */
+    failedLabel?: string;
+    /** The trace: shown while running, folded away once done. */
+    children?: ReactNode;
+    className?: string;
+}>;
+/**
+ * One line of agent activity. While running it says what is happening with
+ * a live clock and shows its trace; when done it settles into "Thought for
+ * 4.2s" and folds the trace away, one click from reopening.
+ */
+export declare function ActivityLine({ state, startedAt, finishedAt, label, doneLabel, failedLabel, children, className, }: ActivityLineProps): import("react/jsx-runtime").JSX.Element;