@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,387 +1 @@
-"use strict";
-
-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 _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _nightTheme = require("../night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-// ============================================================================
-// Global expandable setting — controlled via setExpandableWindowControls()
-// ============================================================================
-
-// The expandable behavior is a touch affordance (big tap targets). On web a
-// mouse clicks the small dots directly, so it's always off there — the
-// setting only applies to native touch platforms.
-const EXPANDABLE_SUPPORTED = _reactNative.Platform.OS !== "web";
-let _expandableEnabled = true; // Default ON (native touch devices)
-
-/**
- * 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
-// ============================================================================
-
-// ============================================================================
-// Constants - macOS Style Window Controls
-// ============================================================================
-
-// macOS window control colors (matching exact macOS appearance)
-const COLORS = {
-  close: "#FF5F57",
-  // Red - close button
-  minimize: "#FEBC2E",
-  // Yellow - minimize button
-  toggleMode: "#28C840" // Green - expand/fullscreen button
-};
-
-// 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
-// ============================================================================
-
-/**
- * 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,
-  onMinimize,
-  onToggleMode,
-  mode,
-  variant = "night",
-  defaultExpanded
-}) {
-  // Show action-based icon: what will happen when clicked
-  const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
-  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-
-  // When expandable is disabled (or unsupported on this platform), render
-  // original directly-tappable buttons
-  if (!_expandableEnabled || !EXPANDABLE_SUPPORTED) {
-    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",
-        testID: "tool-window-close",
-        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,
-    variant: variant,
-    defaultExpanded: defaultExpanded
-  });
-}
-function ExpandableWindowControls({
-  onClose,
-  onMinimize,
-  onToggleMode,
-  mode,
-  variant = "night",
-  defaultExpanded = false
-}) {
-  const isNight = variant === "night";
-  const [expanded, setExpanded] = (0, _react.useState)(defaultExpanded);
-  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultExpanded ? 1 : 0)).current;
-  const dismissTimeout = (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;
-    }
-  }, []);
-
-  // JS driver on purpose: native-driven animations on this node silently
-  // never run inside JsModal's subtree (the panel sat at opacity 0 forever,
-  // making the expanded controls unreachable). The popover is tiny and the
-  // animation is 150ms — the JS driver is fine.
-  const collapse = (0, _react.useCallback)(() => {
-    clearDismissTimer();
-    _reactNative.Animated.spring(expandAnim, {
-      toValue: 0,
-      tension: 200,
-      friction: 20,
-      useNativeDriver: false
-    }).start(() => {
-      setExpanded(false);
-    });
-  }, [expandAnim, clearDismissTimer]);
-  const expand = (0, _react.useCallback)(() => {
-    setExpanded(true);
-    _reactNative.Animated.spring(expandAnim, {
-      toValue: 1,
-      tension: 180,
-      friction: 18,
-      useNativeDriver: false
-    }).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]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: expand,
-      activeOpacity: 0.7,
-      accessibilityLabel: "Open window controls",
-      testID: "tool-window-controls",
-      accessibilityRole: "button",
-      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
-          })
-        })]
-      })
-    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.expandedPanelInline, {
-        transform: [{
-          scale
-        }],
-        opacity
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
-        children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => handleAction(onMinimize),
-          style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: "Minimize modal",
-          testID: "tool-window-minimize",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? _nightTheme.night.color.warning : "#7A5A00",
-            strokeWidth: 2
-          })
-        }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => handleAction(onToggleMode),
-          style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: toggleModeLabel,
-          testID: "tool-window-mode",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? _nightTheme.night.color.accent : "#004A1A",
-            strokeWidth: 2
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => handleAction(onClose),
-          style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: "Close modal",
-          testID: "tool-window-close",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? _nightTheme.night.color.danger : "#4A0000",
-            strokeWidth: 2
-          })
-        })]
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = _reactNative.StyleSheet.create({
-  trigger: {
-    padding: 2
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: BUTTON_SPACING
-  },
-  dot: {
-    width: BUTTON_SIZE,
-    height: BUTTON_SIZE,
-    borderRadius: BUTTON_SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  closeDot: {
-    backgroundColor: COLORS.close
-  },
-  minimizeDot: {
-    backgroundColor: COLORS.minimize
-  },
-  expandDot: {
-    backgroundColor: COLORS.toggleMode
-  },
-  // Anchored to the windowControlsContainer (absolute top-right of the
-  // modal chrome); grows leftward/downward over the header.
-  expandedPanelInline: {
-    position: "absolute",
-    top: -EXPANDED_PADDING,
-    right: -EXPANDED_PADDING,
-    zIndex: 9999
-  },
-  expandedContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: EXPANDED_BUTTON_SPACING,
-    backgroundColor: _gameUIColors.buoyColors.card,
-    borderRadius: (EXPANDED_BUTTON_SIZE + EXPANDED_PADDING * 2) / 2,
-    paddingHorizontal: EXPANDED_PADDING,
-    paddingVertical: EXPANDED_PADDING,
-    borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
-    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
-  },
-  minimizeButtonExpanded: {
-    backgroundColor: COLORS.minimize
-  },
-  expandButtonExpanded: {
-    backgroundColor: COLORS.toggleMode
-  },
-  // ── Night variant (Everlights language — see ui/night/nightTheme.ts):
-  // near-black plate, hairline border, soft-tinted circles with toned icons
-  // instead of the solid macOS traffic lights.
-  nightExpandedContainer: {
-    backgroundColor: _nightTheme.night.color.surface,
-    borderColor: _nightTheme.night.color.border
-  },
-  nightMinimizeButton: {
-    backgroundColor: _nightTheme.night.color.warningSoft,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.warning + "59"
-  },
-  nightToggleButton: {
-    backgroundColor: _nightTheme.night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.accentBorderStrong
-  },
-  nightCloseButton: {
-    backgroundColor: _nightTheme.night.color.dangerSoft,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.danger + "59"
-  }
-});
+"use strict";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 _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _nightTheme=require("../night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");const EXPANDABLE_SUPPORTED=_reactNative.Platform.OS!=="web";let _expandableEnabled=true;function setExpandableWindowControls(i){_expandableEnabled=i}const COLORS={close:"#FF5F57",minimize:"#FEBC2E",toggleMode:"#28C840"};const BUTTON_SIZE=12;const BUTTON_SPACING=8;const ICON_SIZE=8;const EXPANDED_BUTTON_SIZE=36;const EXPANDED_BUTTON_SPACING=12;const EXPANDED_ICON_SIZE=16;const EXPANDED_PADDING=8;const AUTO_DISMISS_MS=3e3;function WindowControls({onClose:i,onMinimize:t,onToggleMode:o,mode:n,variant:d="night",defaultExpanded:a}){const e=n==="floating"?_index.DockBottom:_index.FloatWindow;const u=n==="floating"?"Dock to bottom sheet":"Make floating window";if(!_expandableEnabled||!EXPANDABLE_SUPPORTED){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[t&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:t,style:[styles.dot,styles.minimizeDot],activeOpacity:.8,accessibilityLabel:"Minimize modal",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_index.Minus,{size:ICON_SIZE,color:"#7A5A00",strokeWidth:1.5})}),o&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:o,style:[styles.dot,styles.expandDot],activeOpacity:.8,accessibilityLabel:u,accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(e,{size:ICON_SIZE,color:"#004A1A",strokeWidth:1.5})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:i,style:[styles.dot,styles.closeDot],activeOpacity:.8,accessibilityLabel:"Close modal",testID:"tool-window-close",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_index.X,{size:ICON_SIZE,color:"#4A0000",strokeWidth:1.5})})]})}return(0,_jsxRuntime.jsx)(ExpandableWindowControls,{onClose:i,onMinimize:t,onToggleMode:o,mode:n,variant:d,defaultExpanded:a})}function ExpandableWindowControls({onClose:i,onMinimize:t,onToggleMode:o,mode:n,variant:d="night",defaultExpanded:a=false}){const e=d==="night";const[u,h]=(0,_react.useState)(a);const s=(0,_react.useRef)(new _reactNative.Animated.Value(a?1:0)).current;const l=(0,_react.useRef)(null);const b=n==="floating"?_index.DockBottom:_index.FloatWindow;const p=n==="floating"?"Dock to bottom sheet":"Make floating window";const r=(0,_react.useCallback)(()=>{if(l.current){clearTimeout(l.current);l.current=null}},[]);const c=(0,_react.useCallback)(()=>{r();_reactNative.Animated.spring(s,{toValue:0,tension:200,friction:20,useNativeDriver:false}).start(()=>{h(false)})},[s,r]);const x=(0,_react.useCallback)(()=>{h(true);_reactNative.Animated.spring(s,{toValue:1,tension:180,friction:18,useNativeDriver:false}).start();r();l.current=setTimeout(c,AUTO_DISMISS_MS)},[s,c,r]);(0,_react.useEffect)(()=>{return r},[r]);const g=(0,_react.useCallback)(C=>{c();C()},[c]);const m=s.interpolate({inputRange:[0,1],outputRange:[.3,1]});const y=s.interpolate({inputRange:[0,.5,1],outputRange:[0,.8,1]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:x,activeOpacity:.7,accessibilityLabel:"Open window controls",testID:"tool-window-controls",accessibilityRole:"button",style:styles.trigger,hitSlop:{top:8,bottom:8,left:8,right:8},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,styles.minimizeDot],children:(0,_jsxRuntime.jsx)(_index.Minus,{size:ICON_SIZE,color:"#7A5A00",strokeWidth:1.5})}),o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,styles.expandDot],children:(0,_jsxRuntime.jsx)(b,{size:ICON_SIZE,color:"#004A1A",strokeWidth:1.5})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,styles.closeDot],children:(0,_jsxRuntime.jsx)(_index.X,{size:ICON_SIZE,color:"#4A0000",strokeWidth:1.5})})]})}),u&&(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.expandedPanelInline,{transform:[{scale:m}],opacity:y}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.expandedContainer,e&&styles.nightExpandedContainer],children:[t&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>g(t),style:[styles.expandedButton,e?styles.nightMinimizeButton:styles.minimizeButtonExpanded],activeOpacity:.7,accessibilityLabel:"Minimize modal",testID:"tool-window-minimize",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_index.Minus,{size:EXPANDED_ICON_SIZE,color:e?_nightTheme.night.color.warning:"#7A5A00",strokeWidth:2})}),o&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>g(o),style:[styles.expandedButton,e?styles.nightToggleButton:styles.expandButtonExpanded],activeOpacity:.7,accessibilityLabel:p,testID:"tool-window-mode",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(b,{size:EXPANDED_ICON_SIZE,color:e?_nightTheme.night.color.accent:"#004A1A",strokeWidth:2})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>g(i),style:[styles.expandedButton,e?styles.nightCloseButton:styles.closeButtonExpanded],activeOpacity:.7,accessibilityLabel:"Close modal",testID:"tool-window-close",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_index.X,{size:EXPANDED_ICON_SIZE,color:e?_nightTheme.night.color.danger:"#4A0000",strokeWidth:2})})]})})]})}const styles=_reactNative.StyleSheet.create({trigger:{padding:2},container:{flexDirection:"row",alignItems:"center",gap:BUTTON_SPACING},dot:{width:BUTTON_SIZE,height:BUTTON_SIZE,borderRadius:BUTTON_SIZE/2,alignItems:"center",justifyContent:"center"},closeDot:{backgroundColor:COLORS.close},minimizeDot:{backgroundColor:COLORS.minimize},expandDot:{backgroundColor:COLORS.toggleMode},expandedPanelInline:{position:"absolute",top:-EXPANDED_PADDING,right:-EXPANDED_PADDING,zIndex:9999},expandedContainer:{flexDirection:"row",alignItems:"center",gap:EXPANDED_BUTTON_SPACING,backgroundColor:_gameUIColors.buoyColors.card,borderRadius:(EXPANDED_BUTTON_SIZE+EXPANDED_PADDING*2)/2,paddingHorizontal:EXPANDED_PADDING,paddingVertical:EXPANDED_PADDING,borderWidth:1,borderColor:_gameUIColors.buoyColors.border,shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.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},minimizeButtonExpanded:{backgroundColor:COLORS.minimize},expandButtonExpanded:{backgroundColor:COLORS.toggleMode},nightExpandedContainer:{backgroundColor:_nightTheme.night.color.surface,borderColor:_nightTheme.night.color.border},nightMinimizeButton:{backgroundColor:_nightTheme.night.color.warningSoft,borderWidth:1,borderColor:_nightTheme.night.color.warning+"59"},nightToggleButton:{backgroundColor:_nightTheme.night.color.accentSoft,borderWidth:1,borderColor:_nightTheme.night.color.accentBorderStrong},nightCloseButton:{backgroundColor:_nightTheme.night.color.dangerSoft,borderWidth:1,borderColor:_nightTheme.night.color.danger+"59"}});