@procaaso/alphinity-ui-components 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -189,6 +189,290 @@ interface LegacyValueEntryProps extends Omit<react__default.InputHTMLAttributes<
 }
 declare const LegacyValueEntry: react__default.FC<LegacyValueEntryProps>;
 
+interface NodeControlConfig {
+    /** Node ID */
+    nodeId: string;
+    /** Display title for the control panel */
+    title: string;
+    /** Available mode options */
+    modes: SelectorOption[];
+    /** Current selected mode */
+    currentMode: string;
+    /** Callback when mode changes */
+    onModeChange: (mode: string) => void;
+    /** Current setpoint value */
+    setpoint: number | string;
+    /** Callback when setpoint changes */
+    onSetpointChange: (value: number | string) => void;
+    /** Optional second setpoint value */
+    secondSetpoint?: number | string;
+    /** Callback for second setpoint */
+    onSecondSetpointChange?: (value: number | string) => void;
+    /** Configuration for each mode */
+    modeConfigs?: Record<string, ModeConfig>;
+    /** Whether device is currently running */
+    isRunning?: boolean;
+    /** Start command handler */
+    onStart?: () => void;
+    /** Stop command handler */
+    onStop?: () => void;
+    /** Custom start button text */
+    startButtonText?: string;
+    /** Custom stop button text */
+    stopButtonText?: string;
+    /** Current status */
+    status?: 'normal' | 'alarm' | 'warning' | 'disabled';
+    /** Whether setpoint is read-only */
+    readOnly?: boolean;
+}
+interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivElement> {
+    /** Control configuration for the selected node */
+    config: NodeControlConfig | null;
+    /** Callback to close the panel */
+    onClose: () => void;
+    /** Panel position - bottom (mobile) or side (desktop/large touch screens) */
+    position?: 'bottom' | 'side';
+    /** Whether to show in touch-optimized mode (larger targets) */
+    touchOptimized?: boolean;
+}
+/**
+ * NodeControlsPanel - Touch-friendly slide-out panel for device manual controls
+ *
+ * Optimized for industrial touch screens with:
+ * - Large touch targets (minimum 44px)
+ * - Single-tap interactions
+ * - Clear visual feedback
+ * - Bottom or side slide-in animation
+ */
+declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
+
+/**
+ * Device control mode option
+ */
+interface ControlMode {
+    /** Mode value/ID */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Whether this mode is currently available */
+    enabled?: boolean;
+    /** Icon or emoji to display (optional) */
+    icon?: string;
+}
+/**
+ * Control parameter definition (setpoint, adjustment, etc.)
+ */
+interface ControlParameter {
+    /** Parameter ID */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Unit of measurement */
+    unit?: string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Decimal precision for display */
+    precision?: number;
+    /** Current value */
+    value: number | string | boolean;
+    /** Whether parameter is read-only */
+    readOnly?: boolean;
+    /** Parameter type */
+    type?: 'number' | 'string' | 'boolean' | 'select';
+    /** Options for select type */
+    options?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Custom validation function */
+    validate?: (value: any) => boolean | string;
+}
+/**
+ * Device control capabilities and commands
+ */
+interface ControlCapabilities {
+    /** Can the device be started? */
+    canStart?: boolean;
+    /** Can the device be stopped? */
+    canStop?: boolean;
+    /** Can the device be paused? */
+    canPause?: boolean;
+    /** Can the device be reset? */
+    canReset?: boolean;
+    /** Custom actions available */
+    customActions?: Array<{
+        id: string;
+        label: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    }>;
+}
+/**
+ * Device control state
+ */
+interface ControlState {
+    /** Current operational mode */
+    currentMode: string;
+    /** Is device currently running? */
+    isRunning?: boolean;
+    /** Is device in alarm state? */
+    hasAlarm?: boolean;
+    /** Current status */
+    status?: 'normal' | 'warning' | 'alarm' | 'fault' | 'off' | 'starting' | 'stopping';
+    /** Status message */
+    statusMessage?: string;
+    /** Last command timestamp */
+    lastCommandTime?: number;
+    /** Last command result */
+    lastCommandResult?: {
+        success: boolean;
+        message?: string;
+    };
+}
+/**
+ * Device control binding - maps a node to device control capabilities
+ *
+ * Similar to TelemetryBinding but for device commands and setpoints
+ */
+interface DeviceControlBinding {
+    /** Node ID this control is bound to */
+    nodeId: string;
+    /** Device tag/ID for backend communication */
+    tag: string;
+    /** Human-readable device name */
+    deviceName?: string;
+    /** Device type (pump, valve, mixer, etc.) */
+    deviceType?: string;
+    /** Available control modes */
+    modes: ControlMode[];
+    /** Current device state */
+    state: ControlState;
+    /** Control parameters (setpoints, adjustments) organized by mode */
+    parameters: Record<string, ControlParameter[]>;
+    /** Device capabilities (what commands are available) */
+    capabilities?: ControlCapabilities;
+    /** Callbacks for control actions */
+    actions: {
+        /** Called when mode changes */
+        onModeChange?: (mode: string) => void | Promise<void>;
+        /** Called when parameter value changes */
+        onParameterChange?: (parameterId: string, value: any) => void | Promise<void>;
+        /** Called when start button clicked */
+        onStart?: () => void | Promise<void>;
+        /** Called when stop button clicked */
+        onStop?: () => void | Promise<void>;
+        /** Called when pause button clicked */
+        onPause?: () => void | Promise<void>;
+        /** Called when reset button clicked */
+        onReset?: () => void | Promise<void>;
+        /** Called for custom actions */
+        onCustomAction?: (actionId: string) => void | Promise<void>;
+    };
+    /** Display customization */
+    display?: {
+        /** Panel title (defaults to deviceName or nodeId) */
+        title?: string;
+        /** Show mode selector */
+        showModeSelector?: boolean;
+        /** Show start/stop buttons */
+        showStartStop?: boolean;
+        /** Panel size */
+        size?: 'small' | 'medium' | 'large';
+        /** Custom CSS class name */
+        className?: string;
+        /** Custom inline styles */
+        style?: React.CSSProperties;
+        /** Group parameters by category */
+        groupParameters?: boolean;
+    };
+    /** Styling overrides */
+    theme?: {
+        /** Primary color */
+        primaryColor?: string;
+        /** Secondary color */
+        secondaryColor?: string;
+        /** Accent color */
+        accentColor?: string;
+        /** Background color */
+        backgroundColor?: string;
+        /** Text color */
+        textColor?: string;
+        /** Status colors */
+        statusColors?: {
+            normal?: string;
+            warning?: string;
+            alarm?: string;
+            fault?: string;
+            off?: string;
+            starting?: string;
+            stopping?: string;
+        };
+    };
+}
+/**
+ * Map of device control bindings by node ID
+ */
+type DeviceControlMap = Map<string, DeviceControlBinding>;
+/**
+ * Helper to create a control binding from backend device configuration
+ */
+declare function createControlBinding(nodeId: string, deviceConfig: {
+    tag: string;
+    name?: string;
+    type?: string;
+    modes: Array<{
+        value: string;
+        label: string;
+        enabled?: boolean;
+    }>;
+    currentMode: string;
+    parameters: Array<{
+        id: string;
+        label: string;
+        unit?: string;
+        min?: number;
+        max?: number;
+        value: any;
+        modes?: string[];
+    }>;
+    capabilities?: {
+        canStart?: boolean;
+        canStop?: boolean;
+        customActions?: Array<{
+            id: string;
+            label: string;
+        }>;
+    };
+    status?: string;
+    isRunning?: boolean;
+}, actions: DeviceControlBinding['actions']): DeviceControlBinding;
+
+interface DeviceControlPanelProps {
+    /** Control binding to display */
+    binding: DeviceControlBinding | null;
+    /** Called when panel should close */
+    onClose: () => void;
+    /** Panel position */
+    position?: 'bottom' | 'side';
+    /** Optimize for touch (larger targets) */
+    touchOptimized?: boolean;
+    /** Called when mode changes */
+    onModeChange?: (mode: string) => void;
+    /** Called when parameter changes */
+    onParameterChange?: (parameterId: string, value: any) => void;
+    /** Called when start button clicked */
+    onStart?: () => void;
+    /** Called when stop button clicked */
+    onStop?: () => void;
+    /** Called when custom action clicked */
+    onCustomAction?: (actionId: string) => void;
+}
+declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {
     leftCollapsed: boolean;
@@ -1106,11 +1390,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[];
 
@@ -1139,6 +1442,26 @@ declare function calculateThresholdStatus(value: number, thresholds?: Thresholds
  */
 declare const DEFAULT_THRESHOLDS: Thresholds;
 
+/**
+ * Hook for managing device control bindings
+ * Similar pattern to useTelemetry
+ */
+declare function useDeviceControls(initialBindings?: DeviceControlBinding[]): {
+    controls: DeviceControlMap;
+    updateControl: (nodeId: string, updates: Partial<DeviceControlBinding>) => void;
+    updateControlBatch: (updates: Record<string, Partial<DeviceControlBinding>>) => void;
+    updateDeviceState: (nodeId: string, stateUpdates: Partial<DeviceControlBinding["state"]>) => void;
+    updateParameter: (nodeId: string, parameterId: string, value: any) => void;
+    setControlBinding: (binding: DeviceControlBinding) => void;
+    removeControlBinding: (nodeId: string) => void;
+    getControlBinding: (nodeId: string) => DeviceControlBinding | undefined;
+    sendModeChange: (nodeId: string, mode: string) => Promise<void>;
+    sendParameterChange: (nodeId: string, parameterId: string, value: any) => Promise<void>;
+    sendStartCommand: (nodeId: string) => Promise<void>;
+    sendStopCommand: (nodeId: string) => Promise<void>;
+    sendCustomAction: (nodeId: string, actionId: string) => Promise<void>;
+};
+
 /**
  * Options for simulation behavior
  */
@@ -1177,4 +1500,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, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, 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 NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, 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, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };