@tangle-network/sandbox-ui 2.0.20 → 2.0.22

package/dist/VirtualList-DLh2JE0F.js

@@ -0,0 +1,205 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/run/record/VirtualList.tsx
+/**
+* Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
+* rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
+*/
+function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target, origin, targetAlign = "start", virtualize = true, keepMounted }) {
+	const heights = useRef(/* @__PURE__ */ new Map());
+	const [version, setVersion] = useState(0);
+	const [viewport, setViewport] = useState({
+		top: 0,
+		height: 900
+	});
+	const observer = useRef(null);
+	const frame = useRef(0);
+	const originTop = () => {
+		const element = scroller.current, node = origin?.current;
+		return element && node ? node.getBoundingClientRect().top - (element === document.scrollingElement ? 0 : element.getBoundingClientRect().top + element.clientTop) + element.scrollTop : 0;
+	};
+	const observe = (element) => {
+		if (!observer.current && typeof ResizeObserver !== "undefined") observer.current = new ResizeObserver((entries) => {
+			let changed = false;
+			for (const entry of entries) {
+				const key = entry.target.dataset.virtualKey;
+				if (!key) continue;
+				const height = Math.ceil(entry.borderBoxSize?.[0]?.blockSize ?? entry.target.offsetHeight);
+				if (height > 0 && heights.current.get(key) !== height) {
+					heights.current.set(key, height);
+					changed = true;
+				}
+			}
+			if (changed && !frame.current) frame.current = requestAnimationFrame(() => {
+				frame.current = 0;
+				setVersion((value) => value + 1);
+			});
+		});
+		observer.current?.observe(element);
+	};
+	useEffect(() => {
+		for (const row of rows.current.values()) observe(row);
+		return () => {
+			cancelAnimationFrame(frame.current);
+			frame.current = 0;
+			observer.current?.disconnect();
+		};
+	}, []);
+	useEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			const top = element.scrollTop - originTop();
+			setViewport((current) => current.top === top && current.height === element.clientHeight ? current : {
+				top,
+				height: element.clientHeight
+			});
+		};
+		const schedule = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		const source = element === document.scrollingElement ? window : element;
+		source.addEventListener("scroll", schedule, { passive: true });
+		if (source === window) window.addEventListener("resize", schedule);
+		const resize = new ResizeObserver(schedule);
+		resize.observe(element);
+		return () => {
+			cancelAnimationFrame(frame);
+			source.removeEventListener("scroll", schedule);
+			if (source === window) window.removeEventListener("resize", schedule);
+			resize.disconnect();
+		};
+	}, [scroller, origin]);
+	const offsets = useMemo(() => {
+		const result = new Float64Array(items.length + 1);
+		const guess = typeof estimate === "function" ? estimate : () => estimate;
+		for (let i = 0; i < items.length; i++) result[i + 1] = result[i] + (heights.current.get(keyOf(items[i])) ?? guess(items[i]));
+		return result;
+	}, [
+		items,
+		keyOf,
+		estimate,
+		version
+	]);
+	const find = (y) => {
+		let low = 0, high = items.length;
+		while (low < high) {
+			const mid = low + high >> 1;
+			if (offsets[mid + 1] <= y) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	};
+	const start = virtualize ? Math.max(0, find(viewport.top - overscan)) : 0;
+	const end = virtualize ? Math.min(items.length, find(viewport.top + viewport.height + overscan) + 1) : items.length;
+	const scrollTo = (key, align) => {
+		const element = scroller.current;
+		const index = items.findIndex((item) => keyOf(item) === key);
+		if (!element || index < 0) return false;
+		const origin = originTop(), top = origin + offsets[index];
+		const bottom = origin + offsets[index + 1];
+		if (align || top < element.scrollTop) element.scrollTop = Math.max(0, top - 8);
+		else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = Math.max(0, bottom - element.clientHeight);
+		return true;
+	};
+	const pending = useRef(null);
+	const rows = useRef(/* @__PURE__ */ new Map());
+	const settle = () => {
+		const goal = pending.current;
+		if (!goal) return;
+		if (performance.now() > goal.until) {
+			pending.current = null;
+			return;
+		}
+		if (!scrollTo(goal.key, targetAlign === "start")) return;
+		const row = rows.current.get(goal.key);
+		if (targetAlign === "start" && row?.isConnected) {
+			const box = row.getBoundingClientRect();
+			if (box.top < 72 || box.top > window.innerHeight - 96) window.scrollBy({ top: box.top - 120 });
+		}
+	};
+	useLayoutEffect(() => {
+		pending.current = target ? {
+			key: target,
+			until: performance.now() + 2e3
+		} : null;
+		settle();
+	}, [target]);
+	useLayoutEffect(settle, [
+		version,
+		viewport,
+		items
+	]);
+	useEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		const release = (event) => {
+			const key = event instanceof KeyboardEvent && event.target === element && !event.defaultPrevented ? event.key : "";
+			pending.current = items.length && (key === "Home" || key === "End") ? {
+				key: keyOf(items[key === "Home" ? 0 : items.length - 1]),
+				until: performance.now() + 2e3
+			} : null;
+			if (pending.current) {
+				event.preventDefault();
+				settle();
+			}
+		};
+		const events = [
+			"wheel",
+			"touchstart",
+			"pointerdown",
+			"keydown"
+		];
+		for (const type of events) element.addEventListener(type, release, { passive: type === "wheel" || type === "touchstart" });
+		return () => {
+			for (const type of events) element.removeEventListener(type, release);
+		};
+	}, [
+		scroller,
+		items,
+		keyOf,
+		offsets
+	]);
+	const bind = (key) => (element) => {
+		const previous = rows.current.get(key);
+		if (previous) observer.current?.unobserve(previous);
+		if (element) {
+			rows.current.set(key, element);
+			observe(element);
+		} else rows.current.delete(key);
+	};
+	const indices = Array.from({ length: end - start }, (_, i) => start + i);
+	const kept = keepMounted ? items.findIndex((item) => keyOf(item) === keepMounted) : -1;
+	if (kept >= 0 && kept < start) indices.unshift(kept);
+	else if (kept >= end) indices.push(kept);
+	let previous = 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [indices.map((index) => {
+		const item = items[index];
+		const key = keyOf(item);
+		const space = offsets[index] - offsets[previous];
+		previous = index + 1;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [space > 0 && /* @__PURE__ */ jsx("div", {
+			style: {
+				height: space,
+				transitionProperty: "none"
+			},
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("div", {
+			ref: bind(key),
+			"data-virtual-key": key,
+			className: "virtual-row",
+			style: { display: "flow-root" },
+			children: render(item, index)
+		})] }, key);
+	}), /* @__PURE__ */ jsx("div", {
+		style: {
+			height: offsets[items.length] - offsets[previous],
+			transitionProperty: "none"
+		},
+		"aria-hidden": "true"
+	})] });
+}
+export { VirtualList as t };

package/dist/{WorkflowGraph-CADReIDl.js → WorkflowGraph-B8cRtVaw.js}

@@ -3,7 +3,7 @@ import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
-import { SELECTION_OUTLINE, loadElk, motionAllowed, useColorMode } from "@tangle-network/charts/react/agent-graph/presentation";
+import { SELECTION_OUTLINE, loadElk, motionAllowed, useColorMode as useColorMode$1 } from "@tangle-network/charts/react/agent-graph/presentation";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ViewportPortal, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState, useStore } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 // src/workflows/flow-graph.ts
@@ -1967,7 +1967,7 @@ function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defau
 	]), direction, compact, canvasAspect, !editable);
 	const shownCompact = structural.compact ?? compact;
 	const shownDirection = structural.direction ?? direction;
-	const colorMode = useColorMode(wrapperRef, !structural.error && structural.nodes.length > 0);
+	const colorMode = useColorMode$1(wrapperRef, !structural.error && structural.nodes.length > 0);
 	const nodeBoxes = useMemo(() => structural.nodes.map((node) => ({
 		x: node.position.x,
 		y: node.position.y,

package/dist/event-stream-DNEbvx4s.d.ts

@@ -0,0 +1,2 @@
+import { EventStreamHandlers, EventStreamOpener as AgentStreamOpener, EventStreamSource as AgentStreamSource, useEventStream } from "@tangle-network/ui/hooks";
+export { useEventStream as i, AgentStreamSource as n, EventStreamHandlers as r, AgentStreamOpener as t };