@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/handmark.d.ts

@@ -1 +1 @@
-export * from "./components/custom/handmark";
+export * from "./components/handmark";

package/dist/handmark.js

@@ -1,8 +1,8 @@
-import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { n as t } from "./prng-B5tIXTtj.js";
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as t } from "./prng-Dz2_9RJu.js";
 import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, unref as h, useId as g, watch as _ } from "vue";
 import { catmullRomToBezier as v, ellipsePoints as y, perturbPoints as b, perturbPointsClosed as x, pointsToLinear as S, useLineBoil as C, wobbleLinePoints as w } from "@mkbabb/pencil-boil";
-//#region src/components/custom/handmark/brush.ts
+//#region src/components/handmark/brush.ts
 var T = {
 	pen: {
 		weight: 6,
@@ -196,57 +196,59 @@ var T = {
 	};
 }, O = 100, k = 40, A = .06, j = .22, M = .66, N = 1.618033988749895, P = 2.5, F = .05, I = .12;
 //#endregion
-//#region src/components/custom/handmark/geometry.ts
+//#region src/components/handmark/noise.ts
 function L(e) {
 	return e * e * e * (e * (e * 6 - 15) + 10);
 }
-function R(e, n, r, i, a) {
-	let o = r - e;
-	if (o <= 0) return [[e, n], [r, n]];
-	let s = i >>> 0, c = o * F, l = t(s), u = 0, d = Array.from({ length: 4 }, (e, n) => {
-		let r = l() * 10, i = P * N ** +n, a = (1 / N) ** n;
-		u += a;
-		let o = t((s ^ Math.imul(2654435769, n + 1)) >>> 0), c = /* @__PURE__ */ new Map(), d = (e) => {
-			let t = c.get(e);
-			return t === void 0 && (t = o(), c.set(e, t)), t;
+function R(e, n, r, i, a, o = 1) {
+	let s = r - e;
+	if (s <= 0) return [[e, n], [r, n]];
+	let c = i >>> 0, l = s * F * o, u = t(c), d = 0, f = Array.from({ length: 4 }, (e, n) => {
+		let r = u() * 10, i = P * N ** +n, a = (1 / N) ** n;
+		d += a;
+		let o = t((c ^ Math.imul(2654435769, n + 1)) >>> 0), s = /* @__PURE__ */ new Map(), l = (e) => {
+			let t = s.get(e);
+			return t === void 0 && (t = o(), s.set(e, t)), t;
 		};
 		return {
 			phase: r,
 			freq: i,
 			weight: a,
 			vnoise: (e) => {
-				let t = Math.floor(e), n = e - t, r = d(t);
-				return r + (d(t + 1) - r) * L(n);
+				let t = Math.floor(e), n = e - t, r = l(t);
+				return r + (l(t + 1) - r) * L(n);
 			}
 		};
-	}), f = Math.max(6, a), p = [];
-	for (let t = 0; t <= f; t++) {
-		let r = t / f, i = e + o * r, a = 0;
-		for (let e of d) a += e.weight * (e.vnoise(r * e.freq + e.phase) * 2 - 1);
-		a /= u;
-		let s = 1;
-		r < .12 ? s = .5 - .5 * Math.cos(r / I * Math.PI) : r > .88 && (s = .5 - .5 * Math.cos((1 - r) / I * Math.PI)), p.push([i, n + c * a * s]);
+	}), p = Math.max(6, a), m = [];
+	for (let t = 0; t <= p; t++) {
+		let r = t / p, i = e + s * r, a = 0;
+		for (let e of f) a += e.weight * (e.vnoise(r * e.freq + e.phase) * 2 - 1);
+		a /= d;
+		let o = 1;
+		r < .12 ? o = .5 - .5 * Math.cos(r / I * Math.PI) : r > .88 && (o = .5 - .5 * Math.cos((1 - r) / I * Math.PI)), m.push([i, n + l * a * o]);
 	}
-	return p;
+	return m;
 }
-function z(e, t, n = null, r = null, i = !1) {
-	let a = n ? n.x : 4, o = n ? n.x + n.w : 96, s = n ? n.y + n.h / 2 : 40 / 2, c = n ? n.y + n.h * .92 : r == null ? 32 : 40 * (r + A), l = t.seed ?? 1, u = t.segments ?? 9, d = (e, n, r, i, a = 0) => w(e, n, r, i, {
+//#endregion
+//#region src/components/handmark/geometry.ts
+function z(e, t, n = null, r = null, i = !1, a = 40, o = 1) {
+	let s = n == null && (e === "underline" || e === "strikethrough" || e === "highlight") ? a : 40, c = n ? n.x : 4, l = n ? n.x + n.w : 96, u = n ? n.y + n.h / 2 : s / 2, d = n ? n.y + n.h * .92 : r == null ? s - 8 : s * (r + A), f = t.seed ?? 1, p = t.segments ?? 9, m = (e, n, r, i, a = 0) => w(e, n, r, i, {
 		...t,
-		seed: l + a
+		seed: f + a
 	});
 	switch (e) {
 		case "underline": return {
-			lines: [i ? R(a, c, o, l, u) : d(a, c, o, c)],
+			lines: [i ? R(c, d, l, f, p, o) : m(c, d, l, d)],
 			closed: !1
 		};
 		case "strikethrough": return {
-			lines: [d(a, s, o, s)],
+			lines: [m(c, u, l, u)],
 			closed: !1
 		};
 		case "highlight": {
-			let e = n ? s : 40 * ((r ?? M) - j);
+			let e = n ? u : s * ((r ?? M) - j);
 			return {
-				lines: [d(a, e, o, e)],
+				lines: [m(c, e, l, e)],
 				closed: !1
 			};
 		}
@@ -254,21 +256,21 @@ function z(e, t, n = null, r = null, i = !1) {
 			let e = n ? n.y : 4, t = n ? n.y + n.h : 36;
 			return {
 				lines: [
-					d(a, e, o, e, 0),
-					d(o, e, o, t, 1),
-					d(o, t, a, t, 2),
-					d(a, t, a, e, 3)
+					m(c, e, l, e, 0),
+					m(l, e, l, t, 1),
+					m(l, t, c, t, 2),
+					m(c, t, c, e, 3)
 				],
 				closed: !1
 			};
 		}
 		case "bracket": {
-			let e = n ? n.y : 4, t = n ? n.y + n.h : 36, r = (o - a) * .22;
+			let e = n ? n.y : 4, t = n ? n.y + n.h : 36, r = (l - c) * .22;
 			return {
 				lines: [
-					d(a + r, e, a, e, 0),
-					d(a, e, a, t, 1),
-					d(a, t, a + r, t, 2)
+					m(c + r, e, c, e, 0),
+					m(c, e, c, t, 1),
+					m(c, t, c + r, t, 2)
 				],
 				closed: !1
 			};
@@ -282,7 +284,7 @@ function z(e, t, n = null, r = null, i = !1) {
 			closed: !1
 		};
 		default: return {
-			lines: [d(a, c, o, c)],
+			lines: [m(c, d, l, d)],
 			closed: !1
 		};
 	}
@@ -298,12 +300,12 @@ function V(e, t = !1) {
 	return e.map((e) => t ? S(e) : v(e)).join(" ");
 }
 //#endregion
-//#region src/components/custom/handmark/freehand.ts
-var H = (e, t) => [e[0] + t[0], e[1] + t[1]], U = (e, t) => [e[0] - t[0], e[1] - t[1]], W = (e, t) => [e[0] * t, e[1] * t], ee = (e) => [-e[0], -e[1]], G = (e) => [e[1], -e[0]], te = (e, t) => e[0] * t[0] + e[1] * t[1], ne = (e) => e[0] * e[0] + e[1] * e[1], K = (e, t) => ne(U(e, t)), re = (e, t) => Math.hypot(e[1] - t[1], e[0] - t[0]), q = (e) => W(e, 1 / (Math.hypot(e[0], e[1]) || 1)), J = (e, t, n) => H(e, W(U(t, e), n)), Y = (e, t) => W(H(e, t), .5), X = (e, t, n) => {
+//#region src/components/handmark/freehand.ts
+var H = (e, t) => [e[0] + t[0], e[1] + t[1]], U = (e, t) => [e[0] - t[0], e[1] - t[1]], W = (e, t) => [e[0] * t, e[1] * t], ee = (e) => [-e[0], -e[1]], G = (e) => [e[1], -e[0]], te = (e, t) => e[0] * t[0] + e[1] * t[1], ne = (e) => e[0] * e[0] + e[1] * e[1], K = (e, t) => ne(U(e, t)), re = (e, t) => Math.hypot(e[1] - t[1], e[0] - t[0]), ie = (e) => W(e, 1 / (Math.hypot(e[0], e[1]) || 1)), q = (e, t, n) => H(e, W(U(t, e), n)), J = (e, t) => W(H(e, t), .5), Y = (e, t, n) => {
 	let r = Math.sin(n), i = Math.cos(n), a = e[0] - t[0], o = e[1] - t[1];
 	return [a * i - o * r + t[0], a * r + o * i + t[1]];
-}, { min: Z, PI: ie } = Math, Q = ie + 1e-4, ae = (e) => e;
-function oe(e, t = {}) {
+}, { min: X, PI: ae } = Math, Z = ae + 1e-4, oe = (e) => e;
+function se(e, t = {}) {
 	let { streamline: n = .5, size: r = 16, last: i = !1 } = t;
 	if (e.length === 0) return [];
 	let a = .15 + (1 - n) * .85, o = e.map((e) => [
@@ -313,7 +315,7 @@ function oe(e, t = {}) {
 	]);
 	if (o.length === 2) {
 		let e = o[1];
-		o[1] = J(o[0], e, .5), o.push(e);
+		o[1] = q(o[0], e, .5), o.push(e);
 	}
 	o.length === 1 && o.push([...H(o[0], [1, 1]), ...o[0].slice(2)]);
 	let s = [{
@@ -324,7 +326,7 @@ function oe(e, t = {}) {
 		runningLength: 0
 	}], c = !1, l = 0, u = s[0], d = o.length - 1;
 	for (let e = 1; e < o.length; e++) {
-		let t = i && e === d ? [o[e][0], o[e][1]] : J(u.point, [o[e][0], o[e][1]], a);
+		let t = i && e === d ? [o[e][0], o[e][1]] : q(u.point, [o[e][0], o[e][1]], a);
 		if (K(u.point, t) < 1e-4) continue;
 		let n = re(t, u.point);
 		if (l += n, e < d && !c) {
@@ -334,33 +336,33 @@ function oe(e, t = {}) {
 		u = {
 			point: t,
 			pressure: o[e][2] >= 0 ? o[e][2] : .5,
-			vector: q(U(u.point, t)),
+			vector: ie(U(u.point, t)),
 			distance: n,
 			runningLength: l
 		}, s.push(u);
 	}
 	return s.length > 0 && (s[0].vector = s[1]?.vector ?? [0, 0]), s;
 }
-function se(e, t = {}) {
-	let { size: n = 16, smoothing: r = .5, thinning: i = .5, simulatePressure: a = !0, easing: o = ae, start: s = {}, end: c = {}, last: l = !1 } = t, { cap: u = !0, easing: d = (e) => e * (2 - e) } = s, { cap: f = !0, easing: p = (e) => --e * e * e + 1 } = c;
+function ce(e, t = {}) {
+	let { size: n = 16, smoothing: r = .5, thinning: i = .5, simulatePressure: a = !0, easing: o = oe, start: s = {}, end: c = {}, last: l = !1 } = t, { cap: u = !0, easing: d = (e) => e * (2 - e) } = s, { cap: f = !0, easing: p = (e) => --e * e * e + 1 } = c;
 	if (e.length === 0 || n <= 0) return [];
 	let m = e[e.length - 1].runningLength, h = s.taper === !1 ? 0 : s.taper === !0 ? Math.max(n, m) : s.taper ?? 0, g = c.taper === !1 ? 0 : c.taper === !0 ? Math.max(n, m) : c.taper ?? 0, _ = (n * r) ** 2, v = [], y = [], b = [], x = e.slice(0, 10).reduce((e, t) => {
 		let r = t.pressure;
 		if (a) {
-			let i = Z(1, t.distance / n);
-			r = Z(1, e + (Z(1, 1 - i) - e) * (i * .275));
+			let i = X(1, t.distance / n);
+			r = X(1, e + (X(1, 1 - i) - e) * (i * .275));
 		}
 		return (e + r) / 2;
-	}, e[0].pressure), S = ce(n, i, e[e.length - 1].pressure, o), C, w = e[0].vector, T = e[0].point, E = T, D = T, O = E, k = !1;
+	}, e[0].pressure), S = Q(n, i, e[e.length - 1].pressure, o), C, w = e[0].vector, T = e[0].point, E = T, D = T, O = E, k = !1;
 	for (let t = 0; t < e.length; t++) {
 		let { pressure: r } = e[t], { point: s, vector: c, distance: l, runningLength: u } = e[t];
 		if (t < e.length - 1 && m - u < 3) continue;
 		if (i) {
 			if (a) {
-				let e = Z(1, l / n), t = Z(1, 1 - e);
-				r = Z(1, x + (t - x) * (e * .275));
+				let e = X(1, l / n), t = X(1, 1 - e);
+				r = X(1, x + (t - x) * (e * .275));
 			}
-			S = ce(n, i, r, o);
+			S = Q(n, i, r, o);
 		} else S = n / 2;
 		C === void 0 && (C = S);
 		let f = u < h ? d(u / h) : 1, A = m - u < g ? p((m - u) / g) : 1;
@@ -368,7 +370,7 @@ function se(e, t = {}) {
 		let j = (t < e.length - 1 ? e[t + 1] : e[t]).vector, M = t < e.length - 1 ? te(c, j) : 1, N = te(c, w) < 0 && !k, P = M !== null && M < .2;
 		if (N || P) {
 			let e = W(G(w), S);
-			for (let t = 0; t <= 1; t += .07692307692307693) D = X(U(s, e), s, Q * t), v.push(D), O = X(H(s, e), s, Q * -t), y.push(O);
+			for (let t = 0; t <= 1; t += .07692307692307693) D = Y(U(s, e), s, Z * t), v.push(D), O = Y(H(s, e), s, Z * -t), y.push(O);
 			T = D, E = O, P && (k = !0);
 			continue;
 		}
@@ -377,19 +379,19 @@ function se(e, t = {}) {
 			v.push(U(s, e)), y.push(H(s, e));
 			continue;
 		}
-		let F = W(G(J(j, c, M)), S);
+		let F = W(G(q(j, c, M)), S);
 		D = U(s, F), (t <= 1 || K(T, D) > _) && (v.push(D), T = D), O = H(s, F), (t <= 1 || K(E, O) > _) && (y.push(O), E = O), x = r, w = c, b.push(S);
 	}
 	let A = e[0].point.slice(0, 2), j = e.length > 1 ? e[e.length - 1].point.slice(0, 2) : H(e[0].point, [1, 1]), M = [], N = [];
 	if (e.length === 1) {
 		if (!(h || g) || l) {
-			let e = H(A, W(q(G(U(A, j))), -(C ?? S))), t = [];
-			for (let n = 1 / 13, r = n; r <= 1; r += n) t.push(X(e, A, Q * 2 * r));
+			let e = H(A, W(ie(G(U(A, j))), -(C ?? S))), t = [];
+			for (let n = 1 / 13, r = n; r <= 1; r += n) t.push(Y(e, A, Z * 2 * r));
 			return t;
 		}
 	} else {
 		if (!(h || g && e.length === 1)) if (u) for (let e = 1 / 13, t = e; t <= 1; t += e) {
-			let e = X(y[0], A, Q * t);
+			let e = Y(y[0], A, Z * t);
 			M.push(e);
 		}
 		else {
@@ -400,27 +402,27 @@ function se(e, t = {}) {
 		if (g || h && e.length === 1) N.push(j);
 		else if (f) {
 			let e = H(j, W(t, S));
-			for (let t = 1 / 29, n = t; n < 1; n += t) N.push(X(e, j, Q * 3 * n));
+			for (let t = 1 / 29, n = t; n < 1; n += t) N.push(Y(e, j, Z * 3 * n));
 		} else N.push(H(j, W(t, S)), H(j, W(t, S * .99)), U(j, W(t, S * .99)), U(j, W(t, S)));
 	}
 	return v.concat(N, y.reverse(), M);
 }
-function ce(e, t, n, r = ae) {
+function Q(e, t, n, r = oe) {
 	if (!t) return e / 2;
 	let i = n;
 	return i < 0 && (i = 0), i > 1 && (i = 1), e * r(.5 - t * (.5 - i)) * .5 + e / 2 * (1 - Math.abs(t));
 }
 function le(e, t = {}) {
-	return se(oe(e, t), t);
+	return ce(se(e, t), t);
 }
 function ue(e, t = !0) {
 	if (e.length < 4) return "";
-	let n = e[0], r = e[1], i = e[2], a = `M${n[0].toFixed(2)},${n[1].toFixed(2)} Q${r[0].toFixed(2)},${r[1].toFixed(2)} ${Y(r, i)[0].toFixed(2)},${Y(r, i)[1].toFixed(2)} T`;
-	for (let t = 2, i = e.length - 1; t < i; t++) n = e[t], r = e[t + 1], a += `${Y(n, r)[0].toFixed(2)},${Y(n, r)[1].toFixed(2)} `;
+	let n = e[0], r = e[1], i = e[2], a = `M${n[0].toFixed(2)},${n[1].toFixed(2)} Q${r[0].toFixed(2)},${r[1].toFixed(2)} ${J(r, i)[0].toFixed(2)},${J(r, i)[1].toFixed(2)} T`;
+	for (let t = 2, i = e.length - 1; t < i; t++) n = e[t], r = e[t + 1], a += `${J(n, r)[0].toFixed(2)},${J(n, r)[1].toFixed(2)} `;
 	return t && (a += "Z"), a;
 }
 //#endregion
-//#region src/components/custom/handmark/texture.ts
+//#region src/components/handmark/texture.ts
 function de(e, t, n) {
 	if (t.grain <= 0 && t.grainScale <= 0) return "";
 	let r = (n ^ 34283) & 65535, i = (.55 - t.grain * .42).toFixed(3), a = t.grain > 0 ? "in" : "over";
@@ -439,7 +441,7 @@ function $(e) {
 	return e.grain > 0 || e.grainScale > 0;
 }
 //#endregion
-//#region src/components/custom/handmark/ink.ts
+//#region src/components/handmark/ink.ts
 function fe(e) {
 	let t = 0;
 	for (let n = 1; n < e.length; n++) t += Math.hypot(e[n][0] - e[n - 1][0], e[n][1] - e[n - 1][1]);
@@ -511,9 +513,15 @@ function ye(e, n, r, i, a, o = !1) {
 					taper: n.taper.end,
 					easing: ve(n.taper.ease)
 				}
-			});
-			s.push({
-				d: ue(o),
+			}), d = ue(o);
+			o.length < 4 || d === "" ? s.push({
+				d: c(l),
+				stroke: i,
+				opacity: u,
+				blend: n.blend,
+				cap: n.cap
+			}) : s.push({
+				d,
 				fill: i,
 				opacity: u,
 				blend: n.blend,
@@ -535,13 +543,13 @@ function ye(e, n, r, i, a, o = !1) {
 	};
 }
 //#endregion
-//#region src/components/custom/handmark/composables/useHandMark.ts
+//#region src/components/handmark/composables/useHandMark.ts
 var be = {
 	currentFrame: f(0),
 	start: () => {},
 	stop: () => {}
 };
-function xe(e, t, n = null) {
+function xe(e, t, n = null, r = 40) {
 	return {
 		brush: e.brush ?? "pen",
 		shape: e.shape ?? "underline",
@@ -555,22 +563,27 @@ function xe(e, t, n = null) {
 		segments: e.segments ?? null,
 		jagged: e.jagged ?? !1,
 		natural: e.natural ?? e.brush === "boil",
+		amplitude: e.amplitude ?? null,
 		box: e.box ?? null,
 		path: e.path ?? null,
 		filterId: t,
-		baselineFrac: n
+		baselineFrac: n,
+		vbH: r
 	};
 }
 function Se(e) {
 	let t = r(() => {
 		let t = { ...e.value.overrides ?? {} };
 		return e.value.roughness != null && (t.roughness = e.value.roughness), e.value.segments != null && (t.segments = e.value.segments), E(e.value.brush, t);
-	}), n = r(() => $(t.value)), i = r(() => z(e.value.shape, {
-		roughness: t.value.roughness,
-		segments: t.value.segments,
-		seed: e.value.seed,
-		jagged: e.value.jagged
-	}, e.value.box, e.value.baselineFrac, e.value.natural)), a = r(() => e.value.animation === "boil" || e.value.animation === "draw-then-boil"), o = r(() => e.value.animation === "draw-on" || e.value.animation === "draw-then-boil"), s = r(() => n.value ? "clip" : "dashoffset"), c = f(!1), l = e.value.animation === "boil" || e.value.animation === "draw-then-boil" ? C(() => a.value && c.value ? e.value.boilFrames : 1, () => Math.max(16, 1e3 / e.value.boilFps)) : be, u = r(() => {
+	}), n = r(() => $(t.value)), i = r(() => {
+		let n = e.value.amplitude ?? t.value.wobble / 1.4;
+		return z(e.value.shape, {
+			roughness: t.value.roughness,
+			segments: t.value.segments,
+			seed: e.value.seed,
+			jagged: e.value.jagged
+		}, e.value.box, e.value.baselineFrac, e.value.natural, e.value.vbH, n);
+	}), a = r(() => e.value.animation === "boil" || e.value.animation === "draw-then-boil"), o = r(() => e.value.animation === "draw-on" || e.value.animation === "draw-then-boil"), s = r(() => n.value ? "clip" : "dashoffset"), c = f(!1), l = e.value.animation === "boil" || e.value.animation === "draw-then-boil" ? C(() => a.value && c.value ? e.value.boilFrames : 1, () => Math.max(16, 1e3 / e.value.boilFps)) : be, u = r(() => {
 		if (e.value.path) return e.value.path;
 		let n = i.value.lines;
 		if (a.value && c.value) {
@@ -604,7 +617,7 @@ function Se(e) {
 	};
 }
 //#endregion
-//#region src/components/custom/handmark/HandMark.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/handmark/HandMark.vue?vue&type=script&setup=true&lang.ts
 var Ce = [
 	"data-shape",
 	"data-behind",
@@ -638,31 +651,35 @@ var Ce = [
 			type: Boolean,
 			default: !1
 		},
+		amplitude: {},
 		natural: { type: Boolean },
 		box: {},
 		path: {},
 		points: {}
 	},
 	setup(e, { expose: t }) {
-		let o = e, v = `hm-${g().replace(/[^a-zA-Z0-9_-]/g, "")}`, y = f(null), { brush: b, fragment: x, grained: S, drawKind: C, draws: w, boils: T, boil: E, boilArmed: D } = Se(r(() => xe(o, v, y.value))), O = r(() => o.shape === "highlight"), k = r(() => o.path ?? null), A = f(!1), j = f(null), M = r(() => w.value ? `${C.value === "clip" ? "clip-path" : "stroke-dashoffset"} ${o.drawMs}ms cubic-bezier(.16,1,.3,1) ${o.drawDelayMs}ms` : "none");
-		function N() {
-			T.value && (D.value = !0, E.start());
+		let o = e, v = `hm-${g().replace(/[^a-zA-Z0-9_-]/g, "")}`, y = f(null), b = f(null), x = r(() => {
+			let e = o.box == null && (o.shape === "underline" || o.shape === "strikethrough" || o.shape === "highlight"), t = b.value;
+			return !e || t == null || t <= 0 ? 40 : 100 / t;
+		}), { brush: S, fragment: C, grained: w, drawKind: T, draws: E, boils: D, boil: O, boilArmed: k } = Se(r(() => xe(o, v, y.value, x.value))), A = r(() => o.shape === "highlight"), j = r(() => o.path ?? null), M = f(!1), N = f(null), P = null, F = r(() => E.value ? `${T.value === "clip" ? "clip-path" : "stroke-dashoffset"} ${o.drawMs}ms var(--ease-out-expo) ${o.drawDelayMs}ms` : "none");
+		function I() {
+			D.value && (k.value = !0, O.start());
 		}
-		function P() {
-			if (!w.value) {
-				N();
+		function L() {
+			if (!E.value) {
+				I();
 				return;
 			}
-			A.value = !1, j.value && j.value.offsetWidth, requestAnimationFrame(() => {
-				A.value = !0;
+			P !== null && cancelAnimationFrame(P), M.value = !1, N.value && N.value.offsetWidth, P = requestAnimationFrame(() => {
+				P = null, M.value = !0;
 			});
 		}
-		function F() {
-			o.animation === "draw-then-boil" && N();
+		function R() {
+			o.animation === "draw-then-boil" && I();
 		}
-		t({ play: P });
-		let I = r(() => o.box == null && (o.shape === "underline" || o.shape === "strikethrough" || o.shape === "highlight"));
-		function L(e) {
+		t({ play: L });
+		let z = r(() => o.box == null && (o.shape === "underline" || o.shape === "strikethrough" || o.shape === "highlight"));
+		function B(e) {
 			if (typeof document > "u" || typeof Range > "u") return null;
 			let t = Array.from(e.childNodes).filter((e) => e.nodeType === Node.ELEMENT_NODE ? e.tagName !== "svg" : e.nodeType === Node.TEXT_NODE && (e.textContent ?? "").trim().length > 0);
 			if (t.length === 0) return null;
@@ -671,80 +688,81 @@ var Ce = [
 			let r = n.getBoundingClientRect();
 			return n.detach?.(), r.height > 0 ? r : null;
 		}
-		function R() {
-			if (!I.value) return;
-			let e = j.value;
+		function V() {
+			if (!z.value) return;
+			let e = N.value;
 			if (!e) return;
-			let t = L(e);
+			let t = B(e);
 			if (!t) return;
 			let n = e.getBoundingClientRect();
 			if (n.height <= 0) return;
+			n.width > 0 && (b.value = n.width / n.height);
 			let r = (t.bottom - n.top) / n.height;
 			y.value = Math.min(1, Math.max(0, r));
 		}
-		let z = null;
-		function B() {
-			!I.value || !j.value || (R(), typeof document < "u" && document.fonts?.ready && document.fonts.ready.then(() => R()), typeof ResizeObserver < "u" && (z = new ResizeObserver(() => R()), z.observe(j.value)));
+		let H = null;
+		function U() {
+			!z.value || !N.value || (V(), typeof document < "u" && document.fonts?.ready && document.fonts.ready.then(() => V()), typeof ResizeObserver < "u" && (H = new ResizeObserver(() => V()), H.observe(N.value)));
 		}
-		let V = null;
+		let W = null;
 		u(() => {
-			B(), o.animation === "boil" && N(), o.appear === "mount" ? P() : o.appear === "visible" && typeof IntersectionObserver < "u" ? (V = new IntersectionObserver((e) => {
-				e.some((e) => e.isIntersecting) && (P(), V?.disconnect());
-			}, { threshold: .35 }), j.value && V.observe(j.value)) : o.appear === "visible" && P();
+			U(), o.animation === "boil" && I(), o.appear === "mount" ? L() : o.appear === "visible" && typeof IntersectionObserver < "u" ? (W = new IntersectionObserver((e) => {
+				e.some((e) => e.isIntersecting) && (L(), W?.disconnect());
+			}, { threshold: .01 }), N.value && W.observe(N.value)) : o.appear === "visible" && L();
 		}), l(() => {
-			V?.disconnect(), z?.disconnect(), E.stop();
+			P !== null && cancelAnimationFrame(P), W?.disconnect(), H?.disconnect(), O.stop();
 		}), _(() => o.animation, () => {
-			A.value = !1, D.value = !1;
+			M.value = !1, k.value = !1;
 		});
-		let H = {
+		let ee = {
 			"source-over": "normal",
 			multiply: "multiply",
 			darken: "darken",
 			screen: "screen"
 		};
-		function U(e) {
+		function G(e) {
 			return {
-				mixBlendMode: H[e],
-				transition: M.value
+				mixBlendMode: ee[e],
+				transition: F.value
 			};
 		}
 		return (t, r) => (d(), a("span", {
 			class: "hm",
 			ref_key: "root",
-			ref: j,
+			ref: N,
 			"data-shape": e.shape,
-			"data-behind": O.value,
-			"data-grained": h(S)
+			"data-behind": A.value,
+			"data-grained": h(w)
 		}, [m(t.$slots, "default", {}, void 0, !0), (d(), a("svg", {
 			class: "hm__svg",
-			viewBox: `0 0 ${h(100)} ${h(40)}`,
+			viewBox: `0 0 ${h(100)} ${x.value}`,
 			preserveAspectRatio: "none",
 			"aria-hidden": "true",
 			focusable: "false"
-		}, [h(x).filterId ? (d(), a("defs", {
+		}, [h(C).filterId ? (d(), a("defs", {
 			key: 0,
-			innerHTML: h(x).defs[0]
-		}, null, 8, Te)) : i("", !0), (d(!0), a(n, null, p(h(x).paths, (e, t) => (d(), a("path", {
+			innerHTML: h(C).defs[0]
+		}, null, 8, Te)) : i("", !0), (d(!0), a(n, null, p(h(C).paths, (e, t) => (d(), a("path", {
 			key: t,
 			class: s(["hm__path", {
-				drawn: A.value,
-				[`hm__path--${h(C)}`]: h(w)
+				drawn: M.value,
+				[`hm__path--${h(T)}`]: h(E)
 			}]),
-			d: k.value ?? e.d,
+			d: j.value ?? e.d,
 			pathLength: "1",
 			"vector-effect": "non-scaling-stroke",
 			stroke: e.stroke ?? "none",
 			fill: e.fill ?? "none",
-			"stroke-width": e.stroke ? h(b).weight : 0,
+			"stroke-width": e.stroke ? h(S).weight : 0,
 			"stroke-opacity": e.stroke ? e.opacity : void 0,
 			"fill-opacity": e.fill ? e.opacity : void 0,
 			"stroke-linecap": e.cap ?? "round",
 			"stroke-linejoin": "round",
-			filter: h(x).filterId ? `url(#${h(x).filterId})` : void 0,
-			style: c(U(e.blend)),
-			onTransitionend: F
+			filter: h(C).filterId ? `url(#${h(C).filterId})` : void 0,
+			style: c(G(e.blend)),
+			onTransitionend: R
 		}, null, 46, Ee))), 128))], 8, we))], 8, Ce));
 	}
-}), [["__scopeId", "data-v-d3137a58"]]);
+}), [["__scopeId", "data-v-1097f080"]]);
 //#endregion
-export { T as BRUSHES, De as HandMark, De as InkMark, A as UNDERLINE_GAP, k as VB_H, O as VB_W, B as boilLines, le as getStroke, oe as getStrokePoints, ue as getSvgPathFromStroke, de as grainFilter, $ as hasGrain, ye as ink, D as lerpBrush, R as naturalUnderlinePoints, xe as normalizeProps, E as resolveBrush, V as serialize, z as shapeGeom, Se as useHandMark };
+export { T as BRUSHES, De as HandMark, A as UNDERLINE_GAP, k as VB_H, O as VB_W, B as boilLines, le as getStroke, se as getStrokePoints, ue as getSvgPathFromStroke, de as grainFilter, $ as hasGrain, ye as ink, D as lerpBrush, R as naturalUnderlinePoints, xe as normalizeProps, E as resolveBrush, V as serialize, z as shapeGeom, Se as useHandMark };

package/dist/header-ribbon.d.ts

@@ -1 +1 @@
-export * from "./components/custom/header-ribbon";
+export * from "./components/header-ribbon";

package/dist/header-ribbon.js

@@ -1,63 +1,74 @@
-import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
 import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onBeforeUnmount as s, openBlock as c, ref as l, renderSlot as u } from "vue";
-//#region src/components/custom/header-ribbon/HeaderRibbon.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/header-ribbon/HeaderRibbon.vue?vue&type=script&setup=true&lang.ts
 var d = {
 	key: 0,
 	class: "pointer-events-auto shrink-0 mr-2"
-}, f = /* @__PURE__ */ e(/* @__PURE__ */ a({
+}, f = ["inert"], p = ["inert"], m = /* @__PURE__ */ e(/* @__PURE__ */ a({
 	__name: "HeaderRibbon",
 	props: {
-		position: { default: "left" },
+		placement: { default: "left" },
 		hideTimeoutMs: { default: 2e3 }
 	},
 	setup(e, { expose: a }) {
-		let f = e, p = l(!1), m = l(!1), h = l(!1), g = l(!1), _, v = t(() => p.value || m.value);
-		function y() {
-			_ != null && (clearTimeout(_), _ = void 0);
+		let m = e, h = l(!1), g = l(!1), _ = l(!1), v = l(!1), y = l(!1), b, x = t(() => h.value || g.value);
+		function S() {
+			b != null && (clearTimeout(b), b = void 0);
 		}
-		function b() {
-			g.value || (y(), _ = setTimeout(() => {
-				p.value = !1;
-			}, f.hideTimeoutMs));
+		function C() {
+			v.value || y.value || (S(), b = setTimeout(() => {
+				h.value = !1;
+			}, m.hideTimeoutMs));
 		}
-		function x() {
-			g.value = !0, y(), p.value = !0;
+		function w() {
+			v.value = !0, S(), h.value = !0;
 		}
-		function S() {
-			g.value = !1, m.value || b();
+		function T() {
+			v.value = !1, g.value || C();
 		}
-		function C() {
-			m.value ? (m.value = !1, h.value = !1, b()) : (m.value = !0, p.value = !0, h.value = !0, y());
+		function E() {
+			y.value = !0, S(), h.value = !0;
+		}
+		function D(e) {
+			let t = e.currentTarget;
+			e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || (y.value = !1, g.value || C());
+		}
+		function O() {
+			g.value ? (g.value = !1, _.value = !1, C()) : (g.value = !0, h.value = !0, _.value = !0, S());
 		}
-		return s(y), a({
-			isPinned: m,
-			isExpanded: p,
-			isVisible: v,
-			isToggled: h
+		return s(S), a({
+			isPinned: g,
+			isExpanded: h,
+			isVisible: x,
+			isToggled: _
 		}), (t, a) => (c(), r("div", {
-			class: o(["fixed z-dock pointer-events-none w-fit flex items-center px-4 pt-4 pb-2", e.position === "left" ? "top-0 left-0" : "top-0 right-0"]),
-			onMouseleave: S
+			class: o(["fixed z-dock pointer-events-none w-fit flex items-center px-4 pt-4 pb-2", e.placement === "left" ? "top-0 left-0" : "top-0 right-0"]),
+			onMouseleave: T,
+			onFocusin: E,
+			onFocusout: D
 		}, [t.$slots.left ? (c(), r("div", d, [u(t.$slots, "left", {}, void 0, !0)])) : n("", !0), i("div", {
 			class: "pointer-events-auto flex items-center h-6",
-			onMouseenter: x
+			onMouseenter: w
 		}, [
-			e.position === "right" ? (c(), r("div", {
+			e.placement === "right" ? (c(), r("div", {
 				key: 0,
-				class: o(["header-items-wrapper header-items-right flex items-center gap-3", v.value ? "" : "header-collapsed-right"])
-			}, [u(t.$slots, "items", {}, void 0, !0)], 2)) : n("", !0),
+				class: o(["header-items-wrapper header-items-right flex items-center gap-3", x.value ? "" : "header-collapsed-right"]),
+				inert: !x.value || void 0
+			}, [u(t.$slots, "items", {}, void 0, !0)], 10, f)) : n("", !0),
 			i("div", {
 				class: "shrink-0",
-				onClick: C
+				onClick: O
 			}, [u(t.$slots, "anchor", {
-				pinned: m.value,
-				toggled: h.value
+				pinned: g.value,
+				toggled: _.value
 			}, void 0, !0)]),
-			e.position === "left" ? (c(), r("div", {
+			e.placement === "left" ? (c(), r("div", {
 				key: 1,
-				class: o(["header-items-wrapper header-items-left flex items-center gap-3", v.value ? "" : "header-collapsed-left"])
-			}, [u(t.$slots, "items", {}, void 0, !0)], 2)) : n("", !0)
+				class: o(["header-items-wrapper header-items-left flex items-center gap-3", x.value ? "" : "header-collapsed-left"]),
+				inert: !x.value || void 0
+			}, [u(t.$slots, "items", {}, void 0, !0)], 10, p)) : n("", !0)
 		], 32)], 34));
 	}
-}), [["__scopeId", "data-v-7f77154a"]]);
+}), [["__scopeId", "data-v-711f1018"]]);
 //#endregion
-export { f as HeaderRibbon };
+export { m as HeaderRibbon };