@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/easing.js

@@ -1,111 +1,114 @@
-import { f as e, x as t } from "./vendor-CKmzio-i.js";
-import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-CrA8F0iV.js";
-import { n as s, t as c } from "./ConfiguratorRow-BR4l-ixA.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 _, isRef as v, mergeModels as y, onUnmounted as ee, openBlock as b, ref as x, renderList as S, renderSlot as te, toDisplayString as C, unref as w, useModel as T, useTemplateRef as ne, vModelText as re, watch as E, withCtx as D, withDirectives as ie } from "vue";
-import { CSSCubicBezier as O, bezierPresets as k, jumpTerms as A, steppedEase as j } from "@mkbabb/value.js";
+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 M = "custom", N = "ease-out-back", P = (e) => 1 - e, F = .1, I = .6, ae = .1, oe = .15, L = 1200, se = 1400, R = Object.keys(k);
-function z(e = {}) {
-	let t = x(e.initialMode ?? "bezier"), n = x(e.initialPreset ?? "ease-out-back"), r = x([...k[n.value in k ? n.value : N]]);
+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]]);
 	function i(e) {
 		n.value = e;
-		let t = k[e];
+		let t = A[e];
 		t && (r.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;
+		let a = Math.max(0, Math.min(1, t)), o = Math.max(-R, Math.min(1 + R, 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 = x(e.initialSteps ?? 4), s = x(e.initialTerm ?? "end"), c = u(() => {
-		if (t.value === "steps") return j(o.value, s.value) ?? ((e) => e);
+	let o = S(e.initialSteps ?? 4), s = S(e.initialTerm ?? "end"), c = d(() => {
+		if (t.value === "steps") return N(o.value, s.value) ?? ((e) => e);
 		let [e, n, i, a] = r.value;
-		return O(e, n, i, a);
-	}), l = u(() => {
+		return k(e, n, i, a);
+	}), l = d(() => {
 		if (t.value === "steps") return `steps(${o.value}, ${s.value})`;
 		let [e, n, i, a] = r.value.map((e) => +e.toFixed(3));
 		return `cubic-bezier(${e}, ${n}, ${i}, ${a})`;
-	}), d = u(() => ({
+	}), u = d(() => {
+		if (t.value !== "steps") return !0;
+		let e = M(l.value);
+		return e != null && e.count === o.value && e.jumpTerm === s.value;
+	}), f = d(() => ({
 		mode: t.value,
 		css: l.value,
 		fn: c.value,
 		points: [...r.value],
 		steps: o.value,
 		term: s.value
-	})), f = u(() => {
+	})), p = d(() => {
 		let [e, t, n, i] = r.value;
 		return [{
 			x: e,
-			y: P(t)
+			y: I(t)
 		}, {
 			x: n,
-			y: P(i)
+			y: I(i)
 		}];
-	}), p = u(() => {
-		let [e, t] = f.value;
+	}), m = d(() => {
+		let [e, t] = p.value;
 		return `M 0 1 C ${e.x} ${e.y}, ${t.x} ${t.y}, 1 0`;
-	}), m = u(() => {
+	}), h = d(() => {
 		let e = c.value, t = "";
 		for (let n = 0; n <= 240; n++) {
-			let r = n / 240, i = P(e(r));
+			let r = n / 240, i = I(e(r));
 			t += n === 0 ? `M ${r} ${i}` : ` L ${r} ${i}`;
 		}
 		return t;
-	}), h = u(() => {
+	}), g = d(() => {
 		let e = [
 			0,
 			1,
-			f.value[0].y,
-			f.value[1].y
+			p.value[0].y,
+			p.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(I(c.value(t / 16)));
+		let t = Math.max(Math.min(...e), -R) - L;
 		return {
 			minY: t,
-			height: Math.min(Math.max(...e), 1 + I) + F - t
+			height: Math.min(Math.max(...e), 1 + R) + L - t
 		};
-	}), g = x(0), _ = 0;
-	function v() {
-		_ && cancelAnimationFrame(_), _ = 0;
-	}
+	}), _ = S(0), v = 0;
 	function y() {
-		v();
+		v && cancelAnimationFrame(v), v = 0;
+	}
+	function b() {
+		y();
 		let e = performance.now(), t = (n) => {
-			let r = Math.min(1, (n - e) / L);
-			g.value = r, _ = r < 1 ? requestAnimationFrame(t) : 0;
+			let r = Math.min(1, (n - e) / z);
+			_.value = r, v = r < 1 ? requestAnimationFrame(t) : 0;
 		};
-		_ = requestAnimationFrame(t);
+		v = requestAnimationFrame(t);
 	}
 	return {
 		mode: t,
 		preset: n,
 		points: r,
-		presetNames: R,
+		presetNames: B,
 		selectPreset: i,
 		setHandle: a,
 		steps: o,
 		term: s,
-		terms: A,
+		terms: j,
 		easingFn: c,
 		readout: l,
-		value: d,
-		handlesSvg: f,
-		bezierPathD: p,
-		stepPathD: m,
-		viewBox: h,
-		progress: g,
-		playTravel: y,
-		stopTravel: v
+		reparseOk: u,
+		value: f,
+		handlesSvg: p,
+		bezierPathD: m,
+		stepPathD: h,
+		viewBox: g,
+		progress: _,
+		playTravel: b,
+		stopTravel: y
 	};
 }
 //#endregion
 //#region src/components/custom/easing/EasingPicker.vue?vue&type=script&setup=true&lang.ts
-var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden rounded-card p-3" }, ue = ["viewBox", "aria-label"], de = ["x1", "x2"], B = ["y1", "y2"], V = ["x2", "y2"], H = ["x2", "y2"], fe = ["d"], pe = ["d"], me = ["cx", "cy"], he = ["cx", "cy"], ge = ["cx", "cy"], _e = { class: "flex flex-col gap-4" }, ve = {
+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 = {
 	key: 0,
 	class: "flex flex-col gap-2"
-}, ye = { class: "flex flex-col gap-2" }, be = { class: "text-mono-caption text-muted-foreground" }, xe = ["min", "max"], Se = { class: "flex flex-col gap-2" }, U = {
-	key: 2,
-	class: "glass-card flex items-center gap-2 rounded-card px-3 py-2"
-}, Ce = ["title"], we = ["aria-label"], W = /* @__PURE__ */ _({
+}, 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({
 	__name: "EasingPicker",
 	props: /* @__PURE__ */ y({
 		mode: { default: "bezier" },
@@ -126,19 +129,19 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(s) {
-		let c = s, _ = T(s, "modelValue"), { mode: y, preset: O, points: k, presetNames: A, selectPreset: j, setHandle: M, steps: N, term: F, terms: I, easingFn: L, readout: R, value: W, handlesSvg: G, bezierPathD: Te, stepPathD: Ee, viewBox: K, progress: q, playTravel: J, stopTravel: De } = z({
-			initialMode: c.mode,
-			initialPreset: c.preset,
-			initialSteps: c.steps,
-			initialTerm: c.term
+	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
 		});
-		E(() => c.mode, (e) => {
+		D(() => l.mode, (e) => {
 			y.value = e;
-		}), E(W, (e) => _.value = e, { immediate: !0 }), ee(De);
-		let Y = ne("svgEl"), X = x(null);
-		function Z(e) {
-			let t = Y.value;
+		}), D(H, (e) => v.value = e, { immediate: !0 }), b(q);
+		let J = te("svgEl"), Y = S(null);
+		function X(e) {
+			let t = J.value;
 			if (!t) return {
 				x: 0,
 				y: 0
@@ -151,63 +154,68 @@ var ce = ["data-mode"], le = { 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: I(r.b * e.clientX + r.d * e.clientY + r.f)
 			};
 		}
-		function Oe(e) {
+		function De(e) {
 			if (y.value !== "bezier") return;
-			let { x: t, y: n } = Z(e), r = e.pointerType === "touch" ? oe : ae, i = [{
-				x: k.value[0],
-				y: k.value[1]
+			let { x: t, y: n } = X(e), r = e.pointerType === "touch" ? re : ne, i = [{
+				x: A.value[0],
+				y: A.value[1]
 			}, {
-				x: k.value[2],
-				y: k.value[3]
+				x: A.value[2],
+				y: A.value[3]
 			}], a = null, o = Infinity;
 			for (let e = 0; e < 2; e++) {
 				let s = Math.hypot(i[e].x - t, i[e].y - n);
 				s < r && s < o && (o = s, a = e);
 			}
-			a !== null && (e.preventDefault(), X.value = a, e.currentTarget.setPointerCapture(e.pointerId));
+			a !== null && (e.preventDefault(), Y.value = a, e.currentTarget.setPointerCapture(e.pointerId));
 		}
-		function ke(e) {
-			if (X.value === null) return;
-			let { x: t, y: n } = Z(e);
-			M(X.value, t, n);
+		function Oe(e) {
+			if (Y.value === null) return;
+			let { x: t, y: n } = X(e);
+			N(Y.value, t, n);
 		}
-		function Q() {
-			X.value = null;
+		function Z() {
+			Y.value = null;
 		}
-		let $ = x(!1);
-		async function Ae() {
+		let Q = S(!1);
+		async function ke() {
 			try {
-				await navigator.clipboard.writeText(R.value), $.value = !0, setTimeout(() => $.value = !1, se);
+				await navigator.clipboard.writeText(z.value), Q.value = !0, setTimeout(() => Q.value = !1, ie);
 			} catch {}
 		}
-		let je = u(() => y.value === "bezier" ? `0 ${K.value.minY} 1 ${K.value.height}` : "-0.05 -0.1 1.1 1.2");
-		return (c, u) => (b(), p("div", {
+		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],
+			set: (e) => {
+				P.value = e[0] ?? P.value;
+			}
+		});
+		return (l, d) => (x(), m("div", {
 			class: "grid gap-4 lg:grid-cols-[1fr_18rem]",
-			"data-mode": w(y),
+			"data-mode": T(y),
 			"data-testid": "easing-picker",
 			style: { "--easing-curve-accent": "var(--motion-accent, var(--viz-legendre))" }
-		}, [m("div", le, [(b(), p("svg", {
+		}, [h("div", oe, [(x(), m("svg", {
 			ref_key: "svgEl",
-			ref: Y,
+			ref: J,
 			class: "block w-full touch-none select-none",
-			viewBox: je.value,
+			viewBox: Ae.value,
 			preserveAspectRatio: "xMidYMid meet",
 			style: {
 				"aspect-ratio": "1",
 				"block-size": "clamp(200px, 38cqi, 320px)",
 				"margin-inline": "auto"
 			},
-			"aria-label": s.label,
+			"aria-label": c.label,
 			role: "img",
-			onPointerdown: Oe,
-			onPointermove: ke,
-			onPointerup: Q,
-			onPointercancel: Q
+			onPointerdown: De,
+			onPointermove: Oe,
+			onPointerup: Z,
+			onPointercancel: Z
 		}, [
-			u[4] ||= m("rect", {
+			d[4] ||= h("rect", {
 				x: "0",
 				y: "0",
 				width: "1",
@@ -216,7 +224,7 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				class: "stroke-border",
 				"stroke-width": "0.012"
 			}, null, -1),
-			u[5] ||= m("line", {
+			d[5] ||= h("line", {
 				x1: "0",
 				y1: "1",
 				x2: "1",
@@ -225,11 +233,11 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				"stroke-width": "0.006",
 				"stroke-dasharray": "0.02 0.015"
 			}, null, -1),
-			(b(), p(l, null, S([
+			(x(), m(u, null, C([
 				.25,
 				.5,
 				.75
-			], (e) => m("line", {
+			], (e) => h("line", {
 				key: "gx" + e,
 				x1: e,
 				y1: "0",
@@ -237,12 +245,12 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				y2: "1",
 				class: "stroke-border/40",
 				"stroke-width": "0.006"
-			}, null, 8, de)), 64)),
-			(b(), p(l, null, S([
+			}, null, 8, ce)), 64)),
+			(x(), m(u, null, C([
 				.25,
 				.5,
 				.75
-			], (e) => m("line", {
+			], (e) => h("line", {
 				key: "gy" + e,
 				x1: "0",
 				y1: e,
@@ -250,8 +258,8 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				y2: e,
 				class: "stroke-border/40",
 				"stroke-width": "0.006"
-			}, null, 8, B)), 64)),
-			u[6] ||= m("text", {
+			}, null, 8, le)), 64)),
+			d[6] ||= h("text", {
 				x: "0.05",
 				y: "0.95",
 				class: "fill-muted-foreground/60",
@@ -261,7 +269,7 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				},
 				"text-anchor": "start"
 			}, "0", -1),
-			u[7] ||= m("text", {
+			d[7] ||= h("text", {
 				x: "0.95",
 				y: "0.12",
 				class: "fill-muted-foreground/60",
@@ -271,151 +279,155 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 				},
 				"text-anchor": "end"
 			}, "1", -1),
-			w(y) === "bezier" ? (b(), p(l, { key: 0 }, [
-				m("line", {
+			T(y) === "bezier" ? (x(), m(u, { key: 0 }, [
+				h("line", {
 					x1: 0,
 					y1: 1,
-					x2: w(G)[0].x,
-					y2: w(G)[0].y,
+					x2: T(U)[0].x,
+					y2: T(U)[0].y,
 					class: "stroke-muted-foreground/50",
 					"stroke-width": "0.02",
 					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, V),
-				m("line", {
+				}, null, 8, ue),
+				h("line", {
 					x1: 1,
 					y1: 0,
-					x2: w(G)[1].x,
-					y2: w(G)[1].y,
+					x2: T(U)[1].x,
+					y2: T(U)[1].y,
 					class: "stroke-muted-foreground/50",
 					"stroke-width": "0.02",
 					"stroke-dasharray": "0.03 0.02"
-				}, null, 8, H),
-				m("path", {
-					d: w(Te),
+				}, null, 8, de),
+				h("path", {
+					d: T(Te),
 					fill: "none",
 					class: "stroke-(--easing-curve-accent)",
 					"stroke-width": "0.035",
 					"stroke-linecap": "round"
 				}, null, 8, fe)
-			], 64)) : (b(), p("path", {
+			], 64)) : (x(), m("path", {
 				key: 1,
-				d: w(Ee),
+				d: T(Ee),
 				fill: "none",
 				class: "stroke-(--easing-curve-accent)",
 				"stroke-width": "0.025",
 				"stroke-linejoin": "miter",
 				"stroke-linecap": "butt"
 			}, null, 8, pe)),
-			u[8] ||= m("circle", {
+			d[8] ||= h("circle", {
 				cx: "0",
 				cy: "1",
 				r: "0.018",
 				class: "fill-muted-foreground/50"
 			}, null, -1),
-			u[9] ||= m("circle", {
+			d[9] ||= h("circle", {
 				cx: "1",
 				cy: "0",
 				r: "0.018",
 				class: "fill-muted-foreground/50"
 			}, null, -1),
-			w(y) === "bezier" ? (b(), p(l, { key: 2 }, [m("circle", {
-				cx: w(G)[0].x,
-				cy: w(G)[0].y,
+			T(y) === "bezier" ? (x(), m(u, { key: 2 }, [h("circle", {
+				cx: T(U)[0].x,
+				cy: T(U)[0].y,
 				r: "0.04",
 				class: "fill-foreground stroke-background",
 				"stroke-width": "0.02",
 				style: { cursor: "move" }
-			}, null, 8, me), m("circle", {
-				cx: w(G)[1].x,
-				cy: w(G)[1].y,
+			}, 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)) : f("", !0),
-			s.playback ? (b(), p("circle", {
+			}, null, 8, he)], 64)) : p("", !0),
+			c.playback ? (x(), m("circle", {
 				key: 3,
-				cx: w(q),
-				cy: 1 - w(L)(w(q)),
+				cx: T(G),
+				cy: 1 - T(R)(T(G)),
 				r: "0.03",
 				class: "fill-(--easing-curve-accent)"
-			}, null, 8, ge)) : f("", !0)
-		], 40, ue))]), m("div", _e, [
-			w(y) === "bezier" ? (b(), p("div", ve, [u[10] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Preset", -1), g(w(o), {
-				"model-value": w(O),
-				"onUpdate:modelValue": u[0] ||= (e) => w(j)(String(e))
+			}, 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))
 			}, {
-				default: D(() => [g(w(n), null, {
-					default: D(() => [g(w(i), { placeholder: "Pick a curve" })]),
+				default: O(() => [_(T(n), null, {
+					default: O(() => [_(T(i), { placeholder: "Pick a curve" })]),
 					_: 1
-				}), g(w(r), null, {
-					default: D(() => [(b(!0), p(l, null, S(w(A), (e) => (b(), d(w(a), {
+				}), _(T(r), null, {
+					default: O(() => [(x(!0), m(u, null, C(T(j), (e) => (x(), f(T(a), {
 						key: e,
 						value: e
 					}, {
-						default: D(() => [h(C(e), 1)]),
+						default: O(() => [g(w(e), 1)]),
 						_: 2
 					}, 1032, ["value"]))), 128))]),
 					_: 1
 				})]),
 				_: 1
-			}, 8, ["model-value"])])) : (b(), p(l, { key: 1 }, [m("div", ye, [m("span", be, "Steps (n) — " + C(w(N)), 1), ie(m("input", {
-				"onUpdate:modelValue": u[1] ||= (e) => v(N) ? N.value = e : null,
-				type: "range",
-				min: w(1),
-				max: w(12),
-				step: "1",
-				class: "w-full accent-(--easing-curve-accent)",
-				"aria-label": "Step count"
-			}, null, 8, xe), [[
-				re,
-				w(N),
-				void 0,
-				{ number: !0 }
-			]])]), m("div", Se, [u[11] ||= m("span", { class: "text-mono-caption text-muted-foreground" }, "Jump term", -1), g(w(o), {
-				"model-value": w(F),
-				"onUpdate:modelValue": u[2] ||= (e) => F.value = String(e)
+			}, 8, ["model-value"])])) : (x(), m(u, { key: 1 }, [h("div", ye, [h("span", be, "Steps (n) — " + w(T(P)), 1), _(T(s), {
+				modelValue: $.value,
+				"onUpdate:modelValue": d[1] ||= (e) => $.value = e,
+				min: T(1),
+				max: T(12),
+				step: 1,
+				"aria-label": "Step count",
+				"data-testid": "easing-steps-n"
+			}, null, 8, [
+				"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)
 			}, {
-				default: D(() => [g(w(n), null, {
-					default: D(() => [g(w(i), { placeholder: "Pick a jump term" })]),
+				default: O(() => [_(T(n), { "aria-label": "Jump term" }, {
+					default: O(() => [_(T(i), { placeholder: "Pick a jump term" })]),
 					_: 1
-				}), g(w(r), null, {
-					default: D(() => [(b(!0), p(l, null, S(w(I), (e) => (b(), d(w(a), {
+				}), _(T(r), null, {
+					default: O(() => [(x(!0), m(u, null, C(T(L), (e) => (x(), f(T(a), {
 						key: e,
 						value: e
 					}, {
-						default: D(() => [h(C(e), 1)]),
+						default: O(() => [g(w(e), 1)]),
 						_: 2
 					}, 1032, ["value"]))), 128))]),
 					_: 1
 				})]),
 				_: 1
 			}, 8, ["model-value"])])], 64)),
-			s.readout ? (b(), p("div", U, [m("code", {
+			c.readout ? (x(), m("div", {
+				key: 2,
+				class: "glass-card flex items-center gap-2 rounded-card px-3 py-2",
+				"data-reparse-ok": T(B),
+				"data-testid": "easing-readout"
+			}, [h("code", {
 				class: "min-w-0 flex-1 truncate text-xs text-foreground",
-				title: w(R)
-			}, C(w(R)), 9, Ce), m("button", {
+				title: T(z)
+			}, w(T(z)), 9, Ce), h("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": $.value ? "Copied" : "Copy curve literal",
-				onClick: Ae
-			}, [$.value ? (b(), d(w(t), {
+				"aria-label": Q.value ? "Copied" : "Copy curve literal",
+				onClick: ke
+			}, [Q.value ? (x(), f(T(e), {
 				key: 0,
 				class: "size-4 text-(--easing-curve-accent)"
-			})) : (b(), d(w(e), {
+			})) : (x(), f(T(t), {
 				key: 1,
 				class: "size-4"
-			}))], 8, we)])) : f("", !0),
-			s.playback ? (b(), p("button", {
+			}))], 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: u[3] ||= (...e) => w(J) && w(J)(...e)
-			}, C(w(y) === "steps" ? "Climb the staircase" : "Trace the curve"), 1)) : f("", !0),
-			te(c.$slots, "footer", { value: w(W) })
-		])], 8, ce));
+				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));
 	}
-}), G = /* @__PURE__ */ _({
+}), U = /* @__PURE__ */ v({
 	__name: "EasingConfigurator",
 	props: /* @__PURE__ */ y({
 		label: { default: "Easing" },
@@ -430,16 +442,16 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = T(e, "modelValue");
-		return (n, r) => (b(), d(w(s), {
+		let t = E(e, "modelValue");
+		return (n, r) => (x(), f(T(c), {
 			label: e.label,
 			sub: e.name
 		}, {
-			default: D(() => [g(w(c), {
+			default: O(() => [_(T(l), {
 				label: "Curve",
 				name: t.value?.css
 			}, {
-				default: D(() => [g(W, {
+				default: O(() => [_(H, {
 					modelValue: t.value,
 					"onUpdate:modelValue": r[0] ||= (e) => t.value = e,
 					mode: e.mode,
@@ -460,4 +472,4 @@ var ce = ["data-mode"], le = { class: "glass-card relative overflow-hidden round
 	}
 });
 //#endregion
-export { G as EasingConfigurator, W as EasingPicker, z as useEasingPicker };
+export { U as EasingConfigurator, H as EasingPicker, V as useEasingPicker };