@quantumwake/kgraph 0.1.2 → 0.2.1

package/dist/index.js

@@ -1,1328 +1,3 @@
-import React2, { createContext, useContext, useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-// src/KGraphCanvas.tsx
-var KGraphContext = createContext(null);
-function useKGraphContext() {
-  const ctx = 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] = useState(initialViewport);
-  const containerRef = useRef(null);
-  const handlesRef = useRef(/* @__PURE__ */ new Map());
-  const screenToCanvasPosition = 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 = 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 = 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 = 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 = 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 = 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 = useCallback((info) => {
-    handlesRef.current.set(`${info.nodeId}:${info.handleId}`, info);
-  }, []);
-  const unregisterHandle = useCallback((nodeId, handleId) => {
-    handlesRef.current.delete(`${nodeId}:${handleId}`);
-  }, []);
-  const getHandlePosition = useCallback((nodeId, handleId) => {
-    return handlesRef.current.get(`${nodeId}:${handleId}`);
-  }, []);
-  const getAllHandles = useCallback(() => {
-    return handlesRef.current;
-  }, []);
-  const value = 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__ */ jsx(KGraphContext.Provider, { value, children });
-};
-var NodeWrapper = ({
-  node,
-  nodeComponent: NodeComponent,
-  onNodesChange,
-  snapToGrid,
-  snapGrid,
-  draggable,
-  selectable,
-  onNodeClick,
-  onConnectionStart,
-  zoom
-}) => {
-  const wrapperRef = useRef(null);
-  const dragRef = useRef(null);
-  const onNodesChangeRef = useRef(onNodesChange);
-  onNodesChangeRef.current = onNodesChange;
-  const zoomRef = useRef(zoom);
-  zoomRef.current = zoom;
-  const snapRef = useRef({ snapToGrid, snapGrid });
-  snapRef.current = { snapToGrid, snapGrid };
-  const { registerHandle, unregisterHandle } = useKGraphContext();
-  const updateHandlePositions = 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]);
-  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]);
-  useEffect(() => {
-    updateHandlePositions();
-  }, [updateHandlePositions]);
-  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 = 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__ */ 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__ */ jsx(HandleContext.Provider, { value: { nodeId: node.id, onConnectionStart }, children: /* @__PURE__ */ jsx(
-        NodeComponent,
-        {
-          id: node.id,
-          data: node.data,
-          selected: node.selected || false,
-          type: node.type
-        }
-      ) })
-    }
-  );
-};
-var HandleContext = React2.createContext({ nodeId: "" });
-var useHandleContext = () => React2.useContext(HandleContext);
-var NodeRenderer = ({
-  nodes,
-  nodeTypes,
-  defaultNodeType,
-  onNodesChange,
-  snapToGrid,
-  snapGrid,
-  draggable,
-  selectable,
-  onNodeClick,
-  onConnectionStart,
-  zoom
-}) => {
-  const DefaultNode = defaultNodeType || (({ data }) => /* @__PURE__ */ jsx("div", { style: {
-    padding: "10px 20px",
-    border: "2px solid #8b5cf6",
-    borderRadius: 4,
-    background: "#1a1a2e",
-    color: "#fff",
-    fontSize: 14
-  }, children: data.label || "Node" }));
-  return /* @__PURE__ */ jsx(Fragment, { children: nodes.filter((n) => !n.hidden).map((node) => {
-    const Component = nodeTypes[node.type] || DefaultNode;
-    return /* @__PURE__ */ 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__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: edgePath,
-        fill: "none",
-        stroke: "transparent",
-        strokeWidth: 20,
-        style: { cursor: "pointer" }
-      }
-    ),
-    /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      "g",
-      {
-        className: "kgraph-edge",
-        onClick: (e) => onEdgeClick?.(e, edge),
-        children: /* @__PURE__ */ 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__ */ jsxs("g", { className: "kgraph-connection-line", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: path,
-        fill: "none",
-        stroke: "#8b5cf6",
-        strokeWidth: 2,
-        strokeDasharray: "6 3",
-        opacity: 0.8
-      }
-    ),
-    /* @__PURE__ */ 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__ */ jsxs(
-    "svg",
-    {
-      className: "kgraph-background",
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none"
-      },
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-          "pattern",
-          {
-            id: patternId,
-            x: offsetX,
-            y: offsetY,
-            width: scaledGap,
-            height: scaledGap,
-            patternUnits: "userSpaceOnUse",
-            children: /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: scaledSize,
-                cy: scaledSize,
-                r: scaledSize,
-                fill: color
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ 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 = useRef(null);
-  const bounds = 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 = 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 = useCallback((node) => {
-    if (typeof nodeColor === "function") return nodeColor(node);
-    return nodeColor;
-  }, [nodeColor]);
-  const handleClick = 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__ */ jsx(
-    "div",
-    {
-      className: "kgraph-minimap",
-      style: {
-        position: "absolute",
-        bottom: 10,
-        right: 10,
-        zIndex: 20,
-        borderRadius: 2,
-        overflow: "hidden",
-        border: `1px solid ${borderColor}`
-      },
-      children: /* @__PURE__ */ 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__ */ jsx(
-                "rect",
-                {
-                  x: nx,
-                  y: ny,
-                  width: Math.max(nw, 4),
-                  height: Math.max(nh, 3),
-                  fill: getColor(node),
-                  rx: 1
-                },
-                node.id
-              );
-            }),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: 0,
-                y: 0,
-                width,
-                height: viewRect.y,
-                fill: maskColor
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: 0,
-                y: viewRect.y + viewRect.height,
-                width,
-                height: height - viewRect.y - viewRect.height,
-                fill: maskColor
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: 0,
-                y: viewRect.y,
-                width: viewRect.x,
-                height: viewRect.height,
-                fill: maskColor
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: viewRect.x + viewRect.width,
-                y: viewRect.y,
-                width: width - viewRect.x - viewRect.width,
-                height: viewRect.height,
-                fill: maskColor
-              }
-            ),
-            /* @__PURE__ */ 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 = useRef(null);
-  const [connectionDrag, setConnectionDrag] = useState(null);
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const nodesRef = useRef(nodes);
-  nodesRef.current = nodes;
-  const edgesRef = useRef(edges);
-  edgesRef.current = edges;
-  const onNodesChangeRef = useRef(onNodesChange);
-  onNodesChangeRef.current = onNodesChange;
-  const onEdgesChangeRef = useRef(onEdgesChange);
-  onEdgesChangeRef.current = onEdgesChange;
-  const deselectAll = 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);
-  }, []);
-  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]);
-  useEffect(() => {
-    if (fitViewOnMount && nodes.length > 0) {
-      const t = setTimeout(() => ctx.fitView({ padding: 0.2 }), 100);
-      return () => clearTimeout(t);
-    }
-  }, [fitViewOnMount, nodes.length > 0]);
-  const handlePaneMouseDown = 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]);
-  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 = 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 = useCallback((e) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    onDragOver?.(e);
-  }, [onDragOver]);
-  const handleDrop = useCallback((e) => {
-    e.preventDefault();
-    const position = screenToCanvasPosition(e.clientX, e.clientY);
-    onDrop?.(e, position);
-  }, [screenToCanvasPosition, onDrop]);
-  const handleNodeClick = 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 = 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]);
-  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__ */ 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__ */ jsx(DotGrid_default, { viewport, gap: backgroundGap }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            className: "kgraph-svg-layer",
-            style: {
-              position: "absolute",
-              inset: 0,
-              width: "100%",
-              height: "100%",
-              pointerEvents: "none",
-              overflow: "visible"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("defs", { children: [
-                /* @__PURE__ */ jsx("marker", { id: "kgraph-arrow", viewBox: "0 0 12 12", refX: "12", refY: "6", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 1 L 12 6 L 0 11 z", fill: "#8b5cf6" }) }),
-                /* @__PURE__ */ 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__ */ jsx("path", { d: "M 0 1 L 12 6 L 0 11 z", fill: "#a78bfa" }) })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "g",
-                {
-                  transform: `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`,
-                  style: { pointerEvents: "all" },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      EdgeRenderer_default,
-                      {
-                        edges,
-                        edgeTypes,
-                        onEdgeClick: handleEdgeClick
-                      }
-                    ),
-                    connectionDrag && /* @__PURE__ */ jsx(
-                      ConnectionLine_default,
-                      {
-                        sourceX: connectionDrag.sourceX,
-                        sourceY: connectionDrag.sourceY,
-                        sourcePosition: connectionDrag.sourcePosition,
-                        targetX: connectionDrag.mouseX,
-                        targetY: connectionDrag.mouseY
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "kgraph-node-layer",
-            style: {
-              position: "absolute",
-              inset: 0,
-              transformOrigin: "0 0",
-              transform: transformStr,
-              pointerEvents: "none"
-            },
-            children: /* @__PURE__ */ jsx("div", { style: { pointerEvents: "all" }, children: /* @__PURE__ */ jsx(
-              NodeRenderer_default,
-              {
-                nodes,
-                nodeTypes,
-                onNodesChange,
-                snapToGrid,
-                snapGrid,
-                draggable: nodesDraggable,
-                selectable: elementsSelectable,
-                onNodeClick: handleNodeClick,
-                onConnectionStart: handleConnectionStart,
-                zoom: viewport.zoom
-              }
-            ) })
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx(
-          MiniMap_default,
-          {
-            nodes,
-            viewport,
-            onViewportChange: setViewport,
-            containerWidth: containerSize.width,
-            containerHeight: containerSize.height
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-var KGraphCanvas = (props) => {
-  return /* @__PURE__ */ jsx(
-    KGraphProvider,
-    {
-      nodes: props.nodes,
-      edges: props.edges,
-      minZoom: props.minZoom,
-      maxZoom: props.maxZoom,
-      children: /* @__PURE__ */ 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] = useState(false);
-  const handleCtx = useHandleContext();
-  const nodeId = nodeIdProp ?? handleCtx.nodeId;
-  const onConnectionStart = onConnectionStartProp ?? handleCtx.onConnectionStart;
-  const handleMouseDown = 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__ */ 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__ */ 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;
-}
-
-export { ConnectionLine_default as ConnectionLine, DotGrid_default as DotGrid, EdgeLabel_default as EdgeLabel, EdgeRenderer_default as EdgeRenderer, Handle_default as Handle, KGraphCanvas_default as KGraphCanvas, KGraphProvider, MiniMap_default as MiniMap, NodeRenderer_default as NodeRenderer, applyEdgeChanges, applyNodeChanges, getBezierPath, useKGraph_default as useKGraph, useKGraphContext };
+export { ConnectionLine_default as ConnectionLine, DotGrid_default as DotGrid, EdgeLabel_default as EdgeLabel, EdgeRenderer_default as EdgeRenderer, Handle_default as Handle, KGraphCanvas_default as KGraphCanvas, KGraphProvider, MiniMap_default as MiniMap, NodeRenderer_default as NodeRenderer, applyEdgeChanges, applyNodeChanges, getBezierPath, useKGraph_default as useKGraph, useKGraphContext } from './chunk-374K6PXA.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map