@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/easing.js

@@ -1,229 +1,519 @@
-import { n as e } from "./button-32mg6xA8.js";
-import { a as t, c as n, o as r, r as i, s as a } from "./select-BIv4R3Ir.js";
-import { n as o } from "./slider-Cc_qw6GA.js";
-import { n as s, r as c } from "./configurator-CSENXXSy.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, normalizeClass as y, onScopeDispose as ee, onUnmounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D, useModel as O, useTemplateRef as te, watch as ne, withCtx as k } from "vue";
-import { Check as re, Copy as ie, LoaderCircle as ae, Play as oe, RotateCcw as se, Square as ce } from "@lucide/vue";
-import { CSSCubicBezier as A, bezierPresets as j, jumpTerms as le, parseSteps as M, steppedEase as N } from "@mkbabb/value.js";
+import { t as e } from "./class-names-q-UGOkHH.js";
+import { t } from "./DotRing-Blh4Mc3Q.js";
+import { n } from "./useReducedMotion-vCXA_vyM.js";
+import { t as r } from "./button-yvGPb0Bx.js";
+import { t as i } from "./useClipboard-D36OTaeT.js";
+import { a, c as o, l as s, r as c, s as l } from "./select-CDgwGH_P.js";
+import { t as u } from "./slider-gsc8jDIo.js";
+import { t as d } from "./tabs-CYscnq5H.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, normalizeClass as S, onScopeDispose as C, onUnmounted as ee, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, useId as k, useModel as te, useTemplateRef as A, watch as ne, withCtx as j } from "vue";
+import { Check as re, Copy as ie, Play as ae, RotateCcw as oe, Square as se } from "@lucide/vue";
+import { parseTimingFunction as M } from "@mkbabb/value.js/css";
+import { CubicBezier as N, bezierPresets as P, jumpTerms as ce, steppedEase as F } from "@mkbabb/value.js/easing";
 //#region src/components/easing/constants.ts
-var P = "custom", ue = "ease-out-back", F = (e) => 1 - e, I = .1, L = .6, de = .1, fe = .15, R = 1200, pe = 1400, me = 2e3, z = Object.keys(j);
-function B(e = {}) {
-	let t = S(e.initialMode ?? "bezier"), n = S(e.initialPreset ?? "ease-out-back"), r = S([...j[n.value in j ? n.value : ue]]);
-	function i(e) {
-		n.value = e;
-		let t = j[e];
-		t && (r.value = [...t]);
+var le = "custom", I = "ease-out-back", L = "jump-end", R = (e) => 1 - e, z = -.1, B = 1.1, V = +(B - z).toFixed(6), ue = `${z} ${z} ${V} ${V}`, H = .6, de = 1200, fe = 1400, pe = 2e3, me = ["data-clipped"], he = ["viewBox", "aria-label"], U = ["x1", "x2"], ge = ["y1", "y2"], _e = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], ve = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], ye = [
+	"d",
+	"stroke-opacity",
+	"data-tone"
+], be = [
+	"y1",
+	"x2",
+	"y2"
+], W = ["cx", "cy"], xe = /* @__PURE__ */ b({
+	__name: "EasingCurve",
+	props: {
+		strokes: {},
+		progress: { default: 0 },
+		travel: { default: null },
+		clipped: {
+			type: Boolean,
+			default: !1
+		},
+		drawn: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Easing curve" },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	},
+	setup(t) {
+		let n = t, r = [
+			.25,
+			.5,
+			.75
+		];
+		function i(e) {
+			return e === "ghost" ? !1 : n.drawn ? "transition-[clip-path] ease-out-expo duration-slow motion-reduce:transition-none [clip-path:inset(-60%_-2%_-60%_-2%)]" : "transition-[clip-path] ease-out-expo duration-0 motion-reduce:transition-none [clip-path:inset(-60%_104%_-60%_-2%)]";
+		}
+		return (a, o) => (w(), g("div", {
+			"data-slot": "easing-curve",
+			"data-clipped": n.clipped ? "" : void 0,
+			class: S(O(e)("relative isolate", n.class)),
+			style: { "--easing-curve-accent": "var(--motion-accent, var(--viz-legendre))" }
+		}, [
+			(w(), g("svg", {
+				class: S(O(e)("block aspect-square w-full select-none", "text-(--easing-curve-accent)")),
+				viewBox: O(ue),
+				preserveAspectRatio: "xMidYMid meet",
+				role: "img",
+				"aria-label": t.label
+			}, [
+				o[0] ||= _("rect", {
+					x: "0",
+					y: "0",
+					width: "1",
+					height: "1",
+					fill: "none",
+					class: "stroke-border",
+					"stroke-width": "1",
+					"vector-effect": "non-scaling-stroke"
+				}, null, -1),
+				o[1] ||= _("line", {
+					x1: "0",
+					y1: "1",
+					x2: "1",
+					y2: "0",
+					class: "stroke-muted-foreground/30",
+					"stroke-width": "1",
+					"stroke-dasharray": "4 3",
+					"vector-effect": "non-scaling-stroke"
+				}, null, -1),
+				(w(), g(f, null, E(r, (e) => _("line", {
+					key: "gx" + e,
+					x1: e,
+					y1: "0",
+					x2: e,
+					y2: "1",
+					class: "stroke-border/40",
+					"stroke-width": "1",
+					"vector-effect": "non-scaling-stroke"
+				}, null, 8, U)), 64)),
+				(w(), g(f, null, E(r, (e) => _("line", {
+					key: "gy" + e,
+					x1: "0",
+					y1: e,
+					x2: "1",
+					y2: e,
+					class: "stroke-border/40",
+					"stroke-width": "1",
+					"vector-effect": "non-scaling-stroke"
+				}, null, 8, ge)), 64)),
+				n.clipped ? (w(), g(f, { key: 0 }, [_("line", {
+					x1: O(z),
+					y1: O(z),
+					x2: O(B),
+					y2: O(z),
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"vector-effect": "non-scaling-stroke",
+					"data-slot": "easing-curve-clip-edge"
+				}, null, 8, _e), _("line", {
+					x1: O(z),
+					y1: O(B),
+					x2: O(B),
+					y2: O(B),
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"vector-effect": "non-scaling-stroke"
+				}, null, 8, ve)], 64)) : h("", !0),
+				(w(!0), g(f, null, E(n.strokes, (e, t) => (w(), g("path", {
+					key: t,
+					d: e.d,
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-opacity": e.tone === "ghost" ? .3 : 1,
+					"stroke-width": "3",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "miter",
+					"vector-effect": "non-scaling-stroke",
+					class: S(i(e.tone)),
+					"data-tone": e.tone ?? "ink",
+					"data-slot": "easing-curve-stroke"
+				}, null, 10, ye))), 128)),
+				o[2] ||= _("circle", {
+					cx: "0",
+					cy: "1",
+					r: "0.018",
+					class: "fill-muted-foreground/50"
+				}, null, -1),
+				o[3] ||= _("circle", {
+					cx: "1",
+					cy: "0",
+					r: "0.018",
+					class: "fill-muted-foreground/50"
+				}, null, -1),
+				n.travel === null ? h("", !0) : (w(), g(f, { key: 1 }, [_("line", {
+					x1: 0,
+					y1: O(R)(0),
+					x2: n.progress,
+					y2: O(R)(n.travel),
+					stroke: "currentColor",
+					"stroke-opacity": "0.16",
+					"stroke-width": "2",
+					"vector-effect": "non-scaling-stroke"
+				}, null, 8, be), _("circle", {
+					cx: n.progress,
+					cy: O(R)(n.travel),
+					r: "0.03",
+					fill: "currentColor",
+					"data-slot": "easing-curve-travel"
+				}, null, 8, W)], 64))
+			], 10, he)),
+			o[4] ||= _("span", {
+				"aria-hidden": "true",
+				class: "pointer-events-none absolute bottom-1 left-1 text-micro text-muted-foreground/60"
+			}, "0", -1),
+			o[5] ||= _("span", {
+				"aria-hidden": "true",
+				class: "pointer-events-none absolute right-1 top-1 text-micro text-muted-foreground/60"
+			}, "1", -1)
+		], 10, me));
+	}
+}), G = Object.keys(P), K = [{
+	x: 0,
+	y: 1
+}, {
+	x: 1,
+	y: 0
+}];
+function Se(e, t) {
+	if (!t.ok) throw Error(`${e}: ${t.error.code}`);
+	return t.value;
+}
+function q(e) {
+	return String(+e.toFixed(4));
+}
+function Ce(e, t) {
+	let n = (n) => {
+		let r = 1 - n;
+		return 3 * r * r * n * e + 3 * r * n * n * t + n * n * n;
+	}, r = 9 * e - 9 * t + 3, i = 6 * t - 12 * e, a = 3 * e, o = [];
+	if (Math.abs(r) < 1e-12) Math.abs(i) > 1e-12 && o.push(-a / i);
+	else {
+		let e = i * i - 4 * r * a;
+		if (e >= 0) {
+			let t = Math.sqrt(e);
+			o.push((-i + t) / (2 * r), (-i - t) / (2 * r));
+		}
+	}
+	let s = [0, 1];
+	for (let e of o) e > 0 && e < 1 && s.push(n(e));
+	return {
+		min: Math.min(...s),
+		max: Math.max(...s)
+	};
+}
+function J(e, t) {
+	let n = t.x - e.x, r = t.y - e.y, i = 1, a = (e, t, n) => {
+		Math.abs(e) < 1e-12 || (i = Math.min(i, (n - t) / e));
+	};
+	return t.x < -.1 && a(n, e.x, z), t.x > 1.1 && a(n, e.x, B), t.y < -.1 && a(r, e.y, z), t.y > 1.1 && a(r, e.y, B), i === 1 ? t : {
+		x: e.x + n * i,
+		y: e.y + r * i
+	};
+}
+function we(e = {}) {
+	let t = e.initial ?? {}, r = T(t.mode === "steps" ? "steps" : "bezier"), i = Array.isArray(t.points) && t.points.length === 4 && t.points.every((e) => Number.isFinite(e)) ? [...t.points] : void 0, a = T(i ? le : I), o = T(i ?? [...P["ease-out-back"]]);
+	function s(e) {
+		a.value = e;
+		let t = P[e];
+		t && (o.value = [...t]);
 	}
-	function a(e, t, i) {
-		let a = Math.max(0, Math.min(1, t)), o = Math.max(-L, Math.min(1 + L, i)), s = [...r.value];
-		s[e * 2] = +a.toFixed(3), s[e * 2 + 1] = +o.toFixed(3), r.value = s, n.value = P;
+	function c(e, t, n) {
+		let r = Math.max(0, Math.min(1, t)), i = Math.max(-H, Math.min(1 + H, n)), s = [...o.value];
+		s[e * 2] = +r.toFixed(3), s[e * 2 + 1] = +i.toFixed(3), o.value = s, a.value = le;
 	}
-	let o = S(e.initialSteps ?? 4), s = S(e.initialTerm ?? "end"), c = u(() => {
-		if (t.value === "steps") return N(o.value, s.value) ?? ((e) => e);
-		let [e, n, i, a] = r.value;
-		return A(e, n, i, a);
-	}), l = u(() => {
-		if (t.value === "steps") return `steps(${o.value}, ${s.value})`;
-		let [e, n, i, a] = r.value.map((e) => +e.toFixed(3));
-		return `cubic-bezier(${e}, ${n}, ${i}, ${a})`;
-	}), d = u(() => {
-		if (t.value !== "steps") return !0;
-		let e = M(l.value);
-		return e != null && e.count === o.value && e.jumpTerm === s.value;
-	}), f = u(() => ({
-		mode: t.value,
-		css: l.value,
-		fn: c.value,
-		points: [...r.value],
-		steps: o.value,
-		term: s.value
-	})), p = u(() => {
-		let [e, t, n, i] = r.value;
+	i && (c(0, i[0], i[1]), c(1, i[2], i[3]));
+	let l = t.steps, u = T(typeof l == "number" && Number.isFinite(l) ? Math.max(1, Math.min(12, Math.round(l))) : 4), d = T(t.term && ce.includes(t.term) ? t.term : L), f = p(() => {
+		let [e, t, n, r] = o.value;
+		return Se("EasingPicker:CubicBezier", N(e, t, n, r));
+	}), m = p(() => Se("EasingPicker:steppedEase", F(u.value, d.value))), h = p(() => r.value === "steps" ? m.value : f.value), g = p(() => {
+		if (r.value === "steps") return `steps(${u.value}, ${d.value})`;
+		let [e, t, n, i] = o.value.map((e) => +e.toFixed(3));
+		return `cubic-bezier(${e}, ${t}, ${n}, ${i})`;
+	}), _ = p(() => {
+		let e = M(g.value);
+		if (!e.ok) return !1;
+		let t = e.value;
+		return r.value === "steps" ? t.kind === "steps" && t.count === u.value && t.position === d.value : t.kind === "cubic-bezier" && t.x1 === o.value[0] && t.y1 === o.value[1] && t.x2 === o.value[2] && t.y2 === o.value[3];
+	}), v = p(() => ({
+		mode: r.value,
+		css: g.value,
+		fn: h.value,
+		points: [...o.value],
+		steps: u.value,
+		term: d.value
+	})), y = p(() => {
+		let [e, t, n, r] = o.value;
 		return [{
 			x: e,
-			y: F(t)
+			y: R(t)
 		}, {
 			x: n,
-			y: F(i)
+			y: R(r)
 		}];
-	}), m = u(() => {
-		let [e, t] = p.value;
-		return `M 0 1 C ${e.x} ${e.y}, ${t.x} ${t.y}, 1 0`;
-	}), h = u(() => {
-		let e = c.value, t = "";
-		for (let n = 0; n <= 240; n++) {
-			let r = n / 240, i = F(e(r));
-			t += n === 0 ? `M ${r} ${i}` : ` L ${r} ${i}`;
+	}), b = p(() => y.value.map((e, t) => J(K[t], e))), x = p(() => {
+		let [e, t] = y.value;
+		return `M 0 1 C ${q(e.x)} ${q(e.y)}, ${q(t.x)} ${q(t.y)}, 1 0`;
+	}), S = p(() => {
+		let e = u.value, t = m.value, n = "", r = NaN;
+		for (let i = 0; i < e; i++) {
+			let a = R(t((i + .5) / e));
+			n += i === 0 ? `M ${q(i / e)} ${q(a)}` : ` V ${q(a)}`, n += ` H ${q((i + 1) / e)}`, r = a;
 		}
-		return t;
-	}), g = u(() => {
-		let e = [
-			0,
-			1,
-			p.value[0].y,
-			p.value[1].y
-		];
-		for (let t = 0; t <= 16; t++) e.push(F(c.value(t / 16)));
-		let t = Math.max(Math.min(...e), -L) - I;
+		let i = R(t(1));
+		return Math.abs(i - r) > 1e-9 && (n += ` V ${q(i)}`), n;
+	}), ee = p(() => {
+		if (r.value === "steps") return {
+			min: 0,
+			max: 1,
+			clipped: !1
+		};
+		let [, e, , t] = o.value, { min: n, max: i } = Ce(e, t);
 		return {
-			minY: t,
-			height: Math.min(Math.max(...e), 1 + L) + I - t
+			min: n,
+			max: i,
+			clipped: n < -.1 || i > 1.1
 		};
-	}), _ = S(0), v = S(!1), y = u(() => v.value ? "playing" : _.value >= 1 ? "complete" : "idle"), b = 0, x = 0, C = S(!1), w = typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia("(prefers-reduced-motion: reduce)");
-	function T() {
-		x++, b && cancelAnimationFrame(b), b = 0, v.value = !1;
+	}), w = T(0), E = T(!1), D = p(() => E.value ? "playing" : w.value >= 1 ? "complete" : "idle"), O = 0, k = 0, te = n();
+	function A() {
+		k++, O && cancelAnimationFrame(O), O = 0, E.value = !1;
 	}
-	function E() {
-		T(), _.value = 0;
+	function j() {
+		A(), w.value = 0;
 	}
-	let D = (e) => {
-		C.value = e.matches, e.matches && (T(), _.value = 1);
-	};
-	w && (D(w), w.addEventListener("change", D));
-	function O() {
-		if (T(), _.value = 0, C.value) {
-			_.value = 1;
+	let re = ne(te, (e) => {
+		e && E.value && (A(), w.value = 1);
+	}, { flush: "sync" });
+	function ie() {
+		if (A(), w.value = 0, te.value) {
+			w.value = 1;
 			return;
 		}
-		v.value = !0;
-		let e = x, t = performance.now(), n = (r) => {
-			if (e !== x) return;
-			let i = Math.min(1, (r - t) / R);
-			_.value = i, i < 1 ? b = requestAnimationFrame(n) : (b = 0, v.value = !1);
+		E.value = !0;
+		let e = k, t = performance.now(), n = (r) => {
+			if (e !== k) return;
+			let i = Math.min(1, (r - t) / de);
+			w.value = i, i < 1 ? O = requestAnimationFrame(n) : (O = 0, E.value = !1);
 		};
-		b = requestAnimationFrame(n);
+		O = requestAnimationFrame(n);
 	}
-	return ee(() => {
-		T(), w?.removeEventListener("change", D);
+	return C(() => {
+		re(), A();
 	}), {
-		mode: t,
-		preset: n,
-		points: r,
-		presetNames: z,
-		selectPreset: i,
-		setHandle: a,
-		steps: o,
-		term: s,
-		terms: le,
-		easingFn: c,
-		readout: l,
-		reparseOk: d,
-		value: f,
-		handlesSvg: p,
-		bezierPathD: m,
-		stepPathD: h,
-		viewBox: g,
-		progress: _,
-		playing: v,
-		playbackState: y,
-		reducedMotion: C,
-		playTravel: O,
-		cancelTravel: E,
-		stopTravel: T
+		mode: r,
+		preset: a,
+		points: o,
+		presetNames: G,
+		selectPreset: s,
+		setHandle: c,
+		steps: u,
+		term: d,
+		terms: ce,
+		bezierFn: f,
+		stepFn: m,
+		easingFn: h,
+		readout: g,
+		reparseOk: _,
+		value: v,
+		handlesSvg: y,
+		handlePins: b,
+		leaderAnchors: K,
+		bezierPathD: x,
+		stepPathD: S,
+		excursion: ee,
+		progress: w,
+		playing: E,
+		playbackState: D,
+		reducedMotion: te,
+		playTravel: ie,
+		cancelTravel: j,
+		stopTravel: A
 	};
 }
 //#endregion
 //#region src/components/easing/EasingPicker.vue?vue&type=script&setup=true&lang.ts
-var he = [
+var Te = [
 	"data-mode",
+	"data-preset",
+	"data-surface",
 	"data-copy-state",
 	"data-playback-state",
-	"data-reduced-motion"
-], ge = { class: "glass-card relative overflow-hidden rounded-card p-3" }, _e = ["id"], ve = ["viewBox", "aria-label"], ye = ["x1", "x2"], be = ["y1", "y2"], xe = ["x2", "y2"], Se = ["x2", "y2"], Ce = ["d"], we = ["d"], Te = [
+	"data-curve-clipped",
+	"data-reduced-motion",
+	"data-drawing"
+], Ee = { class: "relative" }, De = ["id"], Oe = ["viewBox"], ke = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], Ae = [
 	"cx",
 	"cy",
+	"data-pressed",
+	"data-pinned",
 	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-describedby",
 	"onKeydown"
-], Ee = ["cx", "cy"], De = { class: "flex flex-col gap-4" }, Oe = {
+], je = {
+	"data-slot": "easing-controls",
+	class: "flex flex-wrap items-center gap-2 [&>*]:min-h-10"
+}, Me = {
 	key: 0,
-	class: "flex flex-col gap-2"
-}, ke = { class: "flex flex-col gap-2" }, Ae = { class: "text-mono-caption text-muted-foreground" }, je = { class: "flex flex-col gap-2" }, Me = ["data-reparse-ok"], Ne = { class: "flex items-center gap-2" }, Pe = ["disabled", "aria-label"], Fe = {
-	key: 0,
-	class: "flex flex-wrap items-center justify-between gap-2 text-mono-caption"
-}, Ie = {
-	key: 3,
-	class: "flex flex-wrap items-center gap-2"
-}, Le = {
-	class: "text-mono-caption text-muted-foreground",
+	class: "flex min-w-40 flex-1 items-center"
+}, Ne = {
+	key: 1,
+	class: "flex min-w-40 flex-1 items-center gap-2"
+}, Pe = {
+	"data-slot": "easing-transport-status",
+	role: "status",
+	"aria-live": "polite",
+	class: "text-mono-caption text-muted-foreground"
+}, Fe = {
+	"data-slot": "easing-copy-status",
 	role: "status",
-	"aria-live": "polite"
-}, V = /* @__PURE__ */ _({
+	"aria-live": "polite",
+	class: "sr-only"
+}, Ie = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-2 text-mono-caption text-destructive"
+}, Y = /* @__PURE__ */ b({
 	__name: "EasingPicker",
-	props: /* @__PURE__ */ v({
-		mode: { default: "bezier" },
-		preset: { default: void 0 },
-		steps: { default: void 0 },
-		term: { default: void 0 },
-		readout: {
-			type: Boolean,
-			default: !0
-		},
+	props: /*@__PURE__*/ x({
+		initial: { default: void 0 },
 		playback: {
 			type: Boolean,
 			default: !0
 		},
-		label: { default: "Easing curve" }
+		label: { default: "Easing curve" },
+		surface: { default: "card" },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(s) {
-		let c = s, _ = O(s, "modelValue"), { mode: v, preset: ee, points: A, presetNames: j, selectPreset: le, setHandle: M, steps: N, term: P, terms: ue, easingFn: I, readout: L, reparseOk: R, value: z, handlesSvg: V, bezierPathD: H, stepPathD: Re, viewBox: U, progress: W, playing: G, playbackState: K, reducedMotion: ze, playTravel: Be, cancelTravel: Ve, stopTravel: He } = B({
-			initialMode: c.mode,
-			initialPreset: c.preset,
-			initialSteps: c.steps,
-			initialTerm: c.term
-		});
-		ne(() => c.mode, (e) => {
-			v.value = e;
-		}), ne(z, (e) => _.value = e, { immediate: !0 });
-		let Ue = te("svgEl"), q = D(), J = S(null);
-		function We(e) {
-			let t = Ue.value;
-			if (!t) return {
-				x: 0,
-				y: 0
-			};
-			let n = t.getScreenCTM();
-			if (!n) return {
-				x: 0,
-				y: 0
-			};
-			let r = n.inverse();
+	setup(n) {
+		let b = n, x = te(n, "modelValue"), { mode: C, preset: M, points: N, presetNames: P, selectPreset: ce, setHandle: F, steps: I, term: L, terms: z, easingFn: B, readout: V, reparseOk: de, value: me, handlesSvg: he, handlePins: U, leaderAnchors: ge, bezierPathD: _e, stepPathD: ve, excursion: ye, progress: be, playing: W, playbackState: G, reducedMotion: K, playTravel: Se, cancelTravel: q, stopTravel: Ce } = we({ initial: b.initial });
+		function J(e, t) {
+			return !!e && Array.isArray(e.points) && e.points.length === 4 && e.mode === t.mode && e.css === t.css && e.fn === t.fn && e.steps === t.steps && e.term === t.term && e.points.every((e, n) => e === t.points[n]);
+		}
+		let Y;
+		function Le(e) {
+			J(x.value, e) || J(Y, e) || (Y = e, x.value = e);
+		}
+		function Re(e) {
+			if (!e) return;
+			if (J(Y, e)) {
+				Y = void 0;
+				return;
+			}
+			C.value = e.mode === "steps" ? "steps" : "bezier", Array.isArray(e.points) && e.points.length === 4 && e.points.every(Number.isFinite) && e.points.some((e, t) => e !== N.value[t]) && (F(0, e.points[0], e.points[1]), F(1, e.points[2], e.points[3])), Number.isFinite(e.steps) && (I.value = Math.max(1, Math.min(12, Math.round(e.steps)))), z.includes(e.term) && (L.value = e.term);
+			let t = me.value;
+			J(e, t) || Le(t);
+		}
+		ne(x, Re, {
+			deep: !0,
+			immediate: !0
+		}), ne(me, Le, { immediate: !0 });
+		let ze = p(() => C.value === "steps" ? [{
+			d: _e.value,
+			tone: "ghost"
+		}, {
+			d: ve.value,
+			tone: "ink"
+		}] : [{
+			d: ve.value,
+			tone: "ghost"
+		}, {
+			d: _e.value,
+			tone: "ink"
+		}]), Be = p(() => b.playback && G.value !== "idle" ? B.value(be.value) : null), Ve = A("overlayEl"), He = k(), X = T(null);
+		function Ue(e) {
+			let t = Ve.value?.getScreenCTM();
+			if (!t) return null;
+			let n = t.inverse();
 			return {
-				x: r.a * e.clientX + r.c * e.clientY + r.e,
-				y: F(r.b * e.clientX + r.d * e.clientY + r.f)
+				x: n.a * e.clientX + n.c * e.clientY + n.e,
+				y: R(n.b * e.clientX + n.d * e.clientY + n.f)
 			};
 		}
+		function We(e) {
+			let t = Ve.value?.getScreenCTM();
+			if (!t) return null;
+			let n = e.pointerType === "touch" ? 28 : 22, r = null, i = Infinity;
+			return U.value.forEach((a, o) => {
+				let s = t.a * a.x + t.c * a.y + t.e, c = t.b * a.x + t.d * a.y + t.f, l = Math.hypot(s - e.clientX, c - e.clientY);
+				l < n && l < i && (i = l, r = o);
+			}), r;
+		}
 		function Ge(e) {
-			if (v.value !== "bezier") return;
-			let { x: t, y: n } = We(e), r = e.pointerType === "touch" ? fe : de, i = [{
-				x: A.value[0],
-				y: A.value[1]
-			}, {
-				x: A.value[2],
-				y: A.value[3]
-			}], a = null, o = Infinity;
-			for (let e = 0; e < 2; e++) {
-				let s = Math.hypot(i[e].x - t, i[e].y - n);
-				s < r && s < o && (o = s, a = e);
-			}
-			a !== null && (e.preventDefault(), J.value = a, e.currentTarget.setPointerCapture(e.pointerId));
+			if (C.value !== "bezier") return;
+			let t = We(e);
+			t !== null && (e.preventDefault(), X.value = t, e.currentTarget.setPointerCapture(e.pointerId));
 		}
 		function Ke(e) {
-			if (J.value === null) return;
-			let { x: t, y: n } = We(e);
-			M(J.value, t, n);
+			if (X.value === null) return;
+			let t = Ue(e);
+			t && F(X.value, t.x, t.y);
 		}
 		function qe() {
-			J.value = null;
+			X.value = null;
+		}
+		let Z = T(!0), Q = 0;
+		function Je() {
+			if (Q && cancelAnimationFrame(Q), Q = 0, K.value) {
+				Z.value = !0;
+				return;
+			}
+			Z.value = !1, Q = requestAnimationFrame(() => {
+				Q = requestAnimationFrame(() => {
+					Q = 0, Z.value = !0;
+				});
+			});
 		}
-		function Je(e, t) {
-			let n = e * 2, r = A.value[n], i = A.value[n + 1], a = t.shiftKey ? .1 : .01, o = r, s = i;
+		ne([
+			C,
+			M,
+			I,
+			L
+		], () => {
+			X.value === null && Je();
+		});
+		function Ye(e, t) {
+			let n = e * 2, r = N.value[n], i = N.value[n + 1], a = t.shiftKey ? .1 : .01, o = r, s = i;
 			switch (t.key) {
 				case "ArrowLeft":
 					o -= a;
@@ -237,6 +527,12 @@ var he = [
 				case "ArrowUp":
 					s += a;
 					break;
+				case "PageDown":
+					s -= .25;
+					break;
+				case "PageUp":
+					s += .25;
+					break;
 				case "Home":
 					o = 0;
 					break;
@@ -245,378 +541,269 @@ var he = [
 					break;
 				default: return;
 			}
-			t.preventDefault(), M(e, o, s);
-		}
-		let Y = S("idle"), Ye = te("readoutEl"), X = 0, Z, Q;
-		function Xe() {
-			Z !== void 0 && clearTimeout(Z), Q !== void 0 && clearTimeout(Q), Z = void 0, Q = void 0;
+			t.preventDefault(), F(e, o, s);
 		}
-		async function Ze() {
-			Xe();
-			let e = ++X, t;
-			Y.value = "pending";
-			try {
-				let n = navigator.clipboard;
-				if (!n?.writeText) throw Error("Clipboard unavailable");
-				if (await Promise.race([n.writeText(L.value), new Promise((e, n) => {
-					t = setTimeout(() => n(/* @__PURE__ */ Error("Clipboard timed out")), me), Q = t;
-				})]), e !== X) return;
-				Y.value = "copied", Z = setTimeout(() => {
-					e === X && (Y.value = "idle");
-				}, pe);
-			} catch {
-				e === X && (Y.value = "failed");
-			} finally {
-				t !== void 0 && clearTimeout(t), Q === t && (Q = void 0);
+		let Xe = [{
+			label: "Bezier",
+			value: "bezier"
+		}, {
+			label: "Steps",
+			value: "steps"
+		}], Ze = p({
+			get: () => C.value,
+			set: (e) => {
+				C.value = e === "steps" ? "steps" : "bezier";
+			}
+		}), Qe = p({
+			get: () => [I.value],
+			set: (e) => {
+				I.value = e[0] ?? I.value;
 			}
+		}), $e = A("readoutEl"), { status: et, copy: tt } = i({
+			resetMs: fe,
+			timeoutMs: pe
+		}), $ = p(() => {
+			switch (et.value) {
+				case "success": return "copied";
+				case "failure": return "failed";
+				default: return et.value;
+			}
+		});
+		function nt() {
+			et.value !== "pending" && tt(V.value);
 		}
-		function Qe() {
-			let e = Ye.value, t = window.getSelection();
+		function rt() {
+			let e = $e.value, t = window.getSelection();
 			if (!e || !t) return;
 			let n = document.createRange();
-			n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n), e.focus();
+			n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
 		}
-		let $e = u(() => ({
+		let it = p(() => ({
 			idle: "",
 			pending: "Copying curve literal…",
 			copied: "Copied curve literal.",
 			failed: "Clipboard unavailable. Select the full literal to copy manually."
-		})[Y.value]), et = u(() => {
-			let e = v.value === "steps" ? "staircase" : "curve";
-			return G.value ? `Restart ${e}` : K.value === "complete" ? `Replay ${e}` : v.value === "steps" ? "Climb the staircase" : "Trace the curve";
-		});
-		b(() => {
-			X++, Xe(), He();
-		});
-		let tt = u(() => v.value === "bezier" ? `0 ${U.value.minY} 1 ${U.value.height}` : "-0.05 -0.1 1.1 1.2"), $ = u({
-			get: () => [N.value],
-			set: (e) => {
-				N.value = e[0] ?? N.value;
+		})[$.value]), at = p(() => {
+			switch ($.value) {
+				case "failed": return "Retry copy curve literal";
+				case "copied": return "Copied";
+				case "pending": return "Copying curve literal";
+				default: return "Copy curve literal";
 			}
-		});
-		return (c, u) => (x(), p("div", {
-			class: "grid gap-4 lg:grid-cols-[1fr_18rem]",
-			"data-mode": E(v),
-			"data-copy-state": Y.value,
-			"data-playback-state": E(K),
-			"data-reduced-motion": E(ze) ? "" : void 0,
-			"data-testid": "easing-picker",
-			style: { "--easing-curve-accent": "var(--motion-accent, var(--viz-legendre))" }
-		}, [m("div", ge, [m("span", {
-			id: E(q),
-			class: "sr-only"
-		}, " Left and Right change x from 0 to 1. Up and Down change y from -0.6 to 1.6. Hold Shift for larger steps. ", 8, _e), (x(), p("svg", {
-			ref_key: "svgEl",
-			ref: Ue,
-			class: "block w-full touch-none select-none",
-			viewBox: tt.value,
-			preserveAspectRatio: "xMidYMid meet",
-			style: {
-				"aspect-ratio": "1",
-				"block-size": "clamp(200px, 38cqi, 320px)",
-				"margin-inline": "auto"
-			},
-			"aria-label": s.label,
-			role: "group",
-			onPointerdown: Ge,
-			onPointermove: Ke,
-			onPointerup: qe,
-			onPointercancel: qe
+		}), ot = p(() => W.value ? "Cancel" : G.value === "complete" ? "Replay" : "Preview");
+		function st() {
+			W.value ? q() : Se();
+		}
+		return ee(() => {
+			Ce(), Q && cancelAnimationFrame(Q);
+		}), (i, p) => (w(), g("div", {
+			"data-slot": "easing-picker",
+			class: S(O(e)("flex flex-col gap-3", b.surface === "card" && "glass-resting rounded-card p-3", b.class)),
+			"data-mode": O(C),
+			"data-preset": O(M),
+			"data-surface": b.surface,
+			"data-copy-state": $.value,
+			"data-playback-state": O(G),
+			"data-curve-clipped": O(ye).clipped ? "" : void 0,
+			"data-reduced-motion": O(K) ? "" : void 0,
+			"data-drawing": Z.value ? void 0 : ""
 		}, [
-			u[3] ||= m("rect", {
-				x: "0",
-				y: "0",
-				width: "1",
-				height: "1",
-				fill: "none",
-				class: "stroke-border",
-				"stroke-width": "0.012"
-			}, null, -1),
-			u[4] ||= m("line", {
-				x1: "0",
-				y1: "1",
-				x2: "1",
-				y2: "0",
-				class: "stroke-muted-foreground/30",
-				"stroke-width": "0.006",
-				"stroke-dasharray": "0.02 0.015"
-			}, null, -1),
-			(x(), p(l, null, C([
-				.25,
-				.5,
-				.75
-			], (e) => m("line", {
-				key: "gx" + e,
-				x1: e,
-				y1: "0",
-				x2: e,
-				y2: "1",
-				class: "stroke-border/40",
-				"stroke-width": "0.006"
-			}, null, 8, ye)), 64)),
-			(x(), p(l, null, C([
-				.25,
-				.5,
-				.75
-			], (e) => m("line", {
-				key: "gy" + e,
-				x1: "0",
-				y1: e,
-				x2: "1",
-				y2: e,
-				class: "stroke-border/40",
-				"stroke-width": "0.006"
-			}, null, 8, be)), 64)),
-			u[5] ||= m("text", {
-				x: "0.05",
-				y: "0.95",
-				class: "fill-muted-foreground/60",
-				style: {
-					"font-size": "0.05px",
-					"font-family": "var(--font-mono)"
-				},
-				"text-anchor": "start"
-			}, "0", -1),
-			u[6] ||= m("text", {
-				x: "0.95",
-				y: "0.12",
-				class: "fill-muted-foreground/60",
-				style: {
-					"font-size": "0.05px",
-					"font-family": "var(--font-mono)"
-				},
-				"text-anchor": "end"
-			}, "1", -1),
-			E(v) === "bezier" ? (x(), p(l, { key: 0 }, [
-				m("line", {
-					x1: 0,
-					y1: 1,
-					x2: E(V)[0].x,
-					y2: E(V)[0].y,
-					class: "stroke-muted-foreground/50",
-					"stroke-width": "0.02",
-					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, xe),
-				m("line", {
-					x1: 1,
-					y1: 0,
-					x2: E(V)[1].x,
-					y2: E(V)[1].y,
+			_("div", Ee, [
+				y(xe, {
+					strokes: ze.value,
+					progress: O(be),
+					travel: Be.value,
+					clipped: O(ye).clipped,
+					drawn: Z.value,
+					label: n.label
+				}, null, 8, [
+					"strokes",
+					"progress",
+					"travel",
+					"clipped",
+					"drawn",
+					"label"
+				]),
+				_("span", {
+					id: O(He),
+					class: "sr-only"
+				}, " Left and Right change x from 0 to 1. Up and Down change y from -0.6 to 1.6. Hold Shift for larger steps; Page Up and Page Down step further. ", 8, De),
+				O(C) === "bezier" ? (w(), g("svg", {
+					key: 0,
+					ref_key: "overlayEl",
+					ref: Ve,
+					"data-slot": "easing-handles",
+					class: "absolute inset-0 block size-full touch-none select-none",
+					viewBox: O(ue),
+					preserveAspectRatio: "xMidYMid meet",
+					onPointerdown: Ge,
+					onPointermove: Ke,
+					onPointerup: qe,
+					onPointercancel: qe
+				}, [(w(!0), g(f, null, E(O(U), (e, t) => (w(), g("line", {
+					key: "leader" + t,
+					x1: O(ge)[t].x,
+					y1: O(ge)[t].y,
+					x2: e.x,
+					y2: e.y,
 					class: "stroke-muted-foreground/50",
-					"stroke-width": "0.02",
-					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, Se),
-				m("path", {
-					d: E(H),
-					fill: "none",
-					class: "stroke-(--easing-curve-accent)",
-					"stroke-width": "0.035",
-					"stroke-linecap": "round"
-				}, null, 8, Ce)
-			], 64)) : (x(), p("path", {
-				key: 1,
-				d: E(Re),
-				fill: "none",
-				class: "stroke-(--easing-curve-accent)",
-				"stroke-width": "0.025",
-				"stroke-linejoin": "miter",
-				"stroke-linecap": "butt"
-			}, null, 8, we)),
-			u[7] ||= m("circle", {
-				cx: "0",
-				cy: "1",
-				r: "0.018",
-				class: "fill-muted-foreground/50"
-			}, null, -1),
-			u[8] ||= m("circle", {
-				cx: "1",
-				cy: "0",
-				r: "0.018",
-				class: "fill-muted-foreground/50"
-			}, null, -1),
-			E(v) === "bezier" ? (x(), p(l, { key: 2 }, C([0, 1], (e) => m("circle", {
-				key: e,
-				cx: E(V)[e].x,
-				cy: E(V)[e].y,
-				r: "0.04",
-				class: "fill-foreground stroke-background focus:outline-none focus-visible:stroke-(--easing-curve-accent) focus-visible:[stroke-width:0.045]",
-				"stroke-width": "0.02",
-				style: { cursor: "move" },
-				role: "slider",
-				tabindex: "0",
-				"aria-label": `Bezier control point ${e + 1}`,
-				"aria-valuemin": 0,
-				"aria-valuemax": 1,
-				"aria-valuenow": E(A)[e * 2],
-				"aria-valuetext": `x ${E(A)[e * 2].toFixed(3)}, y ${E(A)[e * 2 + 1].toFixed(3)}`,
-				"aria-describedby": E(q),
-				onKeydown: (t) => Je(e, t)
-			}, null, 40, Te)), 64)) : f("", !0),
-			s.playback ? (x(), p("circle", {
-				key: 3,
-				cx: E(W),
-				cy: 1 - E(I)(E(W)),
-				r: "0.03",
-				class: "fill-(--easing-curve-accent)"
-			}, null, 8, Ee)) : f("", !0)
-		], 40, ve))]), m("div", De, [
-			E(v) === "bezier" ? (x(), p("div", Oe, [u[9] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Preset", -1), g(E(n), {
-				"model-value": E(ee),
-				"onUpdate:modelValue": u[0] ||= (e) => E(le)(String(e))
-			}, {
-				default: k(() => [g(E(r), { "aria-label": "Easing preset" }, {
-					default: k(() => [g(E(a), { placeholder: "Pick a curve" })]),
-					_: 1
-				}), g(E(t), null, {
-					default: k(() => [(x(!0), p(l, null, C(E(j), (e) => (x(), d(E(i), {
-						key: e,
-						value: e
+					"stroke-width": "1",
+					"stroke-dasharray": "4 3",
+					"vector-effect": "non-scaling-stroke"
+				}, null, 8, ke))), 128)), (w(!0), g(f, null, E(O(U), (e, t) => (w(), g("circle", {
+					key: "handle" + t,
+					cx: e.x,
+					cy: e.y,
+					r: "0.04",
+					class: S([
+						"focus-ring tap-squish fill-foreground stroke-background",
+						"[transform-box:fill-box] motion-reduce:transition-none",
+						X.value === t ? "cursor-grabbing scale-(--scale-press)" : "cursor-grab"
+					]),
+					"stroke-width": "2",
+					"vector-effect": "non-scaling-stroke",
+					"data-press-armed": "",
+					"data-pressed": X.value === t ? "" : void 0,
+					role: "slider",
+					tabindex: "0",
+					"data-pinned": O(he)[t].y !== e.y || O(he)[t].x !== e.x ? "" : void 0,
+					"aria-label": `Bezier control point ${t + 1}`,
+					"aria-valuemin": -O(H),
+					"aria-valuemax": 1 + O(H),
+					"aria-valuenow": O(N)[t * 2 + 1],
+					"aria-valuetext": `x ${O(N)[t * 2].toFixed(3)}, y ${O(N)[t * 2 + 1].toFixed(3)}`,
+					"aria-describedby": O(He),
+					onKeydown: (e) => Ye(t, e)
+				}, null, 42, Ae))), 128))], 40, Oe)) : h("", !0)
+			]),
+			_("div", je, [
+				y(O(d), {
+					modelValue: Ze.value,
+					"onUpdate:modelValue": p[0] ||= (e) => Ze.value = e,
+					options: Xe,
+					"aria-label": "Curve mode",
+					class: "shrink-0"
+				}, null, 8, ["modelValue"]),
+				O(C) === "bezier" ? (w(), g("div", Me, [y(O(s), {
+					"model-value": O(M),
+					"onUpdate:modelValue": p[1] ||= (e) => O(ce)(String(e))
+				}, {
+					default: j(() => [y(O(l), {
+						"aria-label": "Easing preset",
+						class: "w-full"
 					}, {
-						default: k(() => [h(T(e), 1)]),
-						_: 2
-					}, 1032, ["value"]))), 128))]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["model-value"])])) : (x(), p(l, { key: 1 }, [m("div", ke, [m("span", Ae, "Steps (n) — " + T(E(N)), 1), g(E(o), {
-				modelValue: $.value,
-				"onUpdate:modelValue": u[1] ||= (e) => $.value = e,
-				min: E(1),
-				max: E(12),
-				step: 1,
-				"aria-label": "Step count",
-				"data-testid": "easing-steps-n"
-			}, null, 8, [
-				"modelValue",
-				"min",
-				"max"
-			])]), m("div", je, [u[10] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Jump term", -1), g(E(n), {
-				"model-value": E(P),
-				"onUpdate:modelValue": u[2] ||= (e) => P.value = String(e)
-			}, {
-				default: k(() => [g(E(r), { "aria-label": "Jump term" }, {
-					default: k(() => [g(E(a), { placeholder: "Pick a jump term" })]),
+						default: j(() => [y(O(o), { placeholder: "Pick a curve" })]),
+						_: 1
+					}), y(O(a), null, {
+						default: j(() => [O(M) === O("custom") ? (w(), m(O(c), {
+							key: 0,
+							value: O(le)
+						}, {
+							default: j(() => [...p[4] ||= [v(" Custom ", -1)]]),
+							_: 1
+						}, 8, ["value"])) : h("", !0), (w(!0), g(f, null, E(O(P), (e) => (w(), m(O(c), {
+							key: e,
+							value: e
+						}, {
+							default: j(() => [v(D(e), 1)]),
+							_: 2
+						}, 1032, ["value"]))), 128))]),
+						_: 1
+					})]),
 					_: 1
-				}), g(E(t), null, {
-					default: k(() => [(x(!0), p(l, null, C(E(ue), (e) => (x(), d(E(i), {
-						key: e,
-						value: e
+				}, 8, ["model-value"])])) : (w(), g("div", Ne, [y(O(u), {
+					modelValue: Qe.value,
+					"onUpdate:modelValue": p[2] ||= (e) => Qe.value = e,
+					min: O(1),
+					max: O(12),
+					step: 1,
+					"aria-label": "Step count",
+					class: "min-w-16 flex-1"
+				}, null, 8, [
+					"modelValue",
+					"min",
+					"max"
+				]), y(O(s), {
+					"model-value": O(L),
+					"onUpdate:modelValue": p[3] ||= (e) => L.value = String(e)
+				}, {
+					default: j(() => [y(O(l), {
+						"aria-label": "Jump term",
+						class: "w-36 shrink-0"
 					}, {
-						default: k(() => [h(T(e), 1)]),
-						_: 2
-					}, 1032, ["value"]))), 128))]),
+						default: j(() => [y(O(o), { placeholder: "Jump term" })]),
+						_: 1
+					}), y(O(a), null, {
+						default: j(() => [(w(!0), g(f, null, E(O(z), (e) => (w(), m(O(c), {
+							key: e,
+							value: e
+						}, {
+							default: j(() => [v(D(e), 1)]),
+							_: 2
+						}, 1032, ["value"]))), 128))]),
+						_: 1
+					})]),
 					_: 1
-				})]),
-				_: 1
-			}, 8, ["model-value"])])], 64)),
-			s.readout ? (x(), p("div", {
-				key: 2,
-				class: "glass-card flex flex-col gap-2 rounded-card px-3 py-2",
-				"data-reparse-ok": E(R),
-				"data-testid": "easing-readout"
-			}, [m("div", Ne, [m("code", {
-				ref_key: "readoutEl",
-				ref: Ye,
-				tabindex: "0",
-				class: "min-w-0 flex-1 break-all text-xs text-foreground select-text"
-			}, T(E(L)), 513), m("button", {
-				type: "button",
-				class: "shrink-0 rounded-pill p-1.5 text-muted-foreground transition-colors hover:bg-(--surface-tint-8) hover:text-foreground disabled:cursor-wait disabled:opacity-disabled",
-				disabled: Y.value === "pending",
-				"aria-label": Y.value === "failed" ? "Retry copy curve literal" : Y.value === "copied" ? "Copied" : Y.value === "pending" ? "Copying curve literal" : "Copy curve literal",
-				"data-testid": "easing-copy",
-				onClick: Ze
-			}, [Y.value === "pending" ? (x(), d(E(ae), {
-				key: 0,
-				class: "size-4 animate-spin"
-			})) : Y.value === "copied" ? (x(), d(E(re), {
-				key: 1,
-				class: "size-4 text-(--easing-curve-accent)"
-			})) : (x(), d(E(ie), {
-				key: 2,
-				class: "size-4"
-			}))], 8, Pe)]), Y.value === "idle" ? f("", !0) : (x(), p("div", Fe, [m("span", {
-				role: "status",
-				"aria-live": "polite",
-				class: y(Y.value === "failed" ? "text-destructive" : "text-muted-foreground")
-			}, T($e.value), 3), Y.value === "failed" ? (x(), d(E(e), {
-				key: 0,
-				variant: "outline",
-				class: "shrink-0 px-3 py-1",
-				"data-testid": "easing-select-literal",
-				onClick: Qe
-			}, {
-				default: k(() => [...u[11] ||= [h(" Select literal ", -1)]]),
-				_: 1
-			})) : f("", !0)]))], 8, Me)) : f("", !0),
-			s.playback ? (x(), p("div", Ie, [
-				g(E(e), {
-					variant: "outline",
-					class: "w-fit",
-					"data-testid": "easing-playback",
-					onClick: E(Be)
+				}, 8, ["model-value"])])),
+				y(O(r), {
+					emphasis: "quiet",
+					class: "min-w-0 gap-2",
+					"aria-label": at.value,
+					"aria-disabled": $.value === "pending" || void 0,
+					"data-reparse-ok": O(de),
+					onClick: nt
 				}, {
-					default: k(() => [E(G) || E(K) === "complete" ? (x(), d(E(se), { key: 0 })) : (x(), d(E(oe), { key: 1 })), h(" " + T(et.value), 1)]),
+					default: j(() => [_("code", {
+						ref_key: "readoutEl",
+						ref: $e,
+						class: "min-w-0 truncate text-micro select-text"
+					}, D(O(V)), 513), $.value === "pending" ? (w(), m(t, {
+						key: 0,
+						class: "size-4 shrink-0"
+					})) : $.value === "copied" ? (w(), m(O(re), {
+						key: 1,
+						class: "size-4 shrink-0",
+						"aria-hidden": "true"
+					})) : (w(), m(O(ie), {
+						key: 2,
+						class: "size-4 shrink-0",
+						"aria-hidden": "true"
+					}))]),
 					_: 1
-				}, 8, ["onClick"]),
-				E(G) ? (x(), d(E(e), {
-					key: 0,
-					variant: "outline",
-					class: "w-fit",
-					"data-testid": "easing-cancel",
-					onClick: E(Ve)
+				}, 8, [
+					"aria-label",
+					"aria-disabled",
+					"data-reparse-ok"
+				]),
+				n.playback ? (w(), g(f, { key: 2 }, [y(O(r), {
+					class: "shrink-0",
+					onClick: st
 				}, {
-					default: k(() => [g(E(ce)), u[12] ||= h(" Cancel preview ", -1)]),
+					default: j(() => [O(W) ? (w(), m(O(se), {
+						key: 0,
+						"aria-hidden": "true"
+					})) : O(G) === "complete" ? (w(), m(O(oe), {
+						key: 1,
+						"aria-hidden": "true"
+					})) : (w(), m(O(ae), {
+						key: 2,
+						"aria-hidden": "true"
+					})), v(" " + D(ot.value), 1)]),
 					_: 1
-				}, 8, ["onClick"])) : f("", !0),
-				m("span", Le, T(E(K) === "playing" ? "Preview playing" : E(K) === "complete" ? "Preview complete" : "Preview idle"), 1)
-			])) : f("", !0),
-			w(c.$slots, "footer", { value: E(z) })
-		])], 8, he));
-	}
-}), H = /* @__PURE__ */ _({
-	__name: "EasingConfigurator",
-	props: /* @__PURE__ */ v({
-		label: { default: "Easing" },
-		name: { default: void 0 },
-		mode: { default: "bezier" },
-		preset: { default: void 0 },
-		steps: { default: void 0 },
-		term: { default: void 0 }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(e) {
-		let t = O(e, "modelValue");
-		return (n, r) => (x(), d(E(c), {
-			label: e.label,
-			sub: e.name
-		}, {
-			default: k(() => [g(E(s), {
-				label: "Curve",
-				name: t.value?.css
+				}), _("span", Pe, D(ot.value), 1)], 64)) : h("", !0)
+			]),
+			_("span", Fe, D(it.value), 1),
+			$.value === "failed" ? (w(), g("div", Ie, [v(D(it.value) + " ", 1), y(O(r), {
+				emphasis: "quiet",
+				size: "sm",
+				class: "shrink-0",
+				onClick: rt
 			}, {
-				default: k(() => [g(V, {
-					modelValue: t.value,
-					"onUpdate:modelValue": r[0] ||= (e) => t.value = e,
-					mode: e.mode,
-					preset: e.preset,
-					steps: e.steps,
-					term: e.term
-				}, null, 8, [
-					"modelValue",
-					"mode",
-					"preset",
-					"steps",
-					"term"
-				])]),
+				default: j(() => [...p[5] ||= [v(" Select literal ", -1)]]),
 				_: 1
-			}, 8, ["name"])]),
-			_: 1
-		}, 8, ["label", "sub"]));
+			})])) : h("", !0)
+		], 10, Te));
 	}
 });
 //#endregion
-export { H as EasingConfigurator, V as EasingPicker, B as useEasingPicker };
+export { xe as EasingCurve, Y as EasingPicker, we as useEasingPicker };