@principal-ai/principal-view-react 0.7.15 → 0.7.17

package/dist/components/GraphRenderer.js

@@ -1,25 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphRenderer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@xyflow/react");
-require("@xyflow/react/dist/style.css");
-const principal_view_core_1 = require("@principal-ai/principal-view-core");
-const industry_theme_1 = require("@principal-ade/industry-theme");
-const CustomNode_1 = require("../nodes/CustomNode");
-const CustomEdge_1 = require("../edges/CustomEdge");
-const graphConverter_1 = require("../utils/graphConverter");
-const EdgeInfoPanel_1 = require("./EdgeInfoPanel");
-const NodeInfoPanel_1 = require("./NodeInfoPanel");
-const SelectionSidebar_1 = require("./SelectionSidebar");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
+import { ReactFlow, Background, BackgroundVariant, Controls, MiniMap, ReactFlowProvider, useReactFlow, useViewport, applyNodeChanges, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
+import { useTheme } from '@principal-ade/industry-theme';
+import { CustomNode } from '../nodes/CustomNode';
+import { CustomEdge } from '../edges/CustomEdge';
+import { convertToXYFlowNodes, convertToXYFlowEdges, } from '../utils/graphConverter';
+import { EdgeInfoPanel } from './EdgeInfoPanel';
+import { NodeInfoPanel } from './NodeInfoPanel';
+import { SelectionSidebar } from './SelectionSidebar';
 // Define custom node types
 const nodeTypes = {
-    custom: CustomNode_1.CustomNode,
+    custom: CustomNode,
 };
 // Define custom edge types
 const edgeTypes = {
-    custom: CustomEdge_1.CustomEdge,
+    custom: CustomEdge,
 };
 const createEmptyEditState = () => ({
     positionChanges: new Map(),
@@ -34,14 +31,14 @@ const createEmptyEditState = () => ({
  * Uses viewport transform to position correctly regardless of pan/zoom.
  */
 const CenterIndicator = ({ color }) => {
-    const { x, y } = (0, react_2.useViewport)();
+    const { x, y } = useViewport();
     // Size of the crosshair in screen pixels (stays constant regardless of zoom)
     const size = 20;
     const strokeWidth = 1.5;
     // The viewport transform places origin (0,0) at screen position (x, y)
     const screenX = x;
     const screenY = y;
-    return ((0, jsx_runtime_1.jsxs)("svg", { style: {
+    return (_jsxs("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
@@ -49,46 +46,46 @@ const CenterIndicator = ({ color }) => {
             height: '100%',
             pointerEvents: 'none',
             zIndex: 5,
-        }, children: [(0, jsx_runtime_1.jsx)("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color, strokeWidth: strokeWidth, opacity: 0.7 }), (0, jsx_runtime_1.jsx)("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color, strokeWidth: strokeWidth, opacity: 0.7 }), (0, jsx_runtime_1.jsx)("circle", { cx: screenX, cy: screenY, r: 3, fill: color, opacity: 0.7 })] }));
+        }, children: [_jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color, strokeWidth: strokeWidth, opacity: 0.7 }), _jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color, strokeWidth: strokeWidth, opacity: 0.7 }), _jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color, opacity: 0.7 })] }));
 };
 /**
  * Inner component that uses ReactFlow hooks
  */
 const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'dots', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onSourceClick, }) => {
-    const { fitView } = (0, react_2.useReactFlow)();
-    const { theme } = (0, industry_theme_1.useTheme)();
+    const { fitView } = useReactFlow();
+    const { theme } = useTheme();
     // Track active animations
-    const [animationState, setAnimationState] = (0, react_1.useState)({
+    const [animationState, setAnimationState] = useState({
         nodeAnimations: {},
         edgeAnimations: {},
     });
     // Track selected edges for info panel (supports multi-select)
-    const [selectedEdgeIds, setSelectedEdgeIds] = (0, react_1.useState)(new Set());
+    const [selectedEdgeIds, setSelectedEdgeIds] = useState(new Set());
     // Track selected nodes for info panel (supports multi-select)
-    const [selectedNodeIds, setSelectedNodeIds] = (0, react_1.useState)(new Set());
+    const [selectedNodeIds, setSelectedNodeIds] = useState(new Set());
     // Track whether panel should be shown (only on explicit clicks, not after dragging)
-    const [showNodePanel, setShowNodePanel] = (0, react_1.useState)(false);
-    const [showEdgePanel, setShowEdgePanel] = (0, react_1.useState)(false);
+    const [showNodePanel, setShowNodePanel] = useState(false);
+    const [showEdgePanel, setShowEdgePanel] = useState(false);
     // Track pending connection for edge type picker
-    const [pendingConnection, setPendingConnection] = (0, react_1.useState)(null);
+    const [pendingConnection, setPendingConnection] = useState(null);
     // ============================================
     // INTERNAL EDIT STATE
     // ============================================
     // Local copies of nodes and edges for editing
-    const [localNodes, setLocalNodes] = (0, react_1.useState)(propNodes);
-    const [localEdges, setLocalEdges] = (0, react_1.useState)(propEdges);
+    const [localNodes, setLocalNodes] = useState(propNodes);
+    const [localEdges, setLocalEdges] = useState(propEdges);
     // Track the prop values to detect external changes
-    const propNodesKeyRef = (0, react_1.useRef)(propNodes
+    const propNodesKeyRef = useRef(propNodes
         .map((n) => n.id)
         .sort()
         .join(','));
-    const propEdgesKeyRef = (0, react_1.useRef)(propEdges
+    const propEdgesKeyRef = useRef(propEdges
         .map((e) => e.id)
         .sort()
         .join(','));
     // Sync local state with props when props change (e.g., config reload)
     // This only happens when the structure changes, not during editing
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const newNodesKey = propNodes
             .map((n) => n.id)
             .sort()
@@ -126,7 +123,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const nodes = localNodes;
     const edges = editable ? localEdges : propEdges;
     // Helper to check if there are pending changes
-    const checkHasChanges = (0, react_1.useCallback)((state) => {
+    const checkHasChanges = useCallback((state) => {
         return (state.positionChanges.size > 0 ||
             state.dimensionChanges.size > 0 ||
             state.nodeUpdates.size > 0 ||
@@ -135,7 +132,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             state.deletedEdges.length > 0);
     }, []);
     // Helper to update edit state and notify parent
-    const updateEditState = (0, react_1.useCallback)((updater) => {
+    const updateEditState = useCallback((updater) => {
         const newState = updater(editStateRef.current);
         editStateRef.current = newState;
         onEditStateChange?.(newState);
@@ -145,7 +142,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // EVENT HANDLERS
     // ============================================
     // Handle edge click (toggle selection, supports Shift for multi-select)
-    const onEdgeClick = (0, react_1.useCallback)((event, edge) => {
+    const onEdgeClick = useCallback((event, edge) => {
         if (event.shiftKey && editable) {
             // Shift+click: toggle edge in selection
             setSelectedEdgeIds((prev) => {
@@ -176,7 +173,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
     }, [editable, selectedEdgeIds]);
     // Handle node click (toggle selection, supports Shift for multi-select)
-    const onNodeClick = (0, react_1.useCallback)((event, node) => {
+    const onNodeClick = useCallback((event, node) => {
         if (event.shiftKey && editable) {
             // Shift+click: toggle node in selection
             setSelectedNodeIds((prev) => {
@@ -207,12 +204,12 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
     }, [editable, selectedNodeIds]);
     // Handle close edge info panel
-    const onCloseEdgeInfoPanel = (0, react_1.useCallback)(() => {
+    const onCloseEdgeInfoPanel = useCallback(() => {
         setSelectedEdgeIds(new Set());
         setShowEdgePanel(false);
     }, []);
     // Handle edge side updates from EdgeInfoPanel
-    const handleUpdateEdgeSides = (0, react_1.useCallback)((edgeId, fromSide, toSide) => {
+    const handleUpdateEdgeSides = useCallback((edgeId, fromSide, toSide) => {
         setLocalEdges((currentEdges) => currentEdges.map((edge) => edge.id === edgeId
             ? {
                 ...edge,
@@ -225,19 +222,19 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             : edge));
     }, []);
     // Handle close node info panel
-    const onCloseNodeInfoPanel = (0, react_1.useCallback)(() => {
+    const onCloseNodeInfoPanel = useCallback(() => {
         setSelectedNodeIds(new Set());
         setShowNodePanel(false);
     }, []);
     // Handle pane click (clear selection when clicking empty space)
-    const onPaneClick = (0, react_1.useCallback)(() => {
+    const onPaneClick = useCallback(() => {
         setSelectedNodeIds(new Set());
         setSelectedEdgeIds(new Set());
         setShowNodePanel(false);
         setShowEdgePanel(false);
     }, []);
     // Handle selection change from ReactFlow (box selection)
-    const handleSelectionChange = (0, react_1.useCallback)(({ nodes: selectedNodes, edges: selectedEdges }) => {
+    const handleSelectionChange = useCallback(({ nodes: selectedNodes, edges: selectedEdges }) => {
         if (editable) {
             setSelectedNodeIds(new Set(selectedNodes.map((n) => n.id)));
             setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
@@ -251,7 +248,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
     }, [editable]);
     // Handle node update (internal - updates local state only)
-    const handleNodeUpdate = (0, react_1.useCallback)((nodeId, updates) => {
+    const handleNodeUpdate = useCallback((nodeId, updates) => {
         if (!editable)
             return;
         // Update local nodes
@@ -277,7 +274,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         });
     }, [editable, updateEditState]);
     // Handle node delete (internal)
-    const handleNodeDelete = (0, react_1.useCallback)((nodeId) => {
+    const handleNodeDelete = useCallback((nodeId) => {
         if (!editable)
             return;
         // Remove from local state
@@ -310,7 +307,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         setSelectedNodeIds(new Set());
     }, [editable, updateEditState]);
     // Handle edge delete (internal)
-    const handleEdgeDelete = (0, react_1.useCallback)((edgeId) => {
+    const handleEdgeDelete = useCallback((edgeId) => {
         if (!editable)
             return;
         // Find the edge before removing it so we can track its full info
@@ -345,7 +342,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         setSelectedEdgeIds(new Set());
     }, [editable, updateEditState, localEdges]);
     // Handle new connection from drag
-    const handleConnect = (0, react_1.useCallback)((connection) => {
+    const handleConnect = useCallback((connection) => {
         if (!editable || !connection.source || !connection.target)
             return;
         // Find source and target node types
@@ -378,7 +375,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
     }, [editable, nodes, configuration.allowedConnections]);
     // Create edge helper
-    const createEdge = (0, react_1.useCallback)((from, to, type, sourceHandle, targetHandle) => {
+    const createEdge = useCallback((from, to, type, sourceHandle, targetHandle) => {
         const edgeId = `${from}-${to}-${type}-${Date.now()}`;
         // Add to local state with handle information
         const newEdge = {
@@ -403,24 +400,24 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }));
     }, [updateEditState]);
     // Handle edge type selection from picker
-    const handleEdgeTypeSelect = (0, react_1.useCallback)((type) => {
+    const handleEdgeTypeSelect = useCallback((type) => {
         if (!pendingConnection)
             return;
         createEdge(pendingConnection.from, pendingConnection.to, type, pendingConnection.sourceHandle, pendingConnection.targetHandle);
         setPendingConnection(null);
     }, [pendingConnection, createEdge]);
     // Cancel edge type picker
-    const handleCancelEdgeTypePicker = (0, react_1.useCallback)(() => {
+    const handleCancelEdgeTypePicker = useCallback(() => {
         setPendingConnection(null);
     }, []);
     // Track whether reconnection succeeded
-    const edgeReconnectSuccessful = (0, react_1.useRef)(true);
+    const edgeReconnectSuccessful = useRef(true);
     // Called when user starts dragging an edge endpoint
-    const handleReconnectStart = (0, react_1.useCallback)(() => {
+    const handleReconnectStart = useCallback(() => {
         edgeReconnectSuccessful.current = false;
     }, []);
     // Handle edge reconnection (dragging edge endpoint to new node)
-    const handleReconnect = (0, react_1.useCallback)((oldEdge, newConnection) => {
+    const handleReconnect = useCallback((oldEdge, newConnection) => {
         if (!editable || !newConnection.source || !newConnection.target)
             return;
         // Find the original edge in our local state
@@ -495,7 +492,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         });
     }, [editable, localEdges, nodes, configuration.allowedConnections, updateEditState]);
     // Called when reconnection ends (whether successful or not)
-    const handleReconnectEnd = (0, react_1.useCallback)(() => {
+    const handleReconnectEnd = useCallback(() => {
         // If reconnection wasn't successful, the edge was dropped in empty space
         // We need to keep the original edge (do nothing, it's still in localEdges)
         // Edge is still in localEdges, no action needed - ReactFlow will re-render with it
@@ -505,33 +502,33 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // SELECTED ITEMS
     // ============================================
     // Get first selected edge (for single-selection info panel)
-    const selectedEdgeId = (0, react_1.useMemo)(() => {
+    const selectedEdgeId = useMemo(() => {
         if (selectedEdgeIds.size === 0)
             return null;
         return selectedEdgeIds.values().next().value;
     }, [selectedEdgeIds]);
-    const selectedEdge = (0, react_1.useMemo)(() => {
+    const selectedEdge = useMemo(() => {
         if (!selectedEdgeId)
             return null;
         return edges.find((e) => e.id === selectedEdgeId);
     }, [selectedEdgeId, edges]);
-    const selectedEdgeTypeDefinition = (0, react_1.useMemo)(() => {
+    const selectedEdgeTypeDefinition = useMemo(() => {
         if (!selectedEdge)
             return null;
         return configuration.edgeTypes[selectedEdge.type];
     }, [selectedEdge, configuration.edgeTypes]);
     // Get first selected node (for single-selection info panel)
-    const selectedNodeId = (0, react_1.useMemo)(() => {
+    const selectedNodeId = useMemo(() => {
         if (selectedNodeIds.size === 0)
             return null;
         return selectedNodeIds.values().next().value;
     }, [selectedNodeIds]);
-    const selectedNode = (0, react_1.useMemo)(() => {
+    const selectedNode = useMemo(() => {
         if (!selectedNodeId)
             return null;
         return nodes.find((n) => n.id === selectedNodeId);
     }, [selectedNodeId, nodes]);
-    const selectedNodeTypeDefinition = (0, react_1.useMemo)(() => {
+    const selectedNodeTypeDefinition = useMemo(() => {
         if (!selectedNode)
             return null;
         return configuration.nodeTypes[selectedNode.type];
@@ -539,7 +536,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // ANIMATIONS
     // ============================================
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (events.length === 0)
             return;
         const latestEvent = events[events.length - 1];
@@ -634,8 +631,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // XYFLOW CONVERSION
     // ============================================
-    const xyflowNodesBase = (0, react_1.useMemo)(() => {
-        const converted = (0, graphConverter_1.convertToXYFlowNodes)(localNodes, configuration, violations);
+    const xyflowNodesBase = useMemo(() => {
+        const converted = convertToXYFlowNodes(localNodes, configuration, violations);
         return converted.map((node) => {
             const animation = animationState.nodeAnimations[node.id];
             // Apply any pending position changes
@@ -658,31 +655,31 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             };
         });
     }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, editStateRef]);
-    const baseNodesKey = (0, react_1.useMemo)(() => {
+    const baseNodesKey = useMemo(() => {
         return nodes
             .map((n) => n.id)
             .sort()
             .join(',');
     }, [nodes]);
-    const baseEdgesKey = (0, react_1.useMemo)(() => {
+    const baseEdgesKey = useMemo(() => {
         return edges
             .map((e) => e.id)
             .sort()
             .join(',');
     }, [edges]);
     // Local xyflow nodes state for dragging
-    const [xyflowLocalNodes, setXyflowLocalNodes] = (0, react_1.useState)(xyflowNodesBase);
+    const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
     // Sync when base changes
-    const prevBaseNodesKeyRef = (0, react_1.useRef)(baseNodesKey);
-    (0, react_1.useEffect)(() => {
+    const prevBaseNodesKeyRef = useRef(baseNodesKey);
+    useEffect(() => {
         if (prevBaseNodesKeyRef.current !== baseNodesKey) {
             prevBaseNodesKeyRef.current = baseNodesKey;
             setXyflowLocalNodes(xyflowNodesBase);
         }
     }, [baseNodesKey, xyflowNodesBase]);
     // Also sync when entering edit mode or when base nodes change content
-    const prevEditableRef = (0, react_1.useRef)(editable);
-    (0, react_1.useEffect)(() => {
+    const prevEditableRef = useRef(editable);
+    useEffect(() => {
         if (editable && !prevEditableRef.current) {
             // Entering edit mode - sync positions
             setXyflowLocalNodes(xyflowNodesBase);
@@ -691,10 +688,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [editable, xyflowNodesBase]);
     const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
     // Handle node changes (drag and resize events)
-    const handleNodesChange = (0, react_1.useCallback)((changes) => {
+    const handleNodesChange = useCallback((changes) => {
         if (!editable)
             return;
-        setXyflowLocalNodes((nds) => (0, react_2.applyNodeChanges)(changes, nds));
+        setXyflowLocalNodes((nds) => applyNodeChanges(changes, nds));
         // Check if dragging started - hide panel when dragging starts
         const hasDragging = changes.some((change) => change.type === 'position' &&
             'dragging' in change &&
@@ -742,8 +739,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             });
         }
     }, [editable, updateEditState]);
-    const xyflowEdges = (0, react_1.useMemo)(() => {
-        const converted = (0, graphConverter_1.convertToXYFlowEdges)(edges, configuration, violations);
+    const xyflowEdges = useMemo(() => {
+        const converted = convertToXYFlowEdges(edges, configuration, violations);
         // Debug: Log edge counts to help diagnose disappearing edges
         if (process.env.NODE_ENV === 'development') {
             console.log('[GraphRenderer] xyflowEdges computed:', {
@@ -786,7 +783,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         });
     }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds]);
     // Fit view on mount and structure changes
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const timeoutId = setTimeout(() => {
             fitView({
                 padding: 0.2,
@@ -801,14 +798,14 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // RENDER
     // ============================================
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: true, selectionOnDrag: false, selectionKeyCode: editable ? 'Shift' : null, multiSelectionKeyCode: "Shift", children: [showBackground && ((0, jsx_runtime_1.jsx)(react_2.Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
-                            ? react_2.BackgroundVariant.Dots
+    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: true, selectionOnDrag: false, selectionKeyCode: editable ? 'Shift' : null, multiSelectionKeyCode: "Shift", children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
+                            ? BackgroundVariant.Dots
                             : backgroundVariant === 'lines'
-                                ? react_2.BackgroundVariant.Lines
-                                : react_2.BackgroundVariant.Cross })), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && ((0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+                                ? BackgroundVariant.Lines
+                                : BackgroundVariant.Cross })), showControls && _jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (_jsx(MiniMap, { nodeColor: (node) => {
                             const nodeData = node.data;
                             return nodeData?.typeDefinition?.color || theme.colors.secondary;
-                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && (0, jsx_runtime_1.jsx)(CenterIndicator, { color: theme.colors.textMuted })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && showNodePanel && ((0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds: selectedNodeIds, nodes: nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel })), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && ((0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined, onUpdateSides: editable ? handleUpdateEdgeSides : undefined })), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && ((0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined, onSourceClick: onSourceClick })), pendingConnection && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && _jsx(CenterIndicator, { color: theme.colors.textMuted })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && showNodePanel && (_jsx(SelectionSidebar, { selectedNodeIds: selectedNodeIds, nodes: nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel })), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && (_jsx(EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined, onUpdateSides: editable ? handleUpdateEdgeSides : undefined })), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && (_jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined, onSourceClick: onSourceClick })), pendingConnection && (_jsxs("div", { style: {
                     position: 'absolute',
                     top: '50%',
                     left: '50%',
@@ -821,9 +818,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                     minWidth: '200px',
                     zIndex: 1000,
                     border: `1px solid ${theme.colors.border}`,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', marginBottom: '12px', fontSize: '14px' }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: theme.colors.textSecondary, marginBottom: '12px' }, children: [pendingConnection.from, " \u2192 ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: pendingConnection.validTypes.map((type) => {
+                }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '12px', fontSize: '14px' }, children: "Select Edge Type" }), _jsxs("div", { style: { fontSize: '12px', color: theme.colors.textSecondary, marginBottom: '12px' }, children: [pendingConnection.from, " \u2192 ", pendingConnection.to] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: pendingConnection.validTypes.map((type) => {
                             const typeDefinition = configuration.edgeTypes[type];
-                            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleEdgeTypeSelect(type), style: {
+                            return (_jsx("button", { onClick: () => handleEdgeTypeSelect(type), style: {
                                     padding: '8px 12px',
                                     backgroundColor: typeDefinition?.color || theme.colors.secondary,
                                     color: theme.colors.background,
@@ -834,7 +831,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                                     fontWeight: 'bold',
                                     textAlign: 'left',
                                 }, children: type }, type));
-                        }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCancelEdgeTypePicker, style: {
+                        }) }), _jsx("button", { onClick: handleCancelEdgeTypePicker, style: {
                             marginTop: '12px',
                             width: '100%',
                             padding: '8px 12px',
@@ -850,10 +847,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
  * Convert canvas to legacy configuration format for internal use
  */
 function useCanvasToLegacy(canvas, library) {
-    return (0, react_1.useMemo)(() => {
+    return useMemo(() => {
         if (!canvas)
             return null;
-        const { nodes, edges } = principal_view_core_1.CanvasConverter.canvasToGraph(canvas);
+        const { nodes, edges } = CanvasConverter.canvasToGraph(canvas);
         // Build GraphConfiguration from canvas
         const nodeTypes = {};
         const edgeTypes = {};
@@ -1007,9 +1004,9 @@ function useCanvasToLegacy(canvas, library) {
  * />
  * ```
  */
-exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
+export const GraphRenderer = forwardRef((props, ref) => {
     const { canvas, library, className, width = '100%', height = '100%' } = props;
-    const { theme } = (0, industry_theme_1.useTheme)();
+    const { theme } = useTheme();
     // Convert canvas to internal format (merging library types if provided)
     const canvasData = useCanvasToLegacy(canvas, library);
     // Debug: Log canvas data to help diagnose disappearing edges
@@ -1023,9 +1020,9 @@ exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
         });
     }
     // Internal edit state ref - must be before any conditional returns
-    const editStateRef = (0, react_1.useRef)(createEmptyEditState());
+    const editStateRef = useRef(createEmptyEditState());
     // Expose imperative handle - must be before any conditional returns
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    useImperativeHandle(ref, () => ({
         getPendingChanges: () => {
             const state = editStateRef.current;
             return {
@@ -1073,7 +1070,7 @@ exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
     }), []);
     // Validate we have required data
     if (!canvasData) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
+        return (_jsx("div", { className: className, style: {
                 width,
                 height,
                 display: 'flex',
@@ -1081,12 +1078,12 @@ exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
                 justifyContent: 'center',
                 backgroundColor: theme.colors.background,
                 color: theme.colors.textSecondary,
-            }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) }));
+            }, children: _jsx("p", { children: "No canvas data provided." }) }));
     }
     const { configuration, nodes, edges } = canvasData;
     // Extract only the props that inner component needs
     const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, events, onEventProcessed, editable, onPendingChangesChange, onSourceClick, } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { width, height, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, onSourceClick: onSourceClick }) }) }));
+    return (_jsx("div", { className: className, style: { width, height, position: 'relative' }, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, onSourceClick: onSourceClick }) }) }));
 });
-exports.GraphRenderer.displayName = 'GraphRenderer';
+GraphRenderer.displayName = 'GraphRenderer';
 //# sourceMappingURL=GraphRenderer.js.map