@elevasis/ui 1.0.0

package/dist/chunk-HUWJXLLF.js

@@ -0,0 +1,681 @@
+import { memo, useMemo, useState, useCallback, useEffect } from 'react';
+import { Paper, useComputedColorScheme, Box, Card, Group, Text, ActionIcon } from '@mantine/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls } from '@xyflow/react';
+import { IconFocus2 } from '@tabler/icons-react';
+
+// src/graph/Graph.module.css
+var Graph_default = {};
+
+// src/graph/constants.ts
+var GRAPH_CONSTANTS = {
+  NODE_WIDTH: 220,
+  NODE_HEIGHT: 140,
+  HANDLE_SIZE: 12,
+  MIN_ZOOM: 0.2,
+  MAX_ZOOM: 1.5,
+  RANK_SEP: 140,
+  NODE_SEP: 60
+};
+var DOMAIN_COLORS = {
+  primary: "var(--color-primary)",
+  agent: "#8b5cf6",
+  workflow: "#3b82f6",
+  trigger: "#f97316",
+  integration: "#14b8a6",
+  approval: "#f59e0b"
+};
+function fill(color, isDark) {
+  return isDark ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 60%, white)`;
+}
+function glow(color) {
+  return `color-mix(in srgb, ${color} 40%, transparent)`;
+}
+function useGraphTheme() {
+  const isDark = useComputedColorScheme("dark") === "dark";
+  return useMemo(
+    () => ({
+      primary: fill(DOMAIN_COLORS.primary, isDark),
+      primaryGlow: glow(DOMAIN_COLORS.primary),
+      agent: fill(DOMAIN_COLORS.agent, isDark),
+      workflow: fill(DOMAIN_COLORS.workflow, isDark),
+      trigger: fill(DOMAIN_COLORS.trigger, isDark),
+      integration: fill(DOMAIN_COLORS.integration, isDark),
+      approval: fill(DOMAIN_COLORS.approval, isDark),
+      agentGlow: glow(DOMAIN_COLORS.agent),
+      workflowGlow: glow(DOMAIN_COLORS.workflow),
+      triggerGlow: glow(DOMAIN_COLORS.trigger),
+      integrationGlow: glow(DOMAIN_COLORS.integration),
+      approvalGlow: glow(DOMAIN_COLORS.approval),
+      edgeTriggers: fill(DOMAIN_COLORS.workflow, isDark),
+      edgeUses: fill(DOMAIN_COLORS.integration, isDark),
+      edgeApproval: fill(DOMAIN_COLORS.approval, isDark),
+      edgeTriggersGlow: glow(DOMAIN_COLORS.workflow),
+      edgeUsesGlow: glow(DOMAIN_COLORS.integration),
+      edgeApprovalGlow: glow(DOMAIN_COLORS.approval)
+    }),
+    [isDark]
+  );
+}
+function useConnectionHighlight(nodes, edges) {
+  const [hoveredNodeId, setHoveredNodeId] = useState(null);
+  const adjacencyMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      map.set(node.id, { connectedNodes: /* @__PURE__ */ new Set(), connectedEdges: /* @__PURE__ */ new Set() });
+    }
+    for (const edge of edges) {
+      const sourceData = map.get(edge.source);
+      const targetData = map.get(edge.target);
+      if (sourceData) {
+        sourceData.connectedNodes.add(edge.target);
+        sourceData.connectedEdges.add(edge.id);
+      }
+      if (targetData) {
+        targetData.connectedNodes.add(edge.source);
+        targetData.connectedEdges.add(edge.id);
+      }
+    }
+    return map;
+  }, [nodes, edges]);
+  const { highlightedNodeIds, highlightedEdgeIds } = useMemo(() => {
+    if (!hoveredNodeId) {
+      return {
+        highlightedNodeIds: /* @__PURE__ */ new Set(),
+        highlightedEdgeIds: /* @__PURE__ */ new Set()
+      };
+    }
+    const nodeData = adjacencyMap.get(hoveredNodeId);
+    if (!nodeData) {
+      return {
+        highlightedNodeIds: /* @__PURE__ */ new Set(),
+        highlightedEdgeIds: /* @__PURE__ */ new Set()
+      };
+    }
+    const highlightedNodes = /* @__PURE__ */ new Set([hoveredNodeId, ...Array.from(nodeData.connectedNodes)]);
+    return {
+      highlightedNodeIds: highlightedNodes,
+      highlightedEdgeIds: nodeData.connectedEdges
+    };
+  }, [hoveredNodeId, adjacencyMap]);
+  const onNodeMouseEnter = useCallback((nodeId) => {
+    setHoveredNodeId(nodeId);
+  }, []);
+  const onNodeMouseLeave = useCallback(() => {
+    setHoveredNodeId(null);
+  }, []);
+  const getNodeClassName = useCallback(
+    (nodeId) => {
+      if (!hoveredNodeId) return "";
+      if (highlightedNodeIds.has(nodeId)) return "nodeHighlighted";
+      return "nodeDimmed";
+    },
+    [hoveredNodeId, highlightedNodeIds]
+  );
+  const getEdgeClassName = useCallback(
+    (edgeId) => {
+      if (!hoveredNodeId) return "";
+      if (highlightedEdgeIds.has(edgeId)) return "edgeHighlighted";
+      return "edgeDimmed";
+    },
+    [hoveredNodeId, highlightedEdgeIds]
+  );
+  return {
+    hoveredNodeId,
+    highlightedNodeIds,
+    highlightedEdgeIds,
+    onNodeMouseEnter,
+    onNodeMouseLeave,
+    getNodeClassName,
+    getEdgeClassName
+  };
+}
+function useGraphHighlighting(layoutNodes, layoutEdges) {
+  const {
+    hoveredNodeId,
+    highlightedNodeIds,
+    highlightedEdgeIds,
+    onNodeMouseEnter,
+    onNodeMouseLeave
+  } = useConnectionHighlight(layoutNodes, layoutEdges);
+  const nodes = useMemo(() => {
+    return layoutNodes.map((node) => ({
+      ...node,
+      className: hoveredNodeId ? highlightedNodeIds.has(node.id) ? Graph_default.nodeHighlighted : Graph_default.nodeDimmed : ""
+    }));
+  }, [layoutNodes, hoveredNodeId, highlightedNodeIds]);
+  const edges = useMemo(() => {
+    return layoutEdges.map((edge) => {
+      const isDimmed = hoveredNodeId ? !highlightedEdgeIds.has(edge.id) : false;
+      return {
+        ...edge,
+        className: hoveredNodeId ? highlightedEdgeIds.has(edge.id) ? Graph_default.edgeHighlighted : Graph_default.edgeDimmed : "",
+        data: {
+          ...edge.data,
+          dimmed: isDimmed
+        }
+      };
+    });
+  }, [layoutEdges, hoveredNodeId, highlightedEdgeIds]);
+  const handleNodeMouseEnter = useCallback(
+    (_event, node) => onNodeMouseEnter(node.id),
+    [onNodeMouseEnter]
+  );
+  const handleNodeMouseLeave = useCallback(() => {
+    onNodeMouseLeave();
+  }, [onNodeMouseLeave]);
+  return {
+    nodes,
+    edges,
+    handleNodeMouseEnter,
+    handleNodeMouseLeave
+  };
+}
+function useDirectedChainHighlighting(layoutNodes, layoutEdges, options = {}) {
+  const { selectedNodeId } = options;
+  const [hoveredNodeId, setHoveredNodeId] = useState(null);
+  const reachabilityMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const forwardAdj = /* @__PURE__ */ new Map();
+    const backwardAdj = /* @__PURE__ */ new Map();
+    for (const node of layoutNodes) {
+      forwardAdj.set(node.id, { nodes: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set() });
+      backwardAdj.set(node.id, { nodes: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set() });
+    }
+    for (const edge of layoutEdges) {
+      const sourceForward = forwardAdj.get(edge.source);
+      if (sourceForward) {
+        sourceForward.nodes.add(edge.target);
+        sourceForward.edges.add(edge.id);
+      }
+      const targetBackward = backwardAdj.get(edge.target);
+      if (targetBackward) {
+        targetBackward.nodes.add(edge.source);
+        targetBackward.edges.add(edge.id);
+      }
+    }
+    const traverse = (startId, adjacency) => {
+      const reachableNodes = /* @__PURE__ */ new Set();
+      const reachableEdges = /* @__PURE__ */ new Set();
+      const queue = [startId];
+      while (queue.length > 0) {
+        const currentId = queue.shift();
+        if (reachableNodes.has(currentId)) continue;
+        reachableNodes.add(currentId);
+        const adj = adjacency.get(currentId);
+        if (adj) {
+          Array.from(adj.edges).forEach((edgeId) => {
+            reachableEdges.add(edgeId);
+          });
+          Array.from(adj.nodes).forEach((neighborId) => {
+            if (!reachableNodes.has(neighborId)) {
+              queue.push(neighborId);
+            }
+          });
+        }
+      }
+      return { nodes: reachableNodes, edges: reachableEdges };
+    };
+    for (const node of layoutNodes) {
+      const successors = traverse(node.id, forwardAdj);
+      const predecessors = traverse(node.id, backwardAdj);
+      const allNodes = /* @__PURE__ */ new Set([node.id]);
+      Array.from(successors.nodes).forEach((id) => allNodes.add(id));
+      Array.from(predecessors.nodes).forEach((id) => allNodes.add(id));
+      const allEdges = /* @__PURE__ */ new Set();
+      Array.from(successors.edges).forEach((id) => allEdges.add(id));
+      Array.from(predecessors.edges).forEach((id) => allEdges.add(id));
+      map.set(node.id, { nodeIds: allNodes, edgeIds: allEdges });
+    }
+    return map;
+  }, [layoutNodes, layoutEdges]);
+  const { highlightedNodeIds, highlightedEdgeIds, hasHighlight } = useMemo(() => {
+    const nodeIds = /* @__PURE__ */ new Set();
+    const edgeIds = /* @__PURE__ */ new Set();
+    if (selectedNodeId) {
+      const selectedReachability = reachabilityMap.get(selectedNodeId);
+      if (selectedReachability) {
+        selectedReachability.nodeIds.forEach((id) => nodeIds.add(id));
+        selectedReachability.edgeIds.forEach((id) => edgeIds.add(id));
+      }
+    }
+    if (hoveredNodeId) {
+      const hoveredReachability = reachabilityMap.get(hoveredNodeId);
+      if (hoveredReachability) {
+        hoveredReachability.nodeIds.forEach((id) => nodeIds.add(id));
+        hoveredReachability.edgeIds.forEach((id) => edgeIds.add(id));
+      }
+    }
+    return {
+      highlightedNodeIds: nodeIds,
+      highlightedEdgeIds: edgeIds,
+      hasHighlight: nodeIds.size > 0
+    };
+  }, [selectedNodeId, hoveredNodeId, reachabilityMap]);
+  const nodes = useMemo(() => {
+    return layoutNodes.map((node) => {
+      const isHighlighted = hasHighlight ? highlightedNodeIds.has(node.id) : false;
+      const isDimmed = hasHighlight ? !highlightedNodeIds.has(node.id) : false;
+      return {
+        ...node,
+        className: isDimmed ? Graph_default.nodeDimmed : "",
+        data: {
+          ...node.data,
+          highlighted: isHighlighted
+        }
+      };
+    });
+  }, [layoutNodes, hasHighlight, highlightedNodeIds]);
+  const edges = useMemo(() => {
+    return layoutEdges.map((edge) => {
+      const isDimmed = hasHighlight ? !highlightedEdgeIds.has(edge.id) : false;
+      return {
+        ...edge,
+        className: hasHighlight ? highlightedEdgeIds.has(edge.id) ? Graph_default.edgeHighlighted : Graph_default.edgeDimmed : "",
+        data: {
+          ...edge.data,
+          dimmed: isDimmed
+        }
+      };
+    });
+  }, [layoutEdges, hasHighlight, highlightedEdgeIds]);
+  const handleNodeMouseEnter = useCallback(
+    (_event, node) => setHoveredNodeId(node.id),
+    []
+  );
+  const handleNodeMouseLeave = useCallback(() => {
+    setHoveredNodeId(null);
+  }, []);
+  return {
+    nodes,
+    edges,
+    hoveredNodeId,
+    handleNodeMouseEnter,
+    handleNodeMouseLeave
+  };
+}
+function useNodeSelection(selectedId, onSelect) {
+  const handleNodeClick = useCallback(
+    (event, node) => {
+      event.stopPropagation();
+      const nodeId = node.id;
+      if (selectedId === nodeId) {
+        onSelect(null);
+      } else {
+        onSelect(nodeId);
+      }
+    },
+    [selectedId, onSelect]
+  );
+  const handlePaneClick = useCallback(() => {
+    if (selectedId !== null) {
+      onSelect(null);
+    }
+  }, [selectedId, onSelect]);
+  const handleContainerClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onSelect(null);
+      }
+    },
+    [onSelect]
+  );
+  return {
+    handleNodeClick,
+    handlePaneClick,
+    handleContainerClick
+  };
+}
+function useFitViewTrigger(data, nodes) {
+  const [fitViewTrigger, setFitViewTrigger] = useState(0);
+  useEffect(() => {
+    if (data) {
+      setFitViewTrigger((prev) => prev + 1);
+    }
+  }, [data]);
+  useEffect(() => {
+    if (nodes.length > 0) {
+      setFitViewTrigger((prev) => prev + 1);
+    }
+  }, [nodes]);
+  return fitViewTrigger;
+}
+function getGraphBackgroundStyles(isDark) {
+  const pct = isDark ? 5 : 3;
+  const glowPct = isDark ? 8 : 5;
+  const mix = (percent) => `color-mix(in srgb, var(--color-primary) ${percent}%, transparent)`;
+  return {
+    backgroundImage: `
+      linear-gradient(${mix(pct)} 1px, transparent 1px),
+      linear-gradient(90deg, ${mix(pct)} 1px, transparent 1px),
+      radial-gradient(ellipse at 50% 50%, ${mix(glowPct)} 0%, transparent 70%)
+    `,
+    backgroundColor: "var(--color-background)",
+    backgroundSize: "40px 40px, 40px 40px, 100% 100%"
+  };
+}
+function useGraphBackgroundStyles() {
+  const isDark = useComputedColorScheme("dark") === "dark";
+  return useMemo(() => getGraphBackgroundStyles(isDark), [isDark]);
+}
+function GraphContainer({ children, height = 600 }) {
+  const backgroundStyles = useGraphBackgroundStyles();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: "100%",
+        height,
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-md)",
+        overflow: "hidden",
+        position: "relative",
+        ...backgroundStyles
+      },
+      children
+    }
+  );
+}
+function GraphBackground() {
+  return null;
+}
+function LegendDot({ color }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        backgroundColor: `var(--mantine-color-${color}-5)`
+      }
+    }
+  );
+}
+function LegendLine({ color }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: 20,
+        height: 3,
+        borderRadius: 2,
+        background: `linear-gradient(90deg, var(--mantine-color-${color}-5), var(--mantine-color-${color}-6))`
+      }
+    }
+  );
+}
+function GraphLegend({ title = "Legend", items, position = "bottom-right" }) {
+  const margins = {
+    marginBottom: position.includes("bottom") ? 12 : void 0,
+    marginTop: position.includes("top") ? 12 : void 0,
+    marginRight: position.includes("right") ? 60 : 12,
+    marginLeft: position.includes("left") ? 12 : void 0
+  };
+  return /* @__PURE__ */ jsx(Panel, { position, style: margins, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      p: "xs",
+      className: Graph_default.legend,
+      style: {
+        backgroundColor: "var(--glass-background)"
+      },
+      children: /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            fw: 600,
+            style: {
+              letterSpacing: "0.5px",
+              textTransform: "uppercase",
+              fontFamily: "var(--mantine-font-family-headings)"
+            },
+            children: title
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          item.type === "line" ? /* @__PURE__ */ jsx(LegendLine, { color: item.color }) : /* @__PURE__ */ jsx(LegendDot, { color: item.color }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", children: item.label })
+        ] }, item.label))
+      ] })
+    }
+  ) });
+}
+function GraphFitViewButton({
+  padding = 0.2,
+  variant = "reactflow",
+  duration = 300
+}) {
+  const { fitView } = useReactFlow();
+  const handleFitView = () => {
+    fitView({ padding, duration });
+  };
+  if (variant === "mantine") {
+    return /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        onClick: handleFitView,
+        variant: "default",
+        size: "lg",
+        title: "Fit view",
+        style: {
+          position: "absolute",
+          bottom: 12,
+          right: 12,
+          zIndex: 5,
+          background: "var(--color-surface)",
+          border: "1px solid var(--color-border)"
+        },
+        children: /* @__PURE__ */ jsx(IconFocus2, { size: 18 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Controls, { position: "bottom-right", showZoom: false, showFitView: false, showInteractive: false, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "react-flow__controls-button react-flow__controls-fitview",
+      onClick: handleFitView,
+      title: "Fit view",
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M8 3H5C3.89 3 3 3.89 3 5V8H5V5H8V3M19 3H16V5H19V8H21V5C21 3.89 20.11 3 19 3M19 19H16V21H19C20.11 21 21 20.11 21 19V16H19V19M5 19H8V21H5C3.89 21 3 20.11 3 19V16H5V19Z" }) })
+    }
+  ) });
+}
+function GraphFitViewHandler({
+  trigger,
+  padding = 0.15,
+  duration = 300,
+  delay = 250
+}) {
+  const { fitView } = useReactFlow();
+  useEffect(() => {
+    if (trigger && trigger > 0) {
+      const timeout = setTimeout(() => {
+        fitView({ padding, duration });
+      }, delay);
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [trigger, fitView, padding, duration, delay]);
+  return null;
+}
+var colorClassMap = {
+  violet: Graph_default.nodeAgent,
+  blue: Graph_default.nodeWorkflow,
+  orange: Graph_default.nodeTrigger,
+  teal: Graph_default.nodeIntegration,
+  gray: Graph_default.nodeExternal,
+  yellow: Graph_default.nodeHuman
+};
+var BaseNode = memo(function BaseNode2({
+  children,
+  color,
+  selected = false,
+  highlighted = false,
+  width = 220,
+  className = "",
+  handleDirection = "horizontal",
+  showSourceHandle = true,
+  showTargetHandle = true
+}) {
+  const typeClass = colorClassMap[color] || Graph_default.nodeAgent;
+  const highlightClass = highlighted ? Graph_default.nodeHighlighted : "";
+  const targetPosition = handleDirection === "horizontal" ? Position.Left : Position.Top;
+  const sourcePosition = handleDirection === "horizontal" ? Position.Right : Position.Bottom;
+  return /* @__PURE__ */ jsxs("div", { className: `${Graph_default.node} ${typeClass} ${highlightClass} ${className}`, children: [
+    showTargetHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: targetPosition, style: { opacity: 0, pointerEvents: "none" } }),
+    showSourceHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: sourcePosition, style: { opacity: 0, pointerEvents: "none" } }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        className: `${Graph_default.nodeCard} ${selected ? Graph_default.nodeCardSelected : ""}`,
+        style: {
+          width,
+          border: `1px solid ${selected ? `var(--mantine-color-${color}-5)` : "var(--color-border)"}`,
+          backgroundColor: "var(--color-surface)",
+          cursor: "pointer",
+          boxShadow: selected ? `0 0 15px var(--mantine-color-${color}-5), 0 4px 12px rgba(0,0,0,0.1)` : "0 2px 8px rgba(0,0,0,0.08)"
+        },
+        children
+      }
+    )
+  ] });
+});
+var BaseEdge = memo(function BaseEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  color,
+  glowColor,
+  label,
+  selected,
+  animated = true,
+  dimmed = false,
+  edgeIndex = 0,
+  totalEdges = 1
+}) {
+  const edgeSpacing = 10;
+  const baseOffset = 15;
+  const offsetAmount = totalEdges > 1 ? (edgeIndex - (totalEdges - 1) / 2) * edgeSpacing : 0;
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY: sourceY + offsetAmount,
+    sourcePosition,
+    targetX,
+    targetY: targetY + offsetAmount,
+    targetPosition,
+    borderRadius: 8,
+    offset: baseOffset + Math.abs(offsetAmount)
+    // Stagger the turn points horizontally
+  });
+  const edgeOpacity = dimmed ? 0.25 : 1;
+  return /* @__PURE__ */ jsxs("g", { style: { opacity: edgeOpacity }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: selected ? 8 : 6,
+        strokeOpacity: 0.2,
+        style: { filter: "blur(4px)" }
+      }
+    ),
+    animated && !dimmed && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: selected ? 4 : 3,
+        strokeOpacity: 0.3,
+        strokeDasharray: "12 6",
+        className: Graph_default.edgeAnimated,
+        style: { filter: `drop-shadow(0 0 3px ${glowColor})` }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BaseEdge$1,
+      {
+        id,
+        path: edgePath,
+        style: {
+          stroke: color,
+          strokeWidth: selected ? 3 : 2,
+          filter: dimmed ? "none" : selected ? `drop-shadow(0 0 6px ${glowColor})` : `drop-shadow(0 0 2px ${glowColor})`
+        }
+      }
+    ),
+    animated && !dimmed && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "white",
+        strokeWidth: 2,
+        strokeOpacity: 0.6,
+        strokeDasharray: "4 20",
+        className: Graph_default.edgeAnimated,
+        style: { filter: "drop-shadow(0 0 2px white)" }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${Graph_default.edgeLabel} ${dimmed ? Graph_default.edgeLabelDimmed : ""}`,
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          pointerEvents: "all",
+          fontSize: 10,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          padding: "3px 8px",
+          borderRadius: 6,
+          background: `linear-gradient(135deg, ${color}, ${color}dd)`,
+          color: "var(--color-text)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+          opacity: dimmed ? 0.25 : 1
+        },
+        children: label
+      }
+    ) })
+  ] });
+});
+function GlowingHandle({ type, position, color: _color, id }) {
+  return /* @__PURE__ */ jsx(
+    Handle,
+    {
+      type,
+      position,
+      id,
+      className: Graph_default.handle,
+      style: {
+        background: "transparent",
+        border: "none",
+        width: 1,
+        height: 1,
+        opacity: 0
+      }
+    }
+  );
+}
+
+// src/graph/utils/calculateGraphHeight.ts
+function calculateGraphHeight({
+  itemCount,
+  minHeight = 300,
+  maxHeight = 500,
+  heightPerItem = 80
+}) {
+  const calculated = minHeight + itemCount * heightPerItem;
+  return Math.min(calculated, maxHeight);
+}
+
+export { BaseEdge, BaseNode, GRAPH_CONSTANTS, GlowingHandle, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, Graph_default, calculateGraphHeight, getGraphBackgroundStyles, useConnectionHighlight, useDirectedChainHighlighting, useFitViewTrigger, useGraphBackgroundStyles, useGraphHighlighting, useGraphTheme, useNodeSelection };