@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/scrub-input/evaluate.d.ts

@@ -0,0 +1,14 @@
+//#region src/scrub-input/evaluate.d.ts
+type Parsed = {
+  value: number;
+  unit?: string;
+} | null;
+/**
+ * Evaluates + - * / and parentheses over numbers that may carry a unit, such as
+ * `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication
+ * sign multiply. Returns `null` for anything else, or for a unit that is not in
+ * `units` (`deg` and the degree sign are aliases of each other).
+ */
+export declare function evaluateScrubExpression(text: string, units: readonly string[]): Parsed;
+//#endregion
+//# sourceMappingURL=evaluate.d.ts.map

package/dist/scrub-input/evaluate.js

@@ -0,0 +1,72 @@
+//#region src/scrub-input/evaluate.ts
+/**
+* Evaluates + - * / and parentheses over numbers that may carry a unit, such as
+* `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication
+* sign multiply. Returns `null` for anything else, or for a unit that is not in
+* `units` (`deg` and the degree sign are aliases of each other).
+*/
+function evaluateScrubExpression(text, units) {
+	const source = text.trim().replace(/,/g, ".").replace(/[×x](?=\s*[\d(.])/gi, "*").replace(/÷/g, "/").replace(/−/g, "-");
+	if (!source) return null;
+	const tokens = source.match(/\d*\.?\d+(?:e[+-]?\d+)?|[a-z%°]+|[-+*/()]|\S/gi);
+	if (!tokens) return null;
+	const list = tokens;
+	let index = 0;
+	let unit;
+	let bad = false;
+	const known = units.map((entry) => entry.toLowerCase());
+	const peek = () => list[index];
+	function primary() {
+		const token = list[index++];
+		if (token === "(") {
+			const inner = sum();
+			if (list[index++] !== ")") bad = true;
+			return inner;
+		}
+		if (token === "-") return -primary();
+		if (token === "+") return primary();
+		if (token === void 0 || !/^\d*\.?\d+/.test(token)) {
+			bad = true;
+			return 0;
+		}
+		const number = Number(token);
+		const next = peek();
+		if (next && /^[a-z%°]+$/i.test(next)) {
+			index++;
+			const word = next.toLowerCase();
+			const alias = word === "°" ? "deg" : word === "deg" ? "°" : word;
+			const found = known.includes(word) ? known.indexOf(word) : known.indexOf(alias);
+			if (found < 0) bad = true;
+			else unit = units[found];
+		}
+		return number;
+	}
+	function product() {
+		let left = primary();
+		while (peek() === "*" || peek() === "/") {
+			const op = list[index++];
+			const right = primary();
+			left = op === "*" ? left * right : left / right;
+		}
+		return left;
+	}
+	function sum() {
+		let left = product();
+		while (peek() === "+" || peek() === "-") {
+			const op = list[index++];
+			const right = product();
+			left = op === "+" ? left + right : left - right;
+		}
+		return left;
+	}
+	const value = sum();
+	if (bad || index !== list.length || !Number.isFinite(value)) return null;
+	return {
+		value,
+		unit
+	};
+}
+//#endregion
+export { evaluateScrubExpression };
+
+//# sourceMappingURL=evaluate.js.map

package/dist/scrub-input/evaluate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluate.js","names":[],"sources":["../../src/scrub-input/evaluate.ts"],"sourcesContent":["type Parsed = { value: number; unit?: string } | null;\n\n/**\n * Evaluates + - * / and parentheses over numbers that may carry a unit, such as\n * `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication\n * sign multiply. Returns `null` for anything else, or for a unit that is not in\n * `units` (`deg` and the degree sign are aliases of each other).\n */\nexport function evaluateScrubExpression(text: string, units: readonly string[]): Parsed {\n  const source = text\n    .trim()\n    .replace(/,/g, \".\")\n    .replace(/[×x](?=\\s*[\\d(.])/gi, \"*\")\n    .replace(/÷/g, \"/\")\n    .replace(/−/g, \"-\");\n  if (!source) return null;\n  const tokens = source.match(/\\d*\\.?\\d+(?:e[+-]?\\d+)?|[a-z%°]+|[-+*/()]|\\S/gi);\n  if (!tokens) return null;\n  const list = tokens;\n  let index = 0;\n  let unit: string | undefined;\n  let bad = false;\n  const known = units.map((entry) => entry.toLowerCase());\n  const peek = () => list[index];\n\n  function primary(): number {\n    const token = list[index++];\n    if (token === \"(\") {\n      const inner = sum();\n      if (list[index++] !== \")\") bad = true;\n      return inner;\n    }\n    if (token === \"-\") return -primary();\n    if (token === \"+\") return primary();\n    if (token === undefined || !/^\\d*\\.?\\d+/.test(token)) {\n      bad = true;\n      return 0;\n    }\n    const number = Number(token);\n    const next = peek();\n    if (next && /^[a-z%°]+$/i.test(next)) {\n      index++;\n      const word = next.toLowerCase();\n      const alias = word === \"°\" ? \"deg\" : word === \"deg\" ? \"°\" : word;\n      const found = known.includes(word) ? known.indexOf(word) : known.indexOf(alias);\n      if (found < 0) bad = true;\n      else unit = units[found];\n    }\n    return number;\n  }\n  function product(): number {\n    let left = primary();\n    while (peek() === \"*\" || peek() === \"/\") {\n      const op = list[index++];\n      const right = primary();\n      left = op === \"*\" ? left * right : left / right;\n    }\n    return left;\n  }\n  function sum(): number {\n    let left = product();\n    while (peek() === \"+\" || peek() === \"-\") {\n      const op = list[index++];\n      const right = product();\n      left = op === \"+\" ? left + right : left - right;\n    }\n    return left;\n  }\n\n  const value = sum();\n  if (bad || index !== list.length || !Number.isFinite(value)) return null;\n  return { value, unit };\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,wBAAwB,MAAc,OAAkC;CACtF,MAAM,SAAS,KACZ,KAAK,CAAC,CACN,QAAQ,MAAM,GAAG,CAAC,CAClB,QAAQ,uBAAuB,GAAG,CAAC,CACnC,QAAQ,MAAM,GAAG,CAAC,CAClB,QAAQ,MAAM,GAAG;CACpB,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,SAAS,OAAO,MAAM,gDAAgD;CAC5E,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,OAAO;CACb,IAAI,QAAQ;CACZ,IAAI;CACJ,IAAI,MAAM;CACV,MAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,YAAY,CAAC;CACtD,MAAM,aAAa,KAAK;CAExB,SAAS,UAAkB;EACzB,MAAM,QAAQ,KAAK;EACnB,IAAI,UAAU,KAAK;GACjB,MAAM,QAAQ,IAAI;GAClB,IAAI,KAAK,aAAa,KAAK,MAAM;GACjC,OAAO;EACT;EACA,IAAI,UAAU,KAAK,OAAO,CAAC,QAAQ;EACnC,IAAI,UAAU,KAAK,OAAO,QAAQ;EAClC,IAAI,UAAU,KAAA,KAAa,CAAC,aAAa,KAAK,KAAK,GAAG;GACpD,MAAM;GACN,OAAO;EACT;EACA,MAAM,SAAS,OAAO,KAAK;EAC3B,MAAM,OAAO,KAAK;EAClB,IAAI,QAAQ,cAAc,KAAK,IAAI,GAAG;GACpC;GACA,MAAM,OAAO,KAAK,YAAY;GAC9B,MAAM,QAAQ,SAAS,MAAM,QAAQ,SAAS,QAAQ,MAAM;GAC5D,MAAM,QAAQ,MAAM,SAAS,IAAI,IAAI,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,KAAK;GAC9E,IAAI,QAAQ,GAAG,MAAM;QAChB,OAAO,MAAM;EACpB;EACA,OAAO;CACT;CACA,SAAS,UAAkB;EACzB,IAAI,OAAO,QAAQ;EACnB,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,KAAK;GACvC,MAAM,KAAK,KAAK;GAChB,MAAM,QAAQ,QAAQ;GACtB,OAAO,OAAO,MAAM,OAAO,QAAQ,OAAO;EAC5C;EACA,OAAO;CACT;CACA,SAAS,MAAc;EACrB,IAAI,OAAO,QAAQ;EACnB,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,KAAK;GACvC,MAAM,KAAK,KAAK;GAChB,MAAM,QAAQ,QAAQ;GACtB,OAAO,OAAO,MAAM,OAAO,QAAQ,OAAO;EAC5C;EACA,OAAO;CACT;CAEA,MAAM,QAAQ,IAAI;CAClB,IAAI,OAAO,UAAU,KAAK,UAAU,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO;CACpE,OAAO;EAAE;EAAO;CAAK;AACvB"}

package/dist/scrub-input/index.d.ts

@@ -0,0 +1,3 @@
+import { ScrubInput, ScrubInputChangeDetails, ScrubInputProps, ScrubInputSource } from "./scrub-input.js";
+import { evaluateScrubExpression } from "./evaluate.js";
+export { ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, evaluateScrubExpression };

package/dist/scrub-input/index.js

@@ -0,0 +1,3 @@
+import { evaluateScrubExpression } from "./evaluate.js";
+import { ScrubInput } from "./scrub-input.js";
+export { ScrubInput, evaluateScrubExpression };

package/dist/scrub-input/scrub-input.d.ts

@@ -0,0 +1,74 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+//#region src/scrub-input/scrub-input.d.ts
+export type ScrubInputSource = "scrub" | "type" | "key" | "reset";
+export interface ScrubInputChangeDetails {
+  /** What produced the value: a label drag, a typed entry, an arrow key, or a double click reset. */
+  source: ScrubInputSource;
+  /** The unit in effect after the change. */
+  unit: string;
+}
+export interface ScrubInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size" | "min" | "max" | "step" | "prefix" | "className"> {
+  /** Text or a 16px icon. It is the scrub handle. An icon label needs `aria-label` so the field keeps an accessible name. */
+  label: ReactNode;
+  /** The value. Controlled when given. */
+  value?: number;
+  /** @default 0 */
+  defaultValue?: number;
+  /** Fires for every change, including each step of a scrub. */
+  onValueChange?: (value: number, details: ScrubInputChangeDetails) => void;
+  /** Fires once when a change settles: a scrub ends, Enter or blur commits typing, or a key step lands. Save on this. */
+  onValueCommit?: (value: number, details: ScrubInputChangeDetails) => void;
+  /** @default -Infinity */
+  min?: number;
+  /** @default Infinity */
+  max?: number;
+  /** One step for the arrow keys and for scrubbing. @default 1 */
+  step?: number;
+  /** The step with Alt held. @default step / 10 */
+  fineStep?: number;
+  /** The step with Shift held; coarse steps land on the coarse grid. @default step * 10 */
+  coarseStep?: number;
+  /** Decimal places kept. Defaults to the precision of `step` or `fineStep`. */
+  precision?: number;
+  /** Pointer travel in px for one step while scrubbing. @default 2 */
+  pixelsPerStep?: number;
+  /** Wraps from `max` back to `min`, as a rotation does. Needs both limits. @default false */
+  wrap?: boolean;
+  /** The unit shown after the number. Controlled when given. With more than one entry in `units` it is a button that cycles them. */
+  unit?: string;
+  defaultUnit?: string;
+  /** The units a typed value may carry, such as `["px", "%"]`. Defaults to the current unit. */
+  units?: readonly string[];
+  onUnitChange?: (unit: string) => void;
+  /** Double click the label to return here. */
+  resetValue?: number;
+  /** Shows where the value sits between `min` and `max` as a quiet fill. On by default when both limits are set. */
+  track?: boolean;
+  /** `md` is the compact control height, `sm` is 30px. @default "md" */
+  size?: "sm" | "md";
+  /** Locks the mouse pointer while it scrubs, when the browser allows it, so a long drag never runs out of screen. @default true */
+  pointerLock?: boolean;
+  /** Extra classes for the field. Merged last, so `w-40` sizes it. */
+  className?: string;
+}
+/**
+ * A compact number field for inspectors and property panels. Drag the label sideways to
+ * scrub the value (the mouse pointer is locked when the browser allows it, so a long drag
+ * never runs out of screen), or click in and type an exact value. A typed entry takes
+ * arithmetic such as `12*2` or `(100-24)/2`, and a unit from `units` such as `50%`.
+ *
+ * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter
+ * commits typing, Escape restores the last value (or cancels a scrub back to where it
+ * began). A double click on the label restores `resetValue`. The input is a spinbutton, and
+ * its value text spells out percent and degrees.
+ *
+ * At a limit the field strains: dragged past `min` or `max` it stretches against
+ * rubber-band resistance and springs back on release, and a refused step or an invalid
+ * entry kicks the number. Reduced motion removes the strain, the kick and the fill's glide.
+ *
+ * @example
+ * <ScrubInput label="W" value={width} onValueChange={setWidth} min={0} units={["px", "%"]} />
+ */
+export declare const ScrubInput: import("react").ForwardRefExoticComponent<ScrubInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=scrub-input.d.ts.map

package/dist/scrub-input/scrub-input.js

@@ -0,0 +1,486 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { evaluateScrubExpression } from "./evaluate.js";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/scrub-input/scrub-input.tsx
+/** Movement before a press on the label becomes a scrub, and the most pixels the field strains past a limit. */
+const SLOP = 3;
+const STRAIN = 12;
+/** The most overshoot kept, so reversing starts moving the value again after a short relax. */
+const OVERSHOOT_CAP = 90;
+/** How far a refused step or an invalid entry kicks the number (px). */
+const KICK = 6;
+/** The longest the spring home takes (the smooth spring, 720ms) plus a margin. */
+const RELEASE_MS = 900;
+/** How long an invalid entry is flagged. */
+const INVALID_MS = 900;
+const decimalsOf = (value) => {
+	const text = String(value);
+	if (text.includes("e-")) return Number(text.split("e-")[1]);
+	return (text.split(".")[1] ?? "").length;
+};
+const roundTo = (value, places) => {
+	const factor = 10 ** places;
+	return Math.round(value * factor) / factor;
+};
+/** Rubber-band resistance: each extra pixel gives less, and the strain never exceeds `limit`. */
+const rubber = (distance, limit = STRAIN) => Math.sign(distance) * (1 - 1 / (Math.abs(distance) * .55 / limit + 1)) * limit;
+const format = (value, places) => String(roundTo(value, places)).replace(/^-0$/, "0");
+const sizeClass = {
+	md: "h-(--density-control-h-sm) rounded-md text-sm",
+	sm: "h-7.5 rounded-sm text-xs"
+};
+/**
+* A compact number field for inspectors and property panels. Drag the label sideways to
+* scrub the value (the mouse pointer is locked when the browser allows it, so a long drag
+* never runs out of screen), or click in and type an exact value. A typed entry takes
+* arithmetic such as `12*2` or `(100-24)/2`, and a unit from `units` such as `50%`.
+*
+* Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter
+* commits typing, Escape restores the last value (or cancels a scrub back to where it
+* began). A double click on the label restores `resetValue`. The input is a spinbutton, and
+* its value text spells out percent and degrees.
+*
+* At a limit the field strains: dragged past `min` or `max` it stretches against
+* rubber-band resistance and springs back on release, and a refused step or an invalid
+* entry kicks the number. Reduced motion removes the strain, the kick and the fill's glide.
+*
+* @example
+* <ScrubInput label="W" value={width} onValueChange={setWidth} min={0} units={["px", "%"]} />
+*/
+const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue = 0, onValueChange, onValueCommit, min = -Infinity, max = Infinity, step = 1, fineStep, coarseStep, precision, pixelsPerStep = 2, wrap = false, unit: unitProp, defaultUnit, units, onUnitChange, resetValue, track, size = "md", pointerLock = true, className, disabled, id: idProp, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, ...rest }, forwarded) {
+	const uid = useId();
+	const id = idProp ?? `scrub-${uid.replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const inputRef = useRef(null);
+	useImperativeHandle(forwarded, () => inputRef.current);
+	const shellRef = useRef(null);
+	const bodyRef = useRef(null);
+	const handleRef = useRef(null);
+	const cursorRef = useRef(null);
+	const fine = fineStep ?? step / 10;
+	const coarse = coarseStep ?? step * 10;
+	const places = precision ?? Math.max(decimalsOf(step), decimalsOf(fine));
+	const canWrap = wrap && Number.isFinite(min) && Number.isFinite(max) && max > min;
+	const showTrack = (track ?? true) && Number.isFinite(min) && Number.isFinite(max) && max > min;
+	const [inner, setInner] = useState(defaultValue);
+	const current = value ?? inner;
+	const [innerUnit, setInnerUnit] = useState(defaultUnit ?? unitProp ?? units?.[0] ?? "");
+	const unit = unitProp ?? innerUnit;
+	const unitList = units ?? (unit ? [unit] : []);
+	const [draft, setDraft] = useState(null);
+	const [scrubbing, setScrubbing] = useState(null);
+	const [modifier, setModifier] = useState(null);
+	const [invalid, setInvalid] = useState(false);
+	const [releasing, setReleasing] = useState(false);
+	const latest = useRef({
+		current,
+		unit
+	});
+	useEffect(() => {
+		latest.current = {
+			current,
+			unit
+		};
+	}, [current, unit]);
+	const drag = useRef(null);
+	const suppressClick = useRef(false);
+	const timers = useRef({
+		invalid: 0,
+		release: 0
+	});
+	const cursor = useRef({
+		x: 0,
+		y: 0
+	});
+	useEffect(() => {
+		const pending = timers.current;
+		return () => {
+			window.clearTimeout(pending.invalid);
+			window.clearTimeout(pending.release);
+			document.documentElement.style.removeProperty("cursor");
+		};
+	}, []);
+	const fraction = showTrack ? Math.min(1, Math.max(0, (current - min) / (max - min))) : 0;
+	/** The strain past a limit in px (positive past max): the shell stretches from its far edge and the number leans with it. */
+	function paintStrain(amount) {
+		const shell = shellRef.current;
+		const body = bodyRef.current;
+		if (shell) {
+			const width = Math.max(1, shell.offsetWidth);
+			shell.style.transform = amount === 0 ? "" : `scaleX(${1 + Math.abs(amount) / width})`;
+			shell.style.transformOrigin = amount >= 0 ? "left" : "right";
+		}
+		if (body) body.style.transform = amount === 0 ? "" : `translateX(${amount * .5}px)`;
+	}
+	/** Lets the shell and the number spring home: a transition switched on for the moment the strain is cleared. */
+	function springHome() {
+		paintStrain(0);
+		if (prefersReducedMotion()) return;
+		setReleasing(true);
+		window.clearTimeout(timers.current.release);
+		timers.current.release = window.setTimeout(() => setReleasing(false), RELEASE_MS);
+	}
+	/** A short kick of the number toward `direction`: a step refused at a limit, or an entry that was not understood. */
+	function kick(direction) {
+		const node = bodyRef.current;
+		if (!node || prefersReducedMotion()) return;
+		node.style.setProperty("--strain-x", `${direction * KICK}px`);
+		node.removeAttribute("data-strain");
+		node.offsetWidth;
+		node.setAttribute("data-strain", "");
+	}
+	const emit = useCallback((next, source, commit, nextUnit = latest.current.unit) => {
+		if (next !== latest.current.current) {
+			latest.current = {
+				current: next,
+				unit: nextUnit
+			};
+			if (value === void 0) setInner(next);
+			onValueChange?.(next, {
+				source,
+				unit: nextUnit
+			});
+		}
+		if (commit) onValueCommit?.(next, {
+			source,
+			unit: nextUnit
+		});
+	}, [
+		onValueChange,
+		onValueCommit,
+		value
+	]);
+	const constrain = (next) => {
+		const rounded = roundTo(next, places);
+		if (canWrap) {
+			const span = max - min;
+			return roundTo(((rounded - min) % span + span) % span + min, places);
+		}
+		return Math.min(max, Math.max(min, rounded));
+	};
+	function flagInvalid() {
+		setInvalid(true);
+		window.clearTimeout(timers.current.invalid);
+		timers.current.invalid = window.setTimeout(() => setInvalid(false), INVALID_MS);
+		kick(-1);
+	}
+	function commitDraft(text = draft) {
+		setDraft(null);
+		if (text === null) return true;
+		if (text.trim() === format(current, places)) return true;
+		const parsed = evaluateScrubExpression(text, unitList);
+		if (!parsed) {
+			flagInvalid();
+			return false;
+		}
+		let nextUnit = latest.current.unit;
+		if (parsed.unit && parsed.unit !== nextUnit) {
+			nextUnit = parsed.unit;
+			if (unitProp === void 0) setInnerUnit(nextUnit);
+			onUnitChange?.(nextUnit);
+		}
+		if (!canWrap && (parsed.value > max || parsed.value < min)) kick(parsed.value > max ? 1 : -1);
+		emit(constrain(parsed.value), "type", true, nextUnit);
+		return true;
+	}
+	function stepBy(direction, event) {
+		const amount = event.shiftKey ? coarse : event.altKey ? fine : step;
+		const base = latest.current.current;
+		if (!canWrap && (direction > 0 && base >= max || direction < 0 && base <= min)) {
+			kick(direction);
+			return;
+		}
+		const snapped = event.shiftKey ? (direction > 0 ? Math.floor(base / amount + 1e-9) + 1 : Math.ceil(base / amount - 1e-9) - 1) * amount : base + direction * amount;
+		emit(constrain(snapped), "key", true);
+	}
+	const endScrub = useCallback((cancel) => {
+		const state = drag.current;
+		drag.current = null;
+		if (!state) return;
+		document.documentElement.style.removeProperty("cursor");
+		if (document.pointerLockElement === handleRef.current) document.exitPointerLock();
+		setScrubbing(null);
+		setModifier(null);
+		if (!state.moved) return;
+		suppressClick.current = true;
+		if (cancel) emit(state.start, "scrub", true);
+		else onValueCommit?.(latest.current.current, {
+			source: "scrub",
+			unit: latest.current.unit
+		});
+		springHome();
+	}, [emit, onValueCommit]);
+	useEffect(() => {
+		if (!scrubbing) return;
+		const onKey = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				endScrub(true);
+				return;
+			}
+			if (event.key === "Shift" || event.key === "Alt") setModifier(event.shiftKey ? "coarse" : event.altKey ? "fine" : null);
+		};
+		const onLock = () => {
+			if (drag.current?.locked && document.pointerLockElement !== handleRef.current) endScrub(false);
+		};
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("keyup", onKey);
+		document.addEventListener("pointerlockchange", onLock);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("keyup", onKey);
+			document.removeEventListener("pointerlockchange", onLock);
+		};
+	}, [endScrub, scrubbing]);
+	function placeCursor() {
+		const node = cursorRef.current;
+		if (node) node.style.transform = `translate3d(${cursor.current.x}px, ${cursor.current.y}px, 0)`;
+	}
+	function onHandleDown(event) {
+		if (disabled || drag.current || event.pointerType === "mouse" && event.button !== 0) return;
+		event.preventDefault();
+		if (draft !== null) commitDraft();
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		drag.current = {
+			id: event.pointerId,
+			lastX: event.clientX,
+			travel: 0,
+			raw: latest.current.current,
+			start: latest.current.current,
+			moved: false,
+			locked: false,
+			mouse: event.pointerType === "mouse"
+		};
+		cursor.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	function onHandleMove(event) {
+		const state = drag.current;
+		if (!state || event.pointerId !== state.id) return;
+		const locked = document.pointerLockElement === handleRef.current;
+		const dx = locked ? event.movementX : event.clientX - state.lastX;
+		state.lastX = event.clientX;
+		state.travel += dx;
+		if (!state.moved) {
+			if (Math.abs(state.travel) < SLOP) return;
+			state.moved = true;
+			inputRef.current?.blur();
+			document.documentElement.style.cursor = "ew-resize";
+			if (pointerLock && state.mouse && handleRef.current?.requestPointerLock) try {
+				const request = handleRef.current.requestPointerLock();
+				if (request instanceof Promise) request.catch(() => {});
+			} catch {}
+			setScrubbing({ locked: false });
+		}
+		if (locked && !state.locked) {
+			state.locked = true;
+			setScrubbing({ locked: true });
+		}
+		if (locked) {
+			const width = window.innerWidth;
+			cursor.current.x = ((cursor.current.x + dx) % width + width) % width;
+		} else cursor.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		placeCursor();
+		const amount = event.shiftKey ? coarse : event.altKey ? fine : step;
+		const mode = event.shiftKey ? "coarse" : event.altKey ? "fine" : null;
+		if (mode !== modifier) setModifier(mode);
+		state.raw += dx / pixelsPerStep * amount;
+		if (!canWrap) {
+			const perPx = amount / pixelsPerStep;
+			const over = state.raw > max ? (state.raw - max) / perPx : state.raw < min ? (state.raw - min) / perPx : 0;
+			if (Math.abs(over) > OVERSHOOT_CAP) state.raw = (over > 0 ? max : min) + Math.sign(over) * OVERSHOOT_CAP * perPx;
+			paintStrain(prefersReducedMotion() ? 0 : rubber(Math.max(-90, Math.min(OVERSHOOT_CAP, over))));
+		}
+		const next = constrain(Math.round(state.raw / amount) * amount);
+		if (next !== latest.current.current) emit(next, "scrub", false);
+	}
+	function onHandleUp(event) {
+		const state = drag.current;
+		if (!state || event.pointerId !== state.id) return;
+		endScrub(false);
+	}
+	function onHandleClick(event) {
+		if (suppressClick.current) {
+			suppressClick.current = false;
+			event.preventDefault();
+			return;
+		}
+		if (disabled) return;
+		event.preventDefault();
+		inputRef.current?.focus();
+		inputRef.current?.select();
+	}
+	function onHandleDoubleClick() {
+		if (disabled || resetValue === void 0) return;
+		emit(constrain(resetValue), "reset", true);
+	}
+	function onInputKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			event.preventDefault();
+			if (draft !== null && !commitDraft()) return;
+			stepBy(event.key === "ArrowUp" ? 1 : -1, event);
+			requestAnimationFrame(() => inputRef.current?.select());
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commitDraft();
+			requestAnimationFrame(() => inputRef.current?.select());
+			return;
+		}
+		if (event.key === "Escape" && draft !== null) {
+			event.preventDefault();
+			event.stopPropagation();
+			setDraft(null);
+			requestAnimationFrame(() => inputRef.current?.select());
+		}
+	}
+	function onInputFocus(event) {
+		onFocus?.(event);
+		event.currentTarget.select();
+	}
+	function onInputBlur(event) {
+		onBlur?.(event);
+		commitDraft();
+	}
+	function cycleUnit() {
+		if (unitList.length < 2) return;
+		const next = unitList[(unitList.indexOf(unit) + 1) % unitList.length] ?? unit;
+		if (unitProp === void 0) setInnerUnit(next);
+		onUnitChange?.(next);
+		latest.current = {
+			...latest.current,
+			unit: next
+		};
+	}
+	const text = draft ?? format(current, places);
+	const spokenUnit = unit === "%" ? "percent" : unit === "deg" || unit === "°" ? "degrees" : unit;
+	const valueText = `${format(current, places)}${unit ? ` ${spokenUnit}` : ""}`;
+	const multiplier = modifier === "coarse" ? `×${format(coarse / step, 2)}` : modifier === "fine" ? `×${format(fine / step, 3)}` : null;
+	const labelIsText = typeof label === "string" || typeof label === "number";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "scrub-input",
+		"data-size": size,
+		"data-disabled": disabled ? "" : void 0,
+		"data-scrubbing": scrubbing ? "" : void 0,
+		"data-invalid": invalid ? "" : void 0,
+		"data-releasing": releasing ? "" : void 0,
+		className: cn(cnAll("group/scrub relative isolate grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-stretch font-sans text-foreground", sizeClass[size], "data-[disabled]:opacity-(--opacity-disabled)"), className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: shellRef,
+				"aria-hidden": "true",
+				"data-slot": "scrub-input-shell",
+				className: cnAll("absolute inset-0 -z-10 overflow-hidden border-(length:--border-width) border-transparent bg-surface-muted will-change-transform", size === "sm" ? "rounded-sm" : "rounded-md", "motion-safe:transition-[background-color,border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle", "group-data-[releasing]/scrub:motion-safe:transition-[transform,background-color,border-color] group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth", "group-hover/scrub:border-border", "group-focus-within/scrub:border-foreground group-focus-within/scrub:bg-surface", "forced-colors:group-focus-within/scrub:outline-solid forced-colors:group-focus-within/scrub:outline-(length:--focus-ring-width) forced-colors:group-focus-within/scrub:outline-offset-(--focus-ring-offset)", "group-data-[scrubbing]/scrub:border-border-strong", "group-data-[invalid]/scrub:border-destructive-strong"),
+				children: showTrack ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "scrub-input-fill",
+					style: { transform: `scaleX(${fraction})` },
+					className: "pointer-events-none absolute inset-0 origin-left bg-foreground/6 group-data-[scrubbing]/scrub:bg-foreground/10 motion-safe:transition-transform motion-safe:duration-(--duration-smooth) motion-safe:ease-smooth group-data-[scrubbing]/scrub:motion-safe:transition-none"
+				}) : null
+			}),
+			/* @__PURE__ */ jsx("label", {
+				ref: handleRef,
+				htmlFor: id,
+				"data-slot": "scrub-input-handle",
+				"data-text": labelIsText ? "" : void 0,
+				onPointerDown: onHandleDown,
+				onPointerMove: onHandleMove,
+				onPointerUp: onHandleUp,
+				onPointerCancel: onHandleUp,
+				onClick: onHandleClick,
+				onDoubleClick: onHandleDoubleClick,
+				className: "flex min-w-7.5 cursor-ew-resize touch-pan-y items-center justify-center ps-2.5 pe-1 text-text-secondary select-none motion-safe:transition-colors motion-safe:duration-(--duration-quick) data-[text]:font-medium hover:text-foreground group-data-[scrubbing]/scrub:text-foreground group-data-[disabled]/scrub:cursor-not-allowed [&_svg]:size-3.5 [&_svg]:flex-none",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: bodyRef,
+				"data-slot": "scrub-input-body",
+				className: cnAll("flex min-w-0 items-center gap-0.5 pe-2.5 data-[strain]:motion-safe:animate-field-strain", "group-data-[releasing]/scrub:motion-safe:transition-transform group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth"),
+				children: [/* @__PURE__ */ jsx("input", {
+					...rest,
+					ref: inputRef,
+					id,
+					type: "text",
+					inputMode: "decimal",
+					autoComplete: "off",
+					spellCheck: false,
+					role: "spinbutton",
+					"aria-label": ariaLabel,
+					"aria-valuenow": current,
+					"aria-valuemin": Number.isFinite(min) ? min : void 0,
+					"aria-valuemax": Number.isFinite(max) ? max : void 0,
+					"aria-valuetext": valueText,
+					"aria-invalid": invalid || void 0,
+					disabled,
+					value: text,
+					onChange: (event) => setDraft(event.target.value),
+					onFocus: onInputFocus,
+					onBlur: onInputBlur,
+					onKeyDown: onInputKeyDown,
+					className: cnAll("m-0 h-full w-full min-w-0 flex-1 border-0 bg-transparent p-0 ps-1 font-sans text-foreground tabular-nums outline-none selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed", size === "sm" ? "text-xs" : "text-sm")
+				}), unit ? unitList.length > 1 ? /* @__PURE__ */ jsx(Button, {
+					"data-slot": "scrub-input-unit",
+					isDisabled: disabled,
+					onPress: cycleUnit,
+					"aria-label": `Unit: ${unit}. Change unit`,
+					className: "relative inline-flex h-6 min-w-6 flex-none cursor-pointer items-center justify-center rounded-xs border-0 bg-transparent px-1 text-xs text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-foreground/7 data-[hovered]:text-foreground data-[pressed]:scale-95 data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: unit,
+						motion: "rise",
+						children: unit
+					})
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "scrub-input-unit",
+					className: "inline-flex h-6 min-w-4.5 flex-none items-center justify-center px-1 text-xs text-text-secondary",
+					children: unit
+				}) : null]
+			}),
+			multiplier && !scrubbing?.locked ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "scrub-input-multiplier",
+				className: "pointer-events-none absolute bottom-full mb-1.5 start-1.5 z-10 rounded-pill bg-foreground px-1.75 py-0.5 text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in",
+				children: multiplier
+			}) : null,
+			scrubbing?.locked ? createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: (node) => {
+					cursorRef.current = node;
+					placeCursor();
+				},
+				"aria-hidden": "true",
+				"data-slot": "scrub-input-cursor",
+				className: "pointer-events-none fixed top-0 left-0 z-50 -mt-2 -ms-3.25 flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("svg", {
+					width: "26",
+					height: "16",
+					viewBox: "0 0 26 16",
+					className: "block fill-foreground stroke-background drop-shadow-sm",
+					strokeWidth: "1.4",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M1.5 8 L7.5 2.5 V6 H18.5 V2.5 L24.5 8 L18.5 13.5 V10 H7.5 V13.5 Z" })
+				}), multiplier ? /* @__PURE__ */ jsx("span", {
+					className: "rounded-pill bg-foreground px-1.5 py-px font-sans text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in",
+					children: multiplier
+				}) : null]
+			}), document.body) : null
+		]
+	});
+});
+//#endregion
+export { ScrubInput };
+
+//# sourceMappingURL=scrub-input.js.map