@buoy-gg/shared-ui 2.1.10 → 2.1.12

package/lib/commonjs/dataViewer/DataViewer.js

@@ -131,9 +131,7 @@ const DataViewer = ({
 };
 exports.DataViewer = DataViewer;
 const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
+  container: {},
   header: {
     flexDirection: "row",
     justifyContent: "space-between",

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -60,7 +60,6 @@ const STABLE_STYLES = _reactNative.StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     borderColor: _index.gameUIColors.primary + "14" // border-white/[0.08]
-    // Remove flex: 1 and minHeight to allow natural sizing
   },
   header: {
     flexDirection: "column",
@@ -888,7 +887,7 @@ const VirtualizedDataExplorer = ({
 
   // Simple keyExtractor without useCallback [[memory:4875251]]
   const keyExtractor = item => item.id;
-  const hasData = data && (typeof data === "object" || Array.isArray(data)) && (Array.isArray(data) ? data.length > 0 : Object.keys(data).length > 0);
+  const hasData = data !== null && data !== undefined && (typeof data === "string" ? data.length > 0 : typeof data === "number" || typeof data === "boolean" ? true : Array.isArray(data) ? data.length > 0 : typeof data === "object" ? Object.keys(data).length > 0 : false);
 
   // Raw mode: render data directly without header/container
   if (rawMode) {
@@ -908,7 +907,7 @@ const VirtualizedDataExplorer = ({
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        flex: 1
+        minHeight: isProcessing ? 40 : flatData.length * ITEM_HEIGHT
       },
       children: isProcessing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: {
@@ -1023,7 +1022,7 @@ const VirtualizedDataExplorer = ({
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
-          height: Math.min(flatData.length * ITEM_HEIGHT, 400),
+          height: flatData.length * ITEM_HEIGHT,
           position: "relative"
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IndentGuidesOverlay.IndentGuidesOverlay, {

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-03-19T00:08:43.640Z
+ * Generated at: 2026-04-21T17:25:18.600Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/ImageOverlayIcon.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageOverlayIcon = void 0;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ImageOverlayIcon - Icon for the Image Overlay dev tool
+ * Shows layered image frames with a mountain/sun motif,
+ * representing design mockup overlay functionality.
+ */
+const ImageOverlayIcon = ({
+  size = 24,
+  color = "#A855F7",
+  glowColor
+}) => {
+  const scale = size / 24;
+  const activeColor = color;
+  const activeGlow = glowColor || color;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 14 * scale,
+        borderRadius: 2 * scale,
+        borderWidth: 1.5 * scale,
+        borderColor: activeGlow,
+        backgroundColor: "transparent",
+        left: 2 * scale,
+        top: 2 * scale,
+        opacity: 0.25
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 15 * scale,
+        height: 15 * scale,
+        borderRadius: 2.5 * scale,
+        backgroundColor: activeGlow,
+        left: 7 * scale,
+        top: 7 * scale,
+        opacity: 0.12
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 14 * scale,
+        borderRadius: 2 * scale,
+        borderWidth: 1.5 * scale,
+        borderColor: activeColor,
+        backgroundColor: "transparent",
+        left: 8 * scale,
+        top: 8 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 3 * scale,
+        height: 3 * scale,
+        borderRadius: 1.5 * scale,
+        backgroundColor: activeColor,
+        left: 11 * scale,
+        top: 11 * scale,
+        opacity: 0.8
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 6 * scale,
+        height: 1.5 * scale,
+        backgroundColor: activeColor,
+        left: 9 * scale,
+        top: 18.5 * scale,
+        opacity: 0.7,
+        transform: [{
+          rotate: "-35deg"
+        }],
+        transformOrigin: "right center",
+        borderRadius: 0.5 * scale
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 6 * scale,
+        height: 1.5 * scale,
+        backgroundColor: activeColor,
+        left: 14.5 * scale,
+        top: 18.5 * scale,
+        opacity: 0.7,
+        transform: [{
+          rotate: "35deg"
+        }],
+        transformOrigin: "left center",
+        borderRadius: 0.5 * scale
+      }
+    }), [{
+      x: 2,
+      y: 2
+    }, {
+      x: 16,
+      y: 2
+    }, {
+      x: 2,
+      y: 16
+    }].map((pos, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 2 * scale,
+        height: 2 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: activeGlow,
+        left: (pos.x - 1) * scale,
+        top: (pos.y - 1) * scale,
+        opacity: 0.5
+      }
+    }, `dot-${i}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        width: 8 * scale,
+        height: 1.5 * scale,
+        borderRadius: 0.75 * scale,
+        backgroundColor: "#fff",
+        left: 11 * scale,
+        top: 8.5 * scale,
+        opacity: 0.15
+      }
+    })]
+  });
+};
+exports.ImageOverlayIcon = ImageOverlayIcon;

package/lib/commonjs/icons/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   HighlightUpdatesIcon: true,
   RenderCountIcon: true,
   BenchmarkIcon: true,
+  ImageOverlayIcon: true,
   IconBackground: true
 };
 Object.defineProperty(exports, "BenchmarkIcon", {
@@ -60,6 +61,12 @@ Object.defineProperty(exports, "IconBackground", {
     return _IconBackground.IconBackground;
   }
 });
+Object.defineProperty(exports, "ImageOverlayIcon", {
+  enumerable: true,
+  get: function () {
+    return _ImageOverlayIcon.ImageOverlayIcon;
+  }
+});
 Object.defineProperty(exports, "LaptopIcon", {
   enumerable: true,
   get: function () {
@@ -160,6 +167,7 @@ var _RouteMapIcon = require("./RouteMapIcon.js");
 var _StackPulseIcon = require("./StackPulseIcon.js");
 var _RenderCountIcon = require("./RenderCountIcon.js");
 var _BenchmarkIcon = require("./BenchmarkIcon.js");
+var _ImageOverlayIcon = require("./ImageOverlayIcon.js");
 var _IconBackground = require("./IconBackground.js");
 var _lucideIcons = require("./lucide-icons.js");
 Object.keys(_lucideIcons).forEach(function (key) {

package/lib/commonjs/ui/components/EventHistoryViewer/EventHistoryViewer.js

@@ -82,8 +82,9 @@ const EventHistoryViewer = exports.EventHistoryViewer = /*#__PURE__*/(0, _react.
         diffDescription: diffViewDescription,
         diffIcon: diffViewIcon,
         diffDisabled: diffDisabled
-      }), activeView === "current" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), activeView === "current" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.contentSection,
+        showsVerticalScrollIndicator: true,
         children: renderCurrentView()
       }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.contentSection,

package/lib/commonjs/ui/components/WindowControls.js

@@ -4,9 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WindowControls = WindowControls;
+exports.setExpandableWindowControls = setExpandableWindowControls;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
+// ============================================================================
+// Global expandable setting — controlled via setExpandableWindowControls()
+// ============================================================================
+
+let _expandableEnabled = true; // Default ON
+
+/**
+ * Set whether window controls use the expandable iPad-style behavior.
+ * Called by the floating-tools settings system when the setting changes.
+ */
+function setExpandableWindowControls(enabled) {
+  _expandableEnabled = enabled;
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -24,19 +40,28 @@ const COLORS = {
   toggleMode: "#28C840" // Green - expand/fullscreen button
 };
 
-// macOS-style circular button dimensions
-const BUTTON_SIZE = 12; // Small circular buttons
-const BUTTON_SPACING = 8; // Spacing between buttons
-const ICON_SIZE = 8; // Icon size inside the buttons
+// Collapsed state (original small dots)
+const BUTTON_SIZE = 12;
+const BUTTON_SPACING = 8;
+const ICON_SIZE = 8;
+
+// Expanded state (large easy-to-tap buttons)
+const EXPANDED_BUTTON_SIZE = 36;
+const EXPANDED_BUTTON_SPACING = 12;
+const EXPANDED_ICON_SIZE = 16;
+const EXPANDED_PADDING = 8;
+
+// Auto-dismiss timeout
+const AUTO_DISMISS_MS = 3000;
 
 // ============================================================================
 // Component
 // ============================================================================
 
 /**
- * macOS-style window control buttons with Windows ordering.
- * Circular colored buttons inspired by macOS window controls.
- * Order (left to right): Minimize (yellow) → Expand (green) → Close (red)
+ * iPad-style expandable window controls.
+ * Default: small macOS-style colored dots. On tap, expands to reveal
+ * large, easy-to-press buttons. Auto-dismisses after timeout or tap outside.
  */
 function WindowControls({
   onClose,
@@ -45,44 +70,236 @@ function WindowControls({
   mode
 }) {
   // Show action-based icon: what will happen when clicked
-  // - If floating, show DockBottom (clicking will dock to bottom)
-  // - If bottomSheet, show FloatWindow (clicking will make it float)
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onMinimize,
-      style: [styles.button, styles.minimizeButton],
-      activeOpacity: 0.8,
-      accessibilityLabel: "Minimize modal",
-      accessibilityRole: "button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
-        size: ICON_SIZE,
-        color: "#7A5A00",
-        strokeWidth: 1.5
-      })
-    }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onToggleMode,
-      style: [styles.button, styles.expandButton],
-      activeOpacity: 0.8,
-      accessibilityLabel: toggleModeLabel,
+
+  // When expandable is disabled, render original directly-tappable buttons
+  if (!_expandableEnabled) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.container,
+      children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onMinimize,
+        style: [styles.dot, styles.minimizeDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: "Minimize modal",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
+          size: ICON_SIZE,
+          color: "#7A5A00",
+          strokeWidth: 1.5
+        })
+      }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onToggleMode,
+        style: [styles.dot, styles.expandDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: toggleModeLabel,
+        accessibilityRole: "button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
+          size: ICON_SIZE,
+          color: "#004A1A",
+          strokeWidth: 1.5
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onClose,
+        style: [styles.dot, styles.closeDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: "Close modal",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+          size: ICON_SIZE,
+          color: "#4A0000",
+          strokeWidth: 1.5
+        })
+      })]
+    });
+  }
+
+  // On real devices, use iPad-style expandable controls
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandableWindowControls, {
+    onClose: onClose,
+    onMinimize: onMinimize,
+    onToggleMode: onToggleMode,
+    mode: mode
+  });
+}
+function ExpandableWindowControls({
+  onClose,
+  onMinimize,
+  onToggleMode,
+  mode
+}) {
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [triggerLayout, setTriggerLayout] = (0, _react.useState)(null);
+  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const dismissTimeout = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
+  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
+  const clearDismissTimer = (0, _react.useCallback)(() => {
+    if (dismissTimeout.current) {
+      clearTimeout(dismissTimeout.current);
+      dismissTimeout.current = null;
+    }
+  }, []);
+  const collapse = (0, _react.useCallback)(() => {
+    clearDismissTimer();
+    _reactNative.Animated.spring(expandAnim, {
+      toValue: 0,
+      tension: 200,
+      friction: 20,
+      useNativeDriver: true
+    }).start(() => {
+      setExpanded(false);
+    });
+  }, [expandAnim, clearDismissTimer]);
+  const expand = (0, _react.useCallback)(() => {
+    // Measure trigger position on screen before expanding
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({
+        x,
+        y,
+        width,
+        height
+      });
+      setExpanded(true);
+      _reactNative.Animated.spring(expandAnim, {
+        toValue: 1,
+        tension: 180,
+        friction: 18,
+        useNativeDriver: true
+      }).start();
+
+      // Auto-dismiss
+      clearDismissTimer();
+      dismissTimeout.current = setTimeout(collapse, AUTO_DISMISS_MS);
+    });
+  }, [expandAnim, collapse, clearDismissTimer]);
+  (0, _react.useEffect)(() => {
+    return clearDismissTimer;
+  }, [clearDismissTimer]);
+  const handleAction = (0, _react.useCallback)(action => {
+    collapse();
+    action();
+  }, [collapse]);
+
+  // Animation interpolations
+  const scale = expandAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.3, 1]
+  });
+  const opacity = expandAnim.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 0.8, 1]
+  });
+
+  // Count visible buttons for layout calculation
+  const buttonCount = 1 + (onMinimize ? 1 : 0) + (onToggleMode ? 1 : 0);
+  const expandedWidth = buttonCount * EXPANDED_BUTTON_SIZE + (buttonCount - 1) * EXPANDED_BUTTON_SPACING + EXPANDED_PADDING * 2;
+  const expandedHeight = EXPANDED_BUTTON_SIZE + EXPANDED_PADDING * 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      ref: triggerRef,
+      onPress: expand,
+      activeOpacity: 0.7,
+      accessibilityLabel: "Open window controls",
       accessibilityRole: "button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
-        size: ICON_SIZE,
-        color: "#004A1A",
-        strokeWidth: 1.5
+      style: styles.trigger,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.container,
+        children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, styles.minimizeDot],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
+            size: ICON_SIZE,
+            color: "#7A5A00",
+            strokeWidth: 1.5
+          })
+        }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, styles.expandDot],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
+            size: ICON_SIZE,
+            color: "#004A1A",
+            strokeWidth: 1.5
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, styles.closeDot],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+            size: ICON_SIZE,
+            color: "#4A0000",
+            strokeWidth: 1.5
+          })
+        })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: onClose,
-      style: [styles.button, styles.closeButton],
-      activeOpacity: 0.8,
-      accessibilityLabel: "Close modal",
-      accessibilityRole: "button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-        size: ICON_SIZE,
-        color: "#4A0000",
-        strokeWidth: 1.5
+    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      transparent: true,
+      visible: true,
+      statusBarTranslucent: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+        onPress: collapse,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.overlay,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+            style: [styles.expandedPanel, {
+              transform: [{
+                scale
+              }],
+              opacity,
+              // Position the expanded panel anchored to trigger's top-right
+              top: triggerLayout ? triggerLayout.y - EXPANDED_PADDING : 0,
+              right: triggerLayout ? Math.max(4,
+              // screen width minus trigger's right edge
+              // We don't need Dimensions here since we use measureInWindow
+              // which gives absolute coords. right = screenWidth - (x + width)
+              0) : 0,
+              // Position using left instead, anchored to trigger's right edge
+              left: triggerLayout ? triggerLayout.x + triggerLayout.width - expandedWidth : undefined
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.expandedContainer,
+                children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  onPress: () => handleAction(onMinimize),
+                  style: [styles.expandedButton, styles.minimizeButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: "Minimize modal",
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#7A5A00",
+                    strokeWidth: 2
+                  })
+                }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  onPress: () => handleAction(onToggleMode),
+                  style: [styles.expandedButton, styles.expandButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: toggleModeLabel,
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#004A1A",
+                    strokeWidth: 2
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  onPress: () => handleAction(onClose),
+                  style: [styles.expandedButton, styles.closeButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: "Close modal",
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#4A0000",
+                    strokeWidth: 2
+                  })
+                })]
+              })
+            })
+          })
+        })
       })
     })]
   });
@@ -93,26 +310,70 @@ function WindowControls({
 // ============================================================================
 
 const styles = _reactNative.StyleSheet.create({
+  trigger: {
+    padding: 2
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
     gap: BUTTON_SPACING
   },
-  button: {
+  dot: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
     borderRadius: BUTTON_SIZE / 2,
-    // Perfectly circular
     alignItems: "center",
     justifyContent: "center"
   },
-  closeButton: {
+  closeDot: {
+    backgroundColor: COLORS.close
+  },
+  minimizeDot: {
+    backgroundColor: COLORS.minimize
+  },
+  expandDot: {
+    backgroundColor: COLORS.toggleMode
+  },
+  overlay: {
+    flex: 1
+  },
+  expandedPanel: {
+    position: "absolute",
+    zIndex: 9999
+  },
+  expandedContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: EXPANDED_BUTTON_SPACING,
+    backgroundColor: "rgba(16, 22, 35, 0.95)",
+    borderRadius: (EXPANDED_BUTTON_SIZE + EXPANDED_PADDING * 2) / 2,
+    paddingHorizontal: EXPANDED_PADDING,
+    paddingVertical: EXPANDED_PADDING,
+    borderWidth: 1,
+    borderColor: "rgba(0, 184, 230, 0.3)",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 12,
+    elevation: 30
+  },
+  expandedButton: {
+    width: EXPANDED_BUTTON_SIZE,
+    height: EXPANDED_BUTTON_SIZE,
+    borderRadius: EXPANDED_BUTTON_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeButtonExpanded: {
     backgroundColor: COLORS.close
   },
-  minimizeButton: {
+  minimizeButtonExpanded: {
     backgroundColor: COLORS.minimize
   },
-  expandButton: {
+  expandButtonExpanded: {
     backgroundColor: COLORS.toggleMode
   }
 });

package/lib/commonjs/ui/components/index.js

@@ -327,6 +327,12 @@ Object.defineProperty(exports, "WindowControls", {
     return _WindowControls.WindowControls;
   }
 });
+Object.defineProperty(exports, "setExpandableWindowControls", {
+  enumerable: true,
+  get: function () {
+    return _WindowControls.setExpandableWindowControls;
+  }
+});
 var _BackButton = require("./BackButton.js");
 var _ValueTypeBadge = require("./ValueTypeBadge.js");
 var _StorageTypeBadge = require("./StorageTypeBadge.js");