@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/game-feedback.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { PixelNumber } from "./pixel-number.js";
+/**
+ * A click-through overlay for game feedback, placed over the world by the
+ * host. Marks inside it are positioned in the layer's own pixels.
+ */
+export const FeedbackLayer = forwardRef(function FeedbackLayer({ paused = false, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-feedback-layer", className), "data-paused": paused }));
+});
+function placement(style, x, y, life) {
+    return {
+        ...style,
+        "--caps-feedback-x": `${String(Math.round(x))}px`,
+        "--caps-feedback-y": `${String(Math.round(y))}px`,
+        "--caps-feedback-life": `${String(life)}ms`,
+    };
+}
+/** Gains read gold against a green world; losses always read red. */
+const AMOUNT_TONE = {
+    confirm: "success",
+    deny: "error",
+    hit: "error",
+    gain: "warning",
+};
+/**
+ * One piece of game feedback at a point: a stepped flash ring, an optional
+ * floating number and an optional note. Reduced motion keeps the ring and
+ * note still and only fades them.
+ */
+export const FeedbackMark = forwardRef(function FeedbackMark({ kind, x, y, label, amount, life = 900, className, style, ...props }, ref) {
+    if (![x, y, life].every(Number.isFinite) || life <= 0)
+        throw new RangeError("FeedbackMark needs a finite point and life");
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-feedback-mark", className), "data-kind": kind, style: placement(style, x, y, life), children: [_jsx("span", { className: "caps-feedback-ring", "aria-hidden": "true" }), amount === undefined ? null : (_jsx("span", { className: "caps-feedback-amount", children: _jsx(PixelNumber, { value: amount, signed: true, outline: true, size: "lg", tone: amount < 0 ? "error" : AMOUNT_TONE[kind] }) })), label === undefined ? null : (_jsx("span", { className: "caps-feedback-note", children: label }))] }));
+});
+/**
+ * One comic sound word at a point: punchy lettering that pops in with a
+ * little overshoot, drifts up, and fades. Reduced motion keeps it still at
+ * full strength until the host removes it.
+ */
+export const FeedbackWordMark = forwardRef(function FeedbackWordMark({ text, x, y, tone = "impact", size = "m", accent, life = 700, className, style, ...props }, ref) {
+    if (![x, y, life].every(Number.isFinite) || life <= 0)
+        throw new RangeError("FeedbackWordMark needs a finite point and life");
+    if (text.length < 1 || text.length > 12)
+        throw new RangeError("FeedbackWordMark text must be 1-12 characters");
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-feedback-word", className), "data-tone": tone, "data-size": size, "data-accent": accent, style: placement(style, x, y, life), children: [accent === "jaw" ? (_jsxs("span", { className: "caps-feedback-word-jaw", "aria-hidden": "true", children: [_jsx("span", { className: "caps-feedback-word-jaw-top" }), _jsx("span", { className: "caps-feedback-word-jaw-bottom" })] })) : null, _jsx("span", { className: "caps-feedback-word-text", "aria-hidden": "true", children: text })] }));
+});

package/dist/components/game-hud.d.ts

@@ -0,0 +1,126 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/** A region of the game layer, laid over a full-bleed world. */
+export type GameRegionName = "top-left" | "top-right" | "right" | "bottom" | "bottom-left" | "center";
+/** Positions HUD regions over the world; the world stays interactive between them. */
+export declare const GameLayer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The shell's container-based layout choice. */
+    compact?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** One named HUD region; only its children take pointer input. */
+export declare const GameRegion: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    region: GameRegionName;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** A dimmed stage for title, pause and end screens; it centres one card. */
+export declare const GameScrim: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** A floating paper plate drawn in the sprites' ink line. */
+export declare const HudPlate: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    density?: "compact" | "roomy";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Semantic bar tones; the theme supplies each colour. */
+export type HudTone = "success" | "warning" | "error" | "info";
+/** A readable number in the theme's numeric font. */
+export declare function HudNumber({ value, size, }: {
+    value: string | number;
+    size?: "sm" | "md";
+}): import("react/jsx-runtime").JSX.Element;
+/** Props accepted by HudBar. */
+export type HudBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    value: number;
+    max: number;
+    tone?: HudTone;
+    glyph?: ReactNode;
+};
+/** A segmented resource bar: health, hunger, noise, hull. */
+export declare const HudBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    value: number;
+    max: number;
+    tone?: HudTone;
+    glyph?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** A counted thing on the HUD: bandages, crowns, round shot. */
+export declare const HudChip: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    label: string;
+    value: string | number;
+    glyph?: ReactNode;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+/** The light of the day a clock shows. */
+export type HudPhase = "day" | "dusk" | "night" | "dawn";
+/** The game clock: a phase mark, a label, an optional countdown and time. */
+export declare const HudClock: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    detail?: string;
+    time?: string;
+    phase?: HudPhase;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** How a portrait's subject is doing. */
+export type PortraitMood = "ok" | "warn" | "bad";
+/** A person in the portrait strip: their mark, name and what they are doing. */
+export declare const Portrait: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    name: string;
+    status: string;
+    mood?: PortraitMood;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** What a minimap mark stands for; the theme colours each kind. */
+export type MinimapMarkKind = "self" | "ally" | "foe" | "place" | "goal";
+/** One mark on the minimap, in whole grid cells. */
+export type MinimapMark = Readonly<{
+    x: number;
+    y: number;
+    kind: MinimapMarkKind;
+    label: string;
+}>;
+/**
+ * A small chart of the world: a paper grid with named marks. Names are laid
+ * out so none overlap (layoutMinimapLabels); one with no room hides and
+ * shows on hover or focus.
+ */
+export declare const MinimapPlate: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    label: string;
+    columns: number;
+    rows: number;
+    marks: readonly MinimapMark[];
+} & import("react").RefAttributes<HTMLElement>>;
+/** What a game card is for; each kind sets its size and voice. */
+export type GameCardKind = "goal" | "letter" | "dialogue" | "end" | "screen";
+/** A paper card: goals, letters, dialogue, pause and end screens. */
+export declare const GameCard: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    kind?: GameCardKind;
+    kicker?: ReactNode;
+    title?: ReactNode;
+    footer?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+/** A ticked or open line on a goal card. */
+export declare function GoalLine({ done, children, }: {
+    done: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** A row of keycaps: a dock across the bottom or a rail down the side. */
+export declare const HudKeys: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** A shop or trade line: what, why, how much, and the act of buying it. */
+export declare const OfferRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    detail?: string;
+    price: string;
+    action: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** One ingredient or product of a recipe. */
+export type RecipePart = Readonly<{
+    label: string;
+    glyph: string;
+    have?: number | undefined;
+    need?: number | undefined;
+    quantity?: number | undefined;
+}>;
+/** A workbench recipe: inputs (short ones marked) become the output. */
+export declare const RecipeRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    label: string;
+    inputs: readonly RecipePart[];
+    output: RecipePart;
+    action: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** The quiet credit line on an end card. */
+export declare function MadeWith({ className, ...props }: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/game-hud.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun, Sunrise, Sunset } from "lucide-react";
+import { forwardRef, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { layoutMinimapLabels } from "./minimap-labels.js";
+import { Monogram } from "./monogram.js";
+function withVariables(style, variables) {
+    return { ...style, ...variables };
+}
+/** Positions HUD regions over the world; the world stays interactive between them. */
+export const GameLayer = forwardRef(function GameLayer({ className, compact = false, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-compact": compact || undefined, className: cn("caps-game-layer", className) }));
+});
+/** One named HUD region; only its children take pointer input. */
+export const GameRegion = forwardRef(function GameRegion({ region, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-game-region", className), "data-region": region }));
+});
+/** A dimmed stage for title, pause and end screens; it centres one card. */
+export const GameScrim = forwardRef(function GameScrim({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-game-scrim", className) }));
+});
+/** A floating paper plate drawn in the sprites' ink line. */
+export const HudPlate = forwardRef(function HudPlate({ density = "compact", className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-hud-plate", className), "data-density": density }));
+});
+/** A single short glyph (an emoji or a letter) shown before a label. */
+function Glyph({ glyph }) {
+    return glyph ? (_jsx("span", { className: "caps-hud-glyph", "aria-hidden": "true", children: glyph })) : null;
+}
+/** A readable number in the theme's numeric font. */
+export function HudNumber({ value, size = "sm", }) {
+    return (_jsx("span", { className: "caps-hud-text-value caps-numeric", "data-size": size, children: String(value) }));
+}
+/** A segmented resource bar: health, hunger, noise, hull. */
+export const HudBar = forwardRef(function HudBar({ label, value, max, tone = "info", glyph, className, style, ...props }, ref) {
+    const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-hud-bar", className), "data-tone": tone, "data-low": share <= 0.25 ? "" : undefined, style: withVariables(style, { "--caps-hud-share": share }), children: [_jsx(Glyph, { glyph: glyph }), _jsx("span", { className: "caps-hud-bar-label", children: label }), _jsx("span", { className: "caps-hud-bar-value", children: _jsx(HudNumber, { value: `${String(value)} / ${String(max)}` }) }), _jsx("span", { className: "caps-hud-bar-track", role: "meter", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, children: _jsx("span", { className: "caps-hud-bar-fill" }) })] }));
+});
+/** A counted thing on the HUD: bandages, crowns, round shot. */
+export const HudChip = forwardRef(function HudChip({ label, value, glyph, className, ...props }, ref) {
+    return (_jsxs("span", { ...props, ref: ref, className: cn("caps-hud-chip", className), children: [_jsx(Glyph, { glyph: glyph }), _jsx("span", { className: "caps-hud-chip-label", children: label }), " ", _jsx("span", { className: "caps-hud-chip-value", children: _jsx(HudNumber, { value: value }) })] }));
+});
+const PHASE_ICON = { day: Sun, dusk: Sunset, night: Moon, dawn: Sunrise };
+/** The game clock: a phase mark, a label, an optional countdown and time. */
+export const HudClock = forwardRef(function HudClock({ label, detail, time, phase = "day", className, ...props }, ref) {
+    const Icon = PHASE_ICON[phase];
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-hud-clock", className), "data-phase": phase, children: [_jsx("span", { className: "caps-hud-clock-mark", "aria-hidden": "true", children: _jsx(Icon, {}) }), _jsxs("span", { className: "caps-hud-clock-text", children: [_jsx("span", { className: "caps-hud-clock-label", children: label }), detail ? (_jsx("span", { className: "caps-hud-clock-detail", children: detail })) : null] }), time ? (_jsx("span", { className: "caps-hud-clock-time", children: _jsx(HudNumber, { value: time, size: "md" }) })) : null] }));
+});
+/** A person in the portrait strip: their mark, name and what they are doing. */
+export const Portrait = forwardRef(function Portrait({ name, status, mood = "ok", className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-portrait", className), "data-mood": mood, children: [_jsx(Monogram, { name: name, size: "lg", className: "caps-portrait-avatar" }), _jsxs("span", { className: "caps-portrait-text", children: [_jsx("span", { className: "caps-portrait-name", children: name }), _jsx("span", { className: "caps-portrait-status", children: status })] })] }));
+});
+/** Label metrics at the chart's name size (0.625rem, weight 800). */
+const MINIMAP_LABEL = {
+    charWidth: 6.2,
+    lineHeight: 13,
+    padding: 2,
+    dot: 10,
+    gap: 2,
+};
+/** The chart's width before it is measured (15rem). */
+const MINIMAP_WIDTH = 240;
+/**
+ * A small chart of the world: a paper grid with named marks. Names are laid
+ * out so none overlap (layoutMinimapLabels); one with no room hides and
+ * shows on hover or focus.
+ */
+export const MinimapPlate = forwardRef(function MinimapPlate({ label, columns, rows, marks, className, style, ...props }, ref) {
+    const field = useRef(null);
+    const [width, setWidth] = useState(MINIMAP_WIDTH);
+    useLayoutEffect(() => {
+        const element = field.current;
+        if (!element)
+            return;
+        const measure = () => {
+            if (element.clientWidth > 0)
+                setWidth(element.clientWidth);
+        };
+        measure();
+        // Test DOMs (jsdom) have no ResizeObserver; the first measure stands.
+        if (!("ResizeObserver" in globalThis))
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const sides = layoutMinimapLabels(marks.map((mark) => ({
+        x: (mark.x + 0.5) / columns,
+        y: (mark.y + 0.5) / rows,
+        named: mark.kind === "place" || mark.kind === "goal",
+        solid: mark.kind !== "foe" && mark.kind !== "ally",
+        goal: mark.kind === "goal",
+        label: mark.label,
+    })), { ...MINIMAP_LABEL, width, height: (width * rows) / columns });
+    return (_jsxs("figure", { ...props, ref: ref, className: cn("caps-minimap", className), style: withVariables(style, {
+            "--caps-minimap-columns": columns,
+            "--caps-minimap-rows": rows,
+        }), children: [_jsx("div", { ref: field, className: "caps-minimap-field", role: "img", "aria-label": `${label}: ${marks.map((mark) => mark.label).join(", ")}`, children: marks.map((mark, index) => (_jsx("span", { className: "caps-minimap-mark", "data-kind": mark.kind, "data-label": mark.kind === "place" || mark.kind === "goal"
+                        ? sides[index]
+                        : undefined, title: mark.label, style: withVariables(undefined, {
+                        "--caps-minimap-x": (mark.x + 0.5) / columns,
+                        "--caps-minimap-y": (mark.y + 0.5) / rows,
+                    }), children: mark.kind === "place" || mark.kind === "goal" ? (_jsx("span", { className: "caps-minimap-name", "aria-hidden": "true", children: mark.label })) : null }, `${mark.kind}:${mark.label}`))) }), _jsx("figcaption", { className: "caps-minimap-caption", children: label })] }));
+});
+/** A paper card: goals, letters, dialogue, pause and end screens. */
+export const GameCard = forwardRef(function GameCard({ kind = "goal", kicker, title, footer, className, children, ...props }, ref) {
+    return (_jsxs("article", { ...props, ref: ref, className: cn("caps-hud-card", className), "data-kind": kind, children: [kicker || title ? (_jsxs("header", { className: "caps-hud-card-header", children: [kicker ? (_jsx("span", { className: "caps-hud-card-kicker", children: kicker })) : null, title ? _jsx("h2", { className: "caps-hud-card-title", children: title }) : null] })) : null, _jsx("div", { className: "caps-hud-card-body", children: children }), footer ? (_jsx("footer", { className: "caps-hud-card-footer", children: footer })) : null] }));
+});
+/** A ticked or open line on a goal card. */
+export function GoalLine({ done, children, }) {
+    return (_jsxs("p", { className: "caps-goal-line", "data-done": done, children: [_jsx("span", { className: "caps-goal-box", "aria-hidden": "true" }), _jsx("span", { className: "caps-goal-text", children: children }), _jsx("span", { className: "sr-only", children: done ? " (done)" : " (to do)" })] }));
+}
+/** A row of keycaps: a dock across the bottom or a rail down the side. */
+export const HudKeys = forwardRef(function HudKeys({ orientation = "horizontal", className, ...props }, ref) {
+    return (_jsx("div", { role: "toolbar", "aria-orientation": orientation, ...props, ref: ref, className: cn("caps-hud-keys", className), "data-orientation": orientation }));
+});
+/** A shop or trade line: what, why, how much, and the act of buying it. */
+export const OfferRow = forwardRef(function OfferRow({ label, detail, price, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-offer-row", className), children: [_jsxs("span", { className: "caps-offer-text", children: [_jsx("span", { className: "caps-offer-label", children: label }), detail ? _jsx("span", { className: "caps-offer-detail", children: detail }) : null] }), _jsx("span", { className: "caps-offer-price", children: price }), _jsx("span", { className: "caps-offer-action", children: action })] }));
+});
+function RecipeSlot({ part }) {
+    const short = part.need !== undefined && part.have !== undefined && part.have < part.need;
+    return (_jsxs("span", { className: "caps-recipe-slot", "data-short": short ? "" : undefined, title: part.label, children: [_jsx("span", { className: "caps-recipe-glyph", "aria-hidden": "true", children: part.glyph }), _jsx("span", { className: "caps-recipe-count", children: part.need !== undefined
+                    ? `${String(part.have ?? 0)}/${String(part.need)}`
+                    : `×${String(part.quantity ?? 1)}` }), _jsx("span", { className: "sr-only", children: part.label })] }));
+}
+/** A workbench recipe: inputs (short ones marked) become the output. */
+export const RecipeRow = forwardRef(function RecipeRow({ label, inputs, output, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("caps-recipe-row", className), children: [_jsx("span", { className: "caps-recipe-label", children: label }), _jsxs("span", { className: "caps-recipe-parts", children: [inputs.map((part) => (_jsx(RecipeSlot, { part: part }, part.label))), _jsx("span", { className: "caps-recipe-arrow", "aria-hidden": "true", children: "\u2192" }), _jsx(RecipeSlot, { part: output })] }), _jsx("span", { className: "caps-recipe-action", children: action })] }));
+});
+/** The quiet credit line on an end card. */
+export function MadeWith({ className, ...props }) {
+    return (_jsxs("a", { ...props, className: cn("caps-made-with", className), children: ["Made with ", _jsx("strong", { children: "Fungi" }), " \u00B7 make your own"] }));
+}

package/dist/components/generation-frame.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Where one generated piece of media is in its life. */
+export type GenerationStatus = "queued" | "generating" | "refining" | "done" | "failed";
+/** Props accepted by GenerationFrame. */
+export type GenerationFrameProps = {
+    status: GenerationStatus;
+    /** The finished media (or, while refining, a rough preview of it). */
+    children?: ReactNode;
+    /** Width over height. Omit when the parent already sizes the frame. */
+    aspectRatio?: number;
+    /** What is happening, for people using a screen reader. */
+    label?: ReactNode;
+    /** The working indicator; Caps' bloom loader by default. */
+    indicator?: ReactNode;
+    /** Shown over the dimmed frame when generation fails. */
+    failure?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * One fixed frame for a generation, from queued to done: the frame keeps
+ * its size the whole time, so nothing around it moves. The finished media
+ * develops inside it (it sharpens out of a soft blur), and a failure dims the
+ * frame behind its message. Reduced motion keeps short fades only.
+ */
+export declare const GenerationFrame: import("react").ForwardRefExoticComponent<{
+    status: GenerationStatus;
+    /** The finished media (or, while refining, a rough preview of it). */
+    children?: ReactNode;
+    /** Width over height. Omit when the parent already sizes the frame. */
+    aspectRatio?: number;
+    /** What is happening, for people using a screen reader. */
+    label?: ReactNode;
+    /** The working indicator; Caps' bloom loader by default. */
+    indicator?: ReactNode;
+    /** Shown over the dimmed frame when generation fails. */
+    failure?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/generation-frame.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { canAnimate, motionEasing, readMotion } from "../lib/motion.js";
+import { Loader } from "./loader.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+const defaultLabels = {
+    queued: "Waiting to start",
+    generating: "Generating",
+    refining: "Refining",
+    done: undefined,
+    failed: undefined,
+};
+/**
+ * One fixed frame for a generation, from queued to done: the frame keeps
+ * its size the whole time, so nothing around it moves. The finished media
+ * develops inside it (it sharpens out of a soft blur), and a failure dims the
+ * frame behind its message. Reduced motion keeps short fades only.
+ */
+export const GenerationFrame = forwardRef(function GenerationFrame({ status, children, aspectRatio, label, indicator, failure, className, style, ...props }, ref) {
+    const node = useRef(null);
+    useImperativeHandle(ref, () => node.current);
+    const previous = useRef(status);
+    // The working layer stays under the picture until the picture has
+    // developed over it, so the loader never blinks out first.
+    const [developing, setDeveloping] = useState(false);
+    const [shownStatus, setShownStatus] = useState(status);
+    if (shownStatus !== status) {
+        setShownStatus(status);
+        setDeveloping(status === "done");
+    }
+    useLayoutEffect(() => {
+        const element = node.current;
+        const before = previous.current;
+        previous.current = status;
+        if (!element || before === status)
+            return;
+        if (!canAnimate(element)) {
+            setDeveloping(false);
+            return;
+        }
+        const motion = readMotion(element);
+        const easing = motionEasing(motion, motion.ease);
+        const animations = [];
+        const media = element.querySelector(':scope > [data-layer="media"]');
+        const placeholder = element.querySelector(':scope > [data-layer="placeholder"]');
+        const note = element.querySelector(':scope > [data-layer="failure"]');
+        if (status === "done" && media) {
+            // The picture develops: it sharpens and settles out of a soft blur.
+            const develop = media.animate(motion.reduced
+                ? [{ opacity: 0 }, { opacity: 1 }]
+                : [
+                    { opacity: 0, filter: "blur(10px)", transform: "scale(1.03)" },
+                    { opacity: 1, filter: "blur(0px)", transform: "none" },
+                ], {
+                duration: motion.reduced ? motion.fast : motion.slow * 2,
+                easing,
+                fill: "backwards",
+            });
+            develop.addEventListener("finish", () => {
+                setDeveloping(false);
+            });
+            animations.push(develop);
+            if (placeholder)
+                animations.push(placeholder.animate([{ opacity: 1 }, { opacity: 0 }], {
+                    duration: motion.reduced ? motion.fast : motion.slow,
+                    easing,
+                    fill: "forwards",
+                }));
+        }
+        if (status === "failed" && note)
+            animations.push(note.animate([
+                {
+                    opacity: 0,
+                    transform: `translateY(${String(motion.distance)}px)`,
+                },
+                { opacity: 1, transform: "none" },
+            ], { duration: motion.normal, easing }));
+        if (before === "failed" && placeholder)
+            animations.push(placeholder.animate([{ opacity: 0.4 }, { opacity: 1 }], {
+                duration: motion.normal,
+                easing,
+            }));
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [status]);
+    const working = status === "queued" || status === "generating" || status === "refining";
+    const spoken = label ?? defaultLabels[status];
+    const showsMedia = status === "done" || status === "refining";
+    return (_jsxs("div", { ...props, ref: node, className: cn("caps-generation-frame", className), "data-status": status, "data-aspect": aspectRatio === undefined ? undefined : "", "aria-busy": working, style: aspectRatio === undefined ? style : { aspectRatio, ...style }, children: [status === "done" && !developing ? null : (_jsxs("div", { className: cn("caps-generation-placeholder", status === "queued" && "skeleton"), "data-layer": "placeholder", role: status === "done" ? undefined : "status", "aria-hidden": status === "done" ? true : undefined, children: [status === "generating" ||
+                        status === "refining" ||
+                        status === "done"
+                        ? (indicator ?? _jsx(Loader, { decorative: true, size: "lg", variant: "bloom" }))
+                        : null, spoken === undefined ? null : (_jsx(VisuallyHidden, { children: spoken }))] })), showsMedia ? (_jsx("div", { className: "caps-generation-media", "data-layer": "media", children: children })) : null, status === "failed" && failure !== undefined ? (_jsx("div", { className: "caps-generation-failure", "data-layer": "failure", role: "alert", children: failure })) : null] }));
+});

package/dist/components/gooey.d.ts

@@ -0,0 +1,32 @@
+/** @internal The eight-unit bead's material, positioned with an SVG transform. */
+export declare const GooeySurfaceDefinition: import("react").ForwardRefExoticComponent<{
+    id: string;
+    transform: string;
+} & import("react").RefAttributes<SVGRadialGradientElement>>;
+/** @internal Cast one themed shadow from the finished silhouette. */
+export declare function GooeyShadowDefinition({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** @internal Opposing inner shadows shared by recessed control wells. */
+export declare function GooeyInsetDefinition({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** @internal Props shared by Caps' private gooey filter definitions. */
+export type GooeyFilterDefinitionProps = {
+    values?: GooeyFilterValues;
+    id: string;
+};
+/** @internal Numeric values for one SVG gooey filter profile. */
+export type GooeyFilterValues = Readonly<{
+    alphaIntercept: number;
+    alphaSlope: number;
+    blurStdDeviation: number;
+}>;
+/** @internal Filter calibrated for Status's eight-unit bead. */
+export declare const STATUS_GOOEY_FILTER: Readonly<{
+    alphaIntercept: -8;
+    alphaSlope: 18;
+    blurStdDeviation: 2;
+}>;
+/** @internal The single SVG filter definition shared by Caps' gooey family. */
+export declare function GooeyFilterDefinition({ id, values, }: GooeyFilterDefinitionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/gooey.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STIPE_GOOEY_FILTER } from "@fungi.computer/stipe";
+import { forwardRef } from "react";
+/** @internal The eight-unit bead's material, positioned with an SVG transform. */
+export const GooeySurfaceDefinition = forwardRef(function GooeySurfaceDefinition({ id, transform }, ref) {
+    return (_jsxs("radialGradient", { ref: ref, id: id, gradientUnits: "userSpaceOnUse", cx: "-1.2", cy: "-1.6", r: "5.6", gradientTransform: transform, children: [_jsx("stop", { offset: "0", stopColor: "color-mix(in oklab, var(--color-white) calc(var(--depth) * 50%), currentColor)" }), _jsx("stop", { offset: "1", stopColor: "currentColor" })] }));
+});
+/** @internal Cast one themed shadow from the finished silhouette. */
+export function GooeyShadowDefinition({ id }) {
+    return (_jsx("filter", { id: id, x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feDropShadow", { dx: "0", dy: "1.5", stdDeviation: "1", floodColor: "currentColor", style: { floodOpacity: "calc(var(--depth) * 0.6)" } }) }));
+}
+/** @internal Opposing inner shadows shared by recessed control wells. */
+export function GooeyInsetDefinition({ id }) {
+    return (_jsxs("filter", { id: id, x: "-10%", y: "-10%", width: "120%", height: "120%", colorInterpolationFilters: "sRGB", children: [_jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "0.3", result: "soft-edge" }), _jsx("feOffset", { in: "soft-edge", dx: "0.25", dy: "0.45", result: "lower-edge" }), _jsx("feComposite", { in: "SourceAlpha", in2: "lower-edge", operator: "out", result: "inner-shadow" }), _jsx("feFlood", { floodColor: "var(--color-black)", floodOpacity: "calc(var(--depth) * 0.28)" }), _jsx("feComposite", { in2: "inner-shadow", operator: "in", result: "shade" }), _jsx("feOffset", { in: "soft-edge", dx: "-0.2", dy: "-0.35", result: "upper-edge" }), _jsx("feComposite", { in: "SourceAlpha", in2: "upper-edge", operator: "out", result: "inner-highlight" }), _jsx("feFlood", { floodColor: "var(--color-white)", floodOpacity: "calc(var(--depth) * 0.7)" }), _jsx("feComposite", { in2: "inner-highlight", operator: "in", result: "highlight" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" }), _jsx("feMergeNode", { in: "highlight" })] })] }));
+}
+/** @internal Filter calibrated for Status's eight-unit bead. */
+export const STATUS_GOOEY_FILTER = Object.freeze({
+    alphaIntercept: -8,
+    alphaSlope: 18,
+    blurStdDeviation: 2,
+});
+/** @internal The single SVG filter definition shared by Caps' gooey family. */
+export function GooeyFilterDefinition({ id, values = STIPE_GOOEY_FILTER, }) {
+    return (_jsxs("filter", { id: id, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: values.blurStdDeviation, result: "blur" }), _jsx("feColorMatrix", { in: "blur", values: `1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${String(values.alphaSlope)} ${String(values.alphaIntercept)}`, result: "gooey" }), _jsx("feComposite", { in: "SourceGraphic", in2: "gooey", operator: "atop" })] }));
+}

package/dist/components/hold-button.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+/** Props accepted by HoldButton. */
+export type HoldButtonProps = {
+    children: ReactNode;
+    /** Runs once the button has been held for `holdMs`. */
+    onConfirm: () => void;
+    /** How long to hold, in milliseconds: a deliberate pause, not motion. */
+    holdMs?: number;
+    /** Spoken description of the gesture. */
+    holdHint?: string;
+} & Omit<ButtonProps, "children" | "onClick">;
+/**
+ * For an action nothing can undo: press and hold (pointer, Space or Enter)
+ * while a fill rises; let go early and it drops back; hold to the top and the
+ * action runs. Under reduced motion the fill rises in three steps.
+ */
+export declare const HoldButton: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    /** Runs once the button has been held for `holdMs`. */
+    onConfirm: () => void;
+    /** How long to hold, in milliseconds: a deliberate pause, not motion. */
+    holdMs?: number;
+    /** Spoken description of the gesture. */
+    holdHint?: string;
+} & Omit<ButtonProps, "children" | "onClick"> & import("react").RefAttributes<HTMLButtonElement>>;