@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/hold-to-confirm/hold-to-confirm.module.css

@@ -0,0 +1,20 @@
+/* The button hugs its label; the fill is a second, inverted copy of the face revealed by clip-path, so the text flips colour exactly at the edge. */
+/* The default tone follows the selected accent; danger stays available for a truly irreversible action. */
+.button { --hold-ink: var(--foreground); --hold-fill: var(--accent); --hold-on-fill: var(--accent-foreground); --hold-border: var(--border-strong); position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; padding: 0 var(--space-comfort); border: 1px solid var(--hold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--hold-ink); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+.button[data-tone="danger"] { --hold-ink: var(--danger); --hold-fill: var(--danger); --hold-on-fill: var(--background); --hold-border: color-mix(in oklab, var(--danger) 32%, var(--border)); }
+.button[data-tone="neutral"] { --hold-ink: var(--foreground); --hold-fill: var(--foreground); --hold-on-fill: var(--background); --hold-border: var(--border-strong); }
+@media (hover: hover) and (pointer: fine) { .button:not(:disabled):not([aria-disabled="true"]):hover { background: color-mix(in oklab, var(--hold-fill) 6%, var(--surface)); } }
+.button[aria-disabled="true"] { cursor: default; }
+.button:disabled { cursor: not-allowed; opacity: .5; }
+.face { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
+/* Covers the border too, and keeps its own rounded corners; the clip only ever cuts a straight leading edge. */
+.fill { position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-control); background: var(--hold-fill); color: var(--hold-on-fill); pointer-events: none; }
+.iconSlot { display: grid; width: 18px; height: 18px; flex: none; place-items: center; }
+.iconPhase { display: grid; grid-area: 1 / 1; place-items: center; }
+.iconPhase svg { width: 18px; height: 18px; }
+/* Clips the outgoing label while the frame narrows, with room for the rise and the soft blur. */
+.labelFrame { position: relative; display: inline-flex; min-width: 0; clip-path: inset(-.6em -3px); }
+.label { display: block; white-space: nowrap; }
+.measure { position: absolute; top: 0; left: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

package/components/hover-card/hover-card.d.ts

@@ -0,0 +1,38 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * A rich preview of a person or link that opens after a short hover or keyboard focus, for mentions, avatars, and references where a click should stay free for navigation.
+ * It waits half a second, opens almost at once when moving between triggers, stays open while the pointer travels into it, and closes fast on leave or Escape.
+ * On touch, a tap toggles it. Keep the content read only; anything actionable belongs behind the trigger itself.
+ */
+export interface HoverCardProps {
+    /** The trigger, such as a mention button or a link. It must accept a ref and be focusable. */
+    children: ReactElement;
+    /** The preview. `HoverCardProfile` covers people; any read only content works. */
+    content: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    /** Milliseconds of hover before the first card opens. */
+    openDelay?: number;
+    /** Milliseconds of grace after the pointer leaves, so it can travel into the card. */
+    closeDelay?: number;
+    className?: string;
+}
+export declare function HoverCard({ children, content, side, align, openDelay, closeDelay, className }: HoverCardProps): import("react").JSX.Element;
+export interface HoverCardStat {
+    label: string;
+    value: string | number;
+}
+/** A person preview for `HoverCard`: portrait, name, role, a short bio, a couple of numbers, and a quiet footer line. Its rows settle in with a tiny stagger. */
+export interface HoverCardProfileProps {
+    name: string;
+    /** Role and team, such as "Product designer, Payments". */
+    role?: string;
+    /** A portrait URL, or your own image element such as next/image. Initials show when it is missing. */
+    avatar?: string | ReactNode;
+    bio?: string;
+    stats?: HoverCardStat[];
+    /** A footer line, such as a location and local time. */
+    meta?: ReactNode;
+}
+export declare function HoverCardProfile({ name, role, avatar, bio, stats, meta }: HoverCardProfileProps): import("react").JSX.Element;
+export default HoverCard;

package/components/hover-card/hover-card.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./hover-card.module.css";
+const OPEN_DELAY = 500;
+const CLOSE_DELAY = 140;
+/** Moving to another trigger within this window opens its card almost at once. */
+const SKIP_WINDOW = 300;
+/** Even warm, a trigger waits this long, so a pointer crossing it on the way into an open card does not steal the card. */
+const INTENT = 80;
+/** How far the card starts toward its trigger, in px. */
+const TRAVEL = 4;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const IDLE = { id: null, instant: false };
+let snapshot = IDLE;
+let closedAt = -Infinity;
+const listeners = new Set();
+/** One hover card is open at a time on the page. While one is open, or just after it closes, the next one opens without waiting and only fades. */
+const cards = {
+    subscribe(listener) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+    get: () => snapshot,
+    server: () => IDLE,
+    warm: () => snapshot.id !== null || performance.now() - closedAt < SKIP_WINDOW,
+    open(id) { if (snapshot.id === id)
+        return; snapshot = { id, instant: cards.warm() }; listeners.forEach(listener => listener()); },
+    close(id) { if (snapshot.id !== id)
+        return; snapshot = IDLE; closedAt = performance.now(); listeners.forEach(listener => listener()); },
+};
+/** Grows from the trigger edge: scale from .96 around the placed origin and a 4px offset toward the trigger on one smooth spring, with its own fade.
+ *  Both retarget from where they are if the pointer comes back mid-exit, so the card turns around instead of jumping. */
+const Surface = forwardRef(function Surface({ instant, reduced, className, style, children, ...props }, forwardedRef) {
+    const [isPresent, safeToRemove] = usePresence();
+    const node = useRef(null);
+    const progress = useMotionValue(0);
+    const x = useMotionValue(0), y = useMotionValue(0), scale = useMotionValue(1), opacity = useMotionValue(0);
+    // Decided when the card mounts: a card revived mid-exit keeps the path it came in on, even though the page is now warm.
+    const [still] = useState(() => instant || reduced);
+    const setRef = useCallback((element) => {
+        node.current = element;
+        if (typeof forwardedRef === "function")
+            forwardedRef(element);
+        else if (forwardedRef)
+            forwardedRef.current = element;
+    }, [forwardedRef]);
+    useEffect(() => {
+        let cancelled = false;
+        // The side is read from the placed card every frame, so a card that flips above its trigger still grows from the trigger edge.
+        const apply = (value) => {
+            const side = node.current?.dataset.side;
+            const travel = still ? 0 : (1 - value) * TRAVEL;
+            x.set(side === "left" ? travel : side === "right" ? -travel : 0);
+            y.set(side === "top" ? travel : side === "bottom" ? -travel : 0);
+            scale.set(still ? 1 : .96 + .04 * value);
+        };
+        const unsubscribe = progress.on("change", apply);
+        apply(progress.get());
+        const controls = isPresent
+            ? animate(progress, 1, still ? { duration: .14, ease: enter } : motionTokens.spring.smooth)
+            : animate(progress, 0, { duration: .12, ease: standard });
+        // The fade leads the grow on the way in and runs alongside it on the way out; it starts from the current opacity either way.
+        const fade = isPresent
+            ? animate(opacity, 1, { duration: reduced ? .15 : still ? .09 : .16, ease: enter })
+            : animate(opacity, 0, { duration: reduced ? .1 : .12, ease: standard });
+        if (!isPresent)
+            fade.then(() => { if (!cancelled)
+                safeToRemove?.(); });
+        return () => { cancelled = true; unsubscribe(); controls.stop(); fade.stop(); };
+    }, [isPresent, still, reduced, progress, x, y, scale, opacity, safeToRemove]);
+    return _jsx(motion.div, { ...props, ref: setRef, className: [styles.card, className].filter(Boolean).join(" "), style: { ...style, x, y, scale, opacity }, children: children });
+});
+export function HoverCard({ children, content, side = "bottom", align = "start", openDelay = OPEN_DELAY, closeDelay = CLOSE_DELAY, className }) {
+    const id = useId();
+    const cardId = `${id}-card`;
+    const state = useSyncExternalStore(cards.subscribe, cards.get, cards.server);
+    const open = state.id === id;
+    const reduced = useReducedMotion() ?? false;
+    const triggerRef = useRef(null);
+    const timers = useRef({ open: 0, close: 0 });
+    const inside = useRef({ trigger: false, card: false, focus: false });
+    /** Set by Escape, so a pointer resting on the trigger does not reopen what was just dismissed. */
+    const dismissed = useRef(false);
+    const pointerType = useRef("");
+    useEffect(() => {
+        const pending = timers.current;
+        return () => { window.clearTimeout(pending.open); window.clearTimeout(pending.close); cards.close(id); };
+    }, [id]);
+    const clearTimers = () => { window.clearTimeout(timers.current.open); window.clearTimeout(timers.current.close); };
+    const show = () => { clearTimers(); dismissed.current = false; cards.open(id); };
+    const hide = () => { clearTimers(); cards.close(id); };
+    const scheduleOpen = () => {
+        window.clearTimeout(timers.current.close);
+        if (dismissed.current || cards.get().id === id)
+            return;
+        window.clearTimeout(timers.current.open);
+        timers.current.open = window.setTimeout(() => cards.open(id), cards.warm() ? INTENT : openDelay);
+    };
+    const scheduleClose = () => {
+        window.clearTimeout(timers.current.open);
+        const { trigger, card, focus } = inside.current;
+        if (trigger || card || focus)
+            return;
+        window.clearTimeout(timers.current.close);
+        timers.current.close = window.setTimeout(() => cards.close(id), closeDelay);
+    };
+    const mouse = (event) => event.pointerType !== "touch";
+    return _jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: next => { if (!next)
+            hide(); }, children: [_jsx(PopoverPrimitive.Anchor, { asChild: true, ref: triggerRef, "aria-describedby": open ? cardId : undefined, "data-hover-card": open ? "open" : "closed", onPointerEnter: (event) => { if (!mouse(event))
+                    return; inside.current.trigger = true; scheduleOpen(); }, onPointerLeave: (event) => { if (!mouse(event))
+                    return; inside.current.trigger = false; dismissed.current = false; scheduleClose(); }, onPointerDown: (event) => { pointerType.current = event.pointerType; }, onClick: () => {
+                    // A tap toggles the card on touch; a click or Enter opens it without the wait.
+                    const isOpen = cards.get().id === id;
+                    if (pointerType.current === "touch") {
+                        if (isOpen)
+                            hide();
+                        else
+                            show();
+                    }
+                    else if (!isOpen)
+                        show();
+                    pointerType.current = "";
+                }, onFocus: (event) => { if (!event.currentTarget.matches(":focus-visible"))
+                    return; inside.current.focus = true; show(); }, onBlur: () => { inside.current.focus = false; dismissed.current = false; scheduleClose(); }, children: children }), _jsx(AnimatePresence, { children: open && _jsx(PopoverPrimitive.Portal, { forceMount: true, children: _jsx(PopoverPrimitive.Content, { forceMount: true, asChild: true, id: cardId, role: "tooltip", side: side, align: align, sideOffset: 8, collisionPadding: 12, onOpenAutoFocus: event => event.preventDefault(), onCloseAutoFocus: event => event.preventDefault(), onEscapeKeyDown: () => { dismissed.current = true; }, onInteractOutside: event => { if (triggerRef.current?.contains(event.target))
+                            event.preventDefault(); }, onPointerEnter: (event) => { if (!mouse(event))
+                            return; inside.current.card = true; window.clearTimeout(timers.current.close); }, onPointerLeave: (event) => { if (!mouse(event))
+                            return; inside.current.card = false; scheduleClose(); }, children: _jsx(Surface, { instant: state.instant, reduced: reduced, className: className, children: content }) }) }, "card") })] });
+}
+function Portrait({ src }) {
+    const image = useRef(null);
+    // A cached portrait shows at once; one still downloading fades in from a soft blur.
+    useLayoutEffect(() => { const node = image.current; if (node && !node.complete)
+        node.dataset.loading = ""; }, [src]);
+    // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic; pass next/image through `avatar` instead.
+    return _jsx("img", { ref: image, src: src, alt: "", width: 48, height: 48, decoding: "async", onLoad: event => { delete event.currentTarget.dataset.loading; } });
+}
+export function HoverCardProfile({ name, role, avatar, bio, stats = [], meta }) {
+    const reduced = useReducedMotion() ?? false;
+    const initials = name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+    const settle = (order) => reduced ? {} : { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, transition: { duration: motionTokens.duration.standard, ease: enter, delay: .04 + order * motionTokens.stagger.item } };
+    return _jsxs("div", { className: styles.profile, children: [_jsxs(motion.div, { className: styles.head, ...settle(0), children: [_jsx("span", { className: styles.avatar, "aria-hidden": "true", children: typeof avatar === "string" ? _jsx(Portrait, { src: avatar }) : avatar ?? _jsx("span", { className: styles.initials, children: initials }) }), _jsxs("span", { className: styles.identity, children: [_jsx("span", { className: styles.name, children: name }), role && _jsx("span", { className: styles.role, children: role })] })] }), bio && _jsx(motion.p, { className: styles.bio, ...settle(1), children: bio }), stats.length > 0 && _jsx(motion.dl, { className: styles.stats, ...settle(2), children: stats.map(stat => _jsxs("div", { className: styles.stat, children: [_jsx("dt", { children: stat.label }), _jsx("dd", { children: stat.value })] }, stat.label)) }), meta && _jsx(motion.div, { className: styles.meta, ...settle(3), children: meta })] });
+}
+export default HoverCard;

package/components/hover-card/hover-card.module.css

@@ -0,0 +1,20 @@
+/* A floating layer, so it earns the floating shadow. Transforms pivot on the placed origin, the corner nearest the trigger. */
+.card { z-index: 60; box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
+.profile { display: grid; gap: var(--space-group); }
+.head { display: flex; min-width: 0; align-items: center; gap: var(--space-group); }
+.avatar { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
+.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-standard) var(--ease-enter), filter var(--duration-standard) var(--ease-enter); }
+.avatar img[data-loading] { opacity: 0; filter: blur(4px); transition: none; }
+.identity { display: grid; min-width: 0; }
+.name, .role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.name { color: var(--foreground); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); }
+.role { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.bio { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+/* Numbers lead and labels follow, while the markup keeps label then value for screen readers. */
+.stats { display: flex; flex-wrap: wrap; gap: var(--space-related) var(--space-section); margin: 0; padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
+.stat { display: flex; flex-direction: column-reverse; }
+.stat dt { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.stat dd { margin: 0; color: var(--foreground); font-size: var(--text-base); font-variant-numeric: tabular-nums; font-weight: 500; line-height: var(--leading-body); }
+.meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.meta svg { flex: none; }
+@media (prefers-reduced-motion: reduce) { .avatar img { transition: none; } .avatar img[data-loading] { filter: none; } }

package/components/image-compare/image-compare.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface ImageCompareProps {
+    /** The original, shown on the left (or top). Pass an image with its own alt text; it is sized to cover the frame. */
+    before: ReactNode;
+    /** The result, shown on the right (or bottom). */
+    after: ReactNode;
+    /** Where the divider sits, in percent from the left (or top). */
+    position?: number;
+    defaultPosition?: number;
+    onPositionChange?: (position: number) => void;
+    /** Vertical stacks the images top and bottom. Changing it swings the divider a quarter turn instead of swapping layouts. */
+    orientation?: "horizontal" | "vertical";
+    /** Captions over each side. They fade as the divider reaches them. Pass false to hide them. */
+    labels?: [string, string] | false;
+    /** Accessible name of the divider. */
+    label?: string;
+    /** Frame proportions, as a CSS aspect-ratio. */
+    aspectRatio?: string;
+    className?: string;
+}
+/**
+ * Before and after, split by a divider. Drag anywhere to move it: the handle follows 1:1, rubber-bands past the edges, and stays where it
+ * is released. A press on the image springs the divider there; on touch the press waits to see a sideways drag so the page still scrolls.
+ * Arrow keys step 1% (Shift for 10%), Home and End reveal one side fully, and a double-click on the handle springs it back to the middle.
+ */
+export declare function ImageCompare({ before, after, position, defaultPosition, onPositionChange, orientation, labels, label, aspectRatio, className }: ImageCompareProps): import("react").JSX.Element;
+export default ImageCompare;

package/components/image-compare/image-compare.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./image-compare.module.css";
+const { spring } = motionTokens;
+/** Motion drops velocity on time-defined springs, so hand-offs run the same springs written as stiffness and damping, settling far below a pixel. */
+const physical = ({ visualDuration, bounce }) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta: .002, restSpeed: .02 }; };
+const moveSpring = physical(spring.snappy);
+const turnSpring = physical(spring.morph);
+const kickSpring = physical(spring.morph);
+/** Rubber-band travel past an edge, the handle's inset from the frame, how far it gives inside that inset, and a key press at a limit. */
+const STRETCH = 9, MARGIN = 42, GIVE = 12, BUMP_PX = 150, INSET = 12;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const lerp = (from, to, amount) => from + (to - from) * amount;
+/** iOS style resistance: travel past a limit gives less and less, and never more than `limit` pixels. */
+const rubber = (distance, limit = STRETCH) => Math.sign(distance) * (1 - 1 / (Math.abs(distance) * .55 / limit + 1)) * limit;
+/** The handle keeps the line's pace in the middle and slows smoothly near an edge, so it is never cut off and never stops dead. */
+const give = (distance) => GIVE * (1 - 1 / (distance / GIVE + 1));
+const soften = (at, size) => at < MARGIN ? MARGIN - give(MARGIN - at) : at > size - MARGIN ? size - MARGIN + give(at - size + MARGIN) : at;
+const fade = (room) => clamp(room / 28, 0, 1);
+/** The before side of a line through `center` at `angle`, cut from the frame: the clip while the divider turns. */
+function halfPlane(w, h, center, angle) {
+    const nx = -Math.cos(angle), ny = -Math.sin(angle);
+    const side = ([x, y]) => (x - center[0]) * nx + (y - center[1]) * ny;
+    const corners = [[0, 0], [w, 0], [w, h], [0, h]];
+    const points = [];
+    corners.forEach((corner, index) => {
+        const next = corners[(index + 1) % 4], a = side(corner), b = side(next);
+        if (a >= 0)
+            points.push(corner);
+        if ((a >= 0) !== (b >= 0)) {
+            const t = a / (a - b);
+            points.push([corner[0] + (next[0] - corner[0]) * t, corner[1] + (next[1] - corner[1]) * t]);
+        }
+    });
+    return points.length ? `polygon(${points.map(([x, y]) => `${x.toFixed(2)}px ${y.toFixed(2)}px`).join(", ")})` : "inset(50%)";
+}
+/**
+ * Before and after, split by a divider. Drag anywhere to move it: the handle follows 1:1, rubber-bands past the edges, and stays where it
+ * is released. A press on the image springs the divider there; on touch the press waits to see a sideways drag so the page still scrolls.
+ * Arrow keys step 1% (Shift for 10%), Home and End reveal one side fully, and a double-click on the handle springs it back to the middle.
+ */
+export function ImageCompare({ before, after, position, defaultPosition = 50, onPositionChange, orientation = "horizontal", labels = ["Before", "After"], label = "Before and after", aspectRatio = "3 / 2", className }) {
+    const reduced = useReducedMotion();
+    const vertical = orientation === "vertical";
+    const [internal, setInternal] = useState(defaultPosition);
+    const current = clamp(position ?? internal, 0, 100);
+    const afterShare = Math.round(100 - current);
+    const rootRef = useRef(null);
+    const handleRef = useRef(null);
+    const beforeChip = useRef(null);
+    const afterChip = useRef(null);
+    const latest = useRef(current);
+    const goal = useRef(current);
+    const drag = useRef(null);
+    const pressedHandle = useRef(false);
+    const [dragging, setDragging] = useState(false);
+    const [quiet, setQuiet] = useState(false);
+    // The divider is a committed position plus a catch-up offset: a press springs the offset to zero while the pointer moves the position
+    // 1:1, so the divider glides to the finger and never trails it.
+    const pos = useMotionValue(current), lag = useMotionValue(0);
+    const theta = useMotionValue(vertical ? 90 : 0);
+    const metrics = useMotionValue({ w: 0, h: 0, bw: 0, bh: 0, aw: 0, ah: 0 });
+    const shown = useTransform(() => pos.get() + lag.get());
+    const turn = useTransform(() => clamp(theta.get() / 90, 0, 1));
+    /** The divider's pivot in pixels, blending from the horizontal to the vertical layout as it turns. */
+    const center = (p, m) => [lerp((p / 100) * m.w, m.w / 2, turn.get()), lerp(m.h / 2, (p / 100) * m.h, turn.get())];
+    // At rest every style is a percentage, so the server renders it and a resize never lags; only a turn in progress uses pixels.
+    const clipPath = useTransform(() => {
+        const angle = theta.get(), p = clamp(shown.get(), 0, 100), m = metrics.get();
+        if (angle === 0 || !m.w)
+            return angle >= 45 ? `inset(0 0 ${(100 - p).toFixed(3)}% 0)` : `inset(0 ${(100 - p).toFixed(3)}% 0 0)`;
+        if (angle === 90)
+            return `inset(0 0 ${(100 - p).toFixed(3)}% 0)`;
+        return halfPlane(m.w, m.h, center(p, m), (angle * Math.PI) / 180);
+    });
+    const rest = (angle, m) => angle === 0 || angle === 90 || !m.w;
+    const pivotX = useTransform(() => { const angle = theta.get(), m = metrics.get(); return rest(angle, m) ? (angle >= 45 ? "50%" : `${shown.get()}%`) : `${center(shown.get(), m)[0]}px`; });
+    const pivotY = useTransform(() => { const angle = theta.get(), m = metrics.get(); return rest(angle, m) ? (angle >= 45 ? `${shown.get()}%` : "50%") : `${center(shown.get(), m)[1]}px`; });
+    /** How far the handle sits from the line along the drag axis, so it stays whole near an edge. */
+    const offset = () => { const m = metrics.get(); if (!m.w)
+        return 0; const p = shown.get(), x = (p / 100) * m.w, y = (p / 100) * m.h; return lerp(soften(x, m.w) - x, soften(y, m.h) - y, turn.get()); };
+    const handleX = useTransform(() => offset() * Math.cos((theta.get() * Math.PI) / 180));
+    const handleY = useTransform(() => offset() * Math.sin((theta.get() * Math.PI) / 180));
+    // Captions fade as the divider reaches them, and hand over mid-turn when the after caption changes corner.
+    const beforeOpacity = useTransform(() => {
+        const m = metrics.get(), k = turn.get(), p = clamp(shown.get(), 0, 100), across = clamp(1 - k * 3, 0, 1), down = clamp(k * 3 - 2, 0, 1);
+        if (!m.w)
+            return across + down;
+        return across * fade((p / 100) * m.w - (INSET + m.bw + 8)) + down * fade((p / 100) * m.h - (INSET + m.bh + 8));
+    });
+    const afterAcross = useTransform(() => { const m = metrics.get(), k = clamp(1 - turn.get() * 3, 0, 1); return m.w ? k * fade(m.w - INSET - m.aw - 8 - (clamp(shown.get(), 0, 100) / 100) * m.w) : k; });
+    const afterDown = useTransform(() => { const m = metrics.get(), k = clamp(turn.get() * 3 - 2, 0, 1); return m.w ? k * fade(m.h - INSET - m.ah - 8 - (clamp(shown.get(), 0, 100) / 100) * m.h) : k; });
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => metrics.set({ w: root.clientWidth, h: root.clientHeight, bw: beforeChip.current?.offsetWidth ?? 0, bh: beforeChip.current?.offsetHeight ?? 0, aw: afterChip.current?.offsetWidth ?? 0, ah: afterChip.current?.offsetHeight ?? 0 });
+        const observer = new ResizeObserver(measure);
+        [root, beforeChip.current, afterChip.current].forEach(node => node && observer.observe(node));
+        measure();
+        return () => observer.disconnect();
+    }, [metrics]);
+    // A new orientation swings the divider a quarter turn about its pivot while the clip follows it.
+    useEffect(() => {
+        const target = vertical ? 90 : 0;
+        if (theta.get() === target)
+            return;
+        if (reduced)
+            theta.jump(target);
+        else
+            animate(theta, target, turnSpring);
+    }, [reduced, theta, vertical]);
+    // Positions that arrive from outside a drag (props, keys, a double-click) spring the divider there.
+    useLayoutEffect(() => {
+        latest.current = current;
+        if (drag.current?.started || goal.current === current)
+            return;
+        goal.current = current;
+        const from = pos.get() + lag.get();
+        lag.jump(0);
+        pos.jump(from);
+        if (reduced)
+            pos.jump(current);
+        else
+            animate(pos, current, moveSpring);
+    });
+    function commit(next, live = false) {
+        if (live && Math.round(next) === Math.round(latest.current))
+            return;
+        const value = Number(next.toFixed(2));
+        if (value === latest.current)
+            return;
+        latest.current = value;
+        if (position === undefined)
+            setInternal(value);
+        onPositionChange?.(value);
+    }
+    const percentAt = (event) => {
+        const rect = rootRef.current.getBoundingClientRect();
+        return vertical ? ((event.clientY - rect.top) / (rect.height || 1)) * 100 : ((event.clientX - rect.left) / (rect.width || 1)) * 100;
+    };
+    const axisSize = () => { const rect = rootRef.current?.getBoundingClientRect(); return (vertical ? rect?.height : rect?.width) || 1; };
+    /** Focus that follows a pointer keeps the handle quiet: no ring until a key is pressed. */
+    function focusQuietly() {
+        const node = handleRef.current;
+        if (!node || document.activeElement === node)
+            return;
+        setQuiet(true);
+        node.focus({ preventScroll: true });
+    }
+    function start(state, at) {
+        const from = pos.get() + lag.get();
+        state.started = true;
+        state.grab = state.press ? 0 : at - from;
+        lag.jump(0);
+        pos.jump(from);
+        setDragging(true);
+        focusQuietly();
+        follow(state, at, true);
+    }
+    /** Puts the line under the pointer, with resistance past the edges, and commits the position once per whole percent. */
+    function follow(state, at, first = false) {
+        const raw = at - state.grab, size = axisSize();
+        const edge = clamp(raw, 0, 100);
+        const placed = reduced ? edge : edge + (rubber(((raw - edge) / 100) * size) / size) * 100;
+        state.raw = raw;
+        if (first && state.press && !reduced) {
+            const from = pos.get();
+            pos.jump(placed);
+            lag.jump(from - placed);
+            animate(lag, 0, moveSpring);
+        }
+        else
+            pos.set(placed);
+        commit(edge, true);
+    }
+    function onPointerDown(event) {
+        if (event.button !== 0 || !event.isPrimary || !rootRef.current)
+            return;
+        const onHandle = !!event.target.closest("[data-handle]");
+        pressedHandle.current = onHandle;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const state = { pointer: event.pointerId, grab: 0, press: !onHandle, started: false, x: event.clientX, y: event.clientY, raw: 0 };
+        drag.current = state;
+        // A finger on the photo might be scrolling the page, so it waits for a sideways drag; a mouse or the handle answers at once.
+        if (event.pointerType !== "touch" || onHandle)
+            start(state, percentAt(event));
+    }
+    function onPointerMove(event) {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        if (!state.started) {
+            const along = Math.abs(vertical ? event.clientY - state.y : event.clientX - state.x), across = Math.abs(vertical ? event.clientX - state.x : event.clientY - state.y);
+            if (along < 6 && across < 6)
+                return;
+            if (across > along) {
+                drag.current = null;
+                return;
+            }
+            start(state, percentAt(event));
+            return;
+        }
+        follow(state, percentAt(event));
+    }
+    function onPointerEnd(event) {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        drag.current = null;
+        // A tap on the photo moves the divider there.
+        if (!state.started) {
+            if (event.type === "pointerup") {
+                focusQuietly();
+                commit(clamp(percentAt(event), 0, 100));
+            }
+            return;
+        }
+        // The divider stays where it was let go. Past an edge, or still catching up to a press, it springs on with the speed it had.
+        const from = pos.get() + lag.get(), velocity = lag.getVelocity() + (from > 100 || from < 0 ? pos.getVelocity() : 0);
+        const target = clamp(lag.get() !== 0 ? state.raw : from, 0, 100);
+        lag.jump(0);
+        pos.jump(from);
+        goal.current = Number(target.toFixed(2));
+        if (from !== target) {
+            if (reduced)
+                pos.jump(target);
+            else
+                animate(pos, target, { ...moveSpring, velocity });
+        }
+        commit(target);
+        setDragging(false);
+    }
+    function onKeyDown(event) {
+        const large = event.shiftKey ? 10 : 1;
+        // Keys move the divider the way they point along its axis; the other two follow the value, where up and right mean more of the after image.
+        const toward = vertical ? { ArrowUp: -large, ArrowDown: large, ArrowRight: -large, ArrowLeft: large, PageUp: -10, PageDown: 10 } : { ArrowLeft: -large, ArrowRight: large, ArrowUp: -large, ArrowDown: large, PageUp: -10, PageDown: 10 };
+        let next;
+        if (event.key === "Home")
+            next = 100;
+        else if (event.key === "End")
+            next = 0;
+        else if (event.key in toward)
+            next = Math.round(latest.current) + toward[event.key];
+        else
+            return;
+        event.preventDefault();
+        setQuiet(false);
+        const clamped = clamp(next, 0, 100);
+        if (clamped === latest.current) {
+            if (!reduced && next !== clamped)
+                animate(pos, goal.current, { ...kickSpring, velocity: (Math.sign(next - clamped) * BUMP_PX / axisSize()) * 100 });
+            return;
+        }
+        commit(clamped);
+    }
+    const capsule = dragging ? (vertical ? { width: 36, height: 56 } : { width: 56, height: 36 }) : { width: 40, height: 40 };
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-orientation": orientation, "data-dragging": dragging || undefined, "data-frame-keep": "", style: { aspectRatio }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onLostPointerCapture: onPointerEnd, onMouseDown: event => event.preventDefault(), onDragStart: event => event.preventDefault(), 
+        // Pointer capture sends the double-click to the frame, so it checks where the presses began.
+        onDoubleClick: () => { if (pressedHandle.current && latest.current !== 50)
+            commit(50); }, children: [_jsx("div", { className: styles.layer, children: after }), _jsx(motion.div, { className: styles.layer, style: { clipPath }, children: before }), labels && _jsxs(_Fragment, { children: [_jsx(motion.span, { ref: beforeChip, className: styles.chip, style: { opacity: beforeOpacity }, "aria-hidden": "true", children: labels[0] }), _jsx(motion.span, { ref: afterChip, className: styles.chip, "data-place": "end", style: { opacity: afterAcross }, "aria-hidden": "true", children: labels[1] }), _jsx(motion.span, { className: styles.chip, "data-place": "bottom", style: { opacity: afterDown }, "aria-hidden": "true", children: labels[1] })] }), _jsxs(motion.div, { className: styles.pivot, style: { x: pivotX, y: pivotY }, children: [_jsx(motion.span, { className: styles.rotor, style: { rotate: theta }, children: _jsx("span", { className: styles.line }) }), _jsx(motion.span, { className: styles.handleSlot, style: { x: handleX, y: handleY }, children: _jsx(motion.div, { ref: handleRef, "data-handle": "", "data-quiet": quiet || undefined, className: styles.handle, role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": orientation, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": afterShare, "aria-valuetext": `${afterShare}% after`, initial: false, animate: capsule, transition: reduced ? { duration: 0 } : spring.morph, onKeyDown: onKeyDown, onBlur: () => setQuiet(false), children: _jsxs(motion.span, { className: styles.chevrons, style: { rotate: theta }, "aria-hidden": "true", children: [_jsx(motion.span, { className: styles.chevron, initial: false, animate: { x: dragging ? -4 : 0 }, transition: reduced ? { duration: 0 } : spring.morph, children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.75 }) }), _jsx(motion.span, { className: styles.chevron, initial: false, animate: { x: dragging ? 4 : 0 }, transition: reduced ? { duration: 0 } : spring.morph, children: _jsx(ChevronRight, { size: 16, strokeWidth: 1.75 }) })] }) }) })] })] });
+}
+export default ImageCompare;

package/components/image-compare/image-compare.module.css

@@ -0,0 +1,25 @@
+/* The frame is a size container, so the divider's line can span any angle with container units. Vertical pans still scroll the page on touch. */
+.root { position: relative; display: block; width: 100%; overflow: clip; container-type: size; isolation: isolate; border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-muted); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
+.root[data-orientation="vertical"] { cursor: ns-resize; touch-action: pan-x; }
+/* A hairline keeps light photos from bleeding into the page. */
+.root::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; corner-shape: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 8%, transparent); pointer-events: none; }
+.layer { position: absolute; inset: 0; }
+.layer :where(img, picture, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
+/* Captions sit on a frosted chip so they read over any photo, below the divider. */
+.chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: 3px 10px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
+.chip[data-place="end"] { right: var(--space-group); left: auto; }
+.chip[data-place="bottom"] { top: auto; bottom: var(--space-group); }
+/* The pivot is a frame-sized layer moved by a percentage of itself; its top-left corner is the divider's center. */
+.pivot { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
+.rotor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
+.line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: 0 0 0 .5px oklch(0% 0 0 / .14); }
+/* The line sits on photography, not on the theme, so it stays light in dark mode too. */
+:global(:root[data-theme="dark"]) .line { background: var(--foreground); }
+.handleSlot { position: absolute; top: 0; left: 0; }
+/* Centered with the translate property; Motion only animates its width and height, so the shape morphs without scaling the icons. */
+.handle { position: absolute; top: 0; left: 0; display: grid; box-sizing: border-box; width: 40px; height: 40px; place-items: center; translate: -50% -50%; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-raised); color: var(--foreground); pointer-events: auto; outline: 0 solid transparent; transition: border-color var(--duration-fast) var(--ease-standard); }
+.handle::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; corner-shape: inherit; }
+@media (hover: hover) and (pointer: fine) { .root:hover .handle { border-color: var(--border-strong); } }
+.chevrons { display: flex; align-items: center; }
+.chevron { display: grid; margin-inline: -2.5px; place-items: center; }
+@media (prefers-reduced-motion: reduce) { .handle { transition: none; } }

package/components/in-view-title/in-view-title.d.ts

@@ -0,0 +1,17 @@
+export type InViewTitleVariant = "word" | "line" | "blur" | "tracking" | "wipe";
+/**
+ * A section title that reveals itself once it scrolls into view. `blur` sharpens word by word and suits most headings; `word` and `line` rise out of a clip for editorial pages;
+ * `tracking` opens tight letter spacing; `wipe` uncovers the title from left to right through a soft edge. Pass `lines` to set the breaks for `line`, and `once={false}` to replay on every entry.
+ * Titles that are already above the viewport show immediately, and server rendered titles appear on their own if scripts are slow.
+ */
+export interface InViewTitleProps {
+    text: string;
+    variant?: InViewTitleVariant;
+    as?: "h1" | "h2" | "h3";
+    lines?: string[];
+    className?: string;
+    id?: string;
+    once?: boolean;
+}
+export declare function InViewTitle({ text, variant, as, lines, className, id, once }: InViewTitleProps): import("react").JSX.Element;
+export default InViewTitle;