@tldiagram/core-ui 1.92.0 → 1.94.0

package/dist/pages/InfiniteZoom.d.ts

@@ -2,6 +2,9 @@ interface Props {
     sharedToken?: string;
     shareSlot?: React.ReactNode;
 }
-export default function InfiniteZoom(props: Props): import("react/jsx-runtime").JSX.Element;
+export interface InfiniteZoomHandle {
+    focusDiagram(viewId: number): boolean;
+}
+declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;
+export default InfiniteZoom;
 export declare function SharedInfiniteZoom(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -1,6 +1,8 @@
 import type { DrawingCanvasHandle } from '../../../components/DrawingCanvas';
 import { type Connection, type Edge as RFEdge, type EdgeChange, type Node as RFNode, type NodeChange, type NodeDragHandler, type OnConnect, type OnConnectStartParams } from 'reactflow';
 import type { Connector, PlacedElement, ViewTreeNode, LibraryElement, ViewLayer, ViewConnector, IncomingViewConnector } from '../../../types';
+export declare function applyNodeChangesWithStructuralSharing(changes: NodeChange[], nodes: RFNode[]): RFNode[];
+export declare function getConnectorDeletionTarget(selectedConnector: Connector | null): number | null;
 interface CanvasInteractionOptions {
     viewId: number | null;
     canEdit: boolean;
@@ -41,12 +43,11 @@ interface CanvasInteractionOptions {
     openConnectorPanel: () => void;
     closeConnectorPanel: () => void;
     selectedElement: LibraryElement | null;
-    selectedEdgeId: number | null;
+    selectedConnector: Connector | null;
     connectors: Connector[];
     layers: ViewLayer[];
     setSelectedElement: React.Dispatch<React.SetStateAction<LibraryElement | null>>;
     setSelectedEdge: (e: Connector | null) => void;
-    setSelectedEdgeId: (id: number | null) => void;
     setSelectedProxyConnectorDetails: React.Dispatch<React.SetStateAction<import('../../../crossBranch/types').ProxyConnectorDetails | null>>;
     openProxyConnectorPanel: () => void;
     closeProxyConnectorPanel: () => void;
@@ -79,7 +80,12 @@ type HandleReconnectDragState = {
     hoveredNodeId?: string;
     hoveredHandleId?: string;
 };
-export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements, setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedEdgeId, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedEdgeId, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
+type InteractionStartOptions = {
+    sourceHandle?: string;
+    clientX?: number;
+    clientY?: number;
+};
+export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedConnector, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
     canvasMenu: {
         x: number;
         y: number;
@@ -154,6 +160,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
     stableOnHoverZoom: (elementId: number, type: "in" | "out" | null) => void;
     stableOnRemoveElement: (elementId: number) => Promise<void>;
     stableOnConnectTo: (targetElementId: number) => Promise<void>;
+    stableOnInteractionStart: (elementId: number, options?: InteractionStartOptions) => void;
     stableOnStartHandleReconnect: (args: {
         edgeId: string;
         endpoint: "source" | "target";

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/pages/ViewEditor/hooks/useViewData.d.ts

@@ -1,5 +1,4 @@
-import { type Edge as RFEdge, type Node as RFNode } from 'reactflow';
-import type { ViewTreeNode, PlacedElement, LibraryElement, Connector, IncomingViewConnector, ViewConnector, Tag } from '../../../types';
+import type { ViewTreeNode, PlacedElement, LibraryElement, Connector, Tag } from '../../../types';
 interface ViewDataOptions {
     viewId: number | null;
     interactionSourceId: number | null;
@@ -8,7 +7,7 @@ interface ViewDataOptions {
         sourceHandle: string;
         targetHandle?: string;
     } | null;
-    selectedEdgeId: number | null;
+    selectedConnector: Connector | null;
     activeTags: string[];
     hiddenLayerTags: string[];
     hoveredLayerTags: string[] | null;
@@ -19,7 +18,11 @@ interface ViewDataOptions {
     stableOnNavigateToView: (id: number) => void;
     stableOnSelect: (obj: PlacedElement) => void;
     stableOnOpenCodePreview: (elementId: number) => void;
-    stableOnInteractionStart: (elementId: number) => void;
+    stableOnInteractionStart: (elementId: number, options?: {
+        sourceHandle?: string;
+        clientX?: number;
+        clientY?: number;
+    }) => void;
     stableOnConnectTo: (targetElementId: number) => Promise<void>;
     stableOnStartHandleReconnect: (args: {
         edgeId: string;
@@ -35,40 +38,40 @@ interface ViewDataOptions {
         type: 'in' | 'out' | null;
     } | null>;
 }
-export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedEdgeId, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
+export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedConnector, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
     view: ViewTreeNode | null | undefined;
-    setView: import("react").Dispatch<import("react").SetStateAction<ViewTreeNode | null | undefined>>;
+    setView: (view: ViewTreeNode | null | undefined) => void;
     viewElements: PlacedElement[];
-    setViewElements: import("react").Dispatch<import("react").SetStateAction<PlacedElement[]>>;
+    setViewElements: (next: import("../../../store/useStore").StoreSetter<PlacedElement[]>) => void;
     connectors: Connector[];
-    setConnectors: import("react").Dispatch<import("react").SetStateAction<Connector[]>>;
-    rfNodes: RFNode[];
-    setRfNodes: import("react").Dispatch<import("react").SetStateAction<RFNode[]>>;
-    rfEdges: RFEdge[];
-    setRfEdges: import("react").Dispatch<import("react").SetStateAction<RFEdge[]>>;
-    linksMap: Record<number, ViewConnector[]>;
-    setLinksMap: import("react").Dispatch<import("react").SetStateAction<Record<number, ViewConnector[]>>>;
-    parentLinksMap: Record<number, ViewConnector[]>;
-    setParentLinksMap: import("react").Dispatch<import("react").SetStateAction<Record<number, ViewConnector[]>>>;
-    incomingLinks: IncomingViewConnector[];
+    setConnectors: (next: import("../../../store/useStore").StoreSetter<Connector[]>) => void;
+    rfNodes: import("reactflow").Node[];
+    setRfNodes: (next: import("../../../store/useStore").StoreSetter<import("reactflow").Node[]>) => void;
+    rfEdges: import("reactflow").Edge[];
+    setRfEdges: (next: import("../../../store/useStore").StoreSetter<import("reactflow").Edge[]>) => void;
+    linksMap: Record<number, import("../../..").ViewConnector[]>;
+    setLinksMap: (next: import("../../../store/useStore").StoreSetter<Record<number, import("../../..").ViewConnector[]>>) => void;
+    parentLinksMap: Record<number, import("../../..").ViewConnector[]>;
+    setParentLinksMap: (next: import("../../../store/useStore").StoreSetter<Record<number, import("../../..").ViewConnector[]>>) => void;
+    incomingLinks: import("../../..").IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
     libraryRefresh: number;
-    setLibraryRefresh: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setLibraryRefresh: (next: import("../../../store/useStore").StoreSetter<number>) => void;
     existingElementIds: Set<number>;
     viewElementsRef: import("react").MutableRefObject<PlacedElement[]>;
-    linksMapRef: import("react").MutableRefObject<Record<number, ViewConnector[]>>;
-    parentLinksMapRef: import("react").MutableRefObject<Record<number, ViewConnector[]>>;
-    incomingLinksRef: import("react").MutableRefObject<IncomingViewConnector[]>;
+    linksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;
+    parentLinksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;
+    incomingLinksRef: import("react").MutableRefObject<import("../../..").IncomingViewConnector[]>;
     treeDataRef: import("react").MutableRefObject<ViewTreeNode[]>;
-    rfNodesRef: import("react").MutableRefObject<RFNode[]>;
-    rfEdgesRef: import("react").MutableRefObject<RFEdge[]>;
+    rfNodesRef: import("react").MutableRefObject<import("reactflow").Node[]>;
+    rfEdgesRef: import("react").MutableRefObject<import("reactflow").Edge[]>;
     viewIdRef: import("react").MutableRefObject<number | null>;
     refreshGrid: () => Promise<void>;
     refreshElements: () => Promise<void>;
     handleElementDeleted: (deletedId: number) => void;
     handleElementPermanentlyDeleted: (deletedId: number) => void;
     handleElementSaved: (saved: LibraryElement) => void;
-    setAllElements: import("react").Dispatch<import("react").SetStateAction<LibraryElement[]>>;
+    setAllElements: (next: import("../../../store/useStore").StoreSetter<LibraryElement[]>) => void;
 };
 export {};

package/dist/pages/ViewsGrid.d.ts

@@ -1,6 +1,14 @@
+import { type Dispatch, type SetStateAction } from 'react';
 import 'reactflow/dist/style.css';
+import type { ViewTreeNode } from '../types';
 interface Props {
     onShare?: (viewId: number) => void;
+    treeData: ViewTreeNode[];
+    loading: boolean;
+    focusedId: number | null;
+    onFocusChange: (viewId: number | null) => void;
+    setTreeData: Dispatch<SetStateAction<ViewTreeNode[]>>;
+    refreshTree: () => Promise<void>;
 }
-export default function ViewsGrid({ onShare }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ViewsGrid(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shims/empty-node-module.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/store/useStore.d.ts

@@ -0,0 +1,80 @@
+import type { Edge as RFEdge, Node as RFNode } from 'reactflow';
+import type { Connector, IncomingViewConnector, LibraryElement, PlacedElement, ViewConnector, ViewTreeNode } from '../types';
+export type StoreSetter<T> = T | ((previous: T) => T);
+export type ViewEditorUiState = {
+    viewId: number | null;
+    canEdit: boolean;
+    isOwner: boolean;
+    isFreePlan: boolean;
+    snapToGrid: boolean;
+    selectedElement: LibraryElement | null;
+    selectedConnector: Connector | null;
+};
+export type ViewContentLinks = {
+    linksMap: Record<number, ViewConnector[]>;
+    parentLinksMap: Record<number, ViewConnector[]>;
+    incomingLinks: IncomingViewConnector[];
+};
+export type ViewContentPayload = ViewContentLinks & {
+    view: ViewTreeNode | null;
+    viewElements: PlacedElement[];
+    connectors: Connector[];
+    treeData: ViewTreeNode[];
+};
+export type CanvasStoreState = ViewEditorUiState & {
+    view: ViewTreeNode | null | undefined;
+    viewElements: PlacedElement[];
+    connectors: Connector[];
+    nodes: RFNode[];
+    edges: RFEdge[];
+    linksMap: Record<number, ViewConnector[]>;
+    parentLinksMap: Record<number, ViewConnector[]>;
+    incomingLinks: IncomingViewConnector[];
+    treeData: ViewTreeNode[];
+    allElements: LibraryElement[];
+    libraryRefresh: number;
+    setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void;
+    setSnapToGrid: (snapToGrid: boolean) => void;
+    setSelectedElement: (selectedElement: LibraryElement | null) => void;
+    setSelectedConnector: (selectedConnector: Connector | null) => void;
+    setView: (view: ViewTreeNode | null | undefined) => void;
+    setViewElements: (next: StoreSetter<PlacedElement[]>) => void;
+    setConnectors: (next: StoreSetter<Connector[]>) => void;
+    setNodes: (next: StoreSetter<RFNode[]>) => void;
+    setEdges: (next: StoreSetter<RFEdge[]>) => void;
+    setLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void;
+    setParentLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void;
+    setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void;
+    setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void;
+    setAllElements: (next: StoreSetter<LibraryElement[]>) => void;
+    setLibraryRefresh: (next: StoreSetter<number>) => void;
+    resetCanvas: () => void;
+    hydrateViewContent: (payload: ViewContentPayload) => void;
+    updateElementPosition: (elementId: number, x: number, y: number) => void;
+    removeElementPlacement: (elementId: number) => void;
+    removeElementEverywhere: (elementId: number) => void;
+    mergeSavedElement: (saved: LibraryElement) => void;
+    upsertConnector: (connector: Connector) => void;
+    replaceConnector: (connector: Connector) => void;
+    removeConnector: (connectorId: number) => void;
+};
+export declare const emptyViewEditorUiState: ViewEditorUiState;
+export declare function findViewByOwner(nodes: ViewTreeNode[], elementId: number): ViewTreeNode | null;
+export declare function findViewPath(nodes: ViewTreeNode[], targetId: number, path?: ViewTreeNode[]): ViewTreeNode[] | null;
+export declare function buildViewContentLinks(tree: ViewTreeNode[], viewId: number, viewElements: PlacedElement[]): ViewContentLinks;
+export declare function selectExistingElementIds(state: Pick<CanvasStoreState, 'viewElements'>): Set<number>;
+export declare function selectElementById(state: Pick<CanvasStoreState, 'viewElements'>, elementId: number): PlacedElement | undefined;
+export declare function selectConnectorById(state: Pick<CanvasStoreState, 'connectors'>, connectorId: number): Connector | undefined;
+export declare function updatePlacedElementPosition(elements: PlacedElement[], elementId: number, x: number, y: number): PlacedElement[];
+export declare function removePlacedElement(elements: PlacedElement[], elementId: number): PlacedElement[];
+export declare function placedElementToLibraryElement(element: PlacedElement): LibraryElement;
+export declare function buildElementLibraryItems(allElements: LibraryElement[], viewElements: PlacedElement[]): LibraryElement[];
+export declare function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[];
+export declare function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[];
+export declare function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[];
+export declare const useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CanvasStoreState>>;
+export declare const canvasSelectors: {
+    existingElementIds: typeof selectExistingElementIds;
+    elementById: typeof selectElementById;
+    connectorById: typeof selectConnectorById;
+};

package/dist/store/useStore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.92.0",
+  "version": "1.94.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -38,7 +38,9 @@
   "dependencies": {
     "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
     "@bufbuild/protobuf": "^2.11.0",
-    "esbuild": "^0.25.12"
+    "@tanstack/react-query": "^5.100.1",
+    "esbuild": "^0.25.12",
+    "zustand": "^5.0.12"
   },
   "peerDependencies": {
     "@chakra-ui/icons": "^2.2.4",
@@ -59,13 +61,13 @@
     "@emotion/styled": "^11.14.0",
     "@uiw/react-codemirror": "^4.25.8",
     "d3-force": "^3.0.0",
-    "elkjs": "^0.11.1",
+    "dagre": "^0.8.5",
     "framer-motion": "^11.18.2",
     "html-to-image": "^1.11.13",
     "mermaid-ast": "^0.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.1",
+    "react-router-dom": "^6.30.3",
     "reactflow": "^11.11.4",
     "web-tree-sitter": "0.21.0"
   },
@@ -125,12 +127,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@eslint/js": "^9.0.0",
+    "@types/dagre": "^0.7.54",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@uiw/react-codemirror": "^4.25.8",
     "@vitejs/plugin-react": "^4.3.4",
     "d3-force": "^3.0.0",
-    "elkjs": "^0.11.1",
+    "dagre": "^0.8.5",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.0",
@@ -140,11 +143,11 @@
     "mermaid-ast": "^0.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.1",
+    "react-router-dom": "^6.30.3",
     "reactflow": "^11.11.4",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.0.0",
-    "vite": "^6.0.3",
+    "vite": "^6.4.2",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.2",
     "web-tree-sitter": "^0.21.0"

package/src/api/client.ts

@@ -46,6 +46,7 @@ import {
   ImportService,
 } from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/import_service_pb'
 import { transport } from './transport'
+import { apiUrl, fetchApiAsset } from '../config/runtime'
 
 export interface DependenciesResponse {
   elements: DependencyElement[]
@@ -383,6 +384,36 @@ export const api = {
           return (json.views ?? []).map(mapDiagram)
         }),
 
+      // Lazy: root-level views only. Use for sidebar first render on huge workspaces.
+      treeRoots: (opts: { limit?: number; offset?: number; search?: string } = {}): Promise<{ views: ViewTreeNode[]; totalCount: number }> =>
+        rpc(async () => {
+          const res = await workspaceClient.getWorkspace({
+            includeContent: false,
+            level: 0,
+            limit: opts.limit ?? 0,
+            offset: opts.offset ?? 0,
+            search: opts.search ?? '',
+          })
+          const json = j<{ views: ProtoDiagram[]; total_count?: number }>(GetWorkspaceResponseSchema, res)
+          return {
+            views: (json.views ?? []).map(mapDiagram),
+            totalCount: Number(json.total_count ?? 0),
+          }
+        }),
+
+      // Lazy: direct children of a parent view. Used on tree node expand.
+      treeChildren: (parentId: number, opts: { limit?: number; offset?: number } = {}): Promise<ViewTreeNode[]> =>
+        rpc(async () => {
+          const res = await workspaceClient.getWorkspace({
+            includeContent: false,
+            parentId,
+            limit: opts.limit ?? 0,
+            offset: opts.offset ?? 0,
+          })
+          const json = j<{ views: ProtoDiagram[] }>(GetWorkspaceResponseSchema, res)
+          return (json.views ?? []).map(mapDiagram)
+        }),
+
       get: (id: number): Promise<ViewTreeNode> =>
         rpc(async () => {
           const res = await workspaceClient.getView({ viewId: id })
@@ -422,7 +453,14 @@ export const api = {
       delete: (_orgId: string, id: number): Promise<void> =>
         rpc(async () => { await workspaceClient.deleteView({ orgId: '', viewId: id }) }),
 
-      thumbnail: async (_id: number): Promise<string | null> => null,
+      thumbnail: async (id: number): Promise<string | null> => {
+        const res = await fetchApiAsset(apiUrl(`/views/${id}/thumbnail.svg`), {
+          headers: { Accept: 'image/svg+xml' },
+        })
+        if (!res.ok) return null
+        const svg = await res.text()
+        return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }))
+      },
 
       placements: {
         list: (diagramId: number): Promise<ElementPlacement[]> =>

package/src/components/ElementNode.tsx

@@ -12,9 +12,6 @@ import { ZoomInIcon, ZoomOutIcon, TrashIcon as TrashSvg, EditIcon as EditSvg } f
 import { vscodeBridge } from '../lib/vscodeBridge'
 import type { ExtensionToWebviewMessage } from '../types/vscode-messages'
 import {
-  DEFAULT_SOURCE_HANDLE_SIDE,
-  DEFAULT_TARGET_HANDLE_SIDE,
-  ensureVisualHandleId,
   getVisualHandleId,
   getVisualHandleStyle,
   HANDLE_SLOT_CENTER_INDEX,
@@ -141,7 +138,7 @@ interface NodeData extends PlacedElement {
   onZoomOut: (elementId: number) => void
   onNavigateToDiagram: (viewId: number) => void
   onSelect: (obj: PlacedElement) => void
-  onInteractionStart: (elementId: number) => void
+  onInteractionStart: (elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void
   onConnectTo: (elementId: number) => void
   onStartHandleReconnect?: (args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void
   onRemove: (elementId: number) => void
@@ -154,6 +151,10 @@ interface NodeData extends PlacedElement {
   layerHighlightColor?: string
   forceShowTagPopup?: boolean
   isCanvasMoving?: boolean
+  connectedHandleIds?: readonly string[]
+  selectedHandleIds?: readonly string[]
+  reconnectCandidates?: readonly { handleId: string; edgeId: string; endpoint: 'source' | 'target'; selected: boolean }[]
+  isConnectorHighlighted?: boolean
 }
 
 interface Props {
@@ -285,61 +286,13 @@ function ElementNode({ data, selected }: Props) {
   const zoom = useStore(zoomSelector)
   useAccentColor()
 
-  const nodeId = String(data.element_id)
-  const isConnectorHighlighted = useStore((s) =>
-    s.edges.some(e => e.selected && (e.source === nodeId || e.target === nodeId))
-  )
-  const { connectedHandleKey, selectedHandleKey } = useStore((s) => {
-    const connectedHandles = new Set<string>()
-    const selectedHandles = new Set<string>()
-    for (const connector of s.edges) {
-      if (connector.source === nodeId) {
-        const targetNode = s.nodeInternals.get(connector.target)
-        if (targetNode && targetNode.type !== 'ContextBoundaryElement' && targetNode.type !== 'contextNeighborNode') {
-          const handleId = ensureVisualHandleId(connector.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
-          if (handleId) {
-            connectedHandles.add(handleId)
-            if (connector.selected) selectedHandles.add(handleId)
-          }
-        }
-      }
-      if (connector.target === nodeId) {
-        const sourceNode = s.nodeInternals.get(connector.source)
-        if (sourceNode && sourceNode.type !== 'ContextBoundaryElement' && sourceNode.type !== 'contextNeighborNode') {
-          const handleId = ensureVisualHandleId(connector.targetHandle, DEFAULT_TARGET_HANDLE_SIDE)
-          if (handleId) {
-            connectedHandles.add(handleId)
-            if (connector.selected) selectedHandles.add(handleId)
-          }
-        }
-      }
-    }
-    return {
-      connectedHandleKey: Array.from(connectedHandles).sort().join('|'),
-      selectedHandleKey: Array.from(selectedHandles).sort().join('|'),
-    }
-  })
-  const handleReconnectCandidates = useStore((s) => {
-    const candidates: Array<{ handleId: string; edgeId: string; endpoint: 'source' | 'target'; selected: boolean }> = []
-    for (const connector of s.edges) {
-      if (connector.source === nodeId) {
-        const handleId = ensureVisualHandleId(connector.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE)
-        if (handleId) candidates.push({ handleId, edgeId: connector.id, endpoint: 'source', selected: !!connector.selected })
-      }
-      if (connector.target === nodeId) {
-        const handleId = ensureVisualHandleId(connector.targetHandle, DEFAULT_TARGET_HANDLE_SIDE)
-        if (handleId) candidates.push({ handleId, edgeId: connector.id, endpoint: 'target', selected: !!connector.selected })
-      }
-    }
-    return candidates
-  })
   const connectedHandleIds = useMemo(
-    () => new Set(connectedHandleKey ? connectedHandleKey.split('|') : []),
-    [connectedHandleKey],
+    () => new Set(data.connectedHandleIds ?? []),
+    [data.connectedHandleIds],
   )
   const selectedHandleIds = useMemo(
-    () => new Set(selectedHandleKey ? selectedHandleKey.split('|') : []),
-    [selectedHandleKey],
+    () => new Set(data.selectedHandleIds ?? []),
+    [data.selectedHandleIds],
   )
   const activeSides = useMemo(() => {
     const sides = new Set<string>()
@@ -351,7 +304,7 @@ function ElementNode({ data, selected }: Props) {
   }, [connectedHandleIds])
   const reconnectCandidateByHandle = useMemo(() => {
     const next = new Map<string, { edgeId: string; endpoint: 'source' | 'target' }>()
-    const sortedCandidates = [...handleReconnectCandidates].sort((left, right) => {
+    const sortedCandidates = [...(data.reconnectCandidates ?? [])].sort((left, right) => {
       if (left.selected !== right.selected) return left.selected ? -1 : 1
       return left.edgeId.localeCompare(right.edgeId)
     })
@@ -361,7 +314,7 @@ function ElementNode({ data, selected }: Props) {
       }
     }
     return next
-  }, [handleReconnectCandidates])
+  }, [data.reconnectCandidates])
 
   const derivedPrimaryIconPath = (() => {
     const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
@@ -509,7 +462,7 @@ function ElementNode({ data, selected }: Props) {
       isSelected={selected}
       isSource={isSource}
       isTarget={isTarget}
-      isConnectorHighlighted={isConnectorHighlighted}
+      isConnectorHighlighted={!!data.isConnectorHighlighted}
       minW="180px"
       maxW="230px"
       cursor={bodyCursor}
@@ -552,6 +505,15 @@ function ElementNode({ data, selected }: Props) {
                 position={position}
                 id={handleId}
                 className={className}
+                onClick={(e: React.MouseEvent) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  data.onInteractionStart(data.element_id, {
+                    sourceHandle: handleId,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                  })
+                }}
                 style={{
                   ...getVisualHandleStyle(position, slot),
                   background: 'var(--accent)',

package/src/components/ElementPanel.tsx

@@ -480,7 +480,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     try {
       if (viewId != null) {
         await api.workspace.views.placements.remove(viewId, element.id)
-      } else if (orgId) {
+      } else if (orgId !== undefined) {
         await api.elements.delete(orgId, element.id)
       }
       onDelete?.(element.id)
@@ -491,8 +491,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   const handlePermanentDelete = async () => {
     if (isReadOnly || !element) return
     try {
-      if (!orgId) return
-      await api.elements.delete(orgId, element.id)
+      await api.elements.delete(orgId ?? '', element.id)
       onPermanentDelete?.(element.id)
       confirmPermanentDelete.onClose()
       onClose()