panelui-web 0.10.0 → 0.11.0

package/dist/components/timeline/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Timeline — time laid out left to right: tracks of clips under a ruler,
  * with a playhead, for editing a recording, an animation or a schedule.
@@ -46,6 +46,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 import { Slider } from '../slider/index.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /** Space before the first second and after the last, in pixels. */
 const GUTTER = 16;
 /** How close, in pixels, an edge has to come to something before it snaps there. */
@@ -187,8 +189,30 @@ function TimelineRoot({ duration, time: timeProp, defaultTime = 0, onTimeChange,
     const playing = playingProp ?? innerPlaying;
     const spans = useRef(new Map()).current;
     const viewport = useRef(null);
-    const live = useRef({ time, zoom, duration, loop, onTimeChange, onZoomChange, onPlayingChange, timeProp, zoomProp, playingProp });
-    live.current = { time, zoom, duration, loop, onTimeChange, onZoomChange, onPlayingChange, timeProp, zoomProp, playingProp };
+    const live = useRef({
+        time,
+        zoom,
+        duration,
+        loop,
+        onTimeChange,
+        onZoomChange,
+        onPlayingChange,
+        timeProp,
+        zoomProp,
+        playingProp,
+    });
+    live.current = {
+        time,
+        zoom,
+        duration,
+        loop,
+        onTimeChange,
+        onZoomChange,
+        onPlayingChange,
+        timeProp,
+        zoomProp,
+        playingProp,
+    };
     const setTime = useCallback((next) => {
         const value = clamp(next, 0, live.current.duration);
         // Seen by the playback loop at once, so a jump back to the start is not
@@ -212,7 +236,10 @@ function TimelineRoot({ duration, time: timeProp, defaultTime = 0, onTimeChange,
         const box = viewport.current;
         if (!box)
             return;
-        const at = anchor ?? { time: live.current.time, x: GUTTER + live.current.time * live.current.zoom - box.scrollLeft };
+        const at = anchor ?? {
+            time: live.current.time,
+            x: GUTTER + live.current.time * live.current.zoom - box.scrollLeft,
+        };
         requestAnimationFrame(() => {
             box.scrollLeft = GUTTER + at.time * value - at.x;
         });
@@ -263,27 +290,47 @@ function TimelineRoot({ duration, time: timeProp, defaultTime = 0, onTimeChange,
 TimelineRoot.displayName = 'Timeline';
 const GuideContext = createContext(null);
 /** A row above the tracks, for a toolbar, the time and the zoom. */
-function TimelineHeader({ className, ...props }) {
+function TimelineHeader({ className, render, ...props }) {
     const slots = timelineVariants();
-    return _jsx("div", { "data-slot": "timeline-header", className: slots.header({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'timeline-header', className: slots.header({ className }) }, props),
+    });
 }
 TimelineHeader.displayName = 'Timeline.Header';
 /** Where the playhead is, written out, and how long the whole is. */
-function TimelineTime({ showDuration = true, className, ...props }) {
+function TimelineTime({ showDuration = true, className, render, ...props }) {
     const { time, duration } = useTimelineContext('Timeline.Time');
     const slots = timelineVariants();
-    return (_jsxs("span", { "data-slot": "timeline-time", className: slots.time({ className }), ...props, children: [_jsx("b", { children: formatTime(time, true, isShort(duration)) }), showDuration ? ` / ${formatTime(duration, isShort(duration), isShort(duration))}` : null] }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-slot': 'timeline-time',
+            className: slots.time({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("b", { children: formatTime(time, true, isShort(duration)) }), showDuration ? ` / ${formatTime(duration, isShort(duration), isShort(duration))}` : null] })),
+        }, props),
+    });
 }
 TimelineTime.displayName = 'Timeline.Time';
 /** A line slider that zooms the timeline, with zoom out and zoom in either side. */
-function TimelineZoom({ className, ...props }) {
+function TimelineZoom({ className, render, ...props }) {
     const { zoom, setZoom, minZoom, maxZoom } = useTimelineContext('Timeline.Zoom');
     const slots = timelineVariants();
     // The slider runs on a log scale, so each stretch of it zooms by the same factor.
     const toSlider = (value) => Math.log(value / minZoom) / Math.log(maxZoom / minZoom);
     const fromSlider = (value) => minZoom * Math.pow(maxZoom / minZoom, value);
     const step = 0.125;
-    return (_jsx("div", { "data-slot": "timeline-zoom", className: slots.zoom({ className }), ...props, children: _jsxs(Slider, { variant: "line", label: "Zoom", min: 0, max: 1, step: 0.001, value: toSlider(zoom), onValueChange: (value) => setZoom(fromSlider(value)), format: () => `${Math.round(zoom)} pixels per second`, children: [_jsx(Slider.Step, { by: -step, "aria-label": "Zoom out", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "M5 7h4M10.5 10.5 13.5 13.5" })] }) }), _jsx(Slider.Step, { by: step, "aria-label": "Zoom in", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "M5 7h4M7 5v4M10.5 10.5 13.5 13.5" })] }) })] }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'timeline-zoom',
+            className: slots.zoom({ className }),
+            children: (_jsx(_Fragment, { children: _jsxs(Slider, { variant: "line", label: "Zoom", min: 0, max: 1, step: 0.001, value: toSlider(zoom), onValueChange: (value) => setZoom(fromSlider(value)), format: () => `${Math.round(zoom)} pixels per second`, children: [_jsx(Slider.Step, { by: -step, "aria-label": "Zoom out", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "M5 7h4M10.5 10.5 13.5 13.5" })] }) }), _jsx(Slider.Step, { by: step, "aria-label": "Zoom in", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "M5 7h4M7 5v4M10.5 10.5 13.5 13.5" })] }) })] }) })),
+        }, props),
+    });
 }
 TimelineZoom.displayName = 'Timeline.Zoom';
 /**
@@ -313,7 +360,7 @@ function TimelineViewport({ className, style, children, ...props }) {
     }, [viewport, setZoom]);
     const live = useRef(zoom);
     live.current = zoom;
-    return (_jsxs(ScrollArea.Root, { "data-slot": "timeline-viewport", className: slots.viewport({ className }), children: [_jsx(ScrollArea.Viewport, { ref: viewport, className: "outline-none", children: _jsxs(ScrollArea.Content, { dir: "ltr", className: slots.content(), style: { ...style, width, minWidth: '100%', ['--timeline-zoom']: zoom }, ...props, children: [_jsx("span", { "aria-hidden": true, className: slots.end(), style: { left: GUTTER + duration * zoom, right: 0 } }), children, guide !== null ? _jsx("span", { "aria-hidden": true, "data-slot": "timeline-guide", className: slots.guide(), style: { left: GUTTER + guide * zoom } }) : null] }) }), _jsx(ScrollArea.Scrollbar, { orientation: "horizontal", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+    return (_jsxs(ScrollArea.Root, { "data-slot": "timeline-viewport", className: slots.viewport({ className }), children: [_jsx(ScrollArea.Viewport, { ref: viewport, className: "outline-none", children: _jsxs(ScrollArea.Content, { dir: "ltr", className: slots.content(), style: { ...style, width, minWidth: '100%', ['--timeline-zoom']: zoom }, ...props, children: [_jsx("span", { "aria-hidden": true, className: slots.end(), style: { left: GUTTER + duration * zoom, right: 0 } }), children, guide !== null ? (_jsx("span", { "aria-hidden": true, "data-slot": "timeline-guide", className: slots.guide(), style: { left: GUTTER + guide * zoom } })) : null] }) }), _jsx(ScrollArea.Scrollbar, { orientation: "horizontal", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
 }
 TimelineViewport.displayName = 'Timeline.Viewport';
 /** Turns a pointer's position into a time on the timeline. */
@@ -328,7 +375,7 @@ function useTimeAt() {
     }, [viewport, zoom, duration]);
 }
 /** Ticks and times along the top. Pressing or dragging on it moves the playhead there. */
-function TimelineRuler({ className, ...props }) {
+function TimelineRuler({ className, render, ...props }) {
     const { duration, zoom, setTime } = useTimelineContext('Timeline.Ruler');
     const slots = timelineVariants();
     const timeAt = useTimeAt();
@@ -352,10 +399,21 @@ function TimelineRuler({ className, ...props }) {
         event.currentTarget.setPointerCapture(event.pointerId);
         setTime(timeAt(event.clientX));
     };
-    return (_jsx("div", { "aria-hidden": true, "data-slot": "timeline-ruler", className: slots.ruler({ className }), onPointerDown: scrub, onPointerMove: (event) => {
-            if (event.currentTarget.hasPointerCapture(event.pointerId))
-                setTime(timeAt(event.clientX));
-        }, ...props, children: ticks }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'aria-hidden': true,
+            'data-slot': 'timeline-ruler',
+            className: slots.ruler({ className }),
+            onPointerDown: scrub,
+            onPointerMove: (event) => {
+                if (event.currentTarget.hasPointerCapture(event.pointerId))
+                    setTime(timeAt(event.clientX));
+            },
+            children: _jsx(_Fragment, { children: ticks }),
+        }, props),
+    });
 }
 TimelineRuler.displayName = 'Timeline.Ruler';
 const TrackContext = createContext(null);
@@ -369,7 +427,7 @@ function TimelineTrack({ size = 'md', label, className, ...props }) {
 }
 TimelineTrack.displayName = 'Timeline.Track';
 /** One clip. With `onChange` it moves by its middle and trims by its ends. */
-function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: variantProp, color = 'primary', label, className, style, children, onKeyDown, ...props }) {
+function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: variantProp, color = 'primary', label, className, style, children, onKeyDown, render, ...props }) {
     const timeline = useTimelineContext('Timeline.Clip');
     const track = useContext(TrackContext);
     if (!track)
@@ -425,7 +483,9 @@ function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: va
             return;
         event.preventDefault();
         event.stopPropagation();
-        event.currentTarget.closest('[data-slot=timeline-clip]')?.focus({ preventScroll: true, focusVisible: false });
+        event.currentTarget
+            .closest('[data-slot=timeline-clip]')
+            ?.focus({ preventScroll: true, focusVisible: false });
         const originX = event.clientX;
         const origin = { start: live.current.start, end: live.current.end };
         const { lower, upper } = room();
@@ -504,14 +564,32 @@ function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: va
     const width = Math.max((end - start) * zoom, 2);
     const name = `${label ? `${label}, ` : ''}${formatTime(start, true, isShort(duration))} to ${formatTime(end, true, isShort(duration))}`;
     const roomy = width >= 40;
-    return (_jsxs("div", { role: "button", tabIndex: 0, "aria-roledescription": "clip", "aria-label": name, "data-slot": "timeline-clip", "data-variant": variant, "data-editable": editable ? '' : undefined, "data-dragging": dragging ? '' : undefined, className: slots.clip({ className }), style: {
-            ...style,
-            left,
-            width,
-            '--clip': COLORS[color],
-            // Text on a warning-coloured clip is dark; on the others it is white.
-            ...(color === 'warning' ? { '--clip-foreground': 'rgb(0 0 0 / 0.8)' } : null),
-        }, onPointerDown: (event) => press(event, 'move'), onKeyDown: keys, ...props, children: [variant === 'block' && roomy && !hasLabel(children) ? (_jsxs("span", { "aria-hidden": true, className: slots.grip(), children: [_jsx("span", {}), _jsx("span", {})] })) : null, _jsx(ClipWidthContext.Provider, { value: width, children: children }), editable && width >= 28 ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-slot": "timeline-clip-handle", className: slots.handle({ className: 'start-0 after:start-1' }), onPointerDown: (event) => press(event, 'start') }), _jsx("span", { "aria-hidden": true, "data-slot": "timeline-clip-handle", className: slots.handle({ className: 'end-0 after:end-1' }), onPointerDown: (event) => press(event, 'end') })] })) : null] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'button',
+            tabIndex: 0,
+            'aria-roledescription': 'clip',
+            'aria-label': name,
+            'data-slot': 'timeline-clip',
+            'data-variant': variant,
+            'data-editable': editable ? '' : undefined,
+            'data-dragging': dragging ? '' : undefined,
+            className: slots.clip({ className }),
+            style: {
+                ...style,
+                left,
+                width,
+                '--clip': COLORS[color],
+                // Text on a warning-coloured clip is dark; on the others it is white.
+                ...(color === 'warning' ? { '--clip-foreground': 'rgb(0 0 0 / 0.8)' } : null),
+            },
+            onPointerDown: (event) => press(event, 'move'),
+            onKeyDown: keys,
+            children: (_jsxs(_Fragment, { children: [variant === 'block' && roomy && !hasLabel(children) ? (_jsxs("span", { "aria-hidden": true, className: slots.grip(), children: [_jsx("span", {}), _jsx("span", {})] })) : null, _jsx(ClipWidthContext.Provider, { value: width, children: children }), editable && width >= 28 ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-slot": "timeline-clip-handle", className: slots.handle({ className: 'start-0 after:start-1' }), onPointerDown: (event) => press(event, 'start') }), _jsx("span", { "aria-hidden": true, "data-slot": "timeline-clip-handle", className: slots.handle({ className: 'end-0 after:end-1' }), onPointerDown: (event) => press(event, 'end') })] })) : null] })),
+        }, props),
+    });
 }
 TimelineClip.displayName = 'Timeline.Clip';
 function hasLabel(children) {
@@ -523,13 +601,17 @@ function hasLabel(children) {
     return found;
 }
 /** Words on a clip, with an icon: its length, its speed, what it is. */
-function TimelineClipLabel({ className, ...props }) {
+function TimelineClipLabel({ className, render, ...props }) {
     const slots = timelineVariants();
-    return _jsx("span", { "data-slot": "timeline-clip-label", className: slots.clipLabel({ className }), ...props });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'timeline-clip-label', className: slots.clipLabel({ className }) }, props),
+    });
 }
 TimelineClipLabel.displayName = 'Timeline.ClipLabel';
 /** The sound of a media clip, drawn as bars across it. */
-function TimelineWaveform({ peaks, className, ...props }) {
+function TimelineWaveform({ peaks, className, render, ...props }) {
     const slots = timelineVariants();
     const width = useContext(ClipWidthContext);
     // One bar every 4 pixels at any zoom: the peaks are resampled to the room
@@ -554,7 +636,18 @@ function TimelineWaveform({ peaks, className, ...props }) {
         // Rounded, so the server and the browser write the same numbers.
         return Math.round(Math.max(clamp(loudest, 0, 1) * 100, 3) * 100) / 100;
     });
-    return (_jsx("svg", { "aria-hidden": true, "data-slot": "timeline-waveform", viewBox: `0 0 ${bars * 4} 100`, preserveAspectRatio: "none", className: slots.waveform({ className }), ...props, children: heights.map((height, at) => (_jsx("rect", { x: at * 4 + 1, y: Math.round((50 - height / 2) * 100) / 100, width: 2, height: height, rx: 1, fill: "currentColor" }, at))) }));
+    return useRender({
+        defaultTagName: 'svg',
+        render,
+        props: mergeProps({
+            'aria-hidden': true,
+            'data-slot': 'timeline-waveform',
+            viewBox: `0 0 ${bars * 4} 100`,
+            preserveAspectRatio: 'none',
+            className: slots.waveform({ className }),
+            children: (_jsx(_Fragment, { children: heights.map((height, at) => (_jsx("rect", { x: at * 4 + 1, y: Math.round((50 - height / 2) * 100) / 100, width: 2, height: height, rx: 1, fill: "currentColor" }, at))) })),
+        }, props),
+    });
 }
 TimelineWaveform.displayName = 'Timeline.Waveform';
 /**
@@ -562,40 +655,54 @@ TimelineWaveform.displayName = 'Timeline.Waveform';
  * be dragged, and with focus the arrow keys step it: a tenth of a second,
  * or a second with Shift.
  */
-function TimelinePlayhead({ color = 'primary', showTime = true, className, style, ...props }) {
+function TimelinePlayhead({ color = 'primary', showTime = true, className, style, render, ...props }) {
     const { time, setTime, duration, zoom, playing, setPlaying } = useTimelineContext('Timeline.Playhead');
     const slots = timelineVariants();
     const timeAt = useTimeAt();
     const left = GUTTER + time * zoom;
     const foreground = color === 'primary' ? 'var(--primary-foreground)' : color === 'warning' ? 'black' : 'white';
-    return (_jsxs("div", { "data-slot": "timeline-playhead", className: slots.playhead({ className }), style: { ...style, left, ['--playhead']: COLORS[color], ['--playhead-foreground']: foreground }, ...props, children: [_jsx("span", { "aria-hidden": true, className: slots.playheadLine() }), _jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Playhead", "aria-valuemin": 0, "aria-valuemax": duration, "aria-valuenow": Math.round(time * 10) / 10, "aria-valuetext": formatTime(time, true, isShort(duration)), "data-slot": "timeline-playhead-head", className: slots.playheadHead(), onPointerDown: (event) => {
-                    if (event.button !== 0)
-                        return;
-                    event.currentTarget.setPointerCapture(event.pointerId);
-                    if (playing)
-                        setPlaying(false);
-                }, onPointerMove: (event) => {
-                    if (event.currentTarget.hasPointerCapture(event.pointerId))
-                        setTime(timeAt(event.clientX));
-                }, onKeyDown: (event) => {
-                    const by = event.shiftKey ? 1 : 0.1;
-                    const moves = {
-                        ArrowLeft: time - by,
-                        ArrowRight: time + by,
-                        Home: 0,
-                        End: duration,
-                    };
-                    if (event.key === ' ') {
-                        event.preventDefault();
-                        setPlaying(!playing);
-                        return;
-                    }
-                    const next = moves[event.key];
-                    if (next === undefined)
-                        return;
-                    event.preventDefault();
-                    setTime(next);
-                }, children: showTime ? formatTime(time, isShort(duration), isShort(duration)) : null })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'timeline-playhead',
+            className: slots.playhead({ className }),
+            style: {
+                ...style,
+                left,
+                ['--playhead']: COLORS[color],
+                ['--playhead-foreground']: foreground,
+            },
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: slots.playheadLine() }), _jsx("div", { role: "slider", tabIndex: 0, "aria-label": "Playhead", "aria-valuemin": 0, "aria-valuemax": duration, "aria-valuenow": Math.round(time * 10) / 10, "aria-valuetext": formatTime(time, true, isShort(duration)), "data-slot": "timeline-playhead-head", className: slots.playheadHead(), onPointerDown: (event) => {
+                            if (event.button !== 0)
+                                return;
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            if (playing)
+                                setPlaying(false);
+                        }, onPointerMove: (event) => {
+                            if (event.currentTarget.hasPointerCapture(event.pointerId))
+                                setTime(timeAt(event.clientX));
+                        }, onKeyDown: (event) => {
+                            const by = event.shiftKey ? 1 : 0.1;
+                            const moves = {
+                                ArrowLeft: time - by,
+                                ArrowRight: time + by,
+                                Home: 0,
+                                End: duration,
+                            };
+                            if (event.key === ' ') {
+                                event.preventDefault();
+                                setPlaying(!playing);
+                                return;
+                            }
+                            const next = moves[event.key];
+                            if (next === undefined)
+                                return;
+                            event.preventDefault();
+                            setTime(next);
+                        }, children: showTime ? formatTime(time, isShort(duration), isShort(duration)) : null })] })),
+        }, props),
+    });
 }
 TimelinePlayhead.displayName = 'Timeline.Playhead';
 export const Timeline = Object.assign(TimelineRoot, {

package/dist/components/toast/dither-text.d.ts

@@ -0,0 +1,13 @@
+export interface DitherTextProps {
+    /** The text to show. A change dissolves the old text into the new. */
+    text: string;
+    /** Whether the first text arrives through dither, as a change from nothing does. Default `true`. */
+    animateOnMount?: boolean;
+    /** Draws a caret at the arriving edge while the text changes. Default `true`. */
+    caret?: boolean;
+    /** The colour the dither cells and the caret are drawn in. Settled letters keep the text colour. */
+    accent?: string;
+    className?: string;
+}
+/** A line of text whose changes dissolve through ordered dither. */
+export declare function DitherText({ text, animateOnMount, caret, accent, className }: DitherTextProps): import("react").JSX.Element;

package/dist/components/toast/dither-text.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { prefersReducedMotion } from './dither.js';
+/*
+ * Text that changes by dissolving through dither.
+ *
+ * Every character of the old text goes dim and monospace, flickers through a
+ * few stand-in glyphs and is eaten by an ordered dither, densest first, until
+ * it is a solid cell. The new text then resolves from the start: a head moves
+ * along it, each cell behind the head thins out through the same dither and
+ * settles into its letter, and a caret rides the head. Characters are drawn as
+ * spans rather than on a canvas, so the type is the page's own, crisp at any
+ * zoom, and the cells take `currentColor`.
+ *
+ * The dither cells are CSS: four Bayer-like densities built from conic and
+ * radial gradients on a 2–3px tile, plus a solid block. No image, no canvas.
+ */
+/** Ordered densities, from the sparsest dust to a solid cell. */
+const CELL = [
+    { backgroundImage: 'radial-gradient(currentColor 0.55px, transparent 0.75px)', backgroundSize: '3px 3px' },
+    { backgroundImage: 'conic-gradient(currentColor 0 25%, transparent 0)', backgroundSize: '2px 2px' },
+    { backgroundImage: 'repeating-conic-gradient(currentColor 0 25%, transparent 0 50%)', backgroundSize: '2px 2px' },
+    { backgroundImage: 'conic-gradient(transparent 0 25%, currentColor 0)', backgroundSize: '2px 2px' },
+    { backgroundColor: 'currentColor' },
+];
+const SCRAMBLE = 'abcdefghijklmnopqrstuvwxyz0123456789';
+/** Milliseconds between one character starting to go and the next. */
+const OUT_STAGGER = 14;
+/** How long one character takes from letter to solid cell. */
+const OUT_SPAN = 240;
+/** When the new text starts arriving, after the old started going. */
+const IN_DELAY = 150;
+/** Milliseconds between one new character starting to arrive and the next, for a short line. */
+const IN_STAGGER = 30;
+/** The longest a whole line takes to start arriving; a long line's characters come closer together. */
+const IN_SWEEP = 560;
+/** The gap between characters arriving, so that a long line takes no longer than `IN_SWEEP`. */
+function staggerFor(length) {
+    return length > 1 ? Math.min(IN_STAGGER, IN_SWEEP / (length - 1)) : IN_STAGGER;
+}
+/** How long one new character takes from cell to letter. */
+const IN_SPAN = 210;
+/** How long the caret stays once the text has arrived. */
+const CARET_HOLD = 520;
+function scramble(seed) {
+    return SCRAMBLE[Math.abs(Math.floor(seed)) % SCRAMBLE.length];
+}
+/** What the character at `index` looks like `elapsed` ms into a change from `from` to `to`. */
+function glyphAt(from, to, index, elapsed) {
+    const incoming = elapsed - IN_DELAY - index * staggerFor(to.length);
+    const target = to[index];
+    if (target !== undefined && incoming >= 0) {
+        if (target === ' ')
+            return { kind: 'gap' };
+        const p = incoming / IN_SPAN;
+        if (p >= 1)
+            return { kind: 'char', char: target };
+        // Arriving: a solid cell thins out, flickers as a letter, then settles.
+        if (p < 0.72)
+            return { kind: 'cell', level: CELL.length - 1 - Math.floor((p / 0.72) * (CELL.length - 1)) };
+        return { kind: 'mono', char: p < 0.86 ? scramble(index * 7 + elapsed / 40) : target };
+    }
+    const source = from[index];
+    if (source === undefined) {
+        // A position only the new text has, which the head has not reached.
+        return target === undefined ? { kind: 'gap' } : { kind: 'cell', level: 0 };
+    }
+    if (source === ' ')
+        return { kind: 'gap' };
+    const p = (elapsed - index * Math.min(OUT_STAGGER, IN_SWEEP / Math.max(1, from.length - 1))) / OUT_SPAN;
+    if (p < 0)
+        return { kind: 'char', char: source };
+    // Going: dim and monospace, a few stand-in letters, then dither fills it in.
+    if (p < 0.3)
+        return { kind: 'mono', char: p < 0.12 ? source : scramble(index * 13 + elapsed / 45) };
+    const level = Math.min(CELL.length - 1, Math.floor(((p - 0.3) / 0.7) * CELL.length));
+    // A position the new text does not reach thins back to nothing once solid.
+    if (target === undefined && p >= 1) {
+        const fade = (p - 1) * CELL.length;
+        return fade >= CELL.length ? { kind: 'gap' } : { kind: 'cell', level: Math.max(0, CELL.length - 1 - Math.floor(fade)) };
+    }
+    return { kind: 'cell', level };
+}
+function durationOf(from, to) {
+    const arrive = to.length > 0 ? IN_DELAY + (to.length - 1) * staggerFor(to.length) + IN_SPAN : 0;
+    // A tail of the old text that the new one does not cover goes solid and then thins away.
+    const leave = from.length > to.length ? (from.length - 1) * Math.min(OUT_STAGGER, IN_SWEEP / Math.max(1, from.length - 1)) + OUT_SPAN * 2 : 0;
+    return Math.max(arrive, leave);
+}
+/** A line of text whose changes dissolve through ordered dither. */
+export function DitherText({ text, animateOnMount = true, caret = true, accent, className }) {
+    const [shown, setShown] = useState(animateOnMount ? '' : text);
+    const transition = useRef(null);
+    const [now, setNow] = useState(0);
+    const frame = useRef(0);
+    useEffect(() => {
+        if (text === shown && !transition.current)
+            return;
+        if (prefersReducedMotion()) {
+            transition.current = null;
+            setShown(text);
+            return;
+        }
+        // An effect run again for the same text (as React does in development)
+        // carries on with the change already under way, rather than restarting it.
+        if (transition.current?.to !== text) {
+            // A change mid-change starts from what is on screen now, as near as text allows.
+            const from = transition.current ? transition.current.to : shown;
+            transition.current = { from, to: text, start: performance.now() };
+        }
+        const { from } = transition.current;
+        const total = durationOf(from, text) + (caret ? CARET_HOLD : 0);
+        const tick = (time) => {
+            const current = transition.current;
+            if (!current)
+                return;
+            if (time - current.start >= total) {
+                transition.current = null;
+                setShown(current.to);
+                return;
+            }
+            setNow(time);
+            frame.current = requestAnimationFrame(tick);
+        };
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame.current);
+        // `shown` is read as the starting point only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [text, caret]);
+    const active = transition.current;
+    const label = _jsx("span", { className: "sr-only", children: text });
+    if (!active) {
+        return (_jsx("span", { "data-slot": "dither-text", className: className, children: shown }));
+    }
+    const elapsed = Math.max(0, now - active.start);
+    const length = Math.max(active.from.length, active.to.length);
+    const head = Math.min(active.to.length, Math.max(0, Math.floor((elapsed - IN_DELAY) / staggerFor(active.to.length)) + 1));
+    const arriving = elapsed < durationOf(active.from, active.to);
+    const glyphs = Array.from({ length }, (_, index) => glyphAt(active.from, active.to, index, elapsed));
+    return (_jsxs("span", { "data-slot": "dither-text", "data-changing": "", className: className, children: [label, _jsxs("span", { "aria-hidden": "true", className: "whitespace-pre", style: accent ? { '--dither-accent': accent } : undefined, children: [glyphs.map((glyph, index) => (_jsxs("span", { className: "relative", children: [glyph.kind === 'char' ? glyph.char : null, glyph.kind === 'gap' ? ' ' : null, glyph.kind === 'mono' ? (_jsx("span", { className: "font-mono text-[0.92em] text-(--dither-accent,currentColor) opacity-55", children: glyph.char })) : null, glyph.kind === 'cell' ? (_jsx("span", { className: "inline-block h-[0.82em] w-[0.6em] align-[-0.06em] text-(--dither-accent,currentColor)", style: CELL[glyph.level] })) : null, caret && index === head - 1 && (arriving || Math.floor(elapsed / 260) % 2 === 0) ? (_jsx("span", { className: "absolute inset-y-[0.08em] -end-[0.08em] w-[0.09em] bg-(--dither-accent,currentColor)" })) : null] }, index))), caret && head === 0 ? (_jsx("span", { className: "inline-block h-[0.84em] w-[0.09em] align-[-0.06em] bg-(--dither-accent,currentColor)" })) : null] })] }));
+}

package/dist/components/toast/dither.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+/** Levels a mask can take: 0 hides everything, 16 shows everything. */
+export declare const LEVELS = 16;
+/** Masks an element to an even dither at `level` (0–16), in cells of `cell` px. Full or empty need no mask. */
+export declare function maskStyle(level: number, cell?: number): CSSProperties;
+export declare function prefersReducedMotion(): boolean;
+export type SweepPhase = 'in' | 'out' | 'done';
+/**
+ * Builds a card out of dither cells the way a line of text is built: a head
+ * moves across it, the columns it has just passed arrive as solid cells in
+ * the accent, and they thin out through the dither to show the card. On the
+ * way out the columns thicken into solid cells and go, from the start edge.
+ *
+ * Returns a mask for the card, which shows only what the head has passed (or
+ * what the tail has not), and a canvas of the cells, to sit over the card.
+ */
+export declare function useCardSweep(phase: SweepPhase, duration: number): {
+    mask: CSSProperties;
+    progress: number;
+    edge: number;
+    sweeping: boolean;
+};
+/** The cells of a card sweep, drawn over the card in `color`. */
+export declare function SweepCells({ phase, edge, color, className, }: {
+    phase: SweepPhase;
+    edge: number;
+    color: string;
+    className?: string;
+}): import("react").JSX.Element;