@cascivo/flow 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,1139 +1,3 @@
 "use client";
 import './flow.css';
-import { cn as e, useComputed as t, useControllableSignal as n, useDraggable as r, useEffectPropSignal as i, useResizeObserver as a, useSignal as o, useSignalEffect as s, useSignals as c } from "@cascivo/core";
-import { useId as l, useRef as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { 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 };
+import{cn as e,useComputed as t,useControllableSignal as r,useDraggable as i,useEffectPropSignal as a,useResizeObserver as o,useSignal as s,useSignalEffect as c,useSignals as l}from"@cascivo/core";import{useId as u,useRef as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{cn as h}from"@cascivo/core/pure";import{builtin as g,t as _}from"@cascivo/i18n";var v={width:150,height:40},y={x:0,y:0,zoom:1};function useFlow(e={}){let[t,i]=r({value:e.nodes,defaultValue:e.defaultNodes??[],onChange:e.onNodesChange}),[a,o]=r({value:e.edges,defaultValue:e.defaultEdges??[],onChange:e.onEdgesChange}),[s,c]=r({value:e.viewport,defaultValue:e.defaultViewport??y,onChange:e.onViewportChange});return{nodes:t,edges:a,viewport:s,setNodes:i,updateNode:(e,r)=>{i(t.value.map(t=>t.id===e?{...t,...r}:t))},setEdges:o,addEdge:e=>{o([...a.value,e])},setViewport:c}}function clampZoom(e,t=.2,r=2){return Math.min(r,Math.max(t,e))}function screenToFlow(e,t){return{x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}}function flowToScreen(e,t){return{x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}}function nodeSize(e){return{width:e.width??v.width,height:e.height??v.height}}function nodeBounds(e){let{width:t,height:r}=nodeSize(e);return{x:e.position.x,y:e.position.y,width:t,height:r}}function handleAnchor(e,t){let{x:r,y:i,width:a,height:o}=nodeBounds(e);switch(t){case`top`:return{x:r+a/2,y:i};case`right`:return{x:r+a,y:i+o/2};case`bottom`:return{x:r+a/2,y:i+o};case`left`:return{x:r,y:i+o/2}}}function graphBounds(e){if(e.length===0)return null;let t=1/0,r=1/0,i=-1/0,a=-1/0;for(let o of e){let e=nodeBounds(o);t=Math.min(t,e.x),r=Math.min(r,e.y),i=Math.max(i,e.x+e.width),a=Math.max(a,e.y+e.height)}return{x:t,y:r,width:i-t,height:a-r}}function fitViewport(e,t,r={}){let{padding:i=.1,minZoom:a=.2,maxZoom:o=2}=r;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 s=t.width/(e.width*(1+i*2)),c=t.height/(e.height*(1+i*2)),l=clampZoom(Math.min(s,c),a,o);return{x:t.width/2-(e.x+e.width/2)*l,y:t.height/2-(e.y+e.height/2)*l,zoom:l}}var n=e=>Number.isInteger(e)?String(e):e.toFixed(2).replace(/\.?0+$/,``),midpoint=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});function normal(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 straightPath({source:e,target:t}){return{d:`M${n(e.x)},${n(e.y)} L${n(t.x)},${n(t.y)}`,mid:midpoint(e,t)}}function bezierPath(e){let{source:t,target:r,curvature:i=.25}=e,a=e.sourcePosition??`right`,o=e.targetPosition??`left`,s=Math.hypot(r.x-t.x,r.y-t.y),c=Math.max(i*s,20),l=normal(a),u=normal(o),d={x:t.x+l.x*c,y:t.y+l.y*c},f={x:r.x+u.x*c,y:r.y+u.y*c},p={x:(t.x+3*d.x+3*f.x+r.x)/8,y:(t.y+3*d.y+3*f.y+r.y)/8};return{d:`M${n(t.x)},${n(t.y)} C${n(d.x)},${n(d.y)} ${n(f.x)},${n(f.y)} ${n(r.x)},${n(r.y)}`,mid:p}}function len(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function towards(e,t,r){let i=len(e,t)||1;return{x:e.x+(t.x-e.x)/i*r,y:e.y+(t.y-e.y)/i*r}}function roundedPath(e,t){if(e.length<2)return``;let r=e[0],i=`M${n(r.x)},${n(r.y)}`;for(let r=1;r<e.length-1;r++){let a=e[r-1],o=e[r],s=e[r+1],c=Math.min(t,len(a,o)/2,len(o,s)/2),l=towards(o,a,c),u=towards(o,s,c);i+=` L${n(l.x)},${n(l.y)} Q${n(o.x)},${n(o.y)} ${n(u.x)},${n(u.y)}`}let a=e[e.length-1];return i+=` L${n(a.x)},${n(a.y)}`,i}function smoothStepPath(e){let{source:t,target:r,borderRadius:i=8}=e,a=e.sourcePosition??`right`,o=a===`left`||a===`right`,s=[t];if(o){let e=(t.x+r.x)/2;s.push({x:e,y:t.y},{x:e,y:r.y})}else{let e=(t.y+r.y)/2;s.push({x:t.x,y:e},{x:r.x,y:e})}return s.push(r),{d:roundedPath(s,i),mid:midpoint(t,r)}}function edgePath(e,t){switch(e){case`straight`:return straightPath(t);case`smoothstep`:return smoothStepPath(t);case`bezier`:return bezierPath(t)}}function gridLayout(e,t={}){let r=t.gap??40,i=t.nodeWidth??v.width,a=t.nodeHeight??v.height,o=t.columns??Math.max(1,Math.ceil(Math.sqrt(e.length)));return e.map((e,t)=>{let s=t%o,c=Math.floor(t/o);return{...e,position:{x:s*(i+r),y:c*(a+r)}}})}function layeredLayout(e,t,r={}){let i=r.direction??`LR`,a=r.gap??60,o=r.nodeWidth??v.width,s=r.nodeHeight??v.height,c=new Set(e.map(e=>e.id)),l=new Map,u=new Map;for(let t of e)u.set(t.id,0);for(let e of t)!c.has(e.source)||!c.has(e.target)||(l.set(e.source,[...l.get(e.source)??[],e.target]),u.set(e.target,(u.get(e.target)??0)+1));let d=new Map,f=e.filter(e=>(u.get(e.id)??0)===0).map(e=>e.id);for(let e of f)d.set(e,0);let p=new Map(u);for(;f.length>0;){let e=[];for(let t of f){let r=d.get(t)??0;for(let i of l.get(t)??[])d.set(i,Math.max(d.get(i)??0,r+1)),p.set(i,(p.get(i)??0)-1),(p.get(i)??0)===0&&e.push(i)}f=e}for(let t of e)d.has(t.id)||d.set(t.id,0);let m=new Map,h=new Map;for(let t of e){let e=d.get(t.id)??0,r=h.get(e)??0;m.set(t.id,r),h.set(e,r+1)}return e.map(e=>{let t=d.get(e.id)??0,r=m.get(e.id)??0,c=i===`LR`?{x:t*(o+a),y:r*(s+a)}:{x:r*(o+a),y:t*(s+a)};return{...e,position:c}})}function applyLayout(e,t,r){return r===`grid`?gridLayout(e):r===`layered`?layeredLayout(e,t):r(e,t)}function isEdgeStep(e){return`edge`in e}function resolveStep(e,t){let r={label:e.label,description:e.description,duration:e.duration};if(isEdgeStep(e)){let i=t.find(t=>t.id===e.edge);if(!i)throw Error(`FlowStory: step references unknown edge "${e.edge}"`);return{edgeId:i.id,direction:e.reverse?`reverse`:`forward`,...r}}let i=t.find(t=>t.source===e.from&&t.target===e.to);if(i)return{edgeId:i.id,direction:`forward`,...r};let a=t.find(t=>t.source===e.to&&t.target===e.from);if(a)return{edgeId:a.id,direction:`reverse`,...r};throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`)}function resolveScript(e,t){return e.map(e=>resolveStep(e,t))}var b=1.2;function useViewport(e,t={}){let{minZoom:r=.2,maxZoom:a=2,panOnDrag:s=!0,zoomOnScroll:l=!0,fitPadding:u=.1,fitOnInit:f=!1}=t,{viewport:p,setViewport:m}=e,{ref:h,size:g}=o(),{handleRef:_,offset:v,isDragging:y}=i({isDisabled:!s}),pan=(e,t)=>{let r=p.peek();m({x:r.x+e,y:r.y+t,zoom:r.zoom})},zoomTo=(e,t)=>{let i=p.peek(),o=clampZoom(e,r,a);if(!t){m({x:i.x,y:i.y,zoom:o});return}let s=screenToFlow(t,i);m({x:t.x-s.x*o,y:t.y-s.y*o,zoom:o})},containerCenter=()=>{let e=h.current;if(e)return{x:e.clientWidth/2,y:e.clientHeight/2}},zoomIn=()=>zoomTo(p.peek().zoom*b,containerCenter()),zoomOut=()=>zoomTo(p.peek().zoom/b,containerCenter()),measuredSize=()=>{let e=g.peek();if(e&&e.width>0&&e.height>0)return e;let t=h.current;return t&&t.clientWidth>0?{width:t.clientWidth,height:t.clientHeight}:null},fitView=t=>{let i=graphBounds(e.nodes.peek());if(!i)return;let o=t??measuredSize();o&&m(fitViewport(i,o,{padding:u,minZoom:r,maxZoom:a}))},x=d(null);c(()=>{let e=y.value,t=v.value;if(!s)return;if(!e){x.current=null;return}x.current||={vp:p.peek(),off:t};let r=x.current;m({x:r.vp.x+(t.x-r.off.x),y:r.vp.y+(t.y-r.off.y),zoom:r.vp.zoom})}),c(()=>{if(!l||typeof window>`u`)return;let e=h.current;if(!e)return;let onWheel=t=>{t.preventDefault();let r=e.getBoundingClientRect(),i={x:t.clientX-r.left,y:t.clientY-r.top},a=t.deltaY<0?b:1/b;zoomTo(p.peek().zoom*a,i)};return e.addEventListener(`wheel`,onWheel,{passive:!1}),()=>e.removeEventListener(`wheel`,onWheel)});let S=d(!1);return c(()=>{if(!f||S.current)return;let e=g.value;!e||e.width===0||(S.current=!0,fitView(e))}),{containerRef:h,panHandleRef:_,viewport:p,pan,zoomTo,zoomIn,zoomOut,fitView}}var x=`[data-flow-handle][data-handle-type="source"]`,S=`[data-flow-handle][data-handle-type="target"]`;function useConnection(e){let{containerRef:t}=e,r=s(null),i=d(e.onConnect);i.current=e.onConnect;let o=d(e.isValid);o.current=e.isValid;let l=d(e.clientToFlow);l.current=e.clientToFlow;let u=a(e.enabled??!0);return c(()=>{if(!u.value||typeof window>`u`)return;let e=t.current;if(!e)return;let onMove=e=>{let t=r.peek();t&&(r.value={...t,to:l.current(e.clientX,e.clientY)})},onUp=e=>{let t=r.peek();if(window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp),r.value=null,!t)return;let a=e.target,s=a instanceof Element?a.closest(S):null,c=s?.closest(`[data-node-id]`);if(!c)return;let l={source:t.source,target:c.getAttribute(`data-node-id`)??``,sourceHandle:t.sourceHandle,targetHandle:s?.getAttribute(`data-handle-id`)??void 0};!l.target||l.source===l.target||o.current&&!o.current(l)||i.current?.(l)},onDown=e=>{let t=e.target;if(!(t instanceof Element))return;let i=t.closest(x);if(!i)return;let a=i.closest(`[data-node-id]`);if(!a)return;e.stopPropagation();let o=i.getBoundingClientRect();r.value={source:a.getAttribute(`data-node-id`)??``,sourceHandle:i.getAttribute(`data-handle-id`)??void 0,from:l.current(o.left+o.width/2,o.top+o.height/2),to:l.current(e.clientX,e.clientY)},window.addEventListener(`pointermove`,onMove),window.addEventListener(`pointerup`,onUp)};return e.addEventListener(`pointerdown`,onDown),()=>{e.removeEventListener(`pointerdown`,onDown),window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp)}}),{connection:r}}var C=1500;function useStory(e){let{steps:i,loop:a=!0,stepDuration:o=C,stepGap:s=0}=e,[l,u]=r({value:e.currentStep,defaultValue:e.defaultCurrentStep??0,onChange:e.onStepChange}),[f,p]=r({value:e.playing,defaultValue:e.defaultPlaying??!0,onChange:e.onPlayingChange}),m=t(()=>i[l.value]??null),h=d(e.clock);h.current=e.clock;let g=d(i);g.current=i;let clock=()=>h.current??{setTimeout:(e,t)=>window.setTimeout(e,t),clearTimeout:e=>window.clearTimeout(e)},advance=e=>{let t=g.current.length;if(t===0)return;let r=l.peek()+e;u(a?(r%t+t)%t:Math.max(0,Math.min(t-1,r)))};return c(()=>{if(!f.value)return;let e=l.value,t=i.length;if(t===0||typeof window>`u`&&!h.current)return;let r=(i[e]?.duration??o)+s,c=clock(),d=c.setTimeout(()=>{let r=e+1;r>=t?a?u(0):p(!1):u(r)},r);return()=>c.clearTimeout(d)}),{currentStep:l,playing:f,activeStep:m,play:()=>p(!0),pause:()=>p(!1),toggle:()=>p(!f.peek()),next:()=>advance(1),prev:()=>advance(-1),restart:()=>{u(0),p(!0)}}}var w={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function FlowCanvas({children:t,flow:r,viewport:i,defaultViewport:a,onViewportChange:o,minZoom:s,maxZoom:c,panOnDrag:u=!0,zoomOnScroll:d=!0,fitView:f=!1,controller:h,chrome:g,className:_,role:v=`application`,...y}){l();let b=useFlow({viewport:i,defaultViewport:a,onViewportChange:o}),x=r??b,S=useViewport(x,{minZoom:s,maxZoom:c,panOnDrag:u,zoomOnScroll:d,fitOnInit:f}),C=h??S,T=x.viewport.value;return m(`div`,{ref:C.containerRef,className:e(w.canvas,_),role:v,...y,children:[m(`div`,{className:w.pane,style:{"--flow-tx":`${T.x}px`,"--flow-ty":`${T.y}px`,"--flow-scale":String(T.zoom)},children:[p(`div`,{ref:C.panHandleRef,className:w.panSurface,"aria-hidden":`true`}),t]}),g]})}var T={background:`_background_1pu9x_2`};function FlowBackground({variant:e=`dots`,gap:t=20,size:r=1,color:i,className:a,style:o,...s}){return p(`div`,{"data-variant":e,"aria-hidden":`true`,className:h(T.background,a),style:{"--flow-bg-gap":`${t}px`,"--flow-bg-size":`${r}px`,"--flow-bg-thick":`${Math.max(1,r)}px`,...i?{"--flow-bg-color":i}:{},...o},...s})}var E={node:`_node_9zyg4_2`};function FlowNode({id:t,position:a,defaultPosition:o,onPositionChange:s,onMeasure:u,zoom:f=1,selected:m=!1,draggable:h=!0,interactive:g=!0,onSelect:_,children:v,className:y,onClick:b,onKeyDown:x,...S}){l();let C=h&&g,[w,T]=r({value:a,defaultValue:o??a??{x:0,y:0},onChange:s}),{handleRef:D,targetRef:O,offset:k,isDragging:A}=i({isDisabled:!C}),j=d(null),setRefs=e=>{j.current=e,D.current=e,O.current=e},M=d(u);M.current=u,c(()=>{let e=j.current;if(!e||typeof ResizeObserver>`u`)return;let report=()=>{let t=e.offsetWidth,r=e.offsetHeight;t>0&&r>0&&M.current?.({width:t,height:r})};report();let t=new ResizeObserver(report);return t.observe(e),()=>t.disconnect()});let N=d(f);N.current=f;let P=d(null);c(()=>{let e=A.value,t=k.value;if(!C)return;if(!e){P.current=null;return}P.current||={pos:w.peek(),off:t};let r=P.current,i=N.current||1;T({x:r.pos.x+(t.x-r.off.x)/i,y:r.pos.y+(t.y-r.off.y)/i})});let F=w.value;return p(`div`,{ref:setRefs,"data-node-id":t,"data-selected":m||void 0,"data-dragging":A.value||void 0,"data-static":!g||void 0,role:`group`,tabIndex:g?0:void 0,className:e(E.node,y),style:{"--flow-x":`${F.x}px`,"--flow-y":`${F.y}px`},onClick:e=>{g&&_?.(t),b?.(e)},onKeyDown:e=>{g&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),_?.(t)),x?.(e)},...S,children:v})}var D={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function defaultPosition(e){return e===`source`?`right`:`left`}function FlowHandle({type:e,position:t,id:r,isConnectable:i=!0,className:a,...o}){return p(`div`,{"data-handle-type":e,"data-handle-pos":t??defaultPosition(e),"data-handle-id":r,"data-connectable":i||void 0,"data-flow-handle":``,tabIndex:i?0:-1,className:h(D.handle,a),...o,children:p(`span`,{className:D.dot,"aria-hidden":`true`})})}var O={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 FlowEdge({id:t,sourceX:r,sourceY:i,targetX:a,targetY:o,sourcePosition:s=`right`,targetPosition:c=`left`,type:l=`bezier`,animated:d=!1,label:h,selected:g=!1,markerStart:_=!1,markerEnd:v=!0,direction:y=`forward`,active:b,className:x}){let S=u(),C=`flow-arrow-${t??S}`,w=_||v,{d:T,mid:E}=edgePath(l,{source:{x:r,y:i},target:{x:a,y:o},sourcePosition:s,targetPosition:c});return m(f,{children:[m(`svg`,{className:e(O.edgeSvg,x),"data-edge-id":t,"data-animated":d||void 0,"data-selected":g||void 0,"data-active":b||void 0,"data-direction":y,"aria-hidden":`true`,children:[w&&p(`defs`,{children:p(`marker`,{id:C,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:p(`path`,{className:O.arrow,d:`M0,0 L10,5 L0,10 z`})})}),p(`path`,{className:O.hit,d:T}),p(`path`,{className:O.edgePath,d:T,markerStart:_?`url(#${C})`:void 0,markerEnd:v?`url(#${C})`:void 0})]}),h!=null&&p(`div`,{className:O.label,style:{"--flow-label-x":`${E.x}px`,"--flow-label-y":`${E.y}px`},children:h})]})}var k={controls:`_controls_s32im_2`,button:`_button_s32im_32`},A={width:18,height:18,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":!0};function FlowControls({position:t=`bottom-left`,showZoom:r=!0,showFitView:i=!0,onZoomIn:a,onZoomOut:o,onFitView:s,labels:c,className:u,...d}){return l(),m(`div`,{"data-position":t,className:e(k.controls,u),...d,children:[r&&m(f,{children:[p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomIn??_(g.flow.zoomIn),onClick:a,children:p(`svg`,{...A,children:p(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomOut??_(g.flow.zoomOut),onClick:o,children:p(`svg`,{...A,children:p(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),i&&p(`button`,{type:`button`,className:k.button,"aria-label":c?.fitView??_(g.flow.fitView),onClick:s,children:p(`svg`,{...A,children:p(`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 j={minimap:`_minimap_rdahv_2`,node:`_node_rdahv_28`,viewport:`_viewport_rdahv_32`};function FlowMiniMap({nodes:t,viewport:r,containerWidth:a,containerHeight:o,width:s=200,height:u=150,position:f=`bottom-right`,nodeColor:h,onViewportChange:v,label:y,ariaLabel:b,className:x}){l();let S=graphBounds(t)??{x:0,y:0,width:1,height:1},C=S.width||1,w=S.height||1,T=C*.1,E=w*.1,D={x:S.x-T,y:S.y-E,width:C+T*2,height:w+E*2},O=Math.min(s/D.width,u/D.height),k=-D.x*O+(s-D.width*O)/2,A=-D.y*O+(u-D.height*O)/2,toMM=e=>({x:e.x*O+k,y:e.y*O+A}),M=null;if(a&&o){let e=screenToFlow({x:0,y:0},r),t=screenToFlow({x:a,y:o},r),i=toMM(e);M={x:i.x,y:i.y,w:(t.x-e.x)*O,h:(t.y-e.y)*O}}let{handleRef:N,offset:P,isDragging:F}=i({isDisabled:!v}),I=d(null),setRectRef=e=>{I.current=e,N.current=e},L=d(v);L.current=v;let R=d(null);return c(()=>{let e=F.value,t=P.value;if(!L.current)return;if(!e){R.current=null;return}R.current||={vp:r,off:t};let i=R.current,a=i.vp.zoom;L.current({x:i.vp.x-(t.x-i.off.x)/O*a,y:i.vp.y-(t.y-i.off.y)/O*a,zoom:a})}),m(`svg`,{"data-position":f,className:e(j.minimap,x),width:s,height:u,role:`img`,"aria-label":b??y??_(g.flow.minimap),children:[t.map(e=>{let t=nodeBounds(e),r=toMM({x:t.x,y:t.y});return p(`rect`,{"data-node-id":e.id,className:j.node,x:r.x,y:r.y,width:t.width*O,height:t.height*O,fill:h},e.id)}),M&&p(`rect`,{ref:setRectRef,"data-viewport":``,className:j.viewport,x:M.x,y:M.y,width:M.w,height:M.h})]})}var M={panel:`_panel_l0cix_2`};function FlowPanel({position:e=`top-right`,children:t,className:r,...i}){return p(`div`,{"data-position":e,className:h(M.panel,r),...i,children:t})}var N={flow:`_flow_vejge_2`},P=0;function Flow({nodes:t,edges:r,onNodesChange:i,onEdgesChange:a,onConnect:o,nodeTypes:c,fitView:u=!0,background:d=!1,controls:h=!1,minimap:g=!1,layout:_,minZoom:v,maxZoom:y,interactive:b=!0,activeEdgeId:x,activeDirection:S,className:C,style:w}){l();let T=useFlow({defaultNodes:_?applyLayout(t,r,_):t,defaultEdges:r,onNodesChange:i,onEdgesChange:a}),E=useViewport(T,{minZoom:v,maxZoom:y,fitOnInit:u}),{connection:D}=useConnection({containerRef:E.containerRef,clientToFlow:(e,t)=>{let r=E.containerRef.current?.getBoundingClientRect();return screenToFlow({x:e-(r?.left??0),y:t-(r?.top??0)},T.viewport.peek())},enabled:b,onConnect:e=>{T.addEdge({id:`e-${++P}`,source:e.source,target:e.target}),o?.(e)}}),select=e=>{T.setNodes(T.nodes.value.map(t=>({...t,selected:t.id===e})))},O=s({}),measure=(e,t)=>{let r=O.peek()[e];r&&r.width===t.width&&r.height===t.height||(O.value={...O.peek(),[e]:t})},k=T.nodes.value,A=T.edges.value,j=T.viewport.value.zoom,M=O.value,F=new Map(k.map(e=>{let t=M[e.id];return[e.id,t?{...e,width:t.width,height:t.height}:e]})),I=D.value;return m(FlowCanvas,{flow:T,controller:E,minZoom:v,maxZoom:y,chrome:m(f,{children:[h&&p(FlowControls,{onZoomIn:E.zoomIn,onZoomOut:E.zoomOut,onFitView:()=>E.fitView()}),g&&p(FlowMiniMap,{nodes:k,viewport:T.viewport.value,containerWidth:E.containerRef.current?.clientWidth,containerHeight:E.containerRef.current?.clientHeight,onViewportChange:T.setViewport})]}),className:e(N.flow,C),style:w,children:[d&&p(FlowBackground,{...typeof d==`object`?d:{}}),A.map(e=>{let t=F.get(e.source),r=F.get(e.target);if(!t||!r)return null;let i=handleAnchor(t,`right`),a=handleAnchor(r,`left`),o=x===e.id,s=o?S:void 0,c=s===`reverse`?!0:s===`forward`?!1:e.markerStart??!1,l=s===`reverse`?!1:s===`forward`?!0:e.markerEnd??!0;return p(FlowEdge,{id:e.id,sourceX:i.x,sourceY:i.y,targetX:a.x,targetY:a.y,type:e.type??`bezier`,animated:e.animated||o,active:o,direction:s,markerStart:c,markerEnd:l,label:e.label,selected:e.selected},e.id)}),I&&p(FlowEdge,{sourceX:I.from.x,sourceY:I.from.y,targetX:I.to.x,targetY:I.to.y,markerEnd:!1}),k.map(e=>p(FlowNode,{id:e.id,position:e.position,zoom:j,interactive:b,selected:e.selected??!1,onSelect:b?select:void 0,onMeasure:t=>measure(e.id,t),onPositionChange:t=>T.updateNode(e.id,{position:t}),children:c&&e.type&&c[e.type]?c[e.type]({node:e}):m(f,{children:[p(`span`,{children:String(e.data?.label??e.id)}),b&&p(FlowHandle,{type:`target`,position:`left`}),b&&p(FlowHandle,{type:`source`,position:`right`})]})},e.id))]})}var F={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`},I={width:18,height:18,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":!0};function FlowStory({nodes:t,edges:r,script:i,loop:a=!0,stepDuration:o=1500,stepGap:s=0,playing:c,currentStep:u,onStepChange:d,controls:f=!0,autoPlay:h=!0,background:v=!0,interactive:y=!1,labels:b,clock:x,className:S,style:C}){l();let w=resolveScript(i,r),T=useStory({steps:w,loop:a,stepDuration:o,stepGap:s,playing:c,defaultPlaying:h,currentStep:u,defaultCurrentStep:0,onStepChange:d,clock:x}),E=T.activeStep.value,D=T.currentStep.value,O=T.playing.value;return m(`div`,{className:e(F.story,S),style:C,children:[p(Flow,{nodes:t,edges:r,background:v,interactive:y,activeEdgeId:E?.edgeId,activeDirection:E?.direction}),m(`div`,{className:F.overlay,children:[p(`div`,{className:F.caption,"aria-live":`polite`,children:E?.label&&m(`span`,{className:F.captionText,children:[p(`strong`,{children:E.label}),E.description&&m(`span`,{className:F.captionDesc,children:[` — `,E.description]})]},D)}),f&&m(`div`,{className:F.controls,children:[p(`button`,{type:`button`,className:F.button,"aria-label":b?.previous??_(g.flow.previous),onClick:T.prev,children:p(`svg`,{...I,children:p(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":O?b?.pause??_(g.flow.pause):b?.play??_(g.flow.play),"aria-pressed":O,onClick:T.toggle,children:O?p(`svg`,{...I,children:p(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):p(`svg`,{...I,children:p(`path`,{d:`M7 5l11 7-11 7z`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":b?.next??_(g.flow.next),onClick:T.next,children:p(`svg`,{...I,children:p(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`span`,{className:F.indicator,children:_(g.flow.step,{current:D+1,total:w.length})})]})]})]})}export{v as DEFAULT_NODE_SIZE,Flow,FlowBackground,FlowCanvas,FlowControls,FlowEdge,FlowHandle,FlowMiniMap,FlowNode,FlowPanel,FlowStory,applyLayout,bezierPath,clampZoom,edgePath,fitViewport,flowToScreen,graphBounds,gridLayout,handleAnchor,layeredLayout,nodeBounds,nodeSize,resolveScript,resolveStep,screenToFlow,smoothStepPath,straightPath,useConnection,useFlow,useStory,useViewport};