@passui/react 0.1.47 → 0.2.0

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

@@ -1,260 +0,0 @@
-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";
-
-/* ══ Wake slider ══════════════════════════════════════════
-   A range with no thumb: a row of thin bars, solid up to the
-   value and faint after it, with the reading beside them. Drag
-   anywhere along it. Drag slowly and the bars simply fill; drag
-   fast and every bar the value sweeps past springs up, taller the
-   faster you went, and settles back — a wake left behind the hand.
-
-   ── EACH BAR HOLDS A LITTLE ENERGY ──────────────────────
-   When the value crosses a bar, that bar takes energy from the
-   speed of the drag. Every frame all of it decays at the same
-   rate, so the bars crossed longest ago have fallen furthest: the
-   tallest ones are always at the hand and the run tails off
-   behind it. That falloff IS the wake; nothing draws it.
-
-   ── WRITTEN, NOT RENDERED ───────────────────────────────
-   The heights change every frame, so they go straight onto each
-   bar's transform from a ref. React renders when the value
-   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
-
-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;
-}
-
-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,
-}: 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]);
-
-	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]);
-
-	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), []);
-
-	/* 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);
-		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 ?? 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));
-
-	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>
-	);
-}

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

@@ -1,23 +0,0 @@
-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 };
-}

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

@@ -1,40 +0,0 @@
-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
- * keeps it there: re-places while the viewport resizes or anything
- * scrolls, so it never hangs off the screen.
- */
-export function useAnchoredPlacement(
-	anchor: HTMLElement,
-	width: number,
-	needed: number,
-	overlap = false,
-): AnchoredPlacement {
-	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]);
-
-	return placement;
-}

package/src/hooks/use-dismiss.ts

@@ -1,44 +0,0 @@
-import { type RefObject, useEffect } from "react";
-import {
-	belongsToFloatingSurface,
-	ownsFloatingLayer,
-} from "../lib/floating-layers";
-
-/** Marks a floating layer (a pop-up list, a menu) whose clicks belong to what opened it. */
-export { FLOATING_LAYER } from "../lib/floating-layers";
-
-/**
- * Calls `onDismiss` when the user presses Escape or clicks outside `ref`
- * while `active`, for menus, popovers and sheets. Clicks in a floating
- * layer opened from inside, such as a pop-up button's list, don't count.
- */
-export function useDismiss(
-	ref: RefObject<HTMLElement | null>,
-	active: boolean,
-	onDismiss: () => void,
-): void {
-	useEffect(() => {
-		if (!active) return;
-		const onPointerDown = (event: PointerEvent) => {
-			const target = event.target as Element;
-			const surface = ref.current;
-			if (surface && belongsToFloatingSurface(surface, target)) return;
-			onDismiss();
-		};
-		const onKeyDown = (event: KeyboardEvent) => {
-			if (event.defaultPrevented) return;
-			if (ref.current && ownsFloatingLayer(ref.current, document.activeElement))
-				return;
-			if (event.key === "Escape") {
-				event.preventDefault();
-				onDismiss();
-			}
-		};
-		document.addEventListener("pointerdown", onPointerDown);
-		window.addEventListener("keydown", onKeyDown);
-		return () => {
-			document.removeEventListener("pointerdown", onPointerDown);
-			window.removeEventListener("keydown", onKeyDown);
-		};
-	}, [ref, active, onDismiss]);
-}

package/src/hooks/use-floating-dismiss.ts

@@ -1,30 +0,0 @@
-import { type RefObject, useEffect } from "react";
-import { isOutsideFloatingSurface } from "../lib/floating-layers";
-
-/** Dismiss an anchored portal without stealing focus from outside pointer interactions. */
-export function useFloatingDismiss(
-	surface: RefObject<HTMLElement | null>,
-	anchor: HTMLElement,
-	onDismiss: (restoreFocus: boolean) => void,
-) {
-	useEffect(() => {
-		const onPointer = (event: PointerEvent) => {
-			if (isOutsideFloatingSurface(surface.current, anchor, event.target))
-				onDismiss(false);
-		};
-		const onFocus = (event: FocusEvent) => {
-			if (isOutsideFloatingSurface(surface.current, anchor, event.target))
-				onDismiss(false);
-		};
-		const onBlur = () => onDismiss(false);
-
-		document.addEventListener("pointerdown", onPointer, true);
-		document.addEventListener("focusin", onFocus, true);
-		window.addEventListener("blur", onBlur);
-		return () => {
-			document.removeEventListener("pointerdown", onPointer, true);
-			document.removeEventListener("focusin", onFocus, true);
-			window.removeEventListener("blur", onBlur);
-		};
-	}, [surface, anchor, onDismiss]);
-}

package/src/hooks/use-media-query.ts

@@ -1,94 +0,0 @@
-import { useCallback, useSyncExternalStore } from "react";
-
-const BREAKPOINTS = {
-	"2xl": 1536,
-	"3xl": 1600,
-	"4xl": 2000,
-	lg: 1024,
-	md: 800,
-	sm: 640,
-	xl: 1280,
-} as const;
-
-export type Breakpoint = keyof typeof BREAKPOINTS;
-export type BreakpointQuery =
-	| Breakpoint
-	| `max-${Breakpoint}`
-	| `${Breakpoint}:max-${Breakpoint}`;
-function resolveMin(value: Breakpoint | number): string {
-	const px = typeof value === "number" ? value : BREAKPOINTS[value];
-	return `(min-width: ${px}px)`;
-}
-
-function resolveMax(value: Breakpoint | number): string {
-	const px = typeof value === "number" ? value : BREAKPOINTS[value];
-	return `(max-width: ${px - 1}px)`;
-}
-
-function parseQuery(
-	query: BreakpointQuery | MediaQueryInput | (string & {}),
-): string {
-	if (typeof query !== "string") {
-		const parts: string[] = [];
-		if (query.min != null) parts.push(resolveMin(query.min));
-		if (query.max != null) parts.push(resolveMax(query.max));
-		if (query.pointer === "coarse") parts.push("(pointer: coarse)");
-		if (query.pointer === "fine") parts.push("(pointer: fine)");
-		if (parts.length === 0) return "(min-width: 0px)";
-		return parts.join(" and ");
-	}
-
-	if (query.startsWith("(")) return query;
-
-	const parts: string[] = [];
-	for (const segment of query.split(":")) {
-		if (segment.startsWith("max-")) {
-			const bp = segment.slice(4);
-			if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint));
-		} else if (segment in BREAKPOINTS) {
-			parts.push(resolveMin(segment as Breakpoint));
-		}
-	}
-
-	return parts.length > 0 ? parts.join(" and ") : query;
-}
-
-function getServerSnapshot(): boolean {
-	return false;
-}
-
-export type MediaQueryInput = {
-	min?: Breakpoint | number;
-	max?: Breakpoint | number;
-	/** Touch-like input (finger). Use "fine" for mouse/trackpad. */
-	pointer?: PointerPrecision;
-};
-
-export type PointerPrecision = "coarse" | "fine";
-
-export function useMediaQuery(
-	query: BreakpointQuery | MediaQueryInput | (string & {}),
-): boolean {
-	const mediaQuery = parseQuery(query);
-
-	const subscribe = useCallback(
-		(callback: () => void) => {
-			if (typeof window === "undefined") return () => {};
-			const mql = window.matchMedia(mediaQuery);
-			mql.addEventListener("change", callback);
-			return () => mql.removeEventListener("change", callback);
-		},
-		[mediaQuery],
-	);
-
-	const getSnapshot = useCallback(() => {
-		if (typeof window === "undefined") return false;
-		return window.matchMedia(mediaQuery).matches;
-	}, [mediaQuery]);
-
-	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-
-export function useIsMobile(): boolean {
-	return useMediaQuery("(max-width: 768px)");
-}

package/src/hooks/use-minimize-on-scroll.ts

@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-import { minimizeDecision } from "./scroll/minimize-decision";
-
-/**
- * Minimized while you scroll down through content, restored when you scroll
- * back up or reach the top: iOS 26's `tabBarMinimizeBehavior(.onScrollDown)`.
- * Listens to every scroll container, since each screen scrolls its own pane.
- */
-export function useMinimizeOnScroll() {
-	const [minimized, setMinimized] = useState(false);
-	useEffect(() => {
-		const anchors = new WeakMap<Element, number>();
-		let intent: number | null = null;
-		const onIntent = () => {
-			intent = performance.now();
-		};
-		const onKey = (event: KeyboardEvent) => {
-			if (
-				[
-					"ArrowDown",
-					"ArrowUp",
-					"PageDown",
-					"PageUp",
-					"Home",
-					"End",
-					" ",
-				].includes(event.key)
-			)
-				onIntent();
-		};
-		const onPointer = (event: PointerEvent) => {
-			if (event.buttons === 1) onIntent();
-		};
-		const onScroll = (event: Event) => {
-			const pane =
-				event.target instanceof Element
-					? event.target
-					: document.scrollingElement;
-			if (
-				!pane ||
-				pane.closest("[role=dialog], [data-floating-layer]") ||
-				pane.scrollHeight <= pane.clientHeight + 1
-			)
-				return;
-			const top = pane.scrollTop;
-			const userDriven = intent !== null && performance.now() - intent < 2000;
-			const anchor = anchors.get(pane) ?? 0;
-			const next = minimizeDecision(top, anchor, userDriven);
-			if (next !== null) setMinimized(next);
-			if (next !== null || !userDriven) anchors.set(pane, top);
-		};
-		document.addEventListener("touchmove", onIntent, {
-			passive: true,
-		});
-		document.addEventListener("wheel", onIntent, {
-			passive: true,
-		});
-		document.addEventListener("pointermove", onPointer, {
-			passive: true,
-		});
-		document.addEventListener("keydown", onKey);
-		document.addEventListener("scroll", onScroll, {
-			capture: true,
-			passive: true,
-		});
-		return () => {
-			document.removeEventListener("scroll", onScroll, {
-				capture: true,
-			});
-			document.removeEventListener("touchmove", onIntent);
-			document.removeEventListener("wheel", onIntent);
-			document.removeEventListener("pointermove", onPointer);
-			document.removeEventListener("keydown", onKey);
-		};
-	}, []);
-	return [minimized, setMinimized] as const;
-}

package/src/hooks/viewport/types.ts

@@ -1,19 +0,0 @@
-export type ViewportInput = {
-	width: number;
-	height: number;
-	top: number;
-	left: number;
-	layoutHeight: number;
-	editing: boolean;
-};
-export type ViewportMetrics = {
-	width: number;
-	height: number;
-	top: number;
-	left: number;
-	keyboardOpen: boolean;
-};
-export type ViewportBaseline = {
-	width: number;
-	height: number;
-};

package/src/hooks/viewport/viewport-metrics.ts

@@ -1,19 +0,0 @@
-import type { ViewportBaseline, ViewportInput, ViewportMetrics } from "./types";
-
-/** A resized WebView and Safari's overlaid keyboard share one visible rectangle. */
-export function viewportMetrics(
-	input: ViewportInput,
-	baseline: ViewportBaseline,
-): ViewportMetrics {
-	const visibleHeight = Math.min(
-		input.height,
-		Math.max(0, input.layoutHeight - input.top),
-	);
-	return {
-		width: input.width,
-		height: visibleHeight,
-		top: input.top,
-		left: input.left,
-		keyboardOpen: input.editing && baseline.height - visibleHeight > 120,
-	};
-}