@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/easing.js

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