@cascivo/flow 0.1.16 → 0.1.17

package/dist/index.js

@@ -1,18 +1,18 @@
 "use client";
-import { cn as e, useComputed as t, useControllableSignal as n, useDraggable as r, useResizeObserver as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
-import { useId as c, useRef as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { builtin as p, t as m } from "@cascivo/i18n";
+import { cn as e, useComputed as t, useControllableSignal as n, useDraggable as r, useEffectPropSignal as i, useResizeObserver as a, useSignal as o, useSignalEffect as s, useSignals as c } from "@cascivo/core";
+import { useId as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { builtin as m, t as h } from "@cascivo/i18n";
 //#region src/engine/types.ts
-var h = {
+var g = {
 	width: 150,
 	height: 40
-}, g = {
+}, _ = {
 	x: 0,
 	y: 0,
 	zoom: 1
 };
-function _(e = {}) {
+function v(e = {}) {
 	let [t, r] = n({
 		value: e.nodes,
 		defaultValue: e.defaultNodes ?? [],
@@ -23,7 +23,7 @@ function _(e = {}) {
 		onChange: e.onEdgesChange
 	}), [o, s] = n({
 		value: e.viewport,
-		defaultValue: e.defaultViewport ?? g,
+		defaultValue: e.defaultViewport ?? _,
 		onChange: e.onViewportChange
 	});
 	return {
@@ -46,16 +46,16 @@ function _(e = {}) {
 }
 //#endregion
 //#region src/engine/transform.ts
-function v(e, t = .2, n = 2) {
+function y(e, t = .2, n = 2) {
 	return Math.min(n, Math.max(t, e));
 }
-function y(e, t) {
+function b(e, t) {
 	return {
 		x: (e.x - t.x) / t.zoom,
 		y: (e.y - t.y) / t.zoom
 	};
 }
-function b(e, t) {
+function x(e, t) {
 	return {
 		x: e.x * t.zoom + t.x,
 		y: e.y * t.zoom + t.y
@@ -63,14 +63,14 @@ function b(e, t) {
 }
 //#endregion
 //#region src/engine/geometry.ts
-function x(e) {
+function S(e) {
 	return {
-		width: e.width ?? h.width,
-		height: e.height ?? h.height
+		width: e.width ?? g.width,
+		height: e.height ?? g.height
 	};
 }
-function S(e) {
-	let { width: t, height: n } = x(e);
+function C(e) {
+	let { width: t, height: n } = S(e);
 	return {
 		x: e.position.x,
 		y: e.position.y,
@@ -78,8 +78,8 @@ function S(e) {
 		height: n
 	};
 }
-function C(e, t) {
-	let { x: n, y: r, width: i, height: a } = S(e);
+function w(e, t) {
+	let { x: n, y: r, width: i, height: a } = C(e);
 	switch (t) {
 		case "top": return {
 			x: n + i / 2,
@@ -99,11 +99,11 @@ function C(e, t) {
 		};
 	}
 }
-function w(e) {
+function T(e) {
 	if (e.length === 0) return null;
 	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity;
 	for (let a of e) {
-		let e = S(a);
+		let e = C(a);
 		t = Math.min(t, e.x), n = Math.min(n, e.y), r = Math.max(r, e.x + e.width), i = Math.max(i, e.y + e.height);
 	}
 	return {
@@ -113,14 +113,14 @@ function w(e) {
 		height: i - n
 	};
 }
-function T(e, t, n = {}) {
+function E(e, t, n = {}) {
 	let { padding: r = .1, minZoom: i = .2, maxZoom: a = 2 } = n;
 	if (e.width <= 0 || e.height <= 0 || t.width <= 0 || t.height <= 0) return {
 		x: t.width / 2 - e.x,
 		y: t.height / 2 - e.y,
 		zoom: 1
 	};
-	let o = t.width / (e.width * (1 + r * 2)), s = t.height / (e.height * (1 + r * 2)), c = v(Math.min(o, s), i, a);
+	let o = t.width / (e.width * (1 + r * 2)), s = t.height / (e.height * (1 + r * 2)), c = y(Math.min(o, s), i, a);
 	return {
 		x: t.width / 2 - (e.x + e.width / 2) * c,
 		y: t.height / 2 - (e.y + e.height / 2) * c,
@@ -129,11 +129,11 @@ function T(e, t, n = {}) {
 }
 //#endregion
 //#region src/engine/path.ts
-var E = (e) => Number.isInteger(e) ? String(e) : e.toFixed(2).replace(/\.?0+$/, ""), D = (e, t) => ({
+var D = (e) => Number.isInteger(e) ? String(e) : e.toFixed(2).replace(/\.?0+$/, ""), O = (e, t) => ({
 	x: (e.x + t.x) / 2,
 	y: (e.y + t.y) / 2
 });
-function O(e) {
+function k(e) {
 	switch (e) {
 		case "top": return {
 			x: 0,
@@ -153,14 +153,14 @@ function O(e) {
 		};
 	}
 }
-function k({ source: e, target: t }) {
+function A({ source: e, target: t }) {
 	return {
-		d: `M${E(e.x)},${E(e.y)} L${E(t.x)},${E(t.y)}`,
-		mid: D(e, t)
+		d: `M${D(e.x)},${D(e.y)} L${D(t.x)},${D(t.y)}`,
+		mid: O(e, t)
 	};
 }
-function A(e) {
-	let { source: t, target: n, curvature: r = .25 } = e, i = e.sourcePosition ?? "right", a = e.targetPosition ?? "left", o = Math.hypot(n.x - t.x, n.y - t.y), s = Math.max(r * o, 20), c = O(i), l = O(a), u = {
+function j(e) {
+	let { source: t, target: n, curvature: r = .25 } = e, i = e.sourcePosition ?? "right", a = e.targetPosition ?? "left", o = Math.hypot(n.x - t.x, n.y - t.y), s = Math.max(r * o, 20), c = k(i), l = k(a), u = {
 		x: t.x + c.x * s,
 		y: t.y + c.y * s
 	}, d = {
@@ -171,31 +171,31 @@ function A(e) {
 		y: (t.y + 3 * u.y + 3 * d.y + n.y) / 8
 	};
 	return {
-		d: `M${E(t.x)},${E(t.y)} C${E(u.x)},${E(u.y)} ${E(d.x)},${E(d.y)} ${E(n.x)},${E(n.y)}`,
+		d: `M${D(t.x)},${D(t.y)} C${D(u.x)},${D(u.y)} ${D(d.x)},${D(d.y)} ${D(n.x)},${D(n.y)}`,
 		mid: f
 	};
 }
-function j(e, t) {
+function M(e, t) {
 	return Math.hypot(t.x - e.x, t.y - e.y);
 }
-function M(e, t, n) {
-	let r = j(e, t) || 1;
+function N(e, t, n) {
+	let r = M(e, t) || 1;
 	return {
 		x: e.x + (t.x - e.x) / r * n,
 		y: e.y + (t.y - e.y) / r * n
 	};
 }
-function N(e, t) {
+function P(e, t) {
 	if (e.length < 2) return "";
-	let n = e[0], r = `M${E(n.x)},${E(n.y)}`;
+	let n = e[0], r = `M${D(n.x)},${D(n.y)}`;
 	for (let n = 1; n < e.length - 1; n++) {
-		let i = e[n - 1], a = e[n], o = e[n + 1], s = Math.min(t, j(i, a) / 2, j(a, o) / 2), c = M(a, i, s), l = M(a, o, s);
-		r += ` L${E(c.x)},${E(c.y)} Q${E(a.x)},${E(a.y)} ${E(l.x)},${E(l.y)}`;
+		let i = e[n - 1], a = e[n], o = e[n + 1], s = Math.min(t, M(i, a) / 2, M(a, o) / 2), c = N(a, i, s), l = N(a, o, s);
+		r += ` L${D(c.x)},${D(c.y)} Q${D(a.x)},${D(a.y)} ${D(l.x)},${D(l.y)}`;
 	}
 	let i = e[e.length - 1];
-	return r += ` L${E(i.x)},${E(i.y)}`, r;
+	return r += ` L${D(i.x)},${D(i.y)}`, r;
 }
-function P(e) {
+function F(e) {
 	let { source: t, target: n, borderRadius: r = 8 } = e, i = e.sourcePosition ?? "right", a = i === "left" || i === "right", o = [t];
 	if (a) {
 		let e = (t.x + n.x) / 2;
@@ -217,21 +217,21 @@ function P(e) {
 		});
 	}
 	return o.push(n), {
-		d: N(o, r),
-		mid: D(t, n)
+		d: P(o, r),
+		mid: O(t, n)
 	};
 }
-function F(e, t) {
+function I(e, t) {
 	switch (e) {
-		case "straight": return k(t);
-		case "smoothstep": return P(t);
-		case "bezier": return A(t);
+		case "straight": return A(t);
+		case "smoothstep": return F(t);
+		case "bezier": return j(t);
 	}
 }
 //#endregion
 //#region src/engine/layout.ts
-function I(e, t = {}) {
-	let n = t.gap ?? 40, r = t.nodeWidth ?? h.width, i = t.nodeHeight ?? h.height, a = t.columns ?? Math.max(1, Math.ceil(Math.sqrt(e.length)));
+function L(e, t = {}) {
+	let n = t.gap ?? 40, r = t.nodeWidth ?? g.width, i = t.nodeHeight ?? g.height, a = t.columns ?? Math.max(1, Math.ceil(Math.sqrt(e.length)));
 	return e.map((e, t) => {
 		let o = t % a, s = Math.floor(t / a);
 		return {
@@ -243,8 +243,8 @@ function I(e, t = {}) {
 		};
 	});
 }
-function L(e, t, n = {}) {
-	let r = n.direction ?? "LR", i = n.gap ?? 60, a = n.nodeWidth ?? h.width, o = n.nodeHeight ?? h.height, s = new Set(e.map((e) => e.id)), c = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+function R(e, t, n = {}) {
+	let r = n.direction ?? "LR", i = n.gap ?? 60, a = n.nodeWidth ?? g.width, o = n.nodeHeight ?? g.height, s = new Set(e.map((e) => e.id)), c = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
 	for (let t of e) l.set(t.id, 0);
 	for (let e of t) !s.has(e.source) || !s.has(e.target) || (c.set(e.source, [...c.get(e.source) ?? [], e.target]), l.set(e.target, (l.get(e.target) ?? 0) + 1));
 	let u = /* @__PURE__ */ new Map(), d = e.filter((e) => (l.get(e.id) ?? 0) === 0).map((e) => e.id);
@@ -278,21 +278,21 @@ function L(e, t, n = {}) {
 		};
 	});
 }
-function R(e, t, n) {
-	return n === "grid" ? I(e) : n === "layered" ? L(e, t) : n(e, t);
+function z(e, t, n) {
+	return n === "grid" ? L(e) : n === "layered" ? R(e, t) : n(e, t);
 }
 //#endregion
 //#region src/engine/script.ts
-function z(e) {
+function B(e) {
 	return "edge" in e;
 }
-function B(e, t) {
+function ee(e, t) {
 	let n = {
 		label: e.label,
 		description: e.description,
 		duration: e.duration
 	};
-	if (z(e)) {
+	if (B(e)) {
 		let r = t.find((t) => t.id === e.edge);
 		if (!r) throw Error(`FlowStory: step references unknown edge "${e.edge}"`);
 		return {
@@ -316,13 +316,13 @@ function B(e, t) {
 	throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`);
 }
 function V(e, t) {
-	return e.map((e) => B(e, t));
+	return e.map((e) => ee(e, t));
 }
 //#endregion
 //#region src/core/use-viewport.ts
 var H = 1.2;
 function U(e, t = {}) {
-	let { minZoom: n = .2, maxZoom: a = 2, panOnDrag: s = !0, zoomOnScroll: c = !0, fitPadding: u = .1, fitOnInit: d = !1 } = t, { viewport: f, setViewport: p } = e, { ref: m, size: h } = i(), { handleRef: g, offset: _, isDragging: b } = r({ isDisabled: !s }), x = (e, t) => {
+	let { minZoom: n = .2, maxZoom: i = 2, panOnDrag: o = !0, zoomOnScroll: c = !0, fitPadding: l = .1, fitOnInit: d = !1 } = t, { viewport: f, setViewport: p } = e, { ref: m, size: h } = a(), { handleRef: g, offset: _, isDragging: v } = r({ isDisabled: !o }), x = (e, t) => {
 		let n = f.peek();
 		p({
 			x: n.x + e,
@@ -330,20 +330,20 @@ function U(e, t = {}) {
 			zoom: n.zoom
 		});
 	}, S = (e, t) => {
-		let r = f.peek(), i = v(e, n, a);
+		let r = f.peek(), a = y(e, n, i);
 		if (!t) {
 			p({
 				x: r.x,
 				y: r.y,
-				zoom: i
+				zoom: a
 			});
 			return;
 		}
-		let o = y(t, r);
+		let o = b(t, r);
 		p({
-			x: t.x - o.x * i,
-			y: t.y - o.y * i,
-			zoom: i
+			x: t.x - o.x * a,
+			y: t.y - o.y * a,
+			zoom: a
 		});
 	}, C = () => {
 		let e = m.current;
@@ -351,7 +351,7 @@ function U(e, t = {}) {
 			x: e.clientWidth / 2,
 			y: e.clientHeight / 2
 		};
-	}, E = () => S(f.peek().zoom * H, C()), D = () => S(f.peek().zoom / H, C()), O = () => {
+	}, w = () => S(f.peek().zoom * H, C()), D = () => S(f.peek().zoom / H, C()), O = () => {
 		let e = h.peek();
 		if (e && e.width > 0 && e.height > 0) return e;
 		let t = m.current;
@@ -360,18 +360,18 @@ function U(e, t = {}) {
 			height: t.clientHeight
 		} : null;
 	}, k = (t) => {
-		let r = w(e.nodes.peek());
+		let r = T(e.nodes.peek());
 		if (!r) return;
-		let i = t ?? O();
-		i && p(T(r, i, {
-			padding: u,
+		let a = t ?? O();
+		a && p(E(r, a, {
+			padding: l,
 			minZoom: n,
-			maxZoom: a
+			maxZoom: i
 		}));
-	}, A = l(null);
-	o(() => {
-		let e = b.value, t = _.value;
-		if (!s) return;
+	}, A = u(null);
+	s(() => {
+		let e = v.value, t = _.value;
+		if (!o) return;
 		if (!e) {
 			A.current = null;
 			return;
@@ -386,7 +386,7 @@ function U(e, t = {}) {
 			y: n.vp.y + (t.y - n.off.y),
 			zoom: n.vp.zoom
 		});
-	}), o(() => {
+	}), s(() => {
 		if (!c || typeof window > "u") return;
 		let e = m.current;
 		if (!e) return;
@@ -400,8 +400,8 @@ function U(e, t = {}) {
 		};
 		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
 	});
-	let j = l(!1);
-	return o(() => {
+	let j = u(!1);
+	return s(() => {
 		if (!d || j.current) return;
 		let e = h.value;
 		!e || e.width === 0 || (j.current = !0, k(e));
@@ -411,36 +411,36 @@ function U(e, t = {}) {
 		viewport: f,
 		pan: x,
 		zoomTo: S,
-		zoomIn: E,
+		zoomIn: w,
 		zoomOut: D,
 		fitView: k
 	};
 }
 //#endregion
 //#region src/core/use-connection.ts
-var ee = "[data-flow-handle][data-handle-type=\"source\"]", te = "[data-flow-handle][data-handle-type=\"target\"]";
+var te = "[data-flow-handle][data-handle-type=\"source\"]", ne = "[data-flow-handle][data-handle-type=\"target\"]";
 function W(e) {
-	let { containerRef: t } = e, n = a(null), r = l(e.onConnect);
+	let { containerRef: t } = e, n = o(null), r = u(e.onConnect);
 	r.current = e.onConnect;
-	let i = l(e.isValid);
-	i.current = e.isValid;
-	let s = l(e.clientToFlow);
-	s.current = e.clientToFlow;
-	let c = a(e.enabled ?? !0);
-	return c.value = e.enabled ?? !0, o(() => {
-		if (!c.value || typeof window > "u") return;
+	let a = u(e.isValid);
+	a.current = e.isValid;
+	let c = u(e.clientToFlow);
+	c.current = e.clientToFlow;
+	let l = i(e.enabled ?? !0);
+	return s(() => {
+		if (!l.value || typeof window > "u") return;
 		let e = t.current;
 		if (!e) return;
-		let a = (e) => {
+		let i = (e) => {
 			let t = n.peek();
 			t && (n.value = {
 				...t,
-				to: s.current(e.clientX, e.clientY)
+				to: c.current(e.clientX, e.clientY)
 			});
 		}, o = (e) => {
 			let t = n.peek();
-			if (window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", o), n.value = null, !t) return;
-			let s = e.target, c = s instanceof Element ? s.closest(te) : null, l = c?.closest("[data-node-id]");
+			if (window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", o), n.value = null, !t) return;
+			let s = e.target, c = s instanceof Element ? s.closest(ne) : null, l = c?.closest("[data-node-id]");
 			if (!l) return;
 			let u = {
 				source: t.source,
@@ -448,33 +448,33 @@ function W(e) {
 				sourceHandle: t.sourceHandle,
 				targetHandle: c?.getAttribute("data-handle-id") ?? void 0
 			};
-			!u.target || u.source === u.target || i.current && !i.current(u) || r.current?.(u);
-		}, l = (e) => {
+			!u.target || u.source === u.target || a.current && !a.current(u) || r.current?.(u);
+		}, s = (e) => {
 			let t = e.target;
 			if (!(t instanceof Element)) return;
-			let r = t.closest(ee);
+			let r = t.closest(te);
 			if (!r) return;
-			let i = r.closest("[data-node-id]");
-			if (!i) return;
+			let a = r.closest("[data-node-id]");
+			if (!a) return;
 			e.stopPropagation();
-			let c = r.getBoundingClientRect();
+			let s = r.getBoundingClientRect();
 			n.value = {
-				source: i.getAttribute("data-node-id") ?? "",
+				source: a.getAttribute("data-node-id") ?? "",
 				sourceHandle: r.getAttribute("data-handle-id") ?? void 0,
-				from: s.current(c.left + c.width / 2, c.top + c.height / 2),
-				to: s.current(e.clientX, e.clientY)
-			}, window.addEventListener("pointermove", a), window.addEventListener("pointerup", o);
+				from: c.current(s.left + s.width / 2, s.top + s.height / 2),
+				to: c.current(e.clientX, e.clientY)
+			}, window.addEventListener("pointermove", i), window.addEventListener("pointerup", o);
 		};
-		return e.addEventListener("pointerdown", l), () => {
-			e.removeEventListener("pointerdown", l), window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", o);
+		return e.addEventListener("pointerdown", s), () => {
+			e.removeEventListener("pointerdown", s), window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", o);
 		};
 	}), { connection: n };
 }
 //#endregion
 //#region src/core/use-story.ts
-var ne = 1500;
-function re(e) {
-	let { steps: r, loop: i = !0, stepDuration: a = ne, stepGap: s = 0 } = e, [c, u] = n({
+var re = 1500;
+function ie(e) {
+	let { steps: r, loop: i = !0, stepDuration: a = re, stepGap: o = 0 } = e, [c, l] = n({
 		value: e.currentStep,
 		defaultValue: e.defaultCurrentStep ?? 0,
 		onChange: e.onStepChange
@@ -482,9 +482,9 @@ function re(e) {
 		value: e.playing,
 		defaultValue: e.defaultPlaying ?? !0,
 		onChange: e.onPlayingChange
-	}), p = t(() => r[c.value] ?? null), m = l(e.clock);
+	}), p = t(() => r[c.value] ?? null), m = u(e.clock);
 	m.current = e.clock;
-	let h = l(r);
+	let h = u(r);
 	h.current = r;
 	let g = () => m.current ?? {
 		setTimeout: (e, t) => window.setTimeout(e, t),
@@ -493,17 +493,17 @@ function re(e) {
 		let t = h.current.length;
 		if (t === 0) return;
 		let n = c.peek() + e;
-		u(i ? (n % t + t) % t : Math.max(0, Math.min(t - 1, n)));
+		l(i ? (n % t + t) % t : Math.max(0, Math.min(t - 1, n)));
 	};
-	return o(() => {
+	return s(() => {
 		if (!d.value) return;
 		let e = c.value, t = r.length;
 		if (t === 0 || typeof window > "u" && !m.current) return;
-		let n = (r[e]?.duration ?? a) + s, o = g(), l = o.setTimeout(() => {
+		let n = (r[e]?.duration ?? a) + o, s = g(), u = s.setTimeout(() => {
 			let n = e + 1;
-			n >= t ? i ? u(0) : f(!1) : u(n);
+			n >= t ? i ? l(0) : f(!1) : l(n);
 		}, n);
-		return () => o.clearTimeout(l);
+		return () => s.clearTimeout(u);
 	}), {
 		currentStep: c,
 		playing: d,
@@ -514,7 +514,7 @@ function re(e) {
 		next: () => _(1),
 		prev: () => _(-1),
 		restart: () => {
-			u(0), f(!0);
+			l(0), f(!0);
 		}
 	};
 }
@@ -525,32 +525,32 @@ var G = {
 };
 //#endregion
 //#region src/core/flow-canvas/flow-canvas.tsx
-function ie({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportChange: a, minZoom: o, maxZoom: c, panOnDrag: l = !0, zoomOnScroll: u = !0, fitView: p = !1, controller: m, chrome: h, className: g, role: v = "application", ...y }) {
-	s();
-	let b = _({
+function ae({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportChange: a, minZoom: o, maxZoom: s, panOnDrag: l = !0, zoomOnScroll: u = !0, fitView: d = !1, controller: m, chrome: h, className: g, role: _ = "application", ...y }) {
+	c();
+	let b = v({
 		viewport: r,
 		defaultViewport: i,
 		onViewportChange: a
 	}), x = n ?? b, S = U(x, {
 		minZoom: o,
-		maxZoom: c,
+		maxZoom: s,
 		panOnDrag: l,
 		zoomOnScroll: u,
-		fitOnInit: p
+		fitOnInit: d
 	}), C = m ?? S, w = x.viewport.value;
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ p("div", {
 		ref: C.containerRef,
 		className: e(G.canvas, g),
-		role: v,
+		role: _,
 		...y,
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: G.pane,
 			style: {
 				"--flow-tx": `${w.x}px`,
 				"--flow-ty": `${w.y}px`,
 				"--flow-scale": String(w.zoom)
 			},
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ f("div", {
 				ref: C.panHandleRef,
 				className: G.panSurface,
 				"aria-hidden": "true"
@@ -558,14 +558,14 @@ function ie({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
 		}), h]
 	});
 }
-var ae = { background: "_background_1pu9x_2" };
+var oe = { background: "_background_1pu9x_2" };
 //#endregion
 //#region src/flows/flow-background/flow-background.tsx
-function oe({ variant: t = "dots", gap: n = 20, size: r = 1, color: i, className: a, style: o, ...s }) {
-	return /* @__PURE__ */ d("div", {
+function se({ variant: t = "dots", gap: n = 20, size: r = 1, color: i, className: a, style: o, ...s }) {
+	return /* @__PURE__ */ f("div", {
 		"data-variant": t,
 		"aria-hidden": "true",
-		className: e(ae.background, a),
+		className: e(oe.background, a),
 		style: {
 			"--flow-bg-gap": `${n}px`,
 			"--flow-bg-size": `${r}px`,
@@ -576,22 +576,22 @@ function oe({ variant: t = "dots", gap: n = 20, size: r = 1, color: i, className
 		...s
 	});
 }
-var se = { node: "_node_9zyg4_2" };
+var ce = { node: "_node_9zyg4_2" };
 //#endregion
 //#region src/flows/flow-node/flow-node.tsx
-function ce({ id: t, position: i, defaultPosition: a, onPositionChange: c, onMeasure: u, zoom: f = 1, selected: p = !1, draggable: m = !0, interactive: h = !0, onSelect: g, children: _, className: v, onClick: y, onKeyDown: b, ...x }) {
-	s();
+function le({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMeasure: l, zoom: d = 1, selected: p = !1, draggable: m = !0, interactive: h = !0, onSelect: g, children: _, className: v, onClick: y, onKeyDown: b, ...x }) {
+	c();
 	let S = m && h, [C, w] = n({
 		value: i,
 		defaultValue: a ?? i ?? {
 			x: 0,
 			y: 0
 		},
-		onChange: c
-	}), { handleRef: T, targetRef: E, offset: D, isDragging: O } = r({ isDisabled: !S }), k = l(null), A = (e) => {
+		onChange: o
+	}), { handleRef: T, targetRef: E, offset: D, isDragging: O } = r({ isDisabled: !S }), k = u(null), A = (e) => {
 		k.current = e, T.current = e, E.current = e;
-	}, j = l(u);
-	j.current = u, o(() => {
+	}, j = u(l);
+	j.current = l, s(() => {
 		let e = k.current;
 		if (!e || typeof ResizeObserver > "u") return;
 		let t = () => {
@@ -605,10 +605,10 @@ function ce({ id: t, position: i, defaultPosition: a, onPositionChange: c, onMea
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	});
-	let M = l(f);
-	M.current = f;
-	let N = l(null);
-	o(() => {
+	let M = u(d);
+	M.current = d;
+	let N = u(null);
+	s(() => {
 		let e = O.value, t = D.value;
 		if (!S) return;
 		if (!e) {
@@ -626,7 +626,7 @@ function ce({ id: t, position: i, defaultPosition: a, onPositionChange: c, onMea
 		});
 	});
 	let P = C.value;
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		ref: A,
 		"data-node-id": t,
 		"data-selected": p || void 0,
@@ -634,7 +634,7 @@ function ce({ id: t, position: i, defaultPosition: a, onPositionChange: c, onMea
 		"data-static": !h || void 0,
 		role: "group",
 		tabIndex: h ? 0 : void 0,
-		className: e(se.node, v),
+		className: e(ce.node, v),
 		style: {
 			"--flow-x": `${P.x}px`,
 			"--flow-y": `${P.y}px`
@@ -649,27 +649,27 @@ function ce({ id: t, position: i, defaultPosition: a, onPositionChange: c, onMea
 		children: _
 	});
 }
-var le = {
+var ue = {
 	handle: "_handle_8a1xa_2",
 	dot: "_dot_8a1xa_41"
 };
 //#endregion
 //#region src/flows/flow-handle/flow-handle.tsx
-function ue(e) {
+function de(e) {
 	return e === "source" ? "right" : "left";
 }
 function K({ type: t, position: n, id: r, isConnectable: i = !0, className: a, ...o }) {
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		"data-handle-type": t,
-		"data-handle-pos": n ?? ue(t),
+		"data-handle-pos": n ?? de(t),
 		"data-handle-id": r,
 		"data-connectable": i || void 0,
 		"data-flow-handle": "",
 		tabIndex: i ? 0 : -1,
-		className: e(le.handle, a),
+		className: e(ue.handle, a),
 		...o,
-		children: /* @__PURE__ */ d("span", {
-			className: le.dot,
+		children: /* @__PURE__ */ f("span", {
+			className: ue.dot,
 			"aria-hidden": "true"
 		})
 	});
@@ -684,8 +684,8 @@ var q = {
 };
 //#endregion
 //#region src/flows/flow-edge/flow-edge.tsx
-function J({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePosition: o = "right", targetPosition: s = "left", type: l = "bezier", animated: p = !1, label: m, selected: h = !1, markerStart: g = !1, markerEnd: _ = !0, direction: v = "forward", active: y, className: b }) {
-	let x = c(), S = `flow-arrow-${t ?? x}`, C = g || _, { d: w, mid: T } = F(l, {
+function J({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePosition: o = "right", targetPosition: s = "left", type: c = "bezier", animated: u = !1, label: m, selected: h = !1, markerStart: g = !1, markerEnd: _ = !0, direction: v = "forward", active: y, className: b }) {
+	let x = l(), S = `flow-arrow-${t ?? x}`, C = g || _, { d: w, mid: T } = I(c, {
 		source: {
 			x: n,
 			y: r
@@ -697,16 +697,16 @@ function J({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePositi
 		sourcePosition: o,
 		targetPosition: s
 	});
-	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("svg", {
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("svg", {
 		className: e(q.edgeSvg, b),
 		"data-edge-id": t,
-		"data-animated": p || void 0,
+		"data-animated": u || void 0,
 		"data-selected": h || void 0,
 		"data-active": y || void 0,
 		"data-direction": v,
 		"aria-hidden": "true",
 		children: [
-			C && /* @__PURE__ */ d("defs", { children: /* @__PURE__ */ d("marker", {
+			C && /* @__PURE__ */ f("defs", { children: /* @__PURE__ */ f("marker", {
 				id: S,
 				viewBox: "0 0 10 10",
 				refX: "9",
@@ -714,23 +714,23 @@ function J({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePositi
 				markerWidth: "7",
 				markerHeight: "7",
 				orient: "auto-start-reverse",
-				children: /* @__PURE__ */ d("path", {
+				children: /* @__PURE__ */ f("path", {
 					className: q.arrow,
 					d: "M0,0 L10,5 L0,10 z"
 				})
 			}) }),
-			/* @__PURE__ */ d("path", {
+			/* @__PURE__ */ f("path", {
 				className: q.hit,
 				d: w
 			}),
-			/* @__PURE__ */ d("path", {
+			/* @__PURE__ */ f("path", {
 				className: q.edgePath,
 				d: w,
 				markerStart: g ? `url(#${S})` : void 0,
 				markerEnd: _ ? `url(#${S})` : void 0
 			})
 		]
-	}), m != null && /* @__PURE__ */ d("div", {
+	}), m != null && /* @__PURE__ */ f("div", {
 		className: q.label,
 		style: {
 			"--flow-label-x": `${T.x}px`,
@@ -749,47 +749,47 @@ var Y = {
 	fill: "none",
 	"aria-hidden": !0
 };
-function de({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0, onZoomIn: i, onZoomOut: a, onFitView: o, labels: c, className: l, ...h }) {
-	return s(), /* @__PURE__ */ f("div", {
+function fe({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0, onZoomIn: i, onZoomOut: a, onFitView: o, labels: s, className: l, ...u }) {
+	return c(), /* @__PURE__ */ p("div", {
 		"data-position": t,
 		className: e(Y.controls, l),
-		...h,
-		children: [n && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("button", {
+		...u,
+		children: [n && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": c?.zoomIn ?? m(p.flow.zoomIn),
+			"aria-label": s?.zoomIn ?? h(m.flow.zoomIn),
 			onClick: i,
-			children: /* @__PURE__ */ d("svg", {
+			children: /* @__PURE__ */ f("svg", {
 				...X,
-				children: /* @__PURE__ */ d("path", {
+				children: /* @__PURE__ */ f("path", {
 					d: "M12 5v14M5 12h14",
 					stroke: "currentColor",
 					strokeWidth: "2",
 					strokeLinecap: "round"
 				})
 			})
-		}), /* @__PURE__ */ d("button", {
+		}), /* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": c?.zoomOut ?? m(p.flow.zoomOut),
+			"aria-label": s?.zoomOut ?? h(m.flow.zoomOut),
 			onClick: a,
-			children: /* @__PURE__ */ d("svg", {
+			children: /* @__PURE__ */ f("svg", {
 				...X,
-				children: /* @__PURE__ */ d("path", {
+				children: /* @__PURE__ */ f("path", {
 					d: "M5 12h14",
 					stroke: "currentColor",
 					strokeWidth: "2",
 					strokeLinecap: "round"
 				})
 			})
-		})] }), r && /* @__PURE__ */ d("button", {
+		})] }), r && /* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": c?.fitView ?? m(p.flow.fitView),
+			"aria-label": s?.fitView ?? h(m.flow.fitView),
 			onClick: o,
-			children: /* @__PURE__ */ d("svg", {
+			children: /* @__PURE__ */ f("svg", {
 				...X,
-				children: /* @__PURE__ */ d("path", {
+				children: /* @__PURE__ */ f("path", {
 					d: "M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4",
 					stroke: "currentColor",
 					strokeWidth: "2",
@@ -807,27 +807,27 @@ var Z = {
 };
 //#endregion
 //#region src/flows/flow-minimap/flow-minimap.tsx
-function fe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: c = 200, height: u = 150, position: h = "bottom-right", nodeColor: g, onViewportChange: _, label: v, className: b }) {
-	s();
-	let x = w(t) ?? {
+function pe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: g, onViewportChange: _, label: v, className: y }) {
+	c();
+	let x = T(t) ?? {
 		x: 0,
 		y: 0,
 		width: 1,
 		height: 1
-	}, C = x.width || 1, T = x.height || 1, E = C * .1, D = T * .1, O = {
+	}, S = x.width || 1, w = x.height || 1, E = S * .1, D = w * .1, O = {
 		x: x.x - E,
 		y: x.y - D,
-		width: C + E * 2,
-		height: T + D * 2
-	}, k = Math.min(c / O.width, u / O.height), A = -O.x * k + (c - O.width * k) / 2, j = -O.y * k + (u - O.height * k) / 2, M = (e) => ({
+		width: S + E * 2,
+		height: w + D * 2
+	}, k = Math.min(o / O.width, l / O.height), A = -O.x * k + (o - O.width * k) / 2, j = -O.y * k + (l - O.height * k) / 2, M = (e) => ({
 		x: e.x * k + A,
 		y: e.y * k + j
 	}), N = null;
 	if (i && a) {
-		let e = y({
+		let e = b({
 			x: 0,
 			y: 0
-		}, n), t = y({
+		}, n), t = b({
 			x: i,
 			y: a
 		}, n), r = M(e);
@@ -838,12 +838,12 @@ function fe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 			h: (t.y - e.y) * k
 		};
 	}
-	let { handleRef: P, offset: F, isDragging: I } = r({ isDisabled: !_ }), L = l(null), R = (e) => {
+	let { handleRef: P, offset: F, isDragging: I } = r({ isDisabled: !_ }), L = u(null), R = (e) => {
 		L.current = e, P.current = e;
-	}, z = l(_);
+	}, z = u(_);
 	z.current = _;
-	let B = l(null);
-	return o(() => {
+	let B = u(null);
+	return s(() => {
 		let e = I.value, t = F.value;
 		if (!z.current) return;
 		if (!e) {
@@ -860,19 +860,19 @@ function fe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 			y: r.vp.y - (t.y - r.off.y) / k * i,
 			zoom: i
 		});
-	}), /* @__PURE__ */ f("svg", {
-		"data-position": h,
-		className: e(Z.minimap, b),
-		width: c,
-		height: u,
+	}), /* @__PURE__ */ p("svg", {
+		"data-position": d,
+		className: e(Z.minimap, y),
+		width: o,
+		height: l,
 		role: "img",
-		"aria-label": v ?? m(p.flow.minimap),
+		"aria-label": v ?? h(m.flow.minimap),
 		children: [t.map((e) => {
-			let t = S(e), n = M({
+			let t = C(e), n = M({
 				x: t.x,
 				y: t.y
 			});
-			return /* @__PURE__ */ d("rect", {
+			return /* @__PURE__ */ f("rect", {
 				"data-node-id": e.id,
 				className: Z.node,
 				x: n.x,
@@ -881,7 +881,7 @@ function fe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 				height: t.height * k,
 				fill: g
 			}, e.id);
-		}), N && /* @__PURE__ */ d("rect", {
+		}), N && /* @__PURE__ */ f("rect", {
 			ref: R,
 			"data-viewport": "",
 			className: Z.viewport,
@@ -892,34 +892,34 @@ function fe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 		})]
 	});
 }
-var pe = { panel: "_panel_l0cix_2" };
+var me = { panel: "_panel_l0cix_2" };
 //#endregion
 //#region src/flows/flow-panel/flow-panel.tsx
-function me({ position: t = "top-right", children: n, className: r, ...i }) {
-	return /* @__PURE__ */ d("div", {
+function he({ position: t = "top-right", children: n, className: r, ...i }) {
+	return /* @__PURE__ */ f("div", {
 		"data-position": t,
-		className: e(pe.panel, r),
+		className: e(me.panel, r),
 		...i,
 		children: n
 	});
 }
-var he = { flow: "_flow_vejge_2" }, ge = 0;
-function _e({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect: o, nodeTypes: c, fitView: l = !0, background: p = !1, controls: m = !1, minimap: h = !1, layout: g, minZoom: v, maxZoom: b, interactive: x = !0, activeEdgeId: S, activeDirection: w, className: T, style: E }) {
-	s();
-	let D = _({
-		defaultNodes: g ? R(t, n, g) : t,
+var ge = { flow: "_flow_vejge_2" }, _e = 0;
+function ve({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect: a, nodeTypes: s, fitView: l = !0, background: u = !1, controls: m = !1, minimap: h = !1, layout: g, minZoom: _, maxZoom: y, interactive: x = !0, activeEdgeId: S, activeDirection: C, className: T, style: E }) {
+	c();
+	let D = v({
+		defaultNodes: g ? z(t, n, g) : t,
 		defaultEdges: n,
 		onNodesChange: r,
 		onEdgesChange: i
 	}), O = U(D, {
-		minZoom: v,
-		maxZoom: b,
+		minZoom: _,
+		maxZoom: y,
 		fitOnInit: l
 	}), { connection: k } = W({
 		containerRef: O.containerRef,
 		clientToFlow: (e, t) => {
 			let n = O.containerRef.current?.getBoundingClientRect();
-			return y({
+			return b({
 				x: e - (n?.left ?? 0),
 				y: t - (n?.top ?? 0)
 			}, D.viewport.peek());
@@ -927,17 +927,17 @@ function _e({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 		enabled: x,
 		onConnect: (e) => {
 			D.addEdge({
-				id: `e-${++ge}`,
+				id: `e-${++_e}`,
 				source: e.source,
 				target: e.target
-			}), o?.(e);
+			}), a?.(e);
 		}
 	}), A = (e) => {
 		D.setNodes(D.nodes.value.map((t) => ({
 			...t,
 			selected: t.id === e
 		})));
-	}, j = a({}), M = (e, t) => {
+	}, j = o({}), M = (e, t) => {
 		let n = j.peek()[e];
 		n && n.width === t.width && n.height === t.height || (j.value = {
 			...j.peek(),
@@ -950,32 +950,32 @@ function _e({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 			width: t.width,
 			height: t.height
 		} : e];
-	})), z = k.value;
-	return /* @__PURE__ */ f(ie, {
+	})), R = k.value;
+	return /* @__PURE__ */ p(ae, {
 		flow: D,
 		controller: O,
-		minZoom: v,
-		maxZoom: b,
-		chrome: /* @__PURE__ */ f(u, { children: [m && /* @__PURE__ */ d(de, {
+		minZoom: _,
+		maxZoom: y,
+		chrome: /* @__PURE__ */ p(d, { children: [m && /* @__PURE__ */ f(fe, {
 			onZoomIn: O.zoomIn,
 			onZoomOut: O.zoomOut,
 			onFitView: () => O.fitView()
-		}), h && /* @__PURE__ */ d(fe, {
+		}), h && /* @__PURE__ */ f(pe, {
 			nodes: N,
 			viewport: D.viewport.value,
 			containerWidth: O.containerRef.current?.clientWidth,
 			containerHeight: O.containerRef.current?.clientHeight,
 			onViewportChange: D.setViewport
 		})] }),
-		className: e(he.flow, T),
+		className: e(ge.flow, T),
 		style: E,
 		children: [
-			p && /* @__PURE__ */ d(oe, { ...typeof p == "object" ? p : {} }),
+			u && /* @__PURE__ */ f(se, { ...typeof u == "object" ? u : {} }),
 			P.map((e) => {
 				let t = L.get(e.source), n = L.get(e.target);
 				if (!t || !n) return null;
-				let r = C(t, "right"), i = C(n, "left"), a = S === e.id, o = a ? w : void 0, s = o === "reverse" ? !0 : o === "forward" ? !1 : e.markerStart ?? !1, c = o === "reverse" ? !1 : o === "forward" ? !0 : e.markerEnd ?? !0;
-				return /* @__PURE__ */ d(J, {
+				let r = w(t, "right"), i = w(n, "left"), a = S === e.id, o = a ? C : void 0, s = o === "reverse" ? !0 : o === "forward" ? !1 : e.markerStart ?? !1, c = o === "reverse" ? !1 : o === "forward" ? !0 : e.markerEnd ?? !0;
+				return /* @__PURE__ */ f(J, {
 					id: e.id,
 					sourceX: r.x,
 					sourceY: r.y,
@@ -991,14 +991,14 @@ function _e({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 					selected: e.selected
 				}, e.id);
 			}),
-			z && /* @__PURE__ */ d(J, {
-				sourceX: z.from.x,
-				sourceY: z.from.y,
-				targetX: z.to.x,
-				targetY: z.to.y,
+			R && /* @__PURE__ */ f(J, {
+				sourceX: R.from.x,
+				sourceY: R.from.y,
+				targetX: R.to.x,
+				targetY: R.to.y,
 				markerEnd: !1
 			}),
-			N.map((e) => /* @__PURE__ */ d(ce, {
+			N.map((e) => /* @__PURE__ */ f(le, {
 				id: e.id,
 				position: e.position,
 				zoom: F,
@@ -1007,13 +1007,13 @@ function _e({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 				onSelect: x ? A : void 0,
 				onMeasure: (t) => M(e.id, t),
 				onPositionChange: (t) => D.updateNode(e.id, { position: t }),
-				children: c && e.type && c[e.type] ? c[e.type]({ node: e }) : /* @__PURE__ */ f(u, { children: [
-					/* @__PURE__ */ d("span", { children: String(e.data?.label ?? e.id) }),
-					x && /* @__PURE__ */ d(K, {
+				children: s && e.type && s[e.type] ? s[e.type]({ node: e }) : /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ f("span", { children: String(e.data?.label ?? e.id) }),
+					x && /* @__PURE__ */ f(K, {
 						type: "target",
 						position: "left"
 					}),
-					x && /* @__PURE__ */ d(K, {
+					x && /* @__PURE__ */ f(K, {
 						type: "source",
 						position: "right"
 					})
@@ -1038,53 +1038,53 @@ var Q = {
 	fill: "currentColor",
 	"aria-hidden": !0
 };
-function ve({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 1500, stepGap: o = 0, playing: c, currentStep: l, onStepChange: u, controls: h = !0, autoPlay: g = !0, background: _ = !0, interactive: v = !1, labels: y, clock: b, className: x, style: S }) {
-	s();
-	let C = V(r, n), w = re({
+function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 1500, stepGap: o = 0, playing: s, currentStep: l, onStepChange: u, controls: d = !0, autoPlay: g = !0, background: _ = !0, interactive: v = !1, labels: y, clock: b, className: x, style: S }) {
+	c();
+	let C = V(r, n), w = ie({
 		steps: C,
 		loop: i,
 		stepDuration: a,
 		stepGap: o,
-		playing: c,
+		playing: s,
 		defaultPlaying: g,
 		currentStep: l,
 		defaultCurrentStep: 0,
 		onStepChange: u,
 		clock: b
 	}), T = w.activeStep.value, E = w.currentStep.value, D = w.playing.value;
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ p("div", {
 		className: e(Q.story, x),
 		style: S,
-		children: [/* @__PURE__ */ d(_e, {
+		children: [/* @__PURE__ */ f(ve, {
 			nodes: t,
 			edges: n,
 			background: _,
 			interactive: v,
 			activeEdgeId: T?.edgeId,
 			activeDirection: T?.direction
-		}), /* @__PURE__ */ f("div", {
+		}), /* @__PURE__ */ p("div", {
 			className: Q.overlay,
-			children: [/* @__PURE__ */ d("div", {
+			children: [/* @__PURE__ */ f("div", {
 				className: Q.caption,
 				"aria-live": "polite",
-				children: T?.label && /* @__PURE__ */ f("span", {
+				children: T?.label && /* @__PURE__ */ p("span", {
 					className: Q.captionText,
-					children: [/* @__PURE__ */ d("strong", { children: T.label }), T.description && /* @__PURE__ */ f("span", {
+					children: [/* @__PURE__ */ f("strong", { children: T.label }), T.description && /* @__PURE__ */ p("span", {
 						className: Q.captionDesc,
 						children: [" — ", T.description]
 					})]
 				}, E)
-			}), h && /* @__PURE__ */ f("div", {
+			}), d && /* @__PURE__ */ p("div", {
 				className: Q.controls,
 				children: [
-					/* @__PURE__ */ d("button", {
+					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": y?.previous ?? m(p.flow.previous),
+						"aria-label": y?.previous ?? h(m.flow.previous),
 						onClick: w.prev,
-						children: /* @__PURE__ */ d("svg", {
+						children: /* @__PURE__ */ f("svg", {
 							...$,
-							children: /* @__PURE__ */ d("path", {
+							children: /* @__PURE__ */ f("path", {
 								d: "M15 6 9 12l6 6",
 								stroke: "currentColor",
 								strokeWidth: "2",
@@ -1092,28 +1092,28 @@ function ve({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 							})
 						})
 					}),
-					/* @__PURE__ */ d("button", {
+					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": D ? y?.pause ?? m(p.flow.pause) : y?.play ?? m(p.flow.play),
+						"aria-label": D ? y?.pause ?? h(m.flow.pause) : y?.play ?? h(m.flow.play),
 						"aria-pressed": D,
 						onClick: w.toggle,
-						children: D ? /* @__PURE__ */ d("svg", {
+						children: D ? /* @__PURE__ */ f("svg", {
 							...$,
-							children: /* @__PURE__ */ d("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" })
-						}) : /* @__PURE__ */ d("svg", {
+							children: /* @__PURE__ */ f("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" })
+						}) : /* @__PURE__ */ f("svg", {
 							...$,
-							children: /* @__PURE__ */ d("path", { d: "M7 5l11 7-11 7z" })
+							children: /* @__PURE__ */ f("path", { d: "M7 5l11 7-11 7z" })
 						})
 					}),
-					/* @__PURE__ */ d("button", {
+					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": y?.next ?? m(p.flow.next),
+						"aria-label": y?.next ?? h(m.flow.next),
 						onClick: w.next,
-						children: /* @__PURE__ */ d("svg", {
+						children: /* @__PURE__ */ f("svg", {
 							...$,
-							children: /* @__PURE__ */ d("path", {
+							children: /* @__PURE__ */ f("path", {
 								d: "M9 6l6 6-6 6",
 								stroke: "currentColor",
 								strokeWidth: "2",
@@ -1121,9 +1121,9 @@ function ve({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 							})
 						})
 					}),
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ f("span", {
 						className: Q.indicator,
-						children: m(p.flow.step, {
+						children: h(m.flow.step, {
 							current: E + 1,
 							total: C.length
 						})
@@ -1134,4 +1134,4 @@ function ve({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 	});
 }
 //#endregion
-export { h as DEFAULT_NODE_SIZE, _e as Flow, oe as FlowBackground, ie as FlowCanvas, de as FlowControls, J as FlowEdge, K as FlowHandle, fe as FlowMiniMap, ce as FlowNode, me as FlowPanel, ve as FlowStory, R as applyLayout, A as bezierPath, v as clampZoom, F as edgePath, T as fitViewport, b as flowToScreen, w as graphBounds, I as gridLayout, C as handleAnchor, L as layeredLayout, S as nodeBounds, x as nodeSize, V as resolveScript, B as resolveStep, y as screenToFlow, P as smoothStepPath, k as straightPath, W as useConnection, _ as useFlow, re as useStory, U as useViewport };
+export { g as DEFAULT_NODE_SIZE, ve as Flow, se as FlowBackground, ae as FlowCanvas, fe as FlowControls, J as FlowEdge, K as FlowHandle, pe as FlowMiniMap, le as FlowNode, he as FlowPanel, ye as FlowStory, z as applyLayout, j as bezierPath, y as clampZoom, I as edgePath, E as fitViewport, x as flowToScreen, T as graphBounds, L as gridLayout, w as handleAnchor, R as layeredLayout, C as nodeBounds, S as nodeSize, V as resolveScript, ee as resolveStep, b as screenToFlow, F as smoothStepPath, A as straightPath, W as useConnection, v as useFlow, ie as useStory, U as useViewport };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/flow",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "description": "Flow & diagram components — CSS-native, signal-driven node/edge graphs with pan/zoom, draggable nodes, animated edges, and scripted storylines, zero dependencies",
   "keywords": [
@@ -46,8 +46,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.5.3",
-    "@cascivo/i18n": "^0.2.11"
+    "@cascivo/core": "^0.6.0",
+    "@cascivo/i18n": "^0.2.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",