@passui/react 0.1.45 → 0.1.46

package/src/components/wake-slider/wake-slider.tsx

@@ -1,8 +1,8 @@
-import { clampRange as clamp } from "../../lib/range-value"
+import { clampRange as clamp } from "../../lib/range-value";
 // Adapted from Bencho. See THIRD_PARTY_NOTICES.md for the MIT notice.
-import { type CSSProperties, useEffect, useRef, useState } from "react"
-import { useMediaQuery } from "../../hooks/use-media-query"
-import { cn } from "../../lib/class-names"
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { cn } from "../../lib/class-names";
 
 /* ══ Wake slider ══════════════════════════════════════════
    A range with no thumb: a row of thin bars, solid up to the
@@ -24,222 +24,237 @@ import { cn } from "../../lib/class-names"
    changes, which is what the reading and the colours need, and
    the loop runs only while some bar still has energy. */
 
-const H: Record<WakeSliderSize, number> = { sm: 16, md: 20, lg: 26 } // a bar at rest, px
+const H: Record<WakeSliderSize, number> = { sm: 16, md: 20, lg: 26 }; // a bar at rest, px
 
-export type WakeSliderSize = "sm" | "md" | "lg"
+export type WakeSliderSize = "sm" | "md" | "lg";
 
 export interface WakeSliderProps {
-    label: string
-    value?: number
-    defaultValue?: number
-    onChange?: (value: number) => void
-    bars?: number
-    wake?: number
-    disabled?: boolean
-    className?: string
-    formatValue?: (value: number) => string
-    /** Bar height at rest and value text scale. @default "md" */
-    size?: WakeSliderSize
+	label: string;
+	value?: number;
+	defaultValue?: number;
+	onChange?: (value: number) => void;
+	bars?: number;
+	wake?: number;
+	disabled?: boolean;
+	className?: string;
+	formatValue?: (value: number) => string;
+	/** Bar height at rest and value text scale. @default "md" */
+	size?: WakeSliderSize;
 }
 
 export function WakeSlider({
-    label,
-    value: controlledValue,
-    defaultValue = 50,
-    onChange,
-    disabled = false,
-    className,
-    formatValue,
-    size = "md",
-    /* how many bars make the track */
-    bars = 36,
-    /* how high the wake rises, 0..100 */
-    wake = 60,
+	label,
+	value: controlledValue,
+	defaultValue = 50,
+	onChange,
+	disabled = false,
+	className,
+	formatValue,
+	size = "md",
+	/* how many bars make the track */
+	bars = 36,
+	/* how high the wake rises, 0..100 */
+	wake = 60,
 }: WakeSliderProps) {
-    const n = Math.round(clamp(Number.isFinite(bars) ? bars : 36, 12, 64))
-    const reduced = useMediaQuery("(prefers-reduced-motion: reduce)")
-    const [value, setValue] = useState(() => clamp(controlledValue ?? defaultValue, 0, 100))
-    const track = useRef<HTMLDivElement | null>(null)
-    const els = useRef<(HTMLSpanElement | null)[]>([])
-    const st = useRef({
-        energy: new Float32Array(n),
-        down: false,
-        lastX: 0,
-        lastT: 0,
-        speed: 0,
-        raf: 0,
-        at: value / 100, // the value as a fraction, without React in the way
-        lastBar: -1,
-    })
-    const knob = useRef(wake)
-    knob.current = reduced ? 0 : clamp(wake, 0, 100)
-    useEffect(() => {
-        if (controlledValue === undefined) return
-        const next = clamp(controlledValue, 0, 100)
-        st.current.at = next / 100
-        setValue(next)
-    }, [controlledValue])
+	const n = Math.round(clamp(Number.isFinite(bars) ? bars : 36, 12, 64));
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const [value, setValue] = useState(() =>
+		clamp(controlledValue ?? defaultValue, 0, 100),
+	);
+	const track = useRef<HTMLDivElement | null>(null);
+	const els = useRef<(HTMLSpanElement | null)[]>([]);
+	const st = useRef({
+		energy: new Float32Array(n),
+		down: false,
+		lastX: 0,
+		lastT: 0,
+		speed: 0,
+		raf: 0,
+		at: value / 100, // the value as a fraction, without React in the way
+		lastBar: -1,
+	});
+	const knob = useRef(wake);
+	knob.current = reduced ? 0 : clamp(wake, 0, 100);
+	useEffect(() => {
+		if (controlledValue === undefined) return;
+		const next = clamp(controlledValue, 0, 100);
+		st.current.at = next / 100;
+		setValue(next);
+	}, [controlledValue]);
 
-    useEffect(() => {
-        if (!reduced) return
-        cancelAnimationFrame(st.current.raf)
-        st.current.raf = 0
-        st.current.energy.fill(0)
-        for (const bar of els.current) if (bar) bar.style.transform = "none"
-    }, [reduced])
+	useEffect(() => {
+		if (!reduced) return;
+		cancelAnimationFrame(st.current.raf);
+		st.current.raf = 0;
+		st.current.energy.fill(0);
+		for (const bar of els.current) if (bar) bar.style.transform = "none";
+	}, [reduced]);
 
-    /* a new bar count is a new row */
-    useEffect(() => {
-        st.current.energy = new Float32Array(n)
-    }, [n])
+	/* a new bar count is a new row */
+	useEffect(() => {
+		st.current.energy = new Float32Array(n);
+	}, [n]);
 
-    const loop = () => {
-        const s = st.current
-        if (s.raf) return
-        let prev = performance.now()
-        const run = (now: number) => {
-            const dt = Math.min(0.05, (now - prev) / 1000)
-            prev = now
-            let live = false
-            const fall = Math.exp(-dt * 6.5)
-            for (let i = 0; i < s.energy.length; i++) {
-                s.energy[i] *= fall
-                if (s.energy[i] < 0.002) s.energy[i] = 0
-                else live = true
-                const b = els.current[i]
-                /* up to 2.6 times as tall at the very top of the knob */
-                if (b) b.style.transform = `scaleY(${(1 + s.energy[i] * 1.6).toFixed(3)})`
-            }
-            s.raf = live ? requestAnimationFrame(run) : 0
-        }
-        s.raf = requestAnimationFrame(run)
-    }
+	const loop = () => {
+		const s = st.current;
+		if (s.raf) return;
+		let prev = performance.now();
+		const run = (now: number) => {
+			const dt = Math.min(0.05, (now - prev) / 1000);
+			prev = now;
+			let live = false;
+			const fall = Math.exp(-dt * 6.5);
+			for (let i = 0; i < s.energy.length; i++) {
+				s.energy[i] *= fall;
+				if (s.energy[i] < 0.002) s.energy[i] = 0;
+				else live = true;
+				const b = els.current[i];
+				/* up to 2.6 times as tall at the very top of the knob */
+				if (b)
+					b.style.transform = `scaleY(${(1 + s.energy[i] * 1.6).toFixed(3)})`;
+			}
+			s.raf = live ? requestAnimationFrame(run) : 0;
+		};
+		s.raf = requestAnimationFrame(run);
+	};
 
-    useEffect(() => () => cancelAnimationFrame(st.current.raf), [])
+	useEffect(() => () => cancelAnimationFrame(st.current.raf), []);
 
-    /* move the value to a fraction, waking every bar it passes */
-    const to = (f: number, speed: number) => {
-        const s = st.current
-        f = clamp(f, 0, 1)
-        const from = s.at
-        s.at = f
-        const a = Math.round(from * (n - 1)),
-            b = Math.round(f * (n - 1))
-        /* how hard: the drag's speed in bars per second, through a
+	/* move the value to a fraction, waking every bar it passes */
+	const to = (f: number, speed: number) => {
+		const s = st.current;
+		f = clamp(f, 0, 1);
+		const from = s.at;
+		s.at = f;
+		const a = Math.round(from * (n - 1));
+		const b = Math.round(f * (n - 1));
+		/* how hard: the drag's speed in bars per second, through a
        curve that saturates, scaled by the knob */
-        const push = (1 - Math.exp(-speed / 900)) * (knob.current / 60)
-        const lo = Math.min(a, b),
-            hi = Math.max(a, b)
-        for (let i = lo; i <= hi; i++) s.energy[i] = Math.max(s.energy[i], push)
-        if (b !== s.lastBar) {
-            s.lastBar = b
-        }
-        const next = Math.round(f * 100)
-        setValue(next)
-        onChange?.(next)
-        if (!reduced && knob.current > 0) loop()
-    }
+		const push = (1 - Math.exp(-speed / 900)) * (knob.current / 60);
+		const lo = Math.min(a, b);
+		const hi = Math.max(a, b);
+		for (let i = lo; i <= hi; i++) s.energy[i] = Math.max(s.energy[i], push);
+		if (b !== s.lastBar) {
+			s.lastBar = b;
+		}
+		const next = Math.round(f * 100);
+		setValue(next);
+		onChange?.(next);
+		if (!reduced && knob.current > 0) loop();
+	};
 
-    const frac = (clientX: number) => {
-        const r = track.current!.getBoundingClientRect()
-        const fraction = r.width ? (clientX - r.left) / r.width : 0
-        return getComputedStyle(track.current!).direction === "rtl" ? 1 - fraction : fraction
-    }
+	const frac = (clientX: number) => {
+		const r = (track.current ?? document.body).getBoundingClientRect();
+		const fraction = r.width ? (clientX - r.left) / r.width : 0;
+		return getComputedStyle(track.current ?? document.body).direction === "rtl"
+			? 1 - fraction
+			: fraction;
+	};
 
-    const lit = Math.round((value / 100) * (n - 1))
+	const lit = Math.round((value / 100) * (n - 1));
 
-    return (
-        <div
-            className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}
-            data-size={size}
-        >
-            <div
-                ref={track}
-                className="passui-wake-track"
-                role="slider"
-                tabIndex={disabled ? -1 : 0}
-                aria-label={label}
-                aria-disabled={disabled || undefined}
-                aria-valuetext={formatValue?.(value)}
-                aria-valuemin={0}
-                aria-valuemax={100}
-                aria-valuenow={value}
-                style={{ height: H[size] * 2.6, "--wake-bars": n } as CSSProperties}
-                onPointerDown={(e) => {
-                    if (disabled || e.button !== 0) return
-                    e.currentTarget.focus()
-                    const s = st.current
-                    try {
-                        e.currentTarget.setPointerCapture(e.pointerId)
-                    } catch {
-                        /* a scripted pointer */
-                    }
-                    s.down = true
-                    s.lastX = e.clientX
-                    s.lastT = performance.now()
-                    s.speed = 0
-                    to(frac(e.clientX), 0)
-                }}
-                onPointerMove={(e) => {
-                    const s = st.current
-                    if (!s.down || disabled) return
-                    const now = performance.now()
-                    const dt = Math.max(0.008, (now - s.lastT) / 1000)
-                    /* speed in px per second, smoothed so one jittery frame
+	return (
+		<div
+			className={cn(
+				"passui-wake-slider not-typeset",
+				disabled && "opacity-40",
+				className,
+			)}
+			data-size={size}
+		>
+			<div
+				ref={track}
+				className="passui-wake-track"
+				role="slider"
+				tabIndex={disabled ? -1 : 0}
+				aria-label={label}
+				aria-disabled={disabled || undefined}
+				aria-valuetext={formatValue?.(value)}
+				aria-valuemin={0}
+				aria-valuemax={100}
+				aria-valuenow={value}
+				style={{ height: H[size] * 2.6, "--wake-bars": n } as CSSProperties}
+				onPointerDown={(e) => {
+					if (disabled || e.button !== 0) return;
+					e.currentTarget.focus();
+					const s = st.current;
+					try {
+						e.currentTarget.setPointerCapture(e.pointerId);
+					} catch {
+						/* a scripted pointer */
+					}
+					s.down = true;
+					s.lastX = e.clientX;
+					s.lastT = performance.now();
+					s.speed = 0;
+					to(frac(e.clientX), 0);
+				}}
+				onPointerMove={(e) => {
+					const s = st.current;
+					if (!s.down || disabled) return;
+					const now = performance.now();
+					const dt = Math.max(0.008, (now - s.lastT) / 1000);
+					/* speed in px per second, smoothed so one jittery frame
              cannot fake a fling */
-                    const v = Math.abs(e.clientX - s.lastX) / dt
-                    s.speed = s.speed * 0.5 + v * 0.5
-                    s.lastX = e.clientX
-                    s.lastT = now
-                    to(frac(e.clientX), s.speed)
-                }}
-                onPointerUp={(e) => {
-                    st.current.down = false
-                    try {
-                        e.currentTarget.releasePointerCapture(e.pointerId)
-                    } catch {
-                        /* never captured */
-                    }
-                }}
-                onLostPointerCapture={() => {
-                    st.current.down = false
-                }}
-                onPointerCancel={() => {
-                    st.current.down = false
-                }}
-                onKeyDown={(e) => {
-                    if (disabled) return
-                    const step = e.shiftKey ? 10 : 1
-                    let next: number | null = null
-                    const rtl = getComputedStyle(e.currentTarget).direction === "rtl"
-                    if (e.key === "ArrowUp" || e.key === (rtl ? "ArrowLeft" : "ArrowRight"))
-                        next = value + step
-                    if (e.key === "ArrowDown" || e.key === (rtl ? "ArrowRight" : "ArrowLeft"))
-                        next = value - step
-                    if (e.key === "Home") next = 0
-                    if (e.key === "End") next = 100
-                    if (next === null) return
-                    e.preventDefault()
-                    /* a key press is a small, quick step: a little wake */
-                    to(clamp(next, 0, 100) / 100, 600)
-                }}
-            >
-                {Array.from({ length: n }, (_, i) => (
-                    <span
-                        key={i}
-                        ref={(b) => {
-                            els.current[i] = b
-                        }}
-                        aria-hidden="true"
-                        className="passui-wake-bar"
-                        data-on={(value > 0 && i <= lit) || undefined}
-                        style={{ height: H[size] }}
-                    />
-                ))}
-            </div>
-            <span aria-hidden="true" className="passui-wake-value">
-                {formatValue?.(value) ?? value}
-            </span>
-        </div>
-    )
+					const v = Math.abs(e.clientX - s.lastX) / dt;
+					s.speed = s.speed * 0.5 + v * 0.5;
+					s.lastX = e.clientX;
+					s.lastT = now;
+					to(frac(e.clientX), s.speed);
+				}}
+				onPointerUp={(e) => {
+					st.current.down = false;
+					try {
+						e.currentTarget.releasePointerCapture(e.pointerId);
+					} catch {
+						/* never captured */
+					}
+				}}
+				onLostPointerCapture={() => {
+					st.current.down = false;
+				}}
+				onPointerCancel={() => {
+					st.current.down = false;
+				}}
+				onKeyDown={(e) => {
+					if (disabled) return;
+					const step = e.shiftKey ? 10 : 1;
+					let next: number | null = null;
+					const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+					if (
+						e.key === "ArrowUp" ||
+						e.key === (rtl ? "ArrowLeft" : "ArrowRight")
+					)
+						next = value + step;
+					if (
+						e.key === "ArrowDown" ||
+						e.key === (rtl ? "ArrowRight" : "ArrowLeft")
+					)
+						next = value - step;
+					if (e.key === "Home") next = 0;
+					if (e.key === "End") next = 100;
+					if (next === null) return;
+					e.preventDefault();
+					/* a key press is a small, quick step: a little wake */
+					to(clamp(next, 0, 100) / 100, 600);
+				}}
+			>
+				{Array.from({ length: n }, (_, i) => (
+					<span
+						key={i}
+						ref={(b) => {
+							els.current[i] = b;
+						}}
+						aria-hidden="true"
+						className="passui-wake-bar"
+						data-on={(value > 0 && i <= lit) || undefined}
+						style={{ height: H[size] }}
+					/>
+				))}
+			</div>
+			<span aria-hidden="true" className="passui-wake-value">
+				{formatValue?.(value) ?? value}
+			</span>
+		</div>
+	);
 }

package/src/hooks/scroll/minimize-decision.ts

@@ -1,9 +1,13 @@
 /** Programmatic restoration does not collapse chrome; reaching the top always restores it. */
-export function minimizeDecision(top: number, anchor: number, userDriven: boolean): boolean | null {
-    if (top < 24) return false
-    if (!userDriven) return null
-    const delta = top - anchor
-    if (delta < -12) return false
-    if (delta > 12) return true
-    return null
+export function minimizeDecision(
+	top: number,
+	anchor: number,
+	userDriven: boolean,
+): boolean | null {
+	if (top < 24) return false;
+	if (!userDriven) return null;
+	const delta = top - anchor;
+	if (delta < -12) return false;
+	if (delta > 12) return true;
+	return null;
 }

package/src/hooks/use-anchored-disclosure.ts

@@ -1,23 +1,23 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react";
 
 /** Keep the panel mounted until its material has returned to the trigger. */
 export function useAnchoredDisclosure(disabled = false) {
-    const [open, setOpen] = useState(false)
-    const [mounted, setMounted] = useState(false)
-    useEffect(() => {
-        if (disabled) setOpen(false)
-    }, [disabled])
-    const show = useCallback(() => {
-        setMounted(true)
-        setOpen(true)
-    }, [])
-    const toggle = useCallback(() => {
-        setMounted(true)
-        setOpen((current) => !current)
-    }, [])
-    const close = useCallback(() => setOpen(false), [])
-    const onExited = useCallback(() => {
-        if (!open || disabled) setMounted(false)
-    }, [open, disabled])
-    return { open: open && !disabled, mounted, show, toggle, close, onExited }
+	const [open, setOpen] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		if (disabled) setOpen(false);
+	}, [disabled]);
+	const show = useCallback(() => {
+		setMounted(true);
+		setOpen(true);
+	}, []);
+	const toggle = useCallback(() => {
+		setMounted(true);
+		setOpen((current) => !current);
+	}, []);
+	const close = useCallback(() => setOpen(false), []);
+	const onExited = useCallback(() => {
+		if (!open || disabled) setMounted(false);
+	}, [open, disabled]);
+	return { open: open && !disabled, mounted, show, toggle, close, onExited };
 }

package/src/hooks/use-anchored-placement.ts

@@ -1,5 +1,8 @@
-import { useLayoutEffect, useState } from "react"
-import { type AnchoredPlacement, placeAnchored } from "../lib/anchored-placement"
+import { useLayoutEffect, useState } from "react";
+import {
+	type AnchoredPlacement,
+	placeAnchored,
+} from "../lib/anchored-placement";
 
 /**
  * Places a panel of `width` and `needed` height under its anchor and
@@ -7,30 +10,31 @@ import { type AnchoredPlacement, placeAnchored } from "../lib/anchored-placement
  * scrolls, so it never hangs off the screen.
  */
 export function useAnchoredPlacement(
-    anchor: HTMLElement,
-    width: number,
-    needed: number,
-    overlap = false
+	anchor: HTMLElement,
+	width: number,
+	needed: number,
+	overlap = false,
 ): AnchoredPlacement {
-    const [placement, setPlacement] = useState(() =>
-        placeAnchored(anchor, width, needed, 6, overlap)
-    )
+	const [placement, setPlacement] = useState(() =>
+		placeAnchored(anchor, width, needed, 6, overlap),
+	);
 
-    useLayoutEffect(() => {
-        const replace = () => setPlacement(placeAnchored(anchor, width, needed, 6, overlap))
-        replace()
-        const viewport = window.visualViewport
-        viewport?.addEventListener("resize", replace)
-        viewport?.addEventListener("scroll", replace)
-        window.addEventListener("resize", replace)
-        window.addEventListener("scroll", replace, true)
-        return () => {
-            viewport?.removeEventListener("resize", replace)
-            viewport?.removeEventListener("scroll", replace)
-            window.removeEventListener("resize", replace)
-            window.removeEventListener("scroll", replace, true)
-        }
-    }, [anchor, width, needed, overlap])
+	useLayoutEffect(() => {
+		const replace = () =>
+			setPlacement(placeAnchored(anchor, width, needed, 6, overlap));
+		replace();
+		const viewport = window.visualViewport;
+		viewport?.addEventListener("resize", replace);
+		viewport?.addEventListener("scroll", replace);
+		window.addEventListener("resize", replace);
+		window.addEventListener("scroll", replace, true);
+		return () => {
+			viewport?.removeEventListener("resize", replace);
+			viewport?.removeEventListener("scroll", replace);
+			window.removeEventListener("resize", replace);
+			window.removeEventListener("scroll", replace, true);
+		};
+	}, [anchor, width, needed, overlap]);
 
-    return placement
+	return placement;
 }