@quantumwake/kgraph 0.1.2 → 0.2.1

package/dist/chunk-KII5OTZR.cjs

@@ -0,0 +1,1347 @@
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/KGraphCanvas.tsx
+var KGraphContext = React2.createContext(null);
+function useKGraphContext() {
+  const ctx = React2.useContext(KGraphContext);
+  if (!ctx) {
+    throw new Error("useKGraphContext must be used within a KGraphProvider");
+  }
+  return ctx;
+}
+var KGraphProvider = ({
+  children,
+  nodes,
+  edges,
+  initialViewport = { x: 0, y: 0, zoom: 1 },
+  minZoom = 0.1,
+  maxZoom = 4
+}) => {
+  const [viewport, setViewport] = React2.useState(initialViewport);
+  const containerRef = React2.useRef(null);
+  const handlesRef = React2.useRef(/* @__PURE__ */ new Map());
+  const screenToCanvasPosition = React2.useCallback((screenX, screenY) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return { x: screenX, y: screenY };
+    const x = (screenX - rect.left - viewport.x) / viewport.zoom;
+    const y = (screenY - rect.top - viewport.y) / viewport.zoom;
+    return { x, y };
+  }, [viewport]);
+  const canvasToScreenPosition = React2.useCallback((canvasX, canvasY) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return { x: canvasX, y: canvasY };
+    const x = canvasX * viewport.zoom + viewport.x + rect.left;
+    const y = canvasY * viewport.zoom + viewport.y + rect.top;
+    return { x, y };
+  }, [viewport]);
+  const fitView = React2.useCallback((options) => {
+    if (nodes.length === 0) return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const padding = options?.padding ?? 0.2;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const node of nodes) {
+      const w = node.width || 200;
+      const h = node.height || 100;
+      minX = Math.min(minX, node.position.x);
+      minY = Math.min(minY, node.position.y);
+      maxX = Math.max(maxX, node.position.x + w);
+      maxY = Math.max(maxY, node.position.y + h);
+    }
+    const graphWidth = maxX - minX;
+    const graphHeight = maxY - minY;
+    if (graphWidth <= 0 || graphHeight <= 0) return;
+    const availW = rect.width * (1 - padding * 2);
+    const availH = rect.height * (1 - padding * 2);
+    const zoom = Math.min(
+      Math.max(availW / graphWidth, minZoom),
+      Math.max(availH / graphHeight, minZoom),
+      maxZoom
+    );
+    const clampedZoom = Math.min(Math.max(zoom, minZoom), maxZoom);
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    setViewport({
+      x: rect.width / 2 - centerX * clampedZoom,
+      y: rect.height / 2 - centerY * clampedZoom,
+      zoom: clampedZoom
+    });
+  }, [nodes, minZoom, maxZoom]);
+  const zoomIn = React2.useCallback(() => {
+    setViewport((v) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      const newZoom = Math.min(v.zoom * 1.2, maxZoom);
+      if (!rect) return { ...v, zoom: newZoom };
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      return {
+        x: cx - (cx - v.x) * (newZoom / v.zoom),
+        y: cy - (cy - v.y) * (newZoom / v.zoom),
+        zoom: newZoom
+      };
+    });
+  }, [maxZoom]);
+  const zoomOut = React2.useCallback(() => {
+    setViewport((v) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      const newZoom = Math.max(v.zoom / 1.2, minZoom);
+      if (!rect) return { ...v, zoom: newZoom };
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      return {
+        x: cx - (cx - v.x) * (newZoom / v.zoom),
+        y: cy - (cy - v.y) * (newZoom / v.zoom),
+        zoom: newZoom
+      };
+    });
+  }, [minZoom]);
+  const zoomTo = React2.useCallback((level) => {
+    setViewport((v) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      const newZoom = Math.min(Math.max(level, minZoom), maxZoom);
+      if (!rect) return { ...v, zoom: newZoom };
+      const cx = rect.width / 2;
+      const cy = rect.height / 2;
+      return {
+        x: cx - (cx - v.x) * (newZoom / v.zoom),
+        y: cy - (cy - v.y) * (newZoom / v.zoom),
+        zoom: newZoom
+      };
+    });
+  }, [minZoom, maxZoom]);
+  const registerHandle = React2.useCallback((info) => {
+    handlesRef.current.set(`${info.nodeId}:${info.handleId}`, info);
+  }, []);
+  const unregisterHandle = React2.useCallback((nodeId, handleId) => {
+    handlesRef.current.delete(`${nodeId}:${handleId}`);
+  }, []);
+  const getHandlePosition = React2.useCallback((nodeId, handleId) => {
+    return handlesRef.current.get(`${nodeId}:${handleId}`);
+  }, []);
+  const getAllHandles = React2.useCallback(() => {
+    return handlesRef.current;
+  }, []);
+  const value = React2.useMemo(() => ({
+    viewport,
+    setViewport,
+    screenToCanvasPosition,
+    canvasToScreenPosition,
+    fitView,
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    registerHandle,
+    unregisterHandle,
+    getHandlePosition,
+    getAllHandles,
+    containerRef,
+    nodes,
+    edges
+  }), [viewport, screenToCanvasPosition, canvasToScreenPosition, fitView, zoomIn, zoomOut, zoomTo, registerHandle, unregisterHandle, getHandlePosition, getAllHandles, nodes, edges]);
+  return /* @__PURE__ */ jsxRuntime.jsx(KGraphContext.Provider, { value, children });
+};
+var NodeWrapper = ({
+  node,
+  nodeComponent: NodeComponent,
+  onNodesChange,
+  snapToGrid,
+  snapGrid,
+  draggable,
+  selectable,
+  onNodeClick,
+  onConnectionStart,
+  zoom
+}) => {
+  const wrapperRef = React2.useRef(null);
+  const dragRef = React2.useRef(null);
+  const onNodesChangeRef = React2.useRef(onNodesChange);
+  onNodesChangeRef.current = onNodesChange;
+  const zoomRef = React2.useRef(zoom);
+  zoomRef.current = zoom;
+  const snapRef = React2.useRef({ snapToGrid, snapGrid });
+  snapRef.current = { snapToGrid, snapGrid };
+  const { registerHandle, unregisterHandle } = useKGraphContext();
+  const updateHandlePositions = React2.useCallback(() => {
+    if (!wrapperRef.current) return;
+    const handles = wrapperRef.current.querySelectorAll("[data-handleid]");
+    handles.forEach((el) => {
+      const handleId = el.getAttribute("data-handleid");
+      const handleType = el.getAttribute("data-handletype");
+      const handlePosition = el.getAttribute("data-handleposition");
+      if (!handleId || !handleType || !handlePosition) return;
+      const nodeW = wrapperRef.current.offsetWidth;
+      const nodeH = wrapperRef.current.offsetHeight;
+      let hx = node.position.x;
+      let hy = node.position.y;
+      switch (handlePosition) {
+        case "top":
+          hx += nodeW / 2;
+          break;
+        case "bottom":
+          hx += nodeW / 2;
+          hy += nodeH;
+          break;
+        case "left":
+          hy += nodeH / 2;
+          break;
+        case "right":
+          hx += nodeW;
+          hy += nodeH / 2;
+          break;
+      }
+      registerHandle({
+        nodeId: node.id,
+        handleId,
+        type: handleType,
+        position: handlePosition,
+        x: hx,
+        y: hy
+      });
+    });
+  }, [node.id, node.position.x, node.position.y, registerHandle]);
+  React2.useEffect(() => {
+    if (!wrapperRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0 && (width !== node.width || height !== node.height)) {
+          onNodesChangeRef.current?.([{
+            type: "dimensions",
+            id: node.id,
+            dimensions: { width, height }
+          }]);
+        }
+      }
+      updateHandlePositions();
+    });
+    ro.observe(wrapperRef.current);
+    return () => ro.disconnect();
+  }, [node.id, node.width, node.height, updateHandlePositions]);
+  React2.useEffect(() => {
+    updateHandlePositions();
+  }, [updateHandlePositions]);
+  React2.useEffect(() => {
+    return () => {
+      if (!wrapperRef.current) return;
+      const handles = wrapperRef.current.querySelectorAll("[data-handleid]");
+      handles.forEach((el) => {
+        const handleId = el.getAttribute("data-handleid");
+        if (handleId) unregisterHandle(node.id, handleId);
+      });
+    };
+  }, [node.id, unregisterHandle]);
+  const handleMouseDown = React2.useCallback((e) => {
+    const target = e.target;
+    if (target.closest("[data-handleid]")) return;
+    if (target.closest('[role="dialog"]')) return;
+    if (selectable) {
+      onNodeClick?.(e, node);
+    }
+    if (!draggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startNodeX: node.position.x,
+      startNodeY: node.position.y,
+      isDragging: false,
+      lastPosition: { x: node.position.x, y: node.position.y }
+    };
+    const nodeId = node.id;
+    const handleMouseMove = (ev) => {
+      if (!dragRef.current) return;
+      const currentZoom = zoomRef.current;
+      const dx = (ev.clientX - dragRef.current.startX) / currentZoom;
+      const dy = (ev.clientY - dragRef.current.startY) / currentZoom;
+      if (!dragRef.current.isDragging && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
+        dragRef.current.isDragging = true;
+      }
+      if (!dragRef.current.isDragging) return;
+      let newX = dragRef.current.startNodeX + dx;
+      let newY = dragRef.current.startNodeY + dy;
+      const { snapToGrid: snap, snapGrid: grid } = snapRef.current;
+      if (snap) {
+        newX = Math.round(newX / grid[0]) * grid[0];
+        newY = Math.round(newY / grid[1]) * grid[1];
+      }
+      dragRef.current.lastPosition = { x: newX, y: newY };
+      onNodesChangeRef.current?.([{
+        type: "position",
+        id: nodeId,
+        position: { x: newX, y: newY },
+        dragging: true
+      }]);
+    };
+    const handleMouseUp = () => {
+      if (dragRef.current?.isDragging) {
+        onNodesChangeRef.current?.([{
+          type: "position",
+          id: nodeId,
+          position: dragRef.current.lastPosition,
+          dragging: false
+        }]);
+      }
+      dragRef.current = null;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }, [node.id, node.position.x, node.position.y, draggable, selectable, onNodeClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "kgraph-node-wrapper",
+      style: {
+        position: "absolute",
+        left: node.position.x,
+        top: node.position.y,
+        cursor: draggable ? "grab" : "default",
+        userSelect: "none"
+      },
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ jsxRuntime.jsx(HandleContext.Provider, { value: { nodeId: node.id, onConnectionStart }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        NodeComponent,
+        {
+          id: node.id,
+          data: node.data,
+          selected: node.selected || false,
+          type: node.type
+        }
+      ) })
+    }
+  );
+};
+var HandleContext = React2__default.default.createContext({ nodeId: "" });
+var useHandleContext = () => React2__default.default.useContext(HandleContext);
+var NodeRenderer = ({
+  nodes,
+  nodeTypes,
+  defaultNodeType,
+  onNodesChange,
+  snapToGrid,
+  snapGrid,
+  draggable,
+  selectable,
+  onNodeClick,
+  onConnectionStart,
+  zoom
+}) => {
+  const DefaultNode = defaultNodeType || (({ data }) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    padding: "10px 20px",
+    border: "2px solid #8b5cf6",
+    borderRadius: 4,
+    background: "#1a1a2e",
+    color: "#fff",
+    fontSize: 14
+  }, children: data.label || "Node" }));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nodes.filter((n) => !n.hidden).map((node) => {
+    const Component = nodeTypes[node.type] || DefaultNode;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NodeWrapper,
+      {
+        node,
+        nodeComponent: Component,
+        onNodesChange,
+        snapToGrid,
+        snapGrid,
+        draggable,
+        selectable,
+        onNodeClick,
+        onConnectionStart,
+        zoom
+      },
+      node.id
+    );
+  }) });
+};
+var NodeRenderer_default = NodeRenderer;
+
+// src/bezier.ts
+function getBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = "bottom",
+  targetX,
+  targetY,
+  targetPosition = "top",
+  curvature = 0.25
+}) {
+  const [sourceControlX, sourceControlY] = getControlWithCurvature(
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    curvature
+  );
+  const [targetControlX, targetControlY] = getControlWithCurvature(
+    targetPosition,
+    targetX,
+    targetY,
+    sourceX,
+    sourceY,
+    curvature
+  );
+  const path = `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`;
+  const labelX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
+  const labelY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
+  const offsetX = Math.abs(labelX - sourceX);
+  const offsetY = Math.abs(labelY - sourceY);
+  return [path, labelX, labelY, offsetX, offsetY];
+}
+function calculateControlOffset(distance, curvature) {
+  if (distance >= 0) {
+    return 0.5 * distance;
+  }
+  return curvature * 25 * Math.sqrt(-distance);
+}
+function getControlWithCurvature(pos, x1, y1, x2, y2, c) {
+  switch (pos) {
+    case "left":
+      return [x1 - calculateControlOffset(x1 - x2, c), y1];
+    case "right":
+      return [x1 + calculateControlOffset(x2 - x1, c), y1];
+    case "top":
+      return [x1, y1 - calculateControlOffset(y1 - y2, c)];
+    case "bottom":
+      return [x1, y1 + calculateControlOffset(y2 - y1, c)];
+    default:
+      return [x1, y1 + calculateControlOffset(y2 - y1, c)];
+  }
+}
+var DefaultEdge = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected
+}) => {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 20,
+        style: { cursor: "pointer" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: selected ? "#a78bfa" : "#8b5cf6",
+        strokeWidth: selected ? 2.5 : 1.5,
+        markerEnd: selected ? "url(#kgraph-arrow-selected)" : "url(#kgraph-arrow)",
+        style: { cursor: "pointer" }
+      }
+    )
+  ] });
+};
+function handleIdToPosition(handleId) {
+  if (!handleId) return "bottom";
+  const num = handleId.split("-")[1];
+  switch (num) {
+    case "1":
+      return "top";
+    case "2":
+      return "left";
+    case "3":
+      return "right";
+    case "4":
+      return "bottom";
+    default:
+      return "bottom";
+  }
+}
+var EdgeRenderer = ({
+  edges,
+  edgeTypes,
+  onEdgeClick,
+  selectedEdgeId
+}) => {
+  const { getHandlePosition, nodes } = useKGraphContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "kgraph-edges", children: edges.map((edge) => {
+    const sourceHandle = getHandlePosition(edge.source, edge.sourceHandle || "source-4");
+    const targetHandle = getHandlePosition(edge.target, edge.targetHandle || "target-1");
+    const sourceNode = nodes.find((n) => n.id === edge.source);
+    const targetNode = nodes.find((n) => n.id === edge.target);
+    if (!sourceNode && !sourceHandle) return null;
+    if (!targetNode && !targetHandle) return null;
+    const sourceX = sourceHandle?.x ?? sourceNode.position.x + (sourceNode.width || 200) / 2;
+    const sourceY = sourceHandle?.y ?? sourceNode.position.y + (sourceNode.height || 100);
+    const targetX = targetHandle?.x ?? targetNode.position.x + (targetNode.width || 200) / 2;
+    const targetY = targetHandle?.y ?? targetNode.position.y;
+    const sourcePosition = sourceHandle?.position ?? handleIdToPosition(edge.sourceHandle);
+    const targetPosition = targetHandle?.position ?? handleIdToPosition(edge.targetHandle);
+    const isSelected = edge.selected || edge.id === selectedEdgeId;
+    const EdgeComponent = edgeTypes[edge.type || "default"] || edgeTypes["default"] || DefaultEdge;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "g",
+      {
+        className: "kgraph-edge",
+        onClick: (e) => onEdgeClick?.(e, edge),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          EdgeComponent,
+          {
+            id: edge.id,
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+            sourcePosition,
+            targetPosition,
+            selected: isSelected,
+            data: edge.data,
+            animated: edge.animated
+          }
+        )
+      },
+      edge.id
+    );
+  }) });
+};
+var EdgeRenderer_default = EdgeRenderer;
+var ConnectionLine = ({
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY
+}) => {
+  let targetPosition = "top";
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  if (Math.abs(dx) > Math.abs(dy)) {
+    targetPosition = dx > 0 ? "left" : "right";
+  } else {
+    targetPosition = dy > 0 ? "top" : "bottom";
+  }
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "kgraph-connection-line", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: "#8b5cf6",
+        strokeWidth: 2,
+        strokeDasharray: "6 3",
+        opacity: 0.8
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: targetX,
+        cy: targetY,
+        r: 6,
+        fill: "#8b5cf6",
+        opacity: 0.6
+      }
+    )
+  ] });
+};
+var ConnectionLine_default = ConnectionLine;
+var DotGrid = ({
+  viewport,
+  gap = 32,
+  color = "rgba(255, 255, 255, 0.15)",
+  size = 1.5
+}) => {
+  const scaledGap = gap * viewport.zoom;
+  const scaledSize = size * viewport.zoom;
+  const patternId = "kgraph-dot-pattern";
+  const offsetX = viewport.x % scaledGap;
+  const offsetY = viewport.y % scaledGap;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "kgraph-background",
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "pattern",
+          {
+            id: patternId,
+            x: offsetX,
+            y: offsetY,
+            width: scaledGap,
+            height: scaledGap,
+            patternUnits: "userSpaceOnUse",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: scaledSize,
+                cy: scaledSize,
+                r: scaledSize,
+                fill: color
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`
+          }
+        )
+      ]
+    }
+  );
+};
+var DotGrid_default = DotGrid;
+var MiniMap = ({
+  nodes,
+  viewport,
+  width = 200,
+  height = 150,
+  nodeColor = "#60a5fa",
+  maskColor = "rgba(14, 14, 16, 0.9)",
+  backgroundColor = "#161618",
+  borderColor = "#333338",
+  onViewportChange,
+  containerWidth,
+  containerHeight
+}) => {
+  const miniMapRef = React2.useRef(null);
+  const bounds = React2.useMemo(() => {
+    if (nodes.length === 0) return { minX: 0, minY: 0, maxX: 1e3, maxY: 1e3 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const node of nodes) {
+      const w = node.width || 200;
+      const h = node.height || 100;
+      minX = Math.min(minX, node.position.x);
+      minY = Math.min(minY, node.position.y);
+      maxX = Math.max(maxX, node.position.x + w);
+      maxY = Math.max(maxY, node.position.y + h);
+    }
+    const padX = (maxX - minX) * 0.2;
+    const padY = (maxY - minY) * 0.2;
+    return {
+      minX: minX - padX,
+      minY: minY - padY,
+      maxX: maxX + padX,
+      maxY: maxY + padY
+    };
+  }, [nodes]);
+  const graphW = bounds.maxX - bounds.minX;
+  const graphH = bounds.maxY - bounds.minY;
+  const scale = Math.min(width / graphW, height / graphH);
+  const viewRect = React2.useMemo(() => {
+    const vx = (-viewport.x / viewport.zoom - bounds.minX) * scale;
+    const vy = (-viewport.y / viewport.zoom - bounds.minY) * scale;
+    const vw = containerWidth / viewport.zoom * scale;
+    const vh = containerHeight / viewport.zoom * scale;
+    return { x: vx, y: vy, width: vw, height: vh };
+  }, [viewport, bounds, scale, containerWidth, containerHeight]);
+  const getColor = React2.useCallback((node) => {
+    if (typeof nodeColor === "function") return nodeColor(node);
+    return nodeColor;
+  }, [nodeColor]);
+  const handleClick = React2.useCallback((e) => {
+    if (!miniMapRef.current || !onViewportChange) return;
+    const rect = miniMapRef.current.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const clickY = e.clientY - rect.top;
+    const canvasX = clickX / scale + bounds.minX;
+    const canvasY = clickY / scale + bounds.minY;
+    onViewportChange({
+      x: -(canvasX * viewport.zoom - containerWidth / 2),
+      y: -(canvasY * viewport.zoom - containerHeight / 2),
+      zoom: viewport.zoom
+    });
+  }, [bounds, scale, viewport.zoom, containerWidth, containerHeight, onViewportChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "kgraph-minimap",
+      style: {
+        position: "absolute",
+        bottom: 10,
+        right: 10,
+        zIndex: 20,
+        borderRadius: 2,
+        overflow: "hidden",
+        border: `1px solid ${borderColor}`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          ref: miniMapRef,
+          width,
+          height,
+          style: { backgroundColor, display: "block", cursor: "pointer" },
+          onClick: handleClick,
+          children: [
+            nodes.filter((n) => !n.hidden).map((node) => {
+              const nx = (node.position.x - bounds.minX) * scale;
+              const ny = (node.position.y - bounds.minY) * scale;
+              const nw = (node.width || 200) * scale;
+              const nh = (node.height || 100) * scale;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: nx,
+                  y: ny,
+                  width: Math.max(nw, 4),
+                  height: Math.max(nh, 3),
+                  fill: getColor(node),
+                  rx: 1
+                },
+                node.id
+              );
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: 0,
+                y: 0,
+                width,
+                height: viewRect.y,
+                fill: maskColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: 0,
+                y: viewRect.y + viewRect.height,
+                width,
+                height: height - viewRect.y - viewRect.height,
+                fill: maskColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: 0,
+                y: viewRect.y,
+                width: viewRect.x,
+                height: viewRect.height,
+                fill: maskColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: viewRect.x + viewRect.width,
+                y: viewRect.y,
+                width: width - viewRect.x - viewRect.width,
+                height: viewRect.height,
+                fill: maskColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: viewRect.x,
+                y: viewRect.y,
+                width: viewRect.width,
+                height: viewRect.height,
+                fill: "none",
+                stroke: "rgba(96, 165, 250, 0.5)",
+                strokeWidth: 1.5
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var MiniMap_default = MiniMap;
+var InnerCanvas = ({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  onNodeClick,
+  onEdgeClick,
+  onPaneClick,
+  onDrop,
+  onDragOver,
+  nodeTypes = {},
+  edgeTypes = {},
+  snapToGrid = true,
+  snapGrid = [16, 16],
+  panOnDrag = true,
+  zoomOnScroll = true,
+  nodesDraggable = true,
+  nodesConnectable = true,
+  elementsSelectable = true,
+  fitView: fitViewOnMount = false,
+  showMiniMap = true,
+  showBackground = true,
+  backgroundGap = 32,
+  minZoom = 0.1,
+  maxZoom = 4,
+  className = "",
+  style = {},
+  children
+}) => {
+  const ctx = useKGraphContext();
+  const { viewport, setViewport, containerRef, screenToCanvasPosition } = ctx;
+  const panRef = React2.useRef(null);
+  const [connectionDrag, setConnectionDrag] = React2.useState(null);
+  const [containerSize, setContainerSize] = React2.useState({ width: 0, height: 0 });
+  const nodesRef = React2.useRef(nodes);
+  nodesRef.current = nodes;
+  const edgesRef = React2.useRef(edges);
+  edgesRef.current = edges;
+  const onNodesChangeRef = React2.useRef(onNodesChange);
+  onNodesChangeRef.current = onNodesChange;
+  const onEdgesChangeRef = React2.useRef(onEdgesChange);
+  onEdgesChangeRef.current = onEdgesChange;
+  const deselectAll = React2.useCallback(() => {
+    const nodeDeselects = nodesRef.current.filter((n) => n.selected).map((n) => ({ type: "select", id: n.id, selected: false }));
+    const edgeDeselects = edgesRef.current.filter((e) => e.selected).map((e) => ({ type: "select", id: e.id, selected: false }));
+    if (nodeDeselects.length) onNodesChangeRef.current?.(nodeDeselects);
+    if (edgeDeselects.length) onEdgesChangeRef.current?.(edgeDeselects);
+  }, []);
+  React2.useEffect(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [containerRef]);
+  React2.useEffect(() => {
+    if (fitViewOnMount && nodes.length > 0) {
+      const t = setTimeout(() => ctx.fitView({ padding: 0.2 }), 100);
+      return () => clearTimeout(t);
+    }
+  }, [fitViewOnMount, nodes.length > 0]);
+  const handlePaneMouseDown = React2.useCallback((e) => {
+    if (e.target.closest(".kgraph-node-wrapper")) return;
+    if (e.target.closest(".kgraph-edge-label")) return;
+    if (!panOnDrag) {
+      deselectAll();
+      onPaneClick?.(e);
+      return;
+    }
+    if (e.button !== 0) return;
+    panRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startVX: viewport.x,
+      startVY: viewport.y,
+      isPanning: false
+    };
+    const handleMouseMove = (ev) => {
+      const pan = panRef.current;
+      if (!pan) return;
+      const dx = ev.clientX - pan.startX;
+      const dy = ev.clientY - pan.startY;
+      if (!pan.isPanning && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        pan.isPanning = true;
+      }
+      if (!pan.isPanning) return;
+      setViewport((v) => ({
+        ...v,
+        x: pan.startVX + dx,
+        y: pan.startVY + dy
+      }));
+    };
+    const handleMouseUp = (ev) => {
+      if (panRef.current && !panRef.current.isPanning) {
+        deselectAll();
+        onPaneClick?.(ev);
+      }
+      panRef.current = null;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }, [panOnDrag, viewport, setViewport, onPaneClick]);
+  React2.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      if (!zoomOnScroll) return;
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      setViewport((v) => {
+        const sensitivity = e.ctrlKey ? 0.01 : 1e-3;
+        const zoomDelta = -e.deltaY * sensitivity;
+        const newZoom = Math.min(Math.max(v.zoom * (1 + zoomDelta), minZoom), maxZoom);
+        return {
+          x: mouseX - (mouseX - v.x) * (newZoom / v.zoom),
+          y: mouseY - (mouseY - v.y) * (newZoom / v.zoom),
+          zoom: newZoom
+        };
+      });
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [zoomOnScroll, setViewport, containerRef, minZoom, maxZoom]);
+  const handleConnectionStart = React2.useCallback((nodeId, handleId, type, e) => {
+    if (!nodesConnectable) return;
+    const handle = ctx.getHandlePosition(nodeId, handleId);
+    if (!handle) return;
+    setConnectionDrag({
+      sourceNodeId: nodeId,
+      sourceHandleId: handleId,
+      sourcePosition: handle.position,
+      sourceX: handle.x,
+      sourceY: handle.y,
+      mouseX: handle.x,
+      mouseY: handle.y
+    });
+    const handleMouseMove = (ev) => {
+      const pos = screenToCanvasPosition(ev.clientX, ev.clientY);
+      setConnectionDrag((prev) => prev ? { ...prev, mouseX: pos.x, mouseY: pos.y } : null);
+    };
+    const handleMouseUp = (ev) => {
+      const target = document.elementFromPoint(ev.clientX, ev.clientY);
+      const handleEl = target?.closest?.("[data-handleid]");
+      if (handleEl) {
+        const targetNodeId = handleEl.getAttribute("data-nodeid");
+        let targetHandleId = handleEl.getAttribute("data-handleid");
+        const targetHandleType = handleEl.getAttribute("data-handletype");
+        if (targetHandleType === "source" && targetHandleId) {
+          targetHandleId = targetHandleId.replace("source-", "target-");
+        }
+        if (targetNodeId && targetHandleId && targetNodeId !== nodeId) {
+          onConnect?.({
+            source: nodeId,
+            target: targetNodeId,
+            sourceHandle: handleId,
+            targetHandle: targetHandleId
+          });
+        }
+      }
+      setConnectionDrag(null);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }, [nodesConnectable, ctx, screenToCanvasPosition, onConnect]);
+  const handleDragOver = React2.useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    onDragOver?.(e);
+  }, [onDragOver]);
+  const handleDrop = React2.useCallback((e) => {
+    e.preventDefault();
+    const position = screenToCanvasPosition(e.clientX, e.clientY);
+    onDrop?.(e, position);
+  }, [screenToCanvasPosition, onDrop]);
+  const handleNodeClick = React2.useCallback((e, node) => {
+    if (!elementsSelectable) return;
+    const isMultiSelect = e.shiftKey || e.metaKey;
+    const nodeChanges = [];
+    if (isMultiSelect) {
+      nodeChanges.push({ type: "select", id: node.id, selected: !node.selected });
+    } else {
+      for (const n of nodes) {
+        if (n.id === node.id && !n.selected) {
+          nodeChanges.push({ type: "select", id: n.id, selected: true });
+        } else if (n.id !== node.id && n.selected) {
+          nodeChanges.push({ type: "select", id: n.id, selected: false });
+        }
+      }
+    }
+    if (nodeChanges.length) onNodesChange?.(nodeChanges);
+    if (!isMultiSelect) {
+      const edgeDeselects = edges.filter((ed) => ed.selected).map((ed) => ({ type: "select", id: ed.id, selected: false }));
+      if (edgeDeselects.length) onEdgesChange?.(edgeDeselects);
+    }
+    onNodeClick?.(e, node);
+  }, [elementsSelectable, nodes, edges, onNodesChange, onEdgesChange, onNodeClick]);
+  const handleEdgeClick = React2.useCallback((e, edge) => {
+    if (!elementsSelectable) return;
+    e.stopPropagation();
+    const edgeChanges = [];
+    for (const ed of edges) {
+      if (ed.id === edge.id && !ed.selected) {
+        edgeChanges.push({ type: "select", id: ed.id, selected: true });
+      } else if (ed.id !== edge.id && ed.selected) {
+        edgeChanges.push({ type: "select", id: ed.id, selected: false });
+      }
+    }
+    if (edgeChanges.length) onEdgesChange?.(edgeChanges);
+    const nodeDeselects = nodes.filter((n) => n.selected).map((n) => ({ type: "select", id: n.id, selected: false }));
+    if (nodeDeselects.length) onNodesChange?.(nodeDeselects);
+    onEdgeClick?.(e, edge);
+  }, [elementsSelectable, nodes, edges, onNodesChange, onEdgesChange, onEdgeClick]);
+  React2.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Backspace" || e.key === "Delete") {
+        const target = e.target;
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || target.closest('[role="dialog"]') || target.closest('[role="combobox"]') || target.closest('[role="listbox"]')) return;
+        const selectedNodes = nodes.filter((n) => n.selected);
+        const selectedEdges = edges.filter((ed) => ed.selected);
+        if (selectedNodes.length) {
+          onNodesChange?.(selectedNodes.map((n) => ({ type: "remove", id: n.id })));
+        }
+        if (selectedEdges.length) {
+          onEdgesChange?.(selectedEdges.map((ed) => ({ type: "remove", id: ed.id })));
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [nodes, edges, onNodesChange, onEdgesChange]);
+  const transformStr = `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `kgraph-canvas ${className}`,
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: "#0e0e10",
+        ...style
+      },
+      onMouseDown: handlePaneMouseDown,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      children: [
+        showBackground && /* @__PURE__ */ jsxRuntime.jsx(DotGrid_default, { viewport, gap: backgroundGap }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "kgraph-svg-layer",
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none",
+              overflow: "visible"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "kgraph-arrow", viewBox: "0 0 12 12", refX: "12", refY: "6", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 1 L 12 6 L 0 11 z", fill: "#8b5cf6" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "kgraph-arrow-selected", viewBox: "0 0 12 12", refX: "12", refY: "6", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 1 L 12 6 L 0 11 z", fill: "#a78bfa" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "g",
+                {
+                  transform: `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`,
+                  style: { pointerEvents: "all" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      EdgeRenderer_default,
+                      {
+                        edges,
+                        edgeTypes,
+                        onEdgeClick: handleEdgeClick
+                      }
+                    ),
+                    connectionDrag && /* @__PURE__ */ jsxRuntime.jsx(
+                      ConnectionLine_default,
+                      {
+                        sourceX: connectionDrag.sourceX,
+                        sourceY: connectionDrag.sourceY,
+                        sourcePosition: connectionDrag.sourcePosition,
+                        targetX: connectionDrag.mouseX,
+                        targetY: connectionDrag.mouseY
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "kgraph-node-layer",
+            style: {
+              position: "absolute",
+              inset: 0,
+              transformOrigin: "0 0",
+              transform: transformStr,
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "all" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              NodeRenderer_default,
+              {
+                nodes,
+                nodeTypes,
+                onNodesChange,
+                snapToGrid,
+                snapGrid,
+                draggable: nodesDraggable,
+                selectable: elementsSelectable,
+                onNodeClick: handleNodeClick,
+                onConnectionStart: handleConnectionStart,
+                zoom: viewport.zoom
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "kgraph-edge-label-layer",
+            style: {
+              position: "absolute",
+              inset: 0,
+              transformOrigin: "0 0",
+              transform: transformStr,
+              pointerEvents: "none",
+              zIndex: 10
+            }
+          }
+        ),
+        showMiniMap && containerSize.width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          MiniMap_default,
+          {
+            nodes,
+            viewport,
+            onViewportChange: setViewport,
+            containerWidth: containerSize.width,
+            containerHeight: containerSize.height
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var KGraphCanvas = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    KGraphProvider,
+    {
+      nodes: props.nodes,
+      edges: props.edges,
+      minZoom: props.minZoom,
+      maxZoom: props.maxZoom,
+      children: /* @__PURE__ */ jsxRuntime.jsx(InnerCanvas, { ...props })
+    }
+  );
+};
+var KGraphCanvas_default = KGraphCanvas;
+
+// src/useKGraph.ts
+function useKGraph() {
+  const ctx = useKGraphContext();
+  return {
+    screenToCanvasPosition: ctx.screenToCanvasPosition,
+    fitView: ctx.fitView,
+    zoomIn: ctx.zoomIn,
+    zoomOut: ctx.zoomOut,
+    zoomTo: ctx.zoomTo,
+    getViewport: () => ctx.viewport,
+    setViewport: ctx.setViewport,
+    getNodes: () => ctx.nodes,
+    getEdges: () => ctx.edges
+  };
+}
+var useKGraph_default = useKGraph;
+function getPositionStyle(position) {
+  const base = {
+    position: "absolute",
+    zIndex: 20
+  };
+  switch (position) {
+    case "top":
+      return { ...base, top: 0, left: "50%", transform: "translate(-50%, -50%)" };
+    case "bottom":
+      return { ...base, bottom: 0, left: "50%", transform: "translate(-50%, 50%)" };
+    case "left":
+      return { ...base, left: 0, top: "50%", transform: "translate(-50%, -50%)" };
+    case "right":
+      return { ...base, right: 0, top: "50%", transform: "translate(50%, -50%)" };
+  }
+}
+var Handle = ({
+  id,
+  type,
+  position,
+  style,
+  className = "",
+  nodeId: nodeIdProp,
+  onConnectionStart: onConnectionStartProp
+}) => {
+  const [hovered, setHovered] = React2.useState(false);
+  const handleCtx = useHandleContext();
+  const nodeId = nodeIdProp ?? handleCtx.nodeId;
+  const onConnectionStart = onConnectionStartProp ?? handleCtx.onConnectionStart;
+  const handleMouseDown = React2.useCallback((e) => {
+    if (type === "source" && nodeId && onConnectionStart) {
+      e.stopPropagation();
+      e.preventDefault();
+      onConnectionStart(nodeId, id, type, e);
+    }
+  }, [type, nodeId, id, onConnectionStart]);
+  const posStyle = getPositionStyle(position);
+  const defaultBg = type === "source" ? "#8b5cf6" : "#6d28d9";
+  const hoverBg = type === "source" ? "#a78bfa" : "#8b5cf6";
+  const borderColor = type === "source" ? "#a78bfa" : "#7c3aed";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `kgraph-handle kgraph-handle-${type} kgraph-handle-${position} ${className}`,
+      style: {
+        width: hovered ? 12 : 8,
+        height: hovered ? 12 : 8,
+        borderRadius: "50%",
+        background: style?.background || (hovered ? hoverBg : defaultBg),
+        border: `2px solid ${style?.borderColor || borderColor}`,
+        cursor: type === "source" ? "crosshair" : "default",
+        transition: "width 0.15s, height 0.15s, background 0.15s, box-shadow 0.15s",
+        boxShadow: hovered ? `0 0 6px ${borderColor}88` : "none",
+        ...posStyle,
+        ...style
+      },
+      "data-handleid": id,
+      "data-handletype": type,
+      "data-handleposition": position,
+      "data-nodeid": nodeId,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    }
+  );
+};
+var Handle_default = Handle;
+var EdgeLabel = ({ x, y, zoom, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "kgraph-edge-label",
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: `translate(-50%, -50%) scale(${1 / zoom})`,
+        transformOrigin: "center center",
+        pointerEvents: "all",
+        zIndex: 10
+      },
+      children
+    }
+  );
+};
+var EdgeLabel_default = EdgeLabel;
+
+// src/applyChanges.ts
+function applyNodeChanges(changes, nodes) {
+  let result = nodes;
+  for (const change of changes) {
+    switch (change.type) {
+      case "position":
+        result = result.map(
+          (n) => n.id === change.id ? {
+            ...n,
+            position: change.position ?? n.position,
+            dragging: change.dragging
+          } : n
+        );
+        break;
+      case "select":
+        result = result.map(
+          (n) => n.id === change.id ? { ...n, selected: change.selected } : n
+        );
+        break;
+      case "remove":
+        result = result.filter((n) => n.id !== change.id);
+        break;
+      case "add":
+        result = [...result, change.item];
+        break;
+      case "dimensions":
+        result = result.map(
+          (n) => n.id === change.id ? {
+            ...n,
+            width: change.dimensions.width,
+            height: change.dimensions.height
+          } : n
+        );
+        break;
+    }
+  }
+  return result;
+}
+function applyEdgeChanges(changes, edges) {
+  let result = edges;
+  for (const change of changes) {
+    switch (change.type) {
+      case "select":
+        result = result.map(
+          (e) => e.id === change.id ? { ...e, selected: change.selected } : e
+        );
+        break;
+      case "remove":
+        result = result.filter((e) => e.id !== change.id);
+        break;
+      case "add":
+        result = [...result, change.item];
+        break;
+    }
+  }
+  return result;
+}
+
+exports.ConnectionLine_default = ConnectionLine_default;
+exports.DotGrid_default = DotGrid_default;
+exports.EdgeLabel_default = EdgeLabel_default;
+exports.EdgeRenderer_default = EdgeRenderer_default;
+exports.Handle_default = Handle_default;
+exports.KGraphCanvas_default = KGraphCanvas_default;
+exports.KGraphProvider = KGraphProvider;
+exports.MiniMap_default = MiniMap_default;
+exports.NodeRenderer_default = NodeRenderer_default;
+exports.applyEdgeChanges = applyEdgeChanges;
+exports.applyNodeChanges = applyNodeChanges;
+exports.getBezierPath = getBezierPath;
+exports.useKGraphContext = useKGraphContext;
+exports.useKGraph_default = useKGraph_default;
+//# sourceMappingURL=chunk-KII5OTZR.cjs.map
+//# sourceMappingURL=chunk-KII5OTZR.cjs.map