@cascivo/flow 0.1.18 → 0.16.0

package/dist/index.js

@@ -1,18 +1,20 @@
 "use client";
+import './flow.css';
 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";
+import { cn as m } from "@cascivo/core/pure";
+import { builtin as h, t as g } from "@cascivo/i18n";
 //#region src/engine/types.ts
-var g = {
+var _ = {
 	width: 150,
 	height: 40
-}, _ = {
+}, v = {
 	x: 0,
 	y: 0,
 	zoom: 1
 };
-function v(e = {}) {
+function y(e = {}) {
 	let [t, r] = n({
 		value: e.nodes,
 		defaultValue: e.defaultNodes ?? [],
@@ -23,7 +25,7 @@ function v(e = {}) {
 		onChange: e.onEdgesChange
 	}), [o, s] = n({
 		value: e.viewport,
-		defaultValue: e.defaultViewport ?? _,
+		defaultValue: e.defaultViewport ?? v,
 		onChange: e.onViewportChange
 	});
 	return {
@@ -46,16 +48,16 @@ function v(e = {}) {
 }
 //#endregion
 //#region src/engine/transform.ts
-function y(e, t = .2, n = 2) {
+function b(e, t = .2, n = 2) {
 	return Math.min(n, Math.max(t, e));
 }
-function b(e, t) {
+function x(e, t) {
 	return {
 		x: (e.x - t.x) / t.zoom,
 		y: (e.y - t.y) / t.zoom
 	};
 }
-function x(e, t) {
+function S(e, t) {
 	return {
 		x: e.x * t.zoom + t.x,
 		y: e.y * t.zoom + t.y
@@ -63,14 +65,14 @@ function x(e, t) {
 }
 //#endregion
 //#region src/engine/geometry.ts
-function S(e) {
+function C(e) {
 	return {
-		width: e.width ?? g.width,
-		height: e.height ?? g.height
+		width: e.width ?? _.width,
+		height: e.height ?? _.height
 	};
 }
-function C(e) {
-	let { width: t, height: n } = S(e);
+function w(e) {
+	let { width: t, height: n } = C(e);
 	return {
 		x: e.position.x,
 		y: e.position.y,
@@ -78,8 +80,8 @@ function C(e) {
 		height: n
 	};
 }
-function w(e, t) {
-	let { x: n, y: r, width: i, height: a } = C(e);
+function T(e, t) {
+	let { x: n, y: r, width: i, height: a } = w(e);
 	switch (t) {
 		case "top": return {
 			x: n + i / 2,
@@ -99,11 +101,11 @@ function w(e, t) {
 		};
 	}
 }
-function T(e) {
+function E(e) {
 	if (e.length === 0) return null;
 	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity;
 	for (let a of e) {
-		let e = C(a);
+		let e = w(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 +115,14 @@ function T(e) {
 		height: i - n
 	};
 }
-function E(e, t, n = {}) {
+function D(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 = y(Math.min(o, s), i, a);
+	let o = t.width / (e.width * (1 + r * 2)), s = t.height / (e.height * (1 + r * 2)), c = b(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 +131,11 @@ function E(e, t, n = {}) {
 }
 //#endregion
 //#region src/engine/path.ts
-var D = (e) => Number.isInteger(e) ? String(e) : e.toFixed(2).replace(/\.?0+$/, ""), O = (e, t) => ({
+var O = (e) => Number.isInteger(e) ? String(e) : e.toFixed(2).replace(/\.?0+$/, ""), k = (e, t) => ({
 	x: (e.x + t.x) / 2,
 	y: (e.y + t.y) / 2
 });
-function k(e) {
+function A(e) {
 	switch (e) {
 		case "top": return {
 			x: 0,
@@ -153,14 +155,14 @@ function k(e) {
 		};
 	}
 }
-function A({ source: e, target: t }) {
+function j({ source: e, target: t }) {
 	return {
-		d: `M${D(e.x)},${D(e.y)} L${D(t.x)},${D(t.y)}`,
-		mid: O(e, t)
+		d: `M${O(e.x)},${O(e.y)} L${O(t.x)},${O(t.y)}`,
+		mid: k(e, t)
 	};
 }
-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 = {
+function M(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 = A(i), l = A(a), u = {
 		x: t.x + c.x * s,
 		y: t.y + c.y * s
 	}, d = {
@@ -171,31 +173,31 @@ function j(e) {
 		y: (t.y + 3 * u.y + 3 * d.y + n.y) / 8
 	};
 	return {
-		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)}`,
+		d: `M${O(t.x)},${O(t.y)} C${O(u.x)},${O(u.y)} ${O(d.x)},${O(d.y)} ${O(n.x)},${O(n.y)}`,
 		mid: f
 	};
 }
-function M(e, t) {
+function N(e, t) {
 	return Math.hypot(t.x - e.x, t.y - e.y);
 }
-function N(e, t, n) {
-	let r = M(e, t) || 1;
+function P(e, t, n) {
+	let r = N(e, t) || 1;
 	return {
 		x: e.x + (t.x - e.x) / r * n,
 		y: e.y + (t.y - e.y) / r * n
 	};
 }
-function P(e, t) {
+function F(e, t) {
 	if (e.length < 2) return "";
-	let n = e[0], r = `M${D(n.x)},${D(n.y)}`;
+	let n = e[0], r = `M${O(n.x)},${O(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, 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[n - 1], a = e[n], o = e[n + 1], s = Math.min(t, N(i, a) / 2, N(a, o) / 2), c = P(a, i, s), l = P(a, o, s);
+		r += ` L${O(c.x)},${O(c.y)} Q${O(a.x)},${O(a.y)} ${O(l.x)},${O(l.y)}`;
 	}
 	let i = e[e.length - 1];
-	return r += ` L${D(i.x)},${D(i.y)}`, r;
+	return r += ` L${O(i.x)},${O(i.y)}`, r;
 }
-function F(e) {
+function I(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 +219,21 @@ function F(e) {
 		});
 	}
 	return o.push(n), {
-		d: P(o, r),
-		mid: O(t, n)
+		d: F(o, r),
+		mid: k(t, n)
 	};
 }
-function I(e, t) {
+function L(e, t) {
 	switch (e) {
-		case "straight": return A(t);
-		case "smoothstep": return F(t);
-		case "bezier": return j(t);
+		case "straight": return j(t);
+		case "smoothstep": return I(t);
+		case "bezier": return M(t);
 	}
 }
 //#endregion
 //#region src/engine/layout.ts
-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)));
+function R(e, t = {}) {
+	let n = t.gap ?? 40, r = t.nodeWidth ?? _.width, i = t.nodeHeight ?? _.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 +245,8 @@ function L(e, t = {}) {
 		};
 	});
 }
-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();
+function z(e, t, n = {}) {
+	let r = n.direction ?? "LR", i = n.gap ?? 60, a = n.nodeWidth ?? _.width, o = n.nodeHeight ?? _.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 +280,21 @@ function R(e, t, n = {}) {
 		};
 	});
 }
-function z(e, t, n) {
-	return n === "grid" ? L(e) : n === "layered" ? R(e, t) : n(e, t);
+function B(e, t, n) {
+	return n === "grid" ? R(e) : n === "layered" ? z(e, t) : n(e, t);
 }
 //#endregion
 //#region src/engine/script.ts
-function B(e) {
+function ee(e) {
 	return "edge" in e;
 }
-function ee(e, t) {
+function te(e, t) {
 	let n = {
 		label: e.label,
 		description: e.description,
 		duration: e.duration
 	};
-	if (B(e)) {
+	if (ee(e)) {
 		let r = t.find((t) => t.id === e.edge);
 		if (!r) throw Error(`FlowStory: step references unknown edge "${e.edge}"`);
 		return {
@@ -316,13 +318,13 @@ function ee(e, t) {
 	throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`);
 }
 function V(e, t) {
-	return e.map((e) => ee(e, t));
+	return e.map((e) => te(e, t));
 }
 //#endregion
 //#region src/core/use-viewport.ts
 var H = 1.2;
 function U(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 { 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 }), y = (e, t) => {
 		let n = f.peek();
 		p({
 			x: n.x + e,
@@ -330,7 +332,7 @@ function U(e, t = {}) {
 			zoom: n.zoom
 		});
 	}, S = (e, t) => {
-		let r = f.peek(), a = y(e, n, i);
+		let r = f.peek(), a = b(e, n, i);
 		if (!t) {
 			p({
 				x: r.x,
@@ -339,7 +341,7 @@ function U(e, t = {}) {
 			});
 			return;
 		}
-		let o = b(t, r);
+		let o = x(t, r);
 		p({
 			x: t.x - o.x * a,
 			y: t.y - o.y * a,
@@ -351,7 +353,7 @@ function U(e, t = {}) {
 			x: e.clientWidth / 2,
 			y: e.clientHeight / 2
 		};
-	}, w = () => S(f.peek().zoom * H, C()), D = () => S(f.peek().zoom / H, C()), O = () => {
+	}, w = () => S(f.peek().zoom * H, C()), T = () => 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,10 +362,10 @@ function U(e, t = {}) {
 			height: t.clientHeight
 		} : null;
 	}, k = (t) => {
-		let r = T(e.nodes.peek());
+		let r = E(e.nodes.peek());
 		if (!r) return;
 		let a = t ?? O();
-		a && p(E(r, a, {
+		a && p(D(r, a, {
 			padding: l,
 			minZoom: n,
 			maxZoom: i
@@ -409,16 +411,16 @@ function U(e, t = {}) {
 		containerRef: m,
 		panHandleRef: g,
 		viewport: f,
-		pan: x,
+		pan: y,
 		zoomTo: S,
 		zoomIn: w,
-		zoomOut: D,
+		zoomOut: T,
 		fitView: k
 	};
 }
 //#endregion
 //#region src/core/use-connection.ts
-var te = "[data-flow-handle][data-handle-type=\"source\"]", ne = "[data-flow-handle][data-handle-type=\"target\"]";
+var ne = "[data-flow-handle][data-handle-type=\"source\"]", re = "[data-flow-handle][data-handle-type=\"target\"]";
 function W(e) {
 	let { containerRef: t } = e, n = o(null), r = u(e.onConnect);
 	r.current = e.onConnect;
@@ -440,7 +442,7 @@ function W(e) {
 		}, o = (e) => {
 			let t = n.peek();
 			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]");
+			let s = e.target, c = s instanceof Element ? s.closest(re) : null, l = c?.closest("[data-node-id]");
 			if (!l) return;
 			let u = {
 				source: t.source,
@@ -452,7 +454,7 @@ function W(e) {
 		}, s = (e) => {
 			let t = e.target;
 			if (!(t instanceof Element)) return;
-			let r = t.closest(te);
+			let r = t.closest(ne);
 			if (!r) return;
 			let a = r.closest("[data-node-id]");
 			if (!a) return;
@@ -472,9 +474,9 @@ function W(e) {
 }
 //#endregion
 //#region src/core/use-story.ts
-var re = 1500;
-function ie(e) {
-	let { steps: r, loop: i = !0, stepDuration: a = re, stepGap: o = 0 } = e, [c, l] = n({
+var ie = 1500;
+function ae(e) {
+	let { steps: r, loop: i = !0, stepDuration: a = ie, stepGap: o = 0 } = e, [c, l] = n({
 		value: e.currentStep,
 		defaultValue: e.defaultCurrentStep ?? 0,
 		onChange: e.onStepChange
@@ -525,9 +527,9 @@ var G = {
 };
 //#endregion
 //#region src/core/flow-canvas/flow-canvas.tsx
-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 }) {
+function oe({ 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", ...v }) {
 	c();
-	let b = v({
+	let b = y({
 		viewport: r,
 		defaultViewport: i,
 		onViewportChange: a
@@ -542,7 +544,7 @@ function ae({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
 		ref: C.containerRef,
 		className: e(G.canvas, g),
 		role: _,
-		...y,
+		...v,
 		children: [/* @__PURE__ */ p("div", {
 			className: G.pane,
 			style: {
@@ -558,28 +560,28 @@ function ae({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
 		}), h]
 	});
 }
-var oe = { background: "_background_1pu9x_2" };
+var se = { background: "_background_1pu9x_2" };
 //#endregion
 //#region src/flows/flow-background/flow-background.tsx
-function se({ variant: t = "dots", gap: n = 20, size: r = 1, color: i, className: a, style: o, ...s }) {
+function ce({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className: i, style: a, ...o }) {
 	return /* @__PURE__ */ f("div", {
-		"data-variant": t,
+		"data-variant": e,
 		"aria-hidden": "true",
-		className: e(oe.background, a),
+		className: m(se.background, i),
 		style: {
-			"--flow-bg-gap": `${n}px`,
-			"--flow-bg-size": `${r}px`,
-			"--flow-bg-thick": `${Math.max(1, r)}px`,
-			...i ? { "--flow-bg-color": i } : {},
-			...o
+			"--flow-bg-gap": `${t}px`,
+			"--flow-bg-size": `${n}px`,
+			"--flow-bg-thick": `${Math.max(1, n)}px`,
+			...r ? { "--flow-bg-color": r } : {},
+			...a
 		},
-		...s
+		...o
 	});
 }
-var ce = { node: "_node_9zyg4_2" };
+var le = { node: "_node_9zyg4_2" };
 //#endregion
 //#region src/flows/flow-node/flow-node.tsx
-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 }) {
+function ue({ 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,
@@ -634,7 +636,7 @@ function le({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
 		"data-static": !h || void 0,
 		role: "group",
 		tabIndex: h ? 0 : void 0,
-		className: e(ce.node, v),
+		className: e(le.node, v),
 		style: {
 			"--flow-x": `${P.x}px`,
 			"--flow-y": `${P.y}px`
@@ -649,27 +651,27 @@ function le({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
 		children: _
 	});
 }
-var ue = {
+var de = {
 	handle: "_handle_8a1xa_2",
 	dot: "_dot_8a1xa_41"
 };
 //#endregion
 //#region src/flows/flow-handle/flow-handle.tsx
-function de(e) {
+function fe(e) {
 	return e === "source" ? "right" : "left";
 }
-function K({ type: t, position: n, id: r, isConnectable: i = !0, className: a, ...o }) {
+function K({ type: e, position: t, id: n, isConnectable: r = !0, className: i, ...a }) {
 	return /* @__PURE__ */ f("div", {
-		"data-handle-type": t,
-		"data-handle-pos": n ?? de(t),
-		"data-handle-id": r,
-		"data-connectable": i || void 0,
+		"data-handle-type": e,
+		"data-handle-pos": t ?? fe(e),
+		"data-handle-id": n,
+		"data-connectable": r || void 0,
 		"data-flow-handle": "",
-		tabIndex: i ? 0 : -1,
-		className: e(ue.handle, a),
-		...o,
+		tabIndex: r ? 0 : -1,
+		className: m(de.handle, i),
+		...a,
 		children: /* @__PURE__ */ f("span", {
-			className: ue.dot,
+			className: de.dot,
 			"aria-hidden": "true"
 		})
 	});
@@ -685,7 +687,7 @@ 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: 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, {
+	let x = l(), S = `flow-arrow-${t ?? x}`, C = g || _, { d: w, mid: T } = L(c, {
 		source: {
 			x: n,
 			y: r
@@ -740,8 +742,8 @@ function J({ id: t, sourceX: n, sourceY: r, targetX: i, targetY: a, sourcePositi
 	})] });
 }
 var Y = {
-	controls: "_controls_c0e5r_2",
-	button: "_button_c0e5r_32"
+	controls: "_controls_s32im_2",
+	button: "_button_s32im_32"
 }, X = {
 	width: 18,
 	height: 18,
@@ -749,7 +751,7 @@ var Y = {
 	fill: "none",
 	"aria-hidden": !0
 };
-function fe({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0, onZoomIn: i, onZoomOut: a, onFitView: o, labels: s, className: l, ...u }) {
+function pe({ 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),
@@ -757,7 +759,7 @@ function fe({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0
 		children: [n && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": s?.zoomIn ?? h(m.flow.zoomIn),
+			"aria-label": s?.zoomIn ?? g(h.flow.zoomIn),
 			onClick: i,
 			children: /* @__PURE__ */ f("svg", {
 				...X,
@@ -771,7 +773,7 @@ function fe({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0
 		}), /* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": s?.zoomOut ?? h(m.flow.zoomOut),
+			"aria-label": s?.zoomOut ?? g(h.flow.zoomOut),
 			onClick: a,
 			children: /* @__PURE__ */ f("svg", {
 				...X,
@@ -785,7 +787,7 @@ function fe({ position: t = "bottom-left", showZoom: n = !0, showFitView: r = !0
 		})] }), r && /* @__PURE__ */ f("button", {
 			type: "button",
 			className: Y.button,
-			"aria-label": s?.fitView ?? h(m.flow.fitView),
+			"aria-label": s?.fitView ?? g(h.flow.fitView),
 			onClick: o,
 			children: /* @__PURE__ */ f("svg", {
 				...X,
@@ -807,27 +809,27 @@ var Z = {
 };
 //#endregion
 //#region src/flows/flow-minimap/flow-minimap.tsx
-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 }) {
+function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: m, onViewportChange: _, label: v, className: y }) {
 	c();
-	let x = T(t) ?? {
+	let b = E(t) ?? {
 		x: 0,
 		y: 0,
 		width: 1,
 		height: 1
-	}, S = x.width || 1, w = x.height || 1, E = S * .1, D = w * .1, O = {
-		x: x.x - E,
-		y: x.y - D,
-		width: S + E * 2,
-		height: w + D * 2
+	}, S = b.width || 1, C = b.height || 1, T = S * .1, D = C * .1, O = {
+		x: b.x - T,
+		y: b.y - D,
+		width: S + T * 2,
+		height: C + 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 = b({
+		let e = x({
 			x: 0,
 			y: 0
-		}, n), t = b({
+		}, n), t = x({
 			x: i,
 			y: a
 		}, n), r = M(e);
@@ -866,9 +868,9 @@ function pe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 		width: o,
 		height: l,
 		role: "img",
-		"aria-label": v ?? h(m.flow.minimap),
+		"aria-label": v ?? g(h.flow.minimap),
 		children: [t.map((e) => {
-			let t = C(e), n = M({
+			let t = w(e), n = M({
 				x: t.x,
 				y: t.y
 			});
@@ -879,7 +881,7 @@ function pe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 				y: n.y,
 				width: t.width * k,
 				height: t.height * k,
-				fill: g
+				fill: m
 			}, e.id);
 		}), N && /* @__PURE__ */ f("rect", {
 			ref: R,
@@ -892,42 +894,42 @@ function pe({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
 		})]
 	});
 }
-var me = { panel: "_panel_l0cix_2" };
+var he = { panel: "_panel_l0cix_2" };
 //#endregion
 //#region src/flows/flow-panel/flow-panel.tsx
-function he({ position: t = "top-right", children: n, className: r, ...i }) {
+function ge({ position: e = "top-right", children: t, className: n, ...r }) {
 	return /* @__PURE__ */ f("div", {
-		"data-position": t,
-		className: e(me.panel, r),
-		...i,
-		children: n
+		"data-position": e,
+		className: m(he.panel, n),
+		...r,
+		children: 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 }) {
+var _e = { flow: "_flow_vejge_2" }, ve = 0;
+function ye({ 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: v, interactive: b = !0, activeEdgeId: S, activeDirection: C, className: w, style: E }) {
 	c();
-	let D = v({
-		defaultNodes: g ? z(t, n, g) : t,
+	let D = y({
+		defaultNodes: g ? B(t, n, g) : t,
 		defaultEdges: n,
 		onNodesChange: r,
 		onEdgesChange: i
 	}), O = U(D, {
 		minZoom: _,
-		maxZoom: y,
+		maxZoom: v,
 		fitOnInit: l
 	}), { connection: k } = W({
 		containerRef: O.containerRef,
 		clientToFlow: (e, t) => {
 			let n = O.containerRef.current?.getBoundingClientRect();
-			return b({
+			return x({
 				x: e - (n?.left ?? 0),
 				y: t - (n?.top ?? 0)
 			}, D.viewport.peek());
 		},
-		enabled: x,
+		enabled: b,
 		onConnect: (e) => {
 			D.addEdge({
-				id: `e-${++_e}`,
+				id: `e-${++ve}`,
 				source: e.source,
 				target: e.target
 			}), a?.(e);
@@ -951,30 +953,30 @@ function ve({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 			height: t.height
 		} : e];
 	})), R = k.value;
-	return /* @__PURE__ */ p(ae, {
+	return /* @__PURE__ */ p(oe, {
 		flow: D,
 		controller: O,
 		minZoom: _,
-		maxZoom: y,
-		chrome: /* @__PURE__ */ p(d, { children: [m && /* @__PURE__ */ f(fe, {
+		maxZoom: v,
+		chrome: /* @__PURE__ */ p(d, { children: [m && /* @__PURE__ */ f(pe, {
 			onZoomIn: O.zoomIn,
 			onZoomOut: O.zoomOut,
 			onFitView: () => O.fitView()
-		}), h && /* @__PURE__ */ f(pe, {
+		}), h && /* @__PURE__ */ f(me, {
 			nodes: N,
 			viewport: D.viewport.value,
 			containerWidth: O.containerRef.current?.clientWidth,
 			containerHeight: O.containerRef.current?.clientHeight,
 			onViewportChange: D.setViewport
 		})] }),
-		className: e(ge.flow, T),
+		className: e(_e.flow, w),
 		style: E,
 		children: [
-			u && /* @__PURE__ */ f(se, { ...typeof u == "object" ? u : {} }),
+			u && /* @__PURE__ */ f(ce, { ...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 = 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;
+				let r = T(t, "right"), i = T(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,
@@ -998,22 +1000,22 @@ function ve({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 				targetY: R.to.y,
 				markerEnd: !1
 			}),
-			N.map((e) => /* @__PURE__ */ f(le, {
+			N.map((e) => /* @__PURE__ */ f(ue, {
 				id: e.id,
 				position: e.position,
 				zoom: F,
-				interactive: x,
+				interactive: b,
 				selected: e.selected ?? !1,
-				onSelect: x ? A : void 0,
+				onSelect: b ? A : void 0,
 				onMeasure: (t) => M(e.id, t),
 				onPositionChange: (t) => D.updateNode(e.id, { position: t }),
 				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, {
+					b && /* @__PURE__ */ f(K, {
 						type: "target",
 						position: "left"
 					}),
-					x && /* @__PURE__ */ f(K, {
+					b && /* @__PURE__ */ f(K, {
 						type: "source",
 						position: "right"
 					})
@@ -1023,14 +1025,14 @@ function ve({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
 	});
 }
 var Q = {
-	story: "_story_7qja0_2",
-	overlay: "_overlay_7qja0_7",
-	caption: "_caption_7qja0_20",
-	captionText: "_captionText_7qja0_36",
-	captionDesc: "_captionDesc_7qja0_48",
-	controls: "_controls_7qja0_52",
-	button: "_button_7qja0_64",
-	indicator: "_indicator_7qja0_93"
+	story: "_story_btt88_2",
+	overlay: "_overlay_btt88_7",
+	caption: "_caption_btt88_20",
+	captionText: "_captionText_btt88_36",
+	captionDesc: "_captionDesc_btt88_48",
+	controls: "_controls_btt88_52",
+	button: "_button_btt88_64",
+	indicator: "_indicator_btt88_93"
 }, $ = {
 	width: 18,
 	height: 18,
@@ -1038,15 +1040,15 @@ var Q = {
 	fill: "currentColor",
 	"aria-hidden": !0
 };
-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 }) {
+function be({ 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: m = !0, background: _ = !0, interactive: v = !1, labels: y, clock: b, className: x, style: S }) {
 	c();
-	let C = V(r, n), w = ie({
+	let C = V(r, n), w = ae({
 		steps: C,
 		loop: i,
 		stepDuration: a,
 		stepGap: o,
 		playing: s,
-		defaultPlaying: g,
+		defaultPlaying: m,
 		currentStep: l,
 		defaultCurrentStep: 0,
 		onStepChange: u,
@@ -1055,7 +1057,7 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 	return /* @__PURE__ */ p("div", {
 		className: e(Q.story, x),
 		style: S,
-		children: [/* @__PURE__ */ f(ve, {
+		children: [/* @__PURE__ */ f(ye, {
 			nodes: t,
 			edges: n,
 			background: _,
@@ -1080,7 +1082,7 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": y?.previous ?? h(m.flow.previous),
+						"aria-label": y?.previous ?? g(h.flow.previous),
 						onClick: w.prev,
 						children: /* @__PURE__ */ f("svg", {
 							...$,
@@ -1095,7 +1097,7 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": D ? y?.pause ?? h(m.flow.pause) : y?.play ?? h(m.flow.play),
+						"aria-label": D ? y?.pause ?? g(h.flow.pause) : y?.play ?? g(h.flow.play),
 						"aria-pressed": D,
 						onClick: w.toggle,
 						children: D ? /* @__PURE__ */ f("svg", {
@@ -1109,7 +1111,7 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 					/* @__PURE__ */ f("button", {
 						type: "button",
 						className: Q.button,
-						"aria-label": y?.next ?? h(m.flow.next),
+						"aria-label": y?.next ?? g(h.flow.next),
 						onClick: w.next,
 						children: /* @__PURE__ */ f("svg", {
 							...$,
@@ -1123,7 +1125,7 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 					}),
 					/* @__PURE__ */ f("span", {
 						className: Q.indicator,
-						children: h(m.flow.step, {
+						children: g(h.flow.step, {
 							current: E + 1,
 							total: C.length
 						})
@@ -1134,4 +1136,4 @@ function ye({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
 	});
 }
 //#endregion
-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 };
+export { _ as DEFAULT_NODE_SIZE, ye as Flow, ce as FlowBackground, oe as FlowCanvas, pe as FlowControls, J as FlowEdge, K as FlowHandle, me as FlowMiniMap, ue as FlowNode, ge as FlowPanel, be as FlowStory, B as applyLayout, M as bezierPath, b as clampZoom, L as edgePath, D as fitViewport, S as flowToScreen, E as graphBounds, R as gridLayout, T as handleAnchor, z as layeredLayout, w as nodeBounds, C as nodeSize, V as resolveScript, te as resolveStep, x as screenToFlow, I as smoothStepPath, j as straightPath, W as useConnection, y as useFlow, ae as useStory, U as useViewport };