@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/easing.js

@@ -1,116 +1,165 @@
-import { a as e, i as t, o as n, r, s as i } from "./SelectScrollDownButton-CDtwaWkZ.js";
-import { n as a } from "./slider-Cxuj_W_H.js";
-import { n as o, t as s } from "./ConfiguratorRow-BV6zPjTM.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, onUnmounted as v, openBlock as y, ref as b, renderList as x, renderSlot as ee, toDisplayString as S, unref as C, useModel as w, useTemplateRef as te, watch as T, withCtx as E } from "vue";
-import { Check as ne, Copy as re } from "@lucide/vue";
-import { CSSCubicBezier as D, bezierPresets as O, jumpTerms as k, parseSteps as A, steppedEase as j } from "@mkbabb/value.js";
+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 { 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";
 //#region src/components/easing/constants.ts
-var M = "custom", N = "ease-out-back", P = (e) => 1 - e, F = .1, I = .6, ie = .1, ae = .15, L = 1200, oe = 1400, R = Object.keys(O);
-function z(e = {}) {
-	let t = b(e.initialMode ?? "bezier"), n = b(e.initialPreset ?? "ease-out-back"), r = b([...O[n.value in O ? n.value : N]]);
-	function i(e) {
-		n.value = e;
-		let t = O[e];
-		t && (r.value = [...t]);
+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) {
+	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;
+		let t = P[e];
+		t && (i.value = [...t]);
 	}
-	function a(e, t, i) {
-		let a = Math.max(0, Math.min(1, t)), o = Math.max(-I, Math.min(1 + I, i)), s = [...r.value];
-		s[e * 2] = +a.toFixed(3), s[e * 2 + 1] = +o.toFixed(3), r.value = s, n.value = M;
+	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;
 	}
-	let o = b(e.initialSteps ?? 4), s = b(e.initialTerm ?? "end"), c = l(() => {
-		if (t.value === "steps") return j(o.value, s.value) ?? ((e) => e);
-		let [e, n, i, a] = r.value;
-		return D(e, n, i, a);
-	}), u = l(() => {
-		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 = l(() => {
-		if (t.value !== "steps") return !0;
-		let e = A(u.value);
-		return e != null && e.count === o.value && e.jumpTerm === s.value;
-	}), f = l(() => ({
-		mode: t.value,
+	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);
+		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: c.value,
-		points: [...r.value],
-		steps: o.value,
-		term: s.value
-	})), p = l(() => {
-		let [e, t, n, i] = r.value;
+		fn: l.value,
+		points: [...i.value],
+		steps: s.value,
+		term: c.value
+	})), m = f(() => {
+		let [e, t, n, r] = i.value;
 		return [{
 			x: e,
-			y: P(t)
+			y: R(t)
 		}, {
 			x: n,
-			y: P(i)
+			y: R(r)
 		}];
-	}), m = l(() => {
-		let [e, t] = p.value;
+	}), h = f(() => {
+		let [e, t] = m.value;
 		return `M 0 1 C ${e.x} ${e.y}, ${t.x} ${t.y}, 1 0`;
-	}), h = l(() => {
-		let e = c.value, t = "";
+	}), g = f(() => {
+		let e = l.value, t = "";
 		for (let n = 0; n <= 240; n++) {
-			let r = n / 240, i = P(e(r));
+			let r = n / 240, i = R(e(r));
 			t += n === 0 ? `M ${r} ${i}` : ` L ${r} ${i}`;
 		}
 		return t;
-	}), g = l(() => {
+	}), _ = f(() => {
 		let e = [
 			0,
 			1,
-			p.value[0].y,
-			p.value[1].y
+			m.value[0].y,
+			m.value[1].y
 		];
-		for (let t = 0; t <= 16; t++) e.push(P(c.value(t / 16)));
-		let t = Math.max(Math.min(...e), -I) - F;
+		for (let t = 0; t <= 16; t++) e.push(R(l.value(t / 16)));
+		let t = Math.max(Math.min(...e), -B) - z;
 		return {
 			minY: t,
-			height: Math.min(Math.max(...e), 1 + I) + F - t
+			height: Math.min(Math.max(...e), 1 + B) + z - t
 		};
-	}), _ = b(0), v = 0;
-	function y() {
-		v && cancelAnimationFrame(v), v = 0;
+	}), 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;
+	}
+	function ee() {
+		E(), v.value = 0;
 	}
-	function x() {
-		y();
-		let e = performance.now(), t = (n) => {
-			let r = Math.min(1, (n - e) / L);
-			_.value = r, v = r < 1 ? requestAnimationFrame(t) : 0;
+	let D = A(w, (e) => {
+		e && y.value && (E(), v.value = 1);
+	}, { flush: "sync" });
+	function O() {
+		if (E(), v.value = 0, w.value) {
+			v.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);
 		};
-		v = requestAnimationFrame(t);
+		x = requestAnimationFrame(n);
 	}
-	return {
-		mode: t,
-		preset: n,
-		points: r,
-		presetNames: R,
-		selectPreset: i,
-		setHandle: a,
-		steps: o,
-		term: s,
-		terms: k,
-		easingFn: c,
+	return S(() => {
+		D(), E();
+	}), {
+		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: f,
-		handlesSvg: p,
-		bezierPathD: m,
-		stepPathD: h,
-		viewBox: g,
-		progress: _,
-		playTravel: x,
-		stopTravel: y
+		value: p,
+		handlesSvg: m,
+		bezierPathD: h,
+		stepPathD: g,
+		viewBox: _,
+		progress: v,
+		playing: y,
+		playbackState: b,
+		reducedMotion: w,
+		playTravel: O,
+		cancelTravel: ee,
+		stopTravel: E
 	};
 }
 //#endregion
 //#region src/components/easing/EasingPicker.vue?vue&type=script&setup=true&lang.ts
-var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden rounded-card p-3" }, le = ["viewBox", "aria-label"], ue = ["x1", "x2"], de = ["y1", "y2"], fe = ["x2", "y2"], B = ["x2", "y2"], V = ["d"], pe = ["d"], me = ["cx", "cy"], he = ["cx", "cy"], ge = ["cx", "cy"], _e = { class: "flex flex-col gap-4" }, ve = {
+var me = [
+	"data-mode",
+	"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 = [
+	"cx",
+	"cy",
+	"aria-label",
+	"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"
-}, ye = { class: "flex flex-col gap-2" }, be = { class: "text-mono-caption text-muted-foreground" }, xe = { class: "flex flex-col gap-2" }, Se = ["data-reparse-ok"], Ce = ["title"], we = ["aria-label"], H = /* @__PURE__ */ g({
+}, 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 = {
+	key: 0,
+	class: "flex flex-wrap items-center justify-between gap-2 text-mono-caption"
+}, Fe = {
+	key: 3,
+	class: "flex flex-wrap items-center gap-2"
+}, Ie = {
+	class: "text-mono-caption text-muted-foreground",
+	role: "status",
+	"aria-live": "polite"
+}, G = /* @__PURE__ */ y({
 	__name: "EasingPicker",
-	props: /* @__PURE__ */ _({
+	props: /*@__PURE__*/ b({
 		mode: { default: "bezier" },
 		preset: { default: void 0 },
 		steps: { default: void 0 },
@@ -129,19 +178,40 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o) {
-		let s = o, g = w(o, "modelValue"), { mode: _, preset: D, points: O, presetNames: k, selectPreset: A, setHandle: j, steps: M, term: N, terms: F, easingFn: I, readout: L, reparseOk: R, value: H, handlesSvg: U, bezierPathD: Te, stepPathD: Ee, viewBox: W, progress: G, playTravel: K, stopTravel: q } = z({
-			initialMode: s.mode,
-			initialPreset: s.preset,
-			initialSteps: s.steps,
-			initialTerm: s.term
+	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;
 		});
-		T(() => s.mode, (e) => {
-			_.value = e;
-		}), T(H, (e) => g.value = e, { immediate: !0 }), v(q);
-		let J = te("svgEl"), Y = b(null);
-		function X(e) {
-			let t = J.value;
+		function Y(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);
+		}
+		function Ue(e) {
+			if (!e) return;
+			if (Y(X, e)) {
+				X = 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);
+		}
+		A(u, Ue, {
+			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
@@ -154,68 +224,124 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 			let r = n.inverse();
 			return {
 				x: r.a * e.clientX + r.c * e.clientY + r.e,
-				y: P(r.b * e.clientX + r.d * e.clientY + r.f)
+				y: R(r.b * e.clientX + r.d * e.clientY + r.f)
 			};
 		}
-		function De(e) {
-			if (_.value !== "bezier") return;
-			let { x: t, y: n } = X(e), r = e.pointerType === "touch" ? ae : ie, i = [{
-				x: O.value[0],
-				y: O.value[1]
+		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: O.value[2],
-				y: O.value[3]
+				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(), Y.value = a, e.currentTarget.setPointerCapture(e.pointerId));
+			a !== null && (e.preventDefault(), Z.value = a, e.currentTarget.setPointerCapture(e.pointerId));
 		}
-		function Oe(e) {
-			if (Y.value === null) return;
-			let { x: t, y: n } = X(e);
-			j(Y.value, t, n);
+		function Je(e) {
+			if (Z.value === null) return;
+			let { x: t, y: n } = Ke(e);
+			P(Z.value, t, n);
 		}
-		function Z() {
-			Y.value = null;
+		function Ye() {
+			Z.value = null;
+		}
+		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;
+			switch (t.key) {
+				case "ArrowLeft":
+					o -= a;
+					break;
+				case "ArrowRight":
+					o += a;
+					break;
+				case "ArrowDown":
+					s -= a;
+					break;
+				case "ArrowUp":
+					s += a;
+					break;
+				case "Home":
+					o = 0;
+					break;
+				case "End":
+					o = 1;
+					break;
+				default: return;
+			}
+			t.preventDefault(), P(e, o, s);
+		}
+		let Ze = k("readoutEl"), { status: Q, copy: Qe } = n({
+			resetMs: fe,
+			timeoutMs: pe
+		}), $ = f(() => {
+			switch (Q.value) {
+				case "success": return "copied";
+				case "failure": return "failed";
+				default: return Q.value;
+			}
+		});
+		function $e() {
+			Q.value !== "pending" && Qe(z.value);
 		}
-		let Q = b(!1);
-		async function ke() {
-			try {
-				await navigator.clipboard.writeText(L.value), Q.value = !0, setTimeout(() => Q.value = !1, oe);
-			} catch {}
+		function et() {
+			let e = Ze.value, t = window.getSelection();
+			if (!e || !t) return;
+			let n = document.createRange();
+			n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n), e.focus();
 		}
-		let Ae = l(() => _.value === "bezier" ? `0 ${W.value.minY} 1 ${W.value.height}` : "-0.05 -0.1 1.1 1.2"), $ = l({
-			get: () => [M.value],
+		let tt = f(() => ({
+			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) => {
-				M.value = e[0] ?? M.value;
+				F.value = e[0] ?? F.value;
 			}
 		});
-		return (s, l) => (y(), f("div", {
+		return (n, l) => (w(), h("div", {
 			class: "grid gap-4 lg:grid-cols-[1fr_18rem]",
-			"data-mode": C(_),
+			"data-mode": O(y),
+			"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))" }
-		}, [p("div", ce, [(y(), f("svg", {
+		}, [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: J,
+			ref: We,
 			class: "block w-full touch-none select-none",
-			viewBox: Ae.value,
+			viewBox: rt.value,
 			preserveAspectRatio: "xMidYMid meet",
 			style: {
 				"aspect-ratio": "1",
 				"block-size": "clamp(200px, 38cqi, 320px)",
 				"margin-inline": "auto"
 			},
-			"aria-label": o.label,
-			role: "img",
-			onPointerdown: De,
-			onPointermove: Oe,
-			onPointerup: Z,
-			onPointercancel: Z
+			"aria-label": e.label,
+			role: "group",
+			onPointerdown: qe,
+			onPointermove: Je,
+			onPointerup: Ye,
+			onPointercancel: Ye
 		}, [
-			l[4] ||= p("rect", {
+			l[3] ||= g("rect", {
 				x: "0",
 				y: "0",
 				width: "1",
@@ -224,7 +350,7 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				class: "stroke-border",
 				"stroke-width": "0.012"
 			}, null, -1),
-			l[5] ||= p("line", {
+			l[4] ||= g("line", {
 				x1: "0",
 				y1: "1",
 				x2: "1",
@@ -233,11 +359,11 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				"stroke-width": "0.006",
 				"stroke-dasharray": "0.02 0.015"
 			}, null, -1),
-			(y(), f(c, null, x([
+			(w(), h(d, null, E([
 				.25,
 				.5,
 				.75
-			], (e) => p("line", {
+			], (e) => g("line", {
 				key: "gx" + e,
 				x1: e,
 				y1: "0",
@@ -245,12 +371,12 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				y2: "1",
 				class: "stroke-border/40",
 				"stroke-width": "0.006"
-			}, null, 8, ue)), 64)),
-			(y(), f(c, null, x([
+			}, null, 8, ve)), 64)),
+			(w(), h(d, null, E([
 				.25,
 				.5,
 				.75
-			], (e) => p("line", {
+			], (e) => g("line", {
 				key: "gy" + e,
 				x1: "0",
 				y1: e,
@@ -258,8 +384,8 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				y2: e,
 				class: "stroke-border/40",
 				"stroke-width": "0.006"
-			}, null, 8, de)), 64)),
-			l[6] ||= p("text", {
+			}, null, 8, ye)), 64)),
+			l[5] ||= g("text", {
 				x: "0.05",
 				y: "0.95",
 				class: "fill-muted-foreground/60",
@@ -269,7 +395,7 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				},
 				"text-anchor": "start"
 			}, "0", -1),
-			l[7] ||= p("text", {
+			l[6] ||= g("text", {
 				x: "0.95",
 				y: "0.12",
 				class: "fill-muted-foreground/60",
@@ -279,99 +405,103 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				},
 				"text-anchor": "end"
 			}, "1", -1),
-			C(_) === "bezier" ? (y(), f(c, { key: 0 }, [
-				p("line", {
+			O(y) === "bezier" ? (w(), h(d, { key: 0 }, [
+				g("line", {
 					x1: 0,
 					y1: 1,
-					x2: C(U)[0].x,
-					y2: C(U)[0].y,
+					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, fe),
-				p("line", {
+				}, null, 8, be),
+				g("line", {
 					x1: 1,
 					y1: 0,
-					x2: C(U)[1].x,
-					y2: C(U)[1].y,
+					x2: O(H)[1].x,
+					y2: O(H)[1].y,
 					class: "stroke-muted-foreground/50",
 					"stroke-width": "0.02",
 					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, B),
-				p("path", {
-					d: C(Te),
+				}, null, 8, xe),
+				g("path", {
+					d: O(U),
 					fill: "none",
 					class: "stroke-(--easing-curve-accent)",
 					"stroke-width": "0.035",
 					"stroke-linecap": "round"
-				}, null, 8, V)
-			], 64)) : (y(), f("path", {
+				}, null, 8, Se)
+			], 64)) : (w(), h("path", {
 				key: 1,
-				d: C(Ee),
+				d: O(G),
 				fill: "none",
 				class: "stroke-(--easing-curve-accent)",
 				"stroke-width": "0.025",
 				"stroke-linejoin": "miter",
 				"stroke-linecap": "butt"
-			}, null, 8, pe)),
-			l[8] ||= p("circle", {
+			}, null, 8, Ce)),
+			l[7] ||= g("circle", {
 				cx: "0",
 				cy: "1",
 				r: "0.018",
 				class: "fill-muted-foreground/50"
 			}, null, -1),
-			l[9] ||= p("circle", {
+			l[8] ||= g("circle", {
 				cx: "1",
 				cy: "0",
 				r: "0.018",
 				class: "fill-muted-foreground/50"
 			}, null, -1),
-			C(_) === "bezier" ? (y(), f(c, { key: 2 }, [p("circle", {
-				cx: C(U)[0].x,
-				cy: C(U)[0].y,
-				r: "0.04",
-				class: "fill-foreground stroke-background",
-				"stroke-width": "0.02",
-				style: { cursor: "move" }
-			}, null, 8, me), p("circle", {
-				cx: C(U)[1].x,
-				cy: C(U)[1].y,
+			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",
+				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" }
-			}, null, 8, he)], 64)) : d("", !0),
-			o.playback ? (y(), f("circle", {
+				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: C(G),
-				cy: 1 - C(I)(C(G)),
+				cx: O(Le),
+				cy: 1 - O(le)(O(Le)),
 				r: "0.03",
-				class: "fill-(--easing-curve-accent)"
-			}, null, 8, ge)) : d("", !0)
-		], 40, le))]), p("div", _e, [
-			C(_) === "bezier" ? (y(), f("div", ve, [l[10] ||= p("span", { class: "text-mono-caption text-muted-foreground" }, "Preset", -1), h(C(i), {
-				"model-value": C(D),
-				"onUpdate:modelValue": l[0] ||= (e) => C(A)(String(e))
+				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: E(() => [h(C(e), { "aria-label": "Easing preset" }, {
-					default: E(() => [h(C(n), { placeholder: "Pick a curve" })]),
+				default: j(() => [v(O(a), { "aria-label": "Easing preset" }, {
+					default: j(() => [v(O(s), { placeholder: "Pick a curve" })]),
 					_: 1
-				}), h(C(t), null, {
-					default: E(() => [(y(!0), f(c, null, x(C(k), (e) => (y(), u(C(r), {
+				}), v(O(r), null, {
+					default: j(() => [(w(!0), h(d, null, E(O(M), (e) => (w(), p(O(o), {
 						key: e,
 						value: e
 					}, {
-						default: E(() => [m(S(e), 1)]),
+						default: j(() => [_(D(e), 1)]),
 						_: 2
 					}, 1032, ["value"]))), 128))]),
 					_: 1
 				})]),
 				_: 1
-			}, 8, ["model-value"])])) : (y(), f(c, { key: 1 }, [p("div", ye, [p("span", be, "Steps (n) — " + S(C(M)), 1), h(C(a), {
-				modelValue: $.value,
-				"onUpdate:modelValue": l[1] ||= (e) => $.value = e,
-				min: C(1),
-				max: C(12),
+			}, 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"
@@ -379,57 +509,90 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 				"modelValue",
 				"min",
 				"max"
-			])]), p("div", xe, [l[11] ||= p("span", { class: "text-mono-caption text-muted-foreground" }, "Jump term", -1), h(C(i), {
-				"model-value": C(N),
-				"onUpdate:modelValue": l[2] ||= (e) => N.value = String(e)
+			])]), 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: E(() => [h(C(e), { "aria-label": "Jump term" }, {
-					default: E(() => [h(C(n), { placeholder: "Pick a jump term" })]),
+				default: j(() => [v(O(a), { "aria-label": "Jump term" }, {
+					default: j(() => [v(O(s), { placeholder: "Pick a jump term" })]),
 					_: 1
-				}), h(C(t), null, {
-					default: E(() => [(y(!0), f(c, null, x(C(F), (e) => (y(), u(C(r), {
+				}), v(O(r), null, {
+					default: j(() => [(w(!0), h(d, null, E(O(L), (e) => (w(), p(O(o), {
 						key: e,
 						value: e
 					}, {
-						default: E(() => [m(S(e), 1)]),
+						default: j(() => [_(D(e), 1)]),
 						_: 2
 					}, 1032, ["value"]))), 128))]),
 					_: 1
 				})]),
 				_: 1
 			}, 8, ["model-value"])])], 64)),
-			o.readout ? (y(), f("div", {
+			e.readout ? (w(), h("div", {
 				key: 2,
-				class: "glass-card flex items-center gap-2 rounded-card px-3 py-2",
-				"data-reparse-ok": C(R),
+				class: "glass-card flex flex-col gap-2 rounded-card px-3 py-2",
+				"data-reparse-ok": O(B),
 				"data-testid": "easing-readout"
-			}, [p("code", {
-				class: "min-w-0 flex-1 truncate text-xs text-foreground",
-				title: C(L)
-			}, S(C(L)), 9, Ce), p("button", {
+			}, [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-label": Q.value ? "Copied" : "Copy curve literal",
-				onClick: ke
-			}, [Q.value ? (y(), u(C(ne), {
+				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 text-(--easing-curve-accent)"
-			})) : (y(), u(C(re), {
+				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, we)], 8, Se)) : d("", !0),
-			o.playback ? (y(), f("button", {
-				key: 3,
-				type: "button",
-				class: "btn-pill glass-btn rounded-pill px-3 py-2 text-sm text-foreground",
-				onClick: l[3] ||= (...e) => C(K) && C(K)(...e)
-			}, S(C(_) === "steps" ? "Climb the staircase" : "Trace the curve"), 1)) : d("", !0),
-			ee(s.$slots, "footer", { value: C(H) })
-		])], 8, se));
+			}))], 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)
+				}, {
+					default: j(() => [O(q) || O(J) === "complete" ? (w(), p(O(se), { key: 0 })) : (w(), p(O(oe), { key: 1 })), _(" " + D(nt.value), 1)]),
+					_: 1
+				}, 8, ["onClick"]),
+				O(q) ? (w(), p(O(t), {
+					key: 0,
+					class: "w-fit",
+					"data-testid": "easing-cancel",
+					onClick: O(Be)
+				}, {
+					default: j(() => [v(O(ce)), l[12] ||= _(" Cancel preview ", -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));
 	}
-}), U = /* @__PURE__ */ g({
+}), K = /* @__PURE__ */ y({
 	__name: "EasingConfigurator",
-	props: /* @__PURE__ */ _({
+	props: /*@__PURE__*/ b({
 		label: { default: "Easing" },
 		name: { default: void 0 },
 		mode: { default: "bezier" },
@@ -442,16 +605,16 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = w(e, "modelValue");
-		return (n, r) => (y(), u(C(o), {
+		let t = ne(e, "modelValue");
+		return (n, r) => (w(), p(O(u), {
 			label: e.label,
 			sub: e.name
 		}, {
-			default: E(() => [h(C(s), {
+			default: j(() => [v(O(l), {
 				label: "Curve",
 				name: t.value?.css
 			}, {
-				default: E(() => [h(H, {
+				default: j(() => [v(G, {
 					modelValue: t.value,
 					"onUpdate:modelValue": r[0] ||= (e) => t.value = e,
 					mode: e.mode,
@@ -472,4 +635,4 @@ var se = ["data-mode"], ce = { class: "glass-card relative overflow-hidden round
 	}
 });
 //#endregion
-export { U as EasingConfigurator, H as EasingPicker, z as useEasingPicker };
+export { K as EasingConfigurator, G as EasingPicker, W as useEasingPicker };