@procaaso/alphinity-ui-components 1.0.9 → 1.0.10

package/dist/index.d.cts

@@ -462,8 +462,14 @@ interface DeviceControlPanelProps {
     onClose: () => void;
     /** Panel position */
     position?: 'bottom' | 'side';
+    /** Horizontal alignment for bottom position (default: center) */
+    align?: 'left' | 'center' | 'right';
     /** Optimize for touch (larger targets) */
     touchOptimized?: boolean;
+    /** Compact mode - reduces padding and spacing */
+    compact?: boolean;
+    /** Font size scale (default: 1.0, smaller: 0.8, larger: 1.2) */
+    fontScale?: number;
     /** Maximum height for bottom position (default: 70vh) */
     maxHeight?: string;
     /** Maximum width for bottom position (default: none) */
@@ -479,7 +485,7 @@ interface DeviceControlPanelProps {
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
 }
-declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, 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

@@ -462,8 +462,14 @@ interface DeviceControlPanelProps {
     onClose: () => void;
     /** Panel position */
     position?: 'bottom' | 'side';
+    /** Horizontal alignment for bottom position (default: center) */
+    align?: 'left' | 'center' | 'right';
     /** Optimize for touch (larger targets) */
     touchOptimized?: boolean;
+    /** Compact mode - reduces padding and spacing */
+    compact?: boolean;
+    /** Font size scale (default: 1.0, smaller: 0.8, larger: 1.2) */
+    fontScale?: number;
     /** Maximum height for bottom position (default: 70vh) */
     maxHeight?: string;
     /** Maximum width for bottom position (default: none) */
@@ -479,7 +485,7 @@ interface DeviceControlPanelProps {
     /** Called when custom action clicked */
     onCustomAction?: (actionId: string) => void;
 }
-declare function DeviceControlPanel({ binding, onClose, position, touchOptimized, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function DeviceControlPanel({ binding, onClose, position, align, touchOptimized, compact, fontScale, maxHeight, maxWidth, onModeChange, onParameterChange, onStart, onStop, onCustomAction, }: DeviceControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 type DisplayMode = 'standard' | 'dashboard';
 interface FullscreenContainerProps {

package/dist/index.js

@@ -900,7 +900,10 @@ function DeviceControlPanel({
   binding,
   onClose,
   position = "bottom",
+  align = "center",
   touchOptimized = true,
+  compact = false,
+  fontScale = 1,
   maxHeight,
   maxWidth,
   onModeChange,
@@ -924,6 +927,20 @@ function DeviceControlPanel({
   const currentMode = binding.state.currentMode;
   const currentParams = binding.parameters[currentMode] || [];
   const touchSize = touchOptimized ? 56 : 40;
+  const spacing = {
+    padding: compact ? "12px" : "20px",
+    gap: compact ? "6px" : "8px",
+    marginBottom: compact ? "10px" : "16px",
+    itemPadding: compact ? "8px 10px" : "10px 12px"
+  };
+  const fontSize = {
+    title: Math.round(14 * fontScale),
+    label: Math.round(11 * fontScale),
+    value: Math.round(13 * fontScale),
+    input: Math.round(14 * fontScale),
+    button: Math.round(12 * fontScale),
+    status: Math.round(10 * fontScale)
+  };
   const currentModeObj = binding.modes.find((m) => m.value === currentMode);
   const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
   const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
@@ -962,12 +979,9 @@ function DeviceControlPanel({
     position: "fixed",
     ...position === "bottom" ? {
       bottom: 0,
-      left: 0,
-      right: 0,
+      ...align === "left" ? { left: 0, right: "auto" } : align === "right" ? { right: 0, left: "auto" } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto" },
       animation: "slideUp 0.3s ease-out",
-      maxWidth,
-      marginLeft: "auto",
-      marginRight: "auto"
+      maxWidth
     } : {
       right: 0,
       top: 0,
@@ -980,7 +994,7 @@ function DeviceControlPanel({
     borderRadius: position === "bottom" ? "8px 8px 0 0" : "8px 0 0 8px",
     boxShadow: "none",
     border: `2px solid ${borderColor}`,
-    padding: "20px",
+    padding: spacing.padding,
     zIndex: 9999,
     maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
     overflowY: "auto",
@@ -1006,7 +1020,7 @@ function DeviceControlPanel({
               {
                 style: {
                   margin: 0,
-                  fontSize: "14px",
+                  fontSize: `${fontSize.title}px`,
                   fontWeight: 600,
                   fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
@@ -1058,11 +1072,11 @@ function DeviceControlPanel({
           display: "flex",
           alignItems: "center",
           gap: "12px",
-          padding: "10px 12px",
+          padding: spacing.itemPadding,
           backgroundColor: surfaceColor,
           border: `1px solid ${borderColor}`,
           borderRadius: "6px",
-          marginBottom: "16px"
+          marginBottom: spacing.marginBottom
         },
         children: [
           /* @__PURE__ */ jsx8(
@@ -1084,7 +1098,7 @@ function DeviceControlPanel({
                 style: {
                   fontWeight: 600,
                   textTransform: "uppercase",
-                  fontSize: "11px",
+                  fontSize: `${fontSize.label}px`,
                   fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
                   color: textColor
@@ -1142,7 +1156,7 @@ function DeviceControlPanel({
           children: "Mode"
         }
       ),
-      /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: binding.modes.map((mode) => {
+      /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: spacing.gap, flexWrap: "wrap" }, children: binding.modes.map((mode) => {
         const isSelected = mode.value === currentMode;
         const isEnabled = mode.enabled !== false;
         return /* @__PURE__ */ jsx8(
@@ -1158,7 +1172,7 @@ function DeviceControlPanel({
               color: isSelected ? "#000000" : textColor,
               border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
               borderRadius: "6px",
-              fontSize: "11px",
+              fontSize: `${fontSize.label}px`,
               fontWeight: 600,
               fontFamily: "Arial, sans-serif",
               letterSpacing: "0.5px",
@@ -1172,14 +1186,14 @@ function DeviceControlPanel({
         );
       }) })
     ] }),
-    currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "16px" }, children: [
+    currentParams.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: spacing.marginBottom }, children: [
       /* @__PURE__ */ jsx8(
         "label",
         {
           style: {
             display: "block",
-            marginBottom: "8px",
-            fontSize: "11px",
+            marginBottom: spacing.gap,
+            fontSize: `${fontSize.label}px`,
             fontWeight: 600,
             textTransform: "uppercase",
             letterSpacing: "0.5px",
@@ -1193,8 +1207,8 @@ function DeviceControlPanel({
         "div",
         {
           style: {
-            marginBottom: "10px",
-            padding: "10px",
+            marginBottom: spacing.gap,
+            padding: spacing.itemPadding,
             backgroundColor: surfaceColor,
             border: `1px solid ${borderColor}`,
             borderRadius: "6px"
@@ -1203,13 +1217,17 @@ function DeviceControlPanel({
             /* @__PURE__ */ jsxs7(
               "div",
               {
-                style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" },
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: spacing.gap
+                },
                 children: [
                   /* @__PURE__ */ jsx8(
                     "span",
                     {
                       style: {
-                        fontSize: "11px",
+                        fontSize: `${fontSize.label}px`,
                         fontWeight: 600,
                         textTransform: "uppercase",
                         letterSpacing: "0.5px",
@@ -1223,7 +1241,7 @@ function DeviceControlPanel({
                     "span",
                     {
                       style: {
-                        fontSize: "13px",
+                        fontSize: `${fontSize.value}px`,
                         fontWeight: 700,
                         fontFamily: "Arial, sans-serif",
                         color: textColor
@@ -1308,7 +1326,7 @@ function DeviceControlPanel({
                   border: `1px solid ${borderColor}`,
                   borderRadius: "6px",
                   padding: "0 12px",
-                  fontSize: "14px",
+                  fontSize: `${fontSize.input}px`,
                   fontFamily: "Arial, sans-serif",
                   fontWeight: 600
                 }
@@ -1319,7 +1337,7 @@ function DeviceControlPanel({
         param.id
       ))
     ] }),
-    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
+    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
       activeCapabilities?.canStart && /* @__PURE__ */ jsx8(
         "button",
         {