@cascivo/flow 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,1137 +0,0 @@
-"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_3ojbs_2",
-	overlay: "_overlay_3ojbs_7",
-	caption: "_caption_3ojbs_20",
-	captionText: "_captionText_3ojbs_34",
-	captionDesc: "_captionDesc_3ojbs_46",
-	controls: "_controls_3ojbs_50",
-	button: "_button_3ojbs_62",
-	indicator: "_indicator_3ojbs_91"
-}, $ = {
-	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 };