@fungi.computer/caps 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+/** A caller-owned running App window or available App launcher. */
+export type AppBarItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    /** Request focusing a running window or opening an available App. */
+    onSelect: () => void;
+    /** Request closing; the caller owns disposal and removal. */
+    onClose?: () => void;
+};
+/** Caller-owned apps and actions; AppBar owns only presentation and disclosure. */
+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. */
+    launchers: readonly AppBarItem[];
+    /** Recent Sessions supplied by the shell's session owner. */
+    sessions?: readonly AppBarItem[];
+    /** Keep long launcher names readable instead of truncating them. */
+    launcherLabels?: "truncate" | "wrap";
+    alwaysExpanded?: boolean;
+    /** Control the compact App dial from the surrounding shell. */
+    isOpen?: boolean;
+    /** Report requests to open or dismiss the compact App dial. */
+    onOpenChange?: (open: boolean) => void;
+    emptyLabel?: ReactNode;
+    launcher: {
+        label: string;
+        icon?: ReactNode;
+    };
+    /** A primary action revealed above the launcher, such as starting a chat. */
+    primaryAction?: {
+        label: string;
+        icon: ReactNode;
+        /** Invoke the caller-owned primary action. */
+        onSelect: () => void;
+    };
+};
+/** 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;

package/dist/blocks/app-bar.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOverlayRoot, useOverlayDismiss, } from "../components/overlay-root.js";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { animate, stagger } from "animejs";
+import { motionDefaults, readMotion, useReducedMotion } from "../lib/motion.js";
+import { themedEase, themedSpring } from "../lib/motion-spring.js";
+import { PanelsTopLeft, X } from "lucide-react";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+function AppBarItemView({ item, available, expanded, onSelect, onClose, session = false, launcherLabels = "truncate", }) {
+    const icon = useRef(null);
+    const motion = useRef();
+    const reduced = useReducedMotion();
+    useEffect(() => {
+        if (reduced && icon.current) {
+            motion.current?.cancel();
+            motion.current = animate(icon.current, { y: 0, scale: 1, duration: 0 });
+        }
+    }, [reduced]);
+    useEffect(() => () => {
+        motion.current?.cancel();
+    }, []);
+    const lift = (raised) => {
+        if (!icon.current)
+            return;
+        motion.current?.cancel();
+        const feel = readMotion(icon.current);
+        motion.current = animate(icon.current, {
+            y: raised && !reduced ? -feel.distance : 0,
+            scale: raised && !reduced ? 1.12 : 1,
+            ...themedSpring(feel, { bounce: 0.4, duration: 320 }),
+        });
+    };
+    const tabIndex = !expanded ? -1 : 0;
+    return (_jsxs("div", { className: "caps-app-bar-item", "data-app-bar-item-id": item.id, "data-launcher-labels": available ? launcherLabels : undefined, "data-session": session ? "true" : undefined, children: [_jsxs("button", { type: "button", className: "caps-app-bar-button", "aria-label": item.label, title: item.label, "aria-pressed": available ? undefined : item.active === true, "data-active": item.active === true ? "true" : undefined, "data-running": available ? undefined : "true", tabIndex: tabIndex, onClick: onSelect, onPointerEnter: () => {
+                    lift(true);
+                }, onPointerLeave: () => {
+                    lift(false);
+                }, onFocus: () => {
+                    lift(true);
+                }, onBlur: () => {
+                    lift(false);
+                }, 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, }) {
+    const popoverRoot = useOverlayRoot("popover");
+    const portalContainer = container ?? popoverRoot;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [notchLeft, setNotchLeft] = useState(0);
+    const open = isOpen ?? internalOpen;
+    useOverlayDismiss(() => {
+        setOpen(false);
+    });
+    const setOpen = (next) => {
+        setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const expanded = alwaysExpanded || open;
+    const root = useRef(null);
+    const runningRef = useRef(null);
+    const launcherRef = useRef(null);
+    const availableRef = useRef(null);
+    const actionRef = useRef(null);
+    const previous = useRef(expanded);
+    const previousAction = useRef(open);
+    const reduced = useReducedMotion();
+    const id = useId();
+    const availableId = `caps-apps-${id}`;
+    const actionId = `caps-app-action-${id}`;
+    const activeId = windows.find((item) => item.active)?.id;
+    const hasPrimaryAction = primaryAction !== undefined;
+    useLayoutEffect(() => {
+        const revealActive = () => {
+            const region = runningRef.current;
+            const selected = region?.querySelector('[data-active="true"]');
+            if (!region || !selected)
+                return;
+            const tray = region.getBoundingClientRect();
+            const item = selected.getBoundingClientRect();
+            region.scrollLeft +=
+                Math.max(0, item.right - tray.right) +
+                    Math.min(0, item.left - tray.left);
+            region.scrollTop +=
+                Math.max(0, item.bottom - tray.bottom) +
+                    Math.min(0, item.top - tray.top);
+        };
+        revealActive();
+        window.addEventListener("resize", revealActive);
+        return () => {
+            window.removeEventListener("resize", revealActive);
+        };
+    }, [activeId, windows.length]);
+    useLayoutEffect(() => {
+        const updateNotch = () => {
+            const nav = root.current;
+            const button = launcherRef.current;
+            if (nav && button) {
+                const navBounds = nav.getBoundingClientRect();
+                const buttonBounds = button.getBoundingClientRect();
+                setNotchLeft(buttonBounds.left - navBounds.left + buttonBounds.width / 2);
+            }
+        };
+        updateNotch();
+        window.addEventListener("resize", updateNotch);
+        return () => {
+            window.removeEventListener("resize", updateNotch);
+        };
+    }, [windows.length]);
+    useLayoutEffect(() => {
+        const immediate = reduced || previous.current === expanded;
+        previous.current = expanded;
+        if (!availableRef.current)
+            return;
+        const feel = readMotion(availableRef.current);
+        const { duration, ease } = immediate
+            ? { duration: reduced ? feel.fast : 0, ease: "linear" }
+            : expanded
+                ? themedSpring(feel, { bounce: 0.4, duration: 420 })
+                : themedEase(feel, { ease: "inOutQuad", duration: 150 });
+        const motions = [];
+        if (immediate)
+            motions.push(animate(availableRef.current.querySelectorAll(".caps-app-bar-item"), {
+                y: 0,
+                scale: 1,
+                duration: 0,
+            }));
+        if (reduced)
+            motions.push(animate(availableRef.current, { x: 0, scale: 1, duration: 0 }));
+        motions.push(animate(availableRef.current, {
+            opacity: expanded ? 1 : 0,
+            x: reduced || expanded ? 0 : -feel.distance * 3,
+            scale: reduced || expanded ? 1 : 0.88,
+            duration,
+            ease,
+        }));
+        if (expanded && !immediate)
+            motions.push(animate(availableRef.current.querySelectorAll(".caps-app-bar-item"), {
+                y: [8, 0],
+                scale: [0.9, 1],
+                delay: stagger(feel.stagger * (28 / motionDefaults.stagger)),
+                ...themedSpring(feel, { bounce: 0.35, duration: 360 }),
+            }));
+        return () => {
+            motions.forEach((motion) => {
+                motion.cancel();
+            });
+        };
+    }, [expanded, reduced]);
+    useLayoutEffect(() => {
+        const immediate = reduced || previousAction.current === open;
+        previousAction.current = open;
+        const target = actionRef.current ?? launcherRef.current;
+        if (!target)
+            return;
+        const feel = readMotion(target);
+        const settle = immediate
+            ? { duration: reduced ? feel.fast : 0, ease: "linear" }
+            : themedSpring(feel, { bounce: 0.35, duration: 320 });
+        const motions = [];
+        if (actionRef.current && reduced)
+            motions.push(animate(actionRef.current, { y: 0, scale: 1, duration: 0 }));
+        if (actionRef.current)
+            motions.push(animate(actionRef.current, {
+                opacity: open ? 1 : 0,
+                y: reduced || open ? 0 : feel.distance * 3.5,
+                scale: reduced || open ? 1 : 0.88,
+                ...settle,
+            }));
+        if (launcherRef.current && !immediate) {
+            const squash = themedEase(feel, { ease: "outQuad", duration: 65 });
+            const release = themedSpring(feel, { bounce: 0.45, duration: 360 });
+            motions.push(animate(launcherRef.current, {
+                scaleX: [
+                    { to: 1.07, duration: squash.duration },
+                    { to: 1, ...release },
+                ],
+                scaleY: [
+                    { to: 0.91, duration: squash.duration },
+                    { to: 1, ...release },
+                ],
+                y: [
+                    { to: 2, duration: squash.duration },
+                    { to: 0, ...release },
+                ],
+            }));
+        }
+        if (launcherRef.current && immediate)
+            motions.push(animate(launcherRef.current, {
+                scaleX: 1,
+                scaleY: 1,
+                y: 0,
+                duration: 0,
+            }));
+        return () => {
+            motions.forEach((motion) => {
+                motion.cancel();
+            });
+        };
+    }, [open, reduced, hasPrimaryAction]);
+    const close = () => {
+        setOpen(false);
+        launcherRef.current?.focus();
+    };
+    const select = (onSelect) => {
+        // Restore disclosure focus first, so the host may deliberately focus its app.
+        if (expanded)
+            close();
+        onSelect();
+    };
+    const renderItem = (item, available, session = false) => (_jsx(AppBarItemView, { item: item, available: available, expanded: available ? expanded : true, onSelect: () => {
+            select(item.onSelect);
+        }, onClose: () => {
+            launcherRef.current?.focus();
+            item.onClose?.();
+        }, launcherLabels: launcherLabels, session: session }, item.id));
+    const appBarStyle = {
+        "--caps-app-bar-notch-left": `${String(notchLeft)}px`,
+    };
+    const changeOpen = (next, details) => {
+        const target = details.event.target;
+        if (!next &&
+            details.reason === "outside-press" &&
+            target instanceof Node &&
+            (root.current?.contains(target) ||
+                availableRef.current?.contains(target) ||
+                actionRef.current?.contains(target))) {
+            details.cancel();
+            return;
+        }
+        if (!next && details.reason === "escape-key")
+            close();
+        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: () => {
+                            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 &&
+                                    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
+                                : portalContainer, className: "caps-app-bar-positioner", children: _jsx(BasePopover.Popup, { initialFocus: false, finalFocus: false, children: _jsxs("button", { ref: actionRef, id: actionId, type: "button", className: "caps-app-bar-primary", "aria-hidden": !open, tabIndex: open ? 0 : -1, onClick: () => {
+                                        select(primaryAction.onSelect);
+                                    }, children: [_jsx("span", { "aria-hidden": "true", children: primaryAction.icon }), primaryAction.label] }) }) }) }) })) : null] }) }));
+}

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

@@ -0,0 +1,93 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by AppStatusBar. */
+export type AppStatusBarProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * What this window is attached to: a StatusBarPicker, or a plain
+     * AppStatusItem when it cannot be changed. Every App keeps it first.
+     */
+    attachment?: ReactNode;
+    /** Readouts held at the far end, such as save state. */
+    end?: ReactNode;
+};
+/**
+ * One App window's status bar: its attachment first, then the App's own
+ * readouts, with an optional far-end readout. One bar per window.
+ */
+export declare function AppStatusBar({ attachment, end, children, className, ...props }: AppStatusBarProps): import("react/jsx-runtime").JSX.Element;
+/** One quiet status readout. */
+export declare function AppStatusItem({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+/** One choice a status bar picker offers. */
+export type StatusBarPickerOption = Readonly<{
+    id: string;
+    label: string;
+}>;
+/** Props accepted by StatusBarPicker. */
+export type StatusBarPickerProps = {
+    /** What is picked, e.g. "Computer"; the trigger is named "<noun>: <label>". */
+    noun: string;
+    /** The plural used for searching, e.g. "Computers". */
+    pluralNoun: string;
+    /** The picked thing's mark, shown before its label. */
+    icon: ReactNode;
+    options: readonly StatusBarPickerOption[];
+    /** The selected option id; `null` when nothing is attached. */
+    value: string | null;
+    /** Called with a different option's id. */
+    onSelect: (id: string) => void;
+    /** Shown when the list is empty, e.g. why nothing can be chosen. */
+    emptyMessage?: ReactNode;
+    /** The trigger's accessible name; defaults to "<noun>: <label>". */
+    accessibleLabel?: string;
+    disabled?: boolean;
+    /** Host-owned popup visibility; omitted for the ordinary trigger-owned picker. */
+    open?: boolean;
+    /** Reports popup dismissal or trigger activation to the host. */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * The status bar's attachment picker: a quiet label that opens a searchable
+ * list above the bar. Selection is a request; the caller owns the change.
+ */
+export declare function StatusBarPicker({ noun, pluralNoun, icon, options, value, onSelect, emptyMessage, accessibleLabel, disabled, open, onOpenChange, }: StatusBarPickerProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by StatusBarChip. */
+export type StatusBarChipProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Visible name of the item, e.g. "Ports". */
+    label: ReactNode;
+    /** Decorative mark before the label; on a phone the chip shows it alone. */
+    icon?: ReactNode;
+    /** A readout after the label, such as a CountBadge. */
+    readout?: ReactNode;
+    /**
+     * Toggle state. `undefined` is an ordinary action; a boolean adds
+     * `aria-pressed` and fills the chip while on.
+     */
+    pressed?: boolean;
+    /**
+     * Disclosure state for a chip that opens a menu or panel. A boolean adds
+     * `aria-expanded` and fills the chip while open.
+     */
+    expanded?: boolean;
+};
+/**
+ * One App-declared status bar control (an action, a toggle or a menu
+ * trigger): a flat chip with the same quiet face as StatusBarPicker. It
+ * forwards its ref and props, so a menu can render it as its trigger.
+ */
+export declare const StatusBarChip: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Visible name of the item, e.g. "Ports". */
+    label: ReactNode;
+    /** Decorative mark before the label; on a phone the chip shows it alone. */
+    icon?: ReactNode;
+    /** A readout after the label, such as a CountBadge. */
+    readout?: ReactNode;
+    /**
+     * Toggle state. `undefined` is an ordinary action; a boolean adds
+     * `aria-pressed` and fills the chip while on.
+     */
+    pressed?: boolean;
+    /**
+     * Disclosure state for a chip that opens a menu or panel. A boolean adds
+     * `aria-expanded` and fills the chip while open.
+     */
+    expanded?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/blocks/app-status-bar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+import { forwardRef, } from "react";
+import { Button } from "../components/button.js";
+import { Combobox } from "../components/combobox.js";
+import { Separator } from "../components/separator.js";
+import { cn } from "../lib/cn.js";
+/**
+ * One App window's status bar: its attachment first, then the App's own
+ * readouts, with an optional far-end readout. One bar per window.
+ */
+export function AppStatusBar({ attachment, end, children, className, ...props }) {
+    return (_jsxs("footer", { ...props, className: cn("caps-app-status-bar", className), children: [attachment, attachment !== undefined && children !== undefined ? (
+            // The host's attachment ends here; the App's own items follow.
+            _jsx(Separator, { orientation: "vertical", className: "caps-app-status-bar-rule" })) : null, children, end === undefined ? null : (_jsx("span", { className: "caps-app-status-item caps-app-status-bar-end", children: end }))] }));
+}
+/** One quiet status readout. */
+export function AppStatusItem({ className, ...props }) {
+    return _jsx("span", { ...props, className: cn("caps-app-status-item", className) });
+}
+/**
+ * The status bar's attachment picker: a quiet label that opens a searchable
+ * list above the bar. Selection is a request; the caller owns the change.
+ */
+export function StatusBarPicker({ noun, pluralNoun, icon, options, value, onSelect, emptyMessage, accessibleLabel, disabled = false, open, onOpenChange, }) {
+    const label = options.find((option) => option.id === value)?.label ??
+        (value === null ? `No ${noun}` : noun);
+    return (_jsx(Combobox, { ...(open === undefined ? {} : { open }), ...(onOpenChange === undefined ? {} : { onOpenChange }), "aria-label": noun, contentClassName: "caps-status-bar-picker-list", emptyMessage: options.length === 0
+            ? (emptyMessage ?? `No ${pluralNoun}`)
+            : `No matching ${pluralNoun}`, getKey: (option) => option.id, getLabel: (option) => option.label, inputProps: { "aria-label": `Search ${pluralNoun}` }, items: options, placeholder: `Search ${pluralNoun}…`, renderItem: (option) => (_jsxs("span", { className: "caps-status-bar-picker-option", children: [icon, option.label] })), trigger: _jsxs(Button, { variant: "ghost", size: "xs", className: "caps-status-bar-picker", "aria-label": accessibleLabel ?? `${noun}: ${label}`, title: `${noun}: ${label}`, disabled: disabled, children: [icon, _jsx("span", { className: "caps-status-bar-picker-label", children: label }), _jsx(ChevronsUpDown, { "aria-hidden": "true" })] }), value: value, onValueChange: (next) => {
+            if (next !== null && next !== value)
+                onSelect(next);
+        } }));
+}
+/**
+ * One App-declared status bar control (an action, a toggle or a menu
+ * trigger): a flat chip with the same quiet face as StatusBarPicker. It
+ * forwards its ref and props, so a menu can render it as its trigger.
+ */
+export const StatusBarChip = forwardRef(function StatusBarChip({ label, icon, readout, pressed, expanded, className, ...props }, ref) {
+    return (_jsxs(Button, { ...props, ref: ref, variant: "ghost", size: "xs", className: cn("caps-status-bar-chip", className), "aria-pressed": pressed ?? props["aria-pressed"], "aria-expanded": expanded ?? props["aria-expanded"], children: [icon === undefined ? null : (_jsx("span", { className: "caps-status-bar-chip-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "caps-status-bar-chip-label", children: label }), readout] }));
+});

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Supported AsyncStateValue values. */
+export type AsyncStateValue = "loading" | "empty" | "error" | "content";
+/** Props accepted by AsyncState. */
+export type AsyncStateProps = Omit<HTMLAttributes<HTMLDivElement>, "content"> & {
+    /** The host's explicit state; this block does not infer it from its slots. */
+    state: AsyncStateValue;
+    loading: ReactNode;
+    empty: ReactNode;
+    error: ReactNode;
+    content: ReactNode;
+};
+/** Selects a caller-rendered state region without fetching or inventing copy. */
+export declare const AsyncState: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "content"> & {
+    /** The host's explicit state; this block does not infer it from its slots. */
+    state: AsyncStateValue;
+    loading: ReactNode;
+    empty: ReactNode;
+    error: ReactNode;
+    content: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/async-state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** Selects a caller-rendered state region without fetching or inventing copy. */
+export const AsyncState = forwardRef(function AsyncState({ className, content, empty, error, loading, state, ...props }, ref) {
+    const regions = { content, empty, error, loading };
+    return (_jsx("div", { ...props, className: cn("async-state", className), ref: ref, children: regions[state] }));
+});

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+/** Minimum width for a card column before the grid adds another column. */
+export type CardGridMinWidth = "narrow" | "regular" | "wide";
+/** A responsive grid that fits complete cards to the available content width. */
+export declare const CardGrid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    minColumnWidth?: CardGridMinWidth;
+    shelf?: Readonly<{
+        title: string;
+        description?: string;
+    }>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/card-grid.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { SectionHeading } from "./section-heading.js";
+import { cn } from "../lib/cn.js";
+const minWidthTokens = {
+    narrow: "16rem",
+    regular: "20rem",
+    wide: "24rem",
+};
+/** A responsive grid that fits complete cards to the available content width. */
+export const CardGrid = forwardRef(function CardGrid({ children, className, minColumnWidth = "regular", style, shelf, ...props }, ref) {
+    const titleId = useId();
+    const gridStyle = {
+        ...style,
+        "--caps-card-grid-min-column": minWidthTokens[minColumnWidth],
+    };
+    const grid = (_jsx("div", { ...props, className: cn("caps-card-grid", className), ref: ref, style: gridStyle, children: children }));
+    if (!shelf)
+        return grid;
+    return (_jsxs("section", { className: "flex flex-col gap-md", "aria-labelledby": titleId, children: [_jsxs("div", { className: "flex flex-col gap-xs", children: [_jsx(SectionHeading, { id: titleId, children: shelf.title }), shelf.description ? (_jsx("p", { className: "text-sm text-base-content/70", children: shelf.description })) : null] }), grid] }));
+});

package/dist/blocks/command-menu.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes } from "react";
+/** Caller-provided command menu item data. */
+export type CommandMenuItem = {
+    description?: string;
+    disabled?: boolean;
+    id: string;
+    label: string;
+    /** Key hint shown before the label, e.g. `z` in a which-key list. */
+    shortcut?: string;
+};
+/** Props accepted by CommandMenu. */
+export type CommandMenuProps = Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
+    items: readonly CommandMenuItem[];
+    /** Called after a non-disabled item is selected. */
+    onSelect: (id: string) => void;
+    /** Caller-owned selected state; distinct from local keyboard focus. */
+    selected?: string;
+};
+/** A single-focus listbox with local navigation and caller-owned selection. */
+export declare const CommandMenu: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> & {
+    items: readonly CommandMenuItem[];
+    /** Called after a non-disabled item is selected. */
+    onSelect: (id: string) => void;
+    /** Caller-owned selected state; distinct from local keyboard focus. */
+    selected?: string;
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/blocks/command-menu.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useCallback, useImperativeHandle, useRef, } from "react";
+import { useGlide } from "../lib/glide.js";
+import { useSelectableCollection } from "../components/selectable.js";
+/** A single-focus listbox with local navigation and caller-owned selection. */
+export const CommandMenu = forwardRef(function CommandMenu({ className, items, onKeyDown, onSelect, selected, ...props }, ref) {
+    const instanceId = useId();
+    const list = useRef(null);
+    useImperativeHandle(ref, () => list.current);
+    const glide = useGlide('[role="option"][data-active]');
+    const attach = useCallback((node) => {
+        list.current = node;
+        glide(node);
+    }, [glide]);
+    const collection = useSelectableCollection({
+        getKey: (item) => item.id,
+        isDisabled: (item) => item.disabled === true,
+        items,
+    });
+    const { activeKey: activeId, enabledItems: enabled } = collection;
+    useEffect(() => {
+        if (activeId && enabled.some((item) => item.id === activeId))
+            return;
+        collection.setActiveKey(selected && enabled.some((item) => item.id === selected)
+            ? selected
+            : (enabled[0]?.id ?? null));
+    }, [activeId, collection.setActiveKey, enabled, selected]);
+    const optionId = (id) => `${instanceId}-option-${encodeURIComponent(id)}`;
+    return (_jsx("ul", { ...props, ref: attach, "aria-activedescendant": activeId ? optionId(activeId) : undefined, className: [
+            "menu max-h-56 overflow-y-auto rounded-none bg-base-100 shadow-lg",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || !enabled.length)
+                return;
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                collection.move(1);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                collection.move(-1);
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                collection.move(-1, "start");
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                collection.move(1, "end");
+            }
+            else if ((event.key === "Enter" || event.key === " ") && activeId) {
+                event.preventDefault();
+                onSelect(activeId);
+            }
+        }, role: "listbox", tabIndex: 0, children: items.map((item) => (_jsx("li", { role: "none", children: _jsxs("div", { "aria-disabled": item.disabled === true ? true : undefined, "aria-selected": selected === item.id, "data-active": activeId === item.id || undefined, className: [
+                    "flex w-full items-center gap-sm px-md py-xs text-left text-xs",
+                    activeId === item.id
+                        ? "bg-base-300 text-base-content"
+                        : "text-base-content",
+                    item.disabled
+                        ? "cursor-not-allowed bg-[var(--stipe-surface)] text-base-content outline outline-1 outline-dashed outline-base-300"
+                        : "cursor-pointer",
+                ].join(" "), "aria-keyshortcuts": item.shortcut, "data-search-option": item.id, id: optionId(item.id), onClick: () => {
+                    if (!item.disabled)
+                        onSelect(item.id);
+                }, role: "option", children: [item.shortcut ? (_jsx("kbd", { className: "kbd kbd-sm min-w-6 shrink-0", children: item.shortcut })) : null, _jsx("span", { className: "flex-1 truncate", children: item.label }), item.description ? (_jsx("span", { className: "text-xs text-base-content", children: item.description })) : null] }) }, item.id))) }));
+});

package/dist/blocks/composer.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Composer. */
+export type ComposerProps = HTMLAttributes<HTMLDivElement> & {
+    /** The caller-owned primary input control. */
+    input: ReactNode;
+    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    action?: ReactNode;
+    /** Optional caller-owned leading slot, such as an avatar. */
+    leading?: ReactNode;
+    /** Classes for the joined row; useful when the host exposes a busy state. */
+    rowClassName?: string;
+};
+/** Layout and slots only. It never assigns action-control semantics. */
+export declare const Composer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The caller-owned primary input control. */
+    input: ReactNode;
+    /** The caller-owned action control. Its disabled state and accessible name stay on that control. */
+    action?: ReactNode;
+    /** Optional caller-owned leading slot, such as an avatar. */
+    leading?: ReactNode;
+    /** Classes for the joined row; useful when the host exposes a busy state. */
+    rowClassName?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/blocks/composer.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+/** Layout and slots only. It never assigns action-control semantics. */
+export const Composer = forwardRef(function Composer({ action, className, input, leading, rowClassName, ...rootProps }, ref) {
+    return (_jsx("div", { ...rootProps, ref: ref, className: [
+            "caps-composer flex min-w-0 flex-1 items-end gap-sm",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: _jsxs("div", { className: ["join w-full p-2xs", rowClassName]
+                .filter(Boolean)
+                .join(" "), children: [leading, input, action] }) }));
+});