@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/scroll-to-bottom-blob.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownToLine } from "lucide-react";
+import { memo, useEffect, useId, useRef } from "react";
+import { useMotion } from "../lib/motion.js";
+import { observeMotionVisibility } from "./motion-visibility.js";
+import { createDropState, distanceToBottom, stepDrop, } from "./scroll-to-bottom-blob-state.js";
+/** A continuously tugged water drop, with its own visibility and focus lifecycle. */
+export const ScrollToBottomBlob = memo(function ScrollToBottomBlob({ direction = "forward", scrollerRef, onJump, unread = 0, focusAfterJump, }) {
+    const frame = useRef(null);
+    const visual = useRef(null);
+    const ball = useRef(null);
+    const anchor = useRef(null);
+    const bead = useRef(null);
+    const button = useRef(null);
+    const icon = useRef(null);
+    const state = useRef(createDropState());
+    const wake = useRef(() => undefined);
+    const jump = useRef(false);
+    const count = useRef(unread);
+    const motion = useMotion(frame);
+    const id = `caps-drop-${useId().replaceAll(":", "")}`;
+    useEffect(() => {
+        count.current = unread;
+        wake.current();
+    }, [unread]);
+    useEffect(() => {
+        const scroller = scrollerRef.current;
+        const root = visual.current;
+        const body = ball.current;
+        const fixed = anchor.current;
+        const incoming = bead.current;
+        const control = button.current;
+        const arrow = icon.current;
+        const container = frame.current;
+        if (!scroller ||
+            !root ||
+            !body ||
+            !fixed ||
+            !incoming ||
+            !control ||
+            !arrow ||
+            !container)
+            return;
+        let raf = 0;
+        let previousTime = 0;
+        let lastTop = scroller.scrollTop;
+        let visible = true;
+        const draw = () => {
+            const s = state.current;
+            root.dataset.motionState = s.phase;
+            root.style.display = s.phase === "hidden" ? "none" : "";
+            control.tabIndex = s.phase === "hidden" || s.phase === "merging" ? -1 : 0;
+            control.disabled = s.phase === "merging";
+            control.setAttribute("aria-label", `Jump to bottom${s.unread ? `, ${String(s.unread)} new message${s.unread === 1 ? "" : "s"}` : ""}`);
+            root.style.opacity = motion.reduced ? String(s.opacity) : "";
+            fixed.style.display =
+                motion.reduced || s.phase === "resting" || s.phase === "hidden"
+                    ? "none"
+                    : "";
+            incoming.style.display = motion.reduced || s.bead === 0 ? "none" : "";
+            if (motion.reduced) {
+                body.style.transform = "";
+                body.style.transformOrigin = "";
+                body.style.width = s.unread
+                    ? `${String(control.clientWidth * s.volume)}px`
+                    : "";
+                body.style.height = s.unread
+                    ? `${String(control.clientWidth * s.volume)}px`
+                    : "";
+                arrow.style.transform = "";
+                arrow.style.opacity = "";
+                fixed.style.transform = "";
+                incoming.style.transform = "";
+                return;
+            }
+            body.style.width = "";
+            body.style.height = "";
+            if (s.phase === "resting" && s.unread === 0) {
+                body.style.transform = "";
+                body.style.transformOrigin = "";
+                arrow.style.transform = "";
+                arrow.style.opacity = "";
+                fixed.style.transform = "";
+                incoming.style.transform = "";
+                return;
+            }
+            const tug = Math.min(1, (Math.abs(s.y) / 9) * 0.7 + (Math.abs(s.vy) / 120) * 0.3);
+            const stretch = 1 + motion.stretch * tug;
+            const volume = Math.max(0.001, s.volume);
+            const well = Math.max(0, 1 - volume);
+            body.style.transformOrigin = s.y >= 0 ? "50% 0%" : "50% 100%";
+            body.style.transform = `translateY(${String(s.y)}px) scale(${String((volume / Math.sqrt(stretch)) * (1 - 0.12 * well))}, ${String(volume * stretch * (1 + 0.1 * well))})`;
+            fixed.style.transform = `scale(${String(Math.min(1, Math.abs(s.y) / 3) * volume * 0.55)})`;
+            incoming.style.transform = `translateY(${String(-34 * s.bead * s.bead)}px) scale(${String(0.62 * Math.min(1, s.bead * 3))})`;
+            arrow.style.transform = `translateY(${String(s.y * 0.8)}px)`;
+            arrow.style.opacity = String(s.opacity);
+        };
+        const tick = (now) => {
+            raf = 0;
+            const elapsed = previousTime ? now - previousTime : 16;
+            previousTime = now;
+            const top = scroller.scrollTop;
+            state.current = stepDrop(state.current, {
+                distance: distanceToBottom(scroller, direction),
+                delta: top - lastTop,
+                unread: count.current,
+                jump: jump.current,
+            }, elapsed, motion);
+            lastTop = top;
+            jump.current = false;
+            draw();
+            const s = state.current;
+            if (s.phase !== "hidden" &&
+                (!s.shown || s.phase !== "resting" || s.opacity < 1))
+                schedule();
+        };
+        function schedule() {
+            if (!visible || raf)
+                return;
+            raf = requestAnimationFrame(tick);
+        }
+        const onScroll = () => {
+            if (!raf)
+                previousTime = 0;
+            schedule();
+        };
+        wake.current = onScroll;
+        const stopObserving = observeMotionVisibility(container, (next) => {
+            visible = next;
+            if (!next) {
+                cancelAnimationFrame(raf);
+                raf = 0;
+            }
+            else {
+                previousTime = 0;
+                lastTop = scroller.scrollTop;
+                schedule();
+            }
+        });
+        const browser = globalThis;
+        const resize = browser.ResizeObserver
+            ? new browser.ResizeObserver(onScroll)
+            : undefined;
+        resize?.observe(scroller);
+        if (scroller.firstElementChild)
+            resize?.observe(scroller.firstElementChild);
+        scroller.addEventListener("scroll", onScroll, { passive: true });
+        schedule();
+        return () => {
+            wake.current = () => undefined;
+            cancelAnimationFrame(raf);
+            scroller.removeEventListener("scroll", onScroll);
+            resize?.disconnect();
+            stopObserving();
+        };
+    }, [direction, scrollerRef, motion]);
+    const activate = () => {
+        if (state.current.phase === "hidden" || state.current.phase === "merging")
+            return;
+        jump.current = true;
+        count.current = 0;
+        wake.current();
+        if (document.activeElement === button.current) {
+            const target = focusAfterJump?.current ?? scrollerRef.current;
+            if (target) {
+                if (target === scrollerRef.current && !target.hasAttribute("tabindex"))
+                    target.tabIndex = -1;
+                target.focus({ preventScroll: true });
+            }
+        }
+        onJump();
+    };
+    return (_jsx("div", { ref: frame, className: "absolute bottom-4 right-4 z-1 h-8 w-8 md:h-6 md:w-6", children: _jsxs("div", { ref: visual, className: "relative h-full w-full", "data-motion-state": "hidden", style: { display: "none" }, children: [_jsxs("div", { className: "absolute -inset-1.5", style: { filter: `url(#${id})`, willChange: "filter" }, children: [_jsx("svg", { "aria-hidden": "true", className: "absolute h-0 w-0", children: _jsx("defs", { children: _jsxs("filter", { id: id, x: "-60%", y: "-60%", width: "220%", height: "220%", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", result: "blur", stdDeviation: "4" }), _jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" })] }) }) }), _jsx("div", { className: "absolute inset-0 m-auto h-8 w-8 md:h-6 md:w-6", ref: ball, "data-drop-body": "", children: _jsx("div", { className: "absolute inset-0 rounded-full border border-base-300 bg-base-200 shadow-sm" }) }), _jsx("div", { ref: anchor, className: "absolute inset-0 m-auto h-8 w-8 rounded-full bg-base-200 md:h-6 md:w-6", style: { display: "none" } }), _jsx("div", { ref: bead, className: "absolute inset-0 m-auto h-8 w-8 rounded-full bg-base-200 md:h-6 md:w-6", style: { display: "none" }, "data-drop-incoming": "" })] }), _jsx("button", { ref: button, "aria-label": "Jump to bottom", className: "absolute inset-0 z-1 grid place-items-center rounded-full caps-focus-color", "data-testid": "jump-to-bottom", onClick: activate, title: "Jump to bottom", type: "button", tabIndex: -1, children: _jsx(ArrowDownToLine, { ref: icon, className: "text-base-content", size: 13 }) })] }) }));
+});

package/dist/components/select.d.ts

@@ -0,0 +1,9 @@
+import { type SelectHTMLAttributes } from "react";
+/** Props accepted by Select. */
+export type SelectProps = {
+    invalid?: boolean;
+} & SelectHTMLAttributes<HTMLSelectElement>;
+/** A styled native select that preserves caller-owned value and event behavior. */
+export declare const Select: import("react").ForwardRefExoticComponent<{
+    invalid?: boolean;
+} & SelectHTMLAttributes<HTMLSelectElement> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/select.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+/** A styled native select that preserves caller-owned value and event behavior. */
+export const Select = forwardRef(function Select({ className, invalid, ...props }, ref) {
+    return (_jsxs("span", { className: "caps-select-shell", children: [_jsx("select", { ...props, "aria-invalid": invalid
+                    ? true
+                    : props["aria-invalid"] === false
+                        ? undefined
+                        : props["aria-invalid"], className: cn("select select-bordered caps-select w-full", invalid && "select-error", className), ref: ref }), !props.multiple && (!props.size || props.size <= 1) ? (_jsx(ChevronDown, { className: "caps-select-chevron", "aria-hidden": "true" })) : null] }));
+});

package/dist/components/selectable.d.ts

@@ -0,0 +1,13 @@
+export type SelectableCollectionOptions<T> = {
+    getKey: (item: T) => string;
+    isDisabled?: (item: T) => boolean;
+    items: readonly T[];
+};
+export declare function useSelectableCollection<T>({ getKey, isDisabled, items, }: SelectableCollectionOptions<T>): {
+    activeIndex: number;
+    activeItem: T | undefined;
+    activeKey: string | null;
+    enabledItems: T[];
+    move: (direction: 1 | -1, edge?: "start" | "end") => void;
+    setActiveKey: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};

package/dist/components/selectable.js

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+export function useSelectableCollection({ getKey, isDisabled = () => false, items, }) {
+    const enabledItems = useMemo(() => {
+        const keys = items.map(getKey);
+        if (keys.some((key) => !key))
+            throw new Error("Selectable items require non-empty keys");
+        if (new Set(keys).size !== keys.length)
+            throw new Error("Selectable items require unique keys");
+        return items.filter((item) => !isDisabled(item));
+    }, [getKey, isDisabled, items]);
+    const [activeKey, setActiveKey] = useState(null);
+    useEffect(() => {
+        if (activeKey !== null &&
+            !enabledItems.some((item) => getKey(item) === activeKey))
+            setActiveKey(null);
+    }, [activeKey, enabledItems, getKey]);
+    const activeItem = enabledItems.find((item) => getKey(item) === activeKey);
+    const activeIndex = activeItem
+        ? enabledItems.findIndex((item) => getKey(item) === activeKey)
+        : -1;
+    const move = (direction, edge) => {
+        if (enabledItems.length === 0)
+            return;
+        const nextIndex = edge
+            ? edge === "start"
+                ? 0
+                : enabledItems.length - 1
+            : activeIndex < 0
+                ? direction > 0
+                    ? 0
+                    : enabledItems.length - 1
+                : (activeIndex + direction + enabledItems.length) % enabledItems.length;
+        const next = enabledItems[nextIndex];
+        if (next)
+            setActiveKey(getKey(next));
+    };
+    return {
+        activeIndex,
+        activeItem,
+        activeKey,
+        enabledItems,
+        move,
+        setActiveKey,
+    };
+}

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

@@ -0,0 +1,33 @@
+import { type ButtonProps } from "./button.js";
+/** Where a composer's send action is: nothing to send, ready, or working. */
+export type SendActionState = "empty" | "ready" | "busy";
+/** Props accepted by SendAction. */
+export type SendActionProps = {
+    state: SendActionState;
+    /** The accessible name while it sends, such as "Generate image". */
+    "aria-label": string;
+    /** Offered while busy: the arrow becomes a stop square that calls this. */
+    onStop?: (() => void) | undefined;
+    /** The accessible name of the stop action. */
+    stopLabel?: string;
+    /** Glyph size in pixels. */
+    iconSize?: number;
+} & Omit<ButtonProps, "children" | "size" | "loading" | "aria-label">;
+/**
+ * A composer's send key. Empty, it rests disabled; given something to send it
+ * wakes with a small pop; sending, its arrow launches away and a working
+ * indicator (or, with `onStop`, a stop square) takes its place; when the work
+ * ends the arrow drops back in. All timing comes from the theme's motion
+ * tokens, and reduced motion keeps short fades only.
+ */
+export declare const SendAction: import("react").ForwardRefExoticComponent<{
+    state: SendActionState;
+    /** The accessible name while it sends, such as "Generate image". */
+    "aria-label": string;
+    /** Offered while busy: the arrow becomes a stop square that calls this. */
+    onStop?: (() => void) | undefined;
+    /** The accessible name of the stop action. */
+    stopLabel?: string;
+    /** Glyph size in pixels. */
+    iconSize?: number;
+} & Omit<ButtonProps, "aria-label" | "children" | "size" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/send-action.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, Square } from "lucide-react";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, } from "react";
+import { canAnimate, motionEasing, readMotion, } from "../lib/motion.js";
+import { Button } from "./button.js";
+import { Loader } from "./loader.js";
+function lift(face, motion) {
+    // The arrow launches upward and away: the prompt has gone.
+    return face.animate(motion.reduced
+        ? [{ opacity: 1 }, { opacity: 0 }]
+        : [
+            { opacity: 1, transform: "none" },
+            { opacity: 0, transform: "translateY(-120%)" },
+        ], {
+        duration: motion.reduced ? motion.fast : motion.normal,
+        easing: motionEasing(motion, motion.easeExit),
+        fill: "backwards",
+    });
+}
+function land(face, motion) {
+    // The arrow drops back in from below and settles, by the theme's bounce.
+    const overshoot = -12 * Math.min(1.5, motion.bounce / 0.3);
+    return face.animate(motion.reduced
+        ? [{ opacity: 0 }, { opacity: 1 }]
+        : [
+            { opacity: 0, transform: "translateY(70%)" },
+            {
+                opacity: 1,
+                transform: `translateY(${String(overshoot)}%)`,
+                offset: 0.6,
+            },
+            { opacity: 1, transform: "none" },
+        ], {
+        duration: motion.reduced ? motion.fast : motion.springDuration,
+        easing: motionEasing(motion, motion.ease),
+        fill: "backwards",
+    });
+}
+function fade(face, motion, to) {
+    return face.animate([{ opacity: 1 - to }, { opacity: to }], {
+        duration: motion.reduced ? motion.fast : motion.normal,
+        delay: to === 1 && !motion.reduced ? motion.fast / 2 : 0,
+        easing: motionEasing(motion, motion.ease),
+        fill: "backwards",
+    });
+}
+function charge(button, motion) {
+    // Once there is something to send, the key wakes with a small pop.
+    const pop = 1 + 0.05 * Math.min(1.5, 0.4 + motion.bounce / 0.3);
+    return button.animate([
+        { transform: "scale(1)" },
+        { transform: `scale(${String(pop)})`, offset: 0.4 },
+        { transform: "scale(1)" },
+    ], {
+        duration: motion.springDuration,
+        easing: motionEasing(motion, "ease-out"),
+    });
+}
+/**
+ * A composer's send key. Empty, it rests disabled; given something to send it
+ * wakes with a small pop; sending, its arrow launches away and a working
+ * indicator (or, with `onStop`, a stop square) takes its place; when the work
+ * ends the arrow drops back in. All timing comes from the theme's motion
+ * tokens, and reduced motion keeps short fades only.
+ */
+export const SendAction = forwardRef(function SendAction({ state, onStop, stopLabel = "Stop", iconSize = 20, onClick, disabled, "aria-label": label, ...props }, ref) {
+    const node = useRef(null);
+    useImperativeHandle(ref, () => node.current);
+    const previous = useRef(state);
+    useLayoutEffect(() => {
+        const button = node.current;
+        const before = previous.current;
+        previous.current = state;
+        if (!button || before === state || !canAnimate(button))
+            return;
+        const arrow = button.querySelector('[data-glyph="arrow"]');
+        const work = button.querySelector('[data-glyph="busy"]');
+        if (!arrow || !work)
+            return;
+        const motion = readMotion(button);
+        const animations = [];
+        if (state === "busy")
+            animations.push(lift(arrow, motion), fade(work, motion, 1));
+        else if (before === "busy")
+            animations.push(fade(work, motion, 0), land(arrow, motion));
+        if (before === "empty" && state === "ready" && !motion.reduced)
+            animations.push(charge(button, motion));
+        return () => {
+            for (const animation of animations)
+                animation.cancel();
+        };
+    }, [state]);
+    const busy = state === "busy";
+    const stoppable = busy && onStop !== undefined;
+    return (_jsx(Button, { ...props, ref: node, "aria-busy": busy ? true : undefined, "aria-label": stoppable ? stopLabel : label, "data-send-state": state, disabled: disabled === true || state === "empty" || (busy && !stoppable), onClick: stoppable ? onStop : onClick, size: "icon", children: _jsxs("span", { className: "caps-send-glyph", "data-state": state, children: [_jsx("span", { "data-glyph": "arrow", children: _jsx(ArrowUp, { "aria-hidden": "true", size: iconSize }) }), _jsx("span", { "data-glyph": "busy", children: onStop === undefined ? (_jsx(Loader, { decorative: true, size: "sm" })) : (_jsx(Square, { "aria-hidden": "true", fill: "currentColor", size: Math.round(iconSize * 0.7) })) })] }) }));
+});

package/dist/components/separator.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+/** Props accepted by Separator. */
+export type SeparatorProps = {
+    decorative?: boolean;
+    orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement>;
+/** A visual separator between regions. */
+export declare const Separator: import("react").ForwardRefExoticComponent<{
+    decorative?: boolean;
+    orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A visual separator between regions. */
+export const Separator = forwardRef(function Separator({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+    return (_jsx("div", { ...props, "aria-orientation": decorative ? undefined : orientation, className: cn("shrink-0 bg-base-300", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className), role: decorative ? "none" : "separator", ref: ref }));
+});

package/dist/components/skeleton.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from "react";
+/** Props accepted by Skeleton. */
+export type SkeletonProps = HTMLAttributes<HTMLSpanElement>;
+/** A loading placeholder that preserves caller-provided native span props. */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/skeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A loading placeholder that preserves caller-provided native span props. */
+export const Skeleton = forwardRef(function Skeleton({ className, ...props }, ref) {
+    return (_jsx("span", { ...props, "aria-hidden": props["aria-hidden"] ?? true, className: cn("skeleton", className), ref: ref }));
+});

package/dist/components/slider.d.ts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes } from "react";
+/** Supported SliderTone values. */
+export type SliderTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error";
+/** Supported SliderSize values. */
+export type SliderSize = "xs" | "sm" | "default" | "lg";
+/** Props accepted by Slider. */
+export type SliderProps = {
+    size?: SliderSize;
+    tone?: SliderTone;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
+/**
+ * A native range input with product-neutral tone and size variants. On a
+ * Screen it reads the screen context and draws as a segmented level.
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<{
+    size?: SliderSize;
+    tone?: SliderTone;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/slider.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn, cva } from "../lib/cn.js";
+const sliderVariants = cva("range caps-slider", {
+    variants: {
+        tone: {
+            neutral: "range-neutral",
+            primary: "range-primary",
+            secondary: "range-secondary",
+            accent: "range-accent",
+            success: "range-success",
+            info: "range-info",
+            warning: "range-warning",
+            error: "range-error",
+        },
+        size: {
+            xs: "range-xs",
+            sm: "range-sm",
+            default: "range-md",
+            lg: "range-lg",
+        },
+    },
+    defaultVariants: { tone: "neutral", size: "default" },
+});
+/**
+ * A native range input with product-neutral tone and size variants. On a
+ * Screen it reads the screen context and draws as a segmented level.
+ */
+export const Slider = forwardRef(function Slider({ className, size, tone, ...props }, ref) {
+    return (_jsx("input", { ...props, className: cn(sliderVariants({ size, tone }), className), ref: ref, type: "range" }));
+});

package/dist/components/stat.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Stat. */
+export type StatProps = {
+    label: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
+    /** Reduce internal padding when a statistic sits inside a compact card. */
+    density?: "regular" | "compact";
+} & Omit<HTMLAttributes<HTMLDListElement>, "children">;
+/** A compact statistic presentation for caller-provided values. */
+export declare const Stat: import("react").ForwardRefExoticComponent<{
+    label: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
+    /** Reduce internal padding when a statistic sits inside a compact card. */
+    density?: "regular" | "compact";
+} & Omit<HTMLAttributes<HTMLDListElement>, "children"> & import("react").RefAttributes<HTMLDListElement>>;

package/dist/components/stat.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** A compact statistic presentation for caller-provided values. */
+export const Stat = forwardRef(function Stat({ className, density = "regular", label, value, description, ...props }, ref) {
+    return (_jsx("dl", { ...props, className: cn("stats", density === "compact" && "caps-stat-compact", className), ref: ref, children: _jsxs("div", { className: "stat", children: [_jsx("dt", { className: "stat-title text-base-content", children: label }), _jsx("dd", { className: "stat-value caps-numeric", children: value }), description !== undefined ? (_jsx("dd", { className: "stat-desc text-base-content", children: description })) : null] }) }));
+});

package/dist/components/status-bead.d.ts

@@ -0,0 +1,9 @@
+import type { StatusMotion } from "./status.js";
+/** The bead's own silhouettes. */
+export type BeadGlyph = "dot" | "pill" | "bang";
+/** @internal Persistent SVG geometry; Anime owns the moving attributes. */
+export declare function StatusBead({ className, glyph, motion, }: {
+    className?: string;
+    glyph: BeadGlyph;
+    motion: StatusMotion;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-bead.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate } from "animejs";
+import { motionTime, readMotion, useMotion } from "../lib/motion.js";
+import { immediateTiming, themedEase, themedSpring, } from "../lib/motion-spring.js";
+import { useId, useLayoutEffect, useRef } from "react";
+import { GooeyFilterDefinition, STATUS_GOOEY_FILTER, GooeySurfaceDefinition, GooeyShadowDefinition, } from "./gooey.js";
+import { observeMotionVisibility } from "./motion-visibility.js";
+const silhouettes = {
+    dot: { y: -4, height: 8, cy: 0 },
+    pill: { y: -16, height: 32, cy: 0 },
+    bang: { y: -16, height: 20, cy: 12 },
+};
+/** @internal Persistent SVG geometry; Anime owns the moving attributes. */
+export function StatusBead({ className, glyph, motion, }) {
+    const id = `caps-status-${useId().replaceAll(":", "")}`;
+    const body = useRef(null);
+    const drop = useRef(null);
+    const activity = useRef(null);
+    const visual = useRef(null);
+    const surface = useRef(null);
+    const dropLight = useRef(null);
+    const initial = useRef(silhouettes[glyph]).current;
+    const initialSurface = useRef(glyph === "dot" ? 1 : 4).current;
+    const initialDropLight = useRef(glyph === "bang" ? 1 : 0).current;
+    const previous = useRef(glyph);
+    const feel = useMotion(visual);
+    const { reduced } = feel;
+    useLayoutEffect(() => {
+        if (!body.current ||
+            !drop.current ||
+            !surface.current ||
+            !dropLight.current)
+            return;
+        const target = silhouettes[glyph];
+        const immediate = reduced || previous.current === glyph;
+        previous.current = glyph;
+        const motion = readMotion(body.current);
+        const timing = immediate
+            ? { duration: 0 }
+            : themedSpring(motion, { bounce: 0.3, duration: 360 });
+        const morph = animate(body.current, {
+            y: target.y,
+            height: target.height,
+            ...timing,
+        });
+        const separation = animate(drop.current, {
+            cy: target.cy,
+            ...(immediate
+                ? { duration: 0 }
+                : {
+                    delay: motionTime(motion, 35),
+                    ...themedSpring(motion, { bounce: 0.3, duration: 420 }),
+                }),
+        });
+        const material = animate(surface.current, {
+            gradientTransform: `matrix(1 0 0 ${glyph === "dot" ? "1" : "4"} 0 0)`,
+            ...timing,
+        });
+        const highlight = animate(dropLight.current, {
+            opacity: glyph === "bang" ? 1 : 0,
+            ...(immediate
+                ? immediateTiming
+                : themedEase(motion, { ease: "inOutSine", duration: 220 })),
+        });
+        // Cancellation preserves the current geometry for the next target.
+        return () => {
+            morph.cancel();
+            separation.cancel();
+            material.cancel();
+            highlight.cancel();
+        };
+    }, [glyph, reduced]);
+    useLayoutEffect(() => {
+        if (!activity.current || !visual.current || reduced || motion === "none")
+            return;
+        const loop = motion === "pulse"
+            ? animate(activity.current, {
+                opacity: [1, 0.45],
+                ...themedEase(feel, { ease: "inOutSine", duration: 750 }),
+                alternate: true,
+                loop: true,
+            })
+            : animate(activity.current, {
+                keyframes: {
+                    "0%": { translateY: 0, scaleX: 1, scaleY: 1 },
+                    "18%": { translateY: 0.25, scaleX: 1.1, scaleY: 0.91 },
+                    "42%": { translateY: -1.3, scaleX: 0.94, scaleY: 1.06 },
+                    "62%": { translateY: -1.65, scaleX: 1, scaleY: 1 },
+                    "82%": { translateY: 0.15, scaleX: 1.06, scaleY: 0.95 },
+                    "100%": { translateY: 0, scaleX: 1, scaleY: 1 },
+                },
+                ...themedEase(feel, { ease: "inOutSine", duration: 1000 }),
+                loop: true,
+            });
+        const stopObserving = observeMotionVisibility(visual.current, (visible) => {
+            if (visible)
+                loop.resume();
+            else
+                loop.pause();
+        });
+        return () => {
+            stopObserving();
+            loop.revert();
+        };
+    }, [motion, reduced, feel]);
+    return (_jsxs("svg", { ref: visual, "aria-hidden": "true", className: `caps-status-bead ${className ?? ""}`, width: "8", height: "8", viewBox: "-4 -4 8 8", focusable: "false", children: [_jsxs("defs", { children: [_jsx(GooeyFilterDefinition, { id: id, values: STATUS_GOOEY_FILTER }), _jsx(GooeySurfaceDefinition, { ref: surface, id: `${id}-surface`, transform: `matrix(1 0 0 ${String(initialSurface)} 0 0)` }), _jsxs("radialGradient", { id: `${id}-drop-light`, gradientUnits: "userSpaceOnUse", cx: "-1.2", cy: "10.4", r: "5.6", children: [_jsx("stop", { offset: "0", stopColor: "var(--color-white)", style: { stopOpacity: "calc(var(--depth) * 0.5)" } }), _jsx("stop", { offset: "1", stopColor: "var(--color-white)", stopOpacity: "0" })] }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx("mask", { id: `${id}-silhouette`, maskUnits: "userSpaceOnUse", x: "-12", y: "-24", width: "24", height: "48", style: { maskType: "alpha" }, children: _jsxs("g", { fill: "var(--color-white)", filter: `url(#${id})`, children: [_jsx("rect", { ref: body, x: "-4", y: initial.y, width: "8", height: initial.height, rx: "4" }), _jsx("circle", { ref: drop, cx: "0", cy: initial.cy, r: "4" })] }) })] }), _jsx("g", { ref: activity, filter: `url(#${id}-shadow)`, children: _jsxs("g", { mask: `url(#${id}-silhouette)`, children: [_jsx("rect", { x: "-12", y: "-24", width: "24", height: "48", fill: `url(#${id}-surface)` }), _jsx("rect", { ref: dropLight, x: "-12", y: "-24", width: "24", height: "48", fill: `url(#${id}-drop-light)`, opacity: initialDropLight })] }) })] }));
+}

package/dist/components/status-mark.d.ts

@@ -0,0 +1,12 @@
+/** The task glyphs: waiting, working, finished, refused. */
+export type StatusMarkGlyph = "ring" | "arc" | "check" | "cross";
+/**
+ * @internal A 16-unit task mark. A dashed ring waits; an arc works (spinning,
+ * or filling to `progress`); when done the arc closes, the bead's material
+ * springs out to a disc and a check (or cross) is drawn out of it.
+ */
+export declare function StatusMark({ className, glyph, progress, }: {
+    className?: string;
+    glyph: StatusMarkGlyph;
+    progress?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;