@procaaso/alphinity-ui-components 1.0.7 → 1.0.9

package/dist/index.d.cts

@@ -246,6 +246,26 @@ interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivEl
  */
 declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
 
+/**
+ * Device control capabilities and commands
+ */
+interface ControlCapabilities {
+    /** Can the device be started? */
+    canStart?: boolean;
+    /** Can the device be stopped? */
+    canStop?: boolean;
+    /** Can the device be paused? */
+    canPause?: boolean;
+    /** Can the device be reset? */
+    canReset?: boolean;
+    /** Custom actions available */
+    customActions?: Array<{
+        id: string;
+        label: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    }>;
+}
 /**
  * Device control mode option
  */
@@ -258,6 +278,8 @@ interface ControlMode {
     enabled?: boolean;
     /** Icon or emoji to display (optional) */
     icon?: string;
+    /** Mode-specific capabilities (overrides binding-level capabilities when mode is active) */
+    capabilities?: ControlCapabilities;
 }
 /**
  * Control parameter definition (setpoint, adjustment, etc.)
@@ -290,26 +312,8 @@ interface ControlParameter {
     }>;
     /** Custom validation function */
     validate?: (value: any) => boolean | string;
-}
-/**
- * Device control capabilities and commands
- */
-interface ControlCapabilities {
-    /** Can the device be started? */
-    canStart?: boolean;
-    /** Can the device be stopped? */
-    canStop?: boolean;
-    /** Can the device be paused? */
-    canPause?: boolean;
-    /** Can the device be reset? */
-    canReset?: boolean;
-    /** Custom actions available */
-    customActions?: Array<{
-        id: string;
-        label: string;
-        icon?: string;
-        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
-    }>;
+    /** Modes where this parameter is visible (if empty/undefined, visible in all modes) */
+    modes?: string[];
 }
 /**
  * Device control state
@@ -460,6 +464,10 @@ interface DeviceControlPanelProps {
     position?: 'bottom' | 'side';
     /** Optimize for touch (larger targets) */
     touchOptimized?: boolean;
+    /** Maximum height for bottom position (default: 70vh) */
+    maxHeight?: string;
+    /** Maximum width for bottom position (default: none) */
+    maxWidth?: string;
     /** Called when mode changes */
     onModeChange?: (mode: string) => void;
     /** Called when parameter changes */
@@ -471,7 +479,7 @@ interface DeviceControlPanelProps {
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
 }
-declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {

package/dist/index.d.ts

@@ -246,6 +246,26 @@ interface NodeControlsPanelProps extends react__default.HTMLAttributes<HTMLDivEl
  */
 declare const NodeControlsPanel: react__default.FC<NodeControlsPanelProps>;
 
+/**
+ * Device control capabilities and commands
+ */
+interface ControlCapabilities {
+    /** Can the device be started? */
+    canStart?: boolean;
+    /** Can the device be stopped? */
+    canStop?: boolean;
+    /** Can the device be paused? */
+    canPause?: boolean;
+    /** Can the device be reset? */
+    canReset?: boolean;
+    /** Custom actions available */
+    customActions?: Array<{
+        id: string;
+        label: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
+    }>;
+}
 /**
  * Device control mode option
  */
@@ -258,6 +278,8 @@ interface ControlMode {
     enabled?: boolean;
     /** Icon or emoji to display (optional) */
     icon?: string;
+    /** Mode-specific capabilities (overrides binding-level capabilities when mode is active) */
+    capabilities?: ControlCapabilities;
 }
 /**
  * Control parameter definition (setpoint, adjustment, etc.)
@@ -290,26 +312,8 @@ interface ControlParameter {
     }>;
     /** Custom validation function */
     validate?: (value: any) => boolean | string;
-}
-/**
- * Device control capabilities and commands
- */
-interface ControlCapabilities {
-    /** Can the device be started? */
-    canStart?: boolean;
-    /** Can the device be stopped? */
-    canStop?: boolean;
-    /** Can the device be paused? */
-    canPause?: boolean;
-    /** Can the device be reset? */
-    canReset?: boolean;
-    /** Custom actions available */
-    customActions?: Array<{
-        id: string;
-        label: string;
-        icon?: string;
-        variant?: 'primary' | 'secondary' | 'alarm' | 'warning';
-    }>;
+    /** Modes where this parameter is visible (if empty/undefined, visible in all modes) */
+    modes?: string[];
 }
 /**
  * Device control state
@@ -460,6 +464,10 @@ interface DeviceControlPanelProps {
     position?: 'bottom' | 'side';
     /** Optimize for touch (larger targets) */
     touchOptimized?: boolean;
+    /** Maximum height for bottom position (default: 70vh) */
+    maxHeight?: string;
+    /** Maximum width for bottom position (default: none) */
+    maxWidth?: string;
     /** Called when mode changes */
     onModeChange?: (mode: string) => void;
     /** Called when parameter changes */
@@ -471,7 +479,7 @@ interface DeviceControlPanelProps {
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
 }
-declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {

package/dist/index.js

@@ -901,6 +901,8 @@ function DeviceControlPanel({
   onClose,
   position = "bottom",
   touchOptimized = true,
+  maxHeight,
+  maxWidth,
   onModeChange,
   onParameterChange,
   onStart,
@@ -922,6 +924,8 @@ function DeviceControlPanel({
   const currentMode = binding.state.currentMode;
   const currentParams = binding.parameters[currentMode] || [];
   const touchSize = touchOptimized ? 56 : 40;
+  const currentModeObj = binding.modes.find((m) => m.value === currentMode);
+  const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
   const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
   const surfaceColor = "#f5f6f7";
   const borderColor = "#d2d2d2";
@@ -960,7 +964,10 @@ function DeviceControlPanel({
       bottom: 0,
       left: 0,
       right: 0,
-      animation: "slideUp 0.3s ease-out"
+      animation: "slideUp 0.3s ease-out",
+      maxWidth,
+      marginLeft: "auto",
+      marginRight: "auto"
     } : {
       right: 0,
       top: 0,
@@ -975,7 +982,7 @@ function DeviceControlPanel({
     border: `2px solid ${borderColor}`,
     padding: "20px",
     zIndex: 9999,
-    maxHeight: position === "bottom" ? "70vh" : "100vh",
+    maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
     overflowY: "auto",
     ...binding.display?.style
   };
@@ -1312,8 +1319,8 @@ function DeviceControlPanel({
         param.id
       ))
     ] }),
-    binding.display?.showStartStop !== false && (binding.capabilities?.canStart || binding.capabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
-      binding.capabilities?.canStart && /* @__PURE__ */ jsx8(
+    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
+      activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
         "button",
         {
           onClick: onStart,
@@ -1335,7 +1342,7 @@ function DeviceControlPanel({
           children: "START"
         }
       ),
-      binding.capabilities?.canStop && /* @__PURE__ */ jsx8(
+      activeCapabilities?.canStop && /* @__PURE__ */ jsx8(
         "button",
         {
           onClick: onStop,
@@ -1358,7 +1365,7 @@ function DeviceControlPanel({
         }
       )
     ] }),
-    binding.capabilities?.customActions && binding.capabilities.customActions.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px" }, children: binding.capabilities.customActions.map((action) => /* @__PURE__ */ jsxs7(
+    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),