@procaaso/alphinity-ui-components 1.0.11 → 1.1.0

package/dist/index.d.cts

@@ -274,6 +274,8 @@ interface ControlMode {
     value: string;
     /** Display label */
     label: string;
+    /** Description or context about this mode */
+    description?: string;
     /** Whether this mode is currently available */
     enabled?: boolean;
     /** Icon or emoji to display (optional) */
@@ -486,8 +488,20 @@ interface DeviceControlPanelProps {
     onStop?: () => void;
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
-}
-declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+    /** Called when config button clicked (opens config panel for this device) */
+    onOpenConfig?: () => void;
+    /** Show configuration button in header */
+    showConfigButton?: boolean;
+    /** Called when undock button clicked (optional, shows undock button if provided) */
+    onUndock?: () => void;
+    /** Icon to display in undock button (default: '⇱') */
+    undockIcon?: string;
+    /** Style for mode selector: 'buttons' (horizontal scroll), 'dropdown' (select), or 'modal' (click to open modal) */
+    modeSelectionStyle?: 'buttons' | 'dropdown' | 'modal';
+    /** 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, onStart, onStop, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {
@@ -1478,6 +1492,286 @@ declare function useDeviceControls(initialBindings?: DeviceControlBinding[]): {
     sendCustomAction: (nodeId: string, actionId: string) => Promise<void>;
 };
 
+/**
+ * Configuration parameter definition
+ */
+interface ConfigParameter {
+    /** Parameter ID */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Parameter description/help text */
+    description?: string;
+    /** Unit of measurement */
+    unit?: string;
+    /** Parameter type */
+    type: 'number' | 'string' | 'boolean' | 'select' | 'multiselect';
+    /** Current value */
+    value: any;
+    /** Default value */
+    defaultValue?: any;
+    /** Whether parameter is read-only */
+    readOnly?: boolean;
+    /** Whether parameter is enabled/editable */
+    enabled?: boolean;
+    /** Minimum allowed value (for number type) */
+    min?: number;
+    /** Maximum allowed value (for number type) */
+    max?: number;
+    /** Step increment (for number type) */
+    step?: number;
+    /** Decimal precision for display (for number type) */
+    precision?: number;
+    /** Options for select/multiselect type */
+    options?: Array<{
+        value: any;
+        label: string;
+        description?: string;
+    }>;
+    /** Custom validation function - returns true or error message */
+    validate?: (value: any) => boolean | string;
+    /** Required field */
+    required?: boolean;
+    /** Section this parameter belongs to */
+    section?: string;
+    /** Display order within section */
+    order?: number;
+    /** Parameter IDs this depends on - if any are disabled, this is disabled */
+    dependsOn?: string[];
+    /** Conditional visibility - function that determines if parameter should be shown */
+    visibleWhen?: (allValues: Record<string, any>) => boolean;
+}
+/**
+ * Configuration section for grouping parameters
+ */
+interface ConfigSection {
+    /** Section ID */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Section description */
+    description?: string;
+    /** Display order */
+    order?: number;
+    /** Whether section is collapsible */
+    collapsible?: boolean;
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+    /** Icon to display */
+    icon?: string;
+}
+/**
+ * Configuration state tracking
+ */
+interface ConfigState {
+    /** Has unsaved changes */
+    isDirty?: boolean;
+    /** Currently saving */
+    isSaving?: boolean;
+    /** Last save timestamp */
+    lastSaved?: number;
+    /** Last save result */
+    lastSaveResult?: {
+        success: boolean;
+        message?: string;
+    };
+    /** Validation errors */
+    errors?: Record<string, string>;
+}
+/**
+ * Configuration actions/handlers
+ */
+interface ConfigActions {
+    /** Handler for applying changes (temporary, may be reverted) */
+    onApply?: (values: Record<string, any>) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for saving changes (permanent) */
+    onSave?: (values: Record<string, any>) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for resetting to defaults */
+    onReset?: () => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for canceling changes */
+    onCancel?: () => void;
+    /** Handler for exporting configuration */
+    onExport?: () => Promise<{
+        success: boolean;
+        data?: any;
+        message?: string;
+    }>;
+    /** Handler for importing configuration */
+    onImport?: (data: any) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+}
+/**
+ * Display configuration
+ */
+interface ConfigDisplay {
+    /** Panel title */
+    title?: string;
+    /** Panel subtitle */
+    subtitle?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Show apply button */
+    showApply?: boolean;
+    /** Show save button */
+    showSave?: boolean;
+    /** Show reset button */
+    showReset?: boolean;
+    /** Show cancel button */
+    showCancel?: boolean;
+    /** Show export button */
+    showExport?: boolean;
+    /** Show import button */
+    showImport?: boolean;
+    /** Confirmation message for reset action */
+    resetConfirmMessage?: string;
+    /** Confirmation message for critical saves */
+    saveConfirmMessage?: string;
+}
+/**
+ * Theme customization for config panel
+ */
+interface ConfigTheme {
+    /** Background color */
+    backgroundColor?: string;
+    /** Surface/card color */
+    surfaceColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Muted text color */
+    mutedTextColor?: string;
+    /** Accent color */
+    accentColor?: string;
+    /** Error color */
+    errorColor?: string;
+    /** Success color */
+    successColor?: string;
+    /** Warning color */
+    warningColor?: string;
+}
+/**
+ * Device configuration binding - maps a node to device configuration parameters
+ */
+interface DeviceConfigBinding {
+    /** Node ID this configuration is bound to */
+    nodeId: string;
+    /** Device tag/identifier */
+    tag: string;
+    /** Device name */
+    deviceName?: string;
+    /** Device type */
+    deviceType?: string;
+    /** Configuration sections */
+    sections?: ConfigSection[];
+    /** Configuration parameters (flat list, optionally grouped by section) */
+    parameters: ConfigParameter[];
+    /** Current state */
+    state: ConfigState;
+    /** Available actions */
+    actions: ConfigActions;
+    /** Display configuration */
+    display?: ConfigDisplay;
+    /** Theme customization */
+    theme?: ConfigTheme;
+    /** Additional metadata */
+    metadata?: Record<string, any>;
+}
+/**
+ * Map of device configurations by node ID
+ */
+type DeviceConfigMap = Map<string, DeviceConfigBinding>;
+/**
+ * Helper to create a config binding with defaults
+ */
+declare function createConfigBinding(nodeId: string, tag: string, parameters: ConfigParameter[], actions: ConfigActions, options?: {
+    deviceName?: string;
+    deviceType?: string;
+    sections?: ConfigSection[];
+    display?: ConfigDisplay;
+    theme?: ConfigTheme;
+    metadata?: Record<string, any>;
+}): DeviceConfigBinding;
+
+/**
+ * Hook for managing device configuration bindings
+ */
+declare function useDeviceConfigs(initialConfigs?: DeviceConfigBinding[]): {
+    configs: DeviceConfigMap;
+    getConfig: (nodeId: string) => DeviceConfigBinding | undefined;
+    setConfig: (config: DeviceConfigBinding) => void;
+    removeConfig: (nodeId: string) => void;
+    clearConfigs: () => void;
+    updateConfig: (nodeId: string, updates: Partial<DeviceConfigBinding>) => void;
+    updateConfigState: (nodeId: string, stateUpdates: Partial<DeviceConfigBinding["state"]>) => void;
+    updateConfigBatch: (updates: Record<string, Partial<DeviceConfigBinding>>) => void;
+    updateParameterValue: (nodeId: string, parameterId: string, value: any) => void;
+    applyConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    saveConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    resetConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    cancelConfig: (nodeId: string) => void;
+    validateConfig: (nodeId: string) => {
+        valid: boolean;
+        errors: Record<string, string>;
+    };
+};
+
+interface DeviceConfigPanelProps {
+    /** Configuration binding to display */
+    binding: DeviceConfigBinding | null;
+    /** Called when panel should close */
+    onClose: () => void;
+    /** Called when undock button clicked (optional, shows undock button if provided) */
+    onUndock?: () => void;
+    /** Icon to display in undock button (default: '⇱') */
+    undockIcon?: string;
+    /** Panel position */
+    position?: 'bottom' | 'side';
+    /** Horizontal alignment for bottom position (default: center) */
+    align?: 'left' | 'center' | 'right';
+    /** Optimize for touch (larger targets) */
+    touchOptimized?: boolean;
+    /** Compact mode - reduces padding and spacing */
+    compact?: boolean;
+    /** Font size scale (default: 1.0) */
+    fontScale?: number;
+    /** Maximum height for bottom position (default: 70vh) */
+    maxHeight?: string;
+    /** Maximum width for bottom position (default: none) */
+    maxWidth?: string;
+    /** Toast notification duration in milliseconds (default: 3000) */
+    toastDuration?: number;
+    /** Called when controls button clicked (opens control panel for this device) */
+    onOpenControls?: () => void;
+    /** Show controls button in header */
+    showControlsButton?: boolean;
+    /** 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;
+
 /**
  * Options for simulation behavior
  */
@@ -1516,4 +1810,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, 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 };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, 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, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.d.ts

@@ -274,6 +274,8 @@ interface ControlMode {
     value: string;
     /** Display label */
     label: string;
+    /** Description or context about this mode */
+    description?: string;
     /** Whether this mode is currently available */
     enabled?: boolean;
     /** Icon or emoji to display (optional) */
@@ -486,8 +488,20 @@ interface DeviceControlPanelProps {
     onStop?: () => void;
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
-}
-declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, toastDuration, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+    /** Called when config button clicked (opens config panel for this device) */
+    onOpenConfig?: () => void;
+    /** Show configuration button in header */
+    showConfigButton?: boolean;
+    /** Called when undock button clicked (optional, shows undock button if provided) */
+    onUndock?: () => void;
+    /** Icon to display in undock button (default: '⇱') */
+    undockIcon?: string;
+    /** Style for mode selector: 'buttons' (horizontal scroll), 'dropdown' (select), or 'modal' (click to open modal) */
+    modeSelectionStyle?: 'buttons' | 'dropdown' | 'modal';
+    /** 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, onStart, onStop, onCustomAction, onOpenConfig, showConfigButton, onUndock, undockIcon, modeSelectionStyle, embedded, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {
@@ -1478,6 +1492,286 @@ declare function useDeviceControls(initialBindings?: DeviceControlBinding[]): {
     sendCustomAction: (nodeId: string, actionId: string) => Promise<void>;
 };
 
+/**
+ * Configuration parameter definition
+ */
+interface ConfigParameter {
+    /** Parameter ID */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Parameter description/help text */
+    description?: string;
+    /** Unit of measurement */
+    unit?: string;
+    /** Parameter type */
+    type: 'number' | 'string' | 'boolean' | 'select' | 'multiselect';
+    /** Current value */
+    value: any;
+    /** Default value */
+    defaultValue?: any;
+    /** Whether parameter is read-only */
+    readOnly?: boolean;
+    /** Whether parameter is enabled/editable */
+    enabled?: boolean;
+    /** Minimum allowed value (for number type) */
+    min?: number;
+    /** Maximum allowed value (for number type) */
+    max?: number;
+    /** Step increment (for number type) */
+    step?: number;
+    /** Decimal precision for display (for number type) */
+    precision?: number;
+    /** Options for select/multiselect type */
+    options?: Array<{
+        value: any;
+        label: string;
+        description?: string;
+    }>;
+    /** Custom validation function - returns true or error message */
+    validate?: (value: any) => boolean | string;
+    /** Required field */
+    required?: boolean;
+    /** Section this parameter belongs to */
+    section?: string;
+    /** Display order within section */
+    order?: number;
+    /** Parameter IDs this depends on - if any are disabled, this is disabled */
+    dependsOn?: string[];
+    /** Conditional visibility - function that determines if parameter should be shown */
+    visibleWhen?: (allValues: Record<string, any>) => boolean;
+}
+/**
+ * Configuration section for grouping parameters
+ */
+interface ConfigSection {
+    /** Section ID */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Section description */
+    description?: string;
+    /** Display order */
+    order?: number;
+    /** Whether section is collapsible */
+    collapsible?: boolean;
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+    /** Icon to display */
+    icon?: string;
+}
+/**
+ * Configuration state tracking
+ */
+interface ConfigState {
+    /** Has unsaved changes */
+    isDirty?: boolean;
+    /** Currently saving */
+    isSaving?: boolean;
+    /** Last save timestamp */
+    lastSaved?: number;
+    /** Last save result */
+    lastSaveResult?: {
+        success: boolean;
+        message?: string;
+    };
+    /** Validation errors */
+    errors?: Record<string, string>;
+}
+/**
+ * Configuration actions/handlers
+ */
+interface ConfigActions {
+    /** Handler for applying changes (temporary, may be reverted) */
+    onApply?: (values: Record<string, any>) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for saving changes (permanent) */
+    onSave?: (values: Record<string, any>) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for resetting to defaults */
+    onReset?: () => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    /** Handler for canceling changes */
+    onCancel?: () => void;
+    /** Handler for exporting configuration */
+    onExport?: () => Promise<{
+        success: boolean;
+        data?: any;
+        message?: string;
+    }>;
+    /** Handler for importing configuration */
+    onImport?: (data: any) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+}
+/**
+ * Display configuration
+ */
+interface ConfigDisplay {
+    /** Panel title */
+    title?: string;
+    /** Panel subtitle */
+    subtitle?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Show apply button */
+    showApply?: boolean;
+    /** Show save button */
+    showSave?: boolean;
+    /** Show reset button */
+    showReset?: boolean;
+    /** Show cancel button */
+    showCancel?: boolean;
+    /** Show export button */
+    showExport?: boolean;
+    /** Show import button */
+    showImport?: boolean;
+    /** Confirmation message for reset action */
+    resetConfirmMessage?: string;
+    /** Confirmation message for critical saves */
+    saveConfirmMessage?: string;
+}
+/**
+ * Theme customization for config panel
+ */
+interface ConfigTheme {
+    /** Background color */
+    backgroundColor?: string;
+    /** Surface/card color */
+    surfaceColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Muted text color */
+    mutedTextColor?: string;
+    /** Accent color */
+    accentColor?: string;
+    /** Error color */
+    errorColor?: string;
+    /** Success color */
+    successColor?: string;
+    /** Warning color */
+    warningColor?: string;
+}
+/**
+ * Device configuration binding - maps a node to device configuration parameters
+ */
+interface DeviceConfigBinding {
+    /** Node ID this configuration is bound to */
+    nodeId: string;
+    /** Device tag/identifier */
+    tag: string;
+    /** Device name */
+    deviceName?: string;
+    /** Device type */
+    deviceType?: string;
+    /** Configuration sections */
+    sections?: ConfigSection[];
+    /** Configuration parameters (flat list, optionally grouped by section) */
+    parameters: ConfigParameter[];
+    /** Current state */
+    state: ConfigState;
+    /** Available actions */
+    actions: ConfigActions;
+    /** Display configuration */
+    display?: ConfigDisplay;
+    /** Theme customization */
+    theme?: ConfigTheme;
+    /** Additional metadata */
+    metadata?: Record<string, any>;
+}
+/**
+ * Map of device configurations by node ID
+ */
+type DeviceConfigMap = Map<string, DeviceConfigBinding>;
+/**
+ * Helper to create a config binding with defaults
+ */
+declare function createConfigBinding(nodeId: string, tag: string, parameters: ConfigParameter[], actions: ConfigActions, options?: {
+    deviceName?: string;
+    deviceType?: string;
+    sections?: ConfigSection[];
+    display?: ConfigDisplay;
+    theme?: ConfigTheme;
+    metadata?: Record<string, any>;
+}): DeviceConfigBinding;
+
+/**
+ * Hook for managing device configuration bindings
+ */
+declare function useDeviceConfigs(initialConfigs?: DeviceConfigBinding[]): {
+    configs: DeviceConfigMap;
+    getConfig: (nodeId: string) => DeviceConfigBinding | undefined;
+    setConfig: (config: DeviceConfigBinding) => void;
+    removeConfig: (nodeId: string) => void;
+    clearConfigs: () => void;
+    updateConfig: (nodeId: string, updates: Partial<DeviceConfigBinding>) => void;
+    updateConfigState: (nodeId: string, stateUpdates: Partial<DeviceConfigBinding["state"]>) => void;
+    updateConfigBatch: (updates: Record<string, Partial<DeviceConfigBinding>>) => void;
+    updateParameterValue: (nodeId: string, parameterId: string, value: any) => void;
+    applyConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    saveConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    resetConfig: (nodeId: string) => Promise<{
+        success: boolean;
+        message?: string;
+    }>;
+    cancelConfig: (nodeId: string) => void;
+    validateConfig: (nodeId: string) => {
+        valid: boolean;
+        errors: Record<string, string>;
+    };
+};
+
+interface DeviceConfigPanelProps {
+    /** Configuration binding to display */
+    binding: DeviceConfigBinding | null;
+    /** Called when panel should close */
+    onClose: () => void;
+    /** Called when undock button clicked (optional, shows undock button if provided) */
+    onUndock?: () => void;
+    /** Icon to display in undock button (default: '⇱') */
+    undockIcon?: string;
+    /** Panel position */
+    position?: 'bottom' | 'side';
+    /** Horizontal alignment for bottom position (default: center) */
+    align?: 'left' | 'center' | 'right';
+    /** Optimize for touch (larger targets) */
+    touchOptimized?: boolean;
+    /** Compact mode - reduces padding and spacing */
+    compact?: boolean;
+    /** Font size scale (default: 1.0) */
+    fontScale?: number;
+    /** Maximum height for bottom position (default: 70vh) */
+    maxHeight?: string;
+    /** Maximum width for bottom position (default: none) */
+    maxWidth?: string;
+    /** Toast notification duration in milliseconds (default: 3000) */
+    toastDuration?: number;
+    /** Called when controls button clicked (opens control panel for this device) */
+    onOpenControls?: () => void;
+    /** Show controls button in header */
+    showControlsButton?: boolean;
+    /** 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;
+
 /**
  * Options for simulation behavior
  */
@@ -1516,4 +1810,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, 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 };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, 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, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, registerSymbol, registerSymbols, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };