@cascivo/flow 1.0.0 → 1.1.0

package/dist/node/index.js

@@ -1,1138 +1 @@
-"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 V(e) {
-	return "edge" in e;
-}
-function ee(e, t) {
-	let n = {
-		label: e.label,
-		description: e.description,
-		duration: e.duration
-	};
-	if (V(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 te(e, t) {
-	return e.map((e) => ee(e, t));
-}
-//#endregion
-//#region src/core/use-viewport.ts
-var H = 1.2;
-function U(e, t = {}) {
-	let { minZoom: n = .2, maxZoom: 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 ie(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 ae = 1500;
-function oe(e) {
-	let { steps: r, loop: i = !0, stepDuration: a = ae, 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 W = {
-	canvas: "_canvas_6fiig_2",
-	pane: "_pane_6fiig_13",
-	panSurface: "_panSurface_6fiig_24"
-};
-//#endregion
-//#region src/core/flow-canvas/flow-canvas.tsx
-function se({ 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(W.canvas, g),
-		role: _,
-		...v,
-		children: [/* @__PURE__ */ p("div", {
-			className: W.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: W.panSurface,
-				"aria-hidden": "true"
-			}), t]
-		}), h]
-	});
-}
-var ce = { background: "_background_1pu9x_2" };
-//#endregion
-//#region src/flows/flow-background/flow-background.tsx
-function le({ 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(ce.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 ue = { node: "_node_9zyg4_2" };
-//#endregion
-//#region src/flows/flow-node/flow-node.tsx
-function de({ 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(ue.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 G = {
-	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(G.handle, i),
-		...a,
-		children: /* @__PURE__ */ f("span", {
-			className: G.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, ariaLabel: y, className: b }) {
-	c();
-	let S = E(t) ?? {
-		x: 0,
-		y: 0,
-		width: 1,
-		height: 1
-	}, C = S.width || 1, T = S.height || 1, D = C * .1, O = T * .1, k = {
-		x: S.x - D,
-		y: S.y - O,
-		width: C + D * 2,
-		height: T + O * 2
-	}, A = Math.min(o / k.width, l / k.height), j = -k.x * A + (o - k.width * A) / 2, M = -k.y * A + (l - k.height * A) / 2, N = (e) => ({
-		x: e.x * A + j,
-		y: e.y * A + M
-	}), P = null;
-	if (i && a) {
-		let e = x({
-			x: 0,
-			y: 0
-		}, n), t = x({
-			x: i,
-			y: a
-		}, n), r = N(e);
-		P = {
-			x: r.x,
-			y: r.y,
-			w: (t.x - e.x) * A,
-			h: (t.y - e.y) * A
-		};
-	}
-	let { handleRef: F, offset: I, isDragging: L } = r({ isDisabled: !_ }), R = u(null), z = (e) => {
-		R.current = e, F.current = e;
-	}, B = u(_);
-	B.current = _;
-	let V = u(null);
-	return s(() => {
-		let e = L.value, t = I.value;
-		if (!B.current) return;
-		if (!e) {
-			V.current = null;
-			return;
-		}
-		V.current ||= {
-			vp: n,
-			off: t
-		};
-		let r = V.current, i = r.vp.zoom;
-		B.current({
-			x: r.vp.x - (t.x - r.off.x) / A * i,
-			y: r.vp.y - (t.y - r.off.y) / A * i,
-			zoom: i
-		});
-	}), /* @__PURE__ */ p("svg", {
-		"data-position": d,
-		className: e(Z.minimap, b),
-		width: o,
-		height: l,
-		role: "img",
-		"aria-label": y ?? v ?? g(h.flow.minimap),
-		children: [t.map((e) => {
-			let t = w(e), n = N({
-				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 * A,
-				height: t.height * A,
-				fill: m
-			}, e.id);
-		}), P && /* @__PURE__ */ f("rect", {
-			ref: z,
-			"data-viewport": "",
-			className: Z.viewport,
-			x: P.x,
-			y: P.y,
-			width: P.w,
-			height: P.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 } = ie({
-		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(se, {
-		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(le, { ...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(de, {
-				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 = te(r, n), w = oe({
-		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, le as FlowBackground, se as FlowCanvas, pe as FlowControls, J as FlowEdge, K as FlowHandle, me as FlowMiniMap, de 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, te as resolveScript, ee as resolveStep, x as screenToFlow, I as smoothStepPath, j as straightPath, ie as useConnection, y as useFlow, oe as useStory, U as useViewport };
+"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";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}}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}}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=1/0,n=1/0,r=-1/0,i=-1/0;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}}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)}}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=new Map,l=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=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=new Map,m=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)}function V(e){return`edge`in e}function ee(e,t){let n={label:e.label,description:e.description,duration:e.duration};if(V(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 te(e,t){return e.map(e=>ee(e,t))}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}}var ne=`[data-flow-handle][data-handle-type="source"]`,re=`[data-flow-handle][data-handle-type="target"]`;function ie(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}}var ae=1500;function oe(e){let{steps:r,loop:i=!0,stepDuration:a=ae,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 W={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function se({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 p(`div`,{ref:C.containerRef,className:e(W.canvas,g),role:_,...v,children:[p(`div`,{className:W.pane,style:{"--flow-tx":`${w.x}px`,"--flow-ty":`${w.y}px`,"--flow-scale":String(w.zoom)},children:[f(`div`,{ref:C.panHandleRef,className:W.panSurface,"aria-hidden":`true`}),t]}),h]})}var ce={background:`_background_1pu9x_2`};function le({variant:e=`dots`,gap:t=20,size:n=1,color:r,className:i,style:a,...o}){return f(`div`,{"data-variant":e,"aria-hidden":`true`,className:m(ce.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 ue={node:`_node_9zyg4_2`};function de({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 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(ue.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 G={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function fe(e){return e===`source`?`right`:`left`}function K({type:e,position:t,id:n,isConnectable:r=!0,className:i,...a}){return 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(G.handle,i),...a,children:f(`span`,{className:G.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`};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 p(d,{children:[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&&f(`defs`,{children:f(`marker`,{id:S,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:f(`path`,{className:q.arrow,d:`M0,0 L10,5 L0,10 z`})})}),f(`path`,{className:q.hit,d:w}),f(`path`,{className:q.edgePath,d:w,markerStart:g?`url(#${S})`:void 0,markerEnd:_?`url(#${S})`:void 0})]}),m!=null&&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(),p(`div`,{"data-position":t,className:e(Y.controls,l),...u,children:[n&&p(d,{children:[f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomIn??g(h.flow.zoomIn),onClick:i,children:f(`svg`,{...X,children:f(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomOut??g(h.flow.zoomOut),onClick:a,children:f(`svg`,{...X,children:f(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),r&&f(`button`,{type:`button`,className:Y.button,"aria-label":s?.fitView??g(h.flow.fitView),onClick:o,children:f(`svg`,{...X,children: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`};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,ariaLabel:y,className:b}){c();let S=E(t)??{x:0,y:0,width:1,height:1},C=S.width||1,T=S.height||1,D=C*.1,O=T*.1,k={x:S.x-D,y:S.y-O,width:C+D*2,height:T+O*2},A=Math.min(o/k.width,l/k.height),j=-k.x*A+(o-k.width*A)/2,M=-k.y*A+(l-k.height*A)/2,N=e=>({x:e.x*A+j,y:e.y*A+M}),P=null;if(i&&a){let e=x({x:0,y:0},n),t=x({x:i,y:a},n),r=N(e);P={x:r.x,y:r.y,w:(t.x-e.x)*A,h:(t.y-e.y)*A}}let{handleRef:F,offset:I,isDragging:L}=r({isDisabled:!_}),R=u(null),z=e=>{R.current=e,F.current=e},B=u(_);B.current=_;let V=u(null);return s(()=>{let e=L.value,t=I.value;if(!B.current)return;if(!e){V.current=null;return}V.current||={vp:n,off:t};let r=V.current,i=r.vp.zoom;B.current({x:r.vp.x-(t.x-r.off.x)/A*i,y:r.vp.y-(t.y-r.off.y)/A*i,zoom:i})}),p(`svg`,{"data-position":d,className:e(Z.minimap,b),width:o,height:l,role:`img`,"aria-label":y??v??g(h.flow.minimap),children:[t.map(e=>{let t=w(e),n=N({x:t.x,y:t.y});return f(`rect`,{"data-node-id":e.id,className:Z.node,x:n.x,y:n.y,width:t.width*A,height:t.height*A,fill:m},e.id)}),P&&f(`rect`,{ref:z,"data-viewport":``,className:Z.viewport,x:P.x,y:P.y,width:P.w,height:P.h})]})}var he={panel:`_panel_l0cix_2`};function ge({position:e=`top-right`,children:t,className:n,...r}){return 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}=ie({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 p(se,{flow:D,controller:O,minZoom:_,maxZoom:v,chrome:p(d,{children:[m&&f(pe,{onZoomIn:O.zoomIn,onZoomOut:O.zoomOut,onFitView:()=>O.fitView()}),h&&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&&f(le,{...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 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&&f(J,{sourceX:R.from.x,sourceY:R.from.y,targetX:R.to.x,targetY:R.to.y,markerEnd:!1}),N.map(e=>f(de,{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}):p(d,{children:[f(`span`,{children:String(e.data?.label??e.id)}),b&&f(K,{type:`target`,position:`left`}),b&&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=te(r,n),w=oe({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 p(`div`,{className:e(Q.story,x),style:S,children:[f(ye,{nodes:t,edges:n,background:_,interactive:v,activeEdgeId:T?.edgeId,activeDirection:T?.direction}),p(`div`,{className:Q.overlay,children:[f(`div`,{className:Q.caption,"aria-live":`polite`,children:T?.label&&p(`span`,{className:Q.captionText,children:[f(`strong`,{children:T.label}),T.description&&p(`span`,{className:Q.captionDesc,children:[` — `,T.description]})]},E)}),d&&p(`div`,{className:Q.controls,children:[f(`button`,{type:`button`,className:Q.button,"aria-label":y?.previous??g(h.flow.previous),onClick:w.prev,children:f(`svg`,{...$,children:f(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),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?f(`svg`,{...$,children:f(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):f(`svg`,{...$,children:f(`path`,{d:`M7 5l11 7-11 7z`})})}),f(`button`,{type:`button`,className:Q.button,"aria-label":y?.next??g(h.flow.next),onClick:w.next,children:f(`svg`,{...$,children:f(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),f(`span`,{className:Q.indicator,children:g(h.flow.step,{current:E+1,total:C.length})})]})]})]})}export{_ as DEFAULT_NODE_SIZE,ye as Flow,le as FlowBackground,se as FlowCanvas,pe as FlowControls,J as FlowEdge,K as FlowHandle,me as FlowMiniMap,de 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,te as resolveScript,ee as resolveStep,x as screenToFlow,I as smoothStepPath,j as straightPath,ie as useConnection,y as useFlow,oe as useStory,U as useViewport};