@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/components/rough-drawing.js

@@ -0,0 +1,231 @@
+/**
+ * Hand-drawn Rough.js chrome for any element marked `data-caps-rough`: boxes,
+ * underlines, circles, highlights, speech bubbles and leader lines drawn in the
+ * theme's ink or primary. The {@link Rough} component writes that markup; pages
+ * without React call {@link drawRough} once. Until Rough.js has drawn an
+ * element (or without JavaScript), plain CSS in `styles.css` stands in for it.
+ *
+ * Each element keeps its seed, so a redraw after a resize bends the same way.
+ */
+const MARKS = [
+    "box",
+    "underline",
+    "circle",
+    "highlight",
+    "bubble",
+    "line",
+];
+const SVG_NS = "http://www.w3.org/2000/svg";
+/** How far a mark may spill past its element, in CSS pixels. */
+const BLEED = 12;
+function finite(value, fallback) {
+    const number = Number(value);
+    return value !== undefined && Number.isFinite(number) ? number : fallback;
+}
+/** Read `0,100 40,20 100,0` as percent points, dropping malformed pairs. */
+export function parseRoughPoints(value) {
+    const points = [];
+    for (const pair of (value ?? "").trim().split(/\s+/)) {
+        const [x, y] = pair.split(",").map(Number);
+        if (x === undefined || y === undefined)
+            continue;
+        if (Number.isFinite(x) && Number.isFinite(y))
+            points.push([x, y]);
+    }
+    return points;
+}
+/** Parse an element's `data-caps-rough` and `data-rough-*` attributes. */
+export function readRoughSpec(element) {
+    const data = element.dataset;
+    const mark = MARKS.find((name) => name === data.capsRough);
+    if (!mark)
+        return null;
+    const fill = data.roughFill === "solid" || data.roughFill === "hachure"
+        ? data.roughFill
+        : "none";
+    const tail = data.roughTail === "right" || data.roughTail === "none"
+        ? data.roughTail
+        : "left";
+    return {
+        mark,
+        seed: Math.max(1, Math.round(finite(data.roughSeed, 7))),
+        weight: finite(data.roughWeight, mark === "highlight" ? 1 : 2.2),
+        roughness: finite(data.roughRoughness, 1.4),
+        fill,
+        tail,
+        points: parseRoughPoints(data.roughPoints),
+    };
+}
+/** The drawables for one mark in a `width` × `height` box offset by BLEED. */
+function sketch(generator, spec, width, height) {
+    const x = BLEED;
+    const y = BLEED;
+    const options = {
+        seed: spec.seed,
+        roughness: spec.roughness,
+        bowing: 1.2,
+        stroke: "currentColor",
+        strokeWidth: spec.weight,
+    };
+    if (spec.fill !== "none") {
+        options.fill = "currentColor";
+        options.fillStyle = spec.fill;
+        options.fillWeight = spec.weight * 0.6;
+        options.hachureGap = spec.weight * 3;
+    }
+    switch (spec.mark) {
+        case "box":
+            return [generator.rectangle(x, y, width, height, options)];
+        case "underline": {
+            const base = y + height + 2;
+            return [
+                generator.curve([
+                    [x - 2, base],
+                    [x + width * 0.5, base + 3],
+                    [x + width + 2, base - 1],
+                ], options),
+            ];
+        }
+        case "circle":
+            return [
+                generator.ellipse(x + width / 2, y + height / 2, width + BLEED * 1.4, height + BLEED * 1.2, { ...options, disableMultiStroke: false }),
+            ];
+        case "highlight":
+            return [
+                generator.rectangle(x - 3, y + height * 0.45, width + 6, height * 0.5, {
+                    ...options,
+                    stroke: "none",
+                    fill: "currentColor",
+                    fillStyle: spec.fill === "hachure" ? "hachure" : "solid",
+                }),
+            ];
+        case "bubble": {
+            const tailX = spec.tail === "right" ? x + width * 0.78 : x + width * 0.22;
+            const flip = spec.tail === "right" ? 1 : -1;
+            const tail = spec.tail === "none"
+                ? []
+                : [
+                    generator.linearPath([
+                        [tailX - 10 * flip, y + height - 4],
+                        [tailX + 18 * flip, y + height + BLEED - 1],
+                        [tailX + 6 * flip, y + height - 6],
+                    ], options),
+                ];
+            return [
+                generator.ellipse(x + width / 2, y + height / 2, width, height, options),
+                ...tail,
+            ];
+        }
+        case "line": {
+            const points = spec.points.map(([px, py]) => [
+                x + (px / 100) * width,
+                y + (py / 100) * height,
+            ]);
+            if (points.length < 2)
+                return [];
+            return [
+                points.length === 2
+                    ? generator.linearPath(points, options)
+                    : generator.curve(points, options),
+            ];
+        }
+    }
+}
+/** Draw (or redraw) one element's mark into its own overlay SVG. */
+function paint(generator, element, spec) {
+    const width = element.offsetWidth;
+    const height = element.offsetHeight;
+    if (width < 1 || height < 1)
+        return;
+    let svg = element.querySelector(":scope > .caps-rough-svg");
+    if (!svg) {
+        svg = element.ownerDocument.createElementNS(SVG_NS, "svg");
+        svg.classList.add("caps-rough-svg");
+        svg.setAttribute("aria-hidden", "true");
+        svg.setAttribute("focusable", "false");
+        element.append(svg);
+    }
+    svg.setAttribute("width", String(width + BLEED * 2));
+    svg.setAttribute("height", String(height + BLEED * 2));
+    svg.setAttribute("viewBox", `0 0 ${String(width + BLEED * 2)} ${String(height + BLEED * 2)}`);
+    const paths = [];
+    for (const drawable of sketch(generator, spec, width, height)) {
+        for (const info of generator.toPaths(drawable)) {
+            const path = element.ownerDocument.createElementNS(SVG_NS, "path");
+            path.setAttribute("d", info.d);
+            path.setAttribute("stroke", info.stroke);
+            path.setAttribute("stroke-width", String(info.strokeWidth));
+            path.setAttribute("fill", info.fill ?? "none");
+            path.setAttribute("stroke-linecap", "round");
+            path.setAttribute("pathLength", "1");
+            paths.push(path);
+        }
+    }
+    svg.replaceChildren(...paths);
+    const delay = Number(element.dataset.roughDelay);
+    if (element.dataset.roughDelay && Number.isFinite(delay))
+        element.style.setProperty("--caps-rough-delay", `${String(delay)}s`);
+    element.dataset.roughDrawn = "";
+}
+let generatorPromise;
+function loadGenerator() {
+    generatorPromise ??= import("roughjs/bin/generator.js").then(({ RoughGenerator }) => new RoughGenerator());
+    return generatorPromise;
+}
+/**
+ * Draw every `[data-caps-rough]` element inside `root` (and `root` itself),
+ * loading Rough.js on first use, and redraw each one when its size changes.
+ * Returns a function that stops watching sizes. If Rough.js cannot load, the
+ * CSS fallback stays.
+ */
+export function drawRough(root = document) {
+    const elements = Array.from(root.querySelectorAll("[data-caps-rough]"));
+    if (root instanceof HTMLElement && root.dataset.capsRough !== undefined)
+        elements.unshift(root);
+    const marks = elements.flatMap((element) => {
+        const spec = readRoughSpec(element);
+        return spec ? [{ element, spec }] : [];
+    });
+    if (marks.length === 0)
+        return () => undefined;
+    let stopped = false;
+    let observer;
+    void loadGenerator()
+        .then((generator) => {
+        if (stopped)
+            return;
+        const sizes = new Map();
+        const redraw = (element, spec) => {
+            const size = `${String(element.offsetWidth)}x${String(element.offsetHeight)}`;
+            if (sizes.get(element) === size)
+                return;
+            sizes.set(element, size);
+            paint(generator, element, spec);
+        };
+        for (const { element, spec } of marks)
+            redraw(element, spec);
+        const browser = globalThis;
+        if (!("ResizeObserver" in globalThis) || !browser.ResizeObserver)
+            return;
+        const specs = new Map(marks.map(({ element, spec }) => [element, spec]));
+        observer = new browser.ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const element = entry.target;
+                if (!(element instanceof HTMLElement))
+                    continue;
+                const spec = specs.get(element);
+                if (spec)
+                    redraw(element, spec);
+            }
+        });
+        for (const { element } of marks)
+            observer.observe(element);
+    })
+        .catch((cause) => {
+        console.error("Caps rough drawing failed; CSS fallback remains.", cause);
+    });
+    return () => {
+        stopped = true;
+        observer?.disconnect();
+    };
+}

package/dist/components/rough.d.ts

@@ -0,0 +1,68 @@
+import { type HTMLAttributes } from "react";
+import { type RoughMark, type RoughTone } from "./rough-drawing.js";
+export type { RoughMark, RoughTone } from "./rough-drawing.js";
+/** Props accepted by Rough. */
+export type RoughProps = {
+    /** The mark: a box, underline, circle, highlight, speech bubble or line. */
+    mark: RoughMark;
+    /** Theme ink (the default) or the primary accent. */
+    tone?: RoughTone;
+    /** Fixes the wobble, so the mark looks the same on every render. */
+    seed?: number;
+    /** Stroke width in CSS pixels. */
+    weight?: number;
+    /** 0 is a ruler, 3 is a scribble. */
+    roughness?: number;
+    /** Fill inside a box, circle or bubble. */
+    fill?: "none" | "solid" | "hachure";
+    /** For `bubble`: the lower corner its tail leaves from. */
+    tail?: "left" | "right" | "none";
+    /** For `line`: percent points in the box, e.g. `0,100 100,0`. */
+    points?: string;
+    /**
+     * Draw the mark in once, stroke by stroke, after `delay`. Skipped for
+     * reduced motion.
+     */
+    animate?: boolean;
+    /** Seconds to wait before an `animate` mark draws in (default 0.2). */
+    delay?: number;
+    /** Render as a block (`div`) instead of inline (`span`). */
+    block?: boolean;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * A hand-drawn Rough.js mark (box, underline, circle, highlight, speech bubble
+ * or leader line) around its children, in theme ink or primary. Rough.js loads
+ * lazily after hydration; until then, and without JavaScript, a plain CSS
+ * border, underline or tint stands in. The mark is `aria-hidden` and never
+ * takes pointer events, so the children keep their focus rings and clicks.
+ *
+ * Static pages can write the same attributes (see {@link drawRough}) instead
+ * of hydrating this component.
+ */
+export declare const Rough: import("react").ForwardRefExoticComponent<{
+    /** The mark: a box, underline, circle, highlight, speech bubble or line. */
+    mark: RoughMark;
+    /** Theme ink (the default) or the primary accent. */
+    tone?: RoughTone;
+    /** Fixes the wobble, so the mark looks the same on every render. */
+    seed?: number;
+    /** Stroke width in CSS pixels. */
+    weight?: number;
+    /** 0 is a ruler, 3 is a scribble. */
+    roughness?: number;
+    /** Fill inside a box, circle or bubble. */
+    fill?: "none" | "solid" | "hachure";
+    /** For `bubble`: the lower corner its tail leaves from. */
+    tail?: "left" | "right" | "none";
+    /** For `line`: percent points in the box, e.g. `0,100 100,0`. */
+    points?: string;
+    /**
+     * Draw the mark in once, stroke by stroke, after `delay`. Skipped for
+     * reduced motion.
+     */
+    animate?: boolean;
+    /** Seconds to wait before an `animate` mark draws in (default 0.2). */
+    delay?: number;
+    /** Render as a block (`div`) instead of inline (`span`). */
+    block?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/rough.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
+import { cn } from "../lib/cn.js";
+import { drawRough } from "./rough-drawing.js";
+/**
+ * A hand-drawn Rough.js mark (box, underline, circle, highlight, speech bubble
+ * or leader line) around its children, in theme ink or primary. Rough.js loads
+ * lazily after hydration; until then, and without JavaScript, a plain CSS
+ * border, underline or tint stands in. The mark is `aria-hidden` and never
+ * takes pointer events, so the children keep their focus rings and clicks.
+ *
+ * Static pages can write the same attributes (see {@link drawRough}) instead
+ * of hydrating this component.
+ */
+export const Rough = forwardRef(({ mark, tone = "ink", seed = 7, weight, roughness, fill, tail, points, animate = false, delay, block = false, className, children, ...props }, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => {
+        if (!ref.current)
+            throw new Error("Rough is not mounted");
+        return ref.current;
+    }, []);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        return drawRough(element);
+    }, [mark, seed, weight, roughness, fill, tail, points]);
+    const Element = block ? "div" : "span";
+    return (_jsx(Element, { ...props, ref: (element) => {
+            ref.current = element;
+        }, className: cn("caps-rough", `caps-rough-${mark}`, tone === "primary" && "caps-rough-primary", className), "data-caps-rough": mark, "data-rough-seed": seed, "data-rough-weight": weight, "data-rough-roughness": roughness, "data-rough-fill": fill, "data-rough-tail": tail, "data-rough-points": points, "data-rough-animate": animate ? "" : undefined, "data-rough-delay": delay, children: children }));
+});
+Rough.displayName = "Rough";

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from "react";
+import { type SurfaceProps } from "./surface.js";
+/** Native scrolling with a plastic thumb responding to changes in scroll speed.
+ * The ref and native props address the viewport; className sizes the frame.
+ */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    surface?: boolean;
+    surfaceSize?: SurfaceProps["size"];
+    surfaceDepth?: SurfaceProps["depth"];
+    /** Use the shared theme-aware display material on the fixed viewport. */
+    screen?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { animate } from "animejs";
+import { forwardRef, useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+import { readMotion, useReducedMotion } from "../lib/motion.js";
+import { themedEase, themedSpring } from "../lib/motion-spring.js";
+import { overscrollImpulse, scrollImpulse } from "./scroll-motion.js";
+import { Screen, Surface } from "./surface.js";
+/** Native scrolling with a plastic thumb responding to changes in scroll speed.
+ * The ref and native props address the viewport; className sizes the frame.
+ */
+export const ScrollArea = forwardRef(function ScrollArea({ children, className, surface = false, surfaceSize, surfaceDepth, screen = false, ...props }, ref) {
+    const root = useRef(null);
+    const thumbSurface = useRef(null);
+    const reduced = useReducedMotion();
+    useEffect(() => {
+        const frame = root.current;
+        const viewport = frame?.querySelector(".caps-scroll-viewport");
+        if (!viewport || !frame)
+            return;
+        let motion = null;
+        let idle;
+        let position = viewport.scrollTop;
+        let time = performance.now();
+        let velocity = 0;
+        const deform = (impulse) => {
+            const thumb = thumbSurface.current;
+            if (!impulse || reduced || !thumb)
+                return;
+            motion?.cancel();
+            thumb.style.transformOrigin = impulse.origin;
+            const feel = readMotion(thumb);
+            const kick = themedEase(feel, { ease: "outQuad", duration: 45 });
+            const settle = themedSpring(feel, { bounce: 0.18, duration: 180 });
+            motion = animate(thumb, {
+                scaleY: [
+                    { to: impulse.scaleY, ...kick },
+                    { to: 1, ...settle },
+                ],
+                scaleX: [
+                    { to: impulse.scaleX, ...kick },
+                    { to: 1, ...settle },
+                ],
+            });
+        };
+        const react = (nextVelocity, elapsed) => {
+            const impulse = scrollImpulse(velocity, nextVelocity, elapsed);
+            velocity = nextVelocity;
+            deform(impulse);
+        };
+        const onWheel = (event) => {
+            if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+                return;
+            const unit = event.deltaMode === 1
+                ? 16
+                : event.deltaMode === 2
+                    ? viewport.clientHeight
+                    : 1;
+            const impulse = overscrollImpulse(viewport.scrollTop, viewport.scrollHeight - viewport.clientHeight, event.deltaY * unit);
+            if (!impulse)
+                return;
+            clearTimeout(idle);
+            velocity = 0;
+            deform(impulse);
+        };
+        const onScroll = () => {
+            const now = performance.now();
+            const gap = now - time;
+            const elapsed = gap > 100 ? 16 : Math.max(16, gap);
+            const delta = viewport.scrollTop - position;
+            if (gap > 100)
+                velocity = 0;
+            react(delta / elapsed, elapsed);
+            position = viewport.scrollTop;
+            time = now;
+            clearTimeout(idle);
+            idle = setTimeout(() => {
+                react(0, 32);
+            }, 64);
+        };
+        viewport.addEventListener("scroll", onScroll, { passive: true });
+        frame.addEventListener("wheel", onWheel, { passive: true });
+        return () => {
+            clearTimeout(idle);
+            motion?.cancel();
+            // A preference change re-runs this effect: never strand a squash.
+            if (thumbSurface.current)
+                thumbSurface.current.style.transform = "none";
+            viewport.removeEventListener("scroll", onScroll);
+            frame.removeEventListener("wheel", onWheel);
+        };
+    }, [screen, surface, reduced]);
+    const viewport = (_jsx(BaseScrollArea.Viewport, { render: screen ? _jsx(Screen, {}) : _jsx("div", {}), ...props, ref: ref, className: "caps-scroll-viewport", children: _jsx(BaseScrollArea.Content, { style: { minWidth: 0 }, children: children }) }));
+    return (_jsxs(BaseScrollArea.Root, { render: surface ? (_jsx(Surface, { size: surfaceSize ?? "md", depth: surfaceDepth ?? "shallow" })) : (_jsx("div", {})), ref: root, className: cn("caps-scroll-area", className), children: [screen ? (_jsx("div", { className: "caps-display-gasket caps-scroll-display", children: viewport })) : (viewport), _jsx(Surface, { size: "sm", depth: "deep", placement: "embedded", className: "caps-scroll-track-surface", children: _jsx(BaseScrollArea.Scrollbar, { className: "caps-scroll-track", children: _jsx(BaseScrollArea.Thumb, { className: "caps-scroll-thumb", children: _jsx("span", { className: "caps-scroll-thumb-surface", ref: thumbSurface }) }) }) })] }));
+});

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

@@ -0,0 +1,12 @@
+/** @internal Velocities are signed pixels/ms. Only meaningful speed changes deform the thumb. */
+export declare function scrollImpulse(previousVelocity: number, velocity: number, elapsed: number): {
+    scaleY: number;
+    scaleX: number;
+    origin: string;
+} | null;
+/** @internal Wheel/trackpad pressure at an edge compresses toward that edge. */
+export declare function overscrollImpulse(position: number, maximum: number, delta: number): {
+    scaleY: number;
+    scaleX: number;
+    origin: string;
+} | null;

package/dist/components/scroll-motion.js

@@ -0,0 +1,31 @@
+/** @internal Velocities are signed pixels/ms. Only meaningful speed changes deform the thumb. */
+export function scrollImpulse(previousVelocity, velocity, elapsed) {
+    const acceleration = (Math.abs(velocity) - Math.abs(previousVelocity)) / Math.max(16, elapsed);
+    if (Math.abs(acceleration) < 0.035)
+        return null;
+    const amount = Math.min(0.04, Math.abs(acceleration) * 0.3);
+    const stretching = acceleration > 0;
+    const direction = Math.sign(velocity || previousVelocity);
+    return {
+        scaleY: 1 + (stretching ? amount : -amount),
+        scaleX: 1 + (stretching ? -amount / 2 : amount / 2),
+        origin: (stretching ? direction > 0 : direction < 0)
+            ? "center top"
+            : "center bottom",
+    };
+}
+/** @internal Wheel/trackpad pressure at an edge compresses toward that edge. */
+export function overscrollImpulse(position, maximum, delta) {
+    if (maximum <= 0 || Math.abs(delta) < 4)
+        return null;
+    const top = position <= 0 && delta < 0;
+    const bottom = position >= maximum - 1 && delta > 0;
+    if (!top && !bottom)
+        return null;
+    const amount = Math.min(0.06, (Math.abs(delta) / 120) * 0.06);
+    return {
+        scaleY: 1 - amount,
+        scaleX: 1 + amount / 2,
+        origin: top ? "center top" : "center bottom",
+    };
+}

package/dist/components/scroll-to-bottom-blob-state.d.ts

@@ -0,0 +1,40 @@
+import type { Motion } from "../lib/motion.js";
+/** Scroll layout used to measure the distance from the latest content. */
+export type ScrollDirection = "forward" | "reverse";
+/** The native geometry needed by the drop, in CSS pixels. */
+export type ScrollGeometry = Readonly<{
+    clientHeight: number;
+    scrollHeight: number;
+    scrollTop: number;
+}>;
+/** Distance from the visual end; column-reverse ends at scrollTop zero. */
+export declare function distanceToBottom(geometry: ScrollGeometry, direction: ScrollDirection): number;
+/** Theme-resolved physics and accessibility settings. */
+export type DropTokens = Pick<Motion, "springDuration" | "bounce" | "stretch" | "fast" | "reduced">;
+/** Continuous drop state; no DOM or timers are needed to advance it. */
+export type DropState = Readonly<{
+    phase: "hidden" | "welling" | "resting" | "tugged" | "merging";
+    shown: boolean;
+    jumped: boolean;
+    velocity: number;
+    y: number;
+    vy: number;
+    volume: number;
+    vv: number;
+    opacity: number;
+    unread: number;
+    bead: number;
+}>;
+/** One frame's scroll displacement, end distance, unread count and jump intent. */
+export type DropInput = Readonly<{
+    distance: number;
+    delta: number;
+    unread: number;
+    jump?: boolean;
+}>;
+/** A drop starts hidden until its scroller is more than 48px from the end. */
+export declare function createDropState(): DropState;
+/** Subtle unread volume, capped at fifteen percent. */
+export declare function unreadVolume(unread: number): number;
+/** Advance with bounded substeps so long browser frames cannot destabilize the springs. */
+export declare function stepDrop(previous: DropState, input: DropInput, elapsed: number, tokens: DropTokens): DropState;

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

@@ -0,0 +1,109 @@
+/** Distance from the visual end; column-reverse ends at scrollTop zero. */
+export function distanceToBottom(geometry, direction) {
+    return Math.max(0, direction === "reverse"
+        ? -geometry.scrollTop
+        : geometry.scrollHeight - geometry.clientHeight - geometry.scrollTop);
+}
+/** A drop starts hidden until its scroller is more than 48px from the end. */
+export function createDropState() {
+    return {
+        phase: "hidden",
+        shown: false,
+        jumped: false,
+        velocity: 0,
+        y: 0,
+        vy: 0,
+        volume: 0,
+        vv: 0,
+        opacity: 0,
+        unread: 0,
+        bead: 0,
+    };
+}
+/** Subtle unread volume, capped at fifteen percent. */
+export function unreadVolume(unread) {
+    return 1 + Math.min(0.15, 0.06 * Math.log2(1 + Math.max(0, unread)));
+}
+function spring(x, v, target, dt, omega, damping) {
+    const nextV = v + (-omega * omega * (x - target) - 2 * damping * omega * v) * dt;
+    return [x + nextV * dt, nextV];
+}
+/** Advance with bounded substeps so long browser frames cannot destabilize the springs. */
+export function stepDrop(previous, input, elapsed, tokens) {
+    const state = { ...previous };
+    const ms = Math.max(1, Math.min(64, elapsed));
+    const merging = input.jump === true || previous.jumped;
+    state.jumped = merging;
+    if (merging) {
+        state.phase = "merging";
+        state.shown = false;
+        state.unread = 0;
+        state.velocity = 0;
+    }
+    else {
+        if (input.distance > 48)
+            state.shown = true;
+        else if (input.distance < 8)
+            state.shown = false;
+        state.unread = state.shown ? Math.max(0, input.unread) : 0;
+        if (state.unread > previous.unread && state.shown && !tokens.reduced)
+            state.bead = 1;
+        state.velocity +=
+            (input.delta / ms - state.velocity) * (1 - Math.exp(-ms / 50));
+    }
+    if (!state.shown && previous.phase !== "hidden")
+        state.phase = "merging";
+    if (state.shown && !previous.shown)
+        state.phase = "welling";
+    const target = state.shown ? unreadVolume(state.unread) : 0;
+    if (previous.phase === "hidden" && state.shown) {
+        state.phase = "welling";
+        state.y = tokens.reduced ? 0 : 5;
+    }
+    if (tokens.reduced) {
+        state.y = 0;
+        state.vy = 0;
+        state.velocity = 0;
+        state.vv = 0;
+        state.bead = 0;
+        state.volume = unreadVolume(state.unread);
+        const fade = ms / Math.max(1, tokens.fast);
+        state.opacity = state.shown
+            ? Math.min(1, state.opacity + fade)
+            : Math.max(0, state.opacity - fade);
+    }
+    else {
+        const omega = (2 * Math.PI) / Math.max(0.08, tokens.springDuration / 1000);
+        const damping = Math.max(0.08, 1 - tokens.bounce);
+        const pull = Math.max(-9, Math.min(9, -state.velocity * 7));
+        const yTarget = merging ? 12 : state.shown ? pull : 4;
+        const steps = Math.ceil(ms / 8);
+        for (let n = 0; n < steps; n++) {
+            [state.y, state.vy] = spring(state.y, state.vy, yTarget, ms / steps / 1000, omega, damping);
+            [state.volume, state.vv] = spring(state.volume, state.vv, target, ms / steps / 1000, merging ? omega / 1.7 : omega, merging ? 1 : damping);
+        }
+        state.opacity = Math.min(1, Math.max(0, state.volume * 1.4));
+        state.bead = Math.max(0, state.bead - ms / 580);
+    }
+    if (!state.shown &&
+        (tokens.reduced
+            ? state.opacity === 0
+            : state.volume < 0.002 && Math.abs(state.vv) < 0.02))
+        return createDropState();
+    if (state.shown &&
+        Math.abs(state.volume - target) < 0.001 &&
+        Math.abs(state.vv) < 0.01 &&
+        Math.abs(state.y) < 0.02 &&
+        Math.abs(state.vy) < 0.2 &&
+        state.bead === 0) {
+        state.phase = "resting";
+        state.volume = target;
+        state.vv = 0;
+        state.y = 0;
+        state.vy = 0;
+        state.velocity = 0;
+    }
+    else if (state.shown && state.volume > 0.95)
+        state.phase = "tugged";
+    return state;
+}

package/dist/components/scroll-to-bottom-blob.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+import { type ScrollDirection } from "./scroll-to-bottom-blob-state.js";
+/** Props accepted by the persistent jump-to-bottom water drop. */
+export type ScrollToBottomBlobProps = {
+    /** Forward is ordinary DOM order; reverse supports column-reverse scrollers. */
+    direction?: ScrollDirection;
+    scrollerRef: RefObject<HTMLDivElement | null>;
+    /** Ask the host to scroll to its latest content. */
+    onJump: () => void;
+    /** Appended messages since the reader left the end. */
+    unread?: number;
+    /** Focus destination after keyboard activation; defaults to the scroller. */
+    focusAfterJump?: RefObject<HTMLElement | null>;
+};
+/** A continuously tugged water drop, with its own visibility and focus lifecycle. */
+export declare const ScrollToBottomBlob: import("react").NamedExoticComponent<ScrollToBottomBlobProps>;