@buoy-gg/core 7.0.41 → 7.0.42

package/lib/module/floatingMenu/MinimizedToolsStack.js

@@ -1,285 +1 @@
-"use strict";
-
-import React, { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
-import { Animated, TouchableOpacity, View, Text, StyleSheet, Easing } from "react-native";
-import { ExpandablePopover, getToolAttention, subscribeToolAttention } from "@buoy-gg/shared-ui";
-import { useMinimizedTools } from "./MinimizedToolsContext.js";
-
-/**
- * A hidden tool's "I need you". See `setToolAttention` in shared-ui — the tool
- * publishes, the rail draws. Read through useSyncExternalStore so a badge set
- * from inside a minimized sheet lands on the chip without the rail polling.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function useToolAttention(toolId) {
-  return useSyncExternalStore(subscribeToolAttention, () => getToolAttention(toolId), () => getToolAttention(toolId));
-}
-const ATTENTION_COLORS = {
-  needsInput: "#FF8329",
-  done: "#20C997",
-  failed: "#FF3B30"
-};
-
-/** needsInput outranks failed outranks done — the peek shows the one that matters most. */
-const ATTENTION_RANK = {
-  needsInput: 3,
-  failed: 2,
-  done: 1
-};
-
-/** The strongest attention across every minimized tool, for the folded peek. */
-function useStrongestAttention(toolIds) {
-  const key = toolIds.join("|");
-  return useSyncExternalStore(subscribeToolAttention, () => strongest(key), () => strongest(key));
-}
-const strongestCache = new Map();
-function strongest(key) {
-  let best = null;
-  for (const id of key ? key.split("|") : []) {
-    const a = getToolAttention(id);
-    if (a && (!best || ATTENTION_RANK[a.kind] > ATTENTION_RANK[best.kind])) best = a;
-  }
-  // Same value → same object, or useSyncExternalStore re-renders forever.
-  const prev = strongestCache.get(key);
-  if (prev && best && prev.kind === best.kind && prev.label === best.label) return prev;
-  if (!prev && !best) return null;
-  strongestCache.set(key, best);
-  return best;
-}
-
-// ============================================================================
-// Constants
-// ============================================================================
-
-const PEEK_HEIGHT = 28;
-const TOOLBAR_WIDTH = 44;
-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";
-
-// Glitch effect constants
-const GLITCH_DURATION_MS = 80;
-const MIN_GLITCH_DELAY = 2000;
-const MAX_GLITCH_DELAY = 6000;
-
-// ============================================================================
-// Glitch Tool Button Component
-// ============================================================================
-
-function GlitchToolButton({
-  tool,
-  onSelect,
-  index
-}) {
-  const attention = useToolAttention(tool.id);
-  const glitchX = useRef(new Animated.Value(0)).current;
-  const glitchOpacity = useRef(new Animated.Value(1)).current;
-  const glitchScale = useRef(new Animated.Value(1)).current;
-  useEffect(() => {
-    let isMounted = true;
-    const runGlitch = () => {
-      if (!isMounted) return;
-      const d = GLITCH_DURATION_MS;
-      Animated.parallel([
-      // X displacement - quick shake
-      Animated.sequence([Animated.timing(glitchX, {
-        toValue: 3,
-        duration: d * 0.2,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: -3,
-        duration: d * 0.2,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: 2,
-        duration: d * 0.2,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: -1,
-        duration: d * 0.2,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: 0,
-        duration: d * 0.2,
-        easing: Easing.linear,
-        useNativeDriver: true
-      })]),
-      // Opacity flicker
-      Animated.sequence([Animated.timing(glitchOpacity, {
-        toValue: 0.4,
-        duration: d * 0.25,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 1,
-        duration: d * 0.25,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0.6,
-        duration: d * 0.25,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 1,
-        duration: d * 0.25,
-        useNativeDriver: true
-      })]),
-      // Scale pulse
-      Animated.sequence([Animated.timing(glitchScale, {
-        toValue: 1.1,
-        duration: d * 0.3,
-        useNativeDriver: true
-      }), Animated.timing(glitchScale, {
-        toValue: 0.95,
-        duration: d * 0.4,
-        useNativeDriver: true
-      }), Animated.timing(glitchScale, {
-        toValue: 1,
-        duration: d * 0.3,
-        useNativeDriver: true
-      })])]).start();
-    };
-    const scheduleNextGlitch = () => {
-      if (!isMounted) return;
-      const delay = MIN_GLITCH_DELAY + Math.random() * (MAX_GLITCH_DELAY - MIN_GLITCH_DELAY) + index * 300;
-      setTimeout(() => {
-        if (isMounted) {
-          runGlitch();
-          scheduleNextGlitch();
-        }
-      }, delay);
-    };
-    const initialDelay = 500 + Math.random() * 1500 + index * 200;
-    const timeoutId = setTimeout(() => {
-      if (isMounted) {
-        runGlitch();
-        scheduleNextGlitch();
-      }
-    }, initialDelay);
-    return () => {
-      isMounted = false;
-      clearTimeout(timeoutId);
-    };
-  }, [glitchX, glitchOpacity, glitchScale, index]);
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    onPress: () => onSelect(tool),
-    activeOpacity: 0.7,
-    style: styles.toolButton,
-    accessibilityLabel: attention ? `${tool.title} — ${attention.label}. Restore` : `Restore ${tool.title}`,
-    accessibilityRole: "button",
-    testID: `buoy-dock-restore-${tool.id}`,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        opacity: glitchOpacity,
-        transform: [{
-          translateX: glitchX
-        }, {
-          scale: glitchScale
-        }]
-      },
-      children: tool.icon
-    }), attention ? /*#__PURE__*/_jsx(View, {
-      style: [styles.badge, {
-        backgroundColor: ATTENTION_COLORS[attention.kind]
-      }],
-      testID: `buoy-dock-badge-${tool.id}-${attention.kind}`,
-      pointerEvents: "none",
-      children: attention.kind === "needsInput" ? /*#__PURE__*/_jsx(Text, {
-        style: styles.badgeText,
-        children: "!"
-      }) : null
-    }) : null]
-  });
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function MinimizedToolsStack({
-  onRestore,
-  containerWidth = TOOLBAR_WIDTH
-}) {
-  const {
-    minimizedTools,
-    restore
-  } = useMinimizedTools();
-  const peekAttention = useStrongestAttention(minimizedTools.map(t => t.id));
-
-  // Calculate expanded height based on number of tools
-  const expandedHeight = TOOLBAR_PADDING + minimizedTools.length * TOOL_ITEM_SIZE + (minimizedTools.length - 1) * ICON_GAP + ICON_GAP + COLLAPSE_BUTTON_SIZE + 4;
-
-  // Handle tool press (restore)
-  const handleToolPress = useCallback(tool => {
-    const restored = restore(tool.instanceId);
-    if (restored && onRestore) {
-      onRestore(restored);
-    }
-  }, [restore, onRestore]);
-  return /*#__PURE__*/_jsx(ExpandablePopover, {
-    hasItems: minimizedTools.length > 0,
-    itemCount: minimizedTools.length,
-    showCount: true,
-    width: containerWidth,
-    expandedHeight: expandedHeight,
-    persistState: true,
-    storageKey: STORAGE_KEY_EXPANDED,
-    peekHeight: PEEK_HEIGHT,
-    collapsedLabel: `Show ${minimizedTools.length} minimized tools`,
-    testID: "buoy-dock-peek",
-    collapseTestID: "buoy-dock-collapse",
-    attention: peekAttention ? {
-      color: ATTENTION_COLORS[peekAttention.kind],
-      glyph: peekAttention.kind === "needsInput" ? "!" : undefined,
-      label: peekAttention.label
-    } : null,
-    children: [...minimizedTools].reverse().map((tool, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
-      tool: tool,
-      onSelect: handleToolPress,
-      index: index
-    }, tool.instanceId))
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  toolButton: {
-    width: TOOL_ITEM_SIZE,
-    height: TOOL_ITEM_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "transparent"
-  },
-  // Top-right of the chip. Needs-input carries a glyph; done/failed are a dot —
-  // the colour says which, the glyph says "act".
-  badge: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    minWidth: 12,
-    height: 12,
-    borderRadius: 6,
-    paddingHorizontal: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1.5,
-    borderColor: "#0C0C0C"
-  },
-  badgeText: {
-    color: "#000",
-    fontSize: 8,
-    fontWeight: "800",
-    lineHeight: 9
-  }
-});
+"use strict";import q,{useCallback as C,useEffect as O,useRef as m,useSyncExternalStore as f}from"react";import{Animated as t,TouchableOpacity as S,View as V,Text as x,StyleSheet as L,Easing as d}from"react-native";import{ExpandablePopover as H,getToolAttention as h,subscribeToolAttention as v}from"@buoy-gg/shared-ui";import{useMinimizedTools as w}from"./MinimizedToolsContext.js";import{jsx as g,jsxs as G}from"react/jsx-runtime";function M(e){return f(v,()=>h(e),()=>h(e))}const I={needsInput:"#FF8329",done:"#20C997",failed:"#FF3B30"};const D={needsInput:3,failed:2,done:1};function R(e){const i=e.join("|");return f(v,()=>_(i),()=>_(i))}const N=new Map;function _(e){let i=null;for(const a of e?e.split("|"):[]){const o=h(a);if(o&&(!i||D[o.kind]>D[i.kind]))i=o}const n=N.get(e);if(n&&i&&n.kind===i.kind&&n.label===i.label)return n;if(!n&&!i)return null;N.set(e,i);return i}const P=28;const j=44;const p=32;const y=6;const z=8;const B=24;const $="@react_buoy_minimized_stack_expanded";const F=80;const A=2e3;const K=6e3;function W({tool:e,onSelect:i,index:n}){const a=M(e.id);const o=m(new t.Value(0)).current;const u=m(new t.Value(1)).current;const l=m(new t.Value(1)).current;O(()=>{let s=true;const c=()=>{if(!s)return;const r=F;t.parallel([t.sequence([t.timing(o,{toValue:3,duration:r*.2,easing:d.linear,useNativeDriver:true}),t.timing(o,{toValue:-3,duration:r*.2,easing:d.linear,useNativeDriver:true}),t.timing(o,{toValue:2,duration:r*.2,easing:d.linear,useNativeDriver:true}),t.timing(o,{toValue:-1,duration:r*.2,easing:d.linear,useNativeDriver:true}),t.timing(o,{toValue:0,duration:r*.2,easing:d.linear,useNativeDriver:true})]),t.sequence([t.timing(u,{toValue:.4,duration:r*.25,useNativeDriver:true}),t.timing(u,{toValue:1,duration:r*.25,useNativeDriver:true}),t.timing(u,{toValue:.6,duration:r*.25,useNativeDriver:true}),t.timing(u,{toValue:1,duration:r*.25,useNativeDriver:true})]),t.sequence([t.timing(l,{toValue:1.1,duration:r*.3,useNativeDriver:true}),t.timing(l,{toValue:.95,duration:r*.4,useNativeDriver:true}),t.timing(l,{toValue:1,duration:r*.3,useNativeDriver:true})])]).start()};const b=()=>{if(!s)return;const r=A+Math.random()*(K-A)+n*300;setTimeout(()=>{if(s){c();b()}},r)};const E=500+Math.random()*1500+n*200;const k=setTimeout(()=>{if(s){c();b()}},E);return()=>{s=false;clearTimeout(k)}},[o,u,l,n]);return G(S,{onPress:()=>i(e),activeOpacity:.7,style:T.toolButton,accessibilityLabel:a?`${e.title} \u2014 ${a.label}. Restore`:`Restore ${e.title}`,accessibilityRole:"button",testID:`buoy-dock-restore-${e.id}`,children:[g(t.View,{style:{opacity:u,transform:[{translateX:o},{scale:l}]},children:e.icon}),a?g(V,{style:[T.badge,{backgroundColor:I[a.kind]}],testID:`buoy-dock-badge-${e.id}-${a.kind}`,pointerEvents:"none",children:a.kind==="needsInput"?g(x,{style:T.badgeText,children:"!"}):null}):null]})}export function MinimizedToolsStack({onRestore:e,containerWidth:i=j}){const{minimizedTools:n,restore:a}=w();const o=R(n.map(s=>s.id));const u=z+n.length*p+(n.length-1)*y+y+B+4;const l=C(s=>{const c=a(s.instanceId);if(c&&e){e(c)}},[a,e]);return g(H,{hasItems:n.length>0,itemCount:n.length,showCount:true,width:i,expandedHeight:u,persistState:true,storageKey:$,peekHeight:P,collapsedLabel:`Show ${n.length} minimized tools`,testID:"buoy-dock-peek",collapseTestID:"buoy-dock-collapse",attention:o?{color:I[o.kind],glyph:o.kind==="needsInput"?"!":void 0,label:o.label}:null,children:[...n].reverse().map((s,c)=>g(W,{tool:s,onSelect:l,index:c},s.instanceId))})}const T=L.create({toolButton:{width:p,height:p,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},badge:{position:"absolute",top:0,right:0,minWidth:12,height:12,borderRadius:6,paddingHorizontal:2,alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:"#0C0C0C"},badgeText:{color:"#000",fontSize:8,fontWeight:"800",lineHeight:9}});

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

@@ -1,374 +1 @@
-"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, useSyncExternalStore } from 'react';
-import { persistentStorage, getToolAttention, subscribeToolAttention } from '@buoy-gg/shared-ui';
-
-/** Twin of the native hook — see MinimizedToolsStack.tsx. */
-function useToolAttention(toolId) {
-  return useSyncExternalStore(subscribeToolAttention, () => getToolAttention(toolId), () => getToolAttention(toolId));
-}
-const ATTENTION_COLORS = {
-  needsInput: '#FF8329',
-  done: '#20C997',
-  failed: '#FF3B30'
-};
-const ATTENTION_RANK = {
-  needsInput: 3,
-  failed: 2,
-  done: 1
-};
-const strongestCache = new Map();
-function strongest(key) {
-  let best = null;
-  for (const id of key ? key.split('|') : []) {
-    const a = getToolAttention(id);
-    if (a && (!best || ATTENTION_RANK[a.kind] > ATTENTION_RANK[best.kind])) best = a;
-  }
-  const prev = strongestCache.get(key);
-  if (prev && best && prev.kind === best.kind && prev.label === best.label) return prev;
-  if (!prev && !best) return null;
-  strongestCache.set(key, best);
-  return best;
-}
-/** Twin of the native hook: the strongest attention across the folded dock. */
-function useStrongestAttention(toolIds) {
-  const key = toolIds.join('|');
-  return useSyncExternalStore(subscribeToolAttention, () => strongest(key), () => strongest(key));
-}
-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({
-  id,
-  title,
-  icon,
-  index,
-  onPress
-}) {
-  const attention = useToolAttention(id);
-  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__*/_jsxs("button", {
-    type: "button",
-    "aria-label": attention ? `${title} — ${attention.label}. Restore` : `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',
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: innerRef,
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      children: icon
-    }), attention ? /*#__PURE__*/_jsx("span", {
-      "aria-hidden": true,
-      "data-testid": `buoy-dock-badge-${id}-${attention.kind}`,
-      style: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        minWidth: 12,
-        height: 12,
-        borderRadius: 6,
-        padding: '0 2px',
-        boxSizing: 'border-box',
-        background: ATTENTION_COLORS[attention.kind],
-        border: '1.5px solid #0C0C0C',
-        color: '#000',
-        fontSize: 8,
-        fontWeight: 800,
-        lineHeight: '9px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      children: attention.kind === 'needsInput' ? '!' : ''
-    }) : null]
-  });
-}
-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);
-  const peekAttention = useStrongestAttention(minimized.map(app => app.id));
-
-  // 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: 'var(--buoy-stack-bottom, 0px)',
-        top: 'var(--buoy-stack-top, auto)',
-        left: 0,
-        width: containerWidth,
-        maxHeight: 'var(--buoy-stack-space, calc(100vh - 48px))',
-        visibility: isExpanded ? 'visible' : 'hidden',
-        height: isExpanded ? expandedHeight : 0,
-        opacity: isExpanded ? 1 : 0,
-        overflowY: 'auto',
-        overflowX: '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, {
-          id: app.id,
-          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`,
-      tabIndex: isExpanded ? -1 : 0,
-      "aria-hidden": isExpanded,
-      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, {}), peekAttention ? /*#__PURE__*/_jsx("span", {
-        "aria-hidden": true,
-        "data-testid": `buoy-dock-peek-attention`,
-        style: {
-          position: 'absolute',
-          top: 2,
-          right: 2,
-          minWidth: 11,
-          height: 11,
-          borderRadius: 6,
-          padding: '0 2px',
-          boxSizing: 'border-box',
-          background: ATTENTION_COLORS[peekAttention.kind],
-          border: '1.5px solid #0C0C0C',
-          color: '#000',
-          fontSize: 8,
-          fontWeight: 800,
-          lineHeight: '9px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        children: peekAttention.kind === 'needsInput' ? '!' : ''
-      }) : null, minimized.length > 1 && /*#__PURE__*/_jsx("span", {
-        style: {
-          fontSize: 9,
-          fontWeight: 600,
-          color: TEXT_MUTED,
-          marginLeft: 1
-        },
-        children: minimized.length
-      })]
-    })]
-  });
-}
+"use strict";import{useCallback as M,useEffect as m,useRef as N,useState as I,useSyncExternalStore as k}from"react";import{persistentStorage as C,getToolAttention as y,subscribeToolAttention as v}from"@buoy-gg/shared-ui";function G(e){return k(v,()=>y(e),()=>y(e))}const A={needsInput:"#FF8329",done:"#20C997",failed:"#FF3B30"};const _={needsInput:3,failed:2,done:1};const E=new Map;function S(e){let n=null;for(const i of e?e.split("|"):[]){const o=y(i);if(o&&(!n||_[o.kind]>_[n.kind]))n=o}const r=E.get(e);if(r&&n&&r.kind===n.kind&&r.label===n.label)return r;if(!r&&!n)return null;E.set(e,n);return n}function H(e){const n=e.join("|");return k(v,()=>S(n),()=>S(n))}import{useAppHost as X}from"./AppHost.web.js";import{jsx as s,jsxs as h}from"react/jsx-runtime";const R=28;const x=32;const T=6;const L=8;const w=24;const z="@react_buoy_minimized_stack_expanded";const $=80;const O=2e3;const B=6e3;const P="#1A1A1A";const u="#888888";function j({down:e=false}){return s("svg",{width:12,height:12,viewBox:"0 0 24 24","aria-hidden":"true",style:{transform:e?"rotate(180deg)":void 0},children:s("path",{d:"M18 15l-6-6-6 6",fill:"none",stroke:u,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function W({id:e,title:n,icon:r,index:i,onPress:o}){const a=G(e);const d=N(null);m(()=>{let f=true;let l;const g=()=>{d.current?.animate([{transform:"translateX(0) scale(1)",opacity:1,offset:0},{transform:"translateX(3px) scale(1.05)",opacity:.4,offset:.2},{transform:"translateX(-3px) scale(1.1)",opacity:1,offset:.4},{transform:"translateX(2px) scale(1.0)",opacity:.6,offset:.6},{transform:"translateX(-1px) scale(0.95)",opacity:1,offset:.8},{transform:"translateX(0) scale(1)",opacity:1,offset:1}],{duration:$,easing:"linear"})};const c=p=>{const t=p?500+Math.random()*1500+i*200:O+Math.random()*(B-O)+i*300;l=setTimeout(()=>{if(!f)return;g();c(false)},t)};c(true);return()=>{f=false;clearTimeout(l)}},[i]);return h("button",{type:"button","aria-label":a?`${n} \u2014 ${a.label}. Restore`:`Restore ${n}`,onClick:o,style:{width:x,height:x,display:"flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",padding:0,cursor:"pointer",position:"relative"},children:[s("div",{ref:d,style:{display:"flex",alignItems:"center",justifyContent:"center"},children:r}),a?s("span",{"aria-hidden":true,"data-testid":`buoy-dock-badge-${e}-${a.kind}`,style:{position:"absolute",top:0,right:0,minWidth:12,height:12,borderRadius:6,padding:"0 2px",boxSizing:"border-box",background:A[a.kind],border:"1.5px solid #0C0C0C",color:"#000",fontSize:8,fontWeight:800,lineHeight:"9px",display:"flex",alignItems:"center",justifyContent:"center"},children:a.kind==="needsInput"?"!":""}):null]})}export function MinimizedToolsStack({containerWidth:e=32}){const{openApps:n,restore:r}=X();const i=n.filter(t=>t.minimized&&t.launchMode!=="toggle-only");const[o,a]=I(false);const[d,f]=I(false);const l=H(i.map(t=>t.id));m(()=>{let t=false;const b=async()=>{const D=await C.getItem(z);if(!t&&D==="true")a(true);if(!t)f(true)};void b();return()=>{t=true}},[]);m(()=>{if(!d)return;void C.setItem(z,o?"true":"false")},[o,d]);const g=M(t=>{r(t)},[r]);if(i.length===0)return null;const c=L+i.length*x+(i.length-1)*T+T+w+4;const p={backgroundColor:P,borderTopLeftRadius:6,borderTopRightRadius:6,borderTop:`1px solid ${u}66`,borderLeft:`1px solid ${u}66`,borderRight:`1px solid ${u}66`,borderBottom:"none",boxSizing:"border-box"};return h("div",{style:{height:R,overflow:"visible",position:"relative"},children:[s("div",{style:{position:"absolute",bottom:"var(--buoy-stack-bottom, 0px)",top:"var(--buoy-stack-top, auto)",left:0,width:e,maxHeight:"var(--buoy-stack-space, calc(100vh - 48px))",visibility:o?"visible":"hidden",height:o?c:0,opacity:o?1:0,overflowY:"auto",overflowX:"hidden",transition:"height 200ms ease, opacity 200ms ease",pointerEvents:o?"auto":"none",...p},children:h("div",{style:{height:c,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:L,gap:T,boxSizing:"border-box"},children:[[...i].reverse().map((t,b)=>s(W,{id:t.id,title:t.title||t.id,icon:t.icon??s("span",{style:{color:"#fff",fontSize:13},children:(t.title||t.id).slice(0,1).toUpperCase()}),index:b,onPress:()=>g(t.instanceId)},t.instanceId)),s("button",{type:"button","aria-label":"Collapse",onClick:()=>a(false),style:{width:"100%",height:w,marginTop:3,display:"flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",cursor:"pointer",padding:0},children:s(j,{down:true})})]})}),h("button",{type:"button","aria-label":`Show ${i.length} minimized tools`,tabIndex:o?-1:0,"aria-hidden":o,onClick:()=>a(true),style:{position:"absolute",bottom:0,left:0,width:e,height:R,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",gap:2,cursor:"pointer",padding:0,opacity:o?0:1,transform:o?"scale(0.9)":"scale(1)",transition:"opacity 200ms ease, transform 200ms ease",pointerEvents:o?"none":"auto",...p},children:[s(j,{}),l?s("span",{"aria-hidden":true,"data-testid":`buoy-dock-peek-attention`,style:{position:"absolute",top:2,right:2,minWidth:11,height:11,borderRadius:6,padding:"0 2px",boxSizing:"border-box",background:A[l.kind],border:"1.5px solid #0C0C0C",color:"#000",fontSize:8,fontWeight:800,lineHeight:"9px",display:"flex",alignItems:"center",justifyContent:"center"},children:l.kind==="needsInput"?"!":""}):null,i.length>1&&s("span",{style:{fontSize:9,fontWeight:600,color:u,marginLeft:1},children:i.length})]})]})}