@cascivo/flow 0.1.4 → 0.1.9

package/dist/index.js

@@ -0,0 +1,1137 @@
+"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";
+//#region src/engine/types.ts
+var h = {
+	width: 150,
+	height: 40
+}, g = {
+	x: 0,
+	y: 0,
+	zoom: 1
+};
+function _(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 ?? g,
+		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 v(e, t = .2, n = 2) {
+	return Math.min(n, Math.max(t, e));
+}
+function y(e, t) {
+	return {
+		x: (e.x - t.x) / t.zoom,
+		y: (e.y - t.y) / t.zoom
+	};
+}
+function b(e, t) {
+	return {
+		x: e.x * t.zoom + t.x,
+		y: e.y * t.zoom + t.y
+	};
+}
+//#endregion
+//#region src/engine/geometry.ts
+function x(e) {
+	return {
+		width: e.width ?? h.width,
+		height: e.height ?? h.height
+	};
+}
+function S(e) {
+	let { width: t, height: n } = x(e);
+	return {
+		x: e.position.x,
+		y: e.position.y,
+		width: t,
+		height: n
+	};
+}
+function C(e, t) {
+	let { x: n, y: r, width: i, height: a } = S(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 w(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);
+		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 T(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);
+	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 E = (e) => Number.isInteger(e) ? String(e) : e.toFixed(2).replace(/\.?0+$/, ""), D = (e, t) => ({
+	x: (e.x + t.x) / 2,
+	y: (e.y + t.y) / 2
+});
+function O(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 k({ source: e, target: t }) {
+	return {
+		d: `M${E(e.x)},${E(e.y)} L${E(t.x)},${E(t.y)}`,
+		mid: D(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 = {
+		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${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)}`,
+		mid: f
+	};
+}
+function j(e, t) {
+	return Math.hypot(t.x - e.x, t.y - e.y);
+}
+function M(e, t, n) {
+	let r = j(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) {
+	if (e.length < 2) return "";
+	let n = e[0], r = `M${E(n.x)},${E(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[e.length - 1];
+	return r += ` L${E(i.x)},${E(i.y)}`, r;
+}
+function P(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: N(o, r),
+		mid: D(t, n)
+	};
+}
+function F(e, t) {
+	switch (e) {
+		case "straight": return k(t);
+		case "smoothstep": return P(t);
+		case "bezier": return A(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)));
+	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 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();
+	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 R(e, t, n) {
+	return n === "grid" ? I(e) : n === "layered" ? L(e, t) : n(e, t);
+}
+//#endregion
+//#region src/engine/script.ts
+function z(e) {
+	return "edge" in e;
+}
+function B(e, t) {
+	let n = {
+		label: e.label,
+		description: e.description,
+		duration: e.duration
+	};
+	if (z(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) => B(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 n = f.peek();
+		p({
+			x: n.x + e,
+			y: n.y + t,
+			zoom: n.zoom
+		});
+	}, S = (e, t) => {
+		let r = f.peek(), i = v(e, n, a);
+		if (!t) {
+			p({
+				x: r.x,
+				y: r.y,
+				zoom: i
+			});
+			return;
+		}
+		let o = y(t, r);
+		p({
+			x: t.x - o.x * i,
+			y: t.y - o.y * i,
+			zoom: i
+		});
+	}, C = () => {
+		let e = m.current;
+		if (e) return {
+			x: e.clientWidth / 2,
+			y: e.clientHeight / 2
+		};
+	}, E = () => 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;
+		return t && t.clientWidth > 0 ? {
+			width: t.clientWidth,
+			height: t.clientHeight
+		} : null;
+	}, k = (t) => {
+		let r = w(e.nodes.peek());
+		if (!r) return;
+		let i = t ?? O();
+		i && p(T(r, i, {
+			padding: u,
+			minZoom: n,
+			maxZoom: a
+		}));
+	}, A = l(null);
+	o(() => {
+		let e = b.value, t = _.value;
+		if (!s) 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
+		});
+	}), o(() => {
+		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 = l(!1);
+	return o(() => {
+		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: x,
+		zoomTo: S,
+		zoomIn: E,
+		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\"]";
+function W(e) {
+	let { containerRef: t } = e, n = a(null), r = l(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 e = t.current;
+		if (!e) return;
+		let a = (e) => {
+			let t = n.peek();
+			t && (n.value = {
+				...t,
+				to: s.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 (!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 || i.current && !i.current(u) || r.current?.(u);
+		}, l = (e) => {
+			let t = e.target;
+			if (!(t instanceof Element)) return;
+			let r = t.closest(ee);
+			if (!r) return;
+			let i = r.closest("[data-node-id]");
+			if (!i) return;
+			e.stopPropagation();
+			let c = r.getBoundingClientRect();
+			n.value = {
+				source: i.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);
+		};
+		return e.addEventListener("pointerdown", l), () => {
+			e.removeEventListener("pointerdown", l), window.removeEventListener("pointermove", a), 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({
+		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 = l(e.clock);
+	m.current = e.clock;
+	let h = l(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;
+		u(i ? (n % t + t) % t : Math.max(0, Math.min(t - 1, n)));
+	};
+	return o(() => {
+		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 = e + 1;
+			n >= t ? i ? u(0) : f(!1) : u(n);
+		}, n);
+		return () => o.clearTimeout(l);
+	}), {
+		currentStep: c,
+		playing: d,
+		activeStep: p,
+		play: () => f(!0),
+		pause: () => f(!1),
+		toggle: () => f(!d.peek()),
+		next: () => _(1),
+		prev: () => _(-1),
+		restart: () => {
+			u(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 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 = _({
+		viewport: r,
+		defaultViewport: i,
+		onViewportChange: a
+	}), x = n ?? b, S = U(x, {
+		minZoom: o,
+		maxZoom: c,
+		panOnDrag: l,
+		zoomOnScroll: u,
+		fitOnInit: p
+	}), C = m ?? S, w = x.viewport.value;
+	return /* @__PURE__ */ f("div", {
+		ref: C.containerRef,
+		className: e(G.canvas, g),
+		role: v,
+		...y,
+		children: [/* @__PURE__ */ f("div", {
+			className: G.pane,
+			style: {
+				"--flow-tx": `${w.x}px`,
+				"--flow-ty": `${w.y}px`,
+				"--flow-scale": String(w.zoom)
+			},
+			children: [/* @__PURE__ */ d("div", {
+				ref: C.panHandleRef,
+				className: G.panSurface,
+				"aria-hidden": "true"
+			}), t]
+		}), h]
+	});
+}
+var ae = { 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", {
+		"data-variant": t,
+		"aria-hidden": "true",
+		className: e(ae.background, a),
+		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
+		},
+		...s
+	});
+}
+var se = { 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();
+	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) => {
+		k.current = e, T.current = e, E.current = e;
+	}, j = l(u);
+	j.current = u, o(() => {
+		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 = l(f);
+	M.current = f;
+	let N = l(null);
+	o(() => {
+		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__ */ d("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(se.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 le = {
+	handle: "_handle_8a1xa_2",
+	dot: "_dot_8a1xa_41"
+};
+//#endregion
+//#region src/flows/flow-handle/flow-handle.tsx
+function ue(e) {
+	return e === "source" ? "right" : "left";
+}
+function K({ type: t, position: n, id: r, isConnectable: i = !0, className: a, ...o }) {
+	return /* @__PURE__ */ d("div", {
+		"data-handle-type": t,
+		"data-handle-pos": n ?? ue(t),
+		"data-handle-id": r,
+		"data-connectable": i || void 0,
+		"data-flow-handle": "",
+		tabIndex: i ? 0 : -1,
+		className: e(le.handle, a),
+		...o,
+		children: /* @__PURE__ */ d("span", {
+			className: le.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: 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, {
+		source: {
+			x: n,
+			y: r
+		},
+		target: {
+			x: i,
+			y: a
+		},
+		sourcePosition: o,
+		targetPosition: s
+	});
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("svg", {
+		className: e(q.edgeSvg, b),
+		"data-edge-id": t,
+		"data-animated": p || 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", {
+				id: S,
+				viewBox: "0 0 10 10",
+				refX: "9",
+				refY: "5",
+				markerWidth: "7",
+				markerHeight: "7",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ d("path", {
+					className: q.arrow,
+					d: "M0,0 L10,5 L0,10 z"
+				})
+			}) }),
+			/* @__PURE__ */ d("path", {
+				className: q.hit,
+				d: w
+			}),
+			/* @__PURE__ */ d("path", {
+				className: q.edgePath,
+				d: w,
+				markerStart: g ? `url(#${S})` : void 0,
+				markerEnd: _ ? `url(#${S})` : void 0
+			})
+		]
+	}), m != null && /* @__PURE__ */ d("div", {
+		className: q.label,
+		style: {
+			"--flow-label-x": `${T.x}px`,
+			"--flow-label-y": `${T.y}px`
+		},
+		children: m
+	})] });
+}
+var Y = {
+	controls: "_controls_c0e5r_2",
+	button: "_button_c0e5r_32"
+}, X = {
+	width: 18,
+	height: 18,
+	viewBox: "0 0 24 24",
+	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", {
+		"data-position": t,
+		className: e(Y.controls, l),
+		...h,
+		children: [n && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": c?.zoomIn ?? m(p.flow.zoomIn),
+			onClick: i,
+			children: /* @__PURE__ */ d("svg", {
+				...X,
+				children: /* @__PURE__ */ d("path", {
+					d: "M12 5v14M5 12h14",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			})
+		}), /* @__PURE__ */ d("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": c?.zoomOut ?? m(p.flow.zoomOut),
+			onClick: a,
+			children: /* @__PURE__ */ d("svg", {
+				...X,
+				children: /* @__PURE__ */ d("path", {
+					d: "M5 12h14",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			})
+		})] }), r && /* @__PURE__ */ d("button", {
+			type: "button",
+			className: Y.button,
+			"aria-label": c?.fitView ?? m(p.flow.fitView),
+			onClick: o,
+			children: /* @__PURE__ */ d("svg", {
+				...X,
+				children: /* @__PURE__ */ d("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 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) ?? {
+		x: 0,
+		y: 0,
+		width: 1,
+		height: 1
+	}, C = x.width || 1, T = x.height || 1, E = C * .1, D = T * .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) => ({
+		x: e.x * k + A,
+		y: e.y * k + j
+	}), N = null;
+	if (i && a) {
+		let e = y({
+			x: 0,
+			y: 0
+		}, n), t = y({
+			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 = l(null), R = (e) => {
+		L.current = e, P.current = e;
+	}, z = l(_);
+	z.current = _;
+	let B = l(null);
+	return o(() => {
+		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__ */ f("svg", {
+		"data-position": h,
+		className: e(Z.minimap, b),
+		width: c,
+		height: u,
+		role: "img",
+		"aria-label": v ?? m(p.flow.minimap),
+		children: [t.map((e) => {
+			let t = S(e), n = M({
+				x: t.x,
+				y: t.y
+			});
+			return /* @__PURE__ */ d("rect", {
+				"data-node-id": e.id,
+				className: Z.node,
+				x: n.x,
+				y: n.y,
+				width: t.width * k,
+				height: t.height * k,
+				fill: g
+			}, e.id);
+		}), N && /* @__PURE__ */ d("rect", {
+			ref: R,
+			"data-viewport": "",
+			className: Z.viewport,
+			x: N.x,
+			y: N.y,
+			width: N.w,
+			height: N.h
+		})]
+	});
+}
+var pe = { 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", {
+		"data-position": t,
+		className: e(pe.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,
+		defaultEdges: n,
+		onNodesChange: r,
+		onEdgesChange: i
+	}), O = U(D, {
+		minZoom: v,
+		maxZoom: b,
+		fitOnInit: l
+	}), { connection: k } = W({
+		containerRef: O.containerRef,
+		clientToFlow: (e, t) => {
+			let n = O.containerRef.current?.getBoundingClientRect();
+			return y({
+				x: e - (n?.left ?? 0),
+				y: t - (n?.top ?? 0)
+			}, D.viewport.peek());
+		},
+		enabled: x,
+		onConnect: (e) => {
+			D.addEdge({
+				id: `e-${++ge}`,
+				source: e.source,
+				target: e.target
+			}), o?.(e);
+		}
+	}), A = (e) => {
+		D.setNodes(D.nodes.value.map((t) => ({
+			...t,
+			selected: t.id === e
+		})));
+	}, j = a({}), 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];
+	})), z = k.value;
+	return /* @__PURE__ */ f(ie, {
+		flow: D,
+		controller: O,
+		minZoom: v,
+		maxZoom: b,
+		chrome: /* @__PURE__ */ f(u, { children: [m && /* @__PURE__ */ d(de, {
+			onZoomIn: O.zoomIn,
+			onZoomOut: O.zoomOut,
+			onFitView: () => O.fitView()
+		}), h && /* @__PURE__ */ d(fe, {
+			nodes: N,
+			viewport: D.viewport.value,
+			containerWidth: O.containerRef.current?.clientWidth,
+			containerHeight: O.containerRef.current?.clientHeight,
+			onViewportChange: D.setViewport
+		})] }),
+		className: e(he.flow, T),
+		style: E,
+		children: [
+			p && /* @__PURE__ */ d(oe, { ...typeof p == "object" ? p : {} }),
+			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, {
+					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);
+			}),
+			z && /* @__PURE__ */ d(J, {
+				sourceX: z.from.x,
+				sourceY: z.from.y,
+				targetX: z.to.x,
+				targetY: z.to.y,
+				markerEnd: !1
+			}),
+			N.map((e) => /* @__PURE__ */ d(ce, {
+				id: e.id,
+				position: e.position,
+				zoom: F,
+				interactive: x,
+				selected: e.selected ?? !1,
+				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, {
+						type: "target",
+						position: "left"
+					}),
+					x && /* @__PURE__ */ d(K, {
+						type: "source",
+						position: "right"
+					})
+				] })
+			}, e.id))
+		]
+	});
+}
+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"
+}, $ = {
+	width: 18,
+	height: 18,
+	viewBox: "0 0 24 24",
+	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({
+		steps: C,
+		loop: i,
+		stepDuration: a,
+		stepGap: o,
+		playing: c,
+		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", {
+		className: e(Q.story, x),
+		style: S,
+		children: [/* @__PURE__ */ d(_e, {
+			nodes: t,
+			edges: n,
+			background: _,
+			interactive: v,
+			activeEdgeId: T?.edgeId,
+			activeDirection: T?.direction
+		}), /* @__PURE__ */ f("div", {
+			className: Q.overlay,
+			children: [/* @__PURE__ */ d("div", {
+				className: Q.caption,
+				"aria-live": "polite",
+				children: T?.label && /* @__PURE__ */ f("span", {
+					className: Q.captionText,
+					children: [/* @__PURE__ */ d("strong", { children: T.label }), T.description && /* @__PURE__ */ f("span", {
+						className: Q.captionDesc,
+						children: [" — ", T.description]
+					})]
+				}, E)
+			}), h && /* @__PURE__ */ f("div", {
+				className: Q.controls,
+				children: [
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: Q.button,
+						"aria-label": y?.previous ?? m(p.flow.previous),
+						onClick: w.prev,
+						children: /* @__PURE__ */ d("svg", {
+							...$,
+							children: /* @__PURE__ */ d("path", {
+								d: "M15 6 9 12l6 6",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								fill: "none"
+							})
+						})
+					}),
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: Q.button,
+						"aria-label": D ? y?.pause ?? m(p.flow.pause) : y?.play ?? m(p.flow.play),
+						"aria-pressed": D,
+						onClick: w.toggle,
+						children: D ? /* @__PURE__ */ d("svg", {
+							...$,
+							children: /* @__PURE__ */ d("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" })
+						}) : /* @__PURE__ */ d("svg", {
+							...$,
+							children: /* @__PURE__ */ d("path", { d: "M7 5l11 7-11 7z" })
+						})
+					}),
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: Q.button,
+						"aria-label": y?.next ?? m(p.flow.next),
+						onClick: w.next,
+						children: /* @__PURE__ */ d("svg", {
+							...$,
+							children: /* @__PURE__ */ d("path", {
+								d: "M9 6l6 6-6 6",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								fill: "none"
+							})
+						})
+					}),
+					/* @__PURE__ */ d("span", {
+						className: Q.indicator,
+						children: m(p.flow.step, {
+							current: E + 1,
+							total: C.length
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+//#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 };