@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/JsModal.js

@@ -1,1814 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JsModal = void 0;
-var _licenseModule = require("./license/licenseModule.js");
-var _AccountSetup = require("./license/AccountSetup");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _absoluteFill = require("./utils/absoluteFill.js");
-var _useSafeAreaInsets = require("./hooks/useSafeAreaInsets.js");
-var _index = require("./ui/gameUI/index.js");
-var _index2 = require("./ui/components/index.js");
-var _ToolBackground = require("./ui/backgrounds/ToolBackground.js");
-var _nightTheme = require("./ui/night/nightTheme.js");
-var _persistentStorage = require("./utils/persistentStorage.js");
-var _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
-var _index3 = require("./context/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * JsModal - Ultra-optimized for true 60FPS performance
- *
- * Achieves 60FPS by following the principles from the dial menu:
- * 1. ALWAYS use native driver (useNativeDriver: true)
- * 2. Use transforms instead of layout properties (translateY instead of height)
- * 3. Use interpolation for all calculations (no JS thread math)
- * 4. Minimize PanResponder JS work (direct setValue, no state updates)
- *
- * Structure follows SRP with each function doing ONE thing only.
- */
-
-// ============================================================================
-// CONSTANTS - Modal dimensions and configuration
-// ============================================================================
-
-/**
- * Tool modals open and close without an entrance animation.
- *
- * The animated entrance was `parallel([spring(tension:180, friction:22),
- * timing(200ms)])`. Two measured problems: the modal mounts at opacity 0 and
- * the fade only starts once its content has committed, so a tap left the screen
- * unchanged for ~240ms; and the spring's completion did not land until ~1s,
- * creeping long after it looked settled. Snapping to the final state made the
- * whole devtools UI feel markedly faster.
- *
- * Setting this to `false` restores the animation for every tool modal — this is
- * shared chrome, not settings-specific.
- */
-const INSTANT_MODAL_ENTRANCE = true;
-const SCREEN = _reactNative.Dimensions.get("window");
-const MIN_HEIGHT = 100;
-const DEFAULT_HEIGHT = 400;
-const FLOATING_WIDTH = SCREEN.width; // Full width
-const FLOATING_HEIGHT = 500;
-const FLOATING_MIN_WIDTH = SCREEN.width * 0.25; // 1/4 of screen width
-const FLOATING_MIN_HEIGHT = 80; // Just a bit more than header height (60px header + 20px content)
-
-/**
- * Vertical band the absolutely-positioned window controls occupy at the top
- * right of the chrome: `windowControlsContainer` top 4 + the expandable
- * trigger's 2pt padding + a 12pt dot + 2 = 20. The drag-indicator strip above
- * custom header content reserves exactly this, which is what lets a tool's
- * header row below run the FULL width instead of buying its clearance with a
- * right inset (that inset read as a hole on the right of every tool's nav).
- */
-const WINDOW_CONTROLS_BAND = 20;
-
-// ============================================================================
-// STORAGE - Modal state persistence with AsyncStorage
-// ============================================================================
-
-/**
- * Utility class for persisting modal state to AsyncStorage
- *
- * Handles saving and loading modal state including mode, dimensions,
- * and position with memory caching for performance.
- */
-class ModalStorage {
-  static memoryCache = {};
-
-  /**
-   * Save modal state to AsyncStorage with memory caching
-   *
-   * @param key - Storage key for the modal state
-   * @param value - Modal state to persist
-   */
-  static async save(key, value) {
-    try {
-      this.memoryCache[key] = value;
-      await _persistentStorage.persistentStorage.setItem(key, JSON.stringify(value));
-    } catch (error) {
-      // Failed to save modal state
-    }
-  }
-
-  /**
-   * Load modal state from AsyncStorage with memory cache fallback
-   *
-   * @param key - Storage key for the modal state
-   * @returns Persisted modal state or null if not found
-   */
-  static async load(key) {
-    try {
-      // Try memory cache first
-      if (this.memoryCache[key]) {
-        return this.memoryCache[key];
-      }
-
-      // Load from storage (AsyncStorage or memory fallback)
-      const stored = await _persistentStorage.persistentStorage.getItem(key);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        this.memoryCache[key] = parsed;
-        return parsed;
-      }
-    } catch (error) {
-      // Failed to load modal state
-    }
-    return null;
-  }
-}
-
-// ============================================================================
-// TYPE DEFINITIONS - Interface contracts for the modal
-// ============================================================================
-
-/**
- * Chrome variant. "night" (the default since the suite-wide theme move) is
- * the Everlights-style sheet (see ui/night): near-black `#050505` surfaces at
- * radius 16, a hairline accent border, a neutral drag handle instead of the
- * teal bar, a transparent header, and the ToolBackground hoisted to the sheet
- * root so the star field runs through the header instead of stopping under
- * it. "default" is the legacy card-grey chrome, kept as an escape hatch.
- */
-
-/**
- * Modal state that can be saved and restored when minimizing/restoring
- */
-
-// ============================================================================
-// ICON COMPONENTS - Visual indicators for modal controls
-// ============================================================================
-
-/**
- * DragIndicator - Visual feedback for draggable areas
- */
-const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  variant = "default"
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.dragIndicator, mode === "floating" && styles.floatingDragIndicator, isResizing && styles.dragIndicatorActive,
-      // Night: the neutral Everlights sheet handle, no glow, both modes.
-      variant === "night" && styles.nightDragIndicator]
-    }), isResizing && mode === "bottomSheet" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.resizeGripContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.resizeGripLine
-      })]
-    })]
-  });
-});
-
-/**
- * CornerHandle - Resize handle for floating mode corners
- */
-const CornerHandle = /*#__PURE__*/(0, _react.memo)(function CornerHandle({
-  position,
-  isActive
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.cornerHandle],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.handler, isActive && styles.handlerActive]
-    })
-  });
-});
-
-/**
- * ModalHeader - Header bar with title, controls, and drag area
- */
-
-const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
-  header,
-  onClose,
-  onToggleMode,
-  onMinimize,
-  isResizing,
-  mode,
-  panHandlers,
-  variant = "default"
-}) {
-  const lastTapRef = (0, _react.useRef)(0);
-  const tapCountRef = (0, _react.useRef)(0);
-  const tapTimeoutRef = (0, _react.useRef)(null);
-  const handleHeaderTap = (0, _react.useCallback)(() => {
-    const now = Date.now();
-    const timeSinceLastTap = now - lastTapRef.current;
-
-    // Reset tap count if more than 500ms since last tap
-    if (timeSinceLastTap > 500) {
-      tapCountRef.current = 0;
-    }
-    tapCountRef.current++;
-    lastTapRef.current = now;
-
-    // Clear existing timeout
-    if (tapTimeoutRef.current) {
-      clearTimeout(tapTimeoutRef.current);
-    }
-
-    // Set timeout to process the tap gesture
-    tapTimeoutRef.current = setTimeout(() => {
-      if (tapCountRef.current === 2) {
-        // Double tap - toggle mode
-        onToggleMode();
-      } else if (tapCountRef.current >= 3) {
-        // Triple tap - minimize modal (if available)
-        if (onMinimize) {
-          onMinimize();
-        }
-      }
-      tapCountRef.current = 0;
-    }, 300);
-  }, [onToggleMode, onMinimize]);
-
-  // Clean up timeout on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (tapTimeoutRef.current) {
-        clearTimeout(tapTimeoutRef.current);
-      }
-    };
-  }, []);
-  const headerProps = panHandlers ? panHandlers : {};
-  // Disable tap handling when no panHandlers (i.e., when using DraggableHeader in floating mode)
-  const shouldHandleTap = !!panHandlers;
-
-  // If custom content is provided, check if it's a complete replacement
-  if (header?.customContent) {
-    // Check if the custom content is a complete header replacement (like CyberpunkModalHeader)
-    // by checking if it's a React element with specific props
-    const isCompleteReplacement = /*#__PURE__*/(0, _react.isValidElement)(header.customContent) && typeof header.customContent.type === "function" && header.customContent.type.name === "CyberpunkModalHeader";
-    if (isCompleteReplacement) {
-      // Clone the element and pass the necessary props
-      return /*#__PURE__*/(0, _react.cloneElement)(header.customContent, {
-        onToggleMode,
-        onClose,
-        mode,
-        panHandlers: headerProps,
-        showToggleButton: header?.showToggleButton !== false,
-        hideCloseButton: header?.hideCloseButton
-      });
-    }
-
-    // Otherwise, render custom content within the standard header structure
-    // Apply pan handlers to the outer View for dragging in floating mode
-    // If the custom content is a React element, inject onMinimize so it can trigger minimize
-    let customContentWithMinimize = header.customContent;
-    if (/*#__PURE__*/(0, _react.isValidElement)(header.customContent) && onMinimize) {
-      customContentWithMinimize = /*#__PURE__*/(0, _react.cloneElement)(header.customContent, {
-        onMinimize
-      });
-    }
-    const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.headerInner,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        variant: variant
-      }), customContentWithMinimize]
-    });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.header, variant === "night" && styles.nightHeader],
-      ...headerProps,
-      children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-        onPress: handleHeaderTap,
-        children: headerContent
-      }) : headerContent
-    });
-  }
-  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.headerInner,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      variant: variant
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.headerContent,
-      children: [header?.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.headerTitle,
-        children: header.title
-      }), header?.subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.headerSubtitle,
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.headerHintText,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.hintText,
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader, variant === "night" && styles.nightHeader],
-    ...headerProps,
-    children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-      onPress: handleHeaderTap,
-      children: headerContent
-    }) : headerContent
-  });
-});
-
-// ============================================================================
-// MAIN COMPONENT - Optimized for 60FPS with transforms and interpolation
-// ============================================================================
-/**
- * JsModal - Ultra-optimized modal component for true 60FPS performance
- *
- * This modal component is designed for maximum performance using native driver
- * animations, transforms instead of layout properties, and minimal JavaScript
- * thread work. It supports two modes: bottom sheet and floating window.
- *
- * Key Performance Features:
- * - Uses native driver for all animations (useNativeDriver: true)
- * - Transform-based positioning instead of layout changes
- * - Interpolation for all calculations on the native thread
- * - Minimal PanResponder JavaScript work
- * - State persistence with AsyncStorage
- * - Drag and resize functionality in both modes
- *
- * @param props - Modal configuration and content
- * @returns JSX.Element representing the modal
- *
- * @example
- * ```typescript
- * <JsModal
- *   visible={isVisible}
- *   onClose={() => setVisible(false)}
- *   header={{
- *     title: "Settings",
- *     subtitle: "Configure your preferences"
- *   }}
- *   persistenceKey="settings-modal"
- *   enablePersistence={true}
- * >
- *   <SettingsContent />
- * </JsModal>
- * ```
- *
- * @performance All animations use native driver for 60FPS performance
- * @performance Uses transform-based positioning for optimal rendering
- * @performance Includes state persistence and restoration capabilities
- */
-const JsModalComponent = ({
-  visible,
-  onClose,
-  children,
-  header,
-  styles: customStyles = {},
-  minHeight = MIN_HEIGHT,
-  maxHeight,
-  initialHeight = DEFAULT_HEIGHT,
-  animatedHeight: externalAnimatedHeight,
-  benchMotion,
-  initialMode = "bottomSheet",
-  onModeChange,
-  persistenceKey,
-  enablePersistence = true,
-  initialFloatingPosition,
-  footer,
-  footerHeight = 0,
-  onBack,
-  onMinimize,
-  minimizeRequest = 0,
-  minimizeTargetPosition,
-  initialModalState,
-  zIndex,
-  disableScrollWrapper = false,
-  background = true,
-  variant = "night"
-}) => {
-  const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
-  const [isStateLoaded, setIsStateLoaded] = (0, _react.useState)(!enablePersistence);
-  const [mode, setMode] = (0, _react.useState)(initialMode);
-  const [isResizing, setIsResizing] = (0, _react.useState)(false);
-  const [isDragging, setIsDragging] = (0, _react.useState)(false);
-  const [panelHeight, setPanelHeight] = (0, _react.useState)(initialHeight);
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT,
-    top: (SCREEN.height - FLOATING_HEIGHT) / 2,
-    left: 0 // Flush with left edge
-  });
-  const [containerBounds] = (0, _react.useState)({
-    width: SCREEN.width,
-    height: SCREEN.height
-  });
-  const [showHint, setShowHint] = (0, _react.useState)(false);
-  const [hintLoaded, setHintLoaded] = (0, _react.useState)(false);
-  const hintsDisabled = (0, _index3.useHintsDisabled)();
-
-  // ============================================================================
-  // ANIMATED VALUES - All using native driver
-  // ============================================================================
-
-  // Main visibility progress (0 = hidden, 1 = visible)
-  const visibilityProgress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-
-  // Bottom sheet specific - using translateY for performance!
-  const bottomSheetTranslateY = (0, _react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;
-  const dragOffset = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-
-  // Height tracking for resize - actual position from bottom
-  const animatedBottomPosition = (0, _react.useRef)(new _reactNative.Animated.Value(initialHeight)).current;
-  const currentHeightRef = (0, _react.useRef)(initialHeight);
-
-  // Save state with debounce
-  (0, _react.useEffect)(() => {
-    if (!enablePersistence || !persistenceKey || !isStateLoaded) return;
-    const timeoutId = setTimeout(() => {
-      ModalStorage.save(persistenceKey, {
-        mode,
-        panelHeight: currentHeightRef.current,
-        dimensions,
-        isVisible: visible
-      });
-    }, 500);
-    return () => clearTimeout(timeoutId);
-  }, [mode, panelHeight, dimensions, visible, persistenceKey, enablePersistence, isStateLoaded]);
-
-  // Seed the external height ONCE. This used to re-run when `isResizing`
-  // flipped, which snapped an externally-controlled sheet back to
-  // initialHeight the moment a drag-resize ended (the release handler had
-  // just written the real height). The host owns the value after the seed;
-  // persistence restore above may overwrite the seed, which is correct.
-  const externalHeightSeeded = (0, _react.useRef)(false);
-  (0, _react.useEffect)(() => {
-    if (externalAnimatedHeight && !externalHeightSeeded.current) {
-      externalHeightSeeded.current = true;
-      currentHeightRef.current = initialHeight;
-      externalAnimatedHeight.setValue(initialHeight);
-    }
-  }, [externalAnimatedHeight, initialHeight]);
-
-  // Update refs when dimensions change
-  (0, _react.useEffect)(() => {
-    currentDimensionsRef.current = dimensions;
-  }, [dimensions]);
-
-  // Floating mode animations - use initialFloatingPosition if provided
-  const floatingPosition = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
-    x: initialFloatingPosition?.x ?? 0,
-    // Flush with left edge
-    y: initialFloatingPosition?.y ?? (SCREEN.height - FLOATING_HEIGHT) / 2
-  })).current;
-  const floatingScale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const animatedWidth = (0, _react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;
-  const animatedFloatingHeight = (0, _react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;
-
-  // Refs for resize handles
-  const currentDimensionsRef = (0, _react.useRef)(dimensions);
-  const startDimensionsRef = (0, _react.useRef)(dimensions);
-  const offsetX = (0, _react.useRef)(0);
-  const offsetY = (0, _react.useRef)(0);
-  const sHeight = (0, _react.useRef)(0);
-  const sWidth = (0, _react.useRef)(0);
-
-  // Load hint acknowledgment status on mount
-  (0, _react.useEffect)(() => {
-    let mounted = true;
-    const loadHintStatus = async () => {
-      try {
-        const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-        const acknowledged = await _persistentStorage.persistentStorage.getItem(hintKey);
-        if (mounted) {
-          // Show hint if not acknowledged yet
-          setShowHint(acknowledged !== "true");
-          setHintLoaded(true);
-        }
-      } catch (error) {
-        // Failed to load hint status, default to showing hint
-        if (mounted) {
-          setShowHint(true);
-          setHintLoaded(true);
-        }
-      }
-    };
-    loadHintStatus();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  // Handle hint acknowledgment
-  const handleHintAcknowledge = (0, _react.useCallback)(async () => {
-    try {
-      const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-      await _persistentStorage.persistentStorage.setItem(hintKey, "true");
-      setShowHint(false);
-    } catch (error) {
-      // Failed to save hint acknowledgment, just hide it locally
-      setShowHint(false);
-    }
-  }, []);
-
-  // Parents routinely pass an inline `onModeChange` (a new identity every
-  // render). The persisted-state load below is mount/key-scoped — if the
-  // callback identity re-triggered it, every parent re-render would reload
-  // the OLD persisted mode and stomp a live toggleMode() before the 500ms
-  // save debounce could write the new one (mode flipped to floating, then
-  // snapped back ~50ms later). So the callback rides in a ref instead of
-  // the dependency list.
-  const onModeChangeRef = (0, _react.useRef)(onModeChange);
-  onModeChangeRef.current = onModeChange;
-
-  // Load persisted state on mount
-  (0, _react.useEffect)(() => {
-    if (!enablePersistence || !persistenceKey) {
-      setIsStateLoaded(true);
-      return;
-    }
-    let mounted = true;
-    const loadState = async () => {
-      const savedState = await ModalStorage.load(persistenceKey);
-      if (mounted && savedState) {
-        // Restore mode
-        if (savedState.mode) {
-          setMode(savedState.mode);
-          // Notify parent of loaded mode
-          onModeChangeRef.current?.(savedState.mode);
-        }
-
-        // Restore bottom sheet height. The external animated height (when a
-        // host passes one) IS the rendered height, so it must be restored
-        // too or a persisted sheet always reopens at initialHeight.
-        if (savedState.panelHeight) {
-          setPanelHeight(savedState.panelHeight);
-          currentHeightRef.current = savedState.panelHeight;
-          animatedBottomPosition.setValue(savedState.panelHeight);
-          externalAnimatedHeight?.setValue(savedState.panelHeight);
-        }
-
-        // Restore floating dimensions and position
-        if (savedState.dimensions) {
-          setDimensions(savedState.dimensions);
-          floatingPosition.setValue({
-            x: savedState.dimensions.left,
-            y: savedState.dimensions.top
-          });
-          animatedWidth.setValue(savedState.dimensions.width);
-          animatedFloatingHeight.setValue(savedState.dimensions.height);
-        }
-      }
-      if (mounted) setIsStateLoaded(true);
-    };
-    loadState();
-    return () => {
-      mounted = false;
-    };
-  }, [persistenceKey, enablePersistence, animatedBottomPosition, animatedFloatingHeight, animatedWidth, floatingPosition]);
-
-  // Cleanup on unmount
-  (0, _react.useEffect)(() => {
-    // Mount/Unmount effect
-    return () => {
-      // Stop all animations and reset when component unmounts
-      visibilityProgress.stopAnimation();
-      bottomSheetTranslateY.stopAnimation();
-      floatingScale.stopAnimation();
-      dragOffset.stopAnimation();
-      animatedBottomPosition.stopAnimation();
-      floatingPosition.stopAnimation();
-      animatedWidth.stopAnimation();
-      animatedFloatingHeight.stopAnimation();
-
-      // Reset to initial values
-      visibilityProgress.setValue(0);
-      bottomSheetTranslateY.setValue(SCREEN.height);
-      floatingScale.setValue(0);
-      dragOffset.setValue(0);
-      animatedBottomPosition.setValue(initialHeight);
-      currentHeightRef.current = initialHeight;
-    };
-  }, []);
-
-  // ============================================================================
-  // INTERPOLATIONS - All math done natively!
-  // ============================================================================
-
-  // Opacity interpolation for smooth fade
-  const modalOpacity = visibilityProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: "clamp"
-  });
-
-  // ============================================================================
-  // REFS for values we need to track
-  // ============================================================================
-  const effectiveMaxHeight = maxHeight || SCREEN.height - insets.top;
-
-  // Mode toggle handler
-  /**
-   * Toggle between bottom sheet and floating modal modes
-   *
-   * Clears active dragging and resizing states to prevent visual artifacts
-   * when switching between modes with different interaction patterns.
-   */
-  const toggleMode = (0, _react.useCallback)(() => {
-    // Avoid carrying active styling across modes
-    setIsDragging(false);
-    setIsResizing(false);
-    const newMode = mode === "bottomSheet" ? "floating" : "bottomSheet";
-    setMode(newMode);
-    onModeChange?.(newMode);
-  }, [mode, onModeChange]);
-
-  // Belt-and-suspenders: also clear flags when mode changes
-  (0, _react.useEffect)(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-  }, [mode]);
-
-  // Minimize handler - captures current state and animates out
-  const handleMinimize = (0, _react.useCallback)(() => {
-    if (!onMinimize) return;
-
-    // Capture current modal state for restoration
-    const currentState = {
-      mode,
-      panelHeight: currentHeightRef.current,
-      floatingPosition: {
-        x: currentDimensionsRef.current.left,
-        y: currentDimensionsRef.current.top
-      },
-      floatingDimensions: {
-        width: currentDimensionsRef.current.width,
-        height: currentDimensionsRef.current.height
-      }
-    };
-
-    // Animate modal shrinking toward target position
-    const targetX = minimizeTargetPosition?.x ?? SCREEN.width - 50;
-    const targetY = minimizeTargetPosition?.y ?? SCREEN.height - 150;
-
-    // Calculate animation based on current mode
-    if (mode === "bottomSheet") {
-      // Animate bottom sheet shrinking and moving toward target
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(visibilityProgress, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(bottomSheetTranslateY, {
-        toValue: SCREEN.height,
-        duration: 300,
-        useNativeDriver: true
-      })]).start(() => {
-        onMinimize(currentState);
-      });
-    } else {
-      // Floating mode - animate scale and position toward icon
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(floatingScale, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(visibilityProgress, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(floatingPosition, {
-        toValue: {
-          x: targetX,
-          y: targetY
-        },
-        duration: 300,
-        useNativeDriver: true
-      })]).start(() => {
-        onMinimize(currentState);
-      });
-    }
-  }, [mode, onMinimize, minimizeTargetPosition, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition]);
-  const lastMinimizeRequest = (0, _react.useRef)(minimizeRequest);
-  (0, _react.useEffect)(() => {
-    if (lastMinimizeRequest.current === minimizeRequest) return;
-    lastMinimizeRequest.current = minimizeRequest;
-    handleMinimize();
-  }, [minimizeRequest, handleMinimize]);
-
-  // Apply initial modal state when restoring from minimized
-  (0, _react.useEffect)(() => {
-    if (!initialModalState) return;
-
-    // Restore mode
-    if (initialModalState.mode) {
-      setMode(initialModalState.mode);
-      onModeChange?.(initialModalState.mode);
-    }
-
-    // Restore bottom sheet height
-    if (initialModalState.panelHeight) {
-      setPanelHeight(initialModalState.panelHeight);
-      currentHeightRef.current = initialModalState.panelHeight;
-      animatedBottomPosition.setValue(initialModalState.panelHeight);
-    }
-
-    // Restore floating dimensions and position
-    if (initialModalState.floatingDimensions && initialModalState.floatingPosition) {
-      const newDimensions = {
-        width: initialModalState.floatingDimensions.width,
-        height: initialModalState.floatingDimensions.height,
-        top: initialModalState.floatingPosition.y,
-        left: initialModalState.floatingPosition.x
-      };
-      setDimensions(newDimensions);
-      floatingPosition.setValue({
-        x: initialModalState.floatingPosition.x,
-        y: initialModalState.floatingPosition.y
-      });
-      animatedWidth.setValue(initialModalState.floatingDimensions.width);
-      animatedFloatingHeight.setValue(initialModalState.floatingDimensions.height);
-    }
-  }, [initialModalState]);
-
-  // ============================================================================
-  // EFFECT: Visibility Animations - All using native driver!
-  // ============================================================================
-  const snapVisibility = shown => {
-    if (shown) {
-      if (mode === "bottomSheet") {
-        bottomSheetTranslateY.setValue(0);
-      } else {
-        floatingScale.setValue(1);
-        floatingPosition.setValue({
-          x: currentDimensionsRef.current.left,
-          y: currentDimensionsRef.current.top
-        });
-      }
-      visibilityProgress.setValue(1);
-    } else {
-      if (mode === "bottomSheet") {
-        bottomSheetTranslateY.setValue(SCREEN.height);
-      }
-      visibilityProgress.setValue(0);
-    }
-  };
-
-  /**
-   * Snap DURING RENDER when `visible` flips, not only in the effect below.
-   *
-   * These values drive the sheet's opacity/translate through the native
-   * driver. The React commit for a `visible` change carries whatever the
-   * JS-side values are at render time — the OLD, hidden ones when the snap
-   * only happens in the effect — and on Fabric that commit's mount can land
-   * on the main thread AFTER the effect's native `setValue`, overwriting it.
-   * The Animated node then says "shown" while the UIView sits at opacity 0,
-   * until some unrelated re-render commits the JS-side values again. That
-   * is how "restore tool A: nothing; restore tool B: A appears; hide B: now
-   * B appears" happened — every restore was one commit behind.
-   *
-   * Setting the values before the render's props are computed makes the
-   * commit and the native node agree, whichever lands last. `setValue` is
-   * idempotent, so a re-run render is harmless.
-   */
-  const snappedVisibleRef = (0, _react.useRef)(null);
-  if (INSTANT_MODAL_ENTRANCE && snappedVisibleRef.current !== visible) {
-    snappedVisibleRef.current = visible;
-    snapVisibility(visible);
-  }
-  (0, _react.useEffect)(() => {
-    // Visibility effect
-    let openAnimation = null;
-    let closeAnimation = null;
-    if (INSTANT_MODAL_ENTRANCE) {
-      // Snap to the final state — no animation in either direction. The
-      // render-phase snap above already did this for a `visible` flip; this
-      // re-applies it for a `mode` change while shown.
-      snapVisibility(visible);
-      return;
-    }
-    if (visible) {
-      // Reset position if needed and then open
-      bottomSheetTranslateY.setValue(SCREEN.height);
-      visibilityProgress.setValue(0);
-
-      // Open animations
-      if (mode === "bottomSheet") {
-        // Parallel animations for smooth opening
-        openAnimation = _reactNative.Animated.parallel([
-        // Slide up from bottom
-        _reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: 0,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }),
-        // Fade in backdrop
-        _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        openAnimation.start();
-      } else {
-        // Floating mode entrance - simple fade without scale pop
-        floatingScale.setValue(1); // Set scale to 1 directly, no animation
-        // Minimizing animated the window to the dock icon's corner. Put it
-        // back where it actually lives, or reopening leaves it parked
-        // off-screen — `initialModalState` only covers the dock's restore
-        // path, and the dial opens the same tool without one.
-        floatingPosition.setValue({
-          x: currentDimensionsRef.current.left,
-          y: currentDimensionsRef.current.top
-        });
-        openAnimation = _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        });
-        openAnimation.start();
-      }
-    } else {
-      // Close animations
-      if (mode === "bottomSheet") {
-        closeAnimation = _reactNative.Animated.parallel([
-        // Slide down
-        _reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }),
-        // Fade out backdrop
-        _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        closeAnimation.start();
-      } else {
-        // Floating mode exit - simple fade without scale
-        closeAnimation = _reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        });
-        closeAnimation.start();
-      }
-    }
-
-    // Cleanup function - only stop animations, don't reset values
-    return () => {
-      // Cleanup animations
-      if (openAnimation) {
-        openAnimation.stop();
-        // Stopped open animation
-      }
-      if (closeAnimation) {
-        closeAnimation.stop();
-        // Stopped close animation
-      }
-    };
-  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
-
-  // ============================================================================
-  // OPTIMIZED PAN RESPONDER: Bottom Sheet Resize
-  // Following the documentation pattern for proper resize
-  // ============================================================================
-  const headerTouchOffsetRef = (0, _react.useRef)(0);
-
-  // DEV-ONLY scripted resize motion (see benchMotion prop). Mirrors
-  // onPanResponderMove exactly: direct setValue, no per-frame state. Every
-  // ~2.5s it simulates a grab/release (setIsResizing toggles) so the
-  // benchmark includes the gesture-boundary re-render cost.
-  (0, _react.useEffect)(() => {
-    if (!__DEV__ || !benchMotion || !visible) return undefined;
-    let rafId = null;
-    let intervalId = null;
-    let running = true;
-    const start = Date.now();
-    let grabbed = false;
-    const setGrab = on => {
-      grabbed = on;
-      if (benchMotion === "resize" || benchMotion === "float-resize") {
-        setIsResizing(on);
-      } else if (benchMotion === "float-drag") {
-        setIsDragging(on);
-      }
-    };
-    if (benchMotion === "mode-cycle") {
-      intervalId = setInterval(() => toggleMode(), 2200);
-    } else {
-      const min = minHeight;
-      const max = effectiveMaxHeight;
-      const tick = () => {
-        if (!running) return;
-        const t = (Date.now() - start) / 1000;
-        const phase = t % 2.5; // grab 2s, release 0.5s
-        if (phase < 2 && !grabbed) setGrab(true);else if (phase >= 2 && grabbed) setGrab(false);
-        if (grabbed) {
-          const wave = (Math.sin(t * 2.2) + 1) / 2;
-          if (benchMotion === "resize") {
-            const targetHeight = min + wave * (max - min);
-            animatedBottomPosition.setValue(targetHeight);
-            currentHeightRef.current = targetHeight;
-            if (externalAnimatedHeight) {
-              externalAnimatedHeight.setValue(targetHeight);
-            }
-          } else if (benchMotion === "float-drag") {
-            // Same write DraggableHeader makes per move event.
-            const wave2 = (Math.sin(t * 1.7) + 1) / 2;
-            floatingPosition.setValue({
-              x: 10 + wave * Math.max(SCREEN.width - FLOATING_WIDTH - 20, 0),
-              y: 70 + wave2 * 260
-            });
-          } else if (benchMotion === "float-resize") {
-            // Same writes as the bottom-right corner resize handler.
-            const width = FLOATING_WIDTH + wave * Math.max(SCREEN.width - FLOATING_WIDTH - 40, 0);
-            const height = FLOATING_HEIGHT + wave * 240;
-            animatedWidth.setValue(width);
-            animatedFloatingHeight.setValue(height);
-            currentDimensionsRef.current = {
-              ...currentDimensionsRef.current,
-              width,
-              height
-            };
-          }
-        }
-        rafId = requestAnimationFrame(tick);
-      };
-      rafId = requestAnimationFrame(tick);
-    }
-    return () => {
-      running = false;
-      if (rafId != null) cancelAnimationFrame(rafId);
-      if (intervalId != null) clearInterval(intervalId);
-      setIsResizing(false);
-      setIsDragging(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [benchMotion, visible]);
-  const bottomSheetPanResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    // An external `animatedHeight` used to disable this responder
-    // outright ("externally controlled"), which left Ask Buoy's sheet —
-    // the one host that passes one, for its peek animation — with a
-    // header that could not be dragged in bottom-sheet mode. The move
-    // and release handlers below already write every height into the
-    // external value, so the host and the finger share one number; the
-    // grab just has to stop whatever the host is animating first.
-    onStartShouldSetPanResponder: () => mode === "bottomSheet",
-    onMoveShouldSetPanResponder: (evt, gestureState) => mode === "bottomSheet" && Math.abs(gestureState.dy) > 3,
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: evt => {
-      setIsResizing(true);
-
-      // Where inside the header the finger grabbed
-      headerTouchOffsetRef.current = evt.nativeEvent.locationY || 0;
-
-      // Stop any in-flight animations so we start from truth
-      animatedBottomPosition.stopAnimation(val => {
-        currentHeightRef.current = val;
-      });
-      externalAnimatedHeight?.stopAnimation();
-      bottomSheetTranslateY.stopAnimation();
-    },
-    onPanResponderMove: evt => {
-      // Absolute finger anchoring: sheet top should match finger (minus header offset)
-      const sheetTop = evt.nativeEvent.pageY - headerTouchOffsetRef.current;
-      // Height is from bottom of screen to sheetTop
-      let targetHeight = SCREEN.height - sheetTop;
-
-      // Clamp
-      targetHeight = Math.max(minHeight, Math.min(targetHeight, effectiveMaxHeight));
-
-      // Push to UI (no React state!)
-      animatedBottomPosition.setValue(targetHeight);
-      currentHeightRef.current = targetHeight;
-      if (externalAnimatedHeight) {
-        externalAnimatedHeight.setValue(targetHeight);
-      }
-    },
-    onPanResponderRelease: (evt, gestureState) => {
-      setIsResizing(false);
-      const finalHeight = currentHeightRef.current;
-
-      // Optional: close with fast downward swipe
-      const shouldClose = gestureState.vy > 0.8 && gestureState.dy > 50 || gestureState.dy > 150 && finalHeight <= minHeight;
-      if (shouldClose) {
-        _reactNative.Animated.parallel([_reactNative.Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        }), _reactNative.Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        })]).start(() => onClose());
-        return;
-      }
-
-      // We're already at the finger-tracked height; avoid re-animating it.
-      setPanelHeight(finalHeight);
-      if (externalAnimatedHeight) externalAnimatedHeight.setValue(finalHeight);
-    },
-    onPanResponderTerminate: () => {
-      setIsResizing(false);
-      // snap back to the last stable height if you want; otherwise no-op
-    }
-  }), [mode, minHeight, effectiveMaxHeight, animatedBottomPosition, externalAnimatedHeight, bottomSheetTranslateY, visibilityProgress, onClose]);
-
-  // ============================================================================
-  // CREATE RESIZE HANDLER: For 4-corner resize in floating mode (fixed geometry)
-  // ============================================================================
-  /**
-   * Create a PanResponder for handling corner-based resizing in floating mode
-   *
-   * This function generates resize handlers for each corner that allow users to
-   * resize the floating modal by dragging from any corner. It includes boundary
-   * checking and minimum size constraints.
-   *
-   * @param corner - Which corner this handler is for
-   * @returns PanResponder configured for that corner's resize behavior
-   *
-   * @performance Uses direct animated value updates for smooth resizing
-   * @performance Includes safe area boundary checking for all corners
-   */
-  const createResizeHandler = (0, _react.useCallback)(corner => {
-    let didResize = false;
-    return _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => mode === "floating",
-      onMoveShouldSetPanResponder: () => mode === "floating",
-      onPanResponderGrant: () => {
-        didResize = false;
-        const currentDims = currentDimensionsRef.current;
-
-        // If any animation is in-flight, stop and capture final XY to keep math consistent
-        floatingPosition.stopAnimation(({
-          x,
-          y
-        }) => {
-          floatingPosition.setValue({
-            x,
-            y
-          });
-        });
-        setIsResizing(true);
-        // Snapshot starting rect
-        startDimensionsRef.current = {
-          ...currentDims
-        };
-
-        // Keep your existing refs up-to-date (not strictly needed now, but harmless)
-        sHeight.current = currentDims.height;
-        sWidth.current = currentDims.width;
-        offsetX.current = currentDims.left;
-        offsetY.current = currentDims.top;
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        const {
-          dx,
-          dy
-        } = gestureState;
-        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
-        didResize = true;
-        // Safe-area–aware bounds
-        const minLeft = Math.max(0, insets.left || 0);
-        const maxRight = containerBounds.width - Math.max(0, insets.right || 0);
-        const minTop = Math.max(0, insets.top || 0);
-        const maxBottom = containerBounds.height - Math.max(0, insets.bottom || 0);
-        const start = startDimensionsRef.current;
-        const startRight = start.left + start.width;
-        const startBottom = start.top + start.height;
-        let left = start.left;
-        let top = start.top;
-        let right = startRight;
-        let bottom = startBottom;
-        switch (corner) {
-          case "topLeft":
-            {
-              // Move left & top; anchor right & bottom
-              const newLeft = Math.max(minLeft, Math.min(start.left + dx, startRight - FLOATING_MIN_WIDTH));
-              const newTop = Math.max(minTop, Math.min(start.top + dy, startBottom - FLOATING_MIN_HEIGHT));
-              left = newLeft;
-              top = newTop;
-              right = startRight;
-              bottom = startBottom;
-              break;
-            }
-          case "topRight":
-            {
-              // Move right & top; anchor left & bottom
-              const newRight = Math.min(maxRight, Math.max(startRight + dx, start.left + FLOATING_MIN_WIDTH));
-              const newTop = Math.max(minTop, Math.min(start.top + dy, startBottom - FLOATING_MIN_HEIGHT));
-              left = start.left;
-              top = newTop;
-              right = newRight;
-              bottom = startBottom;
-              break;
-            }
-          case "bottomLeft":
-            {
-              // Move left & bottom; anchor right & top
-              const newLeft = Math.max(minLeft, Math.min(start.left + dx, startRight - FLOATING_MIN_WIDTH));
-              const newBottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-              left = newLeft;
-              top = start.top;
-              right = startRight;
-              bottom = newBottom;
-              break;
-            }
-          case "bottomRight":
-            {
-              // Move right & bottom; anchor left & top
-              const newRight = Math.min(maxRight, Math.max(startRight + dx, start.left + FLOATING_MIN_WIDTH));
-              const newBottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-              left = start.left;
-              top = start.top;
-              right = newRight;
-              bottom = newBottom;
-              break;
-            }
-        }
-
-        // Derive width/height from the edges
-        const updatedWidth = Math.max(FLOATING_MIN_WIDTH, right - left);
-        const updatedHeight = Math.max(FLOATING_MIN_HEIGHT, bottom - top);
-
-        // Push to UI
-        setDimensions({
-          width: updatedWidth,
-          height: updatedHeight,
-          left,
-          top
-        });
-
-        // Keep animated values in sync for your transforms
-        animatedWidth.setValue(updatedWidth);
-        animatedFloatingHeight.setValue(updatedHeight);
-        floatingPosition.setValue({
-          x: left,
-          y: top
-        });
-
-        // Cache
-        currentDimensionsRef.current = {
-          width: updatedWidth,
-          height: updatedHeight,
-          left,
-          top
-        };
-      },
-      onPanResponderRelease: () => {
-        setIsResizing(false);
-        didResize = false;
-        // currentDimensionsRef already holds the last values
-        setDimensions(currentDimensionsRef.current);
-      },
-      onPanResponderTerminate: () => {
-        setIsResizing(false);
-        didResize = false;
-      }
-    });
-  }, [mode, containerBounds, insets.left, insets.right, insets.top, insets.bottom, floatingPosition, animatedWidth, animatedFloatingHeight, onClose, onBack]);
-  const resizeHandlers = (0, _react.useMemo)(() => {
-    return {
-      topLeft: createResizeHandler("topLeft"),
-      topRight: createResizeHandler("topRight"),
-      bottomLeft: createResizeHandler("bottomLeft"),
-      bottomRight: createResizeHandler("bottomRight")
-    };
-  }, [createResizeHandler]);
-
-  // ============================================================================
-  // Floating Mode Drag Handlers for DraggableHeader
-  // ============================================================================
-  const handleFloatingDragStart = (0, _react.useCallback)(() => {
-    setIsDragging(true);
-  }, []);
-  const handleFloatingDragEnd = (0, _react.useCallback)(finalPosition => {
-    setIsDragging(false);
-
-    // Update dimensions state to match final position
-    const currentDims = currentDimensionsRef.current;
-    const newDimensions = {
-      ...currentDims,
-      left: finalPosition.x,
-      top: finalPosition.y
-    };
-    setDimensions(newDimensions);
-  }, []);
-
-  // Track taps for double/triple tap functionality
-  const lastTapRef = (0, _react.useRef)(0);
-  const tapCountRef = (0, _react.useRef)(0);
-  const tapTimeoutRef = (0, _react.useRef)(null);
-  const handleFloatingTap = (0, _react.useCallback)(() => {
-    const now = Date.now();
-    const timeSinceLastTap = now - lastTapRef.current;
-
-    // Reset tap count if more than 500ms since last tap
-    if (timeSinceLastTap > 500) {
-      tapCountRef.current = 0;
-    }
-    tapCountRef.current++;
-    lastTapRef.current = now;
-
-    // Clear existing timeout
-    if (tapTimeoutRef.current) {
-      clearTimeout(tapTimeoutRef.current);
-    }
-
-    // Set timeout to process the tap gesture
-    tapTimeoutRef.current = setTimeout(() => {
-      if (tapCountRef.current === 2) {
-        // Double tap - toggle mode
-        toggleMode();
-      } else if (tapCountRef.current >= 3) {
-        // Triple tap - minimize modal (if available)
-        if (onMinimize) {
-          handleMinimize();
-        }
-      }
-      tapCountRef.current = 0;
-    }, 300);
-  }, [toggleMode, onMinimize, handleMinimize]);
-
-  // Clean up timeout on unmount for main component tap handler
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (tapTimeoutRef.current) {
-        clearTimeout(tapTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // ============================================================================
-  // RENDER: Modal UI with transform-based animations
-  // ============================================================================
-
-  // When not visible the SAME tree is rendered, just parked off-screen. It has
-  // to be the same tree: React reconciles by position, so a separate "hidden"
-  // branch would unmount and rebuild every child on each minimize AND each
-  // restore — which is the whole cost minimizing is supposed to avoid.
-
-  // Render floating mode
-  if (mode === "floating") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      nativeID: "jsmodal-root",
-      pointerEvents: visible ? "auto" : "none",
-      accessibilityElementsHidden: !visible,
-      importantForAccessibility: visible ? "auto" : "no-hide-descendants",
-      style: [styles.floatingModal, {
-        width: dimensions.width,
-        // Use state dimensions for real-time updates
-        height: dimensions.height,
-        opacity: modalOpacity,
-        transform: [{
-          translateX: floatingPosition.x
-        }, {
-          translateY: floatingPosition.y
-        }],
-        ...(zIndex !== undefined && {
-          zIndex
-        })
-      }, variant === "night" && styles.nightFloatingModal, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
-      children: [background && variant === "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.nightBackdropFloating,
-        pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.DraggableHeader, {
-        position: floatingPosition,
-        onDragStart: handleFloatingDragStart,
-        onDragEnd: handleFloatingDragEnd,
-        onTap: handleFloatingTap,
-        containerBounds: containerBounds,
-        elementSize: dimensions,
-        minPosition: {
-          x: 0,
-          y: insets.top
-        },
-        style: styles.floatingHeader,
-        enabled: mode === "floating" && !isResizing,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          variant: variant
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.windowControlsContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.WindowControls, {
-          onClose: onClose,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          onToggleMode: toggleMode,
-          mode: mode,
-          variant: variant
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
-        children: [background && variant !== "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
-        /*#__PURE__*/
-        // Render children directly when they manage their own scrolling (FlatList, etc.)
-        (0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: {
-            flex: 1,
-            paddingBottom: footerHeight
-          },
-          children: children
-        }) :
-        /*#__PURE__*/
-        // Wrap in ScrollView for content that needs scrolling
-        (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: {
-            flex: 1
-          },
-          contentContainerStyle: {
-            flexGrow: 1,
-            paddingBottom: footerHeight
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: children
-        }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: footerStyles.footerContainer,
-          children: footer
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.bottomLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 2,
-          left: 2,
-          right: 2,
-          bottom: 2
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          position: "bottomLeft",
-          isActive: isDragging || isResizing
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        ...resizeHandlers.bottomRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 2,
-          left: 2,
-          right: 2,
-          bottom: 2
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CornerHandle, {
-          position: "bottomRight",
-          isActive: isDragging || isResizing
-        })
-      })]
-    });
-  }
-
-  // Render bottom sheet mode with proper height animation
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [
-    // Same box either way — parking it off-screen instead of resizing it
-    // keeps the sheet's layout intact, so coming back is a translate and
-    // not a full relayout.
-    visible ? styles.fullScreenContainer : styles.parkedFullScreen, visible && zIndex !== undefined && {
-      zIndex
-    }],
-    pointerEvents: visible ? "box-none" : "none",
-    accessibilityElementsHidden: !visible,
-    importantForAccessibility: visible ? "auto" : "no-hide-descendants",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      nativeID: "jsmodal-root",
-      style: [styles.bottomSheetWrapper, {
-        opacity: modalOpacity,
-        transform: [{
-          translateY: bottomSheetTranslateY
-        }]
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.bottomSheet, variant === "night" && styles.nightBottomSheet, customStyles.container, {
-          height: externalAnimatedHeight || animatedBottomPosition
-        }],
-        children: [background && variant === "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.nightBackdropSheet,
-          pointerEvents: "none",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          isResizing: isResizing,
-          mode: mode,
-          panHandlers: bottomSheetPanResponder.panHandlers,
-          variant: variant
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.windowControlsContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.WindowControls, {
-            onClose: onClose,
-            onMinimize: onMinimize ? handleMinimize : undefined,
-            onToggleMode: toggleMode,
-            mode: mode,
-            variant: variant
-          })
-        }), hintLoaded && showHint && mode === "bottomSheet" && !hintsDisabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ModalHintBanner, {
-          onAcknowledge: handleHintAcknowledge
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
-          children: [background && variant !== "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
-          /*#__PURE__*/
-          // Render children directly when they manage their own scrolling (FlatList, etc.)
-          (0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: {
-              flex: 1,
-              paddingBottom: footerHeight
-            },
-            children: children
-          }) :
-          /*#__PURE__*/
-          // Wrap in ScrollView for content that needs scrolling
-          (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-            style: {
-              flex: 1
-            },
-            contentContainerStyle: {
-              flexGrow: 1,
-              paddingBottom: footerHeight
-            },
-            showsVerticalScrollIndicator: true,
-            nestedScrollEnabled: true,
-            children: children
-          }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: footerStyles.footerContainer,
-            children: footer
-          }) : null]
-        })]
-      })
-    })
-  });
-};
-
-// ============================================================================
-// STYLES - Visual styling for all modal components
-// ============================================================================
-const styles = _reactNative.StyleSheet.create({
-  fullScreenContainer: {
-    ..._absoluteFill.absoluteFill,
-    zIndex: 1000
-  },
-  bottomSheetWrapper: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  bottomSheet: {
-    backgroundColor: _index.buoyColors.card,
-    // Buoy card
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    borderWidth: 1,
-    borderColor: _index.buoyColors.border,
-    shadowColor: _index.buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 12,
-    elevation: 20
-  },
-  /** Off-screen park for a minimized floating modal — same box, moved away. */
-  parkedOffscreen: {
-    left: -9999,
-    top: -9999,
-    opacity: 0
-  },
-  /**
-   * Off-screen park for a minimized bottom sheet. Screen-sized on purpose:
-   * `fullScreenContainer` is an absolute fill, and shrinking it here would
-   * relayout the whole sheet on every minimize/restore.
-   */
-  parkedFullScreen: {
-    position: "absolute",
-    left: -9999,
-    top: -9999,
-    width: SCREEN.width,
-    height: SCREEN.height,
-    opacity: 0
-  },
-  floatingModal: {
-    position: "absolute",
-    backgroundColor: _index.buoyColors.card,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _index.buoyColors.border,
-    shadowColor: _index.buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 20,
-    elevation: 24,
-    zIndex: 1000,
-    // Default dimensions, will be overridden by animated values
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT
-  },
-  floatingModalDragging: {
-    borderColor: _index.buoyColors.primary,
-    borderWidth: 2,
-    shadowColor: _index.buoyColors.primary + "99",
-    shadowOpacity: 0.8,
-    shadowRadius: 12
-  },
-  header: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    backgroundColor: _index.buoyColors.card,
-    // Buoy card color
-    minHeight: 56,
-    borderWidth: 1,
-    borderColor: _index.buoyColors.border,
-    // Buoy border
-    borderBottomWidth: 1,
-    borderBottomColor: _index.buoyColors.border
-  },
-  // ── Night variant (Everlights sheet — see ui/night/nightTheme.ts) ────────
-  // NO `overflow: "hidden"` on the sheets: Fabric clips children to the
-  // square rect, so the star-field layer's corner painted OVER the rounded
-  // corner (it read as chopped off) — and iOS suppresses a layer's own shadow
-  // when it clips. The backdrop clips itself instead (nightBackdrop* below).
-  nightBottomSheet: {
-    backgroundColor: _nightTheme.night.color.bg,
-    borderTopLeftRadius: _nightTheme.night.radius.sheet,
-    borderTopRightRadius: _nightTheme.night.radius.sheet,
-    borderWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderColor: _nightTheme.night.color.accent + "55",
-    shadowColor: _nightTheme.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.22,
-    shadowRadius: 10
-  },
-  nightFloatingModal: {
-    backgroundColor: _nightTheme.night.color.bg,
-    borderRadius: _nightTheme.night.radius.sheet,
-    borderWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderColor: _nightTheme.night.color.accent + "55",
-    shadowColor: _nightTheme.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.22,
-    shadowRadius: 14
-  },
-  /** The header is glass — the sheet-level star field runs through it. */
-  nightHeader: {
-    backgroundColor: "transparent",
-    borderWidth: 0,
-    borderBottomWidth: 0,
-    borderTopLeftRadius: _nightTheme.night.radius.sheet,
-    borderTopRightRadius: _nightTheme.night.radius.sheet
-  },
-  nightContent: {
-    backgroundColor: "transparent"
-  },
-  /**
-   * The hoisted star field clips ITSELF to the sheet's corners (matching
-   * radii + overflow hidden) — see the note on the sheet styles above. It
-   * also keeps scenes that animate outside their own bounds (Hyperspace's
-   * scaled shells) from bleeding past the window.
-   */
-  nightBackdropSheet: {
-    ..._absoluteFill.absoluteFill,
-    borderTopLeftRadius: _nightTheme.night.radius.sheet,
-    borderTopRightRadius: _nightTheme.night.radius.sheet,
-    overflow: "hidden"
-  },
-  nightBackdropFloating: {
-    ..._absoluteFill.absoluteFill,
-    borderRadius: _nightTheme.night.radius.sheet,
-    overflow: "hidden"
-  },
-  /** Neutral Everlights handle instead of the glowing teal bar. */
-  nightDragIndicator: {
-    width: 36,
-    height: 5,
-    borderRadius: 2.5,
-    backgroundColor: _nightTheme.night.color.placeholder,
-    shadowOpacity: 0,
-    elevation: 0
-  },
-  floatingHeader: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6
-  },
-  windowControlsContainer: {
-    position: "absolute",
-    top: 4,
-    right: 4,
-    zIndex: 10
-  },
-  floatingModeHeader: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6
-  },
-  headerInner: {
-    flex: 1,
-    justifyContent: "center"
-  },
-  dragIndicatorContainer: {
-    alignItems: "center",
-    paddingVertical: 8,
-    backgroundColor: "transparent"
-  },
-  /**
-   * With custom header content the pill shares the top band with the window
-   * controls, so the strip claims that band (and centres the pill in it)
-   * rather than the header row below paying for the clearance sideways.
-   */
-  dragIndicatorContainerCustom: {
-    minHeight: WINDOW_CONTROLS_BAND,
-    justifyContent: "center",
-    paddingVertical: 0,
-    backgroundColor: "transparent"
-  },
-  dragIndicator: {
-    width: 40,
-    height: 3,
-    backgroundColor: _index.buoyColors.primary,
-    // Buoy primary teal
-    borderRadius: 2,
-    shadowColor: _index.buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 4
-  },
-  floatingDragIndicator: {
-    width: 50,
-    height: 5,
-    backgroundColor: _index.buoyColors.textMuted
-  },
-  dragIndicatorActive: {
-    backgroundColor: _index.buoyColors.primary,
-    width: 40
-  },
-  resizeGripContainer: {
-    position: "absolute",
-    flexDirection: "row",
-    gap: 2,
-    marginTop: 12
-  },
-  resizeGripLine: {
-    width: 12,
-    height: 1,
-    backgroundColor: _index.gameUIColors.success,
-    opacity: 0.6
-  },
-  headerContent: {
-    paddingHorizontal: 16,
-    alignItems: "center"
-  },
-  headerControls: {
-    position: "absolute",
-    top: 8,
-    right: 16,
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  headerTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: _index.gameUIColors.primary
-  },
-  headerSubtitle: {
-    fontSize: 12,
-    color: _index.gameUIColors.secondary,
-    paddingTop: 4
-  },
-  headerHintText: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  hintText: {
-    fontSize: 10,
-    color: _index.gameUIColors.muted,
-    fontStyle: "italic"
-  },
-  controlButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    justifyContent: "center",
-    alignItems: "center",
-    marginLeft: 8
-  },
-  toggleButton: {
-    backgroundColor: _index.gameUIColors.info + "1A",
-    borderWidth: 1,
-    borderColor: _index.gameUIColors.info + "33"
-  },
-  closeButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: _index.gameUIColors.error + "1A",
-    borderWidth: 1,
-    borderColor: _index.gameUIColors.error + "33",
-    marginLeft: 8
-  },
-  iconLine: {
-    position: "absolute",
-    top: 7.25,
-    left: 2,
-    width: 12,
-    height: 1.5,
-    backgroundColor: _index.gameUIColors.error
-  },
-  content: {
-    flex: 1,
-    backgroundColor: _index.buoyColors.base,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16,
-    overflow: "hidden"
-  },
-  cornerHandle: {
-    position: "absolute",
-    zIndex: 1
-  },
-  cornerHandleWrapper: {
-    position: "absolute",
-    width: 30,
-    height: 30,
-    zIndex: 1000
-  },
-  handler: {
-    width: 20,
-    height: 20,
-    backgroundColor: "transparent",
-    borderRadius: 10,
-    borderWidth: 0,
-    borderColor: "transparent"
-  },
-  handlerActive: {
-    backgroundColor: _index.gameUIColors.success + "1A",
-    borderColor: _index.gameUIColors.success,
-    borderWidth: 2,
-    shadowColor: _index.gameUIColors.success + "99",
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 1,
-    shadowRadius: 8
-  }
-});
-
-// Footer container styles (absolute within modal content area)
-const footerStyles = _reactNative.StyleSheet.create({
-  footerContainer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: _index.buoyColors.base,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16
-  }
-});
-
-// ============================================================================
-// EXPORT - Memoized modal component for optimal performance
-// ============================================================================
-const JsModal = exports.JsModal = /*#__PURE__*/(0, _react.memo)(props => {
-  const access = (0, _licenseModule.getUseAccountAccess)()();
-  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountSetup.AccountSetup, {}) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(JsModalComponent, {
-    ...props
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JsModal=void 0;var _licenseModule=require("./license/licenseModule.js");var _AccountSetup=require("./license/AccountSetup");var _react=require("react");var _reactNative=require("react-native");var _absoluteFill=require("./utils/absoluteFill.js");var _useSafeAreaInsets=require("./hooks/useSafeAreaInsets");var _index=require("./ui/gameUI/index.js");var _index2=require("./ui/components/index.js");var _ToolBackground=require("./ui/backgrounds/ToolBackground.js");var _nightTheme=require("./ui/night/nightTheme.js");var _persistentStorage=require("./utils/persistentStorage");var _modalStorage=require("./utils/modalStorage.js");var _devToolsStorageKeys=require("./storage/devToolsStorageKeys.js");var _index3=require("./context/index.js");var _jsxRuntime=require("react/jsx-runtime");const INSTANT_MODAL_ENTRANCE=true;const SCREEN=_reactNative.Dimensions.get("window");const MIN_HEIGHT=100;const DEFAULT_HEIGHT=400;const FLOATING_WIDTH=SCREEN.width;const FLOATING_HEIGHT=500;const FLOATING_MIN_WIDTH=SCREEN.width*.25;const FLOATING_MIN_HEIGHT=80;const WINDOW_CONTROLS_BAND=20;const DragIndicator=(0,_react.memo)(function s({isResizing:n,mode:x,hasCustomContent:B=false,variant:m="default"}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.dragIndicatorContainer,B&&styles.dragIndicatorContainerCustom],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dragIndicator,x==="floating"&&styles.floatingDragIndicator,n&&styles.dragIndicatorActive,m==="night"&&styles.nightDragIndicator]}),n&&x==="bottomSheet"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.resizeGripContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.resizeGripLine})]})]})});const CornerHandle=(0,_react.memo)(function s({position:n,isActive:x}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.cornerHandle],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.handler,x&&styles.handlerActive]})})});const ModalHeader=(0,_react.memo)(function s({header:n,onClose:x,onToggleMode:B,onMinimize:m,isResizing:W,mode:Y,panHandlers:p,variant:a="default"}){const b=(0,_react.useRef)(0);const N=(0,_react.useRef)(0);const V=(0,_react.useRef)(null);const w=(0,_react.useCallback)(()=>{const D=Date.now();const J=D-b.current;if(J>500){N.current=0}N.current++;b.current=D;if(V.current){clearTimeout(V.current)}V.current=setTimeout(()=>{if(N.current===2){B()}else if(N.current>=3){if(m){m()}}N.current=0},300)},[B,m]);(0,_react.useEffect)(()=>{return()=>{if(V.current){clearTimeout(V.current)}}},[]);const T=p?p:{};const $=!!p;if(n?.customContent){const D=(0,_react.isValidElement)(n.customContent)&&typeof n.customContent.type==="function"&&n.customContent.type.name==="CyberpunkModalHeader";if(D){return(0,_react.cloneElement)(n.customContent,{onToggleMode:B,onClose:x,mode:Y,panHandlers:T,showToggleButton:n?.showToggleButton!==false,hideCloseButton:n?.hideCloseButton})}let J=n.customContent;if((0,_react.isValidElement)(n.customContent)&&m){J=(0,_react.cloneElement)(n.customContent,{onMinimize:m})}const g=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:W,mode:Y,hasCustomContent:true,variant:a}),J]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.header,a==="night"&&styles.nightHeader],...T,children:$?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:g}):g})}const O=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:W,mode:Y,variant:a}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerContent,children:[n?.title&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerTitle,children:n.title}),n?.subtitle&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerSubtitle,children:n.subtitle})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.headerHintText,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.header,Y==="floating"&&styles.floatingModeHeader,a==="night"&&styles.nightHeader],...T,children:$?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:O}):O})});const JsModalComponent=({visible:s,onClose:n,children:x,header:B,styles:m={},minHeight:W=MIN_HEIGHT,maxHeight:Y,initialHeight:p=DEFAULT_HEIGHT,animatedHeight:a,benchMotion:b,initialMode:N="bottomSheet",onModeChange:V,persistenceKey:w,enablePersistence:T=true,initialFloatingPosition:$,footer:O,footerHeight:D=0,onBack:J,onMinimize:g,minimizeRequest:ie=0,minimizeTargetPosition:fe,initialModalState:l,zIndex:ae,disableScrollWrapper:Ce=false,background:le=true,variant:C="night"})=>{const j=(0,_useSafeAreaInsets.useSafeAreaInsets)();const[ye,Re]=(0,_react.useState)(!T);const[r,ge]=(0,_react.useState)(N);const[X,I]=(0,_react.useState)(false);const[de,Q]=(0,_react.useState)(false);const[Be,me]=(0,_react.useState)(p);const[k,K]=(0,_react.useState)({width:FLOATING_WIDTH,height:FLOATING_HEIGHT,top:(SCREEN.height-FLOATING_HEIGHT)/2,left:0});const[ue]=(0,_react.useState)({width:SCREEN.width,height:SCREEN.height});const[Ee,ce]=(0,_react.useState)(false);const[Me,xe]=(0,_react.useState)(false);const _e=(0,_index3.useHintsDisabled)();const u=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const f=(0,_react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;const Ve=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const v=(0,_react.useRef)(new _reactNative.Animated.Value(p)).current;const A=(0,_react.useRef)(p);(0,_react.useEffect)(()=>{if(!T||!w||!ye)return;const e=setTimeout(()=>{_modalStorage.ModalStorage.save(w,{mode:r,panelHeight:A.current,dimensions:k,isVisible:s})},500);return()=>clearTimeout(e)},[r,Be,k,s,w,T,ye]);const Te=(0,_react.useRef)(false);(0,_react.useEffect)(()=>{if(a&&!Te.current){Te.current=true;A.current=p;a.setValue(p)}},[a,p]);(0,_react.useEffect)(()=>{h.current=k},[k]);const d=(0,_react.useRef)(new _reactNative.Animated.ValueXY({x:$?.x??0,y:$?.y??(SCREEN.height-FLOATING_HEIGHT)/2})).current;const F=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const P=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;const G=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;const h=(0,_react.useRef)(k);const Se=(0,_react.useRef)(k);const We=(0,_react.useRef)(0);const Ne=(0,_react.useRef)(0);const Oe=(0,_react.useRef)(0);const Fe=(0,_react.useRef)(0);(0,_react.useEffect)(()=>{let e=true;const o=async()=>{try{const t=_devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();const H=await _persistentStorage.persistentStorage.getItem(t);if(e){ce(H!=="true");xe(true)}}catch(t){if(e){ce(true);xe(true)}}};o();return()=>{e=false}},[]);const Pe=(0,_react.useCallback)(async()=>{try{const e=_devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();await _persistentStorage.persistentStorage.setItem(e,"true");ce(false)}catch(e){ce(false)}},[]);const je=(0,_react.useRef)(V);je.current=V;(0,_react.useEffect)(()=>{if(!T||!w){Re(true);return}let e=true;const o=async()=>{const t=await _modalStorage.ModalStorage.load(w);if(e&&t){if(t.mode){ge(t.mode);je.current?.(t.mode)}if(t.panelHeight){me(t.panelHeight);A.current=t.panelHeight;v.setValue(t.panelHeight);a?.setValue(t.panelHeight)}if(t.dimensions){K(t.dimensions);d.setValue({x:t.dimensions.left,y:t.dimensions.top});P.setValue(t.dimensions.width);G.setValue(t.dimensions.height)}}if(e)Re(true)};o();return()=>{e=false}},[w,T,v,G,P,d]);(0,_react.useEffect)(()=>{return()=>{u.stopAnimation();f.stopAnimation();F.stopAnimation();Ve.stopAnimation();v.stopAnimation();d.stopAnimation();P.stopAnimation();G.stopAnimation();u.setValue(0);f.setValue(SCREEN.height);F.setValue(0);Ve.setValue(0);v.setValue(p);A.current=p}},[]);const Ie=u.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const pe=Y||SCREEN.height-j.top;const q=(0,_react.useCallback)(()=>{Q(false);I(false);const e=r==="bottomSheet"?"floating":"bottomSheet";ge(e);V?.(e)},[r,V]);(0,_react.useEffect)(()=>{Q(false);I(false)},[r]);const E=(0,_react.useCallback)(()=>{if(!g)return;const e={mode:r,panelHeight:A.current,floatingPosition:{x:h.current.left,y:h.current.top},floatingDimensions:{width:h.current.width,height:h.current.height}};if(T&&w)void _modalStorage.ModalStorage.saveMinimized(w,e);const o=fe?.x??SCREEN.width-50;const t=fe?.y??SCREEN.height-150;if(r==="bottomSheet"){_reactNative.Animated.parallel([_reactNative.Animated.timing(u,{toValue:0,duration:300,useNativeDriver:true}),_reactNative.Animated.timing(f,{toValue:SCREEN.height,duration:300,useNativeDriver:true})]).start(()=>{g(e)})}else{_reactNative.Animated.parallel([_reactNative.Animated.timing(F,{toValue:0,duration:300,useNativeDriver:true}),_reactNative.Animated.timing(u,{toValue:0,duration:300,useNativeDriver:true}),_reactNative.Animated.timing(d,{toValue:{x:o,y:t},duration:300,useNativeDriver:true})]).start(()=>{g(e)})}},[r,g,fe,T,w,u,f,F,d]);const ve=(0,_react.useRef)(ie);(0,_react.useEffect)(()=>{if(ve.current===ie)return;ve.current=ie;E()},[ie,E]);(0,_react.useEffect)(()=>{if(!l)return;if(l.mode){ge(l.mode);V?.(l.mode)}if(l.panelHeight){me(l.panelHeight);A.current=l.panelHeight;v.setValue(l.panelHeight)}if(l.floatingDimensions&&l.floatingPosition){const e={width:l.floatingDimensions.width,height:l.floatingDimensions.height,top:l.floatingPosition.y,left:l.floatingPosition.x};K(e);d.setValue({x:l.floatingPosition.x,y:l.floatingPosition.y});P.setValue(l.floatingDimensions.width);G.setValue(l.floatingDimensions.height)}},[l]);const Ae=e=>{if(e){if(r==="bottomSheet"){f.setValue(0)}else{F.setValue(1);d.setValue({x:h.current.left,y:h.current.top})}u.setValue(1)}else{if(r==="bottomSheet"){f.setValue(SCREEN.height)}u.setValue(0)}};const De=(0,_react.useRef)(null);if(INSTANT_MODAL_ENTRANCE&&De.current!==s){De.current=s;Ae(s)}(0,_react.useEffect)(()=>{let e=null;let o=null;if(INSTANT_MODAL_ENTRANCE){Ae(s);return}if(s){f.setValue(SCREEN.height);u.setValue(0);if(r==="bottomSheet"){e=_reactNative.Animated.parallel([_reactNative.Animated.spring(f,{toValue:0,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(u,{toValue:1,duration:200,useNativeDriver:true})]);e.start()}else{F.setValue(1);d.setValue({x:h.current.left,y:h.current.top});e=_reactNative.Animated.timing(u,{toValue:1,duration:200,useNativeDriver:true});e.start()}}else{if(r==="bottomSheet"){o=_reactNative.Animated.parallel([_reactNative.Animated.spring(f,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(u,{toValue:0,duration:200,useNativeDriver:true})]);o.start()}else{o=_reactNative.Animated.timing(u,{toValue:0,duration:200,useNativeDriver:true});o.start()}}return()=>{if(e){e.stop()}if(o){o.stop()}}},[s,r,u,f,F,d,a]);const ke=(0,_react.useRef)(0);(0,_react.useEffect)(()=>{if(!__DEV__||!b||!s)return void 0;let e=null;let o=null;let t=true;const H=Date.now();let y=false;const M=L=>{y=L;if(b==="resize"||b==="float-resize"){I(L)}else if(b==="float-drag"){Q(L)}};if(b==="mode-cycle"){o=setInterval(()=>q(),2200)}else{const L=W;const he=pe;const ne=()=>{if(!t)return;const Z=(Date.now()-H)/1e3;const i=Z%2.5;if(i<2&&!y)M(true);else if(i>=2&&y)M(false);if(y){const R=(Math.sin(Z*2.2)+1)/2;if(b==="resize"){const c=L+R*(he-L);v.setValue(c);A.current=c;if(a){a.setValue(c)}}else if(b==="float-drag"){const c=(Math.sin(Z*1.7)+1)/2;d.setValue({x:10+R*Math.max(SCREEN.width-FLOATING_WIDTH-20,0),y:70+c*260})}else if(b==="float-resize"){const c=FLOATING_WIDTH+R*Math.max(SCREEN.width-FLOATING_WIDTH-40,0);const S=FLOATING_HEIGHT+R*240;P.setValue(c);G.setValue(S);h.current={...h.current,width:c,height:S}}}e=requestAnimationFrame(ne)};e=requestAnimationFrame(ne)}return()=>{t=false;if(e!=null)cancelAnimationFrame(e);if(o!=null)clearInterval(o);I(false);Q(false)}},[b,s]);const Ge=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>r==="bottomSheet",onMoveShouldSetPanResponder:(e,o)=>r==="bottomSheet"&&Math.abs(o.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:e=>{I(true);ke.current=e.nativeEvent.locationY||0;v.stopAnimation(o=>{A.current=o});a?.stopAnimation();f.stopAnimation()},onPanResponderMove:e=>{const o=e.nativeEvent.pageY-ke.current;let t=SCREEN.height-o;t=Math.max(W,Math.min(t,pe));v.setValue(t);A.current=t;if(a){a.setValue(t)}},onPanResponderRelease:(e,o)=>{I(false);const t=A.current;const H=o.vy>.8&&o.dy>50||o.dy>150&&t<=W;if(H){_reactNative.Animated.parallel([_reactNative.Animated.timing(u,{toValue:0,duration:200,useNativeDriver:true}),_reactNative.Animated.spring(f,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>n());return}me(t);if(a)a.setValue(t)},onPanResponderTerminate:()=>{I(false)}}),[r,W,pe,v,a,f,u,n]);const ee=(0,_react.useCallback)(e=>{let o=false;return _reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>r==="floating",onMoveShouldSetPanResponder:()=>r==="floating",onPanResponderGrant:()=>{o=false;const t=h.current;d.stopAnimation(({x:H,y})=>{d.setValue({x:H,y})});I(true);Se.current={...t};Oe.current=t.height;Fe.current=t.width;We.current=t.left;Ne.current=t.top},onPanResponderMove:(t,H)=>{const{dx:y,dy:M}=H;if(Math.abs(y)<.5&&Math.abs(M)<.5)return;o=true;const L=Math.max(0,j.left||0);const he=ue.width-Math.max(0,j.right||0);const ne=Math.max(0,j.top||0);const Z=ue.height-Math.max(0,j.bottom||0);const i=Se.current;const R=i.left+i.width;const c=i.top+i.height;let S=i.left;let _=i.top;let re=R;let se=c;switch(e){case"topLeft":{const U=Math.max(L,Math.min(i.left+y,R-FLOATING_MIN_WIDTH));const z=Math.max(ne,Math.min(i.top+M,c-FLOATING_MIN_HEIGHT));S=U;_=z;re=R;se=c;break}case"topRight":{const U=Math.min(he,Math.max(R+y,i.left+FLOATING_MIN_WIDTH));const z=Math.max(ne,Math.min(i.top+M,c-FLOATING_MIN_HEIGHT));S=i.left;_=z;re=U;se=c;break}case"bottomLeft":{const U=Math.max(L,Math.min(i.left+y,R-FLOATING_MIN_WIDTH));const z=Math.min(Z,Math.max(c+M,i.top+FLOATING_MIN_HEIGHT));S=U;_=i.top;re=R;se=z;break}case"bottomRight":{const U=Math.min(he,Math.max(R+y,i.left+FLOATING_MIN_WIDTH));const z=Math.min(Z,Math.max(c+M,i.top+FLOATING_MIN_HEIGHT));S=i.left;_=i.top;re=U;se=z;break}}const be=Math.max(FLOATING_MIN_WIDTH,re-S);const we=Math.max(FLOATING_MIN_HEIGHT,se-_);K({width:be,height:we,left:S,top:_});P.setValue(be);G.setValue(we);d.setValue({x:S,y:_});h.current={width:be,height:we,left:S,top:_}},onPanResponderRelease:()=>{I(false);o=false;K(h.current)},onPanResponderTerminate:()=>{I(false);o=false}})},[r,ue,j.left,j.right,j.top,j.bottom,d,P,G,n,J]);const He=(0,_react.useMemo)(()=>{return{topLeft:ee("topLeft"),topRight:ee("topRight"),bottomLeft:ee("bottomLeft"),bottomRight:ee("bottomRight")}},[ee]);const qe=(0,_react.useCallback)(()=>{Q(true)},[]);const Ue=(0,_react.useCallback)(e=>{Q(false);const o=h.current;const t={...o,left:e.x,top:e.y};K(t)},[]);const Le=(0,_react.useRef)(0);const te=(0,_react.useRef)(0);const oe=(0,_react.useRef)(null);const ze=(0,_react.useCallback)(()=>{const e=Date.now();const o=e-Le.current;if(o>500){te.current=0}te.current++;Le.current=e;if(oe.current){clearTimeout(oe.current)}oe.current=setTimeout(()=>{if(te.current===2){q()}else if(te.current>=3){if(g){E()}}te.current=0},300)},[q,g,E]);(0,_react.useEffect)(()=>{return()=>{if(oe.current){clearTimeout(oe.current)}}},[]);if(r==="floating"){return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{nativeID:"jsmodal-root",pointerEvents:s?"auto":"none",accessibilityElementsHidden:!s,importantForAccessibility:s?"auto":"no-hide-descendants",style:[styles.floatingModal,{width:k.width,height:k.height,opacity:Ie,transform:[{translateX:d.x},{translateY:d.y}],...ae!==void 0&&{zIndex:ae}},C==="night"&&styles.nightFloatingModal,(de||X)&&styles.floatingModalDragging,m.container,!s&&styles.parkedOffscreen],children:[le&&C==="night"?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nightBackdropFloating,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{})}):null,(0,_jsxRuntime.jsx)(_index2.DraggableHeader,{position:d,onDragStart:qe,onDragEnd:Ue,onTap:ze,containerBounds:ue,elementSize:k,minPosition:{x:0,y:j.top},style:styles.floatingHeader,enabled:r==="floating"&&!X,children:(0,_jsxRuntime.jsx)(ModalHeader,{header:B,onClose:n,onToggleMode:q,onMinimize:g?E:void 0,isResizing:de||X,mode:r,variant:C})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.windowControlsContainer,children:(0,_jsxRuntime.jsx)(_index2.WindowControls,{onClose:n,onMinimize:g?E:void 0,onToggleMode:q,mode:r,variant:C})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.content,C==="night"&&styles.nightContent,m.content],children:[le&&C!=="night"?(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{}):null,Ce?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flex:1,paddingBottom:D},children:x}):(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:D},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,keyboardShouldPersistTaps:"handled",children:x}),O?(0,_jsxRuntime.jsx)(_reactNative.View,{style:footerStyles.footerContainer,children:O}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{...He.bottomLeft.panHandlers,style:[styles.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:2,left:2,right:2,bottom:2},children:(0,_jsxRuntime.jsx)(CornerHandle,{position:"bottomLeft",isActive:de||X})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...He.bottomRight.panHandlers,style:[styles.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:2,left:2,right:2,bottom:2},children:(0,_jsxRuntime.jsx)(CornerHandle,{position:"bottomRight",isActive:de||X})})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s?styles.fullScreenContainer:styles.parkedFullScreen,s&&ae!==void 0&&{zIndex:ae}],pointerEvents:s?"box-none":"none",accessibilityElementsHidden:!s,importantForAccessibility:s?"auto":"no-hide-descendants",children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{nativeID:"jsmodal-root",style:[styles.bottomSheetWrapper,{opacity:Ie,transform:[{translateY:f}]}],children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[styles.bottomSheet,C==="night"&&styles.nightBottomSheet,m.container,{height:a||v}],children:[le&&C==="night"?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nightBackdropSheet,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{})}):null,(0,_jsxRuntime.jsx)(ModalHeader,{header:B,onClose:n,onToggleMode:q,onMinimize:g?E:void 0,isResizing:X,mode:r,panHandlers:Ge.panHandlers,variant:C}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.windowControlsContainer,children:(0,_jsxRuntime.jsx)(_index2.WindowControls,{onClose:n,onMinimize:g?E:void 0,onToggleMode:q,mode:r,variant:C})}),Me&&Ee&&r==="bottomSheet"&&!_e&&(0,_jsxRuntime.jsx)(_index2.ModalHintBanner,{onAcknowledge:Pe}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.content,C==="night"&&styles.nightContent,m.content],children:[le&&C!=="night"?(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{}):null,Ce?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flex:1,paddingBottom:D},children:x}):(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:D},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,keyboardShouldPersistTaps:"handled",children:x}),O?(0,_jsxRuntime.jsx)(_reactNative.View,{style:footerStyles.footerContainer,children:O}):null]})]})})})};const styles=_reactNative.StyleSheet.create({fullScreenContainer:{..._absoluteFill.absoluteFill,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:_index.buoyColors.card,borderTopLeftRadius:6,borderTopRightRadius:6,borderWidth:1,borderColor:_index.buoyColors.border,shadowColor:_index.buoyColors.primary,shadowOffset:{width:0,height:-4},shadowOpacity:.2,shadowRadius:12,elevation:20},parkedOffscreen:{left:-9999,top:-9999,opacity:0},parkedFullScreen:{position:"absolute",left:-9999,top:-9999,width:SCREEN.width,height:SCREEN.height,opacity:0},floatingModal:{position:"absolute",backgroundColor:_index.buoyColors.card,borderRadius:6,borderWidth:1,borderColor:_index.buoyColors.border,shadowColor:_index.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.3,shadowRadius:20,elevation:24,zIndex:1e3,width:FLOATING_WIDTH,height:FLOATING_HEIGHT},floatingModalDragging:{borderColor:_index.buoyColors.primary,borderWidth:2,shadowColor:_index.buoyColors.primary+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:6,borderTopRightRadius:6,backgroundColor:_index.buoyColors.card,minHeight:56,borderWidth:1,borderColor:_index.buoyColors.border,borderBottomWidth:1,borderBottomColor:_index.buoyColors.border},nightBottomSheet:{backgroundColor:_nightTheme.night.color.bg,borderTopLeftRadius:_nightTheme.night.radius.sheet,borderTopRightRadius:_nightTheme.night.radius.sheet,borderWidth:_reactNative.StyleSheet.hairlineWidth,borderColor:_nightTheme.night.color.accent+"55",shadowColor:_nightTheme.night.color.accent,shadowOffset:{width:0,height:-4},shadowOpacity:.22,shadowRadius:10},nightFloatingModal:{backgroundColor:_nightTheme.night.color.bg,borderRadius:_nightTheme.night.radius.sheet,borderWidth:_reactNative.StyleSheet.hairlineWidth,borderColor:_nightTheme.night.color.accent+"55",shadowColor:_nightTheme.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.22,shadowRadius:14},nightHeader:{backgroundColor:"transparent",borderWidth:0,borderBottomWidth:0,borderTopLeftRadius:_nightTheme.night.radius.sheet,borderTopRightRadius:_nightTheme.night.radius.sheet},nightContent:{backgroundColor:"transparent"},nightBackdropSheet:{..._absoluteFill.absoluteFill,borderTopLeftRadius:_nightTheme.night.radius.sheet,borderTopRightRadius:_nightTheme.night.radius.sheet,overflow:"hidden"},nightBackdropFloating:{..._absoluteFill.absoluteFill,borderRadius:_nightTheme.night.radius.sheet,overflow:"hidden"},nightDragIndicator:{width:36,height:5,borderRadius:2.5,backgroundColor:_nightTheme.night.color.placeholder,shadowOpacity:0,elevation:0},floatingHeader:{borderTopLeftRadius:6,borderTopRightRadius:6},windowControlsContainer:{position:"absolute",top:4,right:4,zIndex:10},floatingModeHeader:{borderTopLeftRadius:6,borderTopRightRadius:6},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{minHeight:WINDOW_CONTROLS_BAND,justifyContent:"center",paddingVertical:0,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:_index.buoyColors.primary,borderRadius:2,shadowColor:_index.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:_index.buoyColors.textMuted},dragIndicatorActive:{backgroundColor:_index.buoyColors.primary,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:_index.gameUIColors.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerControls:{position:"absolute",top:8,right:16,flexDirection:"row",alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:_index.gameUIColors.primary},headerSubtitle:{fontSize:12,color:_index.gameUIColors.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:_index.gameUIColors.muted,fontStyle:"italic"},controlButton:{width:28,height:28,borderRadius:6,justifyContent:"center",alignItems:"center",marginLeft:8},toggleButton:{backgroundColor:_index.gameUIColors.info+"1A",borderWidth:1,borderColor:_index.gameUIColors.info+"33"},closeButton:{width:28,height:28,borderRadius:6,justifyContent:"center",alignItems:"center",backgroundColor:_index.gameUIColors.error+"1A",borderWidth:1,borderColor:_index.gameUIColors.error+"33",marginLeft:8},iconLine:{position:"absolute",top:7.25,left:2,width:12,height:1.5,backgroundColor:_index.gameUIColors.error},content:{flex:1,backgroundColor:_index.buoyColors.base,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:_index.gameUIColors.success+"1A",borderColor:_index.gameUIColors.success,borderWidth:2,shadowColor:_index.gameUIColors.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8}});const footerStyles=_reactNative.StyleSheet.create({footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:_index.buoyColors.base,borderBottomLeftRadius:16,borderBottomRightRadius:16}});const JsModal=exports.JsModal=(0,_react.memo)(s=>{const n=(0,_licenseModule.getUseAccountAccess)()();if(n.status!=="admitted")return s.visible?(0,_jsxRuntime.jsx)(_AccountSetup.AccountSetup,{}):null;return(0,_jsxRuntime.jsx)(JsModalComponent,{...s})});