@cascivo/flow 0.1.18 → 0.16.0

package/dist/node/index.js

@@ -0,0 +1,1138 @@
+"use client";
+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 { cn as m } from "@cascivo/core/pure";
+import { builtin as h, t as g } from "@cascivo/i18n";
+//#region src/engine/types.ts
+var _ = {
+	width: 150,
+	height: 40
+}, v = {
+	x: 0,
+	y: 0,
+	zoom: 1
+};
+function y(e = {}) {
+	let [t, r] = n({
+		value: e.nodes,
+		defaultValue: e.defaultNodes ?? [],
+		onChange: e.onNodesChange
+	}), [i, a] = n({
+		value: e.edges,
+		defaultValue: e.defaultEdges ?? [],
+		onChange: e.onEdgesChange
+	}), [o, s] = n({
+		value: e.viewport,
+		defaultValue: e.defaultViewport ?? v,
+		onChange: e.onViewportChange
+	});
+	return {
+		nodes: t,
+		edges: i,
+		viewport: o,
+		setNodes: r,
+		updateNode: (e, n) => {
+			r(t.value.map((t) => t.id === e ? {
+				...t,
+				...n
+			} : t));
+		},
+		setEdges: a,
+		addEdge: (e) => {
+			a([...i.value, e]);
+		},
+		setViewport: s
+	};
+}
+//#endregion
+//#region src/engine/transform.ts
+function b(e, t = .2, n = 2) {
+	return Math.min(n, Math.max(t, e));
+}
+function x(e, t) {
+	return {
+		x: (e.x - t.x) / t.zoom,
+		y: (e.y - t.y) / t.zoom
+	};
+}
+function S(e, t) {
+	return {
+		x: e.x * t.zoom + t.x,
+		y: e.y * t.zoom + t.y
+	};
+}
+//#endregion
+//#region src/engine/geometry.ts
+function C(e) {
+	return {
+		width: e.width ?? _.width,
+		height: e.height ?? _.height
+	};
+}
+function w(e) {
+	let { width: t, height: n } = C(e);
+	return {
+		x: e.position.x,
+		y: e.position.y,
+		width: t,
+		height: n
+	};
+}
+function T(e, t) {
+	let { x: n, y: r, width: i, height: a } = w(e);
+	switch (t) {
+		case "top": return {
+			x: n + i / 2,
+			y: r
+		};
+		case "right": return {
+			x: n + i,
+			y: r + a / 2
+		};
+		case "bottom": return {
+			x: n + i / 2,
+			y: r + a
+		};
+		case "left": return {
+			x: n,
+			y: r + a / 2
+		};
+	}
+}
+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 = 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 {
+		x: t,
+		y: n,
+		width: r - t,
+		height: i - 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 = 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,
+		zoom: c
+	};
+}
+//#endregion
+//#region src/engine/path.ts
+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 A(e) {
+	switch (e) {
+		case "top": return {
+			x: 0,
+			y: -1
+		};
+		case "bottom": return {
+			x: 0,
+			y: 1
+		};
+		case "left": return {
+			x: -1,
+			y: 0
+		};
+		case "right": return {
+			x: 1,
+			y: 0
+		};
+	}
+}
+function j({ source: e, target: t }) {
+	return {
+		d: `M${O(e.x)},${O(e.y)} L${O(t.x)},${O(t.y)}`,
+		mid: k(e, t)
+	};
+}
+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 = {
+		x: n.x + l.x * s,
+		y: n.y + l.y * s
+	}, f = {
+		x: (t.x + 3 * u.x + 3 * d.x + n.x) / 8,
+		y: (t.y + 3 * u.y + 3 * d.y + n.y) / 8
+	};
+	return {
+		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 N(e, t) {
+	return Math.hypot(t.x - e.x, t.y - e.y);
+}
+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 F(e, t) {
+	if (e.length < 2) return "";
+	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, 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${O(i.x)},${O(i.y)}`, r;
+}
+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;
+		o.push({
+			x: e,
+			y: t.y
+		}, {
+			x: e,
+			y: n.y
+		});
+	} else {
+		let e = (t.y + n.y) / 2;
+		o.push({
+			x: t.x,
+			y: e
+		}, {
+			x: n.x,
+			y: e
+		});
+	}
+	return o.push(n), {
+		d: F(o, r),
+		mid: k(t, n)
+	};
+}
+function L(e, t) {
+	switch (e) {
+		case "straight": return j(t);
+		case "smoothstep": return I(t);
+		case "bezier": return M(t);
+	}
+}
+//#endregion
+//#region src/engine/layout.ts
+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 {
+			...e,
+			position: {
+				x: o * (r + n),
+				y: s * (i + n)
+			}
+		};
+	});
+}
+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);
+	for (let e of d) u.set(e, 0);
+	let f = new Map(l);
+	for (; d.length > 0;) {
+		let e = [];
+		for (let t of d) {
+			let n = u.get(t) ?? 0;
+			for (let r of c.get(t) ?? []) u.set(r, Math.max(u.get(r) ?? 0, n + 1)), f.set(r, (f.get(r) ?? 0) - 1), (f.get(r) ?? 0) === 0 && e.push(r);
+		}
+		d = e;
+	}
+	for (let t of e) u.has(t.id) || u.set(t.id, 0);
+	let p = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let e = u.get(t.id) ?? 0, n = m.get(e) ?? 0;
+		p.set(t.id, n), m.set(e, n + 1);
+	}
+	return e.map((e) => {
+		let t = u.get(e.id) ?? 0, n = p.get(e.id) ?? 0, s = r === "LR" ? {
+			x: t * (a + i),
+			y: n * (o + i)
+		} : {
+			x: n * (a + i),
+			y: t * (o + i)
+		};
+		return {
+			...e,
+			position: s
+		};
+	});
+}
+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 ee(e) {
+	return "edge" in e;
+}
+function te(e, t) {
+	let n = {
+		label: e.label,
+		description: e.description,
+		duration: e.duration
+	};
+	if (ee(e)) {
+		let r = t.find((t) => t.id === e.edge);
+		if (!r) throw Error(`FlowStory: step references unknown edge "${e.edge}"`);
+		return {
+			edgeId: r.id,
+			direction: e.reverse ? "reverse" : "forward",
+			...n
+		};
+	}
+	let r = t.find((t) => t.source === e.from && t.target === e.to);
+	if (r) return {
+		edgeId: r.id,
+		direction: "forward",
+		...n
+	};
+	let i = t.find((t) => t.source === e.to && t.target === e.from);
+	if (i) return {
+		edgeId: i.id,
+		direction: "reverse",
+		...n
+	};
+	throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`);
+}
+function V(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 }), y = (e, t) => {
+		let n = f.peek();
+		p({
+			x: n.x + e,
+			y: n.y + t,
+			zoom: n.zoom
+		});
+	}, S = (e, t) => {
+		let r = f.peek(), a = b(e, n, i);
+		if (!t) {
+			p({
+				x: r.x,
+				y: r.y,
+				zoom: a
+			});
+			return;
+		}
+		let o = x(t, r);
+		p({
+			x: t.x - o.x * a,
+			y: t.y - o.y * a,
+			zoom: a
+		});
+	}, C = () => {
+		let e = m.current;
+		if (e) return {
+			x: e.clientWidth / 2,
+			y: e.clientHeight / 2
+		};
+	}, 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;
+		return t && t.clientWidth > 0 ? {
+			width: t.clientWidth,
+			height: t.clientHeight
+		} : null;
+	}, k = (t) => {
+		let r = E(e.nodes.peek());
+		if (!r) return;
+		let a = t ?? O();
+		a && p(D(r, a, {
+			padding: l,
+			minZoom: n,
+			maxZoom: i
+		}));
+	}, A = u(null);
+	s(() => {
+		let e = v.value, t = _.value;
+		if (!o) return;
+		if (!e) {
+			A.current = null;
+			return;
+		}
+		A.current ||= {
+			vp: f.peek(),
+			off: t
+		};
+		let n = A.current;
+		p({
+			x: n.vp.x + (t.x - n.off.x),
+			y: n.vp.y + (t.y - n.off.y),
+			zoom: n.vp.zoom
+		});
+	}), s(() => {
+		if (!c || typeof window > "u") return;
+		let e = m.current;
+		if (!e) return;
+		let t = (t) => {
+			t.preventDefault();
+			let n = e.getBoundingClientRect(), r = {
+				x: t.clientX - n.left,
+				y: t.clientY - n.top
+			}, i = t.deltaY < 0 ? H : 1 / H;
+			S(f.peek().zoom * i, r);
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	});
+	let j = u(!1);
+	return s(() => {
+		if (!d || j.current) return;
+		let e = h.value;
+		!e || e.width === 0 || (j.current = !0, k(e));
+	}), {
+		containerRef: m,
+		panHandleRef: g,
+		viewport: f,
+		pan: y,
+		zoomTo: S,
+		zoomIn: w,
+		zoomOut: T,
+		fitView: k
+	};
+}
+//#endregion
+//#region src/core/use-connection.ts
+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;
+	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 i = (e) => {
+			let t = n.peek();
+			t && (n.value = {
+				...t,
+				to: c.current(e.clientX, e.clientY)
+			});
+		}, 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(re) : null, l = c?.closest("[data-node-id]");
+			if (!l) return;
+			let u = {
+				source: t.source,
+				target: l.getAttribute("data-node-id") ?? "",
+				sourceHandle: t.sourceHandle,
+				targetHandle: c?.getAttribute("data-handle-id") ?? void 0
+			};
+			!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(ne);
+			if (!r) return;
+			let a = r.closest("[data-node-id]");
+			if (!a) return;
+			e.stopPropagation();
+			let s = r.getBoundingClientRect();
+			n.value = {
+				source: a.getAttribute("data-node-id") ?? "",
+				sourceHandle: r.getAttribute("data-handle-id") ?? void 0,
+				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", s), () => {
+			e.removeEventListener("pointerdown", s), window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", o);
+		};
+	}), { connection: n };
+}
+//#endregion
+//#region src/core/use-story.ts
+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
+	}), [d, f] = n({
+		value: e.playing,
+		defaultValue: e.defaultPlaying ?? !0,
+		onChange: e.onPlayingChange
+	}), p = t(() => r[c.value] ?? null), m = u(e.clock);
+	m.current = e.clock;
+	let h = u(r);
+	h.current = r;
+	let g = () => m.current ?? {
+		setTimeout: (e, t) => window.setTimeout(e, t),
+		clearTimeout: (e) => window.clearTimeout(e)
+	}, _ = (e) => {
+		let t = h.current.length;
+		if (t === 0) return;
+		let n = c.peek() + e;
+		l(i ? (n % t + t) % t : Math.max(0, Math.min(t - 1, n)));
+	};
+	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) + o, s = g(), u = s.setTimeout(() => {
+			let n = e + 1;
+			n >= t ? i ? l(0) : f(!1) : l(n);
+		}, n);
+		return () => s.clearTimeout(u);
+	}), {
+		currentStep: c,
+		playing: d,
+		activeStep: p,
+		play: () => f(!0),
+		pause: () => f(!1),
+		toggle: () => f(!d.peek()),
+		next: () => _(1),
+		prev: () => _(-1),
+		restart: () => {
+			l(0), f(!0);
+		}
+	};
+}
+var G = {
+	canvas: "_canvas_6fiig_2",
+	pane: "_pane_6fiig_13",
+	panSurface: "_panSurface_6fiig_24"
+};
+//#endregion
+//#region src/core/flow-canvas/flow-canvas.tsx
+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 = y({
+		viewport: r,
+		defaultViewport: i,
+		onViewportChange: a
+	}), x = n ?? b, S = U(x, {
+		minZoom: o,
+		maxZoom: s,
+		panOnDrag: l,
+		zoomOnScroll: u,
+		fitOnInit: d
+	}), C = m ?? S, w = x.viewport.value;
+	return /* @__PURE__ */ p("div", {
+		ref: C.containerRef,
+		className: e(G.canvas, g),
+		role: _,
+		...v,
+		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__ */ f("div", {
+				ref: C.panHandleRef,
+				className: G.panSurface,
+				"aria-hidden": "true"
+			}), t]
+		}), h]
+	});
+}
+var se = { background: "_background_1pu9x_2" };
+//#endregion
+//#region src/flows/flow-background/flow-background.tsx
+function ce({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className: i, style: a, ...o }) {
+	return /* @__PURE__ */ f("div", {
+		"data-variant": e,
+		"aria-hidden": "true",
+		className: m(se.background, i),
+		style: {
+			"--flow-bg-gap": `${t}px`,
+			"--flow-bg-size": `${n}px`,
+			"--flow-bg-thick": `${Math.max(1, n)}px`,
+			...r ? { "--flow-bg-color": r } : {},
+			...a
+		},
+		...o
+	});
+}
+var le = { node: "_node_9zyg4_2" };
+//#endregion
+//#region src/flows/flow-node/flow-node.tsx
+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,
+		defaultValue: a ?? i ?? {
+			x: 0,
+			y: 0
+		},
+		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 = u(l);
+	j.current = l, s(() => {
+		let e = k.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => {
+			let t = e.offsetWidth, n = e.offsetHeight;
+			t > 0 && n > 0 && j.current?.({
+				width: t,
+				height: n
+			});
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	});
+	let M = u(d);
+	M.current = d;
+	let N = u(null);
+	s(() => {
+		let e = O.value, t = D.value;
+		if (!S) return;
+		if (!e) {
+			N.current = null;
+			return;
+		}
+		N.current ||= {
+			pos: C.peek(),
+			off: t
+		};
+		let n = N.current, r = M.current || 1;
+		w({
+			x: n.pos.x + (t.x - n.off.x) / r,
+			y: n.pos.y + (t.y - n.off.y) / r
+		});
+	});
+	let P = C.value;
+	return /* @__PURE__ */ f("div", {
+		ref: A,
+		"data-node-id": t,
+		"data-selected": p || void 0,
+		"data-dragging": O.value || void 0,
+		"data-static": !h || void 0,
+		role: "group",
+		tabIndex: h ? 0 : void 0,
+		className: e(le.node, v),
+		style: {
+			"--flow-x": `${P.x}px`,
+			"--flow-y": `${P.y}px`
+		},
+		onClick: (e) => {
+			h && g?.(t), y?.(e);
+		},
+		onKeyDown: (e) => {
+			h && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), g?.(t)), b?.(e);
+		},
+		...x,
+		children: _
+	});
+}
+var de = {
+	handle: "_handle_8a1xa_2",
+	dot: "_dot_8a1xa_41"
+};
+//#endregion
+//#region src/flows/flow-handle/flow-handle.tsx
+function fe(e) {
+	return e === "source" ? "right" : "left";
+}
+function K({ type: e, position: t, id: n, isConnectable: r = !0, className: i, ...a }) {
+	return /* @__PURE__ */ f("div", {
+		"data-handle-type": e,
+		"data-handle-pos": t ?? fe(e),
+		"data-handle-id": n,
+		"data-connectable": r || void 0,
+		"data-flow-handle": "",
+		tabIndex: r ? 0 : -1,
+		className: m(de.handle, i),
+		...a,
+		children: /* @__PURE__ */ f("span", {
+			className: de.dot,
+			"aria-hidden": "true"
+		})
+	});
+}
+var q = {
+	edgeSvg: "_edgeSvg_789n0_2",
+	edgePath: "_edgePath_789n0_11",
+	hit: "_hit_789n0_18",
+	arrow: "_arrow_789n0_26",
+	"cascivo-flow-dash": "_cascivo-flow-dash_789n0_1",
+	label: "_label_789n0_64"
+};
+//#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 } = L(c, {
+		source: {
+			x: n,
+			y: r
+		},
+		target: {
+			x: i,
+			y: a
+		},
+		sourcePosition: o,
+		targetPosition: s
+	});
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("svg", {
+		className: e(q.edgeSvg, b),
+		"data-edge-id": t,
+		"data-animated": u || void 0,
+		"data-selected": h || void 0,
+		"data-active": y || void 0,
+		"data-direction": v,
+		"aria-hidden": "true",
+		children: [
+			C && /* @__PURE__ */ f("defs", { children: /* @__PURE__ */ f("marker", {
+				id: S,
+				viewBox: "0 0 10 10",
+				refX: "9",
+				refY: "5",
+				markerWidth: "7",
+				markerHeight: "7",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ f("path", {
+					className: q.arrow,
+					d: "M0,0 L10,5 L0,10 z"
+				})
+			}) }),
+			/* @__PURE__ */ f("path", {
+				className: q.hit,
+				d: w
+			}),
+			/* @__PURE__ */ f("path", {
+				className: q.edgePath,
+				d: w,
+				markerStart: g ? `url(#${S})` : void 0,
+				markerEnd: _ ? `url(#${S})` : void 0
+			})
+		]
+	}), m != null && /* @__PURE__ */ f("div", {
+		className: q.label,
+		style: {
+			"--flow-label-x": `${T.x}px`,
+			"--flow-label-y": `${T.y}px`
+		},
+		children: m
+	})] });
+}
+var Y = {
+	controls: "_controls_s32im_2",
+	button: "_button_s32im_32"
+}, X = {
+	width: 18,
+	height: 18,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": !0
+};
+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),
+		...u,
+		children: [n && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": s?.zoomIn ?? g(h.flow.zoomIn),
+			onClick: i,
+			children: /* @__PURE__ */ f("svg", {
+				...X,
+				children: /* @__PURE__ */ f("path", {
+					d: "M12 5v14M5 12h14",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			})
+		}), /* @__PURE__ */ f("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": s?.zoomOut ?? g(h.flow.zoomOut),
+			onClick: a,
+			children: /* @__PURE__ */ f("svg", {
+				...X,
+				children: /* @__PURE__ */ f("path", {
+					d: "M5 12h14",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			})
+		})] }), r && /* @__PURE__ */ f("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": s?.fitView ?? g(h.flow.fitView),
+			onClick: o,
+			children: /* @__PURE__ */ f("svg", {
+				...X,
+				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",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})]
+	});
+}
+var Z = {
+	minimap: "_minimap_rdahv_2",
+	node: "_node_rdahv_28",
+	viewport: "_viewport_rdahv_32"
+};
+//#endregion
+//#region src/flows/flow-minimap/flow-minimap.tsx
+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 b = E(t) ?? {
+		x: 0,
+		y: 0,
+		width: 1,
+		height: 1
+	}, 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 = x({
+			x: 0,
+			y: 0
+		}, n), t = x({
+			x: i,
+			y: a
+		}, n), r = M(e);
+		N = {
+			x: r.x,
+			y: r.y,
+			w: (t.x - e.x) * k,
+			h: (t.y - e.y) * k
+		};
+	}
+	let { handleRef: P, offset: F, isDragging: I } = r({ isDisabled: !_ }), L = u(null), R = (e) => {
+		L.current = e, P.current = e;
+	}, z = u(_);
+	z.current = _;
+	let B = u(null);
+	return s(() => {
+		let e = I.value, t = F.value;
+		if (!z.current) return;
+		if (!e) {
+			B.current = null;
+			return;
+		}
+		B.current ||= {
+			vp: n,
+			off: t
+		};
+		let r = B.current, i = r.vp.zoom;
+		z.current({
+			x: r.vp.x - (t.x - r.off.x) / k * i,
+			y: r.vp.y - (t.y - r.off.y) / k * i,
+			zoom: i
+		});
+	}), /* @__PURE__ */ p("svg", {
+		"data-position": d,
+		className: e(Z.minimap, y),
+		width: o,
+		height: l,
+		role: "img",
+		"aria-label": v ?? g(h.flow.minimap),
+		children: [t.map((e) => {
+			let t = w(e), n = M({
+				x: t.x,
+				y: t.y
+			});
+			return /* @__PURE__ */ f("rect", {
+				"data-node-id": e.id,
+				className: Z.node,
+				x: n.x,
+				y: n.y,
+				width: t.width * k,
+				height: t.height * k,
+				fill: m
+			}, e.id);
+		}), N && /* @__PURE__ */ f("rect", {
+			ref: R,
+			"data-viewport": "",
+			className: Z.viewport,
+			x: N.x,
+			y: N.y,
+			width: N.w,
+			height: N.h
+		})]
+	});
+}
+var he = { panel: "_panel_l0cix_2" };
+//#endregion
+//#region src/flows/flow-panel/flow-panel.tsx
+function ge({ position: e = "top-right", children: t, className: n, ...r }) {
+	return /* @__PURE__ */ f("div", {
+		"data-position": e,
+		className: m(he.panel, n),
+		...r,
+		children: t
+	});
+}
+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 = y({
+		defaultNodes: g ? B(t, n, g) : t,
+		defaultEdges: n,
+		onNodesChange: r,
+		onEdgesChange: i
+	}), O = U(D, {
+		minZoom: _,
+		maxZoom: v,
+		fitOnInit: l
+	}), { connection: k } = W({
+		containerRef: O.containerRef,
+		clientToFlow: (e, t) => {
+			let n = O.containerRef.current?.getBoundingClientRect();
+			return x({
+				x: e - (n?.left ?? 0),
+				y: t - (n?.top ?? 0)
+			}, D.viewport.peek());
+		},
+		enabled: b,
+		onConnect: (e) => {
+			D.addEdge({
+				id: `e-${++ve}`,
+				source: e.source,
+				target: e.target
+			}), a?.(e);
+		}
+	}), A = (e) => {
+		D.setNodes(D.nodes.value.map((t) => ({
+			...t,
+			selected: t.id === e
+		})));
+	}, j = o({}), M = (e, t) => {
+		let n = j.peek()[e];
+		n && n.width === t.width && n.height === t.height || (j.value = {
+			...j.peek(),
+			[e]: t
+		});
+	}, N = D.nodes.value, P = D.edges.value, F = D.viewport.value.zoom, I = j.value, L = new Map(N.map((e) => {
+		let t = I[e.id];
+		return [e.id, t ? {
+			...e,
+			width: t.width,
+			height: t.height
+		} : e];
+	})), R = k.value;
+	return /* @__PURE__ */ p(oe, {
+		flow: D,
+		controller: O,
+		minZoom: _,
+		maxZoom: v,
+		chrome: /* @__PURE__ */ p(d, { children: [m && /* @__PURE__ */ f(pe, {
+			onZoomIn: O.zoomIn,
+			onZoomOut: O.zoomOut,
+			onFitView: () => O.fitView()
+		}), 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(_e.flow, w),
+		style: E,
+		children: [
+			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 = 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,
+					sourceY: r.y,
+					targetX: i.x,
+					targetY: i.y,
+					type: e.type ?? "bezier",
+					animated: e.animated || a,
+					active: a,
+					direction: o,
+					markerStart: s,
+					markerEnd: c,
+					label: e.label,
+					selected: e.selected
+				}, e.id);
+			}),
+			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__ */ f(ue, {
+				id: e.id,
+				position: e.position,
+				zoom: F,
+				interactive: b,
+				selected: e.selected ?? !1,
+				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) }),
+					b && /* @__PURE__ */ f(K, {
+						type: "target",
+						position: "left"
+					}),
+					b && /* @__PURE__ */ f(K, {
+						type: "source",
+						position: "right"
+					})
+				] })
+			}, e.id))
+		]
+	});
+}
+var Q = {
+	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,
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": !0
+};
+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 = ae({
+		steps: C,
+		loop: i,
+		stepDuration: a,
+		stepGap: o,
+		playing: s,
+		defaultPlaying: m,
+		currentStep: l,
+		defaultCurrentStep: 0,
+		onStepChange: u,
+		clock: b
+	}), T = w.activeStep.value, E = w.currentStep.value, D = w.playing.value;
+	return /* @__PURE__ */ p("div", {
+		className: e(Q.story, x),
+		style: S,
+		children: [/* @__PURE__ */ f(ye, {
+			nodes: t,
+			edges: n,
+			background: _,
+			interactive: v,
+			activeEdgeId: T?.edgeId,
+			activeDirection: T?.direction
+		}), /* @__PURE__ */ p("div", {
+			className: Q.overlay,
+			children: [/* @__PURE__ */ f("div", {
+				className: Q.caption,
+				"aria-live": "polite",
+				children: T?.label && /* @__PURE__ */ p("span", {
+					className: Q.captionText,
+					children: [/* @__PURE__ */ f("strong", { children: T.label }), T.description && /* @__PURE__ */ p("span", {
+						className: Q.captionDesc,
+						children: [" — ", T.description]
+					})]
+				}, E)
+			}), d && /* @__PURE__ */ p("div", {
+				className: Q.controls,
+				children: [
+					/* @__PURE__ */ f("button", {
+						type: "button",
+						className: Q.button,
+						"aria-label": y?.previous ?? g(h.flow.previous),
+						onClick: w.prev,
+						children: /* @__PURE__ */ f("svg", {
+							...$,
+							children: /* @__PURE__ */ f("path", {
+								d: "M15 6 9 12l6 6",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								fill: "none"
+							})
+						})
+					}),
+					/* @__PURE__ */ f("button", {
+						type: "button",
+						className: Q.button,
+						"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", {
+							...$,
+							children: /* @__PURE__ */ f("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" })
+						}) : /* @__PURE__ */ f("svg", {
+							...$,
+							children: /* @__PURE__ */ f("path", { d: "M7 5l11 7-11 7z" })
+						})
+					}),
+					/* @__PURE__ */ f("button", {
+						type: "button",
+						className: Q.button,
+						"aria-label": y?.next ?? g(h.flow.next),
+						onClick: w.next,
+						children: /* @__PURE__ */ f("svg", {
+							...$,
+							children: /* @__PURE__ */ f("path", {
+								d: "M9 6l6 6-6 6",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								fill: "none"
+							})
+						})
+					}),
+					/* @__PURE__ */ f("span", {
+						className: Q.indicator,
+						children: g(h.flow.step, {
+							current: E + 1,
+							total: C.length
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+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 };