@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/JsModal.js

@@ -1,1810 +1 @@
-"use strict";
-
-import { getUseAccountAccess } from "./license/licenseModule.js";
-import { AccountSetup } from "./license/AccountSetup";
-/**
- * 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.
- */
-
-import { useState, useRef, useEffect, useMemo, useCallback, memo, isValidElement, cloneElement } from "react";
-import { View, StyleSheet, TouchableWithoutFeedback, Dimensions, PanResponder, Animated, ScrollView, Text } from "react-native";
-import { absoluteFill } from "./utils/absoluteFill.js";
-import { useSafeAreaInsets } from "./hooks/useSafeAreaInsets.js";
-import { gameUIColors, buoyColors } from "./ui/gameUI/index.js";
-import { DraggableHeader, ModalHintBanner, WindowControls } from "./ui/components/index.js";
-import { ToolBackground } from "./ui/backgrounds/ToolBackground.js";
-import { night } from "./ui/night/nightTheme.js";
-import { persistentStorage } from "./utils/persistentStorage.js";
-import { devToolsStorageKeys } from "./storage/devToolsStorageKeys.js";
-import { useHintsDisabled } from "./context/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================================================
-// 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 = 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.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.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__*/memo(function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  variant = "default"
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
-    children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
-      style: styles.resizeGripContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.resizeGripLine
-      })]
-    })]
-  });
-});
-
-/**
- * CornerHandle - Resize handle for floating mode corners
- */
-const CornerHandle = /*#__PURE__*/memo(function CornerHandle({
-  position,
-  isActive
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.cornerHandle],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.handler, isActive && styles.handlerActive]
-    })
-  });
-});
-
-/**
- * ModalHeader - Header bar with title, controls, and drag area
- */
-
-const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
-  header,
-  onClose,
-  onToggleMode,
-  onMinimize,
-  isResizing,
-  mode,
-  panHandlers,
-  variant = "default"
-}) {
-  const lastTapRef = useRef(0);
-  const tapCountRef = useRef(0);
-  const tapTimeoutRef = useRef(null);
-  const handleHeaderTap = 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
-  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__*/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__*/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__*/isValidElement(header.customContent) && onMinimize) {
-      customContentWithMinimize = /*#__PURE__*/cloneElement(header.customContent, {
-        onMinimize
-      });
-    }
-    const headerContent = /*#__PURE__*/_jsxs(View, {
-      style: styles.headerInner,
-      children: [/*#__PURE__*/_jsx(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        variant: variant
-      }), customContentWithMinimize]
-    });
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.header, variant === "night" && styles.nightHeader],
-      ...headerProps,
-      children: shouldHandleTap ? /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleHeaderTap,
-        children: headerContent
-      }) : headerContent
-    });
-  }
-  const headerContent = /*#__PURE__*/_jsxs(View, {
-    style: styles.headerInner,
-    children: [/*#__PURE__*/_jsx(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      variant: variant
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.headerContent,
-      children: [header?.title && /*#__PURE__*/_jsx(Text, {
-        style: styles.headerTitle,
-        children: header.title
-      }), header?.subtitle && /*#__PURE__*/_jsx(Text, {
-        style: styles.headerSubtitle,
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.headerHintText,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.hintText,
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader, variant === "night" && styles.nightHeader],
-    ...headerProps,
-    children: shouldHandleTap ? /*#__PURE__*/_jsx(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 = useSafeAreaInsets();
-  const [isStateLoaded, setIsStateLoaded] = useState(!enablePersistence);
-  const [mode, setMode] = useState(initialMode);
-  const [isResizing, setIsResizing] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [panelHeight, setPanelHeight] = useState(initialHeight);
-  const [dimensions, setDimensions] = useState({
-    width: FLOATING_WIDTH,
-    height: FLOATING_HEIGHT,
-    top: (SCREEN.height - FLOATING_HEIGHT) / 2,
-    left: 0 // Flush with left edge
-  });
-  const [containerBounds] = useState({
-    width: SCREEN.width,
-    height: SCREEN.height
-  });
-  const [showHint, setShowHint] = useState(false);
-  const [hintLoaded, setHintLoaded] = useState(false);
-  const hintsDisabled = useHintsDisabled();
-
-  // ============================================================================
-  // ANIMATED VALUES - All using native driver
-  // ============================================================================
-
-  // Main visibility progress (0 = hidden, 1 = visible)
-  const visibilityProgress = useRef(new Animated.Value(0)).current;
-
-  // Bottom sheet specific - using translateY for performance!
-  const bottomSheetTranslateY = useRef(new Animated.Value(SCREEN.height)).current;
-  const dragOffset = useRef(new Animated.Value(0)).current;
-
-  // Height tracking for resize - actual position from bottom
-  const animatedBottomPosition = useRef(new Animated.Value(initialHeight)).current;
-  const currentHeightRef = useRef(initialHeight);
-
-  // Save state with debounce
-  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 = useRef(false);
-  useEffect(() => {
-    if (externalAnimatedHeight && !externalHeightSeeded.current) {
-      externalHeightSeeded.current = true;
-      currentHeightRef.current = initialHeight;
-      externalAnimatedHeight.setValue(initialHeight);
-    }
-  }, [externalAnimatedHeight, initialHeight]);
-
-  // Update refs when dimensions change
-  useEffect(() => {
-    currentDimensionsRef.current = dimensions;
-  }, [dimensions]);
-
-  // Floating mode animations - use initialFloatingPosition if provided
-  const floatingPosition = useRef(new Animated.ValueXY({
-    x: initialFloatingPosition?.x ?? 0,
-    // Flush with left edge
-    y: initialFloatingPosition?.y ?? (SCREEN.height - FLOATING_HEIGHT) / 2
-  })).current;
-  const floatingScale = useRef(new Animated.Value(0)).current;
-  const animatedWidth = useRef(new Animated.Value(FLOATING_WIDTH)).current;
-  const animatedFloatingHeight = useRef(new Animated.Value(FLOATING_HEIGHT)).current;
-
-  // Refs for resize handles
-  const currentDimensionsRef = useRef(dimensions);
-  const startDimensionsRef = useRef(dimensions);
-  const offsetX = useRef(0);
-  const offsetY = useRef(0);
-  const sHeight = useRef(0);
-  const sWidth = useRef(0);
-
-  // Load hint acknowledgment status on mount
-  useEffect(() => {
-    let mounted = true;
-    const loadHintStatus = async () => {
-      try {
-        const hintKey = devToolsStorageKeys.modal.hintAcknowledged();
-        const acknowledged = await 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 = useCallback(async () => {
-    try {
-      const hintKey = devToolsStorageKeys.modal.hintAcknowledged();
-      await 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 = useRef(onModeChange);
-  onModeChangeRef.current = onModeChange;
-
-  // Load persisted state on mount
-  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
-  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 = 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
-  useEffect(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-  }, [mode]);
-
-  // Minimize handler - captures current state and animates out
-  const handleMinimize = 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
-      Animated.parallel([Animated.timing(visibilityProgress, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), Animated.timing(bottomSheetTranslateY, {
-        toValue: SCREEN.height,
-        duration: 300,
-        useNativeDriver: true
-      })]).start(() => {
-        onMinimize(currentState);
-      });
-    } else {
-      // Floating mode - animate scale and position toward icon
-      Animated.parallel([Animated.timing(floatingScale, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), Animated.timing(visibilityProgress, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true
-      }), Animated.timing(floatingPosition, {
-        toValue: {
-          x: targetX,
-          y: targetY
-        },
-        duration: 300,
-        useNativeDriver: true
-      })]).start(() => {
-        onMinimize(currentState);
-      });
-    }
-  }, [mode, onMinimize, minimizeTargetPosition, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition]);
-  const lastMinimizeRequest = useRef(minimizeRequest);
-  useEffect(() => {
-    if (lastMinimizeRequest.current === minimizeRequest) return;
-    lastMinimizeRequest.current = minimizeRequest;
-    handleMinimize();
-  }, [minimizeRequest, handleMinimize]);
-
-  // Apply initial modal state when restoring from minimized
-  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 = useRef(null);
-  if (INSTANT_MODAL_ENTRANCE && snappedVisibleRef.current !== visible) {
-    snappedVisibleRef.current = visible;
-    snapVisibility(visible);
-  }
-  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 = Animated.parallel([
-        // Slide up from bottom
-        Animated.spring(bottomSheetTranslateY, {
-          toValue: 0,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }),
-        // Fade in backdrop
-        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 = Animated.timing(visibilityProgress, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        });
-        openAnimation.start();
-      }
-    } else {
-      // Close animations
-      if (mode === "bottomSheet") {
-        closeAnimation = Animated.parallel([
-        // Slide down
-        Animated.spring(bottomSheetTranslateY, {
-          toValue: SCREEN.height,
-          tension: 180,
-          friction: 22,
-          useNativeDriver: true
-        }),
-        // Fade out backdrop
-        Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })]);
-        closeAnimation.start();
-      } else {
-        // Floating mode exit - simple fade without scale
-        closeAnimation = 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 = 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.
-  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 = useMemo(() => 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) {
-        Animated.parallel([Animated.timing(visibilityProgress, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        }), 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 = useCallback(corner => {
-    let didResize = false;
-    return 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 = useMemo(() => {
-    return {
-      topLeft: createResizeHandler("topLeft"),
-      topRight: createResizeHandler("topRight"),
-      bottomLeft: createResizeHandler("bottomLeft"),
-      bottomRight: createResizeHandler("bottomRight")
-    };
-  }, [createResizeHandler]);
-
-  // ============================================================================
-  // Floating Mode Drag Handlers for DraggableHeader
-  // ============================================================================
-  const handleFloatingDragStart = useCallback(() => {
-    setIsDragging(true);
-  }, []);
-  const handleFloatingDragEnd = 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 = useRef(0);
-  const tapCountRef = useRef(0);
-  const tapTimeoutRef = useRef(null);
-  const handleFloatingTap = 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
-  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__*/_jsxs(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__*/_jsx(View, {
-        style: styles.nightBackdropFloating,
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(ToolBackground, {})
-      }) : null, /*#__PURE__*/_jsx(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__*/_jsx(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          variant: variant
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.windowControlsContainer,
-        children: /*#__PURE__*/_jsx(WindowControls, {
-          onClose: onClose,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          onToggleMode: toggleMode,
-          mode: mode,
-          variant: variant
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
-        children: [background && variant !== "night" ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ?
-        /*#__PURE__*/
-        // Render children directly when they manage their own scrolling (FlatList, etc.)
-        _jsx(View, {
-          style: {
-            flex: 1,
-            paddingBottom: footerHeight
-          },
-          children: children
-        }) :
-        /*#__PURE__*/
-        // Wrap in ScrollView for content that needs scrolling
-        _jsx(ScrollView, {
-          style: {
-            flex: 1
-          },
-          contentContainerStyle: {
-            flexGrow: 1,
-            paddingBottom: footerHeight
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: children
-        }), footer ? /*#__PURE__*/_jsx(View, {
-          style: footerStyles.footerContainer,
-          children: footer
-        }) : null]
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.bottomLeft.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          left: 4
-        }],
-        hitSlop: {
-          top: 2,
-          left: 2,
-          right: 2,
-          bottom: 2
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          position: "bottomLeft",
-          isActive: isDragging || isResizing
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        ...resizeHandlers.bottomRight.panHandlers,
-        style: [styles.cornerHandleWrapper, {
-          bottom: 4,
-          right: 4
-        }],
-        hitSlop: {
-          top: 2,
-          left: 2,
-          right: 2,
-          bottom: 2
-        },
-        children: /*#__PURE__*/_jsx(CornerHandle, {
-          position: "bottomRight",
-          isActive: isDragging || isResizing
-        })
-      })]
-    });
-  }
-
-  // Render bottom sheet mode with proper height animation
-  return /*#__PURE__*/_jsx(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__*/_jsx(Animated.View, {
-      nativeID: "jsmodal-root",
-      style: [styles.bottomSheetWrapper, {
-        opacity: modalOpacity,
-        transform: [{
-          translateY: bottomSheetTranslateY
-        }]
-      }],
-      children: /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.bottomSheet, variant === "night" && styles.nightBottomSheet, customStyles.container, {
-          height: externalAnimatedHeight || animatedBottomPosition
-        }],
-        children: [background && variant === "night" ? /*#__PURE__*/_jsx(View, {
-          style: styles.nightBackdropSheet,
-          pointerEvents: "none",
-          children: /*#__PURE__*/_jsx(ToolBackground, {})
-        }) : null, /*#__PURE__*/_jsx(ModalHeader, {
-          header: header,
-          onClose: onClose,
-          onToggleMode: toggleMode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          isResizing: isResizing,
-          mode: mode,
-          panHandlers: bottomSheetPanResponder.panHandlers,
-          variant: variant
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.windowControlsContainer,
-          children: /*#__PURE__*/_jsx(WindowControls, {
-            onClose: onClose,
-            onMinimize: onMinimize ? handleMinimize : undefined,
-            onToggleMode: toggleMode,
-            mode: mode,
-            variant: variant
-          })
-        }), hintLoaded && showHint && mode === "bottomSheet" && !hintsDisabled && /*#__PURE__*/_jsx(ModalHintBanner, {
-          onAcknowledge: handleHintAcknowledge
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
-          children: [background && variant !== "night" ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ?
-          /*#__PURE__*/
-          // Render children directly when they manage their own scrolling (FlatList, etc.)
-          _jsx(View, {
-            style: {
-              flex: 1,
-              paddingBottom: footerHeight
-            },
-            children: children
-          }) :
-          /*#__PURE__*/
-          // Wrap in ScrollView for content that needs scrolling
-          _jsx(ScrollView, {
-            style: {
-              flex: 1
-            },
-            contentContainerStyle: {
-              flexGrow: 1,
-              paddingBottom: footerHeight
-            },
-            showsVerticalScrollIndicator: true,
-            nestedScrollEnabled: true,
-            children: children
-          }), footer ? /*#__PURE__*/_jsx(View, {
-            style: footerStyles.footerContainer,
-            children: footer
-          }) : null]
-        })]
-      })
-    })
-  });
-};
-
-// ============================================================================
-// STYLES - Visual styling for all modal components
-// ============================================================================
-const styles = StyleSheet.create({
-  fullScreenContainer: {
-    ...absoluteFill,
-    zIndex: 1000
-  },
-  bottomSheetWrapper: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  bottomSheet: {
-    backgroundColor: buoyColors.card,
-    // Buoy card
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    shadowColor: 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: buoyColors.card,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    shadowColor: 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: buoyColors.primary,
-    borderWidth: 2,
-    shadowColor: buoyColors.primary + "99",
-    shadowOpacity: 0.8,
-    shadowRadius: 12
-  },
-  header: {
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    backgroundColor: buoyColors.card,
-    // Buoy card color
-    minHeight: 56,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    // Buoy border
-    borderBottomWidth: 1,
-    borderBottomColor: 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: night.color.bg,
-    borderTopLeftRadius: night.radius.sheet,
-    borderTopRightRadius: night.radius.sheet,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.accent + "55",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: -4
-    },
-    shadowOpacity: 0.22,
-    shadowRadius: 10
-  },
-  nightFloatingModal: {
-    backgroundColor: night.color.bg,
-    borderRadius: night.radius.sheet,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.accent + "55",
-    shadowColor: 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: night.radius.sheet,
-    borderTopRightRadius: 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,
-    borderTopLeftRadius: night.radius.sheet,
-    borderTopRightRadius: night.radius.sheet,
-    overflow: "hidden"
-  },
-  nightBackdropFloating: {
-    ...absoluteFill,
-    borderRadius: night.radius.sheet,
-    overflow: "hidden"
-  },
-  /** Neutral Everlights handle instead of the glowing teal bar. */
-  nightDragIndicator: {
-    width: 36,
-    height: 5,
-    borderRadius: 2.5,
-    backgroundColor: 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: buoyColors.primary,
-    // Buoy primary teal
-    borderRadius: 2,
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 4
-  },
-  floatingDragIndicator: {
-    width: 50,
-    height: 5,
-    backgroundColor: buoyColors.textMuted
-  },
-  dragIndicatorActive: {
-    backgroundColor: buoyColors.primary,
-    width: 40
-  },
-  resizeGripContainer: {
-    position: "absolute",
-    flexDirection: "row",
-    gap: 2,
-    marginTop: 12
-  },
-  resizeGripLine: {
-    width: 12,
-    height: 1,
-    backgroundColor: 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: gameUIColors.primary
-  },
-  headerSubtitle: {
-    fontSize: 12,
-    color: gameUIColors.secondary,
-    paddingTop: 4
-  },
-  headerHintText: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  hintText: {
-    fontSize: 10,
-    color: gameUIColors.muted,
-    fontStyle: "italic"
-  },
-  controlButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    justifyContent: "center",
-    alignItems: "center",
-    marginLeft: 8
-  },
-  toggleButton: {
-    backgroundColor: gameUIColors.info + "1A",
-    borderWidth: 1,
-    borderColor: gameUIColors.info + "33"
-  },
-  closeButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: gameUIColors.error + "1A",
-    borderWidth: 1,
-    borderColor: gameUIColors.error + "33",
-    marginLeft: 8
-  },
-  iconLine: {
-    position: "absolute",
-    top: 7.25,
-    left: 2,
-    width: 12,
-    height: 1.5,
-    backgroundColor: gameUIColors.error
-  },
-  content: {
-    flex: 1,
-    backgroundColor: 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: gameUIColors.success + "1A",
-    borderColor: gameUIColors.success,
-    borderWidth: 2,
-    shadowColor: gameUIColors.success + "99",
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 1,
-    shadowRadius: 8
-  }
-});
-
-// Footer container styles (absolute within modal content area)
-const footerStyles = StyleSheet.create({
-  footerContainer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: buoyColors.base,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16
-  }
-});
-
-// ============================================================================
-// EXPORT - Memoized modal component for optimal performance
-// ============================================================================
-export const JsModal = /*#__PURE__*/memo(props => {
-  const access = getUseAccountAccess()();
-  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/_jsx(AccountSetup, {}) : null;
-  return /*#__PURE__*/_jsx(JsModalComponent, {
-    ...props
-  });
-});
+"use strict";import{getUseAccountAccess as ke}from"./license/licenseModule.js";import{AccountSetup as Le}from"./license/AccountSetup";import{useState as j,useRef as d,useEffect as V,useMemo as ne,useCallback as Q,memo as kt,isValidElement as re,cloneElement as ie}from"react";import{View as s,StyleSheet as Lt,TouchableWithoutFeedback as ae,Dimensions as Be,PanResponder as se,Animated as i,ScrollView as le,Text as Ft}from"react-native";import{absoluteFill as Pt}from"./utils/absoluteFill.js";import{useSafeAreaInsets as Ae}from"./hooks/useSafeAreaInsets";import{gameUIColors as L,buoyColors as m}from"./ui/gameUI/index.js";import{DraggableHeader as We,ModalHintBanner as Me,WindowControls as de}from"./ui/components/index.js";import{ToolBackground as Bt}from"./ui/backgrounds/ToolBackground.js";import{night as C}from"./ui/night/nightTheme.js";import{persistentStorage as ce}from"./utils/persistentStorage";import{ModalStorage as Gt}from"./utils/modalStorage.js";import{devToolsStorageKeys as ue}from"./storage/devToolsStorageKeys.js";import{useHintsDisabled as Ne}from"./context/index.js";import{jsx as o,jsxs as Y}from"react/jsx-runtime";const he=true;const h=Be.get("window");const Oe=100;const Ee=400;const ut=h.width;const ht=500;const Rt=h.width*.25;const Tt=80;const Fe=20;const fe=kt(function c({isResizing:a,mode:B,hasCustomContent:X=false,variant:D="default"}){return Y(s,{style:[e.dragIndicatorContainer,X&&e.dragIndicatorContainerCustom],children:[o(s,{style:[e.dragIndicator,B==="floating"&&e.floatingDragIndicator,a&&e.dragIndicatorActive,D==="night"&&e.nightDragIndicator]}),a&&B==="bottomSheet"&&Y(s,{style:e.resizeGripContainer,children:[o(s,{style:e.resizeGripLine}),o(s,{style:e.resizeGripLine}),o(s,{style:e.resizeGripLine})]})]})});const ge=kt(function c({position:a,isActive:B}){return o(s,{style:[e.cornerHandle],children:o(s,{style:[e.handler,B&&e.handlerActive]})})});const pe=kt(function c({header:a,onClose:B,onToggleMode:X,onMinimize:D,isResizing:Z,mode:at,panHandlers:I,variant:f="default"}){const S=d(0);const $=d(0);const A=d(null);const x=Q(()=>{const P=Date.now();const st=P-S.current;if(st>500){$.current=0}$.current++;S.current=P;if(A.current){clearTimeout(A.current)}A.current=setTimeout(()=>{if($.current===2){X()}else if($.current>=3){if(D){D()}}$.current=0},300)},[X,D]);V(()=>{return()=>{if(A.current){clearTimeout(A.current)}}},[]);const W=I?I:{};const ft=!!I;if(a?.customContent){const P=re(a.customContent)&&typeof a.customContent.type==="function"&&a.customContent.type.name==="CyberpunkModalHeader";if(P){return ie(a.customContent,{onToggleMode:X,onClose:B,mode:at,panHandlers:W,showToggleButton:a?.showToggleButton!==false,hideCloseButton:a?.hideCloseButton})}let st=a.customContent;if(re(a.customContent)&&D){st=ie(a.customContent,{onMinimize:D})}const T=Y(s,{style:e.headerInner,children:[o(fe,{isResizing:Z,mode:at,hasCustomContent:true,variant:f}),st]});return o(s,{style:[e.header,f==="night"&&e.nightHeader],...W,children:ft?o(ae,{onPress:x,children:T}):T})}const K=Y(s,{style:e.headerInner,children:[o(fe,{isResizing:Z,mode:at,variant:f}),Y(s,{style:e.headerContent,children:[a?.title&&o(Ft,{style:e.headerTitle,children:a.title}),a?.subtitle&&o(Ft,{style:e.headerSubtitle,children:a.subtitle})]}),o(s,{style:e.headerHintText,children:o(Ft,{style:e.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return o(s,{style:[e.header,at==="floating"&&e.floatingModeHeader,f==="night"&&e.nightHeader],...W,children:ft?o(ae,{onPress:x,children:K}):K})});const Pe=({visible:c,onClose:a,children:B,header:X,styles:D={},minHeight:Z=Oe,maxHeight:at,initialHeight:I=Ee,animatedHeight:f,benchMotion:S,initialMode:$="bottomSheet",onModeChange:A,persistenceKey:x,enablePersistence:W=true,initialFloatingPosition:ft,footer:K,footerHeight:P=0,onBack:st,onMinimize:T,minimizeRequest:Vt=0,minimizeTargetPosition:At,initialModalState:g,zIndex:Dt,disableScrollWrapper:_t=false,background:It=true,variant:H="night"})=>{const N=Ae();const[zt,jt]=j(!W);const[l,Wt]=j($);const[lt,O]=j(false);const[St,dt]=j(false);const[we,Mt]=j(I);const[G,gt]=j({width:ut,height:ht,top:(h.height-ht)/2,left:0});const[xt]=j({width:h.width,height:h.height});const[be,Ht]=j(false);const[ye,Yt]=j(false);const Ce=Ne();const w=d(new i.Value(0)).current;const R=d(new i.Value(h.height)).current;const Xt=d(new i.Value(0)).current;const E=d(new i.Value(I)).current;const F=d(I);V(()=>{if(!W||!x||!zt)return;const t=setTimeout(()=>{Gt.save(x,{mode:l,panelHeight:F.current,dimensions:G,isVisible:c})},500);return()=>clearTimeout(t)},[l,we,G,c,x,W,zt]);const Ut=d(false);V(()=>{if(f&&!Ut.current){Ut.current=true;F.current=I;f.setValue(I)}},[f,I]);V(()=>{y.current=G},[G]);const p=d(new i.ValueXY({x:ft?.x??0,y:ft?.y??(h.height-ht)/2})).current;const tt=d(new i.Value(0)).current;const et=d(new i.Value(ut)).current;const ot=d(new i.Value(ht)).current;const y=d(G);const Jt=d(G);const Re=d(0);const Te=d(0);const Ve=d(0);const De=d(0);V(()=>{let t=true;const r=async()=>{try{const n=ue.modal.hintAcknowledged();const _=await ce.getItem(n);if(t){Ht(_!=="true");Yt(true)}}catch(n){if(t){Ht(true);Yt(true)}}};r();return()=>{t=false}},[]);const Ie=Q(async()=>{try{const t=ue.modal.hintAcknowledged();await ce.setItem(t,"true");Ht(false)}catch(t){Ht(false)}},[]);const qt=d(A);qt.current=A;V(()=>{if(!W||!x){jt(true);return}let t=true;const r=async()=>{const n=await Gt.load(x);if(t&&n){if(n.mode){Wt(n.mode);qt.current?.(n.mode)}if(n.panelHeight){Mt(n.panelHeight);F.current=n.panelHeight;E.setValue(n.panelHeight);f?.setValue(n.panelHeight)}if(n.dimensions){gt(n.dimensions);p.setValue({x:n.dimensions.left,y:n.dimensions.top});et.setValue(n.dimensions.width);ot.setValue(n.dimensions.height)}}if(t)jt(true)};r();return()=>{t=false}},[x,W,E,ot,et,p]);V(()=>{return()=>{w.stopAnimation();R.stopAnimation();tt.stopAnimation();Xt.stopAnimation();E.stopAnimation();p.stopAnimation();et.stopAnimation();ot.stopAnimation();w.setValue(0);R.setValue(h.height);tt.setValue(0);Xt.setValue(0);E.setValue(I);F.current=I}},[]);const Qt=w.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const Nt=at||h.height-N.top;const nt=Q(()=>{dt(false);O(false);const t=l==="bottomSheet"?"floating":"bottomSheet";Wt(t);A?.(t)},[l,A]);V(()=>{dt(false);O(false)},[l]);const U=Q(()=>{if(!T)return;const t={mode:l,panelHeight:F.current,floatingPosition:{x:y.current.left,y:y.current.top},floatingDimensions:{width:y.current.width,height:y.current.height}};if(W&&x)void Gt.saveMinimized(x,t);const r=At?.x??h.width-50;const n=At?.y??h.height-150;if(l==="bottomSheet"){i.parallel([i.timing(w,{toValue:0,duration:300,useNativeDriver:true}),i.timing(R,{toValue:h.height,duration:300,useNativeDriver:true})]).start(()=>{T(t)})}else{i.parallel([i.timing(tt,{toValue:0,duration:300,useNativeDriver:true}),i.timing(w,{toValue:0,duration:300,useNativeDriver:true}),i.timing(p,{toValue:{x:r,y:n},duration:300,useNativeDriver:true})]).start(()=>{T(t)})}},[l,T,At,W,x,w,R,tt,p]);const Zt=d(Vt);V(()=>{if(Zt.current===Vt)return;Zt.current=Vt;U()},[Vt,U]);V(()=>{if(!g)return;if(g.mode){Wt(g.mode);A?.(g.mode)}if(g.panelHeight){Mt(g.panelHeight);F.current=g.panelHeight;E.setValue(g.panelHeight)}if(g.floatingDimensions&&g.floatingPosition){const t={width:g.floatingDimensions.width,height:g.floatingDimensions.height,top:g.floatingPosition.y,left:g.floatingPosition.x};gt(t);p.setValue({x:g.floatingPosition.x,y:g.floatingPosition.y});et.setValue(g.floatingDimensions.width);ot.setValue(g.floatingDimensions.height)}},[g]);const $t=t=>{if(t){if(l==="bottomSheet"){R.setValue(0)}else{tt.setValue(1);p.setValue({x:y.current.left,y:y.current.top})}w.setValue(1)}else{if(l==="bottomSheet"){R.setValue(h.height)}w.setValue(0)}};const Kt=d(null);if(he&&Kt.current!==c){Kt.current=c;$t(c)}V(()=>{let t=null;let r=null;if(he){$t(c);return}if(c){R.setValue(h.height);w.setValue(0);if(l==="bottomSheet"){t=i.parallel([i.spring(R,{toValue:0,tension:180,friction:22,useNativeDriver:true}),i.timing(w,{toValue:1,duration:200,useNativeDriver:true})]);t.start()}else{tt.setValue(1);p.setValue({x:y.current.left,y:y.current.top});t=i.timing(w,{toValue:1,duration:200,useNativeDriver:true});t.start()}}else{if(l==="bottomSheet"){r=i.parallel([i.spring(R,{toValue:h.height,tension:180,friction:22,useNativeDriver:true}),i.timing(w,{toValue:0,duration:200,useNativeDriver:true})]);r.start()}else{r=i.timing(w,{toValue:0,duration:200,useNativeDriver:true});r.start()}}return()=>{if(t){t.stop()}if(r){r.stop()}}},[c,l,w,R,tt,p,f]);const te=d(0);V(()=>{if(!__DEV__||!S||!c)return void 0;let t=null;let r=null;let n=true;const _=Date.now();let v=false;const J=z=>{v=z;if(S==="resize"||S==="float-resize"){O(z)}else if(S==="float-drag"){dt(z)}};if(S==="mode-cycle"){r=setInterval(()=>nt(),2200)}else{const z=Z;const vt=Nt;const bt=()=>{if(!n)return;const ct=(Date.now()-_)/1e3;const u=ct%2.5;if(u<2&&!v)J(true);else if(u>=2&&v)J(false);if(v){const k=(Math.sin(ct*2.2)+1)/2;if(S==="resize"){const b=z+k*(vt-z);E.setValue(b);F.current=b;if(f){f.setValue(b)}}else if(S==="float-drag"){const b=(Math.sin(ct*1.7)+1)/2;p.setValue({x:10+k*Math.max(h.width-ut-20,0),y:70+b*260})}else if(S==="float-resize"){const b=ut+k*Math.max(h.width-ut-40,0);const M=ht+k*240;et.setValue(b);ot.setValue(M);y.current={...y.current,width:b,height:M}}}t=requestAnimationFrame(bt)};t=requestAnimationFrame(bt)}return()=>{n=false;if(t!=null)cancelAnimationFrame(t);if(r!=null)clearInterval(r);O(false);dt(false)}},[S,c]);const Se=ne(()=>se.create({onStartShouldSetPanResponder:()=>l==="bottomSheet",onMoveShouldSetPanResponder:(t,r)=>l==="bottomSheet"&&Math.abs(r.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:t=>{O(true);te.current=t.nativeEvent.locationY||0;E.stopAnimation(r=>{F.current=r});f?.stopAnimation();R.stopAnimation()},onPanResponderMove:t=>{const r=t.nativeEvent.pageY-te.current;let n=h.height-r;n=Math.max(Z,Math.min(n,Nt));E.setValue(n);F.current=n;if(f){f.setValue(n)}},onPanResponderRelease:(t,r)=>{O(false);const n=F.current;const _=r.vy>.8&&r.dy>50||r.dy>150&&n<=Z;if(_){i.parallel([i.timing(w,{toValue:0,duration:200,useNativeDriver:true}),i.spring(R,{toValue:h.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>a());return}Mt(n);if(f)f.setValue(n)},onPanResponderTerminate:()=>{O(false)}}),[l,Z,Nt,E,f,R,w,a]);const pt=Q(t=>{let r=false;return se.create({onStartShouldSetPanResponder:()=>l==="floating",onMoveShouldSetPanResponder:()=>l==="floating",onPanResponderGrant:()=>{r=false;const n=y.current;p.stopAnimation(({x:_,y:v})=>{p.setValue({x:_,y:v})});O(true);Jt.current={...n};Ve.current=n.height;De.current=n.width;Re.current=n.left;Te.current=n.top},onPanResponderMove:(n,_)=>{const{dx:v,dy:J}=_;if(Math.abs(v)<.5&&Math.abs(J)<.5)return;r=true;const z=Math.max(0,N.left||0);const vt=xt.width-Math.max(0,N.right||0);const bt=Math.max(0,N.top||0);const ct=xt.height-Math.max(0,N.bottom||0);const u=Jt.current;const k=u.left+u.width;const b=u.top+u.height;let M=u.left;let q=u.top;let yt=k;let Ct=b;switch(t){case"topLeft":{const rt=Math.max(z,Math.min(u.left+v,k-Rt));const it=Math.max(bt,Math.min(u.top+J,b-Tt));M=rt;q=it;yt=k;Ct=b;break}case"topRight":{const rt=Math.min(vt,Math.max(k+v,u.left+Rt));const it=Math.max(bt,Math.min(u.top+J,b-Tt));M=u.left;q=it;yt=rt;Ct=b;break}case"bottomLeft":{const rt=Math.max(z,Math.min(u.left+v,k-Rt));const it=Math.min(ct,Math.max(b+J,u.top+Tt));M=rt;q=u.top;yt=k;Ct=it;break}case"bottomRight":{const rt=Math.min(vt,Math.max(k+v,u.left+Rt));const it=Math.min(ct,Math.max(b+J,u.top+Tt));M=u.left;q=u.top;yt=rt;Ct=it;break}}const Ot=Math.max(Rt,yt-M);const Et=Math.max(Tt,Ct-q);gt({width:Ot,height:Et,left:M,top:q});et.setValue(Ot);ot.setValue(Et);p.setValue({x:M,y:q});y.current={width:Ot,height:Et,left:M,top:q}},onPanResponderRelease:()=>{O(false);r=false;gt(y.current)},onPanResponderTerminate:()=>{O(false);r=false}})},[l,xt,N.left,N.right,N.top,N.bottom,p,et,ot,a,st]);const ee=ne(()=>{return{topLeft:pt("topLeft"),topRight:pt("topRight"),bottomLeft:pt("bottomLeft"),bottomRight:pt("bottomRight")}},[pt]);const xe=Q(()=>{dt(true)},[]);const He=Q(t=>{dt(false);const r=y.current;const n={...r,left:t.x,top:t.y};gt(n)},[]);const oe=d(0);const mt=d(0);const wt=d(null);const ve=Q(()=>{const t=Date.now();const r=t-oe.current;if(r>500){mt.current=0}mt.current++;oe.current=t;if(wt.current){clearTimeout(wt.current)}wt.current=setTimeout(()=>{if(mt.current===2){nt()}else if(mt.current>=3){if(T){U()}}mt.current=0},300)},[nt,T,U]);V(()=>{return()=>{if(wt.current){clearTimeout(wt.current)}}},[]);if(l==="floating"){return Y(i.View,{nativeID:"jsmodal-root",pointerEvents:c?"auto":"none",accessibilityElementsHidden:!c,importantForAccessibility:c?"auto":"no-hide-descendants",style:[e.floatingModal,{width:G.width,height:G.height,opacity:Qt,transform:[{translateX:p.x},{translateY:p.y}],...Dt!==void 0&&{zIndex:Dt}},H==="night"&&e.nightFloatingModal,(St||lt)&&e.floatingModalDragging,D.container,!c&&e.parkedOffscreen],children:[It&&H==="night"?o(s,{style:e.nightBackdropFloating,pointerEvents:"none",children:o(Bt,{})}):null,o(We,{position:p,onDragStart:xe,onDragEnd:He,onTap:ve,containerBounds:xt,elementSize:G,minPosition:{x:0,y:N.top},style:e.floatingHeader,enabled:l==="floating"&&!lt,children:o(pe,{header:X,onClose:a,onToggleMode:nt,onMinimize:T?U:void 0,isResizing:St||lt,mode:l,variant:H})}),o(s,{style:e.windowControlsContainer,children:o(de,{onClose:a,onMinimize:T?U:void 0,onToggleMode:nt,mode:l,variant:H})}),Y(s,{style:[e.content,H==="night"&&e.nightContent,D.content],children:[It&&H!=="night"?o(Bt,{}):null,_t?o(s,{style:{flex:1,paddingBottom:P},children:B}):o(le,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:P},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,keyboardShouldPersistTaps:"handled",children:B}),K?o(s,{style:me.footerContainer,children:K}):null]}),o(s,{...ee.bottomLeft.panHandlers,style:[e.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:2,left:2,right:2,bottom:2},children:o(ge,{position:"bottomLeft",isActive:St||lt})}),o(s,{...ee.bottomRight.panHandlers,style:[e.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:2,left:2,right:2,bottom:2},children:o(ge,{position:"bottomRight",isActive:St||lt})})]})}return o(s,{style:[c?e.fullScreenContainer:e.parkedFullScreen,c&&Dt!==void 0&&{zIndex:Dt}],pointerEvents:c?"box-none":"none",accessibilityElementsHidden:!c,importantForAccessibility:c?"auto":"no-hide-descendants",children:o(i.View,{nativeID:"jsmodal-root",style:[e.bottomSheetWrapper,{opacity:Qt,transform:[{translateY:R}]}],children:Y(i.View,{style:[e.bottomSheet,H==="night"&&e.nightBottomSheet,D.container,{height:f||E}],children:[It&&H==="night"?o(s,{style:e.nightBackdropSheet,pointerEvents:"none",children:o(Bt,{})}):null,o(pe,{header:X,onClose:a,onToggleMode:nt,onMinimize:T?U:void 0,isResizing:lt,mode:l,panHandlers:Se.panHandlers,variant:H}),o(s,{style:e.windowControlsContainer,children:o(de,{onClose:a,onMinimize:T?U:void 0,onToggleMode:nt,mode:l,variant:H})}),ye&&be&&l==="bottomSheet"&&!Ce&&o(Me,{onAcknowledge:Ie}),Y(s,{style:[e.content,H==="night"&&e.nightContent,D.content],children:[It&&H!=="night"?o(Bt,{}):null,_t?o(s,{style:{flex:1,paddingBottom:P},children:B}):o(le,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:P},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,keyboardShouldPersistTaps:"handled",children:B}),K?o(s,{style:me.footerContainer,children:K}):null]})]})})})};const e=Lt.create({fullScreenContainer:{...Pt,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:m.card,borderTopLeftRadius:6,borderTopRightRadius:6,borderWidth:1,borderColor:m.border,shadowColor:m.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:h.width,height:h.height,opacity:0},floatingModal:{position:"absolute",backgroundColor:m.card,borderRadius:6,borderWidth:1,borderColor:m.border,shadowColor:m.primary,shadowOffset:{width:0,height:0},shadowOpacity:.3,shadowRadius:20,elevation:24,zIndex:1e3,width:ut,height:ht},floatingModalDragging:{borderColor:m.primary,borderWidth:2,shadowColor:m.primary+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:6,borderTopRightRadius:6,backgroundColor:m.card,minHeight:56,borderWidth:1,borderColor:m.border,borderBottomWidth:1,borderBottomColor:m.border},nightBottomSheet:{backgroundColor:C.color.bg,borderTopLeftRadius:C.radius.sheet,borderTopRightRadius:C.radius.sheet,borderWidth:Lt.hairlineWidth,borderColor:C.color.accent+"55",shadowColor:C.color.accent,shadowOffset:{width:0,height:-4},shadowOpacity:.22,shadowRadius:10},nightFloatingModal:{backgroundColor:C.color.bg,borderRadius:C.radius.sheet,borderWidth:Lt.hairlineWidth,borderColor:C.color.accent+"55",shadowColor:C.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.22,shadowRadius:14},nightHeader:{backgroundColor:"transparent",borderWidth:0,borderBottomWidth:0,borderTopLeftRadius:C.radius.sheet,borderTopRightRadius:C.radius.sheet},nightContent:{backgroundColor:"transparent"},nightBackdropSheet:{...Pt,borderTopLeftRadius:C.radius.sheet,borderTopRightRadius:C.radius.sheet,overflow:"hidden"},nightBackdropFloating:{...Pt,borderRadius:C.radius.sheet,overflow:"hidden"},nightDragIndicator:{width:36,height:5,borderRadius:2.5,backgroundColor:C.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:Fe,justifyContent:"center",paddingVertical:0,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:m.primary,borderRadius:2,shadowColor:m.primary,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:m.textMuted},dragIndicatorActive:{backgroundColor:m.primary,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:L.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:L.primary},headerSubtitle:{fontSize:12,color:L.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:L.muted,fontStyle:"italic"},controlButton:{width:28,height:28,borderRadius:6,justifyContent:"center",alignItems:"center",marginLeft:8},toggleButton:{backgroundColor:L.info+"1A",borderWidth:1,borderColor:L.info+"33"},closeButton:{width:28,height:28,borderRadius:6,justifyContent:"center",alignItems:"center",backgroundColor:L.error+"1A",borderWidth:1,borderColor:L.error+"33",marginLeft:8},iconLine:{position:"absolute",top:7.25,left:2,width:12,height:1.5,backgroundColor:L.error},content:{flex:1,backgroundColor:m.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:L.success+"1A",borderColor:L.success,borderWidth:2,shadowColor:L.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8}});const me=Lt.create({footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:m.base,borderBottomLeftRadius:16,borderBottomRightRadius:16}});export const JsModal=kt(c=>{const a=ke()();if(a.status!=="admitted")return c.visible?o(Le,{}):null;return o(Pe,{...c})});