@buoy-gg/core 7.0.15 → 7.0.16

package/lib/module/floatingMenu/MinimizedToolsStack.web.js

@@ -0,0 +1,284 @@
+"use strict";
+
+/**
+ * MinimizedToolsStack — Web twin of MinimizedToolsStack.tsx +
+ * shared-ui's ExpandablePopover (inlined: the popover is only used here on
+ * web). A vertical stack of minimized-tool icons fused to the top of the
+ * floating bubble's drag handle:
+ * - collapsed: a 28px "peek" tab (chevron-up + count) with top corners only
+ * - expanded: animated-height panel, icons newest-first, collapse chevron
+ * - expanded state persists under "@react_buoy_minimized_stack_expanded"
+ * - each icon runs the native randomized glitch loop (translateX shake +
+ *   opacity flicker + scale pulse, 80ms), scheduled every 2-6s + index*300ms
+ *
+ * Data comes from the web AppHost (openApps with minimized === true) instead
+ * of the native MinimizedToolsContext — same derivation the MinimizedDock
+ * used before this replaced it.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { persistentStorage } from '@buoy-gg/shared-ui';
+import { useAppHost } from "./AppHost.web.js";
+
+// native MinimizedToolsStack.tsx constants
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PEEK_HEIGHT = 28;
+const TOOL_ITEM_SIZE = 32;
+const ICON_GAP = 6;
+const TOOLBAR_PADDING = 8;
+const COLLAPSE_BUTTON_SIZE = 24;
+const STORAGE_KEY_EXPANDED = '@react_buoy_minimized_stack_expanded';
+const GLITCH_DURATION_MS = 80;
+const MIN_GLITCH_DELAY = 2000;
+const MAX_GLITCH_DELAY = 6000;
+
+// native shared-ui buoyColors (gameUIColors.ts) — card + textMuted
+const CARD = '#1A1A1A';
+const TEXT_MUTED = '#888888';
+function ChevronGlyph({
+  down = false
+}) {
+  // native: ChevronUp size 12, strokeWidth 2, buoyColors.textMuted
+  return /*#__PURE__*/_jsx("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    style: {
+      transform: down ? 'rotate(180deg)' : undefined
+    },
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M18 15l-6-6-6 6",
+      fill: "none",
+      stroke: TEXT_MUTED,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+function GlitchToolButton({
+  title,
+  icon,
+  index,
+  onPress
+}) {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    let mounted = true;
+    let timer;
+    const runGlitch = () => {
+      // native: parallel translateX shake / opacity flicker / scale pulse,
+      // all inside GLITCH_DURATION_MS — one WAAPI animation with offsets.
+      innerRef.current?.animate([{
+        transform: 'translateX(0) scale(1)',
+        opacity: 1,
+        offset: 0
+      }, {
+        transform: 'translateX(3px) scale(1.05)',
+        opacity: 0.4,
+        offset: 0.2
+      }, {
+        transform: 'translateX(-3px) scale(1.1)',
+        opacity: 1,
+        offset: 0.4
+      }, {
+        transform: 'translateX(2px) scale(1.0)',
+        opacity: 0.6,
+        offset: 0.6
+      }, {
+        transform: 'translateX(-1px) scale(0.95)',
+        opacity: 1,
+        offset: 0.8
+      }, {
+        transform: 'translateX(0) scale(1)',
+        opacity: 1,
+        offset: 1
+      }], {
+        duration: GLITCH_DURATION_MS,
+        easing: 'linear'
+      });
+    };
+    const schedule = initial => {
+      const delay = initial ? 500 + Math.random() * 1500 + index * 200 : MIN_GLITCH_DELAY + Math.random() * (MAX_GLITCH_DELAY - MIN_GLITCH_DELAY) + index * 300;
+      timer = setTimeout(() => {
+        if (!mounted) return;
+        runGlitch();
+        schedule(false);
+      }, delay);
+    };
+    schedule(true);
+    return () => {
+      mounted = false;
+      clearTimeout(timer);
+    };
+  }, [index]);
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    "aria-label": `Restore ${title}`,
+    onClick: onPress,
+    style: {
+      width: TOOL_ITEM_SIZE,
+      height: TOOL_ITEM_SIZE,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: innerRef,
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: icon
+    })
+  });
+}
+export function MinimizedToolsStack({
+  containerWidth = 32
+}) {
+  const {
+    openApps,
+    restore
+  } = useAppHost();
+  const minimized = openApps.filter(app => app.minimized && app.launchMode !== 'toggle-only');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isStateRestored, setIsStateRestored] = useState(false);
+
+  // Restore + persist the expanded flag (native ExpandablePopover persistState).
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      const saved = await persistentStorage.getItem(STORAGE_KEY_EXPANDED);
+      if (!cancelled && saved === 'true') setIsExpanded(true);
+      if (!cancelled) setIsStateRestored(true);
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!isStateRestored) return;
+    void persistentStorage.setItem(STORAGE_KEY_EXPANDED, isExpanded ? 'true' : 'false');
+  }, [isExpanded, isStateRestored]);
+  const handleRestore = useCallback(instanceId => {
+    restore(instanceId);
+  }, [restore]);
+  if (minimized.length === 0) return null;
+
+  // native: expandedHeight = padding + n*item + (n-1)*gap + gap + collapse + 4
+  const expandedHeight = TOOLBAR_PADDING + minimized.length * TOOL_ITEM_SIZE + (minimized.length - 1) * ICON_GAP + ICON_GAP + COLLAPSE_BUTTON_SIZE + 4;
+  const frame = {
+    // native peekButton/expandedContainer: card bg, top corners 6, 1px border
+    // on top/left/right only (fuses with the bubble below)
+    backgroundColor: CARD,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderTop: `1px solid ${TEXT_MUTED}66`,
+    borderLeft: `1px solid ${TEXT_MUTED}66`,
+    borderRight: `1px solid ${TEXT_MUTED}66`,
+    borderBottom: 'none',
+    boxSizing: 'border-box'
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      height: PEEK_HEIGHT,
+      overflow: 'visible',
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: containerWidth,
+        height: isExpanded ? expandedHeight : 0,
+        opacity: isExpanded ? 1 : 0,
+        overflow: 'hidden',
+        transition: 'height 200ms ease, opacity 200ms ease',
+        pointerEvents: isExpanded ? 'auto' : 'none',
+        ...frame
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          height: expandedHeight,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          paddingTop: TOOLBAR_PADDING,
+          gap: ICON_GAP,
+          boxSizing: 'border-box'
+        },
+        children: [[...minimized].reverse().map((app, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
+          title: app.title || app.id,
+          icon: app.icon ?? /*#__PURE__*/_jsx("span", {
+            style: {
+              color: '#fff',
+              fontSize: 13
+            },
+            children: (app.title || app.id).slice(0, 1).toUpperCase()
+          }),
+          index: index,
+          onPress: () => handleRestore(app.instanceId)
+        }, app.instanceId)), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": "Collapse",
+          onClick: () => setIsExpanded(false),
+          style: {
+            width: '100%',
+            height: COLLAPSE_BUTTON_SIZE,
+            marginTop: 3,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0
+          },
+          children: /*#__PURE__*/_jsx(ChevronGlyph, {
+            down: true
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      "aria-label": `Show ${minimized.length} minimized tools`,
+      onClick: () => setIsExpanded(true),
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: containerWidth,
+        height: PEEK_HEIGHT,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        cursor: 'pointer',
+        padding: 0,
+        opacity: isExpanded ? 0 : 1,
+        transform: isExpanded ? 'scale(0.9)' : 'scale(1)',
+        transition: 'opacity 200ms ease, transform 200ms ease',
+        pointerEvents: isExpanded ? 'none' : 'auto',
+        ...frame
+      },
+      children: [/*#__PURE__*/_jsx(ChevronGlyph, {}), minimized.length > 1 && /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 9,
+          fontWeight: 600,
+          color: TEXT_MUTED,
+          marginLeft: 1
+        },
+        children: minimized.length
+      })]
+    })]
+  });
+}

package/lib/module/floatingMenu/autoDiscoverPresets.js

@@ -314,6 +314,22 @@ export function autoDiscoverPresets() {
         return null;
       }
     }
+  },
+  // ASSETS — bundled-asset inventory (sizes / scale coverage / unused)
+  {
+    name: "@buoy-gg/assets",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          assetsToolPreset
+        } = require("@buoy-gg/assets");
+        return assetsToolPreset;
+      } catch (e) {
+        reportOptionalRequireError("@buoy-gg/assets", e);
+        return null;
+      }
+    }
   }];
 
   // Attempt to load each preset

package/lib/module/floatingMenu/autoExternalSync.js

@@ -46,6 +46,7 @@ let impersonateModule = null;
 let perfMonitorModule = null;
 let jsTopModule = null;
 let imagesModule = null;
+let assetsModule = null;
 let expoConstantsModule = null;
 
 // Catch bodies report through reportOptionalRequireError: silent for a
@@ -136,6 +137,11 @@ try {
 } catch (e) {
   reportOptionalRequireError("@buoy-gg/images", e);
 }
+try {
+  assetsModule = require("@buoy-gg/assets");
+} catch (e) {
+  reportOptionalRequireError("@buoy-gg/assets", e);
+}
 try {
   expoConstantsModule = require("expo-constants");
 } catch (e) {
@@ -270,6 +276,9 @@ export function AutoExternalSync({
     if (imagesModule?.imagesSyncAdapter) {
       map.images = imagesModule.imagesSyncAdapter;
     }
+    if (assetsModule?.assetsSyncAdapter) {
+      map.assets = assetsModule.assetsSyncAdapter;
+    }
     return map;
   }, [queryAdapter, requiredEnvVars]);
   useExternalSync({

package/lib/module/floatingMenu/dial/DialDevTools.js

@@ -11,9 +11,9 @@ import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } f
 import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useProAccess } from "@buoy-gg/license";
-import { useAppHost } from "../AppHost.js";
-import { OnboardingTooltip } from "./OnboardingTooltip.js";
-import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, DIAL_ICON_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
+import { useAppHost } from "../AppHost";
+import { OnboardingTooltip } from "./OnboardingTooltip";
+import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, DIAL_ICON_GLYPH_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
 
 // The circle size depends on the live window width, so it's computed inside
 // the component via useWindowDimensions — a module-scope Dimensions.get
@@ -227,8 +227,11 @@ export const DialDevTools = ({
       map.set(tool.id, {
         id: tool.id,
         name: tool.name,
-        // Pre-render the icon at the standard dial slot size so it looks correct.
-        icon: tool.renderIcon(DIAL_ICON_SIZE),
+        // Pre-render the icon at the standard GLYPH size (not the slot size —
+        // the slot also holds the label + "Unavailable" caption, so a glyph
+        // rendered at DIAL_ICON_SIZE overflows the slot and looks ~2x bigger
+        // than installed tools' icons).
+        icon: tool.renderIcon(DIAL_ICON_GLYPH_SIZE),
         iconComponent: undefined,
         color: tool.color,
         unavailable: true,