@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/tooltip.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { Slot } from "@radix-ui/react-slot";
+import { createContext, useCallback, forwardRef, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { useOverlayRoot, useOverlayDismiss } from "./overlay-root.js";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion } from "../lib/motion.js";
+const warmth = { open: 0, warm: false, cooling: undefined };
+/** How long the group stays warm after the last tooltip closes. */
+const coolingMs = 600;
+const TooltipContext = createContext(null);
+function useTooltipContext() {
+    const context = useContext(TooltipContext);
+    if (!context)
+        throw new Error("Tooltip parts must be used inside <Tooltip>");
+    return context;
+}
+/** A tooltip controller with explicit controlled or uncontrolled open state. */
+export const Tooltip = forwardRef(function Tooltip({ children, className, defaultOpen = false, delayDuration = 300, onOpenChange, open: controlledOpen, side = "top", ...props }, forwardedRef) {
+    const trigger = useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [arrivedWarm, setArrivedWarm] = useState(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    // Count this tooltip toward its group's warmth while it is open.
+    useEffect(() => {
+        if (!open)
+            return;
+        warmth.open += 1;
+        warmth.warm = true;
+        clearTimeout(warmth.cooling);
+        return () => {
+            warmth.open -= 1;
+            if (warmth.open > 0)
+                return;
+            warmth.cooling = setTimeout(() => {
+                warmth.warm = false;
+            }, coolingMs);
+        };
+    }, [open]);
+    const contentId = `${useId()}-content`;
+    const timer = useRef(null);
+    const clearTimer = () => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+    const setOpen = (next) => {
+        clearTimer();
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    useOverlayDismiss(() => {
+        setOpen(false);
+    });
+    const scheduleOpen = () => {
+        clearTimer();
+        if (open)
+            return;
+        const warm = warmth.warm;
+        timer.current = setTimeout(() => {
+            setArrivedWarm(warm);
+            setOpen(true);
+        }, warm ? 0 : Math.max(0, delayDuration));
+    };
+    const scheduleClose = () => {
+        clearTimer();
+        if (!open)
+            return;
+        timer.current = setTimeout(() => {
+            setOpen(false);
+        }, 0);
+    };
+    useEffect(() => clearTimer, []);
+    return (_jsx(TooltipContext.Provider, { value: {
+            arrivedWarm,
+            cancelClose: clearTimer,
+            contentId,
+            open,
+            scheduleClose,
+            scheduleOpen,
+            side,
+            trigger,
+        }, children: _jsx(BaseTooltip.Root, { open: open, onOpenChange: setOpen, children: _jsx("span", { ...props, className: cn("relative inline-flex", className), ref: forwardedRef, children: children }) }) }));
+});
+/** The trigger control for a Tooltip. */
+export const TooltipTrigger = forwardRef(function TooltipTrigger({ asChild = false, children, className, onBlur, onFocus, onPointerEnter, onPointerLeave, ...props }, forwardedRef) {
+    const tooltip = useTooltipContext();
+    const attach = useCallback((node) => {
+        tooltip.trigger.current = node;
+    }, [tooltip.trigger]);
+    useImperativeHandle(forwardedRef, () => tooltip.trigger.current);
+    const { "aria-describedby": callerDescribedBy, ...nativeProps } = props;
+    const triggerProps = {
+        ...nativeProps,
+        "aria-describedby": [callerDescribedBy, tooltip.open ? tooltip.contentId : undefined]
+            .filter(Boolean)
+            .join(" ") || undefined,
+        "data-state": tooltip.open ? "open" : "closed",
+        onBlur: (event) => {
+            onBlur?.(event);
+            if (!event.defaultPrevented)
+                tooltip.scheduleClose();
+        },
+        onFocus: (event) => {
+            onFocus?.(event);
+            if (!event.defaultPrevented)
+                tooltip.scheduleOpen();
+        },
+        onPointerEnter: (event) => {
+            onPointerEnter?.(event);
+            if (!event.defaultPrevented)
+                tooltip.scheduleOpen();
+        },
+        onPointerLeave: (event) => {
+            onPointerLeave?.(event);
+            if (!event.defaultPrevented)
+                tooltip.scheduleClose();
+        },
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...triggerProps, className: cn(className), ref: attach, children: children }));
+    }
+    return (_jsx("button", { ...triggerProps, className: cn("btn", className), ref: attach, type: props.type ?? "button", children: children }));
+});
+/** The positioned content region for a Tooltip. */
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, onPointerEnter, onPointerLeave, ...props }, ref) {
+    const tooltip = useTooltipContext();
+    const root = useOverlayRoot("tooltip");
+    const [node, setNode] = useState(null);
+    useImperativeHandle(ref, () => node, [node]);
+    // A cold tooltip arrives from its trigger; a warm one simply swaps in.
+    useLayoutEffect(() => {
+        const element = node;
+        if (!tooltip.open || !element || !canAnimate(element))
+            return;
+        const motion = readMotion(element);
+        const travel = tooltip.arrivedWarm ? 0 : motion.distance;
+        const offset = {
+            bottom: `0 ${String(-travel)}px`,
+            left: `${String(travel)}px 0`,
+            right: `${String(-travel)}px 0`,
+            top: `0 ${String(travel)}px`,
+        }[tooltip.side];
+        const arrival = element.animate([
+            { opacity: 0, translate: offset },
+            { opacity: 1, translate: "0 0" },
+        ], {
+            duration: tooltip.arrivedWarm ? motion.fast : motion.normal,
+            easing: motionEasing(motion, motion.ease),
+            composite: "add",
+        });
+        return () => {
+            arrival.cancel();
+        };
+    }, [node, tooltip.open, tooltip.arrivedWarm, tooltip.side]);
+    if (!tooltip.open || !root)
+        return null;
+    return (_jsx(BaseTooltip.Portal, { container: root, children: _jsx(BaseTooltip.Positioner, { anchor: tooltip.trigger, side: tooltip.side, sideOffset: 8, collisionPadding: 8, collisionBoundary: root === document.body ? undefined : root, className: "pointer-events-auto z-(--stipe-layer-tooltip)", children: _jsx(BaseTooltip.Popup, { ...props, "aria-live": "polite", className: cn("pointer-events-auto max-w-(--container-xs) rounded-box bg-base-content px-md py-sm text-xs text-base-100 shadow-lg", className), id: tooltip.contentId, onPointerEnter: (event) => {
+                    onPointerEnter?.(event);
+                    if (!event.defaultPrevented)
+                        tooltip.cancelClose();
+                }, onPointerLeave: (event) => {
+                    onPointerLeave?.(event);
+                    if (!event.defaultPrevented)
+                        tooltip.scheduleClose();
+                }, ref: setNode, role: "tooltip", children: children }) }) }));
+});

package/dist/components/trading-card.d.ts

@@ -0,0 +1,60 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Print finish: `holo` adds a foil sheen on hover that stills for reduced motion. */
+export type TradingCardFinish = "standard" | "holo";
+/** One footer fact, printed like a trading card's weakness or retreat line. */
+export type TradingCardFact = Readonly<{
+    label: string;
+    value: ReactNode;
+}>;
+/** The card's one move: a cost of symbols, a name, and caller-owned text or controls. */
+export type TradingCardMove = Readonly<{
+    /** Decorative cost symbols, such as Sigils. Hidden from assistive technology. */
+    cost?: ReactNode;
+    name: string;
+    /** An optional figure printed at the end of the move line. */
+    value?: ReactNode;
+    children?: ReactNode;
+}>;
+/** Props accepted by TradingCard. */
+export type TradingCardProps = Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    name: string;
+    /** A small stage label printed before the name, such as "Spore". */
+    stage?: string;
+    /** The stat printed at the right of the name bar, such as "60 SP". */
+    stat?: ReactNode;
+    /** The type line under the art window. */
+    typeLine?: string;
+    art: ReactNode;
+    move: TradingCardMove;
+    flavor?: ReactNode;
+    facts?: readonly TradingCardFact[];
+    /** Collector number, such as "001/001". */
+    setNumber?: string;
+    /** A small rarity mark printed by the set number. */
+    rarity?: ReactNode;
+    finish?: TradingCardFinish;
+};
+/**
+ * A 63:88 trading card: a bright rim, a name bar with a stage and stat, an art
+ * window, one move row that can hold a real form, a flavor line and a footer of
+ * facts with a set number and rarity mark. The move body is caller-owned, so a
+ * form inside it keeps its own labels, focus and errors.
+ */
+export declare const TradingCard: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    name: string;
+    /** A small stage label printed before the name, such as "Spore". */
+    stage?: string;
+    /** The stat printed at the right of the name bar, such as "60 SP". */
+    stat?: ReactNode;
+    /** The type line under the art window. */
+    typeLine?: string;
+    art: ReactNode;
+    move: TradingCardMove;
+    flavor?: ReactNode;
+    facts?: readonly TradingCardFact[];
+    /** Collector number, such as "001/001". */
+    setNumber?: string;
+    /** A small rarity mark printed by the set number. */
+    rarity?: ReactNode;
+    finish?: TradingCardFinish;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/trading-card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A 63:88 trading card: a bright rim, a name bar with a stage and stat, an art
+ * window, one move row that can hold a real form, a flavor line and a footer of
+ * facts with a set number and rarity mark. The move body is caller-owned, so a
+ * form inside it keeps its own labels, focus and errors.
+ */
+export const TradingCard = forwardRef(function TradingCard({ art, className, facts = [], finish = "standard", flavor, move, name, rarity, setNumber, stage, stat, typeLine, ...props }, ref) {
+    const nameId = useId();
+    return (_jsx("article", { ...props, "aria-labelledby": props["aria-labelledby"] ?? nameId, className: cn("caps-trading-card", className), "data-finish": finish, ref: ref, children: _jsxs("div", { className: "caps-trading-card-face", children: [_jsxs("header", { className: "caps-trading-card-name-bar", children: [stage ? (_jsx("span", { className: "caps-trading-card-stage", children: stage })) : null, _jsx("h2", { className: "caps-trading-card-name", id: nameId, children: name }), stat ? (_jsx("span", { className: "caps-trading-card-stat", children: stat })) : null] }), _jsx("div", { className: "caps-trading-card-window", children: art }), typeLine ? (_jsx("p", { className: "caps-trading-card-type", children: typeLine })) : null, _jsxs("section", { className: "caps-trading-card-move", children: [_jsxs("div", { className: "caps-trading-card-move-line", children: [move.cost ? (_jsx("span", { "aria-hidden": "true", className: "caps-trading-card-cost", children: move.cost })) : null, _jsx("h3", { className: "caps-trading-card-move-name", children: move.name }), move.value ? (_jsx("span", { className: "caps-trading-card-move-value", children: move.value })) : null] }), move.children ? (_jsx("div", { className: "caps-trading-card-move-body", children: move.children })) : null] }), flavor ? _jsx("p", { className: "caps-trading-card-flavor", children: flavor }) : null, facts.length > 0 || setNumber || rarity ? (_jsxs("footer", { className: "caps-trading-card-footer", children: [facts.length > 0 ? (_jsx("dl", { className: "caps-trading-card-facts", children: facts.map((fact) => (_jsxs("div", { children: [_jsx("dt", { children: fact.label }), _jsx("dd", { children: fact.value })] }, fact.label))) })) : null, setNumber || rarity ? (_jsxs("p", { className: "caps-trading-card-collector", children: [setNumber ? _jsx("span", { children: setNumber }) : null, rarity ? (_jsx("span", { className: "caps-trading-card-rarity", children: rarity })) : null] })) : null] })) : null] }) }));
+});

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

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+/** Props accepted by Fuse. */
+export type FuseProps = {
+    /** How long the fuse burns, in milliseconds: a decision window, not motion. */
+    duration: number;
+    /** Hold the burn, for example while the pointer rests on the action. */
+    paused?: boolean;
+    /** Called once when the fuse has burnt down. */
+    onBurnt: () => void;
+    className?: string;
+};
+/**
+ * A hairline that burns down over its duration, then calls `onBurnt`. Its
+ * thickness is the theme's `--stipe-motion-fuse` (0 hides it but the window
+ * still runs). Under reduced motion it ticks down once a second instead of
+ * burning smoothly.
+ */
+export declare function Fuse({ duration, paused, onBurnt, className, }: FuseProps): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by UndoAction. */
+export type UndoActionProps = {
+    /** The action's label, such as "Stop". */
+    children: ReactNode;
+    /** Runs when the undo window closes without an undo: the action happens then. */
+    onCommit: () => void;
+    /** Spoken when the action is armed, such as "Port 5173 stops in 5 seconds". */
+    armedAnnouncement: string;
+    /** Spoken after an undo, such as "Port 5173 kept open". */
+    undoneAnnouncement: string;
+    undoLabel?: ReactNode;
+    /** The undo window in milliseconds. */
+    undoMs?: number;
+} & Omit<ButtonProps, "children" | "onClick" | "result" | "resultLabel">;
+/**
+ * A destructive action that waits for its undo window instead of asking
+ * first. Pressing it turns the same button into Undo with a fuse burning along
+ * its edge; Undo or Escape cancels, and the action commits when the fuse runs
+ * out. Resting the pointer on it holds the fuse.
+ */
+export declare const UndoAction: import("react").ForwardRefExoticComponent<{
+    /** The action's label, such as "Stop". */
+    children: ReactNode;
+    /** Runs when the undo window closes without an undo: the action happens then. */
+    onCommit: () => void;
+    /** Spoken when the action is armed, such as "Port 5173 stops in 5 seconds". */
+    armedAnnouncement: string;
+    /** Spoken after an undo, such as "Port 5173 kept open". */
+    undoneAnnouncement: string;
+    undoLabel?: ReactNode;
+    /** The undo window in milliseconds. */
+    undoMs?: number;
+} & Omit<ButtonProps, "children" | "onClick" | "result" | "resultLabel"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/undo-action.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion } from "../lib/motion.js";
+import { Button } from "./button.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+/**
+ * A hairline that burns down over its duration, then calls `onBurnt`. Its
+ * thickness is the theme's `--stipe-motion-fuse` (0 hides it but the window
+ * still runs). Under reduced motion it ticks down once a second instead of
+ * burning smoothly.
+ */
+export function Fuse({ duration, paused = false, onBurnt, className, }) {
+    const node = useRef(null);
+    const burn = useRef(null);
+    const burnt = useRef(onBurnt);
+    useEffect(() => {
+        burnt.current = onBurnt;
+    }, [onBurnt]);
+    useLayoutEffect(() => {
+        const element = node.current;
+        if (!element)
+            return;
+        if (!canAnimate(element)) {
+            const timer = setTimeout(() => {
+                burnt.current();
+            }, duration);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+        const motion = readMotion(element);
+        const seconds = Math.max(1, Math.round(duration / 1000));
+        const animation = element.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+            duration,
+            easing: motion.reduced
+                ? `steps(${String(seconds)}, end)`
+                : motionEasing(motion, "linear"),
+            fill: "forwards",
+        });
+        animation.addEventListener("finish", () => {
+            burnt.current();
+        });
+        burn.current = animation;
+        return () => {
+            animation.cancel();
+            burn.current = null;
+        };
+    }, [duration]);
+    useEffect(() => {
+        const animation = burn.current;
+        if (!animation)
+            return;
+        if (paused)
+            animation.pause();
+        else if (animation.playState === "paused")
+            animation.play();
+    }, [paused]);
+    return (_jsx("span", { ref: node, "aria-hidden": "true", className: cn("caps-fuse", className) }));
+}
+/**
+ * A destructive action that waits for its undo window instead of asking
+ * first. Pressing it turns the same button into Undo with a fuse burning along
+ * its edge; Undo or Escape cancels, and the action commits when the fuse runs
+ * out. Resting the pointer on it holds the fuse.
+ */
+export const UndoAction = forwardRef(function UndoAction({ children, onCommit, armedAnnouncement, undoneAnnouncement, undoLabel = "Undo", undoMs = 5000, className, onKeyDown, onPointerEnter, onPointerLeave, ...props }, ref) {
+    const [armed, setArmed] = useState(false);
+    const [held, setHeld] = useState(false);
+    const [spoken, setSpoken] = useState("");
+    const hint = useId();
+    const undo = () => {
+        setArmed(false);
+        setSpoken(undoneAnnouncement);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...props, ref: ref, "aria-label": armed ? undefined : props["aria-label"], "aria-labelledby": armed ? undefined : props["aria-labelledby"], "aria-describedby": armed ? hint : props["aria-describedby"], className: cn("caps-undo-action", className), "data-armed": armed ? "" : undefined, onClick: () => {
+                    if (armed) {
+                        undo();
+                        return;
+                    }
+                    setArmed(true);
+                    setSpoken(armedAnnouncement);
+                }, onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (armed && event.key === "Escape") {
+                        event.preventDefault();
+                        undo();
+                    }
+                }, onPointerEnter: (event) => {
+                    onPointerEnter?.(event);
+                    setHeld(true);
+                }, onPointerLeave: (event) => {
+                    onPointerLeave?.(event);
+                    setHeld(false);
+                }, children: [armed ? undoLabel : children, armed ? (_jsx(Fuse, { duration: undoMs, paused: held, onBurnt: () => {
+                            setArmed(false);
+                            setSpoken("");
+                            onCommit();
+                        } })) : null] }), _jsx(VisuallyHidden, { id: hint, children: "Press Escape to undo." }), _jsx(VisuallyHidden, { role: "status", children: spoken })] }));
+});

package/dist/components/undo-toast.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+/** What an undo toast says and does. */
+export type UndoToastOptions = Readonly<{
+    title: ReactNode;
+    description?: ReactNode;
+    /** Runs when the toast's fuse burns out: the action happens then. */
+    onCommit: () => void;
+    /** Runs when the person undoes, by the button or Escape. */
+    onUndo?: () => void;
+    undoLabel?: string;
+    /** The undo window in milliseconds. */
+    undoMs?: number;
+    /** The Toaster to show it on, when a page has more than one. */
+    toasterId?: string;
+}>;
+/**
+ * Show a done-and-undoable toast: the action is deferred while a fuse burns
+ * along the toast's edge, Undo or Escape cancels it, and resting on the toast
+ * holds the fuse. Returns the toast id.
+ */
+export declare function toastUndo(options: UndoToastOptions): string | number;

package/dist/components/undo-toast.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Alert } from "./alert.js";
+import { Button } from "./button.js";
+import { Fuse } from "./undo-action.js";
+function UndoToast({ dismiss, options, }) {
+    const [held, setHeld] = useState(false);
+    const [settled, setSettled] = useState(false);
+    const undo = () => {
+        if (settled)
+            return;
+        setSettled(true);
+        options.onUndo?.();
+        dismiss();
+    };
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key !== "Escape" || settled)
+                return;
+            setSettled(true);
+            options.onUndo?.();
+            dismiss();
+        };
+        globalThis.addEventListener("keydown", onKey);
+        return () => {
+            globalThis.removeEventListener("keydown", onKey);
+        };
+    }, [settled, options, dismiss]);
+    return (_jsxs("div", { className: "caps-undo-toast", onPointerEnter: () => {
+            setHeld(true);
+        }, onPointerLeave: () => {
+            setHeld(false);
+        }, onFocus: () => {
+            setHeld(true);
+        }, onBlur: () => {
+            setHeld(false);
+        }, children: [_jsx(Alert, { title: options.title, description: options.description, tone: "info", action: _jsx(Button, { size: "sm", variant: "outline", onClick: undo, children: options.undoLabel ?? "Undo" }) }), _jsx(Fuse, { duration: options.undoMs ?? 5000, paused: held, onBurnt: () => {
+                    if (settled)
+                        return;
+                    setSettled(true);
+                    options.onCommit();
+                    dismiss();
+                } })] }));
+}
+/**
+ * Show a done-and-undoable toast: the action is deferred while a fuse burns
+ * along the toast's edge, Undo or Escape cancels it, and resting on the toast
+ * holds the fuse. Returns the toast id.
+ */
+export function toastUndo(options) {
+    const settings = { duration: Infinity };
+    if (options.toasterId !== undefined)
+        settings.toasterId = options.toasterId;
+    return toast.custom((id) => (_jsx(UndoToast, { options: options, dismiss: () => {
+            toast.dismiss(id);
+        } })), settings);
+}

package/dist/components/visually-hidden.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes } from "react";
+/** Props accepted by VisuallyHidden. */
+export type VisuallyHiddenProps = {
+    asChild?: boolean;
+} & HTMLAttributes<HTMLElement>;
+/** Content visually hidden while remaining available to assistive technology. */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<{
+    asChild?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/visually-hidden.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** Content visually hidden while remaining available to assistive technology. */
+export const VisuallyHidden = forwardRef(function VisuallyHidden({ asChild = false, className, ...props }, ref) {
+    const classes = cn("absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]", className);
+    if (asChild)
+        return _jsx(Slot, { ...props, className: classes, ref: ref });
+    return _jsx("span", { ...props, className: classes, ref: ref });
+});

package/dist/components/window.d.ts

@@ -0,0 +1,65 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/** Window presentation only. The host owns geometry, focus order and lifecycle. */
+export type WindowFrameProps = HTMLAttributes<HTMLElement> & {
+    active?: boolean;
+    floating?: boolean;
+    /** Shrink a floating panel to its contents, up to the host's max-height. */
+    fitContent?: boolean;
+};
+/** A clipped, rounded shell for either a tiled or floating application. */
+export declare const WindowFrame: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    active?: boolean;
+    floating?: boolean;
+    /** Shrink a floating panel to its contents, up to the host's max-height. */
+    fitContent?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+/** Decorative snap destination. Geometry and visibility belong to the layout owner. */
+export declare function WindowSnapPreview({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/** A host-owned request to go back inside the window's content. */
+export type WindowBackAction = {
+    /** Accessible name, e.g. "Back in Games". */
+    label: string;
+    /** Request going back; the host owns the history and the outcome. */
+    onBack: () => void;
+    /** Tooltip text, e.g. the keyboard route to the same action. */
+    hint?: string;
+};
+/** Supply handleProps only when the title is an interactive layout handle. */
+export type WindowHeaderProps = Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    title: string;
+    /** Where the content is now, shown after the title and truncated first. */
+    subtitle?: string;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    /** Present only while there is somewhere to go back to. */
+    back?: WindowBackAction;
+    /** `compact` is a slim bar for tiled layouts; touch targets keep 44px. */
+    density?: "regular" | "compact";
+    handleProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">;
+};
+/** The handle, Back and actions are siblings, so presses never start a drag. */
+export declare function WindowHeader({ title, subtitle, icon, actions, back, density, handleProps, className, ...props }: WindowHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Available callbacks determine available controls; no inert placeholder actions. */
+export type WindowActionsProps = {
+    title: string;
+    floating?: boolean;
+    maximized?: boolean;
+    /** Request making this window the main tiled window. */
+    onPromote?: () => void;
+    /** Request switching between floating and tiled placement. */
+    onToggleFloating?: () => void;
+    /** Request toggling maximized presentation. */
+    onToggleMaximize?: () => void;
+    /** Request minimizing; the caller owns window visibility. */
+    onMinimize?: () => void;
+    /** Request closing; the caller owns disposal and removal. */
+    onClose?: () => void;
+    /** Select a compact game panel for reading on a narrow screen. */
+    onSelect?: () => void;
+};
+/** Consistent icons, ordering and accessible names for host-owned commands. */
+export declare function WindowActions({ title, floating, maximized, onPromote, onToggleFloating, onToggleMaximize, onMinimize, onClose, onSelect, }: WindowActionsProps): import("react/jsx-runtime").JSX.Element;
+/** The scrolling region stays inside the shell, beneath a stationary title bar. */
+export declare const WindowBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Reading rhythm for compact game-window blocks and action keys. */
+export declare const GameWindowContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/window.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowLeft, ArrowUpRight, Columns2, Maximize2, Minimize2, Minus, PanelsTopLeft, X, } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { IconButton } from "./icon-button.js";
+/** A clipped, rounded shell for either a tiled or floating application. */
+export const WindowFrame = forwardRef(function WindowFrame({ active = false, floating = false, fitContent = false, className, ...props }, ref) {
+    return (_jsx("section", { ...props, ref: ref, className: cn("caps-window", className), "data-active": active, "data-floating": floating, "data-fit-content": fitContent }));
+});
+/** Decorative snap destination. Geometry and visibility belong to the layout owner. */
+export function WindowSnapPreview({ className, ...props }) {
+    return (_jsx("div", { ...props, "aria-hidden": "true", className: cn("caps-window-snap-preview", className) }));
+}
+/** The handle, Back and actions are siblings, so presses never start a drag. */
+export function WindowHeader({ title, subtitle, icon, actions, back, density = "regular", handleProps, className, ...props }) {
+    const label = subtitle ? `${title} · ${subtitle}` : title;
+    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "caps-window-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "caps-window-name", children: title }), subtitle && (_jsxs("span", { className: "caps-window-subtitle", children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), " ", subtitle] }))] }));
+    return (_jsxs("header", { ...props, className: cn("caps-window-header", className), "data-density": density, children: [back && (_jsx(IconButton, { className: "caps-window-back", "aria-label": back.label, title: back.hint ?? back.label, icon: _jsx(ArrowLeft, {}), onClick: back.onBack })), handleProps ? (_jsx("button", { ...handleProps, type: "button", "data-caps-window-handle": true, className: cn("caps-window-title", handleProps.className), title: label, children: content })) : (_jsx("div", { className: "caps-window-title", title: label, children: content })), actions] }));
+}
+/** Consistent icons, ordering and accessible names for host-owned commands. */
+export function WindowActions({ title, floating = false, maximized = false, onPromote, onToggleFloating, onToggleMaximize, onMinimize, onClose, onSelect, }) {
+    return (_jsxs("div", { className: "caps-window-actions", role: "group", "aria-label": `${title} window actions`, children: [onSelect && (_jsx(IconButton, { "aria-label": `Show ${title}`, title: `Show ${title}`, icon: _jsx(Maximize2, {}), onClick: onSelect })), onPromote && (_jsx(IconButton, { "aria-label": `Make ${title} main`, title: "Make main", icon: _jsx(ArrowUpRight, {}), onClick: onPromote })), onToggleFloating && (_jsx(IconButton, { "aria-label": `${floating ? "Tile" : "Float"} ${title}`, title: floating ? "Tile" : "Float", icon: floating ? _jsx(Columns2, {}) : _jsx(PanelsTopLeft, {}), onClick: onToggleFloating })), onToggleMaximize && (_jsx(IconButton, { "aria-label": `${maximized ? "Restore" : "Zoom"} ${title}`, title: maximized ? "Restore" : "Zoom", icon: maximized ? _jsx(Minimize2, {}) : _jsx(Maximize2, {}), onClick: onToggleMaximize })), onMinimize && (_jsx(IconButton, { "aria-label": `Minimize ${title}`, title: "Minimize", icon: _jsx(Minus, {}), onClick: onMinimize })), onClose && (_jsx(IconButton, { "aria-label": `Close ${title}`, title: "Close", tone: "destructive", icon: _jsx(X, {}), onClick: onClose }))] }));
+}
+/** The scrolling region stays inside the shell, beneath a stationary title bar. */
+export const WindowBody = forwardRef(function WindowBody({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-window-body", className) }));
+});
+/** Reading rhythm for compact game-window blocks and action keys. */
+export const GameWindowContent = forwardRef(function GameWindowContent({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-game-window-content", className) }));
+});

package/dist/components/wizard.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+/** A named step. Values and validation remain in the caller's form. */
+export type WizardStep = {
+    id: string;
+    title: string;
+    content: ReactNode;
+};
+/** Controlled step presentation, composable with one TanStack Form across steps. */
+export declare function Wizard({ steps, current, onStepChange, disabled, nextDisabled, actions, }: {
+    steps: readonly WizardStep[];
+    current: string;
+    onStepChange: (id: string) => void;
+    disabled?: boolean;
+    /** Validation may block advancing without preventing edits to previous steps. */
+    nextDisabled?: boolean;
+    actions?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { Button } from "./button.js";
+/** Controlled step presentation, composable with one TanStack Form across steps. */
+export function Wizard({ steps, current, onStepChange, disabled = false, nextDisabled = false, actions, }) {
+    const id = useId();
+    const index = steps.findIndex((step) => step.id === current);
+    return (_jsxs("div", { className: "caps-wizard", children: [_jsx("nav", { "aria-label": "Configuration steps", children: _jsx("ol", { className: "caps-wizard-steps", children: steps.map((step, stepIndex) => (_jsx("li", { children: _jsxs(Button, { id: `${id}-${step.id}-label`, type: "button", size: "sm", variant: current === step.id ? "outline" : "ghost", "aria-current": current === step.id ? "step" : undefined, "aria-controls": `${id}-${step.id}`, disabled: disabled, onClick: () => {
+                                onStepChange(step.id);
+                            }, children: [_jsxs("span", { "aria-hidden": "true", children: [stepIndex + 1, "."] }), " ", step.title] }) }, step.id))) }) }), steps.map((step) => (_jsx("section", { id: `${id}-${step.id}`, "aria-labelledby": `${id}-${step.id}-label`, hidden: current !== step.id, children: step.content }, step.id))), _jsxs("div", { className: "caps-wizard-actions", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: disabled || index <= 0, onClick: () => {
+                            const previous = steps[index - 1];
+                            if (previous)
+                                onStepChange(previous.id);
+                        }, children: "Back" }), index < steps.length - 1 ? (_jsx(Button, { type: "button", size: "sm", disabled: disabled || nextDisabled, onClick: () => {
+                            const next = steps[index + 1];
+                            if (next)
+                                onStepChange(next.id);
+                        }, children: "Next" })) : (actions)] })] }));
+}

package/dist/enhance/cigarette-card.d.ts

@@ -0,0 +1,8 @@
+/** Show one face of a server-rendered CigaretteCard. */
+export declare function setCigaretteCardFlipped(card: HTMLElement, flipped: boolean): void;
+/**
+ * Flip server-rendered CigaretteCards on click, tap, Enter or Space. The card
+ * is a native button, so the keyboard reaches it as a click; this only
+ * toggles the pressed state. Returns a cleanup that removes the listener.
+ */
+export declare function enhanceCigaretteCards(root?: Document | HTMLElement): () => void;