@procaaso/alphinity-ui-components 1.7.0 → 1.8.1

package/dist/index.d.ts

@@ -1,16 +1,17 @@
-import * as react from 'react';
-import react__default from 'react';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import * as _mui_system from '@mui/system';
 import * as _mui_material from '@mui/material';
-import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 
-interface ButtonProps extends react__default.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary';
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
 }
-declare const Button: react__default.FC<ButtonProps>;
+declare const Button: React__default.FC<ButtonProps>;
 
 interface SelectorOption {
     /** Unique value for the option */
@@ -22,7 +23,7 @@ interface SelectorOption {
     /** Optional description for tooltip or additional context */
     description?: string;
 }
-interface SelectorProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface SelectorProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Currently selected value */
     value: string;
     /** Callback when selection changes */
@@ -42,7 +43,7 @@ interface SelectorProps extends Omit<react__default.HTMLAttributes<HTMLDivElemen
     /** Whether the dropdown should open upward */
     dropdownUp?: boolean;
 }
-declare const Selector: react__default.FC<SelectorProps>;
+declare const Selector: React__default.FC<SelectorProps>;
 
 /**
  * Status levels for telemetry values
@@ -188,7 +189,7 @@ interface ModeConfig {
     /** Precision for second setpoint */
     secondPrecision?: number;
 }
-interface ControlPanelProps extends react__default.HTMLAttributes<HTMLDivElement> {
+interface ControlPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Panel title/identifier */
     title: string;
     /** Currently selected mode */
@@ -249,9 +250,9 @@ interface ControlPanelProps extends react__default.HTMLAttributes<HTMLDivElement
     /** Custom stop button text */
     stopButtonText?: string;
 }
-declare const ControlPanel: react__default.FC<ControlPanelProps>;
+declare const ControlPanel: React__default.FC<ControlPanelProps>;
 
-interface StatusIndicatorProps extends react__default.HTMLAttributes<HTMLDivElement> {
+interface StatusIndicatorProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Status state determining color and behavior */
     status: 'off' | 'normal' | 'alarm' | 'warning' | 'active' | 'fault';
     /** Size of the indicator */
@@ -267,9 +268,9 @@ interface StatusIndicatorProps extends react__default.HTMLAttributes<HTMLDivElem
     /** Whether the indicator should have a 3D LED effect */
     led?: boolean;
 }
-declare const StatusIndicator: react__default.FC<StatusIndicatorProps>;
+declare const StatusIndicator: React__default.FC<StatusIndicatorProps>;
 
-interface ValueEntryProps extends Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+interface ValueEntryProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     /** Current value */
     value: number | string;
     /** Callback when value changes */
@@ -291,9 +292,9 @@ interface ValueEntryProps extends Omit<react__default.InputHTMLAttributes<HTMLIn
     /** Whether the input is read-only */
     readOnly?: boolean;
 }
-declare const ValueEntry: react__default.FC<ValueEntryProps>;
+declare const ValueEntry: React__default.FC<ValueEntryProps>;
 
-interface LegacyValueEntryProps extends Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+interface LegacyValueEntryProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     /** Current value */
     value: number | string;
     /** Callback when value changes */
@@ -315,7 +316,7 @@ interface LegacyValueEntryProps extends Omit<react__default.InputHTMLAttributes<
     /** Whether the input is read-only */
     readOnly?: boolean;
 }
-declare const LegacyValueEntry: react__default.FC<LegacyValueEntryProps>;
+declare const LegacyValueEntry: React__default.FC<LegacyValueEntryProps>;
 
 interface NodeControlConfig {
     /** Node ID */
@@ -353,7 +354,7 @@ interface NodeControlConfig {
     /** Whether setpoint is read-only */
     readOnly?: boolean;
 }
-interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivElement> {
+interface NodeControlsPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Control configuration for the selected node */
     config: NodeControlConfig | null;
     /** Callback to close the panel */
@@ -372,8 +373,32 @@ interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivEl
  * - Clear visual feedback
  * - Bottom or side slide-in animation
  */
-declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
+declare const NodeControlsPanel: React__default.FC<NodeControlsPanelProps>;
 
+/**
+ * A custom action button rendered in the device control panel (e.g. Tare, Zero).
+ */
+interface CustomAction {
+    /** Stable action id passed to onCustomAction when clicked. */
+    id: string;
+    /** Button label. */
+    label: string;
+    /** Optional leading icon / emoji. */
+    icon?: string;
+    /** Visual variant (reserved for future styling). */
+    variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    /**
+     * When true, the button renders disabled and does NOT fire onCustomAction.
+     * Use for actions that are only conditionally available (e.g. a Tare that is
+     * not ready).
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip shown on hover explaining why the action is unavailable. Only
+     * meaningful when `disabled` is true.
+     */
+    disabledReason?: string;
+}
 /**
  * Device control capabilities and commands
  */
@@ -387,12 +412,7 @@ interface ControlCapabilities {
     /** Can the device be reset? */
     canReset?: boolean;
     /** Custom actions available */
-    customActions?: Array<{
-        id: string;
-        label: string;
-        icon?: string;
-        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
-    }>;
+    customActions?: CustomAction[];
 }
 /**
  * Device control mode option
@@ -576,10 +596,7 @@ declare function createControlBinding(nodeId: string, deviceConfig: {
     capabilities?: {
         canStart?: boolean;
         canStop?: boolean;
-        customActions?: Array<{
-            id: string;
-            label: string;
-        }>;
+        customActions?: CustomAction[];
     };
     status?: string;
     isRunning?: boolean;
@@ -645,7 +662,7 @@ 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__default.JSX.Element | null;
+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;
 
 interface NumpadDialogProps {
     /** Whether the dialog is open */
@@ -694,7 +711,7 @@ interface NumpadDialogProps {
  * out-of-range values are rejected (never silently clamped). The field pre-fills
  * with the current value so an operator never blind-zeroes a live setpoint.
  */
-declare const NumpadDialog: react__default.FC<NumpadDialogProps>;
+declare const NumpadDialog: React__default.FC<NumpadDialogProps>;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {
@@ -705,9 +722,9 @@ type OverlayTheme = 'tank' | 'pressure' | 'vessel' | 'flow';
 interface SVGLockedOverlayProps {
     svgX: number;
     svgY: number;
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
     theme?: OverlayTheme;
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
     className?: string;
     onClick?: () => void;
     containerSelector?: string;
@@ -752,20 +769,20 @@ interface EquipmentIndicatorProps {
     color: string;
     label: string;
     size?: number;
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
     className?: string;
 }
 interface FullscreenWorkspaceTab {
     label: string;
     value: string;
-    content: react__default.ReactNode;
-}
-interface FullscreenWorkspaceProps extends react__default.HTMLAttributes<HTMLDivElement> {
-    svgContent: react__default.ReactNode;
-    overlays?: react__default.ReactNode;
-    leftPanel?: react__default.ReactNode;
-    rightPanel?: react__default.ReactNode;
-    footer?: react__default.ReactNode;
+    content: React__default.ReactNode;
+}
+interface FullscreenWorkspaceProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    svgContent: React__default.ReactNode;
+    overlays?: React__default.ReactNode;
+    leftPanel?: React__default.ReactNode;
+    rightPanel?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
     tabs?: FullscreenWorkspaceTab[];
     activeTab?: string;
     onTabChange?: (value: string) => void;
@@ -786,60 +803,60 @@ interface FullscreenWorkspaceProps extends react__default.HTMLAttributes<HTMLDiv
     zoomDisabled?: boolean;
 }
 
-declare const FullscreenContainer: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const FullscreenContainer: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 } & FullscreenContainerProps, {}, {}>;
-declare const LeftPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const LeftPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 } & {
     collapsed: boolean;
 }, {}, {}>;
-declare const RightPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const RightPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 } & {
     collapsed: boolean;
 }, {}, {}>;
-declare const SVGArea: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const SVGArea: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
-declare const LeftToggleButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+declare const LeftToggleButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: _emotion_react.Theme;
 } & {
     collapsed: boolean;
 }, {}, {}>;
-declare const RightToggleButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+declare const RightToggleButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: _emotion_react.Theme;
 } & {
     collapsed: boolean;
 }, {}, {}>;
-declare const DisplayModeToggle: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+declare const DisplayModeToggle: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: _emotion_react.Theme;
 } & {
     mode: DisplayMode;
 }, {}, {}>;
-declare const ZoomControls: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const ZoomControls: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
-declare const ZoomButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+declare const ZoomButton: _emotion_styled.StyledComponent<_mui_material.IconButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "className" | "disabled" | "style" | "tabIndex" | "color" | "size" | "sx" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
-declare const FooterPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const FooterPanel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
-declare const PanelTabs: _emotion_styled.StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "variant" | "children" | "className" | "value" | "style" | "aria-label" | "aria-labelledby" | "onChange" | "sx" | "classes" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "orientation" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar" | "slots" | "slotProps"> & {
+declare const PanelTabs: _emotion_styled.StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "variant" | "children" | "className" | "value" | "style" | "aria-label" | "aria-labelledby" | "onChange" | "sx" | "classes" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "orientation" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar" | "slots" | "slotProps"> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
-declare const PanelContent: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const PanelContent: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 }, {}, {}>;
 declare const FixedSVGContainer: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const ScrollableSVGWrapper: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 declare const baseOverlayStyles: {
     readonly tank: {
@@ -892,8 +909,8 @@ declare const baseOverlayStyles: {
     };
 };
 declare const overlayStyles: Record<OverlayTheme, typeof baseOverlayStyles[OverlayTheme]>;
-declare const SVGLockedOverlay: ({ svgX, svgY, children, theme, style, className, onClick, containerSelector, }: SVGLockedOverlayProps) => react.JSX.Element;
-declare const DashboardCard: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+declare const SVGLockedOverlay: ({ svgX, svgY, children, theme, style, className, onClick, containerSelector, }: SVGLockedOverlayProps) => react_jsx_runtime.JSX.Element;
+declare const DashboardCard: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
     theme?: _emotion_react.Theme;
 } & {
     svgX: number;
@@ -905,23 +922,23 @@ declare const CardHeader: _emotion_styled.StyledComponent<{
     as?: React.ElementType;
 } & {
     color?: string;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const CardValue: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const CardUnit: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: React.ElementType;
-}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
-declare const TrendLine: ({ values, width, height, color, strokeWidth, backgroundColor, }: TrendLineProps) => react.JSX.Element;
-declare const CircularGauge: ({ value, max, unit, label, size, color, }: CircularGaugeProps) => react.JSX.Element;
-declare const Sparkline: ({ data, width, height, color }: SparklineProps) => react.JSX.Element | null;
-declare const EquipmentIndicatorWithSparkline: ({ svgX, svgY, color, label, size, sparklineData, sparklineOffset, }: EquipmentIndicatorWithSparklineProps) => react.JSX.Element;
-declare const EquipmentIndicator: ({ svgX, svgY, color, label, size, style, className, }: EquipmentIndicatorProps) => react.JSX.Element;
+declare const TrendLine: ({ values, width, height, color, strokeWidth, backgroundColor, }: TrendLineProps) => react_jsx_runtime.JSX.Element;
+declare const CircularGauge: ({ value, max, unit, label, size, color, }: CircularGaugeProps) => react_jsx_runtime.JSX.Element;
+declare const Sparkline: ({ data, width, height, color }: SparklineProps) => react_jsx_runtime.JSX.Element | null;
+declare const EquipmentIndicatorWithSparkline: ({ svgX, svgY, color, label, size, sparklineData, sparklineOffset, }: EquipmentIndicatorWithSparklineProps) => react_jsx_runtime.JSX.Element;
+declare const EquipmentIndicator: ({ svgX, svgY, color, label, size, style, className, }: EquipmentIndicatorProps) => react_jsx_runtime.JSX.Element;
 
-declare function FullscreenWorkspace({ svgContent, overlays, leftPanel, rightPanel, footer, tabs, activeTab, onTabChange, defaultLeftCollapsed, defaultRightCollapsed, leftCollapsed: leftCollapsedProp, rightCollapsed: rightCollapsedProp, onLeftCollapseChange, onRightCollapseChange, displayMode, defaultDisplayMode, onDisplayModeChange, showDisplayModeToggle, showZoomControls, onZoomIn, onZoomOut, onResetZoom, zoomDisabled, className, ...rest }: FullscreenWorkspaceProps): react__default.ReactElement;
+declare function FullscreenWorkspace({ svgContent, overlays, leftPanel, rightPanel, footer, tabs, activeTab, onTabChange, defaultLeftCollapsed, defaultRightCollapsed, leftCollapsed: leftCollapsedProp, rightCollapsed: rightCollapsedProp, onLeftCollapseChange, onRightCollapseChange, displayMode, defaultDisplayMode, onDisplayModeChange, showDisplayModeToggle, showZoomControls, onZoomIn, onZoomOut, onResetZoom, zoomDisabled, className, ...rest }: FullscreenWorkspaceProps): React__default.ReactElement;
 
 type Theme = 'modern' | 'hmi';
 interface ThemeContextType {
@@ -931,17 +948,17 @@ interface ThemeContextType {
 }
 declare const useTheme: () => ThemeContextType;
 interface ThemeProviderProps {
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
 }
-declare const ThemeProvider: react__default.FC<ThemeProviderProps>;
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
-interface ThemeToggleProps extends react__default.HTMLAttributes<HTMLDivElement> {
+interface ThemeToggleProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Size of the toggle */
     size?: 'small' | 'medium' | 'large';
     /** Position of the toggle */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline';
 }
-declare const ThemeToggle: react__default.FC<ThemeToggleProps>;
+declare const ThemeToggle: React__default.FC<ThemeToggleProps>;
 
 /**
  * ISA-101 High Performance HMI — Unified Status Color System
@@ -1410,13 +1427,13 @@ interface PIDCanvasFeatures {
     /** Background color for canvas (default: '#ffffff') */
     backgroundColor?: string;
 }
-interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
+interface PIDCanvasProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** The diagram to render */
     diagram: Diagram;
     /** Optional className for the container */
     className?: string;
     /** Optional inline styles for the container */
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
     /** Enable interactive features (pan, zoom, selection, telemetry, dragNodes) */
     features?: PIDCanvasFeatures;
     /** Callback when selection changes */
@@ -1466,13 +1483,13 @@ interface PIDCanvasControls {
  *
  * 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 PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, statusColorMap, ...props }: PIDCanvasProps): React__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */
     className?: string;
     /** Callback when a symbol drag starts */
-    onSymbolDragStart?: (symbolId: string, event: react__default.DragEvent) => void;
+    onSymbolDragStart?: (symbolId: string, event: React__default.DragEvent) => void;
     /** Show category filter */
     showCategories?: boolean;
     /** Custom symbol categories */
@@ -1484,7 +1501,7 @@ interface SymbolLibraryProps {
  * Displays available symbols organized by category
  * Supports drag-and-drop to add new nodes to diagrams
  */
-declare function SymbolLibrary({ className, onSymbolDragStart, showCategories, categories, }: SymbolLibraryProps): react__default.ReactElement;
+declare function SymbolLibrary({ className, onSymbolDragStart, showCategories, categories, }: SymbolLibraryProps): React__default.ReactElement;
 
 interface NodeConfigPanelProps {
     /** Selected node to configure */
@@ -1502,7 +1519,7 @@ interface NodeConfigPanelProps {
     /** Additional CSS class name */
     className?: string;
     /** Custom styles */
-    style?: react__default.CSSProperties;
+    style?: React__default.CSSProperties;
 }
 /**
  * NodeConfigPanel - Reusable configuration panel for editing node properties and telemetry
@@ -1518,7 +1535,7 @@ interface NodeConfigPanelProps {
  * />
  * ```
  */
-declare function NodeConfigPanel({ node, binding, onUpdateNode, onUpdateTelemetry, onAddTelemetry, onRemove, className, style, }: NodeConfigPanelProps): react__default.JSX.Element;
+declare function NodeConfigPanel({ node, binding, onUpdateNode, onUpdateTelemetry, onAddTelemetry, onRemove, className, style, }: NodeConfigPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Validates a diagram object structure
@@ -1940,7 +1957,7 @@ 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__default.JSX.Element | null;
+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
@@ -1980,4 +1997,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 CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, 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, NumpadDialog, type NumpadDialogProps, 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, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, 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 UseDeviceControlsOptions, 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, resolveStatusColor, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, type CustomAction, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, 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, NumpadDialog, type NumpadDialogProps, 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, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, 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 UseDeviceControlsOptions, 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, resolveStatusColor, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.js

@@ -1755,33 +1755,41 @@ function DeviceControlPanel({
           }
         )
       ] }),
-      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
-        "button",
-        {
-          onClick: () => onCustomAction?.(action.id),
-          style: {
-            flex: 1,
-            minWidth: "120px",
-            height: touchSize,
-            backgroundColor: surfaceColor,
-            color: textColor,
-            border: `1px solid ${borderColor}`,
-            borderRadius: "6px",
-            fontSize: "11px",
-            fontWeight: 600,
-            fontFamily: "monospace",
-            letterSpacing: "0.5px",
-            textTransform: "uppercase",
-            cursor: "pointer",
-            transition: "all 0.15s"
+      activeCapabilities?.customActions && activeCapabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: activeCapabilities.customActions.map((action) => {
+        const actionDisabled = action.disabled === true;
+        return /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            onClick: () => {
+              if (!actionDisabled) onCustomAction?.(action.id);
+            },
+            disabled: actionDisabled,
+            title: actionDisabled ? action.disabledReason : void 0,
+            style: {
+              flex: 1,
+              minWidth: "120px",
+              height: touchSize,
+              backgroundColor: surfaceColor,
+              color: textColor,
+              border: `1px solid ${borderColor}`,
+              borderRadius: "6px",
+              fontSize: "11px",
+              fontWeight: 600,
+              fontFamily: "monospace",
+              letterSpacing: "0.5px",
+              textTransform: "uppercase",
+              cursor: actionDisabled ? "not-allowed" : "pointer",
+              opacity: actionDisabled ? 0.4 : 1,
+              transition: "all 0.15s"
+            },
+            children: [
+              action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
+              action.label
+            ]
           },
-          children: [
-            action.icon && /* @__PURE__ */ jsx8("span", { style: { marginRight: "6px" }, children: action.icon }),
-            action.label
-          ]
-        },
-        action.id
-      )) })
+          action.id
+        );
+      }) })
     ] }),
     binding.state.lastCommandResult && showToast && /* @__PURE__ */ jsx8(
       "div",
@@ -4821,6 +4829,30 @@ function PipeRenderer({
 
 // src/components/PIDCanvas/DataOverlay.tsx
 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";
+function ensurePulseKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PULSE_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = PULSE_KEYFRAME_ID;
+  style.textContent = "@keyframes pid-data-overlay-pulse{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}";
+  document.head.appendChild(style);
+}
+function renderStatusDot(cx, cy, scale, fill) {
+  ensurePulseKeyframes();
+  return /* @__PURE__ */ jsx18(
+    "circle",
+    {
+      className: "pid-data-overlay-status-dot",
+      cx: cx + 35 * scale,
+      cy: cy - 18 * scale,
+      r: 3 * scale,
+      fill,
+      style: { animation: PULSE_ANIMATION }
+    }
+  );
+}
 function DataOverlay({
   nodeId,
   x,
@@ -4925,25 +4957,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx18(
-      "circle",
-      {
-        cx: displayX + 35 * scale,
-        cy: displayY - 18 * scale,
-        r: 3 * scale,
-        fill: finalTextColor,
-        opacity: "0.9",
-        children: /* @__PURE__ */ jsx18(
-          "animate",
-          {
-            attributeName: "opacity",
-            values: "0.9;0.3;0.9",
-            dur: "1.5s",
-            repeatCount: "indefinite"
-          }
-        )
-      }
-    ),
+    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor),
     value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ jsxs14(
       "text",
       {
@@ -8609,14 +8623,17 @@ function DeviceConfigPanel({
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
+      let hideTimer;
       const showTimer = setTimeout(() => {
         setShowToast(true);
-        const hideTimer = setTimeout(() => {
+        hideTimer = setTimeout(() => {
           setShowToast(false);
         }, toastDuration);
-        return () => clearTimeout(hideTimer);
       }, 0);
-      return () => clearTimeout(showTimer);
+      return () => {
+        clearTimeout(showTimer);
+        if (hideTimer) clearTimeout(hideTimer);
+      };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
   const parametersBySection = useMemo(() => {