@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/lib/motion-spring.d.ts

@@ -0,0 +1,27 @@
+import { type EasingParam } from "animejs";
+import { type Motion } from "./motion.js";
+/** Anime.js timing for one tween or segment. */
+export type MotionTiming = Readonly<{
+    ease: EasingParam;
+    duration: number;
+}>;
+/** Timing for a change that must land at once. */
+export declare const immediateTiming: MotionTiming;
+/** A component's own spring, as authored for today's default feel. */
+export type AuthoredSpring = Readonly<{
+    bounce: number;
+    duration: number;
+}>;
+/**
+ * Anime.js timing for an authored spring, in the theme's feel: bounce and
+ * settle time scale with `--stipe-motion-bounce` and
+ * `--stipe-motion-spring-duration`, and a stepped theme moves in
+ * `--stipe-motion-steps` discrete steps instead. Today's themes reproduce the
+ * authored spring exactly.
+ */
+export declare function themedSpring(motion: Motion, authored: AuthoredSpring): MotionTiming;
+/**
+ * Anime.js timing for an authored eased segment: the duration scales with the
+ * theme's tempo, and a stepped theme replaces the curve with steps.
+ */
+export declare function themedEase(motion: Motion, authored: MotionTiming): MotionTiming;

package/dist/lib/motion-spring.js

@@ -0,0 +1,36 @@
+import { spring, steps } from "animejs";
+import { motionBounce, motionSpringTime, motionTime, } from "./motion.js";
+/** Timing for a change that must land at once. */
+export const immediateTiming = Object.freeze({
+    ease: "linear",
+    duration: 0,
+});
+/**
+ * Anime.js timing for an authored spring, in the theme's feel: bounce and
+ * settle time scale with `--stipe-motion-bounce` and
+ * `--stipe-motion-spring-duration`, and a stepped theme moves in
+ * `--stipe-motion-steps` discrete steps instead. Today's themes reproduce the
+ * authored spring exactly.
+ */
+export function themedSpring(motion, authored) {
+    const duration = motionSpringTime(motion, authored.duration);
+    if (duration <= 0)
+        return immediateTiming;
+    if (motion.steps > 0)
+        return { ease: steps(motion.steps), duration };
+    return {
+        ease: spring({ bounce: motionBounce(motion, authored.bounce), duration }),
+        duration,
+    };
+}
+/**
+ * Anime.js timing for an authored eased segment: the duration scales with the
+ * theme's tempo, and a stepped theme replaces the curve with steps.
+ */
+export function themedEase(motion, authored) {
+    const duration = motionTime(motion, authored.duration);
+    return {
+        ease: motion.steps > 0 ? steps(motion.steps) : authored.ease,
+        duration,
+    };
+}

package/dist/lib/motion.d.ts

@@ -0,0 +1,51 @@
+import { type RefObject } from "react";
+/** Resolved, element-scoped motion. Times are milliseconds and distances pixels. */
+export type Motion = Readonly<{
+    reduced: boolean;
+    squish: number;
+    fast: number;
+    normal: number;
+    slow: number;
+    springDuration: number;
+    bounce: number;
+    stretch: number;
+    distance: number;
+    stagger: number;
+    blur: number;
+    shake: number;
+    steps: number;
+    fuse: number;
+    pressDepth: number;
+    pressScale: number;
+    ease: string;
+    easeExit: string;
+}>;
+/** Read at an event boundary; no root-theme lookup, so nested tokens win. */
+export declare function readMotion(element: Element): Motion;
+/** Live motion tokens for a mounted ref, including nested theme and OS changes. */
+export declare function useMotion(ref: RefObject<Element | null>): Motion;
+/** Today's feel: the defaults that components' authored timings are written against. */
+export declare const motionDefaults: Motion;
+/**
+ * Scale one of a component's authored durations by the theme's tempo
+ * (`--stipe-motion-normal` against its 180ms default). Today's themes return
+ * the authored value unchanged; reduced motion returns 0 (nothing travels).
+ */
+export declare function motionTime(motion: Motion, authored: number): number;
+/**
+ * Scale one of a component's authored spring bounces by the theme's bounce
+ * (`--stipe-motion-bounce` against its 0.3 default), so a lively control stays
+ * livelier than a calm one inside every theme. A 0 theme is critically damped.
+ */
+export declare function motionBounce(motion: Motion, authored: number): number;
+/** Scale an authored spring settle time by `--stipe-motion-spring-duration`. */
+export declare function motionSpringTime(motion: Motion, authored: number): number;
+/** A CSS easing for a Web Animation, stepped when the theme asks for it. */
+export declare function motionEasing(motion: Motion, ease: string): string;
+/** Whether the element can run Web Animations (not in jsdom or old engines). */
+export declare function canAnimate(element: Element): boolean;
+/**
+ * The live reduced-motion preference alone, for controls that only need to
+ * know whether to move (their timing comes from `readMotion` when they do).
+ */
+export declare function useReducedMotion(): boolean;

package/dist/lib/motion.js

@@ -0,0 +1,161 @@
+import { useLayoutEffect, useState, useSyncExternalStore, } from "react";
+const defaults = Object.freeze({
+    reduced: false,
+    squish: 90,
+    fast: 120,
+    normal: 180,
+    slow: 280,
+    springDuration: 320,
+    bounce: 0.3,
+    stretch: 0.28,
+    distance: 4,
+    stagger: 24,
+    blur: 0,
+    shake: 3,
+    steps: 0,
+    fuse: 1,
+    pressDepth: 0.5,
+    pressScale: 1,
+    ease: "cubic-bezier(0.2, 0, 0, 1)",
+    easeExit: "cubic-bezier(0.4, 0, 1, 1)",
+});
+const preference = "(prefers-reduced-motion: reduce)";
+/** Read at an event boundary; no root-theme lookup, so nested tokens win. */
+export function readMotion(element) {
+    const view = element.ownerDocument.defaultView;
+    if (!view)
+        return defaults;
+    const style = view.getComputedStyle(element);
+    const number = (name, fallback) => {
+        const value = style.getPropertyValue(name).trim();
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? Math.max(0, parsed) : fallback;
+    };
+    const time = (name, fallback) => {
+        const value = style.getPropertyValue(name).trim();
+        return (number(name, fallback) *
+            (value.endsWith("s") && !value.endsWith("ms") ? 1000 : 1));
+    };
+    const browser = view;
+    const reduced = browser.matchMedia?.(preference).matches ?? false;
+    const duration = (name, fallback) => reduced ? 120 : time(`--stipe-motion-${name}`, fallback);
+    const amount = (name, fallback) => reduced ? 0 : number(`--stipe-motion-${name}`, fallback);
+    return {
+        reduced,
+        squish: duration("squish", defaults.squish),
+        fast: duration("fast", defaults.fast),
+        normal: duration("normal", defaults.normal),
+        slow: duration("slow", defaults.slow),
+        springDuration: duration("spring-duration", defaults.springDuration),
+        bounce: Math.min(1, amount("bounce", defaults.bounce)),
+        stretch: amount("stretch", defaults.stretch),
+        distance: amount("distance", defaults.distance),
+        stagger: reduced ? 0 : time("--stipe-motion-stagger", defaults.stagger),
+        blur: amount("blur", defaults.blur),
+        shake: amount("shake", defaults.shake),
+        steps: Math.floor(amount("steps", defaults.steps)),
+        fuse: number("--stipe-motion-fuse", defaults.fuse),
+        pressDepth: reduced
+            ? 0
+            : number("--stipe-press-depth", defaults.pressDepth),
+        pressScale: reduced
+            ? 1
+            : number("--stipe-press-scale", defaults.pressScale),
+        ease: style.getPropertyValue("--stipe-motion-ease").trim() || defaults.ease,
+        easeExit: style.getPropertyValue("--stipe-motion-ease-exit").trim() ||
+            defaults.easeExit,
+    };
+}
+/** Live motion tokens for a mounted ref, including nested theme and OS changes. */
+export function useMotion(ref) {
+    const [motion, setMotion] = useState(() => ({
+        ...defaults,
+        reduced: true,
+    }));
+    useLayoutEffect(() => {
+        const element = ref.current;
+        const view = element?.ownerDocument.defaultView;
+        if (!element || !view)
+            return;
+        const update = () => {
+            const next = readMotion(element);
+            setMotion((previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+        };
+        update();
+        const observer = new view.MutationObserver(update);
+        // Observe ancestors only: animation writes to descendants must not trigger reads.
+        for (let parent = element; parent; parent = parent.parentElement) {
+            observer.observe(parent, {
+                attributes: true,
+                attributeFilter: ["data-theme", "class", "style"],
+            });
+        }
+        const browser = view;
+        const media = browser.matchMedia?.(preference);
+        media?.addEventListener("change", update);
+        return () => {
+            observer.disconnect();
+            media?.removeEventListener("change", update);
+        };
+    }, [ref]);
+    return motion;
+}
+/** Today's feel: the defaults that components' authored timings are written against. */
+export const motionDefaults = defaults;
+/**
+ * Scale one of a component's authored durations by the theme's tempo
+ * (`--stipe-motion-normal` against its 180ms default). Today's themes return
+ * the authored value unchanged; reduced motion returns 0 (nothing travels).
+ */
+export function motionTime(motion, authored) {
+    if (motion.reduced)
+        return 0;
+    return Math.round((authored * motion.normal) / defaults.normal);
+}
+/**
+ * Scale one of a component's authored spring bounces by the theme's bounce
+ * (`--stipe-motion-bounce` against its 0.3 default), so a lively control stays
+ * livelier than a calm one inside every theme. A 0 theme is critically damped.
+ */
+export function motionBounce(motion, authored) {
+    if (motion.reduced)
+        return 0;
+    const scaled = (authored * motion.bounce) / defaults.bounce;
+    return Math.min(0.9, Math.max(0, scaled));
+}
+/** Scale an authored spring settle time by `--stipe-motion-spring-duration`. */
+export function motionSpringTime(motion, authored) {
+    if (motion.reduced)
+        return 0;
+    return Math.round((authored * motion.springDuration) / defaults.springDuration);
+}
+/** A CSS easing for a Web Animation, stepped when the theme asks for it. */
+export function motionEasing(motion, ease) {
+    return motion.steps > 0 ? `steps(${String(motion.steps)}, end)` : ease;
+}
+/** Whether the element can run Web Animations (not in jsdom or old engines). */
+export function canAnimate(element) {
+    return "animate" in element;
+}
+const globalWindow = globalThis;
+function prefersReducedMotion() {
+    return globalWindow.matchMedia?.(preference).matches ?? false;
+}
+function subscribeReducedMotion(update) {
+    const media = globalWindow.matchMedia?.(preference);
+    media?.addEventListener("change", update);
+    return () => {
+        media?.removeEventListener("change", update);
+    };
+}
+/** Server renders assume reduced motion, so hydration never starts mid-move. */
+function serverReducedMotion() {
+    return true;
+}
+/**
+ * The live reduced-motion preference alone, for controls that only need to
+ * know whether to move (their timing comes from `readMotion` when they do).
+ */
+export function useReducedMotion() {
+    return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
+}

package/dist/lib/reorder-motion.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from "react";
+/** The attribute that names one keyed child of a list with list motion. */
+export declare const reorderKeyAttribute = "data-reorder-key";
+/**
+ * Motion for a keyed list. Rows that arrive fade in over the theme's travel
+ * (staggered by `--stipe-motion-stagger`) once the list has unrolled to make
+ * room. A row that leaves fades where it stood first; then the rest close
+ * ranks, gliding to their places (FLIP on the Web Animations API) as the list
+ * eases to its new height. Everything reads the theme's motion tokens;
+ * reduced motion keeps only short fades and nothing travels. Children opt in
+ * with `data-reorder-key`, and the first render is still.
+ */
+export declare function useListMotion(container: RefObject<HTMLElement | null>, order: readonly string[]): void;

package/dist/lib/reorder-motion.js

@@ -0,0 +1,201 @@
+import { useLayoutEffect, useRef } from "react";
+import { canAnimate, motionEasing, readMotion } from "./motion.js";
+/** The attribute that names one keyed child of a list with list motion. */
+export const reorderKeyAttribute = "data-reorder-key";
+function rowIn(container, element) {
+    const outer = container.getBoundingClientRect();
+    const inner = element.getBoundingClientRect();
+    // Container-relative, so scrolling between renders never reads as a move.
+    return {
+        element,
+        top: inner.top - outer.top + container.scrollTop,
+        left: inner.left - outer.left + container.scrollLeft,
+        width: inner.width,
+        height: inner.height,
+    };
+}
+/** Rows that arrive fade in over the theme's travel, a sibling at a time. */
+function enter(rows, motion, after) {
+    rows.forEach((element, index) => {
+        element.animate(motion.reduced
+            ? [{ opacity: 0 }, { opacity: 1 }]
+            : [
+                {
+                    opacity: 0,
+                    transform: `translateY(${String(motion.distance)}px)`,
+                },
+                { opacity: 1, transform: "none" },
+            ], {
+            duration: motion.normal,
+            delay: after + index * motion.stagger,
+            easing: motionEasing(motion, motion.ease),
+            fill: "backwards",
+        });
+    });
+}
+/**
+ * A row that leaves is gone from the DOM already; a quiet copy of its last
+ * look fades where it stood while the rows below glide up into its room.
+ */
+function leave(container, row, motion) {
+    const ghost = row.element.cloneNode(true);
+    if (!(ghost instanceof HTMLElement))
+        return;
+    ghost.removeAttribute(reorderKeyAttribute);
+    ghost.removeAttribute("id");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("inert", "");
+    Object.assign(ghost.style, {
+        position: "absolute",
+        top: `${String(row.top - container.clientTop)}px`,
+        left: `${String(row.left - container.clientLeft)}px`,
+        width: `${String(row.width)}px`,
+        height: `${String(row.height)}px`,
+        margin: "0",
+        pointerEvents: "none",
+    });
+    const positioned = getComputedStyle(container).position !== "static";
+    if (!positioned)
+        container.style.position = "relative";
+    container.append(ghost);
+    const exit = ghost.animate(motion.reduced
+        ? [{ opacity: 1 }, { opacity: 0 }]
+        : [
+            { opacity: 1, transform: "none" },
+            {
+                opacity: 0,
+                transform: `translateY(${String(-motion.distance)}px)`,
+            },
+        ], {
+        duration: motion.fast,
+        easing: motionEasing(motion, motion.easeExit),
+        fill: "forwards",
+    });
+    const done = () => {
+        ghost.remove();
+        if (!positioned && container.querySelector(":scope > [inert]") === null)
+            container.style.removeProperty("position");
+    };
+    exit.addEventListener("finish", done);
+    exit.addEventListener("cancel", done);
+}
+/**
+ * The list eases to its new height with the rows, so whatever sits below it
+ * moves along instead of jumping; rows outside the moving edge are clipped.
+ */
+function resize(container, from, to, timing) {
+    const clipped = container.style.overflow;
+    container.style.overflow = "clip";
+    const animation = container.animate([{ height: `${String(from)}px` }, { height: `${String(to)}px` }], timing);
+    const done = () => {
+        container.style.overflow = clipped;
+    };
+    animation.addEventListener("finish", done);
+    animation.addEventListener("cancel", done);
+    return animation;
+}
+/**
+ * Motion for a keyed list. Rows that arrive fade in over the theme's travel
+ * (staggered by `--stipe-motion-stagger`) once the list has unrolled to make
+ * room. A row that leaves fades where it stood first; then the rest close
+ * ranks, gliding to their places (FLIP on the Web Animations API) as the list
+ * eases to its new height. Everything reads the theme's motion tokens;
+ * reduced motion keeps only short fades and nothing travels. Children opt in
+ * with `data-reorder-key`, and the first render is still.
+ */
+export function useListMotion(container, order) {
+    const previous = useRef(null);
+    const height = useRef(0);
+    const resizing = useRef(null);
+    const orderKey = order.join("\u0000");
+    useLayoutEffect(() => {
+        const root = container.current;
+        if (root === null) {
+            // A list that unmounts starts still when it comes back.
+            previous.current = null;
+            return;
+        }
+        const before = previous.current;
+        const changed = before?.order !== orderKey;
+        // Measure the list's own height, not a resize still in flight.
+        const heightBefore = resizing.current
+            ? root.getBoundingClientRect().height
+            : height.current;
+        if (changed) {
+            resizing.current?.cancel();
+            resizing.current = null;
+        }
+        const heightAfter = changed
+            ? root.getBoundingClientRect().height
+            : height.current;
+        height.current = heightAfter;
+        const next = new Map();
+        for (const element of root.querySelectorAll(`:scope [${reorderKeyAttribute}]`)) {
+            const key = element.getAttribute(reorderKeyAttribute);
+            if (key === null)
+                continue;
+            const was = before?.rows.get(key);
+            // Unchanged rows already have their target positions. Measuring them
+            // during our own animation would replace that target with a halfway pose.
+            next.set(key, !changed && was?.element === element ? was : rowIn(root, element));
+        }
+        const keys = new Set(order);
+        previous.current = { order: orderKey, keys, rows: next };
+        // Virtual lists mount and unmount rows while scrolling. Refresh their
+        // baseline every commit, but animate only a change to the logical list.
+        if (before === null || !changed || !canAnimate(root))
+            return;
+        const motion = readMotion(root);
+        const leaving = [...before.rows].filter(([key, row]) => !keys.has(key) && !row.element.isConnected);
+        // Ranks close once the leaving rows have faded, never through them.
+        const settle = {
+            duration: motion.slow,
+            delay: leaving.length > 0 ? motion.fast : 0,
+            easing: motionEasing(motion, motion.ease),
+            fill: "backwards",
+        };
+        const arriving = [];
+        const moved = [];
+        for (const [key, row] of next) {
+            const was = before.rows.get(key);
+            if (was === undefined) {
+                if (!before.keys.has(key))
+                    arriving.push(row.element);
+                continue;
+            }
+            const dx = was.left - row.left;
+            const dy = was.top - row.top;
+            if (dx === 0 && dy === 0)
+                continue;
+            moved.push(row.element);
+            if (motion.reduced || motion.slow <= 0)
+                continue;
+            row.element.animate([
+                { transform: `translate(${String(dx)}px, ${String(dy)}px)` },
+                { transform: "none" },
+            ], settle);
+        }
+        if (motion.reduced) {
+            // Nothing travels: rows that changed place settle in with a short fade
+            // instead of a fading copy crossing them.
+            for (const element of moved)
+                element.animate([{ opacity: 0.3 }, { opacity: 1 }], {
+                    duration: motion.fast,
+                    easing: motion.ease,
+                });
+        }
+        else
+            for (const [, row] of leaving)
+                leave(root, row, motion);
+        // New rows fade in once the rows around them have made room.
+        enter(arriving, motion, moved.length > 0 && !motion.reduced ? motion.fast : 0);
+        if (!motion.reduced && Math.abs(heightBefore - heightAfter) > 0.5) {
+            const animation = resize(root, heightBefore, heightAfter, settle);
+            resizing.current = animation;
+            animation.addEventListener("finish", () => {
+                if (resizing.current === animation)
+                    resizing.current = null;
+            });
+        }
+    });
+}

package/dist/lib/seed-hash.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A stable 32-bit FNV-1a hash: the same seed always lands on the same value,
+ * and short, similar seeds spread apart. Used to pick a deterministic tone,
+ * color, or pattern from an identity (a name, an Agent id) without state.
+ */
+export declare function seedHash(seed: string): number;

package/dist/lib/seed-hash.js

@@ -0,0 +1,13 @@
+/**
+ * A stable 32-bit FNV-1a hash: the same seed always lands on the same value,
+ * and short, similar seeds spread apart. Used to pick a deterministic tone,
+ * color, or pattern from an identity (a name, an Agent id) without state.
+ */
+export function seedHash(seed) {
+    let hash = 0x811c9dc5;
+    for (const unit of seed) {
+        hash ^= unit.codePointAt(0) ?? 0;
+        hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return hash;
+}

package/dist/lib/tanstack-highlight.d.ts

@@ -0,0 +1,4 @@
+/** Highlights Markdown fences with the shared chat and document language set. */
+export declare const highlightMarkdownCode: import("@tanstack/highlight/markdown").TanStackMarkdownHighlighter;
+/** Converts source code to escaped token spans for a code display. */
+export declare function highlightToHtml(code: string, lang?: string): string;

package/dist/lib/tanstack-highlight.js

@@ -0,0 +1,41 @@
+import { createHighlighter } from "@tanstack/highlight/core";
+import { css } from "@tanstack/highlight/languages/css";
+import { dockerfile } from "@tanstack/highlight/languages/dockerfile";
+import { html } from "@tanstack/highlight/languages/html";
+import { js } from "@tanstack/highlight/languages/js";
+import { json } from "@tanstack/highlight/languages/json";
+import { jsx } from "@tanstack/highlight/languages/jsx";
+import { markdown } from "@tanstack/highlight/languages/markdown";
+import { plaintext } from "@tanstack/highlight/languages/plaintext";
+import { python } from "@tanstack/highlight/languages/python";
+import { shell } from "@tanstack/highlight/languages/shell";
+import { sql } from "@tanstack/highlight/languages/sql";
+import { ts } from "@tanstack/highlight/languages/ts";
+import { tsx } from "@tanstack/highlight/languages/tsx";
+import { yaml } from "@tanstack/highlight/languages/yaml";
+import { createTanStackMarkdownHighlighter } from "@tanstack/highlight/markdown";
+const highlighter = createHighlighter({
+    fallbackLanguage: "plaintext",
+    languages: [
+        css,
+        dockerfile,
+        html,
+        js,
+        json,
+        jsx,
+        markdown,
+        plaintext,
+        python,
+        shell,
+        sql,
+        ts,
+        tsx,
+        yaml,
+    ],
+});
+/** Highlights Markdown fences with the shared chat and document language set. */
+export const highlightMarkdownCode = createTanStackMarkdownHighlighter(highlighter);
+/** Converts source code to escaped token spans for a code display. */
+export function highlightToHtml(code, lang) {
+    return highlighter.highlightToHtml(code, lang ? { lang } : {});
+}