@mkbabb/glass-ui 3.13.0 → 4.0.0

package/dist/handmark.js

@@ -0,0 +1,707 @@
+import { t as e } from "./_plugin-vue_export-helper-CBt_VvXa.js";
+import { n as t } from "./prng-Cg22zv8g.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
+var T = {
+	pen: {
+		weight: 6,
+		weightJitter: .1,
+		thinning: .15,
+		taper: {
+			start: 14,
+			end: 14,
+			ease: "out-cubic"
+		},
+		ribbon: "stroke",
+		opacity: 1,
+		blend: "source-over",
+		passes: 1,
+		passOpacity: 0,
+		grain: 0,
+		grainFreq: .1,
+		grainScale: 0,
+		octaves: 2,
+		roughness: .7,
+		wobble: 1.2,
+		segments: 9,
+		cap: "round"
+	},
+	boil: {
+		weight: 5,
+		weightJitter: .12,
+		thinning: .2,
+		taper: {
+			start: 12,
+			end: 12,
+			ease: "out-cubic"
+		},
+		ribbon: "stroke",
+		opacity: 1,
+		blend: "source-over",
+		passes: 1,
+		passOpacity: 0,
+		grain: 0,
+		grainFreq: .1,
+		grainScale: 0,
+		octaves: 2,
+		roughness: .9,
+		wobble: 1.4,
+		segments: 14,
+		cap: "round"
+	},
+	pencil: {
+		weight: 3,
+		weightJitter: .3,
+		thinning: .4,
+		taper: {
+			start: 8,
+			end: 18,
+			ease: "out-cubic"
+		},
+		ribbon: "stroke",
+		opacity: .6,
+		blend: "source-over",
+		passes: 1,
+		passOpacity: 0,
+		grain: .5,
+		grainFreq: .42,
+		grainScale: 1.5,
+		octaves: 3,
+		roughness: 1,
+		wobble: 1.6,
+		segments: 11,
+		cap: "round"
+	},
+	crayon: {
+		weight: 16,
+		weightJitter: 1,
+		thinning: .25,
+		taper: {
+			start: 6,
+			end: 6,
+			ease: "linear"
+		},
+		ribbon: "stroke",
+		opacity: .8,
+		blend: "source-over",
+		passes: 2,
+		passOpacity: .18,
+		grain: .85,
+		grainFreq: .16,
+		grainScale: 2.6,
+		octaves: 4,
+		roughness: 1.5,
+		wobble: 3,
+		segments: 13,
+		cap: "round"
+	},
+	ring: {
+		weight: 5,
+		weightJitter: .6,
+		thinning: .3,
+		taper: {
+			start: 8,
+			end: 12,
+			ease: "out-cubic"
+		},
+		ribbon: "stroke",
+		opacity: .55,
+		blend: "source-over",
+		passes: 1,
+		passOpacity: 0,
+		grain: .7,
+		grainFreq: .18,
+		grainScale: 1.8,
+		octaves: 4,
+		roughness: 1.4,
+		wobble: 2.6,
+		segments: 13,
+		cap: "round"
+	},
+	marker: {
+		weight: 12,
+		weightJitter: .2,
+		thinning: .1,
+		taper: {
+			start: 4,
+			end: 10,
+			ease: "out-cubic"
+		},
+		ribbon: "stroke",
+		opacity: .92,
+		blend: "source-over",
+		passes: 1,
+		passOpacity: 0,
+		grain: .22,
+		grainFreq: .09,
+		grainScale: 1,
+		octaves: 3,
+		roughness: 1,
+		wobble: 2.2,
+		segments: 9,
+		cap: "square"
+	},
+	highlighter: {
+		weight: 26,
+		weightJitter: .05,
+		thinning: 0,
+		taper: {
+			start: 6,
+			end: 10,
+			ease: "out-cubic"
+		},
+		ribbon: "hull",
+		opacity: .38,
+		blend: "multiply",
+		passes: 1,
+		passOpacity: 0,
+		grain: .12,
+		grainFreq: .2,
+		grainScale: 1.5,
+		octaves: 2,
+		roughness: .5,
+		wobble: 1.4,
+		segments: 9,
+		cap: "square"
+	}
+}, E = (e, t) => ({
+	...T[typeof e == "string" ? e : "pen"],
+	...typeof e == "object" ? e : {},
+	...t
+}), D = (e, t, n) => {
+	let r = (e, t) => e + (t - e) * n, i = (e, t) => n < .5 ? e : t;
+	return {
+		weight: r(e.weight, t.weight),
+		weightJitter: r(e.weightJitter, t.weightJitter),
+		thinning: r(e.thinning, t.thinning),
+		taper: {
+			start: r(e.taper.start, t.taper.start),
+			end: r(e.taper.end, t.taper.end),
+			ease: i(e.taper.ease, t.taper.ease)
+		},
+		ribbon: i(e.ribbon, t.ribbon),
+		opacity: r(e.opacity, t.opacity),
+		blend: i(e.blend, t.blend),
+		passes: Math.max(1, Math.round(r(e.passes, t.passes))),
+		passOpacity: r(e.passOpacity, t.passOpacity),
+		grain: r(e.grain, t.grain),
+		grainFreq: r(e.grainFreq, t.grainFreq),
+		grainScale: r(e.grainScale, t.grainScale),
+		octaves: Math.max(1, Math.round(r(e.octaves, t.octaves))),
+		roughness: r(e.roughness, t.roughness),
+		wobble: r(e.wobble, t.wobble),
+		segments: Math.max(2, Math.round(r(e.segments, t.segments))),
+		cap: i(e.cap, t.cap)
+	};
+}, O = 100, k = 40, A = .06, j = .22, M = .66, N = .022;
+function P(e, n, r, i, a) {
+	let o = r - e;
+	if (o <= 0) return [[e, n], [r, n]];
+	let s = t(i >>> 0), c = 2 + Math.floor(s() * 3), l = o * N, u = s() * Math.PI * 2, d = .65 + s() * .35, f = .2 + s() * .3, p = Math.max(6, a), m = [];
+	for (let t = 0; t <= p; t++) {
+		let r = t / p, i = e + o * r, a = d * Math.sin(u + r * Math.PI * 2 * c) + f * Math.sin(u * 1.7 + r * Math.PI * 2 * (c + 1)), h = Math.sin(Math.PI * r), g = (s() - .5) * .4;
+		m.push([i, n + l * (a + g) * h]);
+	}
+	return m;
+}
+function F(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, {
+		...t,
+		seed: l + a
+	});
+	switch (e) {
+		case "underline": return {
+			lines: [i ? P(a, c, o, l, u) : d(a, c, o, c)],
+			closed: !1
+		};
+		case "strikethrough": return {
+			lines: [d(a, s, o, s)],
+			closed: !1
+		};
+		case "highlight": {
+			let e = n ? s : 40 * ((r ?? M) - j);
+			return {
+				lines: [d(a, e, o, e)],
+				closed: !1
+			};
+		}
+		case "box": {
+			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)
+				],
+				closed: !1
+			};
+		}
+		case "bracket": {
+			let e = n ? n.y : 4, t = n ? n.y + n.h : 36, r = (o - a) * .22;
+			return {
+				lines: [
+					d(a + r, e, a, e, 0),
+					d(a, e, a, t, 1),
+					d(a, t, a + r, t, 2)
+				],
+				closed: !1
+			};
+		}
+		case "circle": return {
+			lines: [y(n ? n.x + n.w / 2 : 100 / 2, n ? n.y + n.h / 2 : 40 / 2, (n ? n.w / 2 : 100 / 2) - 3, (n ? n.h / 2 : 40 / 2) - 3, t)],
+			closed: !0
+		};
+		case "path": return {
+			lines: [],
+			closed: !1
+		};
+		default: return {
+			lines: [d(a, c, o, c)],
+			closed: !1
+		};
+	}
+}
+function I({ lines: e, closed: t }, n, r) {
+	return e.map((e, i) => {
+		if (t) return x(e, n, r + i);
+		let a = e[0], o = e[e.length - 1];
+		return b(e, a[0], a[1], o[0], o[1], n, r + i);
+	});
+}
+function L(e, t = !1) {
+	return e.map((e) => t ? S(e) : v(e)).join(" ");
+}
+//#endregion
+//#region src/components/custom/handmark/freehand.ts
+var R = (e, t) => [e[0] + t[0], e[1] + t[1]], z = (e, t) => [e[0] - t[0], e[1] - t[1]], B = (e, t) => [e[0] * t, e[1] * t], V = (e) => [-e[0], -e[1]], H = (e) => [e[1], -e[0]], U = (e, t) => e[0] * t[0] + e[1] * t[1], ee = (e) => e[0] * e[0] + e[1] * e[1], W = (e, t) => ee(z(e, t)), te = (e, t) => Math.hypot(e[1] - t[1], e[0] - t[0]), G = (e) => B(e, 1 / (Math.hypot(e[0], e[1]) || 1)), K = (e, t, n) => R(e, B(z(t, e), n)), q = (e, t) => B(R(e, t), .5), J = (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: Y, PI: ne } = Math, X = ne + 1e-4, Z = (e) => e;
+function Q(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) => [
+		e[0],
+		e[1],
+		e[2] ?? .5
+	]);
+	if (o.length === 2) {
+		let e = o[1];
+		o[1] = K(o[0], e, .5), o.push(e);
+	}
+	o.length === 1 && o.push([...R(o[0], [1, 1]), ...o[0].slice(2)]);
+	let s = [{
+		point: [o[0][0], o[0][1]],
+		pressure: o[0][2] >= 0 ? o[0][2] : .25,
+		vector: [1, 1],
+		distance: 0,
+		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]] : K(u.point, [o[e][0], o[e][1]], a);
+		if (W(u.point, t) < 1e-4) continue;
+		let n = te(t, u.point);
+		if (l += n, e < d && !c) {
+			if (l < r) continue;
+			c = !0;
+		}
+		u = {
+			point: t,
+			pressure: o[e][2] >= 0 ? o[e][2] : .5,
+			vector: G(z(u.point, t)),
+			distance: n,
+			runningLength: l
+		}, s.push(u);
+	}
+	return s.length > 0 && (s[0].vector = s[1]?.vector ?? [0, 0]), s;
+}
+function re(e, t = {}) {
+	let { size: n = 16, smoothing: r = .5, thinning: i = .5, simulatePressure: a = !0, easing: o = Z, 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 = Y(1, t.distance / n);
+			r = Y(1, e + (Y(1, 1 - i) - e) * (i * .275));
+		}
+		return (e + r) / 2;
+	}, e[0].pressure), S = ie(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 = Y(1, l / n), t = Y(1, 1 - e);
+				r = Y(1, x + (t - x) * (e * .275));
+			}
+			S = ie(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;
+		S = Math.max(.01, S * Math.min(f, A));
+		let j = (t < e.length - 1 ? e[t + 1] : e[t]).vector, M = t < e.length - 1 ? U(c, j) : 1, N = U(c, w) < 0 && !k, P = M !== null && M < .2;
+		if (N || P) {
+			let e = B(H(w), S);
+			for (let t = 0; t <= 1; t += .07692307692307693) D = J(z(s, e), s, X * t), v.push(D), O = J(R(s, e), s, X * -t), y.push(O);
+			T = D, E = O, P && (k = !0);
+			continue;
+		}
+		if (k = !1, t === e.length - 1) {
+			let e = B(H(c), S);
+			v.push(z(s, e)), y.push(R(s, e));
+			continue;
+		}
+		let F = B(H(K(j, c, M)), S);
+		D = z(s, F), (t <= 1 || W(T, D) > _) && (v.push(D), T = D), O = R(s, F), (t <= 1 || W(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) : R(e[0].point, [1, 1]), M = [], N = [];
+	if (e.length === 1) {
+		if (!(h || g) || l) {
+			let e = R(A, B(G(H(z(A, j))), -(C ?? S))), t = [];
+			for (let n = 1 / 13, r = n; r <= 1; r += n) t.push(J(e, A, X * 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 = J(y[0], A, X * t);
+			M.push(e);
+		}
+		else {
+			let e = z(v[0], y[0]), t = B(e, .5), n = B(e, .51);
+			M.push(z(A, t), z(A, n), R(A, n), R(A, t));
+		}
+		let t = H(V(e[e.length - 1].vector));
+		if (g || h && e.length === 1) N.push(j);
+		else if (f) {
+			let e = R(j, B(t, S));
+			for (let t = 1 / 29, n = t; n < 1; n += t) N.push(J(e, j, X * 3 * n));
+		} else N.push(R(j, B(t, S)), R(j, B(t, S * .99)), z(j, B(t, S * .99)), z(j, B(t, S)));
+	}
+	return v.concat(N, y.reverse(), M);
+}
+function ie(e, t, n, r = Z) {
+	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 ae(e, t = {}) {
+	return re(Q(e, t), t);
+}
+function oe(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)} ${q(r, i)[0].toFixed(2)},${q(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 += `${q(n, r)[0].toFixed(2)},${q(n, r)[1].toFixed(2)} `;
+	return t && (a += "Z"), a;
+}
+//#endregion
+//#region src/components/custom/handmark/texture.ts
+function se(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";
+	return `
+  <filter id="${e}" x="-40%" y="-60%" width="180%" height="220%" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency="${(.012 * t.roughness).toFixed(4)}" numOctaves="2" seed="${r}" result="warp"/>
+    <feDisplacementMap in="SourceGraphic" in2="warp" scale="${(t.grainScale * 1.4).toFixed(2)}" xChannelSelector="R" yChannelSelector="G" result="wob"/>
+    <feTurbulence type="fractalNoise" baseFrequency="${t.grainFreq}" numOctaves="${t.octaves}" seed="${r + 17}" result="grain"/>
+    <feColorMatrix in="grain" type="matrix" result="grainA"
+      values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 ${(6 + t.grain * 10).toFixed(2)} ${i}"/>
+    <feComposite in="wob" in2="grainA" operator="${a}" result="grained"/>
+    <feDisplacementMap in="grained" in2="grain" scale="${(t.grainScale * 2).toFixed(2)}" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>`;
+}
+function $(e) {
+	return e.grain > 0 || e.grainScale > 0;
+}
+//#endregion
+//#region src/components/custom/handmark/ink.ts
+function ce(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]);
+	return t;
+}
+function le(e, n, r) {
+	let i = t(r >>> 0);
+	return e.map((t, r) => {
+		let a = r / Math.max(1, e.length - 1), o = .5 + .35 * Math.sin(Math.PI * a) + (i() - .5) * n.weightJitter * .4;
+		return [
+			t[0],
+			t[1],
+			Math.max(.05, Math.min(1, o))
+		];
+	});
+}
+function ue(e) {
+	return e === "out-cubic" ? (e) => 1 - (1 - e) ** 3 : (e) => e;
+}
+function de(e, n, r, i, a, o = !1) {
+	if (n.stamp) {
+		let a = t(r >>> 0), o = n.stamp({
+			centerline: e,
+			brush: n,
+			rng: a,
+			seed: r,
+			length: ce(e),
+			color: i
+		});
+		return {
+			paths: o.paths,
+			filterId: o.filterId ?? null,
+			defs: o.defs ?? []
+		};
+	}
+	let s = [], c = (e) => o ? S(e) : v(e);
+	for (let t = 0; t < n.passes; t++) {
+		let a = e[0], o = e[e.length - 1], l = b(e, a[0], a[1], o[0], o[1], n.weight * .06, r + 991 * t), u = n.opacity * (1 - n.passOpacity * t);
+		if (n.ribbon === "hull") {
+			let e = ae(le(l, n, r + 7 * t), {
+				size: n.weight,
+				thinning: n.thinning,
+				streamline: Math.max(.1, .55 - n.roughness * .1),
+				last: !0,
+				start: {
+					taper: n.taper.start,
+					easing: ue(n.taper.ease)
+				},
+				end: {
+					taper: n.taper.end,
+					easing: ue(n.taper.ease)
+				}
+			});
+			s.push({
+				d: oe(e),
+				fill: i,
+				opacity: u,
+				blend: n.blend,
+				cap: n.cap
+			});
+		} else s.push({
+			d: c(l),
+			stroke: i,
+			opacity: u,
+			blend: n.blend,
+			cap: n.cap
+		});
+	}
+	let l = $(n) ? se(a, n, r) : "";
+	return {
+		paths: s,
+		filterId: l ? a : null,
+		defs: l ? [l] : []
+	};
+}
+//#endregion
+//#region src/components/custom/handmark/composables/useHandMark.ts
+var fe = {
+	currentFrame: f(0),
+	start: () => {},
+	stop: () => {}
+};
+function pe(e, t, n = null) {
+	return {
+		brush: e.brush ?? "pen",
+		shape: e.shape ?? "underline",
+		color: e.color ?? "currentColor",
+		seed: e.seed ?? 1,
+		overrides: e.overrides,
+		animation: e.animation ?? "none",
+		boilFps: e.boilFps ?? 8,
+		boilFrames: e.boilFrames ?? 3,
+		roughness: e.roughness ?? null,
+		segments: e.segments ?? null,
+		jagged: e.jagged ?? !1,
+		natural: e.natural ?? e.brush === "boil",
+		box: e.box ?? null,
+		path: e.path ?? null,
+		filterId: t,
+		baselineFrac: n
+	};
+}
+function me(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(() => F(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)) : fe, u = r(() => {
+		if (e.value.path) return e.value.path;
+		let n = i.value.lines;
+		if (a.value && c.value) {
+			let r = t.value.wobble * .4 + .4, a = l.currentFrame.value;
+			n = I(i.value, r, e.value.seed + a * 31);
+		}
+		return L(n, e.value.jagged);
+	}), d = r(() => e.value.path ? [] : a.value && c.value ? I(i.value, t.value.wobble * .4 + .4, e.value.seed + l.currentFrame.value * 31) : i.value.lines);
+	return {
+		brush: t,
+		baseGeom: i,
+		fragment: r(() => {
+			let n = {
+				paths: [],
+				filterId: null,
+				defs: []
+			}, r = d.value.length ? d.value : [[]];
+			for (let i of r) {
+				let r = de(i, t.value, e.value.seed, e.value.color, e.value.filterId, e.value.jagged);
+				n.paths.push(...r.paths), r.filterId && !n.filterId && (n.filterId = r.filterId, n.defs = r.defs);
+			}
+			return n;
+		}),
+		pathD: u,
+		grained: n,
+		drawKind: s,
+		draws: o,
+		boils: a,
+		boil: l,
+		boilArmed: c
+	};
+}
+//#endregion
+//#region src/components/custom/handmark/HandMark.vue?vue&type=script&setup=true&lang.ts
+var he = [
+	"data-shape",
+	"data-behind",
+	"data-grained"
+], ge = ["viewBox"], _e = ["innerHTML"], ve = [
+	"d",
+	"stroke",
+	"fill",
+	"stroke-width",
+	"stroke-opacity",
+	"fill-opacity",
+	"stroke-linecap",
+	"filter"
+], ye = /* @__PURE__ */ e(/* @__PURE__ */ o({
+	__name: "HandMark",
+	props: {
+		brush: { default: "pen" },
+		shape: { default: "underline" },
+		color: { default: "currentColor" },
+		seed: { default: 1 },
+		overrides: {},
+		animation: { default: "none" },
+		drawMs: { default: 800 },
+		drawDelayMs: { default: 0 },
+		appear: { default: "visible" },
+		boilFps: { default: 8 },
+		boilFrames: { default: 3 },
+		roughness: {},
+		segments: {},
+		jagged: {
+			type: Boolean,
+			default: !1
+		},
+		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 } = me(r(() => pe(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());
+		}
+		function P() {
+			if (!w.value) {
+				N();
+				return;
+			}
+			A.value = !1, j.value && j.value.offsetWidth, requestAnimationFrame(() => {
+				A.value = !0;
+			});
+		}
+		function F() {
+			o.animation === "draw-then-boil" && N();
+		}
+		t({ play: P });
+		let I = r(() => o.box == null && (o.shape === "underline" || o.shape === "strikethrough" || o.shape === "highlight"));
+		function L(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;
+			let n = document.createRange();
+			n.selectNode(t[0]), t.length > 1 && n.setEndAfter(t[t.length - 1]);
+			let r = n.getBoundingClientRect();
+			return n.detach?.(), r.height > 0 ? r : null;
+		}
+		function R() {
+			if (!I.value) return;
+			let e = j.value;
+			if (!e) return;
+			let t = L(e);
+			if (!t) return;
+			let n = e.getBoundingClientRect();
+			if (n.height <= 0) return;
+			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 V = 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();
+		}), l(() => {
+			V?.disconnect(), z?.disconnect(), E.stop();
+		}), _(() => o.animation, () => {
+			A.value = !1, D.value = !1;
+		});
+		let H = {
+			"source-over": "normal",
+			multiply: "multiply",
+			darken: "darken",
+			screen: "screen"
+		};
+		function U(e) {
+			return {
+				mixBlendMode: H[e],
+				transition: M.value
+			};
+		}
+		return (t, r) => (d(), a("span", {
+			class: "hm",
+			ref_key: "root",
+			ref: j,
+			"data-shape": e.shape,
+			"data-behind": O.value,
+			"data-grained": h(S)
+		}, [m(t.$slots, "default", {}, void 0, !0), (d(), a("svg", {
+			class: "hm__svg",
+			viewBox: `0 0 ${h(100)} ${h(40)}`,
+			preserveAspectRatio: "none",
+			"aria-hidden": "true",
+			focusable: "false"
+		}, [h(x).filterId ? (d(), a("defs", {
+			key: 0,
+			innerHTML: h(x).defs[0]
+		}, null, 8, _e)) : i("", !0), (d(!0), a(n, null, p(h(x).paths, (e, t) => (d(), a("path", {
+			key: t,
+			class: s(["hm__path", {
+				drawn: A.value,
+				[`hm__path--${h(C)}`]: h(w)
+			}]),
+			d: k.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-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
+		}, null, 46, ve))), 128))], 8, ge))], 8, he));
+	}
+}), [["__scopeId", "data-v-d3137a58"]]);
+//#endregion
+export { T as BRUSHES, ye as HandMark, ye as InkMark, A as UNDERLINE_GAP, k as VB_H, O as VB_W, I as boilLines, ae as getStroke, Q as getStrokePoints, oe as getSvgPathFromStroke, se as grainFilter, $ as hasGrain, de as ink, D as lerpBrush, pe as normalizeProps, E as resolveBrush, L as serialize, F as shapeGeom, me as useHandMark };

package/dist/header-ribbon.js

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
+import { t as e } from "./_plugin-vue_export-helper-CBt_VvXa.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
 var d = {