@aiready/visualizer 0.6.6 → 0.6.8

package/web/dist/assets/{index-DbVV6ZUw.js → index-BG4XVj8A.js}

@@ -21614,6 +21614,7 @@ var string$1 = (params) => {
 };
 var integer = /^-?\d+$/;
 var number$1 = /^-?\d+(?:\.\d+)?$/;
+var boolean$1 = /^(?:true|false)$/i;
 var lowercase = /^[^A-Z]*$/;
 var uppercase = /^[^a-z]*$/;
 //#endregion
@@ -22388,6 +22389,24 @@ var $ZodNumberFormat = /* @__PURE__ */ $constructor("$ZodNumberFormat", (inst, d
 	$ZodCheckNumberFormat.init(inst, def);
 	$ZodNumber.init(inst, def);
 });
+var $ZodBoolean = /* @__PURE__ */ $constructor("$ZodBoolean", (inst, def) => {
+	$ZodType.init(inst, def);
+	inst._zod.pattern = boolean$1;
+	inst._zod.parse = (payload, _ctx) => {
+		if (def.coerce) try {
+			payload.value = Boolean(payload.value);
+		} catch (_) {}
+		const input = payload.value;
+		if (typeof input === "boolean") return payload;
+		payload.issues.push({
+			expected: "boolean",
+			code: "invalid_type",
+			input,
+			inst
+		});
+		return payload;
+	};
+});
 var $ZodAny = /* @__PURE__ */ $constructor("$ZodAny", (inst, def) => {
 	$ZodType.init(inst, def);
 	inst._zod.parse = (payload) => payload;
@@ -22795,6 +22814,97 @@ function handleIntersectionResults(result, left, right) {
 	result.value = merged.data;
 	return result;
 }
+var $ZodRecord = /* @__PURE__ */ $constructor("$ZodRecord", (inst, def) => {
+	$ZodType.init(inst, def);
+	inst._zod.parse = (payload, ctx) => {
+		const input = payload.value;
+		if (!isPlainObject(input)) {
+			payload.issues.push({
+				expected: "record",
+				code: "invalid_type",
+				input,
+				inst
+			});
+			return payload;
+		}
+		const proms = [];
+		const values = def.keyType._zod.values;
+		if (values) {
+			payload.value = {};
+			const recordKeys = /* @__PURE__ */ new Set();
+			for (const key of values) if (typeof key === "string" || typeof key === "number" || typeof key === "symbol") {
+				recordKeys.add(typeof key === "number" ? key.toString() : key);
+				const result = def.valueType._zod.run({
+					value: input[key],
+					issues: []
+				}, ctx);
+				if (result instanceof Promise) proms.push(result.then((result) => {
+					if (result.issues.length) payload.issues.push(...prefixIssues(key, result.issues));
+					payload.value[key] = result.value;
+				}));
+				else {
+					if (result.issues.length) payload.issues.push(...prefixIssues(key, result.issues));
+					payload.value[key] = result.value;
+				}
+			}
+			let unrecognized;
+			for (const key in input) if (!recordKeys.has(key)) {
+				unrecognized = unrecognized ?? [];
+				unrecognized.push(key);
+			}
+			if (unrecognized && unrecognized.length > 0) payload.issues.push({
+				code: "unrecognized_keys",
+				input,
+				inst,
+				keys: unrecognized
+			});
+		} else {
+			payload.value = {};
+			for (const key of Reflect.ownKeys(input)) {
+				if (key === "__proto__") continue;
+				let keyResult = def.keyType._zod.run({
+					value: key,
+					issues: []
+				}, ctx);
+				if (keyResult instanceof Promise) throw new Error("Async schemas not supported in object keys currently");
+				if (typeof key === "string" && number$1.test(key) && keyResult.issues.length) {
+					const retryResult = def.keyType._zod.run({
+						value: Number(key),
+						issues: []
+					}, ctx);
+					if (retryResult instanceof Promise) throw new Error("Async schemas not supported in object keys currently");
+					if (retryResult.issues.length === 0) keyResult = retryResult;
+				}
+				if (keyResult.issues.length) {
+					if (def.mode === "loose") payload.value[key] = input[key];
+					else payload.issues.push({
+						code: "invalid_key",
+						origin: "record",
+						issues: keyResult.issues.map((iss) => finalizeIssue(iss, ctx, config())),
+						input: key,
+						path: [key],
+						inst
+					});
+					continue;
+				}
+				const result = def.valueType._zod.run({
+					value: input[key],
+					issues: []
+				}, ctx);
+				if (result instanceof Promise) proms.push(result.then((result) => {
+					if (result.issues.length) payload.issues.push(...prefixIssues(key, result.issues));
+					payload.value[keyResult.value] = result.value;
+				}));
+				else {
+					if (result.issues.length) payload.issues.push(...prefixIssues(key, result.issues));
+					payload.value[keyResult.value] = result.value;
+				}
+			}
+		}
+		if (proms.length) return Promise.all(proms).then(() => payload);
+		return payload;
+	};
+});
 var $ZodEnum = /* @__PURE__ */ $constructor("$ZodEnum", (inst, def) => {
 	$ZodType.init(inst, def);
 	const values = getEnumValues(def.entries);
@@ -23372,6 +23482,13 @@ function _int(Class, params) {
 	});
 }
 /* @__NO_SIDE_EFFECTS__ */
+function _boolean(Class, params) {
+	return new Class({
+		type: "boolean",
+		...normalizeParams(params)
+	});
+}
+/* @__NO_SIDE_EFFECTS__ */
 function _any(Class) {
 	return new Class({ type: "any" });
 }
@@ -23918,6 +24035,9 @@ var numberProcessor = (schema, ctx, _json, _params) => {
 	}
 	if (typeof multipleOf === "number") json.multipleOf = multipleOf;
 };
+var booleanProcessor = (_schema, _ctx, json, _params) => {
+	json.type = "boolean";
+};
 var neverProcessor = (_schema, _ctx, json, _params) => {
 	json.not = {};
 };
@@ -24012,6 +24132,39 @@ var intersectionProcessor = (schema, ctx, json, params) => {
 	const isSimpleIntersection = (val) => "allOf" in val && Object.keys(val).length === 1;
 	json.allOf = [...isSimpleIntersection(a) ? a.allOf : [a], ...isSimpleIntersection(b) ? b.allOf : [b]];
 };
+var recordProcessor = (schema, ctx, _json, params) => {
+	const json = _json;
+	const def = schema._zod.def;
+	json.type = "object";
+	const keyType = def.keyType;
+	const patterns = keyType._zod.bag?.patterns;
+	if (def.mode === "loose" && patterns && patterns.size > 0) {
+		const valueSchema = process$1(def.valueType, ctx, {
+			...params,
+			path: [
+				...params.path,
+				"patternProperties",
+				"*"
+			]
+		});
+		json.patternProperties = {};
+		for (const pattern of patterns) json.patternProperties[pattern.source] = valueSchema;
+	} else {
+		if (ctx.target === "draft-07" || ctx.target === "draft-2020-12") json.propertyNames = process$1(def.keyType, ctx, {
+			...params,
+			path: [...params.path, "propertyNames"]
+		});
+		json.additionalProperties = process$1(def.valueType, ctx, {
+			...params,
+			path: [...params.path, "additionalProperties"]
+		});
+	}
+	const keyValues = keyType._zod.values;
+	if (keyValues) {
+		const validKeyValues = [...keyValues].filter((v) => typeof v === "string" || typeof v === "number");
+		if (validKeyValues.length > 0) json.required = validKeyValues;
+	}
+};
 var nullableProcessor = (schema, ctx, json, params) => {
 	const def = schema._zod.def;
 	const inner = process$1(def.innerType, ctx, params);
@@ -24394,6 +24547,14 @@ var ZodNumberFormat = /* @__PURE__ */ $constructor("ZodNumberFormat", (inst, def
 function int(params) {
 	return /* @__PURE__ */ _int(ZodNumberFormat, params);
 }
+var ZodBoolean = /* @__PURE__ */ $constructor("ZodBoolean", (inst, def) => {
+	$ZodBoolean.init(inst, def);
+	ZodType.init(inst, def);
+	inst._zod.processJSONSchema = (ctx, json, params) => booleanProcessor(inst, ctx, json, params);
+});
+function boolean(params) {
+	return /* @__PURE__ */ _boolean(ZodBoolean, params);
+}
 var ZodAny = /* @__PURE__ */ $constructor("ZodAny", (inst, def) => {
 	$ZodAny.init(inst, def);
 	ZodType.init(inst, def);
@@ -24504,6 +24665,21 @@ function intersection(left, right) {
 		right
 	});
 }
+var ZodRecord = /* @__PURE__ */ $constructor("ZodRecord", (inst, def) => {
+	$ZodRecord.init(inst, def);
+	ZodType.init(inst, def);
+	inst._zod.processJSONSchema = (ctx, json, params) => recordProcessor(inst, ctx, json, params);
+	inst.keyType = def.keyType;
+	inst.valueType = def.valueType;
+});
+function record(keyType, valueType, params) {
+	return new ZodRecord({
+		type: "record",
+		keyType,
+		valueType,
+		...normalizeParams(params)
+	});
+}
 var ZodEnum = /* @__PURE__ */ $constructor("ZodEnum", (inst, def) => {
 	$ZodEnum.init(inst, def);
 	ZodType.init(inst, def);
@@ -24719,7 +24895,7 @@ function superRefine(fn) {
 	return /* @__PURE__ */ _superRefine(fn);
 }
 //#endregion
-//#region ../../core/dist/chunk-Q55AMEFV.mjs
+//#region ../../core/dist/chunk-CGOS2J6T.mjs
 var Severity = /* @__PURE__ */ ((Severity2) => {
 	Severity2["Critical"] = "critical";
 	Severity2["Major"] = "major";
@@ -24858,6 +25034,41 @@ object({
 		}).catchall(any()))
 	}).optional()
 }).catchall(any());
+object({
+	threshold: number().optional(),
+	include: array$1(string()).optional(),
+	exclude: array$1(string()).optional(),
+	scan: object({
+		include: array$1(string()).optional(),
+		exclude: array$1(string()).optional(),
+		parallel: boolean().optional(),
+		deep: boolean().optional(),
+		tools: array$1(string()).optional()
+	}).optional(),
+	output: object({
+		format: _enum([
+			"json",
+			"console",
+			"html"
+		]).optional(),
+		path: string().optional(),
+		saveTo: string().optional(),
+		showBreakdown: boolean().optional(),
+		compareBaseline: string().optional()
+	}).optional(),
+	tools: record(string(), any()).optional(),
+	scoring: object({
+		profile: string().optional(),
+		weights: record(string(), number()).optional()
+	}).optional(),
+	visualizer: object({
+		groupingDirs: array$1(string()).optional(),
+		graph: object({
+			maxNodes: number().optional(),
+			maxEdges: number().optional()
+		}).optional()
+	}).optional()
+}).catchall(any());
 var LeadSource = /* @__PURE__ */ ((LeadSource2) => {
 	LeadSource2["ClawMoreHero"] = "clawmore-hero";
 	LeadSource2["ClawMoreWaitlist"] = "clawmore-waitlist";
@@ -28216,7 +28427,156 @@ var LinkItem = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) =
 	})] });
 };
 var LinkItem_default = LinkItem;
-var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, links: initialLinks, width, height, enableZoom = true, enableDrag = true, onNodeClick, onNodeHover, onLinkClick, selectedNodeId, hoveredNodeId, defaultNodeColor = "#69b3a2", defaultNodeSize = 10, defaultLinkColor = "#999", defaultLinkWidth = 1, showNodeLabels = true, showLinkLabels = false, className, manualLayout = false, onManualLayoutChange, packageBounds, layout: externalLayout, onLayoutChange }, ref) => {
+var DEFAULT_NODE_COLOR = "#64748b";
+var DEFAULT_NODE_SIZE = 10;
+var DEFAULT_LINK_COLOR = "#94a3b8";
+var DEFAULT_LINK_WIDTH = 1;
+var CIRCULAR_LAYOUT_RADIUS_RATIO = .35;
+var FIT_VIEW_PADDING = 40;
+var TRANSITION_DURATION_MS = 300;
+var PACKAGE_BOUNDARY_FILL = "rgba(148,163,184,0.06)";
+var PACKAGE_BOUNDARY_STROKE = "#475569";
+var PACKAGE_BOUNDARY_STROKE_WIDTH = 2;
+var PACKAGE_BOUNDARY_DASH = "6 6";
+var PACKAGE_LABEL_FONT_SIZE = 11;
+var PACKAGE_LABEL_COLOR = "#475569";
+var PackageBoundaries = ({ packageBounds }) => {
+	if (!packageBounds || Object.keys(packageBounds).length === 0) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+		className: "package-boundaries",
+		pointerEvents: "none",
+		children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+			cx: b.x,
+			cy: b.y,
+			r: b.r,
+			fill: PACKAGE_BOUNDARY_FILL,
+			stroke: PACKAGE_BOUNDARY_STROKE,
+			strokeWidth: PACKAGE_BOUNDARY_STROKE_WIDTH,
+			strokeDasharray: PACKAGE_BOUNDARY_DASH,
+			opacity: .9
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+			x: b.x,
+			y: Math.max(12, b.y - b.r + 14),
+			fill: PACKAGE_LABEL_COLOR,
+			fontSize: PACKAGE_LABEL_FONT_SIZE,
+			textAnchor: "middle",
+			pointerEvents: "none",
+			children: pid.replace(/^pkg:/, "")
+		})] }, pid))
+	});
+};
+PackageBoundaries.displayName = "PackageBoundaries";
+function applyCircularLayout(nodes, width, height) {
+	const centerX = width / 2;
+	const centerY = height / 2;
+	const radius = Math.min(width, height) * CIRCULAR_LAYOUT_RADIUS_RATIO;
+	nodes.forEach((node, i) => {
+		const angle = 2 * Math.PI * i / nodes.length;
+		node.fx = centerX + Math.cos(angle) * radius;
+		node.fy = centerY + Math.sin(angle) * radius;
+		node.x = node.fx;
+		node.y = node.fy;
+	});
+}
+function applyHierarchicalLayout(nodes, width, height) {
+	const groups = /* @__PURE__ */ new Map();
+	nodes.forEach((n) => {
+		const key = n.packageGroup || n.group || "root";
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(n);
+	});
+	const groupArray = Array.from(groups.entries());
+	const cols = Math.ceil(Math.sqrt(groupArray.length));
+	const groupSpacingX = width * .8 / cols;
+	const groupSpacingY = height * .8 / Math.ceil(groupArray.length / cols);
+	groupArray.forEach(([groupKey, groupNodes], gi) => {
+		const col = gi % cols;
+		const row = Math.floor(gi / cols);
+		const groupX = (col + .5) * groupSpacingX;
+		const groupY = (row + .5) * groupSpacingY;
+		if (groupKey.startsWith("pkg:") || groupKey === groupKey) groupNodes.forEach((n, ni) => {
+			const angle = 2 * Math.PI * ni / groupNodes.length;
+			const r = Math.min(80, 20 + groupNodes.length * 8);
+			n.fx = groupX + Math.cos(angle) * r;
+			n.fy = groupY + Math.sin(angle) * r;
+			n.x = n.fx;
+			n.y = n.fy;
+		});
+	});
+}
+function applyInitialForceLayout(nodes, width, height) {
+	nodes.forEach((node) => {
+		if (node.fx === void 0 || node.fx === null) {
+			node.x = Math.random() * width;
+			node.y = Math.random() * height;
+		}
+	});
+}
+function useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef) {
+	(0, import_react.useEffect)(() => {
+		if (!enableZoom || !svgRef.current || !gRef.current) return;
+		const svg = select_default$1(svgRef.current);
+		const g = select_default$1(gRef.current);
+		const zoom3 = zoom_default().scaleExtent([.1, 10]).on("zoom", (event) => {
+			g.attr("transform", event.transform);
+			transformRef.current = event.transform;
+			setTransform(event.transform);
+		});
+		svg.call(zoom3);
+		return () => {
+			svg.on(".zoom", null);
+		};
+	}, [
+		enableZoom,
+		svgRef,
+		gRef,
+		setTransform,
+		transformRef
+	]);
+}
+function useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd) {
+	(0, import_react.useEffect)(() => {
+		if (!enableDrag) return;
+		const handleWindowMove = (event) => {
+			if (!dragActiveRef.current || !dragNodeRef.current) return;
+			const svg = svgRef.current;
+			if (!svg) return;
+			const rect = svg.getBoundingClientRect();
+			const t = transformRef.current;
+			const x = (event.clientX - rect.left - t.x) / t.k;
+			const y = (event.clientY - rect.top - t.y) / t.k;
+			dragNodeRef.current.fx = x;
+			dragNodeRef.current.fy = y;
+		};
+		const handleWindowUp = () => {
+			if (!dragActiveRef.current) return;
+			onDragEnd();
+			dragNodeRef.current = null;
+			dragActiveRef.current = false;
+		};
+		const handleWindowLeave = (event) => {
+			if (event.relatedTarget === null) handleWindowUp();
+		};
+		window.addEventListener("mousemove", handleWindowMove);
+		window.addEventListener("mouseup", handleWindowUp);
+		window.addEventListener("mouseout", handleWindowLeave);
+		window.addEventListener("blur", handleWindowUp);
+		return () => {
+			window.removeEventListener("mousemove", handleWindowMove);
+			window.removeEventListener("mouseup", handleWindowUp);
+			window.removeEventListener("mouseout", handleWindowLeave);
+			window.removeEventListener("blur", handleWindowUp);
+		};
+	}, [
+		enableDrag,
+		svgRef,
+		transformRef,
+		dragActiveRef,
+		dragNodeRef,
+		onDragEnd
+	]);
+}
+var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, links: initialLinks, width, height, enableZoom = true, enableDrag = true, onNodeClick, onNodeHover, onLinkClick, selectedNodeId, hoveredNodeId, defaultNodeColor = DEFAULT_NODE_COLOR, defaultNodeSize = DEFAULT_NODE_SIZE, defaultLinkColor = DEFAULT_LINK_COLOR, defaultLinkWidth = DEFAULT_LINK_WIDTH, showNodeLabels = true, showLinkLabels = false, className, manualLayout = false, onManualLayoutChange, packageBounds, layout: externalLayout, onLayoutChange }, ref) => {
 	const svgRef = (0, import_react.useRef)(null);
 	const gRef = (0, import_react.useRef)(null);
 	const [transform, setTransform] = (0, import_react.useState)({
@@ -28232,7 +28592,7 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 	const [layout, setLayout] = (0, import_react.useState)(externalLayout || "force");
 	(0, import_react.useEffect)(() => {
 		if (externalLayout && externalLayout !== layout) setLayout(externalLayout);
-	}, [externalLayout]);
+	}, [externalLayout, layout]);
 	const handleLayoutChange = (0, import_react.useCallback)((newLayout) => {
 		setLayout(newLayout);
 		onLayoutChange?.(newLayout);
@@ -28242,83 +28602,25 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 	}, [enableDrag]);
 	const nodes = import_react.useMemo(() => {
 		if (!initialNodes || !initialNodes.length) return initialNodes;
-		const centerX = width / 2;
-		const centerY = height / 2;
-		if (layout === "force") return initialNodes.map((n) => ({
-			...n,
-			x: Math.random() * width,
-			y: Math.random() * height
-		}));
-		if (layout === "circular") {
-			const radius = Math.min(width, height) * .35;
-			return initialNodes.map((n, i) => ({
-				...n,
-				x: centerX + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
-				y: centerY + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
-			}));
-		}
-		if (layout === "hierarchical") {
-			const cols = Math.ceil(Math.sqrt(initialNodes.length));
-			const spacingX = width / (cols + 1);
-			const spacingY = height / (Math.ceil(initialNodes.length / cols) + 1);
-			return initialNodes.map((n, i) => ({
-				...n,
-				x: spacingX * (i % cols + 1),
-				y: spacingY * (Math.floor(i / cols) + 1)
-			}));
-		}
-		return initialNodes;
+		const copy = initialNodes.map((n) => ({ ...n }));
+		if (layout === "circular") applyCircularLayout(copy, width, height);
+		else if (layout === "hierarchical") applyHierarchicalLayout(copy, width, height);
+		else applyInitialForceLayout(copy, width, height);
+		return copy;
 	}, [
 		initialNodes,
 		width,
 		height,
 		layout
 	]);
-	const links = initialLinks;
 	const restart = import_react.useCallback(() => {}, []);
 	const stop = import_react.useCallback(() => {}, []);
 	const setForcesEnabled = import_react.useCallback((enabled) => {}, []);
 	(0, import_react.useEffect)(() => {
 		if (!nodes || nodes.length === 0) return;
-		const applyLayout = () => {
-			const centerX = width / 2;
-			const centerY = height / 2;
-			if (layout === "circular") {
-				const radius = Math.min(width, height) * .35;
-				nodes.forEach((node, i) => {
-					const angle = 2 * Math.PI * i / nodes.length;
-					node.fx = centerX + Math.cos(angle) * radius;
-					node.fy = centerY + Math.sin(angle) * radius;
-				});
-			} else if (layout === "hierarchical") {
-				const groups = /* @__PURE__ */ new Map();
-				nodes.forEach((n) => {
-					const key = n.packageGroup || n.group || "root";
-					if (!groups.has(key)) groups.set(key, []);
-					groups.get(key).push(n);
-				});
-				const groupArray = Array.from(groups.entries());
-				const cols = Math.ceil(Math.sqrt(groupArray.length));
-				const groupSpacingX = width * .8 / cols;
-				const groupSpacingY = height * .8 / Math.ceil(groupArray.length / cols);
-				groupArray.forEach(([groupKey, groupNodes], gi) => {
-					const col = gi % cols;
-					const row = Math.floor(gi / cols);
-					const groupX = (col + .5) * groupSpacingX;
-					const groupY = (row + .5) * groupSpacingY;
-					if (groupKey.startsWith("pkg:") || groupKey === groupKey) groupNodes.forEach((n, ni) => {
-						const angle = 2 * Math.PI * ni / groupNodes.length;
-						const r = Math.min(80, 20 + groupNodes.length * 8);
-						n.fx = groupX + Math.cos(angle) * r;
-						n.fy = groupY + Math.sin(angle) * r;
-					});
-				});
-			}
-			try {
-				restart();
-			} catch (e) {}
-		};
-		applyLayout();
+		if (layout === "circular") applyCircularLayout(nodes, width, height);
+		else if (layout === "hierarchical") applyHierarchicalLayout(nodes, width, height);
+		restart();
 	}, [
 		layout,
 		nodes,
@@ -28327,10 +28629,8 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		restart
 	]);
 	(0, import_react.useEffect)(() => {
-		try {
-			if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
-			else setForcesEnabled(true);
-		} catch (e) {}
+		if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
+		else setForcesEnabled(true);
 	}, [
 		manualLayout,
 		pinnedNodes,
@@ -28368,7 +28668,7 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 			let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
 			nodes.forEach((node) => {
 				if (node.x !== void 0 && node.y !== void 0) {
-					const size = node.size || 10;
+					const size = node.size || DEFAULT_NODE_SIZE;
 					minX = Math.min(minX, node.x - size);
 					maxX = Math.max(maxX, node.x + size);
 					minY = Math.min(minY, node.y - size);
@@ -28376,18 +28676,13 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 				}
 			});
 			if (!isFinite(minX)) return;
-			const padding = 40;
-			const nodeWidth = maxX - minX;
-			const nodeHeight = maxY - minY;
-			const scale = Math.min((width - padding * 2) / nodeWidth, (height - padding * 2) / nodeHeight, 10);
-			const centerX = (minX + maxX) / 2;
-			const centerY = (minY + maxY) / 2;
-			const x = width / 2 - centerX * scale;
-			const y = height / 2 - centerY * scale;
+			const scale = Math.min((width - FIT_VIEW_PADDING * 2) / (maxX - minX), (height - FIT_VIEW_PADDING * 2) / (maxY - minY), 10);
+			const x = width / 2 - (minX + maxX) / 2 * scale;
+			const y = height / 2 - (minY + maxY) / 2 * scale;
 			if (gRef.current && svgRef.current) {
 				const svg = select_default$1(svgRef.current);
 				const newTransform = identity.translate(x, y).scale(scale);
-				svg.transition().duration(300).call(zoom_default().transform, newTransform);
+				svg.transition().duration(TRANSITION_DURATION_MS).call(zoom_default().transform, newTransform);
 				setTransform(newTransform);
 			}
 		},
@@ -28395,9 +28690,7 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		setDragMode: (enabled) => {
 			internalDragEnabledRef.current = enabled;
 		},
-		setLayout: (newLayout) => {
-			handleLayoutChange(newLayout);
-		},
+		setLayout: (newLayout) => handleLayoutChange(newLayout),
 		getLayout: () => layout
 	}), [
 		nodes,
@@ -28406,46 +28699,34 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		width,
 		height,
 		layout,
-		handleLayoutChange
+		handleLayoutChange,
+		setForcesEnabled
 	]);
 	(0, import_react.useEffect)(() => {
-		try {
-			if (typeof onManualLayoutChange === "function") onManualLayoutChange(manualLayout);
-		} catch (e) {}
+		if (typeof onManualLayoutChange === "function") onManualLayoutChange(manualLayout);
 	}, [manualLayout, onManualLayoutChange]);
+	useGraphZoom(svgRef, gRef, enableZoom, setTransform, transformRef);
+	useWindowDrag(enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, () => {
+		setForcesEnabled(true);
+		restart();
+	});
 	(0, import_react.useEffect)(() => {
-		if (!enableZoom || !svgRef.current || !gRef.current) return;
-		const svg = select_default$1(svgRef.current);
+		if (!gRef.current) return;
 		const g = select_default$1(gRef.current);
-		const zoom2 = zoom_default().scaleExtent([.1, 10]).on("zoom", (event) => {
-			g.attr("transform", event.transform);
-			transformRef.current = event.transform;
-			setTransform(event.transform);
+		g.selectAll("g.node").each(function() {
+			const datum = select_default$1(this).datum();
+			if (!datum) return;
+			select_default$1(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
 		});
-		svg.call(zoom2);
-		return () => {
-			svg.on(".zoom", null);
-		};
-	}, [enableZoom]);
-	(0, import_react.useEffect)(() => {
-		if (!gRef.current) return;
-		try {
-			const g = select_default$1(gRef.current);
-			g.selectAll("g.node").each(function() {
-				const datum = select_default$1(this).datum();
-				if (!datum) return;
-				select_default$1(this).attr("transform", `translate(${datum.x || 0},${datum.y || 0})`);
-			});
-			g.selectAll("line").each(function() {
-				const l = select_default$1(this).datum();
-				if (!l) return;
-				const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
-				const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
-				if (!s || !t) return;
-				select_default$1(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
-			});
-		} catch (e) {}
-	}, [nodes, links]);
+		g.selectAll("line").each(function() {
+			const l = select_default$1(this).datum();
+			if (!l) return;
+			const s = typeof l.source === "object" ? l.source : nodes.find((n) => n.id === l.source) || l.source;
+			const t = typeof l.target === "object" ? l.target : nodes.find((n) => n.id === l.target) || l.target;
+			if (!s || !t) return;
+			select_default$1(this).attr("x1", s.x).attr("y1", s.y).attr("x2", t.x).attr("y2", t.y);
+		});
+	}, [nodes, initialLinks]);
 	const handleDragStart = (0, import_react.useCallback)((event, node) => {
 		if (!enableDrag) return;
 		event.preventDefault();
@@ -28455,96 +28736,46 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		node.fx = node.x;
 		node.fy = node.y;
 		setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-		try {
-			stop();
-		} catch (e) {}
-	}, [enableDrag, restart]);
-	(0, import_react.useEffect)(() => {
-		if (!enableDrag) return;
-		const handleWindowMove = (event) => {
-			if (!dragActiveRef.current || !dragNodeRef.current) return;
-			const svg = svgRef.current;
-			if (!svg) return;
-			const rect = svg.getBoundingClientRect();
-			const t = transformRef.current;
-			const x = (event.clientX - rect.left - t.x) / t.k;
-			const y = (event.clientY - rect.top - t.y) / t.k;
-			dragNodeRef.current.fx = x;
-			dragNodeRef.current.fy = y;
-		};
-		const handleWindowUp = () => {
-			if (!dragActiveRef.current) return;
-			try {
-				setForcesEnabled(true);
-				restart();
-			} catch (e) {}
-			dragNodeRef.current = null;
-			dragActiveRef.current = false;
-		};
-		const handleWindowLeave = (event) => {
-			if (event.relatedTarget === null) handleWindowUp();
-		};
-		window.addEventListener("mousemove", handleWindowMove);
-		window.addEventListener("mouseup", handleWindowUp);
-		window.addEventListener("mouseout", handleWindowLeave);
-		window.addEventListener("blur", handleWindowUp);
-		return () => {
-			window.removeEventListener("mousemove", handleWindowMove);
-			window.removeEventListener("mouseup", handleWindowUp);
-			window.removeEventListener("mouseout", handleWindowLeave);
-			window.removeEventListener("blur", handleWindowUp);
-		};
-	}, [enableDrag]);
+		stop();
+	}, [enableDrag, stop]);
 	(0, import_react.useEffect)(() => {
 		if (!gRef.current || !enableDrag) return;
 		const g = select_default$1(gRef.current);
-		const dragBehavior = drag_default().on("start", function(event) {
-			try {
-				const id = ((event.sourceEvent && event.sourceEvent.target || event.target).closest?.("g.node"))?.getAttribute("data-id");
-				if (!id) return;
-				const node = nodes.find((n) => n.id === id);
-				if (!node) return;
-				if (!internalDragEnabledRef.current) return;
-				if (!event.active) restart();
-				dragActiveRef.current = true;
-				dragNodeRef.current = node;
-				node.fx = node.x;
-				node.fy = node.y;
-				setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
-			} catch (e) {}
-		}).on("drag", function(event) {
+		const dragBehavior = drag_default().on("start", (event) => {
+			const id = ((event.sourceEvent && event.sourceEvent.target || event.target).closest?.("g.node"))?.getAttribute("data-id");
+			if (!id || !internalDragEnabledRef.current) return;
+			const node = nodes.find((n) => n.id === id);
+			if (!node) return;
+			if (!event.active) restart();
+			dragActiveRef.current = true;
+			dragNodeRef.current = node;
+			node.fx = node.x;
+			node.fy = node.y;
+			setPinnedNodes((prev) => /* @__PURE__ */ new Set([...prev, node.id]));
+		}).on("drag", (event) => {
 			if (!dragActiveRef.current || !dragNodeRef.current) return;
 			const svg = svgRef.current;
 			if (!svg) return;
 			const rect = svg.getBoundingClientRect();
-			const x = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
-			const y = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
-			dragNodeRef.current.fx = x;
-			dragNodeRef.current.fy = y;
-		}).on("end", function() {
-			try {
-				setForcesEnabled(true);
-				restart();
-			} catch (e) {}
+			dragNodeRef.current.fx = (event.sourceEvent.clientX - rect.left - transform.x) / transform.k;
+			dragNodeRef.current.fy = (event.sourceEvent.clientY - rect.top - transform.y) / transform.k;
+		}).on("end", () => {
+			setForcesEnabled(true);
+			restart();
 		});
-		try {
-			g.selectAll("g.node").call(dragBehavior);
-		} catch (e) {}
+		g.selectAll("g.node").call(dragBehavior);
 		return () => {
-			try {
-				g.selectAll("g.node").on(".drag", null);
-			} catch (e) {}
+			g.selectAll("g.node").on(".drag", null);
 		};
 	}, [
 		gRef,
 		enableDrag,
 		nodes,
 		transform,
-		restart
+		restart,
+		setForcesEnabled,
+		internalDragEnabledRef
 	]);
-	const handleNodeClick = (0, import_react.useCallback)((node) => {
-		onNodeClick?.(node);
-	}, [onNodeClick]);
 	const handleNodeDoubleClick = (0, import_react.useCallback)((event, node) => {
 		event.stopPropagation();
 		if (!enableDrag) return;
@@ -28563,29 +28794,19 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		}
 		restart();
 	}, [enableDrag, restart]);
-	const handleCanvasDoubleClick = (0, import_react.useCallback)(() => {
-		nodes.forEach((node) => {
-			node.fx = null;
-			node.fy = null;
-		});
-		setPinnedNodes(/* @__PURE__ */ new Set());
-		restart();
-	}, [nodes, restart]);
-	const handleNodeMouseEnter = (0, import_react.useCallback)((node) => {
-		onNodeHover?.(node);
-	}, [onNodeHover]);
-	const handleNodeMouseLeave = (0, import_react.useCallback)(() => {
-		onNodeHover?.(null);
-	}, [onNodeHover]);
-	const handleLinkClick = (0, import_react.useCallback)((link) => {
-		onLinkClick?.(link);
-	}, [onLinkClick]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
 		ref: svgRef,
 		width,
 		height,
 		className: cn("bg-white dark:bg-gray-900", className),
-		onDoubleClick: handleCanvasDoubleClick,
+		onDoubleClick: () => {
+			nodes.forEach((n) => {
+				n.fx = null;
+				n.fy = null;
+			});
+			setPinnedNodes(/* @__PURE__ */ new Set());
+			restart();
+		},
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
 			id: "arrow",
 			viewBox: "0 0 10 10",
@@ -28601,9 +28822,9 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 		}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
 			ref: gRef,
 			children: [
-				links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
+				initialLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkItem_default, {
 					link,
-					onClick: handleLinkClick,
+					onClick: onLinkClick,
 					defaultWidth: defaultLinkWidth,
 					showLabel: showLinkLabels,
 					nodes
@@ -28616,34 +28837,13 @@ var ForceDirectedGraph = (0, import_react.forwardRef)(({ nodes: initialNodes, li
 					defaultNodeSize,
 					defaultNodeColor,
 					showLabel: showNodeLabels,
-					onClick: handleNodeClick,
+					onClick: onNodeClick,
 					onDoubleClick: handleNodeDoubleClick,
-					onMouseEnter: handleNodeMouseEnter,
-					onMouseLeave: handleNodeMouseLeave,
+					onMouseEnter: (n) => onNodeHover?.(n),
+					onMouseLeave: () => onNodeHover?.(null),
 					onMouseDown: handleDragStart
 				}, node.id)),
-				packageBounds && Object.keys(packageBounds).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-					className: "package-boundaries",
-					pointerEvents: "none",
-					children: Object.entries(packageBounds).map(([pid, b]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-						cx: b.x,
-						cy: b.y,
-						r: b.r,
-						fill: "rgba(148,163,184,0.06)",
-						stroke: "#475569",
-						strokeWidth: 2,
-						strokeDasharray: "6 6",
-						opacity: .9
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-						x: b.x,
-						y: Math.max(12, b.y - b.r + 14),
-						fill: "#475569",
-						fontSize: 11,
-						textAnchor: "middle",
-						pointerEvents: "none",
-						children: pid.replace(/^pkg:/, "")
-					})] }, pid))
-				})
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PackageBoundaries, { packageBounds: packageBounds || {} })
 			]
 		})]
 	});
@@ -29089,4 +29289,4 @@ function App() {
 (0, import_client.createRoot)(document.getElementById("root")).render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}) }));
 //#endregion
 
-//# sourceMappingURL=index-DbVV6ZUw.js.map
+//# sourceMappingURL=index-BG4XVj8A.js.map