@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/keycap.d.ts

@@ -0,0 +1,80 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Molded key colors. `inverse` is the contrasting key; `destructive` stays neutral until
+ * hovered or focused; the rest follow the theme.
+ */
+export type KeycapTone = "neutral" | "primary" | "accent" | "inverse" | "destructive";
+/** Keycap sizes: a legend chip, a dock key and a big face key. */
+export type KeycapSize = "sm" | "md" | "lg";
+/** Props accepted by Keycap. */
+export type KeycapProps = HTMLAttributes<HTMLElement> & {
+    tone?: KeycapTone;
+    size?: KeycapSize;
+    /** Show the key held down. Presentation only; the host owns input. */
+    pressed?: boolean;
+};
+/**
+ * One molded key legend, rendered as native `<kbd>`: the key a player presses.
+ * The key sits on its own travel so pressed and resting keys take the same room.
+ */
+export declare const Keycap: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    tone?: KeycapTone;
+    size?: KeycapSize;
+    /** Show the key held down. Presentation only; the host owns input. */
+    pressed?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+/** Props accepted by KeycapButton. */
+export type KeycapButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /**
+     * Visible name of the action, e.g. "Build". `null` makes an icon-only key,
+     * which then needs an `aria-label`.
+     */
+    label: ReactNode;
+    /** The keyboard key that runs the same action, shown as a small keycap. */
+    shortcut?: string;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** Extra readout after the label, such as a PixelNumber count. */
+    readout?: ReactNode;
+    tone?: KeycapTone;
+    /**
+     * Toggle state for mode keys. `undefined` is a momentary key; a boolean adds
+     * `aria-pressed` and lights the key's indicator.
+     */
+    pressed?: boolean;
+    /**
+     * Disclosure state for keys that open a palette or window. A boolean adds
+     * `aria-expanded` and lights the lamp; use it instead of `pressed` for
+     * menus.
+     */
+    expanded?: boolean;
+};
+/**
+ * A chunky action key for game docks and toy panels. The host owns the action
+ * and the keyboard binding; `shortcut` only labels it.
+ */
+export declare const KeycapButton: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /**
+     * Visible name of the action, e.g. "Build". `null` makes an icon-only key,
+     * which then needs an `aria-label`.
+     */
+    label: ReactNode;
+    /** The keyboard key that runs the same action, shown as a small keycap. */
+    shortcut?: string;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** Extra readout after the label, such as a PixelNumber count. */
+    readout?: ReactNode;
+    tone?: KeycapTone;
+    /**
+     * Toggle state for mode keys. `undefined` is a momentary key; a boolean adds
+     * `aria-pressed` and lights the key's indicator.
+     */
+    pressed?: boolean;
+    /**
+     * Disclosure state for keys that open a palette or window. A boolean adds
+     * `aria-expanded` and lights the lamp; use it instead of `pressed` for
+     * menus.
+     */
+    expanded?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/keycap.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * One molded key legend, rendered as native `<kbd>`: the key a player presses.
+ * The key sits on its own travel so pressed and resting keys take the same room.
+ */
+export const Keycap = forwardRef(function Keycap({ tone = "neutral", size = "md", pressed = false, className, ...props }, ref) {
+    return (_jsx("kbd", { ...props, ref: ref, className: cn("caps-keycap", className), "data-tone": tone, "data-size": size, "data-pressed": pressed }));
+});
+/**
+ * A chunky action key for game docks and toy panels. The host owns the action
+ * and the keyboard binding; `shortcut` only labels it.
+ */
+export const KeycapButton = forwardRef(function KeycapButton({ label, shortcut, icon, readout, tone = "neutral", pressed, expanded, className, type = "button", ...props }, ref) {
+    const lamp = pressed ?? expanded;
+    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("caps-keycap-button", className), "data-tone": tone, "aria-pressed": pressed, "aria-expanded": expanded, "aria-keyshortcuts": props["aria-keyshortcuts"] ?? shortcut, children: [lamp === undefined ? null : (_jsx("span", { className: "caps-keycap-led", "data-lit": lamp, "aria-hidden": "true" })), icon ? (_jsx("span", { className: "caps-keycap-button-icon", "aria-hidden": "true", children: icon })) : null, label === null ? null : (_jsx("span", { className: "caps-keycap-button-label", children: label })), readout, shortcut ? (_jsx(Keycap, { size: "sm", tone: "neutral", "aria-hidden": "true", children: shortcut })) : null] }));
+});

package/dist/components/label.d.ts

@@ -0,0 +1,13 @@
+import { type LabelHTMLAttributes } from "react";
+/** Props accepted by Label. */
+export type LabelProps = {
+    /** Adds a quiet "Optional" readout after the text. */
+    optional?: boolean;
+    required?: boolean;
+} & LabelHTMLAttributes<HTMLLabelElement>;
+/** A label primitive that associates caller-provided text with a form control. */
+export declare const Label: import("react").ForwardRefExoticComponent<{
+    /** Adds a quiet "Optional" readout after the text. */
+    optional?: boolean;
+    required?: boolean;
+} & LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/label.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 label primitive that associates caller-provided text with a form control. */
+export const Label = forwardRef(function Label({ children, className, optional, required, ...props }, ref) {
+    return (_jsxs("label", { ...props, className: cn("label caps-label cursor-pointer justify-start gap-sm text-sm font-semibold text-base-content", className), ref: ref, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "text-error", children: "*" })) : null, optional && !required ? (_jsx("span", { className: "caps-label-optional", children: "Optional" })) : null] }));
+});

package/dist/components/listbox.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Intrinsic focus and selection state supplied when rendering a Listbox item. */
+export type ListboxItemState = {
+    active: boolean;
+    disabled: boolean;
+    selected: boolean;
+};
+/** Props accepted by Listbox. */
+export type ListboxProps<T, Multiple extends boolean = false> = {
+    emptyMessage?: ReactNode;
+    /** Returns the stable key used for focus and selection. */
+    getKey: (item: T) => string;
+    /** Returns the accessible label used for an item. */
+    getLabel: (item: T) => string;
+    /** Determines whether an item can receive focus or selection. */
+    isDisabled?: (item: T) => boolean;
+    items: readonly T[];
+    /** Receives the selection control's root div. */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Renders an item with its intrinsic focus and selection state. */
+    renderItem?: (item: T, active: boolean, state: ListboxItemState) => ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "onSelect" | "value"> & (Multiple extends true ? {
+    defaultValue?: ListboxValue<true>;
+    multiple: true;
+    /** Receives the next value and selected item after local interaction. */
+    onValueChange?: (value: ListboxValue<true>, item: T[]) => void;
+    value?: ListboxValue<true>;
+} : Multiple extends false ? {
+    defaultValue?: ListboxValue;
+    multiple?: false;
+    /** Receives the next value and selected item after local interaction. */
+    onValueChange?: (value: ListboxValue, item: null | T) => void;
+    value?: ListboxValue;
+} : {
+    defaultValue?: ListboxValue;
+    multiple?: false;
+    /** Receives the next value and selected item after local interaction. */
+    onValueChange?: (value: ListboxValue, item: null | T) => void;
+    value?: ListboxValue;
+} | {
+    defaultValue?: ListboxValue<true>;
+    multiple: true;
+    /** Receives the next value and selected item after local interaction. */
+    onValueChange?: (value: ListboxValue<true>, item: T[]) => void;
+    value?: ListboxValue<true>;
+});
+/** Supported ListboxValue values. */
+export type ListboxValue<Multiple extends boolean = false> = Multiple extends true ? string[] : null | string;
+/** A selection primitive with caller-owned values and intrinsic keyboard navigation. */
+export declare function Listbox<T>(input: ListboxProps<T, boolean>): import("react/jsx-runtime").JSX.Element;

package/dist/components/listbox.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useCallback, useImperativeHandle, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { useGlide } from "../lib/glide.js";
+import { useSelectableCollection } from "./selectable.js";
+/** A selection primitive with caller-owned values and intrinsic keyboard navigation. */
+export function Listbox(input) {
+    const { className, defaultValue, emptyMessage = "No options", getKey, getLabel, id: providedId, isDisabled = () => false, items, multiple, onClick, onKeyDown, renderItem, rootRef, value: controlledValue, ...props } = input;
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const root = useRef(null);
+    useImperativeHandle(rootRef, () => root.current);
+    const glide = useGlide('[role="option"][data-active]');
+    const attach = useCallback((node) => {
+        root.current = node;
+        glide(node);
+    }, [glide]);
+    const isMultiple = multiple === true;
+    const initialValue = isMultiple ? [] : null;
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue ?? initialValue);
+    const selectedValue = optionalValueOr(controlledValue, uncontrolledValue);
+    const selectedKeys = selectedKeysFor(selectedValue, isMultiple);
+    const collection = useSelectableCollection({ getKey, isDisabled, items });
+    const { enabledItems } = collection;
+    const firstSelected = items.find((item) => selectedKeys.includes(getKey(item)));
+    const { activeKey, activeItem, setActiveKey } = collection;
+    const activeEnabled = activeItem;
+    const controlledSelection = controlledValue === undefined
+        ? undefined
+        : JSON.stringify(isMultiple ? [...new Set(selectedKeys)].sort() : selectedKeys);
+    const previousControlledSelection = useRef(controlledSelection);
+    const initialized = useRef(false);
+    useEffect(() => {
+        if (initialized.current || activeKey !== null)
+            return;
+        const initial = firstSelected ?? enabledItems[0];
+        if (initial) {
+            initialized.current = true;
+            setActiveKey(getKey(initial));
+        }
+    }, [activeKey, enabledItems, firstSelected, getKey, setActiveKey]);
+    useEffect(() => {
+        if (controlledSelection !== undefined &&
+            controlledSelection !== previousControlledSelection.current) {
+            const selectedItem = items.find((item) => selectedKeys.includes(getKey(item)) && !isDisabled(item));
+            setActiveKey(selectedItem ? getKey(selectedItem) : null);
+        }
+        previousControlledSelection.current = controlledSelection;
+    }, [controlledSelection, getKey, isDisabled, items, selectedKeys]);
+    const commit = (item) => {
+        if (!item || isDisabled(item))
+            return;
+        const key = getKey(item);
+        let nextKeys;
+        if (isMultiple) {
+            nextKeys = selectedKeys.includes(key)
+                ? selectedKeys.filter((selectedKey) => selectedKey !== key)
+                : [...selectedKeys, key];
+        }
+        else {
+            nextKeys = [key];
+        }
+        if (input.multiple) {
+            if (controlledValue === undefined)
+                setUncontrolledValue(nextKeys);
+            input.onValueChange?.(nextKeys, items.filter((candidate) => nextKeys.includes(getKey(candidate))));
+        }
+        else {
+            const nextValue = nextKeys[0] ?? null;
+            if (controlledValue === undefined)
+                setUncontrolledValue(nextValue);
+            input.onValueChange?.(nextValue, item);
+        }
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key === "Escape") {
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            commit(activeEnabled);
+            return;
+        }
+        if (enabledItems.length === 0)
+            return;
+        if (event.key === "ArrowDown")
+            collection.move(1);
+        else if (event.key === "ArrowUp")
+            collection.move(-1);
+        else if (event.key === "Home")
+            collection.move(-1, "start");
+        else if (event.key === "End")
+            collection.move(1, "end");
+        else
+            return;
+        event.preventDefault();
+    };
+    return (_jsx("div", { ...props, "aria-activedescendant": activeEnabled
+            ? `${id}-option-${encodeURIComponent(getKey(activeEnabled))}`
+            : undefined, "aria-multiselectable": isMultiple ? true : undefined, className: cn("max-h-72 w-full overflow-auto rounded-box border border-base-300 bg-base-100 p-xs shadow-lg focus-visible:outline-none focus-visible:ring-2 caps-focus-color", className), id: id, onClick: onClick, onKeyDown: handleKeyDown, ref: attach, role: "listbox", tabIndex: props.tabIndex ?? 0, children: items.length === 0 ? (_jsx("div", { className: "px-md py-sm text-sm text-base-content", children: emptyMessage })) : (items.map((item) => {
+            const key = getKey(item);
+            const disabled = isDisabled(item);
+            const selected = selectedKeys.includes(key);
+            const active = activeEnabled ? getKey(activeEnabled) === key : false;
+            const state = { active, disabled, selected };
+            return (_jsx("div", { "aria-disabled": disabled || undefined, "aria-selected": selected, "data-active": (active && !disabled) || undefined, className: cn("cursor-pointer rounded-field px-md py-sm text-sm outline-none", active && "bg-base-200", selected && "font-medium", disabled &&
+                    "cursor-not-allowed bg-base-200 text-base-content outline outline-1 outline-dashed outline-base-300"), id: `${id}-option-${encodeURIComponent(key)}`, onClick: (event) => {
+                    if (disabled) {
+                        event.preventDefault();
+                        return;
+                    }
+                    setActiveKey(key);
+                    commit(item);
+                }, role: "option", children: renderItem?.(item, active, state) ?? getLabel(item) }, key));
+        })) }));
+}
+function selectedKeysFor(value, multiple) {
+    if (multiple)
+        return Array.isArray(value) ? value.slice() : [];
+    if (value === null || value === undefined || Array.isArray(value))
+        return [];
+    return [value];
+}
+function optionalValueOr(value, fallback) {
+    switch (value) {
+        case undefined:
+            return fallback;
+        default:
+            return value;
+    }
+}

package/dist/components/loader-blobs.d.ts

@@ -0,0 +1,5 @@
+import type { LoaderVariant } from "./loader.js";
+/** @internal Animate only the silhouette; lighting never overlaps at joins. */
+export declare function LoaderBlobs({ variant }: {
+    variant: LoaderVariant;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/loader-blobs.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMotion, motionTime } from "../lib/motion.js";
+import { animate } from "animejs";
+import { useId, useLayoutEffect, useRef } from "react";
+import { GooeyFilterDefinition, GooeyShadowDefinition, GooeySurfaceDefinition, STATUS_GOOEY_FILTER, } from "./gooey.js";
+import { observeMotionVisibility } from "./motion-visibility.js";
+function smoothPhase(value) {
+    const bounded = Math.max(0, Math.min(1, value));
+    return bounded * bounded * (3 - 2 * bounded);
+}
+function excursion(blob, progress) {
+    const phase = Math.max(0, Math.min(1, (progress - (blob - 1) * 0.085) / 0.68));
+    return Math.sin(phase * Math.PI) ** 2;
+}
+// Closed harmonic paths feel irregular without picking new random targets on
+// render. Opposing radii give the blobs a breathing, roughly constant area.
+function pose(variant, blob, progress) {
+    const turn = progress * Math.PI * 2;
+    const phase = blob * 2.1;
+    const breath = Math.sin(turn * 2 + phase) * 0.15;
+    const radii = { rx: 4 * (1 + breath), ry: 4 / (1 + breath) };
+    if (variant === "line") {
+        const distance = 7.5 + 4 * Math.cos(turn + (blob === 2 ? -0.45 : 0));
+        return {
+            cx: (blob - 1) * distance,
+            cy: Math.sin(turn + phase) * 0.7,
+            ...radii,
+        };
+    }
+    if (variant === "square") {
+        const distance = 4.7 + 2.7 * Math.cos(turn);
+        return {
+            cx: (blob % 2 ? 1 : -1) * distance,
+            cy: (blob < 2 ? -1 : 1) * distance,
+            ...radii,
+        };
+    }
+    if (variant === "donut") {
+        // Trace clockwise from one origin. Unreleased blobs travel with the head;
+        // after the full ring closes, everything returns to that same origin.
+        const sweep = smoothPhase(progress / 0.66) * Math.PI * 2;
+        const angle = Math.min(sweep, (blob * Math.PI) / 8) - Math.PI / 2;
+        const collapse = smoothPhase((progress - 0.79) / 0.21);
+        const distance = 8 + Math.sin(turn * 2 + phase) * 0.35 * Math.sin(progress * Math.PI);
+        return {
+            cx: Math.cos(angle) * distance * (1 - collapse),
+            cy: Math.sin(angle) * distance * (1 - collapse) - 8 * collapse,
+            rx: 3.6 * (1 + breath * Math.sin(progress * Math.PI)),
+            ry: 3.6 / (1 + breath * Math.sin(progress * Math.PI)),
+        };
+    }
+    if (variant === "bloom") {
+        if (blob === 0) {
+            const released = [1, 2, 3, 4].reduce((sum, index) => sum + excursion(index, progress), 0);
+            const radius = Math.sqrt(49 - released * 4);
+            return {
+                cx: Math.sin(turn) * 0.4,
+                cy: Math.sin(turn * 2) * 0.4,
+                rx: radius * (1 + breath),
+                ry: radius / (1 + breath),
+            };
+        }
+        const reach = excursion(blob, progress);
+        const angle = ((blob - 1) * Math.PI) / 2 - Math.PI / 4 + Math.sin(turn) * 0.22;
+        return {
+            cx: Math.cos(angle) * 14 * reach,
+            cy: Math.sin(angle) * 14 * reach,
+            rx: 3.2 * (1 + breath),
+            ry: 3.2 / (1 + breath),
+        };
+    }
+    return {
+        cx: Math.sin(turn + phase) * 6 + Math.sin(turn * 3 + phase) * 2.5,
+        cy: Math.cos(turn * 2 + phase) * 6,
+        ...radii,
+    };
+}
+// Relative lengths preserve each choreography; the theme owns its tempo.
+const durations = {
+    line: 1700,
+    square: 1900,
+    donut: 3000,
+    wander: 4600,
+    bloom: 2800,
+};
+/** @internal Animate only the silhouette; lighting never overlaps at joins. */
+export function LoaderBlobs({ variant }) {
+    const id = `caps-loader-${useId().replaceAll(":", "")}`;
+    const geometry = useRef(null);
+    const visual = useRef(null);
+    const timing = useMotion(visual);
+    const { reduced } = timing;
+    const count = variant === "donut"
+        ? 16
+        : variant === "bloom"
+            ? 5
+            : variant === "square"
+                ? 4
+                : 3;
+    useLayoutEffect(() => {
+        if (reduced || !geometry.current || !visual.current)
+            return;
+        const loops = [...geometry.current.querySelectorAll("ellipse")].map((blob, index) => animate(blob, {
+            keyframes: Array.from({ length: 48 }, (_, step) => ({
+                ...pose(variant, index, (step + 1) / 48),
+                duration: motionTime(timing, durations[variant]) / 48,
+            })),
+            ease: "linear",
+            loop: true,
+        }));
+        const stopObserving = observeMotionVisibility(visual.current, (visible) => {
+            for (const loop of loops) {
+                if (visible)
+                    loop.resume();
+                else
+                    loop.pause();
+            }
+        });
+        return () => {
+            stopObserving();
+            for (const loop of loops)
+                loop.revert();
+        };
+    }, [variant, reduced, timing]);
+    return (_jsxs("svg", { ref: visual, "aria-hidden": "true", focusable: "false", viewBox: variant === "line" ? "-20 -10 40 20" : "-20 -20 40 40", children: [_jsxs("defs", { children: [_jsx(GooeyFilterDefinition, { id: id, values: STATUS_GOOEY_FILTER }), _jsx(GooeySurfaceDefinition, { id: `${id}-surface`, transform: variant === "line"
+                            ? "matrix(3.4 0 0 1.4 0 0)"
+                            : "matrix(3 0 0 3 0 0)" }), _jsx(GooeyShadowDefinition, { id: `${id}-shadow` }), _jsx("mask", { id: `${id}-mask`, maskUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "40", height: "40", style: { maskType: "alpha" }, children: _jsx("g", { ref: geometry, fill: "currentColor", filter: `url(#${id})`, children: Array.from({ length: count }, (_, index) => (_jsx("ellipse", { ...pose(variant, index, 0) }, index))) }) })] }), _jsx("g", { filter: `url(#${id}-shadow)`, children: _jsx("rect", { x: "-20", y: "-20", width: "40", height: "40", fill: `url(#${id}-surface)`, mask: `url(#${id}-mask)` }) })] }));
+}

package/dist/components/loader.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Fluid motion formations, sharing one material. */
+export type LoaderVariant = "line" | "wander" | "square" | "donut" | "bloom";
+/** Props accepted by Loader. */
+export type LoaderProps = {
+    decorative?: boolean;
+    label?: ReactNode;
+    /** `fill` grows the formation to its container, as a full-tile placeholder. */
+    size?: "sm" | "md" | "lg" | "fill";
+    variant?: LoaderVariant;
+    tone?: "neutral" | "accent" | "primary" | "success";
+} & HTMLAttributes<HTMLSpanElement>;
+/** Connecting gooey beads, with a static silhouette for reduced motion. */
+export declare const Loader: import("react").ForwardRefExoticComponent<{
+    decorative?: boolean;
+    label?: ReactNode;
+    /** `fill` grows the formation to its container, as a full-tile placeholder. */
+    size?: "sm" | "md" | "lg" | "fill";
+    variant?: LoaderVariant;
+    tone?: "neutral" | "accent" | "primary" | "success";
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/loader.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+import { LoaderBlobs } from "./loader-blobs.js";
+const sizeClasses = {
+    sm: "caps-loader-sm",
+    md: "caps-loader-md",
+    lg: "caps-loader-lg",
+    fill: "caps-loader-fill",
+};
+const toneClasses = {
+    neutral: "text-base-content",
+    accent: "text-accent",
+    primary: "text-primary",
+    success: "text-success",
+};
+/** Connecting gooey beads, with a static silhouette for reduced motion. */
+export const Loader = forwardRef(function Loader({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, decorative = false, label = "Loading", size = "md", variant = "line", tone = "neutral", ...props }, ref) {
+    const labelId = `${useId()}-label`;
+    const ownsLabel = !decorative && ariaLabel === undefined && ariaLabelledby === undefined;
+    return (_jsxs("span", { ...props, "aria-label": decorative ? undefined : ariaLabel, "aria-hidden": decorative || undefined, "aria-labelledby": decorative
+            ? undefined
+            : (ariaLabelledby ?? (ariaLabel === undefined ? labelId : undefined)), className: cn("caps-loader", sizeClasses[size], toneClasses[tone], className), "data-variant": variant, role: decorative ? undefined : "status", ref: ref, children: [_jsx(LoaderBlobs, { variant: variant }), ownsLabel ? _jsx(VisuallyHidden, { id: labelId, children: label }) : null] }));
+});

package/dist/components/markdown.d.ts

@@ -0,0 +1,23 @@
+import type { MarkdownComponents } from "@tanstack/markdown/react";
+import { type ReactNode } from "react";
+/** Props accepted by Markdown. */
+export type MarkdownProps = {
+    /** The Markdown source, including an unfinished streaming response. */
+    children: string;
+    /** Extra classes merged onto the rendered container. */
+    className?: string;
+    /** Element treatments; links use the shared policy, images are filtered first. */
+    components?: MarkdownComponents;
+    /** Strip a leading YAML frontmatter block before rendering. Defaults to true. */
+    frontmatter?: boolean;
+    /** Visitor content allows only absolute HTTP(S) links and never loads images. */
+    policy?: "default" | "visitor";
+    /** Use Caps Prose, or inherit typography from the containing surface. */
+    typography?: "prose" | "inherit";
+};
+/**
+ * Shared Markdown renderer with safe links, images and highlighted code.
+ * Documents use Caps Prose; containing surfaces can supply their own typography
+ * and element treatments. Replacing the source renders streaming partial Markdown.
+ */
+export declare function Markdown({ children, className, components, frontmatter, policy, typography, }: MarkdownProps): ReactNode;

package/dist/components/markdown.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Markdown as TanStackMarkdown } from "@tanstack/markdown/react";
+import { parseMarkdown } from "@tanstack/markdown/parser";
+import { createElement, useMemo } from "react";
+import { cn } from "../lib/cn.js";
+import { highlightMarkdownCode } from "../lib/tanstack-highlight.js";
+import { Prose } from "./prose.js";
+/** The protocol of an absolute URL, or `null` when the value is relative. */
+function absoluteProtocol(value) {
+    return URL.parse(value)?.protocol ?? null;
+}
+/** Whether an href is safe to render live: http(s), mailto, or relative/hash. */
+function isSafeHref(href) {
+    if (href === "" || href.startsWith("//"))
+        return false;
+    const protocol = absoluteProtocol(href);
+    return (protocol === null ||
+        protocol === "http:" ||
+        protocol === "https:" ||
+        protocol === "mailto:");
+}
+/** Whether an href leaves the current document and should open in a new tab. */
+function isExternalHref(href) {
+    const protocol = absoluteProtocol(href);
+    return protocol === "http:" || protocol === "https:";
+}
+/** Whether an image src is safe to render: http(s) or relative. */
+function isSafeImageSrc(src) {
+    if (src === "" || src.startsWith("//"))
+        return false;
+    const protocol = absoluteProtocol(src);
+    return protocol === null || protocol === "http:" || protocol === "https:";
+}
+/**
+ * Shared Markdown renderer with safe links, images and highlighted code.
+ * Documents use Caps Prose; containing surfaces can supply their own typography
+ * and element treatments. Replacing the source renders streaming partial Markdown.
+ */
+export function Markdown({ children, className, components, frontmatter = true, policy = "default", typography = "prose", }) {
+    const document = useMemo(() => parseMarkdown(children, { allowHtml: false, frontmatter }), [children, frontmatter]);
+    const safeComponents = useMemo(() => ({
+        ...components,
+        a(props) {
+            const href = props.href ?? "";
+            if (policy === "visitor") {
+                const destination = URL.parse(href);
+                if (destination === null || !isExternalHref(destination.href))
+                    return _jsx("span", { children: props.children });
+                return (_jsx("a", { href: destination.href, target: "_blank", rel: "noopener noreferrer", children: props.children }));
+            }
+            if (!isSafeHref(href))
+                return _jsx(_Fragment, { children: props.children });
+            const external = isExternalHref(href);
+            return (_jsx("a", { ...props, href: href, rel: external ? "noopener noreferrer" : props.rel, target: external ? "_blank" : props.target }));
+        },
+        img(props) {
+            if (policy === "visitor")
+                return _jsx("span", { className: "text-dim", children: "Image removed" });
+            const source = props.src ?? "";
+            if (!isSafeImageSrc(source))
+                return _jsx(_Fragment, { children: props.alt ?? "" });
+            if (components?.img)
+                return createElement(components.img, props);
+            return (_jsx("img", { alt: props.alt ?? "", className: "max-w-full", src: source }));
+        },
+    }), [components, policy]);
+    const content = (_jsx(TanStackMarkdown, { allowHtml: false, components: safeComponents, highlighter: highlightMarkdownCode, children: document }));
+    const containerClass = cn("min-w-0 break-words", className);
+    return typography === "prose" ? (_jsx(Prose, { className: containerClass, children: content })) : (_jsx("div", { className: containerClass, children: content }));
+}

package/dist/components/minimap-labels.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+/** Where a mark's name sits, or `hidden`. */
+export type MinimapLabelSide = "below" | "above" | "right" | "left" | "below-right" | "below-left" | "above-right" | "above-left" | "hidden";
+/** A caller-provided minimap label and its anchor. */
+export type MinimapLabelInput = Readonly<{
+    /** Mark centre, as a fraction of the chart's width and height. */
+    x: number;
+    y: number;
+    /** Named marks are laid out; unnamed ones (the viewer, foes) are dots. */
+    named: boolean;
+    /** A dot labels must keep clear of. Moving marks (foes) are left out, so a
+     * passing crowd never hides a landmark. */
+    solid: boolean;
+    goal: boolean;
+    label: string;
+}>;
+/** Measured label dimensions used to place minimap labels. */
+export type MinimapLabelMetrics = Readonly<{
+    /** The chart's size in CSS pixels. */
+    width: number;
+    height: number;
+    /** An estimate of one character's advance, and a label's line height. */
+    charWidth: number;
+    lineHeight: number;
+    /** Padding either side of a label, the dot's size, the gap to the dot. */
+    padding: number;
+    dot: number;
+    gap: number;
+}>;
+/** The side each mark's label takes, index for index with `marks`. */
+export declare function layoutMinimapLabels(marks: readonly MinimapLabelInput[], metrics: MinimapLabelMetrics): MinimapLabelSide[];