@procaaso/alphinity-ui-components 1.0.0 → 1.0.2

package/dist/index.d.cts

@@ -1,52 +1,17 @@
-import React from 'react';
+import * as react 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';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends react__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary';
-    children: React.ReactNode;
+    children: react__default.ReactNode;
 }
-declare const Button: React.FC<ButtonProps>;
-
-interface ValueEntryProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-    /** Current value */
-    value: number | string;
-    /** Callback when value changes */
-    onChange: (value: number | string) => void;
-    /** Unit of measurement to display */
-    unit?: string;
-    /** Status state for visual feedback */
-    status?: 'normal' | 'alarm' | 'warning' | 'disabled';
-    /** Minimum allowed value (for numeric inputs) */
-    min?: number;
-    /** Maximum allowed value (for numeric inputs) */
-    max?: number;
-    /** Number of decimal places (for numeric inputs) */
-    precision?: number;
-    /** Input type - numeric or text */
-    inputType?: 'numeric' | 'text';
-    /** Label for the input */
-    label?: string;
-    /** Whether the input is read-only */
-    readOnly?: boolean;
-}
-declare const ValueEntry: React.FC<ValueEntryProps>;
-
-interface StatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Status state determining color and behavior */
-    status: 'off' | 'normal' | 'alarm' | 'warning' | 'active' | 'fault';
-    /** Size of the indicator */
-    size?: 'small' | 'medium' | 'large';
-    /** Animation behavior */
-    animation?: 'none' | 'pulse' | 'blink' | 'flash';
-    /** Label text to display next to indicator */
-    label?: string;
-    /** Position of label relative to indicator */
-    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Shape of the indicator */
-    shape?: 'circle' | 'square' | 'diamond';
-    /** Whether the indicator should have a 3D LED effect */
-    led?: boolean;
-}
-declare const StatusIndicator: React.FC<StatusIndicatorProps>;
+declare const Button: react__default.FC<ButtonProps>;
 
 interface SelectorOption {
     /** Unique value for the option */
@@ -58,7 +23,7 @@ interface SelectorOption {
     /** Optional description for tooltip or additional context */
     description?: string;
 }
-interface SelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface SelectorProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Currently selected value */
     value: string;
     /** Callback when selection changes */
@@ -78,7 +43,7 @@ interface SelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCh
     /** Whether the dropdown should open upward */
     dropdownUp?: boolean;
 }
-declare const Selector: React.FC<SelectorProps>;
+declare const Selector: react__default.FC<SelectorProps>;
 
 interface ModeConfig {
     /** Units for this mode */
@@ -104,7 +69,7 @@ interface ModeConfig {
     /** Precision for second setpoint */
     secondPrecision?: number;
 }
-interface ControlPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ControlPanelProps extends react__default.HTMLAttributes<HTMLDivElement> {
     /** Panel title/identifier */
     title: string;
     /** Currently selected mode */
@@ -156,7 +121,300 @@ interface ControlPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Custom stop button text */
     stopButtonText?: string;
 }
-declare const ControlPanel: React.FC<ControlPanelProps>;
+declare const ControlPanel: react__default.FC<ControlPanelProps>;
+
+interface StatusIndicatorProps extends react__default.HTMLAttributes<HTMLDivElement> {
+    /** Status state determining color and behavior */
+    status: 'off' | 'normal' | 'alarm' | 'warning' | 'active' | 'fault';
+    /** Size of the indicator */
+    size?: 'small' | 'medium' | 'large';
+    /** Animation behavior */
+    animation?: 'none' | 'pulse' | 'blink' | 'flash';
+    /** Label text to display next to indicator */
+    label?: string;
+    /** Position of label relative to indicator */
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /** Shape of the indicator */
+    shape?: 'circle' | 'square' | 'diamond';
+    /** Whether the indicator should have a 3D LED effect */
+    led?: boolean;
+}
+declare const StatusIndicator: react__default.FC<StatusIndicatorProps>;
+
+interface ValueEntryProps extends Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    /** Current value */
+    value: number | string;
+    /** Callback when value changes */
+    onChange: (value: number | string) => void;
+    /** Unit of measurement to display */
+    unit?: string;
+    /** Status state for visual feedback */
+    status?: 'normal' | 'alarm' | 'warning' | 'disabled';
+    /** Minimum allowed value (for numeric inputs) */
+    min?: number;
+    /** Maximum allowed value (for numeric inputs) */
+    max?: number;
+    /** Number of decimal places (for numeric inputs) */
+    precision?: number;
+    /** Input type - numeric or text */
+    inputType?: 'numeric' | 'text';
+    /** Label for the input */
+    label?: string;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+}
+declare const ValueEntry: react__default.FC<ValueEntryProps>;
+
+interface LegacyValueEntryProps extends Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    /** Current value */
+    value: number | string;
+    /** Callback when value changes */
+    onChange: (value: number | string) => void;
+    /** Unit of measurement to display */
+    unit?: string;
+    /** Status state for visual feedback */
+    status?: 'normal' | 'alarm' | 'warning' | 'disabled';
+    /** Minimum allowed value (for numeric inputs) */
+    min?: number;
+    /** Maximum allowed value (for numeric inputs) */
+    max?: number;
+    /** Number of decimal places (for numeric inputs) */
+    precision?: number;
+    /** Input type - numeric or text */
+    inputType?: 'numeric' | 'text';
+    /** Label for the input */
+    label?: string;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+}
+declare const LegacyValueEntry: react__default.FC<LegacyValueEntryProps>;
+
+type DisplayMode = 'standard' | 'dashboard';
+interface FullscreenContainerProps {
+    leftCollapsed: boolean;
+    rightCollapsed: boolean;
+}
+type OverlayTheme = 'tank' | 'pressure' | 'vessel' | 'flow';
+interface SVGLockedOverlayProps {
+    svgX: number;
+    svgY: number;
+    children: react__default.ReactNode;
+    theme?: OverlayTheme;
+    style?: react__default.CSSProperties;
+    className?: string;
+    onClick?: () => void;
+    containerSelector?: string;
+}
+interface TrendLineProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    strokeWidth?: number;
+    backgroundColor?: string;
+}
+interface CircularGaugeProps {
+    value: number;
+    max: number;
+    unit: string;
+    label: string;
+    size?: number;
+    color?: string;
+}
+interface SparklineProps {
+    data: number[];
+    width: number;
+    height: number;
+    color: string;
+}
+interface EquipmentIndicatorWithSparklineProps {
+    svgX: number;
+    svgY: number;
+    color: string;
+    label: string;
+    size?: number;
+    sparklineData?: number[];
+    sparklineOffset?: {
+        x: number;
+        y: number;
+    };
+}
+interface EquipmentIndicatorProps {
+    svgX: number;
+    svgY: number;
+    color: string;
+    label: string;
+    size?: number;
+    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;
+    tabs?: FullscreenWorkspaceTab[];
+    activeTab?: string;
+    onTabChange?: (value: string) => void;
+    defaultLeftCollapsed?: boolean;
+    defaultRightCollapsed?: boolean;
+    leftCollapsed?: boolean;
+    rightCollapsed?: boolean;
+    onLeftCollapseChange?: (collapsed: boolean) => void;
+    onRightCollapseChange?: (collapsed: boolean) => void;
+    displayMode?: DisplayMode;
+    defaultDisplayMode?: DisplayMode;
+    onDisplayModeChange?: (mode: DisplayMode) => void;
+    showDisplayModeToggle?: boolean;
+    showZoomControls?: boolean;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onResetZoom?: () => void;
+    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>> & {
+    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>> & {
+    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>> & {
+    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>> & {
+    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"> & {
+    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"> & {
+    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"> & {
+    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>> & {
+    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"> & {
+    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>> & {
+    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"> & {
+    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>> & {
+    theme?: _emotion_react.Theme;
+}, {}, {}>;
+declare const FixedSVGContainer: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ScrollableSVGWrapper: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const baseOverlayStyles: {
+    readonly tank: {
+        readonly background: "linear-gradient(135deg, rgba(69, 90, 120, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%)";
+        readonly border: "1px solid #455a64";
+        readonly color: "white";
+        readonly borderRadius: "4px";
+        readonly fontSize: "12px";
+        readonly fontWeight: "500";
+        readonly textAlign: "center";
+        readonly padding: "8px";
+        readonly minWidth: "60px";
+        readonly boxShadow: "0 1px 4px rgba(69, 90, 120, 0.2)";
+    };
+    readonly pressure: {
+        readonly background: "linear-gradient(135deg, rgba(30, 50, 90, 0.75) 0%, rgba(20, 35, 70, 0.75) 100%)";
+        readonly border: "1px solid #1e3a8a";
+        readonly color: "white";
+        readonly borderRadius: "4px";
+        readonly fontSize: "11px";
+        readonly fontWeight: "500";
+        readonly textAlign: "center";
+        readonly padding: "6px";
+        readonly minWidth: "50px";
+        readonly boxShadow: "0 1px 4px rgba(30, 50, 90, 0.15)";
+    };
+    readonly vessel: {
+        readonly background: "linear-gradient(135deg, rgba(84, 110, 122, 0.95) 0%, rgba(69, 90, 100, 0.95) 100%)";
+        readonly border: "1px solid #546e7a";
+        readonly color: "white";
+        readonly borderRadius: "4px";
+        readonly fontSize: "13px";
+        readonly fontWeight: "500";
+        readonly textAlign: "center";
+        readonly padding: "8px";
+        readonly minWidth: "70px";
+        readonly boxShadow: "0 1px 4px rgba(84, 110, 122, 0.2)";
+    };
+    readonly flow: {
+        readonly background: "linear-gradient(135deg, rgba(102, 125, 102, 0.95) 0%, rgba(85, 107, 85, 0.95) 100%)";
+        readonly border: "1px solid #689f38";
+        readonly color: "white";
+        readonly borderRadius: "4px";
+        readonly fontSize: "11px";
+        readonly fontWeight: "500";
+        readonly textAlign: "center";
+        readonly padding: "5px";
+        readonly minWidth: "60px";
+        readonly boxShadow: "0 1px 4px rgba(102, 125, 102, 0.2)";
+    };
+};
+declare const overlayStyles: Record<OverlayTheme, typeof baseOverlayStyles[OverlayTheme]>;
+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.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & {
+    theme?: _emotion_react.Theme;
+} & {
+    svgX: number;
+    svgY: number;
+    cardType?: string;
+}, {}, {}>;
+declare const CardHeader: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+} & {
+    color?: string;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const CardValue: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const CardUnit: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+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;
 
 type Theme = 'modern' | 'hmi';
 interface ThemeContextType {
@@ -166,16 +424,690 @@ interface ThemeContextType {
 }
 declare const useTheme: () => ThemeContextType;
 interface ThemeProviderProps {
-    children: React.ReactNode;
+    children: react__default.ReactNode;
 }
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: react__default.FC<ThemeProviderProps>;
 
-interface ThemeToggleProps extends React.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.FC<ThemeToggleProps>;
+declare const ThemeToggle: react__default.FC<ThemeToggleProps>;
+
+interface NodeInstance {
+    id: string;
+    symbolId: string;
+    transform: Transform;
+    ports?: PortInstance[];
+    visible?: boolean;
+    label?: string;
+    labelOffset?: {
+        x: number;
+        y: number;
+    };
+    metadata?: Record<string, unknown>;
+}
+interface Transform {
+    x: number;
+    y: number;
+    rotation: number;
+    scale?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+}
+interface PortInstance {
+    id: string;
+    x: number;
+    y: number;
+    type: PortType;
+    label?: string;
+}
+type PortType = 'inlet' | 'outlet' | 'control' | 'signal';
+
+interface PipeEdge {
+    id: string;
+    fromNodeId: string;
+    fromPortId?: string;
+    toNodeId: string;
+    toPortId?: string;
+    routePoints: Point[];
+    visible?: boolean;
+    style?: PipeStyle;
+    label?: string;
+    showLabel?: boolean;
+    labelOffset?: {
+        x: number;
+        y: number;
+    };
+    metadata?: Record<string, unknown>;
+}
+interface Point {
+    x: number;
+    y: number;
+}
+interface PipeStyle {
+    stroke: string;
+    strokeWidth: number;
+    strokeDasharray?: string;
+    opacity?: number;
+}
+
+interface Overlay {
+    id: string;
+    type: OverlayType;
+    anchorType: AnchorType;
+    anchorId?: string;
+    offset: Point;
+    binding?: DataBinding;
+    content?: OverlayContent;
+    style?: React.CSSProperties;
+}
+type OverlayType = 'value' | 'label' | 'gauge' | 'trend' | 'custom';
+type AnchorType = 'node' | 'pipe' | 'absolute';
+interface DataBinding {
+    sourceType: 'tag' | 'expression' | 'static';
+    source: string;
+    format?: string;
+    updateInterval?: number;
+    transform?: string;
+}
+interface OverlayContent {
+    text?: string;
+    component?: string;
+    props?: Record<string, unknown>;
+}
+
+interface Diagram {
+    id: string;
+    name: string;
+    version: string;
+    viewBox: ViewBox;
+    nodes: NodeInstance[];
+    pipes: PipeEdge[];
+    overlays: Overlay[];
+    metadata?: DiagramMetadata;
+}
+interface ViewBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface DiagramMetadata {
+    author?: string;
+    created?: string;
+    modified?: string;
+    tags?: string[];
+    description?: string;
+}
+
+interface SymbolDefinition {
+    id: string;
+    name: string;
+    category: SymbolCategory;
+    svgContent: string;
+    viewBox: ViewBox;
+    ports: PortDefinition[];
+    thumbnail?: string;
+    metadata?: SymbolMetadata;
+}
+type SymbolCategory = 'valve' | 'pump' | 'vessel' | 'heat-exchanger' | 'instrument' | 'actuator' | 'sensor' | 'other';
+interface PortDefinition {
+    id: string;
+    x: number;
+    y: number;
+    type: PortType;
+    label?: string;
+    direction?: 'in' | 'out' | 'bi';
+}
+interface SymbolMetadata {
+    description?: string;
+    manufacturer?: string;
+    modelNumber?: string;
+    tags?: string[];
+}
+
+/**
+ * Status levels for telemetry values
+ */
+type TelemetryStatus$1 = 'normal' | 'warning' | 'alarm' | 'fault' | 'off';
+/**
+ * Live telemetry value with status
+ */
+interface TelemetryValue {
+    /** Current value */
+    value: number | string | boolean;
+    /** Status/severity level */
+    status: TelemetryStatus$1;
+    /** Unit of measurement (optional) */
+    unit?: string;
+    /** Timestamp of last update */
+    timestamp?: number;
+    /** Quality indicator (0-100, where 100 is good) */
+    quality?: number;
+}
+/**
+ * Telemetry data binding for a node
+ */
+interface TelemetryBinding {
+    /** Node ID this telemetry is bound to */
+    nodeId: string;
+    /** Tag/variable name for the telemetry source */
+    tag: string;
+    /** Current telemetry value */
+    value: TelemetryValue;
+    /** Historical values for sparkline/trend (optional) */
+    history?: number[];
+    /** Thresholds for status determination */
+    thresholds?: {
+        /** High-High threshold (value >= this triggers alarm) */
+        highHigh?: number;
+        /** High threshold (value >= this triggers warning) */
+        high?: number;
+        /** Low threshold (value <= this triggers warning) */
+        low?: number;
+        /** Low-Low threshold (value <= this triggers alarm/fault) */
+        lowLow?: number;
+        /** Custom label for high-high threshold */
+        highHighLabel?: string;
+        /** Custom label for high threshold */
+        highLabel?: string;
+        /** Custom label for low threshold */
+        lowLabel?: string;
+        /** Custom label for low-low threshold */
+        lowLowLabel?: string;
+    };
+    /** Custom colors for status levels */
+    statusColors?: {
+        normal?: string;
+        warning?: string;
+        alarm?: string;
+        fault?: string;
+        off?: string;
+    };
+    /** Display configuration */
+    display?: {
+        /** Show value overlay above node */
+        showValue?: boolean;
+        /** Show status indicator */
+        showStatus?: boolean;
+        /** Custom label for the value */
+        label?: string;
+        /** Number of decimal places for numeric values */
+        precision?: number;
+        /** Show sparkline trend (requires history) */
+        showSparkline?: boolean;
+        /** Sparkline color (defaults to status color) */
+        sparklineColor?: string;
+        /** Custom background color (hex code or 'status' for status-based color) */
+        backgroundColor?: string;
+        /** Custom text color for value display (hex code) */
+        textColor?: string;
+        /** Horizontal offset from node center */
+        offsetX?: number;
+        /** Vertical offset from node center */
+        offsetY?: number;
+    };
+}
+/**
+ * Map of telemetry bindings by node ID
+ */
+type TelemetryMap = Map<string, TelemetryBinding>;
+
+interface UseViewBoxOptions {
+    /** Initial viewBox configuration */
+    initialViewBox: ViewBox;
+    /** Enable pan interaction (default: true) */
+    enablePan?: boolean;
+    /** Enable zoom interaction (default: true) */
+    enableZoom?: boolean;
+    /** Minimum zoom level (smaller = more zoomed in, default: 0.1) */
+    minZoom?: number;
+    /** Maximum zoom level (larger = more zoomed out, default: 10) */
+    maxZoom?: number;
+    /** Zoom sensitivity (default: 0.001) */
+    zoomSensitivity?: number;
+    /** Allow left-click drag for panning (default: true for touch-friendly) */
+    allowLeftClickPan?: boolean;
+}
+interface UseViewBoxResult {
+    /** Current viewBox state */
+    viewBox: ViewBox;
+    /** Reset viewBox to initial state */
+    resetViewBox: () => void;
+    /** Zoom in (decrease viewBox size) */
+    zoomIn: () => void;
+    /** Zoom out (increase viewBox size) */
+    zoomOut: () => void;
+    /** Convert screen coordinates to world (SVG) coordinates */
+    screenToWorld: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    /** SVG element ref to attach event listeners */
+    svgRef: React.RefObject<SVGSVGElement | null>;
+}
+/**
+ * Custom hook for managing ViewBox state with pan and zoom interactions
+ *
+ * Pan controls:
+ * - Left mouse button + drag (if allowLeftClickPan=true, default)
+ * - Middle mouse button + drag (always)
+ * - Space + left mouse button + drag (always)
+ * - Touch drag (single finger)
+ *
+ * Zoom controls:
+ * - Mouse wheel (zoom to cursor position)
+ * - Pinch gesture (touch devices)
+ * - Programmatic zoomIn/zoomOut functions
+ */
+declare function useViewBox(options: UseViewBoxOptions): UseViewBoxResult;
+
+interface SelectionState {
+    /** IDs of selected nodes */
+    selectedNodeIds: Set<string>;
+    /** IDs of selected pipes */
+    selectedPipeIds: Set<string>;
+}
+interface UseSelectionOptions {
+    /** Allow multiple selection with Ctrl/Cmd key (default: true) */
+    multiSelect?: boolean;
+    /** Initial selection state */
+    initialSelection?: SelectionState;
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: SelectionState) => void;
+}
+interface UseSelectionResult {
+    /** Current selection state */
+    selection: SelectionState;
+    /** Check if a node is selected */
+    isNodeSelected: (nodeId: string) => boolean;
+    /** Check if a pipe is selected */
+    isPipeSelected: (pipeId: string) => boolean;
+    /** Select a node */
+    selectNode: (nodeId: string, multiSelect?: boolean) => void;
+    /** Select a pipe */
+    selectPipe: (pipeId: string, multiSelect?: boolean) => void;
+    /** Clear all selections */
+    clearSelection: () => void;
+    /** Select multiple nodes */
+    selectNodes: (nodeIds: string[]) => void;
+    /** Select multiple pipes */
+    selectPipes: (pipeIds: string[]) => void;
+}
+/**
+ * Custom hook for managing selection state in P&ID diagrams
+ *
+ * Supports:
+ * - Single selection (click)
+ * - Multi-selection (Ctrl+click)
+ * - Programmatic selection
+ * - Selection callbacks
+ */
+declare function useSelection(options?: UseSelectionOptions): UseSelectionResult;
+
+interface UseTelemetryOptions {
+    /** Initial telemetry bindings */
+    initialBindings?: TelemetryBinding[];
+    /** Callback when telemetry values change */
+    onTelemetryChange?: (bindings: TelemetryMap) => void;
+    /** Auto-refresh interval in milliseconds (0 = disabled) */
+    refreshInterval?: number;
+}
+interface UseTelemetryResult {
+    /** Current telemetry bindings map */
+    telemetry: TelemetryMap;
+    /** Update a single telemetry value */
+    updateTelemetry: (nodeId: string, value: TelemetryValue) => void;
+    /** Update multiple telemetry values at once */
+    updateTelemetryBatch: (updates: Array<{
+        nodeId: string;
+        value: TelemetryValue;
+        history?: number[];
+    }>) => void;
+    /** Get telemetry for a specific node */
+    getTelemetry: (nodeId: string) => TelemetryBinding | undefined;
+    /** Clear all telemetry data */
+    clearTelemetry: () => void;
+    /** Set telemetry bindings */
+    setBindings: (bindings: TelemetryBinding[]) => void;
+}
+/**
+ * Custom hook for managing telemetry data bindings
+ *
+ * Supports:
+ * - Real-time value updates
+ * - Status monitoring (normal, warning, alarm, fault, off)
+ * - Batch updates for performance
+ * - Auto-refresh capability
+ * - Quality indicators
+ */
+declare function useTelemetry(options?: UseTelemetryOptions): UseTelemetryResult;
+
+interface DragPoint {
+    x: number;
+    y: number;
+}
+interface DragState {
+    /** Whether drag is currently active */
+    isDragging: boolean;
+    /** Initial position when drag started */
+    startPosition: DragPoint | null;
+    /** Current drag offset from start */
+    offset: DragPoint;
+    /** ID of the item being dragged */
+    draggedId: string | null;
+}
+interface UseDragOptions {
+    /** Callback when drag starts */
+    onDragStart?: (id: string, position: DragPoint) => void;
+    /** Callback during drag movement */
+    onDragMove?: (id: string, offset: DragPoint, position: DragPoint) => void;
+    /** Callback when drag ends */
+    onDragEnd?: (id: string, offset: DragPoint, finalPosition: DragPoint) => void;
+    /** Snap to grid size (0 = no snap) */
+    snapToGrid?: number;
+    /** Minimum drag distance before triggering (prevents accidental drags) */
+    dragThreshold?: number;
+    /** Convert screen coordinates to world coordinates */
+    screenToWorld?: (screenX: number, screenY: number) => DragPoint;
+}
+interface UseDragResult {
+    /** Current drag state */
+    dragState: DragState;
+    /** Start dragging an item */
+    startDrag: (id: string, event: React.MouseEvent | React.TouchEvent, itemPosition: DragPoint) => void;
+    /** Cancel current drag */
+    cancelDrag: () => void;
+    /** Check if a specific item is being dragged */
+    isDraggingItem: (id: string) => boolean;
+}
+/**
+ * Custom hook for drag-and-drop functionality in P&ID diagrams
+ *
+ * Supports:
+ * - Mouse drag
+ * - Touch drag
+ * - Snap-to-grid
+ * - World coordinate conversion (for SVG viewBox)
+ * - Drag threshold to prevent accidental drags
+ */
+declare function useDrag(options?: UseDragOptions): UseDragResult;
+
+interface KeyboardShortcutsOptions {
+    /** Callback when Delete or Backspace is pressed */
+    onDelete?: () => void;
+    /** Callback when Ctrl+C is pressed */
+    onCopy?: () => void;
+    /** Callback when Ctrl+V is pressed */
+    onPaste?: () => void;
+    /** Callback when Ctrl+Z is pressed (undo) */
+    onUndo?: () => void;
+    /** Callback when Ctrl+Y or Ctrl+Shift+Z is pressed (redo) */
+    onRedo?: () => void;
+    /** Callback when Ctrl+A is pressed (select all) */
+    onSelectAll?: () => void;
+    /** Enable keyboard shortcuts (default: true) */
+    enabled?: boolean;
+}
+/**
+ * Custom hook for handling keyboard shortcuts in P&ID diagrams
+ *
+ * Supported shortcuts:
+ * - Delete/Backspace: Delete selected items
+ * - Ctrl+C: Copy selected items
+ * - Ctrl+V: Paste copied items
+ * - Ctrl+Z: Undo last action
+ * - Ctrl+Y / Ctrl+Shift+Z: Redo
+ * - Ctrl+A: Select all
+ */
+declare function useKeyboardShortcuts(options: KeyboardShortcutsOptions): void;
+
+interface PIDCanvasFeatures {
+    /** Enable pan interaction (default: true) */
+    pan?: boolean;
+    /** Enable zoom interaction (default: true) */
+    zoom?: boolean;
+    /** Enable selection interaction (default: false) */
+    selection?: boolean;
+    /** Allow multi-selection with Ctrl/Cmd key (default: true) */
+    multiSelect?: boolean;
+    /** Enable telemetry data overlays (default: false) */
+    telemetry?: boolean;
+    /** Enable drag-and-drop for nodes (default: false) */
+    dragNodes?: boolean;
+    /** Snap dragged nodes to grid (0 = no snap) */
+    snapToGrid?: number;
+    /** Enable keyboard shortcuts for delete/copy/paste (default: false) */
+    keyboardShortcuts?: boolean;
+    /** Enable pipe waypoint editing (drag waypoints, add/remove) (default: false) */
+    editPipeRoutes?: boolean;
+    /** Enable dropping symbols from library to add nodes (default: false) */
+    allowSymbolDrop?: boolean;
+    /** Enable connection drawing mode to create pipes between nodes (default: false) */
+    connectionMode?: boolean;
+}
+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;
+    /** Enable interactive features (pan, zoom, selection, telemetry, dragNodes) */
+    features?: PIDCanvasFeatures;
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: SelectionState) => void;
+    /** Callback when a node is clicked */
+    onNodeClick?: (nodeId: string) => void;
+    /** Callback when a pipe is clicked */
+    onPipeClick?: (pipeId: string) => void;
+    /** Callback when a node is moved (drag-and-drop) */
+    onNodeMove?: (nodeId: string, newX: number, newY: number) => void;
+    /** Callback when diagram changes (for internal state updates) */
+    onDiagramChange?: (diagram: Diagram) => void;
+    /** Callback when items are deleted */
+    onDelete?: (nodeIds: string[], pipeIds: string[]) => void;
+    /** Callback when items are copied (returns copied data for external storage) */
+    onItemsCopied?: (nodeIds: string[], pipeIds: string[]) => void;
+    /** Callback when paste is requested (external code should handle the paste logic) */
+    onPaste?: () => void;
+    /** Callback when a symbol is dropped onto canvas (returns symbol ID and position) */
+    onSymbolDrop?: (symbolId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Callback when a pipe is created via connection mode */
+    onPipeCreated?: (sourceNodeId: string, targetNodeId: string, sourcePortId?: string, targetPortId?: string) => void;
+    /** Telemetry data bindings for live values */
+    telemetry?: TelemetryMap;
+}
+/**
+ * PIDCanvas - Interactive canvas for rendering P&ID diagrams
+ *
+ * Features:
+ * - Renders nodes (PR #3) and pipes (PR #4) with static layout
+ * - Drag-and-drop: Drag nodes to reposition (PR #8)
+ *
+ * Future: Editing tools, symbol library UI
+ */
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, telemetry, ...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;
+    /** Show category filter */
+    showCategories?: boolean;
+    /** Custom symbol categories */
+    categories?: string[];
+}
+/**
+ * SymbolLibrary - Browse and drag symbols onto the canvas
+ *
+ * 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;
+
+interface NodeConfigPanelProps {
+    /** Selected node to configure */
+    node: NodeInstance;
+    /** Telemetry binding for the node (if any) */
+    binding: TelemetryBinding | null;
+    /** Callback when node properties are updated */
+    onUpdateNode: (updates: Partial<NodeInstance>) => void;
+    /** Callback when telemetry is added/updated */
+    onUpdateTelemetry: (updates: any) => void;
+    /** Callback when telemetry binding is added for the first time */
+    onAddTelemetry?: () => void;
+    /** Callback when node is removed */
+    onRemove: () => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom styles */
+    style?: react__default.CSSProperties;
+}
+/**
+ * NodeConfigPanel - Reusable configuration panel for editing node properties and telemetry
+ *
+ * @example
+ * ```tsx
+ * <NodeConfigPanel
+ *   node={selectedNode}
+ *   binding={telemetry.get(selectedNode.id)}
+ *   onUpdateNode={(updates) => updateNode(selectedNode.id, updates)}
+ *   onUpdateTelemetry={(updates) => updateTelemetryBatch([updates])}
+ *   onRemove={() => removeNode(selectedNode.id)}
+ * />
+ * ```
+ */
+declare function NodeConfigPanel({ node, binding, onUpdateNode, onUpdateTelemetry, onAddTelemetry, onRemove, className, style, }: NodeConfigPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Validates a diagram object structure
+ */
+declare function validateDiagram(diagram: unknown): {
+    valid: boolean;
+    errors: string[];
+};
+/**
+ * Serializes a diagram to JSON string
+ */
+declare function exportDiagram(diagram: Diagram): string;
+/**
+ * Parses a diagram from JSON string
+ */
+declare function importDiagram(json: string): Diagram;
+
+/**
+ * Calculate the world position of a port on a node instance
+ *
+ * Takes into account the node's transform (position, rotation, scale, flip)
+ * and the port's position within the symbol's viewBox
+ */
+declare function getPortWorldPosition(node: NodeInstance, portId: string): Point | null;
+/**
+ * Generate route points for a pipe from source port to destination port
+ *
+ * Options:
+ * - direct: Straight line from source to destination
+ * - orthogonal: Right-angle routing (future enhancement)
+ * - custom: Provide your own waypoints
+ */
+declare function generateRoutePoints(fromNode: NodeInstance, fromPortId: string, toNode: NodeInstance, toPortId: string, options?: {
+    style?: 'direct' | 'orthogonal';
+    waypoints?: Point[];
+}): Point[];
+/**
+ * Validate that a node has a specific port
+ */
+declare function nodeHasPort(node: NodeInstance, portId: string): boolean;
+
+/**
+ * Example P&ID diagram with a simple valve-pump-tank flow
+ * Uses automatic port-to-port connection routing
+ */
+declare const exampleDiagram: Diagram;
+
+/**
+ * Mock symbol library with basic P&ID shapes
+ * Phase 4 will add proper symbol library management
+ */
+declare const mockSymbolLibrary: Record<string, SymbolDefinition>;
+/**
+ * Get symbol definition by ID
+ */
+declare function getSymbolDefinition(symbolId: string): SymbolDefinition | undefined;
+/**
+ * Get all available symbol IDs
+ */
+declare function getAvailableSymbols(): string[];
+
+/**
+ * Telemetry status type
+ */
+type TelemetryStatus = 'normal' | 'warning' | 'alarm' | 'fault' | 'off';
+/**
+ * Threshold configuration
+ */
+interface Thresholds {
+    highHigh?: number;
+    high?: number;
+    low?: number;
+    lowLow?: number;
+}
+/**
+ * Calculate status based on value and thresholds
+ * @param value - Current numeric value
+ * @param thresholds - Threshold configuration
+ * @returns Status string
+ */
+declare function calculateThresholdStatus(value: number, thresholds?: Thresholds): TelemetryStatus;
+/**
+ * Default thresholds for typical industrial processes (percentage-based)
+ */
+declare const DEFAULT_THRESHOLDS: Thresholds;
+
+/**
+ * Options for simulation behavior
+ */
+interface SimulationOptions {
+    /** Update interval in milliseconds (default: 2000) */
+    interval?: number;
+    /** Whether simulation is enabled (default: true) */
+    enabled?: boolean;
+    /** Maximum change per update (default: 10) */
+    maxChange?: number;
+    /** Minimum value clamp (default: 0) */
+    minValue?: number;
+    /** Maximum value clamp (default: 100) */
+    maxValue?: number;
+    /** Maximum history length (default: 10) */
+    historyLength?: number;
+    /** Custom value generator function */
+    generateValue?: (currentValue: number, nodeId: string) => number;
+}
+/**
+ * Hook to automatically simulate telemetry data updates
+ * Randomly updates numeric telemetry values and calculates status based on thresholds
+ *
+ * @param telemetry - Telemetry map from useTelemetry
+ * @param updateTelemetryBatch - Batch update function from useTelemetry
+ * @param options - Simulation configuration options
+ *
+ * @example
+ * ```tsx
+ * const { telemetry, updateTelemetryBatch } = useTelemetry();
+ * useSimulation(telemetry, updateTelemetryBatch, {
+ *   interval: 2000,
+ *   enabled: mode === 'runtime'
+ * });
+ * ```
+ */
+declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { Button, type ButtonProps, ControlPanel, type ControlPanelProps, type ModeConfig, Selector, type SelectorOption, type SelectorProps, StatusIndicator, type StatusIndicatorProps, ThemeProvider, ThemeToggle, type ThemeToggleProps, ValueEntry, type ValueEntryProps, useTheme };
+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 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 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, useTheme, useViewBox, validateDiagram };