@procaaso/alphinity-ui-components 1.8.1 → 1.8.2

package/dist/index.d.cts

@@ -1481,9 +1481,22 @@ interface PIDCanvasControls {
  * - Renders nodes (PR #3) and pipes (PR #4) with static layout
  * - Drag-and-drop: Drag nodes to reposition (PR #8)
  *
+ * Memoized (renderer-OOM fix): a host whose screen re-renders for reasons
+ * unrelated to the canvas (panel state, connection status, ...) should not pay
+ * a full-canvas reconciliation. The memo only pays off when the host passes
+ * identity-stable props (memoized features/telemetry/style, useCallback
+ * handlers); an unstable host degrades gracefully to the old behavior.
+ *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): React__default.ReactElement;
+declare function PIDCanvasImpl({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): React__default.ReactElement;
+/**
+ * Memo boundary - see PIDCanvasImpl doc comment (renderer-OOM fix). Shallow
+ * compare: `diagram`, `telemetry`, `features`, `style`, `statusColorMap`, and
+ * every callback are compared by identity; hosts that keep them stable skip
+ * the full-canvas re-render entirely when unrelated screen state changes.
+ */
+declare const PIDCanvas: React__default.MemoExoticComponent<typeof PIDCanvasImpl>;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */

package/dist/index.d.ts

@@ -1481,9 +1481,22 @@ interface PIDCanvasControls {
  * - Renders nodes (PR #3) and pipes (PR #4) with static layout
  * - Drag-and-drop: Drag nodes to reposition (PR #8)
  *
+ * Memoized (renderer-OOM fix): a host whose screen re-renders for reasons
+ * unrelated to the canvas (panel state, connection status, ...) should not pay
+ * a full-canvas reconciliation. The memo only pays off when the host passes
+ * identity-stable props (memoized features/telemetry/style, useCallback
+ * handlers); an unstable host degrades gracefully to the old behavior.
+ *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): React__default.ReactElement;
+declare function PIDCanvasImpl({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): React__default.ReactElement;
+/**
+ * Memo boundary - see PIDCanvasImpl doc comment (renderer-OOM fix). Shallow
+ * compare: `diagram`, `telemetry`, `features`, `style`, `statusColorMap`, and
+ * every callback are compared by identity; hosts that keep them stable skip
+ * the full-canvas re-render entirely when unrelated screen state changes.
+ */
+declare const PIDCanvas: React__default.MemoExoticComponent<typeof PIDCanvasImpl>;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */

package/dist/index.js

@@ -3278,7 +3278,10 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-import { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
+import React13, { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
+
+// src/components/PIDCanvas/NodeRenderer.tsx
+import React9 from "react";
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -4500,7 +4503,7 @@ function getAvailableSymbols() {
 
 // src/components/PIDCanvas/NodeRenderer.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-function NodeRenderer({
+function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
   onNodeClick,
@@ -4646,10 +4649,12 @@ function NodeRenderer({
     );
   }) });
 }
+var NodeRenderer = React9.memo(NodeRendererImpl);
 
 // src/components/PIDCanvas/PipeRenderer.tsx
+import React10 from "react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-function PipeRenderer({
+function PipeRendererImpl({
   pipes,
   selectedPipeIds,
   onPipeClick,
@@ -4826,8 +4831,10 @@ function PipeRenderer({
     );
   }) });
 }
+var PipeRenderer = React10.memo(PipeRendererImpl);
 
 // src/components/PIDCanvas/DataOverlay.tsx
+import React11 from "react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var PULSE_KEYFRAME_ID = "pid-data-overlay-pulse-keyframes";
 var PULSE_ANIMATION = "pid-data-overlay-pulse 1.5s ease-in-out infinite";
@@ -4853,7 +4860,7 @@ function renderStatusDot(cx, cy, scale, fill) {
     }
   );
 }
-function DataOverlay({
+function DataOverlayImpl({
   nodeId,
   x,
   y,
@@ -4873,6 +4880,24 @@ function DataOverlay({
   const backgroundColor = display?.backgroundColor;
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
+  const sparklinePath = React11.useMemo(() => {
+    if (!showSparkline || !history || history.length < 2) return "";
+    const width = 70 * scale;
+    const height = 20 * scale;
+    const padding = 5 * scale;
+    const effectiveWidth = width - padding * 2;
+    const effectiveHeight = height - padding * 2;
+    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
+    const min = hasEuRange ? scaling.euLow : Math.min(...history);
+    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
+    const range = max - min || 1;
+    const points = history.map((val, i) => {
+      const xPos = i / (history.length - 1) * effectiveWidth + padding;
+      const yPos = height - padding - (val - min) / range * effectiveHeight;
+      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
+    });
+    return `M ${points.join(" L ")}`;
+  }, [showSparkline, history, scaling, scale]);
   if (!showValue) {
     return /* @__PURE__ */ jsx18(Fragment6, {});
   }
@@ -4892,24 +4917,6 @@ function DataOverlay({
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
   const displayText = unit ? `${formattedValue} ${unit}` : formattedValue;
-  const sparklinePath = (() => {
-    if (!showSparkline || !history || history.length < 2) return "";
-    const width = 70 * scale;
-    const height = 20 * scale;
-    const padding = 5 * scale;
-    const effectiveWidth = width - padding * 2;
-    const effectiveHeight = height - padding * 2;
-    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
-    const min = hasEuRange ? scaling.euLow : Math.min(...history);
-    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
-    const range = max - min || 1;
-    const points = history.map((val, i) => {
-      const xPos = i / (history.length - 1) * effectiveWidth + padding;
-      const yPos = height - padding - (val - min) / range * effectiveHeight;
-      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
-    });
-    return `M ${points.join(" L ")}`;
-  })();
   const hasSparkline = showSparkline && sparklinePath;
   const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale;
   const overlayWidth = 80 * scale;
@@ -4989,6 +4996,7 @@ function DataOverlay({
     ) })
   ] });
 }
+var DataOverlay = React11.memo(DataOverlayImpl);
 
 // src/components/PIDCanvas/PositionPanel.tsx
 import { useState as useState9, useEffect as useEffect6 } from "react";
@@ -6117,18 +6125,19 @@ function nodeHasPort(node, portId) {
 
 // src/components/PIDCanvas/PIDCanvas.tsx
 import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-function PIDCanvas({
+var DEFAULT_FEATURES = {
+  pan: true,
+  zoom: true,
+  selection: false,
+  multiSelect: true,
+  telemetry: false,
+  dragNodes: false
+};
+function PIDCanvasImpl({
   diagram,
   className = "",
   style,
-  features = {
-    pan: true,
-    zoom: true,
-    selection: false,
-    multiSelect: true,
-    telemetry: false,
-    dragNodes: false
-  },
+  features = DEFAULT_FEATURES,
   onSelectionChange,
   onNodeClick,
   onPipeClick,
@@ -6589,52 +6598,71 @@ function PIDCanvas({
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
-  const handleNodeDoubleClick = (nodeId, event) => {
-    if (!selectionEnabled) return;
-    console.log("Node double-clicked:", nodeId);
-    selectNode(nodeId, event.ctrlKey || event.metaKey);
-  };
+  const handleNodeDoubleClick = useCallback8(
+    (nodeId, event) => {
+      if (!selectionEnabled) return;
+      console.log("Node double-clicked:", nodeId);
+      selectNode(nodeId, event.ctrlKey || event.metaKey);
+    },
+    [selectionEnabled, selectNode]
+  );
   useKeyboardShortcuts({
     enabled: features.keyboardShortcuts ?? false,
     onDelete: handleDelete,
     onCopy: handleCopy,
     onPaste: handlePaste
   });
-  const handleNodeClick = (nodeId, event) => {
-    const connectionModeEnabled = features.connectionMode ?? false;
-    if (connectionModeEnabled && isConnecting) {
-      if (connectionSource && connectionSource !== nodeId) {
-        onPipeCreated?.(
-          connectionSource,
-          nodeId,
-          connectionSourcePort || void 0,
-          hoveredPort || void 0
-        );
-        setIsConnecting(false);
-        setConnectionSource(null);
-        setConnectionSourcePort(null);
-        setConnectionCursor(null);
-        setHoveredPort(null);
+  const handleNodeClick = useCallback8(
+    (nodeId, event) => {
+      const connectionModeEnabled = features.connectionMode ?? false;
+      if (connectionModeEnabled && isConnecting) {
+        if (connectionSource && connectionSource !== nodeId) {
+          onPipeCreated?.(
+            connectionSource,
+            nodeId,
+            connectionSourcePort || void 0,
+            hoveredPort || void 0
+          );
+          setIsConnecting(false);
+          setConnectionSource(null);
+          setConnectionSourcePort(null);
+          setConnectionCursor(null);
+          setHoveredPort(null);
+        }
+        return;
       }
-      return;
-    }
-    if (connectionModeEnabled && !isConnecting) {
-      setIsConnecting(true);
-      setConnectionSource(nodeId);
-      setConnectionSourcePort(hoveredPort);
-      return;
-    }
-    if (selectionEnabled) {
-      selectNode(nodeId, event.ctrlKey || event.metaKey);
-    }
-    onNodeClick?.(nodeId);
-  };
-  const handlePipeClick = (pipeId, event) => {
-    if (selectionEnabled) {
-      selectPipe(pipeId, event.ctrlKey || event.metaKey);
-    }
-    onPipeClick?.(pipeId);
-  };
+      if (connectionModeEnabled && !isConnecting) {
+        setIsConnecting(true);
+        setConnectionSource(nodeId);
+        setConnectionSourcePort(hoveredPort);
+        return;
+      }
+      if (selectionEnabled) {
+        selectNode(nodeId, event.ctrlKey || event.metaKey);
+      }
+      onNodeClick?.(nodeId);
+    },
+    [
+      features.connectionMode,
+      isConnecting,
+      connectionSource,
+      connectionSourcePort,
+      hoveredPort,
+      onPipeCreated,
+      selectionEnabled,
+      selectNode,
+      onNodeClick
+    ]
+  );
+  const handlePipeClick = useCallback8(
+    (pipeId, event) => {
+      if (selectionEnabled) {
+        selectPipe(pipeId, event.ctrlKey || event.metaKey);
+      }
+      onPipeClick?.(pipeId);
+    },
+    [selectionEnabled, selectPipe, onPipeClick]
+  );
   const handleCanvasClick = (e) => {
     const target = e.target;
     if (target.closest(".pipe-route-point")) {
@@ -6982,6 +7010,7 @@ function PIDCanvas({
     }
   );
 }
+var PIDCanvas = React13.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
 import { useState as useState15 } from "react";