@mkbabb/glass-ui 7.0.0 → 8.0.0

package/dist/easing.js

@@ -1,52 +1,269 @@
-import { n as e } from "./useReducedMotion-vCXA_vyM.js";
-import { t } from "./button-Bu9F4uU6.js";
-import { t as n } from "./useClipboard-D36OTaeT.js";
-import { a as r, c as i, o as a, r as o, s } from "./select-BcBAyLXA.js";
-import { t as c } from "./slider-DzqeQmMu.js";
-import { n as l, r as u } from "./configurator-M5OaIlJd.js";
-import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeClass as x, onScopeDispose as S, onUnmounted as C, openBlock as w, ref as T, renderList as E, renderSlot as ee, toDisplayString as D, unref as O, useId as te, useModel as ne, useTemplateRef as k, watch as A, withCtx as j } 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 { 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 F, steppedEase as I } from "@mkbabb/value.js/easing";
+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 L = "custom", le = "ease-out-back", R = (e) => 1 - e, z = .1, B = .6, ue = .1, de = .15, V = 1200, fe = 1400, pe = 2e3, H = Object.keys(P);
-function U(e, 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 W(t = {}) {
-	let n = T(t.initialMode ?? "bezier"), r = T(t.initialPreset ?? "ease-out-back"), i = T([...P[r.value in P ? r.value : le]]);
-	function a(e) {
-		r.value = e;
+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 && (i.value = [...t]);
+		t && (o.value = [...t]);
 	}
-	function o(e, t, n) {
-		let a = Math.max(0, Math.min(1, t)), o = Math.max(-B, Math.min(1 + B, n)), s = [...i.value];
-		s[e * 2] = +a.toFixed(3), s[e * 2 + 1] = +o.toFixed(3), i.value = s, r.value = L;
+	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 s = T(t.initialSteps ?? 4), c = T(t.initialTerm ?? "jump-end"), l = f(() => {
-		if (n.value === "steps") return U("EasingPicker:steppedEase", I(s.value, c.value));
-		let [e, t, r, a] = i.value;
-		return U("EasingPicker:CubicBezier", N(e, t, r, a));
-	}), u = f(() => {
-		if (n.value === "steps") return `steps(${s.value}, ${c.value})`;
-		let [e, t, r, a] = i.value.map((e) => +e.toFixed(3));
-		return `cubic-bezier(${e}, ${t}, ${r}, ${a})`;
-	}), d = f(() => {
-		let e = M(u.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 n.value === "steps" ? t.kind === "steps" && t.count === s.value && t.position === c.value : t.kind === "cubic-bezier" && t.x1 === i.value[0] && t.y1 === i.value[1] && t.x2 === i.value[2] && t.y2 === i.value[3];
-	}), p = f(() => ({
-		mode: n.value,
-		css: u.value,
-		fn: l.value,
-		points: [...i.value],
-		steps: s.value,
-		term: c.value
-	})), m = f(() => {
-		let [e, t, n, r] = i.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: R(t)
@@ -54,204 +271,249 @@ function W(t = {}) {
 			x: n,
 			y: R(r)
 		}];
-	}), h = f(() => {
-		let [e, t] = m.value;
-		return `M 0 1 C ${e.x} ${e.y}, ${t.x} ${t.y}, 1 0`;
-	}), g = f(() => {
-		let e = l.value, t = "";
-		for (let n = 0; n <= 240; n++) {
-			let r = n / 240, i = R(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;
-	}), _ = f(() => {
-		let e = [
-			0,
-			1,
-			m.value[0].y,
-			m.value[1].y
-		];
-		for (let t = 0; t <= 16; t++) e.push(R(l.value(t / 16)));
-		let t = Math.max(Math.min(...e), -B) - z;
+		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 + B) + z - t
+			min: n,
+			max: i,
+			clipped: n < -.1 || i > 1.1
 		};
-	}), v = T(0), y = T(!1), b = f(() => y.value ? "playing" : v.value >= 1 ? "complete" : "idle"), x = 0, C = 0, w = e();
-	function E() {
-		C++, x && cancelAnimationFrame(x), x = 0, y.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 ee() {
-		E(), v.value = 0;
+	function j() {
+		A(), w.value = 0;
 	}
-	let D = A(w, (e) => {
-		e && y.value && (E(), v.value = 1);
+	let re = ne(te, (e) => {
+		e && E.value && (A(), w.value = 1);
 	}, { flush: "sync" });
-	function O() {
-		if (E(), v.value = 0, w.value) {
-			v.value = 1;
+	function ie() {
+		if (A(), w.value = 0, te.value) {
+			w.value = 1;
 			return;
 		}
-		y.value = !0;
-		let e = C, t = performance.now(), n = (r) => {
-			if (e !== C) return;
-			let i = Math.min(1, (r - t) / V);
-			v.value = i, i < 1 ? x = requestAnimationFrame(n) : (x = 0, y.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);
 		};
-		x = requestAnimationFrame(n);
+		O = requestAnimationFrame(n);
 	}
-	return S(() => {
-		D(), E();
+	return C(() => {
+		re(), A();
 	}), {
-		mode: n,
-		preset: r,
-		points: i,
-		presetNames: H,
-		selectPreset: a,
-		setHandle: o,
-		steps: s,
-		term: c,
-		terms: F,
-		easingFn: l,
-		readout: u,
-		reparseOk: d,
-		value: p,
-		handlesSvg: m,
-		bezierPathD: h,
-		stepPathD: g,
-		viewBox: _,
-		progress: v,
-		playing: y,
-		playbackState: b,
-		reducedMotion: w,
-		playTravel: O,
-		cancelTravel: ee,
-		stopTravel: E
+		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 me = [
+var Te = [
 	"data-mode",
+	"data-preset",
+	"data-surface",
 	"data-copy-state",
 	"data-playback-state",
-	"data-reduced-motion"
-], he = { class: "glass-card relative overflow-hidden rounded-card p-3" }, ge = ["id"], _e = ["viewBox", "aria-label"], ve = ["x1", "x2"], ye = ["y1", "y2"], be = ["x2", "y2"], xe = ["x2", "y2"], Se = ["d"], Ce = ["d"], we = [
+	"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"
-], Te = ["cx", "cy"], Ee = { class: "flex flex-col gap-4" }, De = {
-	key: 0,
-	class: "flex flex-col gap-2"
-}, Oe = { class: "flex flex-col gap-2" }, ke = { class: "text-mono-caption text-muted-foreground" }, Ae = { class: "flex flex-col gap-2" }, je = ["data-reparse-ok"], Me = { class: "flex items-center gap-2" }, Ne = ["aria-disabled", "aria-label"], Pe = {
+], je = {
+	"data-slot": "easing-controls",
+	class: "flex flex-wrap items-center gap-2 [&>*]:min-h-10"
+}, Me = {
 	key: 0,
-	class: "flex flex-wrap items-center justify-between gap-2 text-mono-caption"
+	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 = {
-	key: 3,
-	class: "flex flex-wrap items-center gap-2"
-}, Ie = {
-	class: "text-mono-caption text-muted-foreground",
+	"data-slot": "easing-copy-status",
 	role: "status",
-	"aria-live": "polite"
-}, G = /* @__PURE__ */ y({
+	"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__*/ b({
-		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(e) {
-		let l = e, u = ne(e, "modelValue"), { mode: y, preset: b, points: S, presetNames: M, selectPreset: N, setHandle: P, steps: F, term: I, terms: L, easingFn: le, readout: z, reparseOk: B, value: V, handlesSvg: H, bezierPathD: U, stepPathD: G, viewBox: K, progress: Le, playing: q, playbackState: J, reducedMotion: Re, playTravel: ze, cancelTravel: Be, stopTravel: Ve } = W({
-			initialMode: l.mode,
-			initialPreset: l.preset,
-			initialSteps: l.steps,
-			initialTerm: l.term
-		});
-		A(() => l.mode, (e) => {
-			y.value = e;
-		});
-		function Y(e, t) {
+	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 X;
-		function He(e) {
-			Y(u.value, e) || Y(X, e) || (X = e, u.value = e);
+		let Y;
+		function Le(e) {
+			J(x.value, e) || J(Y, e) || (Y = e, x.value = e);
 		}
-		function Ue(e) {
+		function Re(e) {
 			if (!e) return;
-			if (Y(X, e)) {
-				X = void 0;
+			if (J(Y, e)) {
+				Y = void 0;
 				return;
 			}
-			y.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 !== S.value[t]) && (P(0, e.points[0], e.points[1]), P(1, e.points[2], e.points[3])), Number.isFinite(e.steps) && (F.value = Math.max(1, Math.min(12, Math.round(e.steps)))), L.includes(e.term) && (I.value = e.term);
-			let t = V.value;
-			Y(e, t) || He(t);
+			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);
 		}
-		A(u, Ue, {
+		ne(x, Re, {
 			deep: !0,
 			immediate: !0
-		}), A(V, He, { immediate: !0 });
-		let We = k("svgEl"), Ge = te(), Z = T(null);
-		function Ke(e) {
-			let t = We.value;
-			if (!t) return {
-				x: 0,
-				y: 0
-			};
-			let n = t.getScreenCTM();
-			if (!n) return {
-				x: 0,
-				y: 0
-			};
-			let r = n.inverse();
+		}), 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: R(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 qe(e) {
-			if (y.value !== "bezier") return;
-			let { x: t, y: n } = Ke(e), r = e.pointerType === "touch" ? de : ue, i = [{
-				x: S.value[0],
-				y: S.value[1]
-			}, {
-				x: S.value[2],
-				y: S.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(), Z.value = a, e.currentTarget.setPointerCapture(e.pointerId));
+		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 (C.value !== "bezier") return;
+			let t = We(e);
+			t !== null && (e.preventDefault(), X.value = t, e.currentTarget.setPointerCapture(e.pointerId));
 		}
-		function Je(e) {
-			if (Z.value === null) return;
-			let { x: t, y: n } = Ke(e);
-			P(Z.value, t, n);
+		function Ke(e) {
+			if (X.value === null) return;
+			let t = Ue(e);
+			t && F(X.value, t.x, t.y);
+		}
+		function qe() {
+			X.value = null;
 		}
-		function Ye() {
-			Z.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 Xe(e, t) {
-			let n = e * 2, r = S.value[n], i = S.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;
@@ -265,6 +527,12 @@ var me = [
 				case "ArrowUp":
 					s += a;
 					break;
+				case "PageDown":
+					s -= .25;
+					break;
+				case "PageUp":
+					s += .25;
+					break;
 				case "Home":
 					o = 0;
 					break;
@@ -273,366 +541,269 @@ var me = [
 					break;
 				default: return;
 			}
-			t.preventDefault(), P(e, o, s);
+			t.preventDefault(), F(e, o, s);
 		}
-		let Ze = k("readoutEl"), { status: Q, copy: Qe } = n({
+		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
-		}), $ = f(() => {
-			switch (Q.value) {
+		}), $ = p(() => {
+			switch (et.value) {
 				case "success": return "copied";
 				case "failure": return "failed";
-				default: return Q.value;
+				default: return et.value;
 			}
 		});
-		function $e() {
-			Q.value !== "pending" && Qe(z.value);
+		function nt() {
+			et.value !== "pending" && tt(V.value);
 		}
-		function et() {
-			let e = Ze.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 tt = f(() => ({
+		let it = p(() => ({
 			idle: "",
 			pending: "Copying curve literal…",
 			copied: "Copied curve literal.",
 			failed: "Clipboard unavailable. Select the full literal to copy manually."
-		})[$.value]), nt = f(() => {
-			let e = y.value === "steps" ? "staircase" : "curve";
-			return q.value ? `Restart ${e}` : J.value === "complete" ? `Replay ${e}` : y.value === "steps" ? "Climb the staircase" : "Trace the curve";
-		});
-		C(() => {
-			Ve();
-		});
-		let rt = f(() => y.value === "bezier" ? `0 ${K.value.minY} 1 ${K.value.height}` : "-0.05 -0.1 1.1 1.2"), it = f({
-			get: () => [F.value],
-			set: (e) => {
-				F.value = e[0] ?? F.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 (n, l) => (w(), h("div", {
-			class: "grid gap-4 lg:grid-cols-[1fr_18rem]",
-			"data-mode": O(y),
+		}), 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(J),
-			"data-reduced-motion": O(Re) ? "" : void 0,
-			"data-testid": "easing-picker",
-			style: { "--easing-curve-accent": "var(--motion-accent, var(--viz-legendre))" }
-		}, [g("div", he, [g("span", {
-			id: O(Ge),
-			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, ge), (w(), h("svg", {
-			ref_key: "svgEl",
-			ref: We,
-			class: "block w-full touch-none select-none",
-			viewBox: rt.value,
-			preserveAspectRatio: "xMidYMid meet",
-			style: {
-				"aspect-ratio": "1",
-				"block-size": "clamp(200px, 38cqi, 320px)",
-				"margin-inline": "auto"
-			},
-			"aria-label": e.label,
-			role: "group",
-			onPointerdown: qe,
-			onPointermove: Je,
-			onPointerup: Ye,
-			onPointercancel: Ye
+			"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 : ""
 		}, [
-			l[3] ||= g("rect", {
-				x: "0",
-				y: "0",
-				width: "1",
-				height: "1",
-				fill: "none",
-				class: "stroke-border",
-				"stroke-width": "0.012"
-			}, null, -1),
-			l[4] ||= g("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),
-			(w(), h(d, null, E([
-				.25,
-				.5,
-				.75
-			], (e) => g("line", {
-				key: "gx" + e,
-				x1: e,
-				y1: "0",
-				x2: e,
-				y2: "1",
-				class: "stroke-border/40",
-				"stroke-width": "0.006"
-			}, null, 8, ve)), 64)),
-			(w(), h(d, null, E([
-				.25,
-				.5,
-				.75
-			], (e) => g("line", {
-				key: "gy" + e,
-				x1: "0",
-				y1: e,
-				x2: "1",
-				y2: e,
-				class: "stroke-border/40",
-				"stroke-width": "0.006"
-			}, null, 8, ye)), 64)),
-			l[5] ||= g("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),
-			l[6] ||= g("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),
-			O(y) === "bezier" ? (w(), h(d, { key: 0 }, [
-				g("line", {
-					x1: 0,
-					y1: 1,
-					x2: O(H)[0].x,
-					y2: O(H)[0].y,
-					class: "stroke-muted-foreground/50",
-					"stroke-width": "0.02",
-					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, be),
-				g("line", {
-					x1: 1,
-					y1: 0,
-					x2: O(H)[1].x,
-					y2: O(H)[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, xe),
-				g("path", {
-					d: O(U),
-					fill: "none",
-					class: "stroke-(--easing-curve-accent)",
-					"stroke-width": "0.035",
-					"stroke-linecap": "round"
-				}, null, 8, Se)
-			], 64)) : (w(), h("path", {
-				key: 1,
-				d: O(G),
-				fill: "none",
-				class: "stroke-(--easing-curve-accent)",
-				"stroke-width": "0.025",
-				"stroke-linejoin": "miter",
-				"stroke-linecap": "butt"
-			}, null, 8, Ce)),
-			l[7] ||= g("circle", {
-				cx: "0",
-				cy: "1",
-				r: "0.018",
-				class: "fill-muted-foreground/50"
-			}, null, -1),
-			l[8] ||= g("circle", {
-				cx: "1",
-				cy: "0",
-				r: "0.018",
-				class: "fill-muted-foreground/50"
-			}, null, -1),
-			O(y) === "bezier" ? (w(), h(d, { key: 2 }, E([0, 1], (e) => g("circle", {
-				key: e,
-				cx: O(H)[e].x,
-				cy: O(H)[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": O(S)[e * 2],
-				"aria-valuetext": `x ${O(S)[e * 2].toFixed(3)}, y ${O(S)[e * 2 + 1].toFixed(3)}`,
-				"aria-describedby": O(Ge),
-				onKeydown: (t) => Xe(e, t)
-			}, null, 40, we)), 64)) : m("", !0),
-			e.playback && O(J) !== "idle" ? (w(), h("circle", {
-				key: 3,
-				cx: O(Le),
-				cy: 1 - O(le)(O(Le)),
-				r: "0.03",
-				class: "fill-(--easing-curve-accent)",
-				"data-testid": "easing-travel-dot"
-			}, null, 8, Te)) : m("", !0)
-		], 40, _e))]), g("div", Ee, [
-			O(y) === "bezier" ? (w(), h("div", De, [l[9] ||= g("span", { class: "text-mono-caption text-muted-foreground" }, "Preset", -1), v(O(i), {
-				"model-value": O(b),
-				"onUpdate:modelValue": l[0] ||= (e) => O(N)(String(e))
-			}, {
-				default: j(() => [v(O(a), { "aria-label": "Easing preset" }, {
-					default: j(() => [v(O(s), { placeholder: "Pick a curve" })]),
-					_: 1
-				}), v(O(r), null, {
-					default: j(() => [(w(!0), h(d, null, E(O(M), (e) => (w(), p(O(o), {
-						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: j(() => [_(D(e), 1)]),
-						_: 2
-					}, 1032, ["value"]))), 128))]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["model-value"])])) : (w(), h(d, { key: 1 }, [g("div", Oe, [g("span", ke, "Steps (n) — " + D(O(F)), 1), v(O(c), {
-				modelValue: it.value,
-				"onUpdate:modelValue": l[1] ||= (e) => it.value = e,
-				min: O(1),
-				max: O(12),
-				step: 1,
-				"aria-label": "Step count",
-				"data-testid": "easing-steps-n"
-			}, null, 8, [
-				"modelValue",
-				"min",
-				"max"
-			])]), g("div", Ae, [l[10] ||= g("span", { class: "text-mono-caption text-muted-foreground" }, "Jump term", -1), v(O(i), {
-				"model-value": O(I),
-				"onUpdate:modelValue": l[2] ||= (e) => I.value = String(e)
-			}, {
-				default: j(() => [v(O(a), { "aria-label": "Jump term" }, {
-					default: j(() => [v(O(s), { 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
-				}), v(O(r), null, {
-					default: j(() => [(w(!0), h(d, null, E(O(L), (e) => (w(), p(O(o), {
-						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: j(() => [_(D(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)),
-			e.readout ? (w(), h("div", {
-				key: 2,
-				class: "glass-card flex flex-col gap-2 rounded-card px-3 py-2",
-				"data-reparse-ok": O(B),
-				"data-testid": "easing-readout"
-			}, [g("div", Me, [g("code", {
-				ref_key: "readoutEl",
-				ref: Ze,
-				tabindex: "0",
-				class: "min-w-0 flex-1 break-all text-xs text-foreground select-text"
-			}, D(O(z)), 513), g("button", {
-				type: "button",
-				class: "shrink-0 rounded-pill p-1.5 text-muted-foreground transition-colors hover:bg-(--surface-tint-8) hover:text-foreground aria-disabled:cursor-wait aria-disabled:opacity-disabled",
-				"aria-disabled": $.value === "pending" || void 0,
-				"aria-label": $.value === "failed" ? "Retry copy curve literal" : $.value === "copied" ? "Copied" : $.value === "pending" ? "Copying curve literal" : "Copy curve literal",
-				"data-testid": "easing-copy",
-				onClick: $e
-			}, [$.value === "pending" ? (w(), p(O(ae), {
-				key: 0,
-				class: "size-4 animate-spin"
-			})) : $.value === "copied" ? (w(), p(O(re), {
-				key: 1,
-				class: "size-4 text-(--easing-curve-accent)"
-			})) : (w(), p(O(ie), {
-				key: 2,
-				class: "size-4"
-			}))], 8, Ne)]), $.value === "idle" ? m("", !0) : (w(), h("div", Pe, [g("span", {
-				role: "status",
-				"aria-live": "polite",
-				class: x($.value === "failed" ? "text-destructive" : "text-muted-foreground")
-			}, D(tt.value), 3), $.value === "failed" ? (w(), p(O(t), {
-				key: 0,
-				class: "shrink-0 px-3 py-1",
-				"data-testid": "easing-select-literal",
-				onClick: et
-			}, {
-				default: j(() => [...l[11] ||= [_(" Select literal ", -1)]]),
-				_: 1
-			})) : m("", !0)]))], 8, je)) : m("", !0),
-			e.playback ? (w(), h("div", Fe, [
-				v(O(t), {
-					class: "w-fit",
-					"data-testid": "easing-playback",
-					onClick: O(ze)
+				}, 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: j(() => [O(q) || O(J) === "complete" ? (w(), p(O(se), { key: 0 })) : (w(), p(O(oe), { key: 1 })), _(" " + D(nt.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"]),
-				O(q) ? (w(), p(O(t), {
-					key: 0,
-					class: "w-fit",
-					"data-testid": "easing-cancel",
-					onClick: O(Be)
+				}, 8, [
+					"aria-label",
+					"aria-disabled",
+					"data-reparse-ok"
+				]),
+				n.playback ? (w(), g(f, { key: 2 }, [y(O(r), {
+					class: "shrink-0",
+					onClick: st
 				}, {
-					default: j(() => [v(O(ce)), l[12] ||= _(" 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"])) : m("", !0),
-				g("span", Ie, D(O(J) === "playing" ? "Preview playing" : O(J) === "complete" ? "Preview complete" : "Preview idle"), 1)
-			])) : m("", !0),
-			ee(n.$slots, "footer", { value: O(V) })
-		])], 8, me));
-	}
-}), K = /* @__PURE__ */ y({
-	__name: "EasingConfigurator",
-	props: /*@__PURE__*/ b({
-		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 = ne(e, "modelValue");
-		return (n, r) => (w(), p(O(u), {
-			label: e.label,
-			sub: e.name
-		}, {
-			default: j(() => [v(O(l), {
-				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: j(() => [v(G, {
-					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 { K as EasingConfigurator, G as EasingPicker, W as useEasingPicker };
+export { xe as EasingCurve, Y as EasingPicker, we as useEasingPicker };