@procaaso/alphinity-ui-components 1.0.5 → 1.0.6

package/dist/index.d.cts

@@ -1106,11 +1106,30 @@ declare const exampleDiagram: Diagram;
  */
 declare const mockSymbolLibrary: Record<string, SymbolDefinition>;
 /**
- * Get symbol definition by ID
+ * Register a custom symbol definition
+ * @param symbol - The symbol definition to register
+ * @example
+ * registerSymbol({
+ *   id: 'my-custom-valve',
+ *   name: 'My Custom Valve',
+ *   category: 'valve',
+ *   viewBox: { x: 0, y: 0, width: 100, height: 100 },
+ *   ports: [...],
+ *   svgContent: '...',
+ * });
+ */
+declare function registerSymbol(symbol: SymbolDefinition): void;
+/**
+ * Register multiple custom symbols at once
+ * @param symbols - Array of symbol definitions or a record of symbols
+ */
+declare function registerSymbols(symbols: SymbolDefinition[] | Record<string, SymbolDefinition>): void;
+/**
+ * Get symbol definition by ID (checks both mock library and custom symbols)
  */
 declare function getSymbolDefinition(symbolId: string): SymbolDefinition | undefined;
 /**
- * Get all available symbol IDs
+ * Get all available symbol IDs (includes both mock library and custom symbols)
  */
 declare function getAvailableSymbols(): string[];
 
@@ -1177,4 +1196,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.d.ts

@@ -1106,11 +1106,30 @@ declare const exampleDiagram: Diagram;
  */
 declare const mockSymbolLibrary: Record<string, SymbolDefinition>;
 /**
- * Get symbol definition by ID
+ * Register a custom symbol definition
+ * @param symbol - The symbol definition to register
+ * @example
+ * registerSymbol({
+ *   id: 'my-custom-valve',
+ *   name: 'My Custom Valve',
+ *   category: 'valve',
+ *   viewBox: { x: 0, y: 0, width: 100, height: 100 },
+ *   ports: [...],
+ *   svgContent: '...',
+ * });
+ */
+declare function registerSymbol(symbol: SymbolDefinition): void;
+/**
+ * Register multiple custom symbols at once
+ * @param symbols - Array of symbol definitions or a record of symbols
+ */
+declare function registerSymbols(symbols: SymbolDefinition[] | Record<string, SymbolDefinition>): void;
+/**
+ * Get symbol definition by ID (checks both mock library and custom symbols)
  */
 declare function getSymbolDefinition(symbolId: string): SymbolDefinition | undefined;
 /**
- * Get all available symbol IDs
+ * Get all available symbol IDs (includes both mock library and custom symbols)
  */
 declare function getAvailableSymbols(): string[];
 
@@ -1177,4 +1196,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.js

@@ -1702,13 +1702,13 @@ var mockSymbolLibrary = {
     id: "valve-gate",
     name: "Gate Valve (Powered)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 52, height: 52 },
+    viewBox: { x: 0, y: 0, width: 26, height: 26 },
     ports: [
-      { id: "inlet", x: 0, y: 36, type: "inlet", direction: "in" },
-      { id: "outlet", x: 52, y: 36, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 18, type: "inlet", direction: "in" },
+      { id: "outlet", x: 26, y: 18, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Actuator box -->
         <rect x="16.74" y="0" width="18.02" height="18.02" fill="var(--symbol-fill, #edeeef)" stroke="var(--symbol-stroke, #666666)" pointer-events="all"/>
         <!-- Actuator stem -->
@@ -1726,13 +1726,13 @@ var mockSymbolLibrary = {
     id: "pump-positive-displacement",
     name: "Positive Displacement Pump",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 56.25, height: 56.25 },
+    viewBox: { x: 0, y: 0, width: 28.125, height: 28.125 },
     ports: [
-      { id: "inlet", x: 0, y: 28.125, type: "inlet", direction: "in" },
-      { id: "outlet", x: 56.25, y: 28.125, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 14.0625, type: "inlet", direction: "in" },
+      { id: "outlet", x: 28.125, y: 14.0625, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g transform="scale(0.5625)">
+      <g transform="scale(0.28125)">
         <!-- Outer circle -->
         <ellipse 
           cx="50" 
@@ -1774,13 +1774,13 @@ var mockSymbolLibrary = {
     id: "vannefold-bottom",
     name: "Vannefold Block (Bottom)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 88, height: 67.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 44, height: 33.892578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 25, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 65, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 12.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 32.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,29.785156 H 0 v -10 h 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16"
@@ -1838,13 +1838,13 @@ var mockSymbolLibrary = {
     id: "vannefold-middle",
     name: "Vannefold Block (Middle)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 53.097656 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 26.548828 },
     ports: [
-      { id: "left-inlet", x: 0, y: 27.3125, type: "control", direction: "in" },
-      { id: "right-outlet", x: 95, y: 27.3125, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 13.65625, type: "control", direction: "in" },
+      { id: "right-outlet", x: 47.5, y: 13.65625, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe -->
         <path 
           d="M 3,22.3125 H 0 v 10 H 3 m 14,-10 h 3 v 10 h -3 m -15,-8 h 16 m -16,6 h 16"
@@ -1893,13 +1893,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top",
     name: "Vannefold Block (Top)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 60.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 30.392578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 35, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 0, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 17.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 0, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,30 H 0 V 40 H 3 M 17,30 h 3 V 40 H 17 M 2,32 H 18 M 2,38 H 18"
@@ -1949,13 +1949,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top-top-inlet",
     name: "Vannefold Block (Top, Top Inlet)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 88, height: 67.576004 },
+    viewBox: { x: 0, y: 0, width: 44, height: 33.788002 },
     ports: [
-      { id: "top-inlet", x: 47, y: 0, type: "control", direction: "in" },
-      { id: "bottom-outlet", x: 0, y: 42, type: "control", direction: "out" }
+      { id: "top-inlet", x: 23.5, y: 0, type: "control", direction: "in" },
+      { id: "bottom-outlet", x: 0, y: 21, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Top inlet pipe flange -->
         <path 
           d="M 52,3 V 1.3598666e-8 H 42 V 3 m 10,14 v 3 H 42 V 17 M 50,2 V 18 M 44,2 v 16" 
@@ -2013,13 +2013,13 @@ var mockSymbolLibrary = {
     id: "vannefold-left",
     name: "Vannefold Block (Left)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "left-inlet", x: 0, y: 41.5, type: "control", direction: "in" },
-      { id: "right-outlet", x: 42, y: 87, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 20.75, type: "control", direction: "in" },
+      { id: "right-outlet", x: 21, y: 43.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe flange -->
         <path 
           d="M 3,46.5 H 2.8789924e-8 v -10 H 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16" 
@@ -2076,13 +2076,13 @@ var mockSymbolLibrary = {
     id: "vannefold-right",
     name: "Vannefold Block (Right)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "right-inlet", x: 67.785156, y: 41.5, type: "control", direction: "in" },
-      { id: "left-outlet", x: 24.785156, y: 87.5, type: "control", direction: "out" }
+      { id: "right-inlet", x: 33.892578, y: 20.75, type: "control", direction: "in" },
+      { id: "left-outlet", x: 12.392578, y: 43.75, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Right inlet pipe flange -->
         <path 
           d="m 63.785156,46.5 h 3 v -10 h -3 m -14,10 h -3 v -10 h 3 m 15,8 h -16 m 16,-6 h -16" 
@@ -2139,16 +2139,16 @@ var mockSymbolLibrary = {
     id: "pixer",
     name: "Pixer",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Top mounting flange -->
         <rect 
           width="141.313" 
@@ -2413,16 +2413,16 @@ var mockSymbolLibrary = {
     id: "pixer-barb",
     name: "Pixer (Hose Barb)",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Hose barb ridges at top -->
         <rect 
           width="20" 
@@ -2704,15 +2704,15 @@ var mockSymbolLibrary = {
     id: "vessel-balloon",
     name: "Vessel",
     category: "vessel",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 91 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 45.5 },
     ports: [
-      { id: "top", type: "inlet", x: 25.3125, y: 0 },
-      { id: "left", type: "inlet", x: 5, y: 39 },
-      { id: "right", type: "outlet", x: 45.625, y: 39 },
-      { id: "bottom", type: "outlet", x: 25.3125, y: 91 }
+      { id: "top", type: "inlet", x: 12.65625, y: 0 },
+      { id: "left", type: "inlet", x: 2.5, y: 19.5 },
+      { id: "right", type: "outlet", x: 22.8125, y: 19.5 },
+      { id: "bottom", type: "outlet", x: 12.65625, y: 45.5 }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -100)">
+      <g transform="scale(0.0984375) translate(-195, -100)">
         <!-- Top opening nozzle -->
         <rect 
           width="65" 
@@ -2777,19 +2777,53 @@ var mockSymbolLibrary = {
       tags: ["vessel", "storage", "tank", "balloon"]
     }
   },
+  "hollow-fiber": {
+    id: "hollow-fiber",
+    name: "Hollow Fiber",
+    category: "other",
+    viewBox: { x: 0, y: 0, width: 30, height: 109 },
+    ports: [
+      { id: "top-left", type: "outlet", x: 10, y: 2.75 },
+      { id: "top-right", type: "outlet", x: 24.5, y: 22.25 },
+      { id: "bottom-left", type: "inlet", x: 10, y: 106.25 },
+      { id: "bottom-right", type: "inlet", x: 24.5, y: 87.25 }
+    ],
+    svgContent: `
+      <g transform="scale(0.5)">
+        <!-- Top left flange -->
+        <rect x="10.5" y="0.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Top right flange -->
+        <rect x="39.5" y="39.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom left flange -->
+        <rect x="10.5" y="207.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom right flange -->
+        <rect x="39.5" y="169.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Main vessel body -->
+        <rect x="0.5" y="9.5" width="40" height="199.5" rx="6" ry="6" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+      </g>
+    `,
+    metadata: {
+      description: "Hollow fiber filter module with multiple inlet/outlet connections",
+      tags: ["filter", "hollow-fiber", "filtration", "separation", "membrane"]
+    }
+  },
   "psr-f": {
     id: "psr-f",
     name: "PSR F",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2823,15 +2857,15 @@ var mockSymbolLibrary = {
     id: "psr-p",
     name: "PSR P",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2862,11 +2896,22 @@ var mockSymbolLibrary = {
     }
   }
 };
+var customSymbols = {};
+function registerSymbol(symbol) {
+  customSymbols[symbol.id] = symbol;
+}
+function registerSymbols(symbols) {
+  if (Array.isArray(symbols)) {
+    symbols.forEach((symbol) => registerSymbol(symbol));
+  } else {
+    Object.values(symbols).forEach((symbol) => registerSymbol(symbol));
+  }
+}
 function getSymbolDefinition(symbolId) {
-  return mockSymbolLibrary[symbolId];
+  return customSymbols[symbolId] ?? mockSymbolLibrary[symbolId];
 }
 function getAvailableSymbols() {
-  return Object.keys(mockSymbolLibrary);
+  return [...Object.keys(customSymbols), ...Object.keys(mockSymbolLibrary)];
 }
 
 // src/components/PIDCanvas/NodeRenderer.tsx
@@ -6495,6 +6540,8 @@ export {
   mockSymbolLibrary,
   nodeHasPort,
   overlayStyles,
+  registerSymbol,
+  registerSymbols,
   useDrag,
   useKeyboardShortcuts,
   useSelection,