@buoy-gg/shared-ui 2.1.9 → 2.1.11

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TickProvider = TickProvider;
+exports.useTick = useTick;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TickContext = /*#__PURE__*/(0, _react.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.
+ */
+function TickProvider({
+  children,
+  intervalMs = 5_000
+}) {
+  const [tick, setTick] = (0, _react.useState)(() => Date.now());
+  (0, _react.useEffect)(() => {
+    const id = setInterval(() => {
+      setTick(Date.now());
+    }, intervalMs);
+    return () => {
+      clearInterval(id);
+    };
+  }, [intervalMs]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TickContext.Provider, {
+    value: tick,
+    children: children
+  });
+}
+
+/**
+ * Returns the current tick from the nearest TickProvider, or null if none exists.
+ */
+function useTick() {
+  return (0, _react.useContext)(TickContext);
+}

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

@@ -3,10 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "TickProvider", {
+  enumerable: true,
+  get: function () {
+    return _TickContext.TickProvider;
+  }
+});
 Object.defineProperty(exports, "formatRelativeTime", {
   enumerable: true,
   get: function () {
     return _formatRelativeTime.formatRelativeTime;
   }
 });
-var _formatRelativeTime = require("./formatRelativeTime.js");
+Object.defineProperty(exports, "useRelativeTime", {
+  enumerable: true,
+  get: function () {
+    return _useRelativeTime.useRelativeTime;
+  }
+});
+Object.defineProperty(exports, "useTick", {
+  enumerable: true,
+  get: function () {
+    return _TickContext.useTick;
+  }
+});
+var _formatRelativeTime = require("./formatRelativeTime.js");
+var _useRelativeTime = require("./useRelativeTime.js");
+var _TickContext = require("./TickContext.js");

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRelativeTime = useRelativeTime;
+var _react = require("react");
+var _formatRelativeTime = require("./formatRelativeTime.js");
+var _TickContext = require("./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
+ */
+function useRelativeTime(timestamp) {
+  const contextTick = (0, _TickContext.useTick)();
+  const hasProvider = contextTick !== null;
+  const [fallbackNow, setFallbackNow] = (0, _react.useState)(() => Date.now());
+  const timestampMs = timestamp ? timestamp instanceof Date ? timestamp.getTime() : timestamp : 0;
+
+  // Only run a per-item interval when there's no TickProvider
+  (0, _react.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 (0, _formatRelativeTime.formatRelativeTime)(timestampMs, now);
+}

package/lib/module/dataViewer/DataViewer.js

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

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -57,7 +57,6 @@ const STABLE_STYLES = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     borderColor: gameUIColors.primary + "14" // border-white/[0.08]
-    // Remove flex: 1 and minHeight to allow natural sizing
   },
   header: {
     flexDirection: "column",
@@ -885,7 +884,7 @@ export 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) {
@@ -905,7 +904,7 @@ export const VirtualizedDataExplorer = ({
     }
     return /*#__PURE__*/_jsx(View, {
       style: {
-        flex: 1
+        minHeight: isProcessing ? 40 : flatData.length * ITEM_HEIGHT
       },
       children: isProcessing ? /*#__PURE__*/_jsx(View, {
         style: {
@@ -1020,7 +1019,7 @@ export const VirtualizedDataExplorer = ({
         })
       }) : /*#__PURE__*/_jsxs(View, {
         style: {
-          height: Math.min(flatData.length * ITEM_HEIGHT, 400),
+          height: flatData.length * ITEM_HEIGHT,
           position: "relative"
         },
         children: [/*#__PURE__*/_jsx(IndentGuidesOverlay, {

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

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-03-18T16:07:43.485Z
+ * Generated at: 2026-04-18T22:04:30.014Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/icons/ImageOverlayIcon.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "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.
+ */
+export const ImageOverlayIcon = ({
+  size = 24,
+  color = "#A855F7",
+  glowColor
+}) => {
+  const scale = size / 24;
+  const activeColor = color;
+  const activeGlow = glowColor || color;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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
+      }
+    })]
+  });
+};

package/lib/module/icons/index.js

@@ -17,6 +17,7 @@ export { RouteMapIcon, RouteIcon, NavigationIcon } from "./RouteMapIcon.js";
 export { StackPulseIcon, RenderPulseIcon, HighlightUpdatesIcon } from "./StackPulseIcon.js";
 export { RenderCountIcon } from "./RenderCountIcon.js";
 export { BenchmarkIcon } from "./BenchmarkIcon.js";
+export { ImageOverlayIcon } from "./ImageOverlayIcon.js";
 export { IconBackground } from "./IconBackground.js";
 
 // Export lucide icons

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

@@ -9,7 +9,7 @@
  */
 
 import React, { memo } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
 import { EventStepperFooter } from "../EventStepperFooter.js";
 import { ViewToggleCards } from "./ViewToggleCards.js";
@@ -77,8 +77,9 @@ export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer(
         diffDescription: diffViewDescription,
         diffIcon: diffViewIcon,
         diffDisabled: diffDisabled
-      }), activeView === "current" && /*#__PURE__*/_jsx(View, {
+      }), activeView === "current" && /*#__PURE__*/_jsx(ScrollView, {
         style: styles.contentSection,
+        showsVerticalScrollIndicator: true,
         children: renderCurrentView()
       }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
         style: styles.contentSection,