@procaaso/alphinity-ui-components 1.8.1 → 1.8.3

package/dist/index.d.cts

@@ -662,7 +662,16 @@ interface DeviceControlPanelProps {
     /** Embedded mode - uses static positioning for rendering in containers (default: false) */
     embedded?: boolean;
 }
-declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onParameterActivate, onStart, onStop, startPending, stopPending, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Memoized below (kiosk heap-leak fix, same rationale as DeviceConfigPanel):
+ * an OPEN control panel must not re-render on host ticks whose props did not
+ * change. Unlike the config panel, a control binding legitimately changes when
+ * its live values move, so the memo bails only on genuinely idle ticks - the
+ * win is proportional to how often values are flat at display precision.
+ */
+declare function DeviceControlPanelImpl({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onParameterActivate, onStart, onStop, startPending, stopPending, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+/** Memo boundary - see DeviceControlPanelImpl doc comment (kiosk heap-leak fix). */
+declare const DeviceControlPanel: React__default.MemoExoticComponent<typeof DeviceControlPanelImpl>;
 
 interface NumpadDialogProps {
     /** Whether the dialog is open */
@@ -1481,9 +1490,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 */
@@ -1957,7 +1979,19 @@ interface DeviceConfigPanelProps {
     /** Embedded mode - uses static positioning for rendering in containers (default: false) */
     embedded?: boolean;
 }
-declare function DeviceConfigPanel({ binding, onClose, onUndock, undockIcon, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onOpenControls, showControlsButton, embedded, }: DeviceConfigPanelProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Memoized below (kiosk heap-leak fix): a host whose screen re-renders ~1Hz on
+ * telemetry must not re-render an OPEN config panel every tick - each pass
+ * re-creates the panel's handler closures and re-binds its MUI event handlers,
+ * and on the kiosk those generations were RETAINED (~100 closures/sec,
+ * ~2.1 MB/min heap growth -> renderer OOM at the 512 MB cap, heap-snapshot
+ * fingerprint: Context/scope buckets + onSave/onReset closures). The memo only
+ * pays off when the host passes identity-stable `binding` and handler props;
+ * an unstable host degrades gracefully to the old behavior.
+ */
+declare function DeviceConfigPanelImpl({ binding, onClose, onUndock, undockIcon, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onOpenControls, showControlsButton, embedded, }: DeviceConfigPanelProps): react_jsx_runtime.JSX.Element | null;
+/** Memo boundary - see DeviceConfigPanelImpl doc comment (kiosk heap-leak fix). */
+declare const DeviceConfigPanel: React__default.MemoExoticComponent<typeof DeviceConfigPanelImpl>;
 
 /**
  * Options for simulation behavior

package/dist/index.d.ts

@@ -662,7 +662,16 @@ interface DeviceControlPanelProps {
     /** Embedded mode - uses static positioning for rendering in containers (default: false) */
     embedded?: boolean;
 }
-declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onParameterActivate, onStart, onStop, startPending, stopPending, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Memoized below (kiosk heap-leak fix, same rationale as DeviceConfigPanel):
+ * an OPEN control panel must not re-render on host ticks whose props did not
+ * change. Unlike the config panel, a control binding legitimately changes when
+ * its live values move, so the memo bails only on genuinely idle ticks - the
+ * win is proportional to how often values are flat at display precision.
+ */
+declare function DeviceControlPanelImpl({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onParameterActivate, onStart, onStop, startPending, stopPending, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+/** Memo boundary - see DeviceControlPanelImpl doc comment (kiosk heap-leak fix). */
+declare const DeviceControlPanel: React__default.MemoExoticComponent<typeof DeviceControlPanelImpl>;
 
 interface NumpadDialogProps {
     /** Whether the dialog is open */
@@ -1481,9 +1490,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 */
@@ -1957,7 +1979,19 @@ interface DeviceConfigPanelProps {
     /** Embedded mode - uses static positioning for rendering in containers (default: false) */
     embedded?: boolean;
 }
-declare function DeviceConfigPanel({ binding, onClose, onUndock, undockIcon, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onOpenControls, showControlsButton, embedded, }: DeviceConfigPanelProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Memoized below (kiosk heap-leak fix): a host whose screen re-renders ~1Hz on
+ * telemetry must not re-render an OPEN config panel every tick - each pass
+ * re-creates the panel's handler closures and re-binds its MUI event handlers,
+ * and on the kiosk those generations were RETAINED (~100 closures/sec,
+ * ~2.1 MB/min heap growth -> renderer OOM at the 512 MB cap, heap-snapshot
+ * fingerprint: Context/scope buckets + onSave/onReset closures). The memo only
+ * pays off when the host passes identity-stable `binding` and handler props;
+ * an unstable host degrades gracefully to the old behavior.
+ */
+declare function DeviceConfigPanelImpl({ binding, onClose, onUndock, undockIcon, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onOpenControls, showControlsButton, embedded, }: DeviceConfigPanelProps): react_jsx_runtime.JSX.Element | null;
+/** Memo boundary - see DeviceConfigPanelImpl doc comment (kiosk heap-leak fix). */
+declare const DeviceConfigPanel: React__default.MemoExoticComponent<typeof DeviceConfigPanelImpl>;
 
 /**
  * Options for simulation behavior

package/dist/index.js

@@ -895,7 +895,7 @@ var NodeControlsPanel = ({
 };
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
-import { useState as useState5, useEffect as useEffect2 } from "react";
+import React5, { useState as useState5, useEffect as useEffect2 } from "react";
 
 // src/theme/statusColors.ts
 var DEFAULT_STATUS_COLORS = {
@@ -922,7 +922,7 @@ function resolveStatusColor(status, customMap) {
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function DeviceControlPanel({
+function DeviceControlPanelImpl({
   binding,
   onClose,
   position = "bottom",
@@ -1847,6 +1847,7 @@ function DeviceControlPanel({
       ` })
   ] });
 }
+var DeviceControlPanel = React5.memo(DeviceControlPanelImpl);
 
 // src/components/NumpadDialog/NumpadDialog.tsx
 import { useState as useState6, useEffect as useEffect3, useCallback as useCallback3, useRef as useRef2, useId } from "react";
@@ -3278,7 +3279,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 +4504,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 +4650,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 +4832,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 +4861,7 @@ function renderStatusDot(cx, cy, scale, fill) {
     }
   );
 }
-function DataOverlay({
+function DataOverlayImpl({
   nodeId,
   x,
   y,
@@ -4873,6 +4881,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 +4918,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 +4997,7 @@ function DataOverlay({
     ) })
   ] });
 }
+var DataOverlay = React11.memo(DataOverlayImpl);
 
 // src/components/PIDCanvas/PositionPanel.tsx
 import { useState as useState9, useEffect as useEffect6 } from "react";
@@ -6117,18 +6126,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 +6599,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 +7011,7 @@ function PIDCanvas({
     }
   );
 }
+var PIDCanvas = React13.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
 import { useState as useState15 } from "react";
@@ -8561,9 +8591,9 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-import { useState as useState18, useEffect as useEffect13, useMemo, useRef as useRef8 } from "react";
+import React15, { useState as useState18, useEffect as useEffect13, useMemo, useRef as useRef8 } from "react";
 import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-function DeviceConfigPanel({
+function DeviceConfigPanelImpl({
   binding,
   onClose,
   onUndock,
@@ -9265,6 +9295,7 @@ function DeviceConfigPanel({
     )
   ] });
 }
+var DeviceConfigPanel = React15.memo(DeviceConfigPanelImpl);
 
 // src/diagram/hooks/useSimulation.ts
 import { useEffect as useEffect14 } from "react";