@buoy-gg/shared-ui 2.1.10 → 2.1.12

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

@@ -1,12 +1,27 @@
 "use strict";
 
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { View, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, Animated, Modal } from "react-native";
 import { X, Minus, DockBottom, FloatWindow } from "../../icons/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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.
+ */
+export function setExpandableWindowControls(enabled) {
+  _expandableEnabled = enabled;
+}
 
 // ============================================================================
 // Types
 // ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 // ============================================================================
 // Constants - macOS Style Window Controls
 // ============================================================================
@@ -20,19 +35,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.
  */
 export function WindowControls({
   onClose,
@@ -41,44 +65,236 @@ export 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" ? DockBottom : FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onMinimize,
-      style: [styles.button, styles.minimizeButton],
-      activeOpacity: 0.8,
-      accessibilityLabel: "Minimize modal",
-      accessibilityRole: "button",
-      children: /*#__PURE__*/_jsx(Minus, {
-        size: ICON_SIZE,
-        color: "#7A5A00",
-        strokeWidth: 1.5
-      })
-    }), onToggleMode && /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.container,
+      children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onMinimize,
+        style: [styles.dot, styles.minimizeDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: "Minimize modal",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(Minus, {
+          size: ICON_SIZE,
+          color: "#7A5A00",
+          strokeWidth: 1.5
+        })
+      }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onToggleMode,
+        style: [styles.dot, styles.expandDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: toggleModeLabel,
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(ToggleModeIcon, {
+          size: ICON_SIZE,
+          color: "#004A1A",
+          strokeWidth: 1.5
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onClose,
+        style: [styles.dot, styles.closeDot],
+        activeOpacity: 0.8,
+        accessibilityLabel: "Close modal",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(X, {
+          size: ICON_SIZE,
+          color: "#4A0000",
+          strokeWidth: 1.5
+        })
+      })]
+    });
+  }
+
+  // On real devices, use iPad-style expandable controls
+  return /*#__PURE__*/_jsx(ExpandableWindowControls, {
+    onClose: onClose,
+    onMinimize: onMinimize,
+    onToggleMode: onToggleMode,
+    mode: mode
+  });
+}
+function ExpandableWindowControls({
+  onClose,
+  onMinimize,
+  onToggleMode,
+  mode
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [triggerLayout, setTriggerLayout] = useState(null);
+  const expandAnim = useRef(new Animated.Value(0)).current;
+  const dismissTimeout = useRef(null);
+  const triggerRef = useRef(null);
+  const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
+  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
+  const clearDismissTimer = useCallback(() => {
+    if (dismissTimeout.current) {
+      clearTimeout(dismissTimeout.current);
+      dismissTimeout.current = null;
+    }
+  }, []);
+  const collapse = useCallback(() => {
+    clearDismissTimer();
+    Animated.spring(expandAnim, {
+      toValue: 0,
+      tension: 200,
+      friction: 20,
+      useNativeDriver: true
+    }).start(() => {
+      setExpanded(false);
+    });
+  }, [expandAnim, clearDismissTimer]);
+  const expand = useCallback(() => {
+    // Measure trigger position on screen before expanding
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({
+        x,
+        y,
+        width,
+        height
+      });
+      setExpanded(true);
+      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]);
+  useEffect(() => {
+    return clearDismissTimer;
+  }, [clearDismissTimer]);
+  const handleAction = 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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      ref: triggerRef,
+      onPress: expand,
+      activeOpacity: 0.7,
+      accessibilityLabel: "Open window controls",
       accessibilityRole: "button",
-      children: /*#__PURE__*/_jsx(ToggleModeIcon, {
-        size: ICON_SIZE,
-        color: "#004A1A",
-        strokeWidth: 1.5
+      style: styles.trigger,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.container,
+        children: [onMinimize && /*#__PURE__*/_jsx(View, {
+          style: [styles.dot, styles.minimizeDot],
+          children: /*#__PURE__*/_jsx(Minus, {
+            size: ICON_SIZE,
+            color: "#7A5A00",
+            strokeWidth: 1.5
+          })
+        }), onToggleMode && /*#__PURE__*/_jsx(View, {
+          style: [styles.dot, styles.expandDot],
+          children: /*#__PURE__*/_jsx(ToggleModeIcon, {
+            size: ICON_SIZE,
+            color: "#004A1A",
+            strokeWidth: 1.5
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.dot, styles.closeDot],
+          children: /*#__PURE__*/_jsx(X, {
+            size: ICON_SIZE,
+            color: "#4A0000",
+            strokeWidth: 1.5
+          })
+        })]
       })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onClose,
-      style: [styles.button, styles.closeButton],
-      activeOpacity: 0.8,
-      accessibilityLabel: "Close modal",
-      accessibilityRole: "button",
-      children: /*#__PURE__*/_jsx(X, {
-        size: ICON_SIZE,
-        color: "#4A0000",
-        strokeWidth: 1.5
+    }), expanded && /*#__PURE__*/_jsx(Modal, {
+      transparent: true,
+      visible: true,
+      statusBarTranslucent: true,
+      children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: collapse,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.overlay,
+          children: /*#__PURE__*/_jsx(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__*/_jsx(TouchableWithoutFeedback, {
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.expandedContainer,
+                children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
+                  onPress: () => handleAction(onMinimize),
+                  style: [styles.expandedButton, styles.minimizeButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: "Minimize modal",
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/_jsx(Minus, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#7A5A00",
+                    strokeWidth: 2
+                  })
+                }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
+                  onPress: () => handleAction(onToggleMode),
+                  style: [styles.expandedButton, styles.expandButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: toggleModeLabel,
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/_jsx(ToggleModeIcon, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#004A1A",
+                    strokeWidth: 2
+                  })
+                }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                  onPress: () => handleAction(onClose),
+                  style: [styles.expandedButton, styles.closeButtonExpanded],
+                  activeOpacity: 0.7,
+                  accessibilityLabel: "Close modal",
+                  accessibilityRole: "button",
+                  children: /*#__PURE__*/_jsx(X, {
+                    size: EXPANDED_ICON_SIZE,
+                    color: "#4A0000",
+                    strokeWidth: 2
+                  })
+                })]
+              })
+            })
+          })
+        })
       })
     })]
   });
@@ -89,26 +305,70 @@ export function WindowControls({
 // ============================================================================
 
 const styles = 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/module/ui/components/index.js

@@ -27,7 +27,7 @@ export { CollapsibleSection } from "./CollapsibleSection.js";
 export { DataInspector } from "./DataInspector.js";
 export { SearchBar } from "./SearchBar.js";
 export { DynamicFilterView } from "./DynamicFilterView.js";
-export { WindowControls } from "./WindowControls.js";
+export { WindowControls, setExpandableWindowControls } from "./WindowControls.js";
 export { EventStepperFooter } from "./EventStepperFooter.js";
 export { ExpandablePopover } from "./ExpandablePopover.js";
 export { PowerToggleButton } from "./PowerToggleButton.js";

package/lib/module/utils/time/TickContext.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TickContext = /*#__PURE__*/createContext(null);
+/**
+ * Provides a shared clock tick to all descendants.
+ * Wrap each devtools modal/screen in a single TickProvider so that all list items
+ * share one timer instead of each item creating its own interval.
+ *
+ * Only mounted (visible) items consume the context, so FlatList virtualization
+ * ensures off-screen items don't re-render.
+ */
+export function TickProvider({
+  children,
+  intervalMs = 5_000
+}) {
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTick(Date.now());
+    }, intervalMs);
+    return () => {
+      clearInterval(id);
+    };
+  }, [intervalMs]);
+  return /*#__PURE__*/_jsx(TickContext.Provider, {
+    value: tick,
+    children: children
+  });
+}
+
+/**
+ * Returns the current tick from the nearest TickProvider, or null if none exists.
+ */
+export function useTick() {
+  return useContext(TickContext);
+}

package/lib/module/utils/time/index.js

@@ -1,3 +1,5 @@
 "use strict";
 
-export { formatRelativeTime } from "./formatRelativeTime.js";
+export { formatRelativeTime } from "./formatRelativeTime.js";
+export { useRelativeTime } from "./useRelativeTime.js";
+export { TickProvider, useTick } from "./TickContext.js";

package/lib/module/utils/time/useRelativeTime.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { useState, useEffect } from "react";
+import { formatRelativeTime } from "./formatRelativeTime.js";
+import { useTick } from "./TickContext.js";
+
+/**
+ * Hook that returns a live-updating relative time string (e.g., "5s ago", "2m ago").
+ *
+ * When inside a `<TickProvider>`, uses the shared tick — no per-item timer.
+ * When used standalone (no provider), falls back to its own interval.
+ *
+ * @param timestamp - The timestamp to format (Date, number in ms, or nullish)
+ * @returns Formatted relative time string, or empty string if no timestamp
+ */
+export function useRelativeTime(timestamp) {
+  const contextTick = useTick();
+  const hasProvider = contextTick !== null;
+  const [fallbackNow, setFallbackNow] = useState(() => Date.now());
+  const timestampMs = timestamp ? timestamp instanceof Date ? timestamp.getTime() : timestamp : 0;
+
+  // Only run a per-item interval when there's no TickProvider
+  useEffect(() => {
+    if (hasProvider || !timestampMs) return;
+    const id = setInterval(() => {
+      setFallbackNow(Date.now());
+    }, 5_000);
+    return () => clearInterval(id);
+  }, [hasProvider, timestampMs]);
+  if (!timestampMs) return "";
+  const now = hasProvider ? contextTick : fallbackNow;
+  return formatRelativeTime(timestampMs, now);
+}

package/lib/typescript/commonjs/dataViewer/VirtualizedDataExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedDataExplorer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/VirtualizedDataExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAOL,EAAE,EAEH,MAAM,OAAO,CAAC;AAo+Bf,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA6PpE,CAAC"}
+{"version":3,"file":"VirtualizedDataExplorer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/VirtualizedDataExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAOL,EAAE,EAEH,MAAM,OAAO,CAAC;AAm+Bf,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAmQpE,CAAC"}

package/lib/typescript/commonjs/hooks/safe-area-impl.d.ts

@@ -1,7 +1,7 @@
 /**
  * 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/typescript/commonjs/icons/ImageOverlayIcon.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+interface ImageOverlayIconProps {
+    size?: number;
+    color?: string;
+    glowColor?: string;
+}
+/**
+ * ImageOverlayIcon - Icon for the Image Overlay dev tool
+ * Shows layered image frames with a mountain/sun motif,
+ * representing design mockup overlay functionality.
+ */
+export declare const ImageOverlayIcon: FC<ImageOverlayIconProps>;
+export {};
+//# sourceMappingURL=ImageOverlayIcon.d.ts.map

package/lib/typescript/commonjs/icons/ImageOverlayIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageOverlayIcon.d.ts","sourceRoot":"","sources":["../../../../src/icons/ImageOverlayIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAmKtD,CAAC"}

package/lib/typescript/commonjs/icons/index.d.ts

@@ -10,6 +10,7 @@ export { RouteMapIcon, RouteIcon, NavigationIcon } from "./RouteMapIcon";
 export { StackPulseIcon, RenderPulseIcon, HighlightUpdatesIcon, } from "./StackPulseIcon";
 export { RenderCountIcon } from "./RenderCountIcon";
 export { BenchmarkIcon } from "./BenchmarkIcon";
+export { ImageOverlayIcon } from "./ImageOverlayIcon";
 export { IconBackground } from "./IconBackground";
 export * from "./lucide-icons";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/icons/index.tsx"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EACL,cAAc,EACd,eAAe,EACf,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/icons/index.tsx"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EACL,cAAc,EACd,eAAe,EACf,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,cAAc,gBAAgB,CAAC"}

package/lib/typescript/commonjs/ui/components/WindowControls.d.ts

@@ -1,4 +1,9 @@
 import type { ModalMode } from "../../JsModal";
+/**
+ * Set whether window controls use the expandable iPad-style behavior.
+ * Called by the floating-tools settings system when the setting changes.
+ */
+export declare function setExpandableWindowControls(enabled: boolean): void;
 interface WindowControlsProps {
     /** Handler for close button */
     onClose: () => void;
@@ -10,9 +15,9 @@ interface WindowControlsProps {
     mode?: ModalMode;
 }
 /**
- * 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.
  */
 export declare function WindowControls({ onClose, onMinimize, onToggleMode, mode, }: WindowControlsProps): import("react").JSX.Element;
 export {};

package/lib/typescript/commonjs/ui/components/WindowControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WindowControls.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/WindowControls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,mBAAmB;IAC3B,+BAA+B;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAsBD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,EACV,YAAY,EACZ,IAAI,GACL,EAAE,mBAAmB,+BAoDrB"}
+{"version":3,"file":"WindowControls.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/WindowControls.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,OAAO,QAE3D;AAMD,UAAU,mBAAmB;IAC3B,+BAA+B;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA+BD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,EACV,YAAY,EACZ,IAAI,GACL,EAAE,mBAAmB,+BAoDrB"}

package/lib/typescript/commonjs/ui/components/index.d.ts

@@ -28,7 +28,7 @@ export { DataInspector } from "./DataInspector";
 export { SearchBar } from "./SearchBar";
 export { DynamicFilterView, } from "./DynamicFilterView";
 export type { DynamicFilterConfig, } from "./DynamicFilterView";
-export { WindowControls } from "./WindowControls";
+export { WindowControls, setExpandableWindowControls } from "./WindowControls";
 export { EventStepperFooter } from "./EventStepperFooter";
 export type { EventStepperFooterProps } from "./EventStepperFooter";
 export { ExpandablePopover } from "./ExpandablePopover";

package/lib/typescript/commonjs/ui/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/index.ts"],"names":[],"mappings":"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"}

package/lib/typescript/commonjs/utils/time/TickContext.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+interface TickProviderProps {
+    children: ReactNode;
+    /** Interval in ms between ticks. Defaults to 5_000 (5 seconds). */
+    intervalMs?: number;
+}
+/**
+ * Provides a shared clock tick to all descendants.
+ * Wrap each devtools modal/screen in a single TickProvider so that all list items
+ * share one timer instead of each item creating its own interval.
+ *
+ * Only mounted (visible) items consume the context, so FlatList virtualization
+ * ensures off-screen items don't re-render.
+ */
+export declare function TickProvider({ children, intervalMs, }: TickProviderProps): import("react").JSX.Element;
+/**
+ * Returns the current tick from the nearest TickProvider, or null if none exists.
+ */
+export declare function useTick(): number | null;
+export {};
+//# sourceMappingURL=TickContext.d.ts.map

package/lib/typescript/commonjs/utils/time/TickContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TickContext.d.ts","sourceRoot":"","sources":["../../../../../src/utils/time/TickContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAkB,GACnB,EAAE,iBAAiB,+BAcnB;AAED;;GAEG;AACH,wBAAgB,OAAO,IAAI,MAAM,GAAG,IAAI,CAEvC"}

package/lib/typescript/commonjs/utils/time/index.d.ts

@@ -1,2 +1,4 @@
 export { formatRelativeTime } from './formatRelativeTime';
+export { useRelativeTime } from './useRelativeTime';
+export { TickProvider, useTick } from './TickContext';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/utils/time/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/lib/typescript/commonjs/utils/time/useRelativeTime.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook that returns a live-updating relative time string (e.g., "5s ago", "2m ago").
+ *
+ * When inside a `<TickProvider>`, uses the shared tick — no per-item timer.
+ * When used standalone (no provider), falls back to its own interval.
+ *
+ * @param timestamp - The timestamp to format (Date, number in ms, or nullish)
+ * @returns Formatted relative time string, or empty string if no timestamp
+ */
+export declare function useRelativeTime(timestamp: Date | number | null | undefined): string;
+//# sourceMappingURL=useRelativeTime.d.ts.map