@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/minimap-labels.js

@@ -0,0 +1,113 @@
+/**
+ * Minimap label placement: every named mark tries its label below, above,
+ * right and left of its dot, then at its four corners, and keeps the first spot that stays inside
+ * the chart and clear of every fixed dot and every label already placed. Goals
+ * are placed first, then places in the order the game listed them, so a
+ * game lists its landmarks first. A label with no clear spot is hidden; its
+ * full name still shows on hover and focus, and reads to assistive tech.
+ * Pure and deterministic: the same marks and size give the same layout.
+ */
+const overlaps = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+const SIDES = [
+    "below",
+    "above",
+    "right",
+    "left",
+    "below-right",
+    "below-left",
+    "above-right",
+    "above-left",
+];
+/** The side each mark's label takes, index for index with `marks`. */
+export function layoutMinimapLabels(marks, metrics) {
+    const { width, height, charWidth, lineHeight, padding, dot, gap } = metrics;
+    const centre = (mark) => ({
+        x: mark.x * width,
+        y: mark.y * height,
+    });
+    const taken = marks
+        .filter((mark) => mark.solid)
+        .map((mark) => {
+        const { x, y } = centre(mark);
+        return {
+            left: x - dot / 2,
+            top: y - dot / 2,
+            right: x + dot / 2,
+            bottom: y + dot / 2,
+        };
+    });
+    const sides = marks.map(() => "hidden");
+    const order = marks
+        .map((mark, index) => ({ mark, index }))
+        .filter(({ mark }) => mark.named)
+        .sort((a, b) => Number(b.mark.goal) - Number(a.mark.goal) || a.index - b.index);
+    for (const { mark, index } of order) {
+        const { x, y } = centre(mark);
+        const w = mark.label.length * charWidth + padding * 2;
+        const h = lineHeight;
+        const reach = dot / 2 + gap;
+        const boxes = {
+            below: {
+                left: x - w / 2,
+                top: y + reach,
+                right: x + w / 2,
+                bottom: y + reach + h,
+            },
+            above: {
+                left: x - w / 2,
+                top: y - reach - h,
+                right: x + w / 2,
+                bottom: y - reach,
+            },
+            right: {
+                left: x + reach,
+                top: y - h / 2,
+                right: x + reach + w,
+                bottom: y + h / 2,
+            },
+            left: {
+                left: x - reach - w,
+                top: y - h / 2,
+                right: x - reach,
+                bottom: y + h / 2,
+            },
+            "below-right": {
+                left: x,
+                top: y + reach,
+                right: x + w,
+                bottom: y + reach + h,
+            },
+            "below-left": {
+                left: x - w,
+                top: y + reach,
+                right: x,
+                bottom: y + reach + h,
+            },
+            "above-right": {
+                left: x,
+                top: y - reach - h,
+                right: x + w,
+                bottom: y - reach,
+            },
+            "above-left": {
+                left: x - w,
+                top: y - reach - h,
+                right: x,
+                bottom: y - reach,
+            },
+        };
+        for (const side of SIDES) {
+            const box = boxes[side];
+            const inside = box.left >= 0 &&
+                box.top >= 0 &&
+                box.right <= width &&
+                box.bottom <= height;
+            if (!inside || taken.some((other) => overlaps(box, other)))
+                continue;
+            taken.push(box);
+            sides[index] = side;
+            break;
+        }
+    }
+    return sides;
+}

package/dist/components/monogram.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from "react";
+/** Theme tones a Monogram may take; the current Stipe theme supplies each color. */
+export type MonogramTone = "primary" | "secondary" | "accent" | "info" | "success" | "warning";
+/** A stable tone for an identity: the same seed always gets the same tone. */
+export declare function monogramTone(seed: string): MonogramTone;
+/** Monogram scales: `default` sits inline with text; larger sizes stand alone as an identity mark. */
+export type MonogramSize = "default" | "lg" | "xl";
+/** Who the Monogram marks: people and Agents get a disc, Apps a rounded tile. */
+export type MonogramSubject = "actor" | "app";
+/** Props accepted by Monogram. */
+export type MonogramProps = {
+    /** The name whose first letter is shown. */
+    name: string;
+    /** Stable identity that picks the tone; defaults to the name. */
+    seed?: string;
+    size?: MonogramSize;
+    subject?: MonogramSubject;
+    variant?: "initial" | "specimen";
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/**
+ * A small decorative identity mark: the name's first letter on a quiet tinted
+ * disc. The enclosing control owns the accessible name.
+ */
+export declare const Monogram: import("react").ForwardRefExoticComponent<{
+    /** The name whose first letter is shown. */
+    name: string;
+    /** Stable identity that picks the tone; defaults to the name. */
+    seed?: string;
+    size?: MonogramSize;
+    subject?: MonogramSubject;
+    variant?: "initial" | "specimen";
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/monogram.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+import { seedHash } from "../lib/seed-hash.js";
+const tones = [
+    "primary",
+    "secondary",
+    "accent",
+    "info",
+    "success",
+    "warning",
+];
+/** A stable tone for an identity: the same seed always gets the same tone. */
+export function monogramTone(seed) {
+    return tones[seedHash(seed) % tones.length] ?? "primary";
+}
+/**
+ * A small decorative identity mark: the name's first letter on a quiet tinted
+ * disc. The enclosing control owns the accessible name.
+ */
+export const Monogram = forwardRef(function Monogram({ className, name, seed, size = "default", subject = "actor", variant = "initial", ...props }, ref) {
+    const letter = Array.from(name.trim())[0]?.toLocaleUpperCase() ?? "?";
+    return (_jsx("span", { "aria-hidden": "true", ...props, className: cn("caps-monogram", className), "data-subject": subject === "actor" ? undefined : subject, "data-size": size === "default" ? undefined : size, "data-tone": monogramTone(seed ?? name), ref: ref, children: variant === "specimen" ? (_jsx("svg", { viewBox: "0 0 48 48", width: "80%", height: "80%", fill: "none", "aria-hidden": "true", children: _jsxs("g", { transform: `rotate(${String((seed ?? name).split("").reduce((sum, unit) => sum + (unit.codePointAt(0) ?? 0), 0) % 360)} 24 24)`, stroke: "currentColor", strokeWidth: "1.5", children: [Array.from({ length: 20 }, (_, index) => (_jsx("path", { d: "M24 19 Q19 12 24 5", transform: `rotate(${String(index * 18)} 24 24)` }, index))), _jsx("circle", { cx: "24", cy: "24", r: "5" })] }) })) : (letter) }));
+});

package/dist/components/motion-visibility.d.ts

@@ -0,0 +1,2 @@
+/** @internal Pause decorative motion outside the visible document/viewport. */
+export declare function observeMotionVisibility(element: Element, onChange: (visible: boolean) => void): () => void;

package/dist/components/motion-visibility.js

@@ -0,0 +1,25 @@
+/** @internal Pause decorative motion outside the visible document/viewport. */
+export function observeMotionVisibility(element, onChange) {
+    const document = element.ownerDocument;
+    let intersecting = true;
+    const update = () => {
+        onChange(intersecting && !document.hidden);
+    };
+    const browser = globalThis;
+    const observer = "IntersectionObserver" in globalThis && browser.IntersectionObserver
+        ? new browser.IntersectionObserver((entries) => {
+            const entry = entries.find((candidate) => candidate.target === element);
+            if (!entry)
+                return;
+            intersecting = entry.isIntersecting;
+            update();
+        })
+        : undefined;
+    observer?.observe(element);
+    document.addEventListener("visibilitychange", update);
+    update();
+    return () => {
+        observer?.disconnect();
+        document.removeEventListener("visibilitychange", update);
+    };
+}

package/dist/components/navigation-rail.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+/** Props accepted by NavigationRail. */
+export type NavigationRailProps = HTMLAttributes<HTMLElement> & {
+    /** Let a long rail fit across wide layouts while retaining mobile scrolling. */
+    fitAtWide?: boolean;
+};
+/** A horizontal navigation list that signals when links continue off-screen. */
+export declare const NavigationRail: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** Let a long rail fit across wide layouts while retaining mobile scrolling. */
+    fitAtWide?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/navigation-rail.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+/** A horizontal navigation list that signals when links continue off-screen. */
+export const NavigationRail = forwardRef(function NavigationRail({ children, className, fitAtWide, ...props }, forwardedRef) {
+    const viewport = useRef(null);
+    const content = useRef(null);
+    const [edges, setEdges] = useState({
+        start: false,
+        end: false,
+    });
+    useEffect(() => {
+        const scroller = viewport.current;
+        const links = content.current;
+        if (!scroller || !links)
+            return;
+        const update = () => {
+            const maximum = scroller.scrollWidth - scroller.clientWidth;
+            const next = {
+                start: scroller.scrollLeft > 1,
+                end: maximum - scroller.scrollLeft > 1,
+            };
+            setEdges((current) => current.start === next.start && current.end === next.end
+                ? current
+                : next);
+        };
+        update();
+        scroller.addEventListener("scroll", update, { passive: true });
+        window.addEventListener("resize", update);
+        const active = links.querySelector('[aria-current="page"]');
+        if (active) {
+            // Centre the active link, then land on a link boundary so no link is
+            // cut mid-word at the leading edge.
+            const target = active.offsetLeft - (scroller.clientWidth - active.clientWidth) / 2;
+            const starts = Array.from(links.children, (link) => link instanceof HTMLElement ? link.offsetLeft : 0);
+            const maximum = scroller.scrollWidth - scroller.clientWidth;
+            const boundary = starts.find((start) => start >= target);
+            if (boundary !== undefined && boundary <= maximum) {
+                scroller.scrollLeft = boundary;
+            }
+            else {
+                // Past the last boundary the rail cannot scroll on; show the link
+                // that would be cut whole instead.
+                const cut = starts.filter((start) => start < maximum).at(-1);
+                scroller.scrollLeft = cut ?? maximum;
+            }
+            update();
+        }
+        return () => {
+            scroller.removeEventListener("scroll", update);
+            window.removeEventListener("resize", update);
+        };
+    }, [children]);
+    return (_jsx("nav", { ...props, className: cn("caps-navigation-rail", fitAtWide && "caps-navigation-rail-fit-wide", className), "data-overflow-end": edges.end ? "true" : undefined, "data-overflow-start": edges.start ? "true" : undefined, ref: forwardedRef, children: _jsx("div", { className: "caps-navigation-rail-viewport", ref: viewport, children: _jsx("div", { className: "caps-navigation-rail-content", ref: content, children: children }) }) }));
+});

package/dist/components/overlay-root.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+/** Semantic destinations; the host owns their paint order and positioning. */
+export type OverlayLayer = "popover" | "dialog" | "toast" | "tooltip";
+/** Host portal roots; null keeps an overlay waiting until its layer mounts. */
+export type OverlayContainers = Readonly<Record<OverlayLayer, HTMLElement | null>>;
+/** Supply shell portal roots without teaching Caps about the shell's layout. */
+export declare function OverlayRoot({ containers, children, subscribeDismiss, }: {
+    containers: OverlayContainers;
+    children?: ReactNode;
+    /** Subscribe to the host losing focus to a child surface or another window. */
+    subscribeDismiss?: (listener: () => void) => () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Wait for a provided root; standalone overlays use the current document body. */
+export declare function useOverlayRoot(layer: OverlayLayer): HTMLElement | null;
+/** Retire a transient overlay when its owning host requests light dismissal. */
+export declare function useOverlayDismiss(dismiss: () => void): void;

package/dist/components/overlay-root.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, } from "react";
+const DismissContext = createContext(undefined);
+const Context = createContext(null);
+/** Supply shell portal roots without teaching Caps about the shell's layout. */
+export function OverlayRoot({ containers, children, subscribeDismiss, }) {
+    return (_jsx(Context.Provider, { value: containers, children: _jsx(DismissContext.Provider, { value: subscribeDismiss, children: children }) }));
+}
+/** Wait for a provided root; standalone overlays use the current document body. */
+export function useOverlayRoot(layer) {
+    const containers = useContext(Context);
+    if (containers !== null)
+        return containers[layer];
+    return Object.hasOwn(globalThis, "document") ? document.body : null;
+}
+/** Retire a transient overlay when its owning host requests light dismissal. */
+export function useOverlayDismiss(dismiss) {
+    const subscribe = useContext(DismissContext);
+    const callback = useRef(dismiss);
+    callback.current = dismiss;
+    useEffect(() => subscribe?.(() => {
+        callback.current();
+    }), [subscribe]);
+}

package/dist/components/pixel-number.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes } from "react";
+/** Characters the pixel face can draw. */
+export declare const PIXEL_NUMBER_CHARACTERS: readonly string[];
+/** Supported PixelNumber sizes: one font pixel is 2, 3, 4 or 6 CSS pixels. */
+export type PixelNumberSize = "sm" | "md" | "lg" | "xl";
+/** Semantic tones supplied by the current theme. */
+export type PixelNumberTone = "current" | "primary" | "accent" | "success" | "warning" | "error";
+/** Props accepted by PixelNumber. Pass a `value`, or readout `text`. */
+export type PixelNumberProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** A number to draw. */
+    value?: number;
+    /** Readout text instead of a number: digits and `: . + - / × %` and spaces. */
+    text?: string;
+    /** Left-pad the whole part of `value` with zeros to this many digits. */
+    pad?: number;
+    /** Prefix a positive `value` with `+`, for gains and floating numbers. */
+    signed?: boolean;
+    size?: PixelNumberSize;
+    tone?: PixelNumberTone;
+    /**
+     * Ring every lit pixel with the ink line, like a sprite outline, so the
+     * number reads over any world: damage, pickups and floating gains.
+     */
+    outline?: boolean;
+};
+/** Format a number the way PixelNumber draws it. */
+export declare function formatPixelNumber(value: number, pad?: number, signed?: boolean): string;
+/** Reject characters the pixel face cannot draw, naming the ones it can. */
+export declare function checkPixelText(text: string): string;
+/**
+ * Crisp pixel numerals drawn as SVG, so they stay sharp at every size and
+ * never depend on a font file. The readable text is kept for assistive tech.
+ */
+export declare const PixelNumber: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** A number to draw. */
+    value?: number;
+    /** Readout text instead of a number: digits and `: . + - / × %` and spaces. */
+    text?: string;
+    /** Left-pad the whole part of `value` with zeros to this many digits. */
+    pad?: number;
+    /** Prefix a positive `value` with `+`, for gains and floating numbers. */
+    signed?: boolean;
+    size?: PixelNumberSize;
+    tone?: PixelNumberTone;
+    /**
+     * Ring every lit pixel with the ink line, like a sprite outline, so the
+     * number reads over any world: damage, pickups and floating gains.
+     */
+    outline?: boolean;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/pixel-number.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A 3×5 pixel face for game readouts: clocks, counters, damage and pickups.
+ * Each glyph is rows of lit columns, top to bottom.
+ */
+const GLYPHS = new Map([
+    ["0", ["###", "#.#", "#.#", "#.#", "###"]],
+    ["1", [".#.", "##.", ".#.", ".#.", "###"]],
+    ["2", ["###", "..#", "###", "#..", "###"]],
+    ["3", ["###", "..#", ".##", "..#", "###"]],
+    ["4", ["#.#", "#.#", "###", "..#", "..#"]],
+    ["5", ["###", "#..", "###", "..#", "###"]],
+    ["6", ["###", "#..", "###", "#.#", "###"]],
+    ["7", ["###", "..#", ".#.", ".#.", ".#."]],
+    ["8", ["###", "#.#", "###", "#.#", "###"]],
+    ["9", ["###", "#.#", "###", "..#", "###"]],
+    [":", [".", "#", ".", "#", "."]],
+    [".", [".", ".", ".", ".", "#"]],
+    ["+", ["...", ".#.", "###", ".#.", "..."]],
+    ["-", ["...", "...", "###", "...", "..."]],
+    ["/", ["..#", "..#", ".#.", "#..", "#.."]],
+    ["×", ["...", "#.#", ".#.", "#.#", "..."]],
+    ["%", ["#.#", "..#", ".#.", "#..", "#.#"]],
+    [" ", [".", ".", ".", ".", "."]],
+]);
+const BLANK = [".", ".", ".", ".", "."];
+/** Characters the pixel face can draw. */
+export const PIXEL_NUMBER_CHARACTERS = Object.freeze([...GLYPHS.keys()]);
+/** Format a number the way PixelNumber draws it. */
+export function formatPixelNumber(value, pad = 0, signed = false) {
+    if (!Number.isFinite(value))
+        throw new RangeError("PixelNumber needs a finite number");
+    const whole = String(Math.trunc(Math.abs(value))).padStart(pad, "0");
+    const fraction = String(Math.abs(value)).split(".")[1];
+    const sign = value < 0 ? "-" : signed && value > 0 ? "+" : "";
+    return checkPixelText(`${sign}${whole}${fraction ? `.${fraction}` : ""}`);
+}
+/** Reject characters the pixel face cannot draw, naming the ones it can. */
+export function checkPixelText(text) {
+    for (const character of text)
+        if (!GLYPHS.has(character))
+            throw new RangeError(`PixelNumber cannot draw "${character}"; use digits and ${PIXEL_NUMBER_CHARACTERS.filter((glyph) => !/\d/.test(glyph)).join(" ")}`);
+    return text;
+}
+/** Lit pixels of a string in font pixels, shifted right and down by `margin`. */
+function litPixels(text, margin) {
+    const lit = new Set();
+    let cursor = margin;
+    for (const character of text) {
+        const glyph = GLYPHS.get(character) ?? BLANK;
+        glyph.forEach((row, y) => {
+            for (let x = 0; x < row.length; x++)
+                if (row.charAt(x) === "#")
+                    lit.add(`${String(cursor + x)},${String(y + margin)}`);
+        });
+        cursor += (glyph.at(0)?.length ?? 1) + 1;
+    }
+    return { lit, width: Math.max(1, cursor - 1 - margin) + margin * 2 };
+}
+/** Ink pixels touching a lit pixel on any side or corner, but not lit. */
+function outlinePixels(lit) {
+    const ring = new Set();
+    for (const key of lit) {
+        const [x = 0, y = 0] = key.split(",").map(Number);
+        for (let dy = -1; dy <= 1; dy++)
+            for (let dx = -1; dx <= 1; dx++) {
+                const next = `${String(x + dx)},${String(y + dy)}`;
+                if (!lit.has(next))
+                    ring.add(next);
+            }
+    }
+    return ring;
+}
+/** Horizontal runs `[x, y, width]` covering a pixel set, for fewer rects. */
+function pixelRuns(pixels, width, height) {
+    const runs = [];
+    for (let y = 0; y < height; y++) {
+        let start = -1;
+        for (let x = 0; x <= width; x++) {
+            const on = pixels.has(`${String(x)},${String(y)}`);
+            if (on && start < 0)
+                start = x;
+            if (!on && start >= 0) {
+                runs.push([start, y, x - start]);
+                start = -1;
+            }
+        }
+    }
+    return runs;
+}
+function Runs({ runs, className, }) {
+    return (_jsx("g", { className: className, children: runs.map(([x, y, run]) => (_jsx("rect", { x: x, y: y, width: run, height: 1 }, `${String(x)}-${String(y)}`))) }));
+}
+/**
+ * Crisp pixel numerals drawn as SVG, so they stay sharp at every size and
+ * never depend on a font file. The readable text is kept for assistive tech.
+ */
+export const PixelNumber = forwardRef(function PixelNumber({ value, text, pad, signed, size = "md", tone = "current", outline = false, className, ...props }, ref) {
+    if (text === undefined && value === undefined)
+        throw new TypeError("PixelNumber needs a value or text");
+    const shown = text === undefined
+        ? formatPixelNumber(value ?? Number.NaN, pad, signed)
+        : checkPixelText(text);
+    const margin = outline ? 1 : 0;
+    const { lit, width } = litPixels(shown, margin);
+    const height = 5 + margin * 2;
+    const scale = PIXEL_SCALE[size];
+    return (_jsxs("span", { ...props, ref: ref, className: cn("caps-pixel-number", className), "data-size": size, "data-tone": tone, "data-outline": outline, children: [_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: `0 0 ${String(width)} ${String(height)}`, width: width * scale, height: height * scale, children: [outline ? (_jsx(Runs, { className: "caps-pixel-number-outline", runs: pixelRuns(outlinePixels(lit), width, height) })) : null, _jsx(Runs, { className: "caps-pixel-number-face", runs: pixelRuns(lit, width, height) })] }), _jsx("span", { className: "sr-only", children: shown })] }));
+});
+/** CSS pixels per font pixel. */
+const PIXEL_SCALE = { sm: 2, md: 3, lg: 4, xl: 6 };

package/dist/components/popover.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from "react";
+/** The positioned box a Popover attaches to. */
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by Popover. */
+export type PopoverProps = HTMLAttributes<HTMLDivElement> & {
+    /** Whether the popover is shown. */
+    open: boolean;
+    /** Which edge of the anchor it opens from. */
+    side?: "top" | "bottom";
+};
+/**
+ * A non-modal raised panel attached to its PopoverAnchor. It never takes
+ * focus, so the anchored control (for example a composer) keeps typing while
+ * the popover lists suggestions.
+ */
+export declare const Popover: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Whether the popover is shown. */
+    open: boolean;
+    /** Which edge of the anchor it opens from. */
+    side?: "top" | "bottom";
+} & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by PopoverOption. */
+export type PopoverOptionProps = HTMLAttributes<HTMLDivElement> & {
+    /** Whether keyboard navigation currently highlights this option. */
+    active: boolean;
+};
+/** One option row inside a Popover list; pointer presses keep focus where it is. */
+export declare const PopoverOption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Whether keyboard navigation currently highlights this option. */
+    active: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/popover.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/** The positioned box a Popover attaches to. */
+export const PopoverAnchor = forwardRef(function PopoverAnchor({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-popover-anchor", className) }));
+});
+/**
+ * A non-modal raised panel attached to its PopoverAnchor. It never takes
+ * focus, so the anchored control (for example a composer) keeps typing while
+ * the popover lists suggestions.
+ */
+export const Popover = forwardRef(function Popover({ className, open, side = "top", ...props }, ref) {
+    if (!open)
+        return null;
+    return (_jsx("div", { ...props, ref: ref, className: cn("caps-popover", className), "data-side": side }));
+});
+/** One option row inside a Popover list; pointer presses keep focus where it is. */
+export const PopoverOption = forwardRef(function PopoverOption({ active, className, onMouseDown, ...props }, ref) {
+    return (_jsx("div", { role: "option", "aria-selected": active, ...props, ref: ref, className: cn("caps-popover-option", className), "data-active": active, onMouseDown: (event) => {
+            event.preventDefault();
+            onMouseDown?.(event);
+        } }));
+});

package/dist/components/presence.d.ts

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Props accepted by Presence. */
+export type PresenceProps = {
+    /** Whether the content is present. Leaving content stays mounted until it has left. */
+    show: boolean;
+    /** Animate the first mount too (for content that arrives after the page). */
+    appear?: boolean;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Content that arrives and leaves instead of popping: it makes room, fades in
+ * while travelling the theme's `--stipe-motion-distance`, and on leaving fades
+ * out and gives its room back before it unmounts. Reduced motion keeps a short
+ * fade only.
+ */
+export declare const Presence: import("react").ForwardRefExoticComponent<{
+    /** Whether the content is present. Leaving content stays mounted until it has left. */
+    show: boolean;
+    /** Animate the first mount too (for content that arrives after the page). */
+    appear?: boolean;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by Collapse. */
+export type CollapseProps = {
+    /** Open: the content takes its height. Closed: no space, and out of the accessibility tree. */
+    open: boolean;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Content that opens and closes its own space: an inserted alert, a field
+ * error, a disclosure body. Height and opacity follow the theme's tempo; under
+ * reduced motion the space changes at once and only the fade remains.
+ */
+export declare const Collapse: import("react").ForwardRefExoticComponent<{
+    /** Open: the content takes its height. Closed: no space, and out of the accessibility tree. */
+    open: boolean;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Props accepted by Swap. */
+export type SwapProps = {
+    /** Names the current content. A new key crossfades from the old content to the new. */
+    swapKey: string;
+    /** Which edge leaving content holds to while the box resizes; `end` for right-aligned actions. */
+    anchor?: "start" | "end";
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * One piece of content replaced by another without a hard cut: loading to
+ * loaded, "Saving…" to "Saved". The old content fades out (blurred by the
+ * theme's `--stipe-motion-blur`) as the new one arrives, and the box eases to
+ * the new size. Reduced motion keeps the crossfade and drops the travel.
+ */
+export declare const Swap: import("react").ForwardRefExoticComponent<{
+    /** Names the current content. A new key crossfades from the old content to the new. */
+    swapKey: string;
+    /** Which edge leaving content holds to while the box resizes; `end` for right-aligned actions. */
+    anchor?: "start" | "end";
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;