@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/JsModal.web.js

@@ -1,1652 +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 _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
-var _index = require("./context/index.js");
-var _ToolBackground = require("./ui/backgrounds/ToolBackground.js");
-var _nightTheme = require("./ui/night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * JsModal.web — DOM port of JsModal.tsx (React Native).
- *
- * The dual-mode tool-panel container: draggable bottom sheet ⇄ floating
- * window. Same exported names (`JsModal`, `ModalMode`, `ModalState`), same
- * prop contract, same gesture spec and persistence key/JSON shape as the
- * native file. Zero react-native imports — header chrome that lives in
- * shared-ui RN components (`WindowControls`, `DraggableHeader`, `ModalHeader`,
- * `ModalHintBanner`) is replicated as DOM with provenance comments, the same
- * way DevToolsSettingsModal.web.tsx replicates the WindowControls close dot.
- *
- * Gesture spec (verbatim from native):
- * - Sheet header drag: steal at |dy| > 3px, absolute finger anchoring
- *   (height = screenH − (pointerY − grab offset)), clamped to
- *   [minHeight, maxHeight ?? screenH − safeTop]. Fast downward swipe closes:
- *   (vy > 0.8 px/ms && dy > 50) || (dy > 150 && height <= minHeight).
- * - Floating header drag (DraggableHeader.tsx): drag starts at
- *   |dx|+|dy| > 5, position unclamped during move, clamped on release to
- *   x ∈ [0, screenW − width], y ∈ [safeTop, screenH − height].
- * - Corner resize (bottom corners only): moves < 0.5px ignored; rect clamped
- *   to safe-area bounds; min size = screenW*0.25 × 80.
- * - Header taps (both modes): taps accumulate within a 500ms window and
- *   settle after 300ms — 2 taps toggles mode, ≥3 taps minimizes.
- *
- * Persistence (verbatim from native ModalStorage): the `persistenceKey` prop
- * is the storage key, used verbatim (native callers pass fully-derived
- * `@react_buoy…` keys or short keys — no extra derivation happens here
- * either). JSON shape `{ mode, panelHeight, dimensions: {width, height, top,
- * left}, isVisible }`, saved on a 500ms debounce after state loads, with the
- * same in-memory cache in front of storage. Backed by a local
- * localStorage adapter matching the `persistentStorage` API — importing
- * `./utils/persistentStorage` is avoided on purpose: its lazy `require()`
- * probing of expo-file-system/AsyncStorage doesn't survive Vite's ESM graph.
- * The hint-acknowledged flag uses the real `devToolsStorageKeys` helper
- * (zero-dep) so the key matches native exactly.
- *
- * Intentional deviations from the native file (all logged):
- * - No native-driver springs: rAF drives all animations. The open/close
- *   spring (tension 180, friction 22, ~300ms settle) is approximated with a
- *   300ms ease-out-cubic; native `Animated.timing` calls keep their exact
- *   durations (200ms fades, 300ms minimize) with ease-in-out.
- * - No RN Modal/overlay layer: fixed-position divs with the `zIndex` prop
- *   (default 1000, same as the native styles).
- * - `benchMotion` and `animatedHeight` (DEV-only benchmark seams) are
- *   accepted and no-op'd — the web build has no tool-bench harness.
- * - `CyberpunkModalHeader` complete-replacement detection in ModalHeader is
- *   not ported (that component is RN-only); custom header content renders
- *   inside the standard header structure, with `onMinimize` injected via
- *   cloneElement like native's non-replacement path.
- * - Native captures `Dimensions.get("window")` once at module load; the web
- *   twin reads `window.innerWidth/innerHeight` lazily so late layout (Tauri/
- *   WKWebView) doesn't bake in a 0×0 screen.
- * - Safe-area insets come from a one-shot `env(safe-area-inset-*)` probe
- *   (same trick as floatingTools.web.tsx) instead of the RN hook.
- * - On restore-from-minimize, the floating position re-syncs from the last
- *   committed dimensions when the panel becomes visible: the web AppHost
- *   doesn't pass `initialModalState` back, and without the re-sync the panel
- *   would reappear at the minimize target.
- * - `JsModalProps` is additionally exported (native keeps it private) so web
- *   consumers can type wrappers without redeclaring the contract.
- * - `visible={false}` renders children in a `display:none` div (state and
- *   listeners survive) instead of native's offscreen −9999 container.
- * - The hidden/floating/bottomSheet root branches carry distinct React keys:
- *   the rAF animations write opacity/transform straight to the DOM, and DOM
- *   reuse across branches (e.g. an async persisted-mode flip mid-entrance)
- *   would leak those styles onto unrelated chrome (blank header bug).
- *
- * @platform React DOM Web (Vite, Tauri, Capacitor/Ionic, Electron)
- */
-
-// RN component, but safe here: every consumer of the web modal (desktop
-// renderer, website demos) aliases `react-native` to react-native-web, and
-// the backgrounds primitives handle RNW explicitly (see backgrounds/README).
-
-// Pure token module (no react-native import) — safe on web.
-
-// ============================================================================
-// PALETTE — inlined from shared-ui with provenance (RN-only modules on web)
-// ============================================================================
-
-/** buoyColors from ui/gameUI/constants/gameUIColors.ts — inlined verbatim. */const buoy = {
-  base: "#121212",
-  card: "#1A1A1A",
-  border: "#333333",
-  textMuted: "#888888",
-  primary: "#20C997" // Buoy teal
-};
-
-/**
- * gameUIColors resolved values (macOS theme active — see gameUIColors.ts
- * `activeTheme = macOSTheme` and macOSDesignSystemColors.ts).
- */
-const gameUI = {
-  primary: "#F5F5F7",
-  // macOSColors.text.primary — header title
-  primaryLight: "#F5F5F7",
-  // macOS theme maps primaryLight to text.primary too
-  secondary: "#A1A1A6",
-  // macOSColors.text.secondary — header subtitle
-  muted: "#8E8E93",
-  // macOSColors.text.muted — hint text
-  success: "#34C759",
-  // macOSColors.semantic.success — resize grips/handles
-  info: "#00B8E6" // macOSColors.semantic.info — hint banner
-};
-
-// ============================================================================
-// CONSTANTS — same values as native JsModal.tsx
-// ============================================================================
-const MIN_HEIGHT = 100;
-const DEFAULT_HEIGHT = 400;
-const FLOATING_HEIGHT = 500;
-const FLOATING_MIN_HEIGHT = 80; // header (60) + 20px content
-// native: FLOATING_WIDTH = SCREEN.width, FLOATING_MIN_WIDTH = SCREEN.width/4 —
-// read lazily on web (see deviations in the file header).
-const screenW = () => typeof window !== "undefined" ? window.innerWidth : 0;
-const screenH = () => typeof window !== "undefined" ? window.innerHeight : 0;
-
-// ============================================================================
-// STORAGE — exact native ModalStorage semantics over localStorage
-// ============================================================================
-
-/**
- * Local localStorage-backed adapter matching the shared `persistentStorage`
- * API surface JsModal uses (getItem/setItem). Same recipe as the app shims
- * (example-tauri/src/shims/shared-ui.web.ts).
- */
-const webPersistentStorage = {
-  async getItem(key) {
-    try {
-      return window.localStorage.getItem(key);
-    } catch {
-      return null;
-    }
-  },
-  async setItem(key, value) {
-    try {
-      window.localStorage.setItem(key, value);
-    } catch {
-      // Best-effort, like native's swallowed save errors.
-    }
-  }
-};
-
-/** Persisted JSON shape — identical to native `PersistedModalState`. */
-
-/** Native `ModalStorage` twin: memory cache in front of persistent storage. */
-class ModalStorage {
-  static memoryCache = {};
-  static async save(key, value) {
-    try {
-      this.memoryCache[key] = value;
-      await webPersistentStorage.setItem(key, JSON.stringify(value));
-    } catch {
-      // Failed to save modal state
-    }
-  }
-  static async load(key) {
-    try {
-      if (this.memoryCache[key]) {
-        return this.memoryCache[key];
-      }
-      const stored = await webPersistentStorage.getItem(key);
-      if (stored) {
-        const parsed = JSON.parse(stored);
-        this.memoryCache[key] = parsed;
-        return parsed;
-      }
-    } catch {
-      // Failed to load modal state
-    }
-    return null;
-  }
-}
-
-// ============================================================================
-// TYPES — same exported names as native
-// ============================================================================
-
-/** Modal state that can be saved and restored when minimizing/restoring. */
-
-// ============================================================================
-// rAF ANIMATION HELPERS (native-driver springs/timings stand-in)
-// ============================================================================
-
-const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
-// Animated.timing's default easing is ease-in-out
-const easeInOut = t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-function runAnim(duration, ease, onFrame, onDone) {
-  let raf = 0;
-  let cancelled = false;
-  const start = performance.now();
-  const tick = now => {
-    if (cancelled) return;
-    const t = Math.min((now - start) / duration, 1);
-    onFrame(ease(t));
-    if (t < 1) {
-      raf = requestAnimationFrame(tick);
-    } else {
-      onDone?.();
-    }
-  };
-  raf = requestAnimationFrame(tick);
-  return () => {
-    cancelled = true;
-    cancelAnimationFrame(raf);
-  };
-}
-
-// ============================================================================
-// SAFE AREA — env() probe (floatingTools.web.tsx pattern), one-shot on mount
-// ============================================================================
-
-function readSafeAreaInsets() {
-  if (typeof document === "undefined") {
-    return {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    };
-  }
-  const probe = document.createElement("div");
-  probe.style.cssText = "position:fixed;top:env(safe-area-inset-top);left:env(safe-area-inset-left);" + "right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);" + "visibility:hidden;pointer-events:none";
-  document.body.appendChild(probe);
-  const rect = probe.getBoundingClientRect();
-  document.body.removeChild(probe);
-  return {
-    top: Math.max(0, rect.top),
-    left: Math.max(0, rect.left),
-    right: Math.max(0, window.innerWidth - rect.right),
-    bottom: Math.max(0, window.innerHeight - rect.bottom)
-  };
-}
-
-/**
- * Keep a floating rect fully inside the safe area. Applied on every entry
- * path — initial position, persisted restore, drag release — so the window
- * can never sit under a notch/Dynamic Island or the home indicator.
- * (Deliberate improvement over native, whose release clamp allows the
- * window to reach the raw screen bottom.)
- */
-function clampRectToSafeArea(rect, insets) {
-  const maxW = Math.max(FLOATING_MIN_HEIGHT, window.innerWidth - insets.left - insets.right);
-  const maxH = Math.max(FLOATING_MIN_HEIGHT, window.innerHeight - insets.top - insets.bottom);
-  const width = Math.min(rect.width, maxW);
-  const height = Math.min(rect.height, maxH);
-  return {
-    width,
-    height,
-    left: Math.max(insets.left, Math.min(rect.left, window.innerWidth - insets.right - width)),
-    top: Math.max(insets.top, Math.min(rect.top, window.innerHeight - insets.bottom - height))
-  };
-}
-
-// ============================================================================
-// ICONS — DOM twins of shared-ui icons (icons/lucide-icons.tsx)
-// ============================================================================
-
-/** shared-ui X icon (lucide-icons.tsx). */
-const XIcon = ({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 18,
-    y1: 6,
-    x2: 6,
-    y2: 18,
-    stroke: color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 6,
-    y1: 6,
-    x2: 18,
-    y2: 18,
-    stroke: color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round"
-  })]
-});
-
-/** shared-ui Minus icon (lucide-icons.tsx). */
-const MinusIcon = ({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 5,
-    y1: 12,
-    x2: 19,
-    y2: 12,
-    stroke: color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round"
-  })
-});
-
-/** shared-ui DockBottom icon — outer frame + filled bottom panel. */
-const DockBottomIcon = ({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    x: 3,
-    y: 3,
-    width: 18,
-    height: 18,
-    rx: 2,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    x: 3,
-    y: 14,
-    width: 18,
-    height: 7,
-    fill: color
-  })]
-});
-
-/** shared-ui FloatWindow icon — window with offset shadow. */
-const FloatWindowIcon = ({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-    x: 3,
-    y: 3,
-    width: 14,
-    height: 14,
-    rx: 2,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 7,
-    y1: 17,
-    x2: 7,
-    y2: 21,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 7,
-    y1: 21,
-    x2: 21,
-    y2: 21,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 21,
-    y1: 21,
-    x2: 21,
-    y2: 7,
-    stroke: color,
-    strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-    x1: 17,
-    y1: 7,
-    x2: 21,
-    y2: 7,
-    stroke: color,
-    strokeWidth: strokeWidth
-  })]
-});
-
-// ============================================================================
-// WINDOW CONTROLS — DOM twin of ui/components/WindowControls.tsx.
-// Native renders the non-expandable branch on web (EXPANDABLE_SUPPORTED =
-// Platform.OS !== "web"), so the plain macOS dots ARE the 1:1 web look.
-// ============================================================================
-// native WindowControls COLORS
-const WC_COLORS = {
-  close: "#FF5F57",
-  minimize: "#FEBC2E",
-  toggleMode: "#28C840"
-};
-const WC_BUTTON_SIZE = 12; // native BUTTON_SIZE
-const WC_BUTTON_SPACING = 8; // native BUTTON_SPACING
-const WC_ICON_SIZE = 8; // native ICON_SIZE
-
-const wcDotStyle = bg => ({
-  width: WC_BUTTON_SIZE,
-  height: WC_BUTTON_SIZE,
-  borderRadius: WC_BUTTON_SIZE / 2,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: bg,
-  border: "none",
-  padding: 0,
-  cursor: "pointer",
-  flexShrink: 0
-});
-function WindowControls({
-  onClose,
-  onMinimize,
-  onToggleMode,
-  mode
-}) {
-  const ToggleModeIcon = mode === "floating" ? DockBottomIcon : FloatWindowIcon;
-  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      gap: WC_BUTTON_SPACING
-    },
-    children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: onMinimize,
-      style: wcDotStyle(WC_COLORS.minimize),
-      "aria-label": "Minimize modal",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MinusIcon, {
-        size: WC_ICON_SIZE,
-        color: "#7A5A00",
-        strokeWidth: 1.5
-      })
-    }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: onToggleMode,
-      style: wcDotStyle(WC_COLORS.toggleMode),
-      "aria-label": toggleModeLabel,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
-        size: WC_ICON_SIZE,
-        color: "#004A1A",
-        strokeWidth: 1.5
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: onClose,
-      style: wcDotStyle(WC_COLORS.close),
-      "aria-label": "Close modal",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(XIcon, {
-        size: WC_ICON_SIZE,
-        color: "#4A0000",
-        strokeWidth: 1.5
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// DRAG INDICATOR — DOM twin of native DragIndicator
-// ============================================================================
-const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
-  isResizing,
-  mode,
-  hasCustomContent = false,
-  variant = "default"
-}) {
-  const floating = mode === "floating";
-  const isNight = variant === "night";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      position: "relative",
-      // native dragIndicatorContainer: paddingVertical 8; custom variant
-      // claims the 20pt window-controls band (native WINDOW_CONTROLS_BAND)
-      // so the header row below can run the full width.
-      justifyContent: hasCustomContent ? "center" : undefined,
-      minHeight: hasCustomContent ? 20 : undefined,
-      paddingTop: hasCustomContent ? 0 : 8,
-      paddingBottom: hasCustomContent ? 0 : 8,
-      backgroundColor: "transparent"
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        // native dragIndicator: 40x3 teal bar, radius 2, teal glow
-        // (shadowOpacity 0.6, radius 4); floating variant: 50x5 textMuted;
-        // active (isResizing/isDragging): teal, width 40.
-        // Night: the neutral 36x5 Everlights handle, no glow, both modes.
-        width: isNight ? 36 : isResizing ? 40 : floating ? 50 : 40,
-        height: isNight ? 5 : floating ? 5 : 3,
-        backgroundColor: isNight ? _nightTheme.night.color.placeholder : isResizing ? buoy.primary : floating ? buoy.textMuted : buoy.primary,
-        borderRadius: isNight ? 2.5 : 2,
-        boxShadow: isNight ? "none" : `0 0 4px ${buoy.primary}99`
-      }
-    }), isResizing && mode === "bottomSheet" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        position: "absolute",
-        display: "flex",
-        flexDirection: "row",
-        gap: 2,
-        // native resizeGripContainer: gap 2
-        marginTop: 12 // native: marginTop 12
-      },
-      children: [0, 1, 2].map(i => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          width: 12,
-          // native resizeGripLine: 12x1
-          height: 1,
-          backgroundColor: gameUI.success,
-          opacity: 0.6
-        }
-      }, i))
-    })]
-  });
-});
-
-// ============================================================================
-// MODAL HINT BANNER — DOM twin of ui/components/ModalHintBanner.tsx
-// ============================================================================
-const ModalHintBanner = /*#__PURE__*/(0, _react.memo)(function ModalHintBanner({
-  onAcknowledge
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      // native container: info+15 bg, 3px info left border, radius 8,
-      // marginHorizontal 12, mt 8, mb 4, info glow (opacity 0.3, radius 8)
-      backgroundColor: `${gameUI.info}15`,
-      borderLeft: `3px solid ${gameUI.info}`,
-      borderRadius: 8,
-      margin: "8px 12px 4px",
-      overflow: "hidden",
-      boxShadow: `0 0 8px ${gameUI.info}4D`,
-      flexShrink: 0
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        padding: 12,
-        // native inner: padding 12, gap 12
-        gap: 12
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: {
-          width: 32,
-          height: 32,
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: "absolute",
-            width: 20,
-            height: 20,
-            borderRadius: 10,
-            border: `2px solid ${gameUI.info}`,
-            opacity: 0.6,
-            transform: "scale(0.8)",
-            boxSizing: "border-box"
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: "absolute",
-            width: 20,
-            height: 20,
-            borderRadius: 10,
-            border: `2px solid ${gameUI.info}`,
-            boxSizing: "border-box"
-          }
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: {
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          gap: 2
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            fontSize: 13,
-            fontWeight: 600,
-            color: gameUI.info,
-            letterSpacing: 0.3
-          },
-          children: "\uD83D\uDCA1 Pro Tip"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            fontSize: 12,
-            color: gameUI.primaryLight,
-            lineHeight: "16px"
-          },
-          children: "Double-tap the header to transform this into a floating modal"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: onAcknowledge,
-        style: {
-          backgroundColor: `${gameUI.info}30`,
-          padding: "6px 12px",
-          // native: paddingVertical 6 / horizontal 12
-          borderRadius: 6,
-          border: `1px solid ${gameUI.info}50`,
-          fontSize: 12,
-          fontWeight: 600,
-          color: gameUI.info,
-          cursor: "pointer",
-          fontFamily: "inherit",
-          flexShrink: 0
-        },
-        children: "Got it!"
-      })]
-    })
-  });
-});
-
-// ============================================================================
-// MODAL HEADER — DOM twin of native ModalHeader (title/subtitle/hint text)
-// ============================================================================
-function ModalHeaderContent({
-  header,
-  isResizing,
-  mode,
-  onMinimize,
-  variant = "default"
-}) {
-  if (header?.customContent) {
-    // native (non-CyberpunkModalHeader path): inject onMinimize into the
-    // custom element so it can trigger minimize; render inside the standard
-    // header structure with the compact drag indicator.
-    let customContent = header.customContent;
-    if (/*#__PURE__*/(0, _react.isValidElement)(header.customContent) && onMinimize) {
-      customContent = /*#__PURE__*/(0, _react.cloneElement)(header.customContent, {
-        onMinimize
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        minWidth: 0
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-        isResizing: isResizing,
-        mode: mode,
-        hasCustomContent: true,
-        variant: variant
-      }), customContent]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      position: "relative",
-      minWidth: 0
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
-      isResizing: isResizing,
-      mode: mode,
-      variant: variant
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        // native headerContent: paddingHorizontal 16, alignItems center
-        padding: "0 16px",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center"
-      },
-      children: [header?.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize: 16,
-          // native headerTitle
-          fontWeight: 600,
-          color: gameUI.primary
-        },
-        children: header.title
-      }), header?.subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize: 12,
-          // native headerSubtitle
-          color: gameUI.secondary,
-          paddingTop: 4
-        },
-        children: header.subtitle
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        pointerEvents: "none"
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize: 10,
-          // native hintText
-          color: gameUI.muted,
-          fontStyle: "italic"
-        },
-        children: "Double tap: Toggle \u2022 Triple tap: Close"
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// MAIN COMPONENT
-// ============================================================================
-const JsModalComponent = ({
-  visible,
-  onClose,
-  children,
-  header,
-  styles: customStyles = {},
-  minHeight = MIN_HEIGHT,
-  maxHeight,
-  initialHeight = DEFAULT_HEIGHT,
-  animatedHeight: _animatedHeight,
-  // no-op on web (DEV benchmark seam)
-  benchMotion: _benchMotion,
-  // no-op on web (DEV benchmark seam)
-  initialMode = "bottomSheet",
-  onModeChange,
-  persistenceKey,
-  enablePersistence = true,
-  initialFloatingPosition,
-  footer,
-  footerHeight = 0,
-  onBack: _onBack,
-  // native never invokes it from JsModal either
-  onMinimize,
-  minimizeRequest = 0,
-  minimizeTargetPosition,
-  initialModalState,
-  zIndex,
-  disableScrollWrapper = false,
-  background = true,
-  variant = "night"
-}) => {
-  const [insets] = (0, _react.useState)(readSafeAreaInsets);
-  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)(() => clampRectToSafeArea({
-    width: screenW(),
-    // native FLOATING_WIDTH = SCREEN.width
-    height: FLOATING_HEIGHT,
-    top: initialFloatingPosition?.y ?? (screenH() - FLOATING_HEIGHT) / 2,
-    left: initialFloatingPosition?.x ?? 0 // flush with left edge
-  }, insets));
-  const [showHint, setShowHint] = (0, _react.useState)(false);
-  const [hintLoaded, setHintLoaded] = (0, _react.useState)(false);
-  const hintsDisabled = (0, _index.useHintsDisabled)();
-
-  // -- imperative value refs (native Animated.Value stand-ins) --------------
-  const currentHeightRef = (0, _react.useRef)(initialHeight);
-  const currentDimensionsRef = (0, _react.useRef)(dimensions);
-  const posRef = (0, _react.useRef)({
-    x: dimensions.left,
-    y: dimensions.top
-  });
-
-  // -- DOM refs -------------------------------------------------------------
-  const sheetWrapperRef = (0, _react.useRef)(null);
-  const sheetRef = (0, _react.useRef)(null);
-  const floatRef = (0, _react.useRef)(null);
-
-  // Active rAF animations (cancelled on new visibility runs / unmount).
-  const animCancelsRef = (0, _react.useRef)([]);
-  const cancelAnims = (0, _react.useCallback)(() => {
-    animCancelsRef.current.forEach(c => c());
-    animCancelsRef.current = [];
-  }, []);
-  (0, _react.useEffect)(() => {
-    currentDimensionsRef.current = dimensions;
-  }, [dimensions]);
-  (0, _react.useEffect)(() => cancelAnims, [cancelAnims]);
-  const effectiveMaxHeight = maxHeight || screenH() - insets.top;
-
-  // ==========================================================================
-  // PERSISTENCE — exact native key usage, shape and 500ms debounce
-  // ==========================================================================
-  (0, _react.useEffect)(() => {
-    if (!enablePersistence || !persistenceKey) {
-      setIsStateLoaded(true);
-      return;
-    }
-    let mounted = true;
-    const loadState = async () => {
-      const savedState = await ModalStorage.load(persistenceKey);
-      if (mounted && savedState) {
-        if (savedState.mode) {
-          setMode(savedState.mode);
-          onModeChange?.(savedState.mode);
-        }
-        if (savedState.panelHeight) {
-          setPanelHeight(savedState.panelHeight);
-          currentHeightRef.current = savedState.panelHeight;
-        }
-        if (savedState.dimensions) {
-          // Clamp persisted rects too — a position saved on a different
-          // viewport (or before the safe-area fix) may be out of bounds.
-          const clamped = clampRectToSafeArea(savedState.dimensions, insets);
-          setDimensions(clamped);
-          posRef.current = {
-            x: clamped.left,
-            y: clamped.top
-          };
-        }
-      }
-      if (mounted) setIsStateLoaded(true);
-    };
-    loadState();
-    return () => {
-      mounted = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [persistenceKey, enablePersistence, onModeChange]);
-  (0, _react.useEffect)(() => {
-    if (!enablePersistence || !persistenceKey || !isStateLoaded) return;
-    const timeoutId = setTimeout(() => {
-      ModalStorage.save(persistenceKey, {
-        mode,
-        panelHeight: currentHeightRef.current,
-        dimensions,
-        isVisible: visible
-      });
-    }, 500); // native: 500ms debounce
-    return () => clearTimeout(timeoutId);
-  }, [mode, panelHeight, dimensions, visible, persistenceKey, enablePersistence, isStateLoaded]);
-
-  // ==========================================================================
-  // HINT BANNER — same @react_buoy_modal_hint_acknowledged key as native
-  // ==========================================================================
-  (0, _react.useEffect)(() => {
-    let mounted = true;
-    const loadHintStatus = async () => {
-      try {
-        const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-        const acknowledged = await webPersistentStorage.getItem(hintKey);
-        if (mounted) {
-          setShowHint(acknowledged !== "true");
-          setHintLoaded(true);
-        }
-      } catch {
-        if (mounted) {
-          setShowHint(true);
-          setHintLoaded(true);
-        }
-      }
-    };
-    loadHintStatus();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-  const handleHintAcknowledge = (0, _react.useCallback)(async () => {
-    try {
-      const hintKey = _devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();
-      await webPersistentStorage.setItem(hintKey, "true");
-      setShowHint(false);
-    } catch {
-      setShowHint(false);
-    }
-  }, []);
-
-  // ==========================================================================
-  // MODE TOGGLE + MINIMIZE
-  // ==========================================================================
-  const toggleMode = (0, _react.useCallback)(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-    setMode(prev => {
-      const newMode = prev === "bottomSheet" ? "floating" : "bottomSheet";
-      onModeChange?.(newMode);
-      return newMode;
-    });
-  }, [onModeChange]);
-
-  // Belt-and-suspenders: also clear flags when mode changes (native parity).
-  (0, _react.useEffect)(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-  }, [mode]);
-  const handleMinimize = (0, _react.useCallback)(() => {
-    if (!onMinimize) return;
-    const currentState = {
-      mode,
-      panelHeight: currentHeightRef.current,
-      floatingPosition: {
-        x: currentDimensionsRef.current.left,
-        y: currentDimensionsRef.current.top
-      },
-      floatingDimensions: {
-        width: currentDimensionsRef.current.width,
-        height: currentDimensionsRef.current.height
-      }
-    };
-
-    // native defaults: SCREEN.width - 50 / SCREEN.height - 150
-    const targetX = minimizeTargetPosition?.x ?? screenW() - 50;
-    const targetY = minimizeTargetPosition?.y ?? screenH() - 150;
-    cancelAnims();
-    if (mode === "bottomSheet") {
-      const wrapper = sheetWrapperRef.current;
-      if (!wrapper) {
-        onMinimize(currentState);
-        return;
-      }
-      const distance = screenH();
-      // native: parallel timing(300) opacity→0 + translateY→SCREEN.height
-      animCancelsRef.current.push(runAnim(300, easeInOut, v => {
-        wrapper.style.opacity = String(1 - v);
-        wrapper.style.transform = `translateY(${v * distance}px)`;
-      }, () => onMinimize(currentState)));
-    } else {
-      const el = floatRef.current;
-      if (!el) {
-        onMinimize(currentState);
-        return;
-      }
-      const from = {
-        ...posRef.current
-      };
-      // native animates floatingScale too, but the floating render never
-      // applies scale in its transform list — so visually it's fade + move,
-      // which is what we replicate.
-      animCancelsRef.current.push(runAnim(300, easeInOut, v => {
-        el.style.opacity = String(1 - v);
-        const x = from.x + (targetX - from.x) * v;
-        const y = from.y + (targetY - from.y) * v;
-        el.style.transform = `translate(${x}px, ${y}px)`;
-      }, () => onMinimize(currentState)));
-    }
-  }, [mode, onMinimize, minimizeTargetPosition, cancelAnims]);
-  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 (native parity).
-  (0, _react.useEffect)(() => {
-    if (!initialModalState) return;
-    if (initialModalState.mode) {
-      setMode(initialModalState.mode);
-      onModeChange?.(initialModalState.mode);
-    }
-    if (initialModalState.panelHeight) {
-      setPanelHeight(initialModalState.panelHeight);
-      currentHeightRef.current = initialModalState.panelHeight;
-    }
-    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);
-      posRef.current = {
-        x: initialModalState.floatingPosition.x,
-        y: initialModalState.floatingPosition.y
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialModalState]);
-
-  // ==========================================================================
-  // VISIBILITY / OPEN ANIMATIONS (mirrors native visibility effect: runs on
-  // visible AND mode changes; visible=false skips — the hidden tree renders)
-  // ==========================================================================
-  (0, _react.useLayoutEffect)(() => {
-    if (!visible) return;
-    cancelAnims();
-    if (mode === "bottomSheet") {
-      const wrapper = sheetWrapperRef.current;
-      if (!wrapper) return;
-      const distance = screenH();
-      // native: reset translateY to SCREEN.height + progress 0, then
-      // spring(tension 180, friction 22) → 0 and timing(200) opacity → 1.
-      wrapper.style.transform = `translateY(${distance}px)`;
-      wrapper.style.opacity = "0";
-      animCancelsRef.current.push(
-      // spring stand-in: 300ms ease-out-cubic (logged deviation)
-      runAnim(300, easeOutCubic, v => {
-        wrapper.style.transform = `translateY(${(1 - v) * distance}px)`;
-      }), runAnim(200, easeInOut, v => {
-        wrapper.style.opacity = String(v);
-      }));
-    } else {
-      const el = floatRef.current;
-      if (!el) return;
-      // Restore-from-minimize deviation (see header): re-sync position from
-      // the last committed rect so the panel doesn't reopen at the minimize
-      // target the web AppHost never restores via initialModalState.
-      posRef.current = {
-        x: currentDimensionsRef.current.left,
-        y: currentDimensionsRef.current.top
-      };
-      el.style.transform = `translate(${posRef.current.x}px, ${posRef.current.y}px)`;
-      // native: floatingScale jumps to 1 (no pop) + timing(200) opacity → 1
-      el.style.opacity = "0";
-      animCancelsRef.current.push(runAnim(200, easeInOut, v => {
-        el.style.opacity = String(v);
-      }));
-    }
-  }, [visible, mode, cancelAnims]);
-
-  // ==========================================================================
-  // TAP COUNTING — native spec: 500ms window, 300ms settle;
-  // 2 taps → toggle mode, ≥3 taps → minimize
-  // ==========================================================================
-  const lastTapRef = (0, _react.useRef)(0);
-  const tapCountRef = (0, _react.useRef)(0);
-  const tapTimeoutRef = (0, _react.useRef)(null);
-  const registerTap = (0, _react.useCallback)(() => {
-    const now = Date.now();
-    if (now - lastTapRef.current > 500) {
-      tapCountRef.current = 0;
-    }
-    tapCountRef.current++;
-    lastTapRef.current = now;
-    if (tapTimeoutRef.current) clearTimeout(tapTimeoutRef.current);
-    tapTimeoutRef.current = setTimeout(() => {
-      if (tapCountRef.current === 2) {
-        toggleMode();
-      } else if (tapCountRef.current >= 3) {
-        if (onMinimize) handleMinimize();
-      }
-      tapCountRef.current = 0;
-    }, 300);
-  }, [toggleMode, onMinimize, handleMinimize]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (tapTimeoutRef.current) clearTimeout(tapTimeoutRef.current);
-    };
-  }, []);
-
-  // ==========================================================================
-  // GESTURE: bottom-sheet header drag-resize (native bottomSheetPanResponder)
-  // ==========================================================================
-  const sheetGestureRef = (0, _react.useRef)({
-    active: false,
-    resizing: false,
-    startY: 0,
-    headerOffsetY: 0,
-    samples: []
-  });
-  const handleSheetPointerDown = (0, _react.useCallback)(e => {
-    if (mode !== "bottomSheet") return;
-    // Ignore clicks on interactive header children (window controls live
-    // outside the header, but custom content may contain buttons).
-    if (e.target.closest("button")) return;
-    const g = sheetGestureRef.current;
-    g.active = true;
-    g.resizing = false;
-    g.startY = e.clientY;
-    // native onPanResponderGrant: locationY — where inside the header the
-    // pointer grabbed (absolute finger anchoring).
-    const rect = e.currentTarget.getBoundingClientRect();
-    g.headerOffsetY = e.clientY - rect.top;
-    g.samples = [{
-      t: performance.now(),
-      y: e.clientY
-    }];
-    e.currentTarget.setPointerCapture(e.pointerId);
-  }, [mode]);
-  const handleSheetPointerMove = (0, _react.useCallback)(e => {
-    const g = sheetGestureRef.current;
-    if (!g.active) return;
-    const dy = e.clientY - g.startY;
-    // native onMoveShouldSetPanResponder: |dy| > 3
-    if (!g.resizing && Math.abs(dy) > 3) {
-      g.resizing = true;
-      cancelAnims();
-      setIsResizing(true);
-    }
-    if (!g.resizing) return;
-    // native onPanResponderMove: sheetTop = pageY - headerTouchOffset;
-    // height = SCREEN.height - sheetTop, clamped
-    const sheetTop = e.clientY - g.headerOffsetY;
-    let targetHeight = screenH() - sheetTop;
-    targetHeight = Math.max(minHeight, Math.min(targetHeight, effectiveMaxHeight));
-    currentHeightRef.current = targetHeight;
-    if (sheetRef.current) sheetRef.current.style.height = `${targetHeight}px`;
-    // velocity samples (~last 100ms) for the swipe-to-close check
-    const now = performance.now();
-    g.samples.push({
-      t: now,
-      y: e.clientY
-    });
-    while (g.samples.length > 2 && now - g.samples[0].t > 100) g.samples.shift();
-  }, [minHeight, effectiveMaxHeight, cancelAnims]);
-  const handleSheetPointerUp = (0, _react.useCallback)(e => {
-    const g = sheetGestureRef.current;
-    if (!g.active) return;
-    g.active = false;
-    if (!g.resizing) {
-      // Tap path — native: TouchableWithoutFeedback keeps the touch when
-      // movement stays under the 3px steal threshold.
-      registerTap();
-      return;
-    }
-    setIsResizing(false);
-    const finalHeight = currentHeightRef.current;
-    const dy = e.clientY - g.startY;
-    // vy in px/ms — same unit as RN gestureState.vy
-    const first = g.samples[0];
-    const last = g.samples[g.samples.length - 1];
-    const vy = last && first && last.t > first.t ? (last.y - first.y) / (last.t - first.t) : 0;
-
-    // native close spec: (vy > 0.8 && dy > 50) || (dy > 150 && h <= minHeight)
-    const shouldClose = vy > 0.8 && dy > 50 || dy > 150 && finalHeight <= minHeight;
-    if (shouldClose) {
-      const wrapper = sheetWrapperRef.current;
-      cancelAnims();
-      if (wrapper) {
-        const distance = screenH();
-        // native: timing(200) opacity→0 + spring translateY→SCREEN.height
-        animCancelsRef.current.push(runAnim(200, easeInOut, v => {
-          wrapper.style.opacity = String(1 - v);
-        }), runAnim(300, easeOutCubic, v => {
-          wrapper.style.transform = `translateY(${v * distance}px)`;
-        }, () => onClose()));
-      } else {
-        onClose();
-      }
-      return;
-    }
-
-    // Already at the finger-tracked height; just commit state.
-    setPanelHeight(finalHeight);
-  }, [minHeight, onClose, registerTap, cancelAnims]);
-  const handleSheetPointerCancel = (0, _react.useCallback)(() => {
-    const g = sheetGestureRef.current;
-    if (!g.active) return;
-    g.active = false;
-    g.resizing = false;
-    setIsResizing(false);
-  }, []);
-
-  // ==========================================================================
-  // GESTURE: floating header drag (native DraggableHeader semantics)
-  // ==========================================================================
-  const dragGestureRef = (0, _react.useRef)({
-    active: false,
-    dragging: false,
-    startX: 0,
-    startY: 0,
-    startPos: {
-      x: 0,
-      y: 0
-    }
-  });
-  const handleFloatPointerDown = (0, _react.useCallback)(e => {
-    // native: DraggableHeader enabled = mode === "floating" && !isResizing
-    if (mode !== "floating" || isResizing) return;
-    if (e.target.closest("button")) return;
-    const g = dragGestureRef.current;
-    g.active = true;
-    g.dragging = false;
-    g.startX = e.clientX;
-    g.startY = e.clientY;
-    g.startPos = {
-      ...posRef.current
-    };
-    e.currentTarget.setPointerCapture(e.pointerId);
-  }, [mode, isResizing]);
-  const handleFloatPointerMove = (0, _react.useCallback)(e => {
-    const g = dragGestureRef.current;
-    if (!g.active) return;
-    const dx = e.clientX - g.startX;
-    const dy = e.clientY - g.startY;
-    // native DraggableHeader: drag begins when |dx| + |dy| > 5
-    if (!g.dragging && Math.abs(dx) + Math.abs(dy) > 5) {
-      g.dragging = true;
-      setIsDragging(true);
-    }
-    if (!g.dragging) return;
-    // relative dx/dy motion, unclamped during move (native parity)
-    const x = g.startPos.x + dx;
-    const y = g.startPos.y + dy;
-    posRef.current = {
-      x,
-      y
-    };
-    if (floatRef.current) {
-      floatRef.current.style.transform = `translate(${x}px, ${y}px)`;
-    }
-  }, []);
-  const handleFloatPointerUp = (0, _react.useCallback)(() => {
-    const g = dragGestureRef.current;
-    if (!g.active) return;
-    g.active = false;
-    if (!g.dragging) {
-      registerTap(); // native: DraggableHeader onTap → handleFloatingTap
-      return;
-    }
-    setIsDragging(false);
-    // Release clamp keeps the whole window inside the safe area (all four
-    // insets — deliberate improvement over native, which only clamps top).
-    const dims = currentDimensionsRef.current;
-    const clampedRect = clampRectToSafeArea({
-      ...dims,
-      left: posRef.current.x,
-      top: posRef.current.y
-    }, insets);
-    const clampedX = clampedRect.left;
-    const clampedY = clampedRect.top;
-    posRef.current = {
-      x: clampedX,
-      y: clampedY
-    };
-    if (floatRef.current) {
-      floatRef.current.style.transform = `translate(${clampedX}px, ${clampedY}px)`;
-    }
-    setDimensions(prev => ({
-      ...prev,
-      left: clampedX,
-      top: clampedY
-    }));
-  }, [insets, registerTap]);
-  const handleFloatPointerCancel = (0, _react.useCallback)(() => {
-    const g = dragGestureRef.current;
-    if (!g.active) return;
-    g.active = false;
-    g.dragging = false;
-    setIsDragging(false);
-  }, []);
-
-  // ==========================================================================
-  // GESTURE: floating corner resize (native createResizeHandler — only the
-  // bottom corners are rendered, to avoid conflicts with the window controls)
-  // ==========================================================================
-  const resizeGestureRef = (0, _react.useRef)({
-    active: false,
-    corner: "bottomRight",
-    startX: 0,
-    startY: 0,
-    start: {
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
-    }
-  });
-  const handleResizePointerDown = (0, _react.useCallback)(corner => e => {
-    if (mode !== "floating") return;
-    e.stopPropagation();
-    const g = resizeGestureRef.current;
-    g.active = true;
-    g.corner = corner;
-    g.startX = e.clientX;
-    g.startY = e.clientY;
-    g.start = {
-      ...currentDimensionsRef.current
-    };
-    setIsResizing(true);
-    e.currentTarget.setPointerCapture(e.pointerId);
-  }, [mode]);
-  const handleResizePointerMove = (0, _react.useCallback)(e => {
-    const g = resizeGestureRef.current;
-    if (!g.active) return;
-    const dx = e.clientX - g.startX;
-    const dy = e.clientY - g.startY;
-    // native: moves under 0.5px are ignored
-    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
-
-    // native safe-area-aware bounds
-    const minLeft = Math.max(0, insets.left);
-    const maxBottom = screenH() - Math.max(0, insets.bottom);
-    const maxRight = screenW() - Math.max(0, insets.right);
-    const floatingMinWidth = screenW() * 0.25; // native FLOATING_MIN_WIDTH
-    const start = g.start;
-    const startRight = start.left + start.width;
-    const startBottom = start.top + start.height;
-    let left = start.left;
-    const top = start.top; // bottom corners anchor the top edge
-    let right = startRight;
-    let bottom = startBottom;
-    if (g.corner === "bottomLeft") {
-      // move left & bottom; anchor right & top
-      left = Math.max(minLeft, Math.min(start.left + dx, startRight - floatingMinWidth));
-      bottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-    } else {
-      // bottomRight: move right & bottom; anchor left & top
-      right = Math.min(maxRight, Math.max(startRight + dx, start.left + floatingMinWidth));
-      bottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + FLOATING_MIN_HEIGHT));
-    }
-    const updatedWidth = Math.max(floatingMinWidth, right - left);
-    const updatedHeight = Math.max(FLOATING_MIN_HEIGHT, bottom - top);
-    const next = {
-      width: updatedWidth,
-      height: updatedHeight,
-      left,
-      top
-    };
-    currentDimensionsRef.current = next;
-    posRef.current = {
-      x: left,
-      y: top
-    };
-    // native pushes setDimensions per move (state drives width/height)
-    setDimensions(next);
-    if (floatRef.current) {
-      floatRef.current.style.transform = `translate(${left}px, ${top}px)`;
-    }
-  }, [insets.left, insets.right, insets.bottom]);
-  const handleResizePointerUp = (0, _react.useCallback)(() => {
-    const g = resizeGestureRef.current;
-    if (!g.active) return;
-    g.active = false;
-    setIsResizing(false);
-    setDimensions(currentDimensionsRef.current);
-  }, []);
-
-  // ==========================================================================
-  // RENDER
-  // ==========================================================================
-
-  // Hidden but mounted — panel state and listeners survive minimize/close-
-  // to-background, same as native's offscreen container.
-  // The three branches below carry distinct keys ON PURPOSE: the open/
-  // minimize animations write opacity/transform imperatively (rAF, outside
-  // React's style props), so if React reused a DOM node across branches —
-  // e.g. a fresh mount whose async-persisted mode flips bottomSheet→floating
-  // mid-entrance — the old sheet wrapper (opacity ≈ 0, translateY offscreen)
-  // would be recycled as the floating header and render a blank strip.
-  // React never clears styles it didn't set via props; distinct keys force a
-  // clean remount of the chrome instead. (Children remount with it, matching
-  // native, whose mode branches are different trees too — tool panels hold
-  // their state above JsModal or in external stores.)
-  if (!visible) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        display: "none"
-      },
-      "aria-hidden": true,
-      children: children
-    }, "hidden");
-  }
-  const dialogLabel = header?.title || "Dev tool panel";
-  const isNight = variant === "night";
-
-  // Night: the star field fills the whole sheet — header included — instead
-  // of starting under the header band (native parity: hoisted to sheet root).
-  const nightBackdrop = background && isNight ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      position: "absolute",
-      inset: 0,
-      pointerEvents: "none"
-    },
-    "aria-hidden": true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
-  }) : null;
-
-  // Content block shared by both modes — native styles.content:
-  // flex 1, bg base #121212, borderBottomRadius 16, overflow hidden.
-  // Night: transparent, so the sheet-level star field shows through.
-  const contentBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      flex: 1,
-      minHeight: 0,
-      position: "relative",
-      display: "flex",
-      flexDirection: "column",
-      backgroundColor: isNight ? "transparent" : buoy.base,
-      borderBottomLeftRadius: 16,
-      borderBottomRightRadius: 16,
-      overflow: "hidden",
-      ...customStyles.content
-    },
-    children: [background && !isNight ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
-    /*#__PURE__*/
-    // children manage their own scrolling (native: plain flex View)
-    (0, _jsxRuntime.jsx)("div", {
-      style: {
-        flex: 1,
-        minHeight: 0,
-        display: "flex",
-        flexDirection: "column",
-        paddingBottom: footerHeight
-      },
-      children: children
-    }) :
-    /*#__PURE__*/
-    // native: ScrollView with flexGrow 1 + paddingBottom footerHeight
-    (0, _jsxRuntime.jsx)("div", {
-      style: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
-        paddingBottom: footerHeight
-      },
-      children: children
-    }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        // native footerStyles.footerContainer
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: buoy.base,
-        borderBottomLeftRadius: 16,
-        borderBottomRightRadius: 16
-      },
-      children: footer
-    }) : null]
-  });
-  const windowControlsBlock =
-  /*#__PURE__*/
-  // native windowControlsContainer: absolute top 4 right 4, zIndex 10
-  (0, _jsxRuntime.jsx)("div", {
-    style: {
-      position: "absolute",
-      top: 4,
-      right: 4,
-      zIndex: 10
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WindowControls, {
-      onClose: onClose,
-      onMinimize: onMinimize ? handleMinimize : undefined,
-      onToggleMode: toggleMode,
-      mode: mode
-    })
-  });
-
-  // ----- FLOATING MODE ------------------------------------------------------
-  if (mode === "floating") {
-    const active = isDragging || isResizing;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      ref: floatRef,
-      role: "dialog",
-      "aria-label": dialogLabel,
-      style: {
-        // native floatingModal: absolute, card bg, radius 6, 1px #333
-        // border, teal glow (shadowOpacity 0.3, radius 20), zIndex 1000.
-        // Dragging: 2px teal border + tighter teal glow
-        // (primary+"99" × shadowOpacity 0.8 ≈ 0.48 effective alpha).
-        position: "fixed",
-        left: 0,
-        top: 0,
-        width: dimensions.width,
-        height: dimensions.height,
-        transform: `translate(${posRef.current.x}px, ${posRef.current.y}px)`,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: isNight ? _nightTheme.night.color.bg : buoy.card,
-        borderRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-        border: isNight ? `1px solid ${_nightTheme.night.color.accent}55` : active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
-        boxShadow: isNight ? `0 0 14px ${_nightTheme.night.color.accent}38` : active ? `0 0 12px ${buoy.primary}7A` : `0 0 20px ${buoy.primary}4D`,
-        // Night clips the hoisted star field to the rounded window.
-        ...(isNight ? {
-          overflow: "hidden"
-        } : null),
-        boxSizing: "border-box",
-        // RN borders draw inside the rect
-        zIndex: zIndex ?? 1000,
-        ...customStyles.container
-      },
-      children: [nightBackdrop, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        onPointerDown: handleFloatPointerDown,
-        onPointerMove: handleFloatPointerMove,
-        onPointerUp: handleFloatPointerUp,
-        onPointerCancel: handleFloatPointerCancel,
-        style: {
-          // native styles.header (+ floatingHeader top radius 6);
-          // night: transparent glass, no border — the field runs through
-          borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-          borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-          backgroundColor: isNight ? "transparent" : buoy.card,
-          minHeight: 56,
-          border: isNight ? "none" : `1px solid ${buoy.border}`,
-          boxSizing: "border-box",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          flexShrink: 0,
-          touchAction: "none",
-          userSelect: "none",
-          cursor: isDragging ? "grabbing" : "grab",
-          // web-only affordance
-          position: "relative"
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeaderContent, {
-          header: header,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          variant: variant
-        })
-      }), windowControlsBlock, contentBlock, ["bottomLeft", "bottomRight"].map(corner => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        onPointerDown: handleResizePointerDown(corner),
-        onPointerMove: handleResizePointerMove,
-        onPointerUp: handleResizePointerUp,
-        onPointerCancel: handleResizePointerUp,
-        style: {
-          position: "absolute",
-          width: 30,
-          height: 30,
-          bottom: 4,
-          ...(corner === "bottomLeft" ? {
-            left: 4
-          } : {
-            right: 4
-          }),
-          zIndex: 1000,
-          touchAction: "none",
-          cursor: corner === "bottomLeft" ? "nesw-resize" : "nwse-resize"
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: 20,
-            height: 20,
-            borderRadius: 10,
-            boxSizing: "border-box",
-            backgroundColor: active ? `${gameUI.success}1A` : "transparent",
-            border: active ? `2px solid ${gameUI.success}` : "none",
-            boxShadow: active ? `0 0 8px ${gameUI.success}99` : "none"
-          }
-        })
-      }, corner))]
-    }, "floating");
-  }
-
-  // ----- BOTTOM SHEET MODE --------------------------------------------------
-  return (
-    /*#__PURE__*/
-    // native fullScreenContainer: absolute fill, zIndex 1000, box-none
-    (0, _jsxRuntime.jsx)("div", {
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: zIndex ?? 1000,
-        pointerEvents: "none"
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: sheetWrapperRef,
-        style: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          pointerEvents: "auto"
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          ref: sheetRef,
-          role: "dialog",
-          "aria-label": dialogLabel,
-          style: {
-            // native bottomSheet: card bg, top radius 6, 1px #333 border,
-            // teal shadow (offset 0/-4, opacity 0.2, radius 12).
-            // Night: #050505 sheet, top radius 16, hairline accent border.
-            height: currentHeightRef.current,
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: isNight ? _nightTheme.night.color.bg : buoy.card,
-            borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-            borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-            border: isNight ? `1px solid ${_nightTheme.night.color.accent}55` : `1px solid ${buoy.border}`,
-            boxShadow: isNight ? `0 -4px 10px ${_nightTheme.night.color.accent}38` : `0 -4px 12px ${buoy.primary}33`,
-            // Night clips the hoisted star field to the rounded sheet.
-            ...(isNight ? {
-              overflow: "hidden"
-            } : null),
-            boxSizing: "border-box",
-            position: "relative",
-            ...customStyles.container
-          },
-          children: [nightBackdrop, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onPointerDown: handleSheetPointerDown,
-            onPointerMove: handleSheetPointerMove,
-            onPointerUp: handleSheetPointerUp,
-            onPointerCancel: handleSheetPointerCancel,
-            style: {
-              // native styles.header; night: transparent glass, no border
-              borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-              borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
-              backgroundColor: isNight ? "transparent" : buoy.card,
-              minHeight: 56,
-              border: isNight ? "none" : `1px solid ${buoy.border}`,
-              boxSizing: "border-box",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              flexShrink: 0,
-              touchAction: "none",
-              userSelect: "none",
-              cursor: "ns-resize",
-              // web-only affordance
-              position: "relative"
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeaderContent, {
-              header: header,
-              isResizing: isResizing,
-              mode: mode,
-              onMinimize: onMinimize ? handleMinimize : undefined,
-              variant: variant
-            })
-          }), windowControlsBlock, hintLoaded && showHint && !hintsDisabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHintBanner, {
-            onAcknowledge: handleHintAcknowledge
-          }), contentBlock]
-        })
-      })
-    }, "bottomSheet")
-  );
-};
-
-// ============================================================================
-// EXPORT — memoized like native
-// ============================================================================
-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 _persistentStorage=require("./utils/persistentStorage");var _modalStorage=require("./utils/modalStorage.js");var _devToolsStorageKeys=require("./storage/devToolsStorageKeys.js");var _index=require("./context/index.js");var _ToolBackground=require("./ui/backgrounds/ToolBackground.js");var _nightTheme=require("./ui/night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");const buoy={base:"#121212",card:"#1A1A1A",border:"#333333",textMuted:"#888888",primary:"#20C997"};const gameUI={primary:"#F5F5F7",primaryLight:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93",success:"#34C759",info:"#00B8E6"};const MIN_HEIGHT=100;const DEFAULT_HEIGHT=400;const FLOATING_HEIGHT=500;const FLOATING_MIN_HEIGHT=80;const screenW=()=>typeof window!=="undefined"?window.innerWidth:0;const screenH=()=>typeof window!=="undefined"?window.innerHeight:0;const easeOutCubic=n=>1-Math.pow(1-n,3);const easeInOut=n=>n<.5?2*n*n:1-Math.pow(-2*n+2,2)/2;function runAnim(n,o,i,f){let h=0;let u=false;const w=performance.now();const S=it=>{if(u)return;const J=Math.min((it-w)/n,1);i(o(J));if(J<1){h=requestAnimationFrame(S)}else{f?.()}};h=requestAnimationFrame(S);return()=>{u=true;cancelAnimationFrame(h)}}function readSafeAreaInsets(){if(typeof document==="undefined"){return{top:0,left:0,right:0,bottom:0}}const n=document.createElement("div");n.style.cssText="position:fixed;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);visibility:hidden;pointer-events:none";document.body.appendChild(n);const o=n.getBoundingClientRect();document.body.removeChild(n);return{top:Math.max(0,o.top),left:Math.max(0,o.left),right:Math.max(0,window.innerWidth-o.right),bottom:Math.max(0,window.innerHeight-o.bottom)}}function clampRectToSafeArea(n,o){const i=Math.max(FLOATING_MIN_HEIGHT,window.innerWidth-o.left-o.right);const f=Math.max(FLOATING_MIN_HEIGHT,window.innerHeight-o.top-o.bottom);const h=Math.min(n.width,i);const u=Math.min(n.height,f);return{width:h,height:u,left:Math.max(o.left,Math.min(n.left,window.innerWidth-o.right-h)),top:Math.max(o.top,Math.min(n.top,window.innerHeight-o.bottom-u))}}const XIcon=({size:n=24,color:o="currentColor",strokeWidth:i=2})=>(0,_jsxRuntime.jsxs)("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[(0,_jsxRuntime.jsx)("line",{x1:18,y1:6,x2:6,y2:18,stroke:o,strokeWidth:i,strokeLinecap:"round"}),(0,_jsxRuntime.jsx)("line",{x1:6,y1:6,x2:18,y2:18,stroke:o,strokeWidth:i,strokeLinecap:"round"})]});const MinusIcon=({size:n=24,color:o="currentColor",strokeWidth:i=2})=>(0,_jsxRuntime.jsx)("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:(0,_jsxRuntime.jsx)("line",{x1:5,y1:12,x2:19,y2:12,stroke:o,strokeWidth:i,strokeLinecap:"round"})});const DockBottomIcon=({size:n=24,color:o="currentColor",strokeWidth:i=2})=>(0,_jsxRuntime.jsxs)("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[(0,_jsxRuntime.jsx)("rect",{x:3,y:3,width:18,height:18,rx:2,stroke:o,strokeWidth:i}),(0,_jsxRuntime.jsx)("rect",{x:3,y:14,width:18,height:7,fill:o})]});const FloatWindowIcon=({size:n=24,color:o="currentColor",strokeWidth:i=2})=>(0,_jsxRuntime.jsxs)("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[(0,_jsxRuntime.jsx)("rect",{x:3,y:3,width:14,height:14,rx:2,stroke:o,strokeWidth:i}),(0,_jsxRuntime.jsx)("line",{x1:7,y1:17,x2:7,y2:21,stroke:o,strokeWidth:i}),(0,_jsxRuntime.jsx)("line",{x1:7,y1:21,x2:21,y2:21,stroke:o,strokeWidth:i}),(0,_jsxRuntime.jsx)("line",{x1:21,y1:21,x2:21,y2:7,stroke:o,strokeWidth:i}),(0,_jsxRuntime.jsx)("line",{x1:17,y1:7,x2:21,y2:7,stroke:o,strokeWidth:i})]});const WC_COLORS={close:"#FF5F57",minimize:"#FEBC2E",toggleMode:"#28C840"};const WC_BUTTON_SIZE=24;const WC_BUTTON_SPACING=2;const WC_ICON_SIZE=8;const wcDotStyle=n=>({width:WC_BUTTON_SIZE,height:WC_BUTTON_SIZE,borderRadius:WC_BUTTON_SIZE/2,display:"flex",alignItems:"center",justifyContent:"center",background:`radial-gradient(circle, ${n} 6px, transparent 6px)`,border:"none",padding:0,cursor:"pointer",flexShrink:0});function WindowControls({onClose:n,onMinimize:o,onToggleMode:i,mode:f}){const h=f==="floating"?DockBottomIcon:FloatWindowIcon;const u=f==="floating"?"Dock to bottom sheet":"Make floating window";return(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:WC_BUTTON_SPACING},children:[o&&(0,_jsxRuntime.jsx)("button",{type:"button",onClick:o,style:wcDotStyle(WC_COLORS.minimize),"aria-label":"Minimize modal",children:(0,_jsxRuntime.jsx)(MinusIcon,{size:WC_ICON_SIZE,color:"#7A5A00",strokeWidth:1.5})}),i&&(0,_jsxRuntime.jsx)("button",{type:"button",onClick:i,style:wcDotStyle(WC_COLORS.toggleMode),"aria-label":u,children:(0,_jsxRuntime.jsx)(h,{size:WC_ICON_SIZE,color:"#004A1A",strokeWidth:1.5})}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:n,style:wcDotStyle(WC_COLORS.close),"aria-label":"Close modal",children:(0,_jsxRuntime.jsx)(XIcon,{size:WC_ICON_SIZE,color:"#4A0000",strokeWidth:1.5})})]})}const DragIndicator=(0,_react.memo)(function n({isResizing:o,mode:i,hasCustomContent:f=false,variant:h="default"}){const u=i==="floating";const w=h==="night";return(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",position:"relative",justifyContent:f?"center":void 0,minHeight:f?32:void 0,paddingTop:f?0:8,paddingBottom:f?0:8,backgroundColor:"transparent"},children:[(0,_jsxRuntime.jsx)("div",{style:{width:w?36:o?40:u?50:40,height:w?5:u?5:3,backgroundColor:w?_nightTheme.night.color.placeholder:o?buoy.primary:u?buoy.textMuted:buoy.primary,borderRadius:w?2.5:2,boxShadow:w?"none":`0 0 4px ${buoy.primary}99`}}),o&&i==="bottomSheet"&&(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(S=>(0,_jsxRuntime.jsx)("div",{style:{width:12,height:1,backgroundColor:gameUI.success,opacity:.6}},S))})]})});const ModalHintBanner=(0,_react.memo)(function n({onAcknowledge:o}){return(0,_jsxRuntime.jsx)("div",{style:{backgroundColor:`${gameUI.info}15`,borderLeft:`3px solid ${gameUI.info}`,borderRadius:8,margin:"8px 12px 4px",overflow:"hidden",boxShadow:`0 0 8px ${gameUI.info}4D`,flexShrink:0},children:(0,_jsxRuntime.jsxs)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",padding:12,gap:12},children:[(0,_jsxRuntime.jsxs)("div",{style:{width:32,height:32,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:[(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",width:20,height:20,borderRadius:10,border:`2px solid ${gameUI.info}`,opacity:.6,transform:"scale(0.8)",boxSizing:"border-box"}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",width:20,height:20,borderRadius:10,border:`2px solid ${gameUI.info}`,boxSizing:"border-box"}})]}),(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:2},children:[(0,_jsxRuntime.jsx)("span",{style:{fontSize:13,fontWeight:600,color:gameUI.info,letterSpacing:.3},children:"\u{1F4A1} Pro Tip"}),(0,_jsxRuntime.jsx)("span",{style:{fontSize:12,color:gameUI.primaryLight,lineHeight:"16px"},children:"Double-tap the header to transform this into a floating modal"})]}),(0,_jsxRuntime.jsx)("button",{type:"button",onClick:o,style:{backgroundColor:`${gameUI.info}30`,padding:"6px 12px",borderRadius:6,border:`1px solid ${gameUI.info}50`,fontSize:12,fontWeight:600,color:gameUI.info,cursor:"pointer",fontFamily:"inherit",flexShrink:0},children:"Got it!"})]})})});function ModalHeaderContent({header:n,isResizing:o,mode:i,onMinimize:f,variant:h="default"}){if(n?.customContent){let u=n.customContent;if((0,_react.isValidElement)(n.customContent)&&f){u=(0,_react.cloneElement)(n.customContent,{onMinimize:f})}return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",minWidth:0},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:o,mode:i,hasCustomContent:true,variant:h}),u]})}return(0,_jsxRuntime.jsxs)("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative",minWidth:0},children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:o,mode:i,variant:h}),(0,_jsxRuntime.jsxs)("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[n?.title&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:16,fontWeight:600,color:gameUI.primary},children:n.title}),n?.subtitle&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:12,color:gameUI.secondary,paddingTop:4},children:n.subtitle})]}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("span",{style:{fontSize:10,color:gameUI.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}const JsModalComponent=({visible:n,onClose:o,children:i,header:f,styles:h={},minHeight:u=MIN_HEIGHT,maxHeight:w,initialHeight:S=DEFAULT_HEIGHT,animatedHeight:it,benchMotion:J,initialMode:St="bottomSheet",onModeChange:st,persistenceKey:j,enablePersistence:R=true,initialFloatingPosition:at,footer:lt,footerHeight:ct=0,onBack:Xt,onMinimize:m,minimizeRequest:z=0,minimizeTargetPosition:V,initialModalState:g,zIndex:dt,disableScrollWrapper:Rt=false,background:ut=true,variant:Z="night"})=>{const[b]=(0,_react.useState)(readSafeAreaInsets);const[ft,ht]=(0,_react.useState)(!R);const[d,Q]=(0,_react.useState)(St);const F=(0,_react.useRef)(st);F.current=st;const[A,M]=(0,_react.useState)(false);const[K,P]=(0,_react.useState)(false);const[Mt,tt]=(0,_react.useState)(S);const[C,B]=(0,_react.useState)(()=>clampRectToSafeArea({width:screenW(),height:FLOATING_HEIGHT,top:at?.y??(screenH()-FLOATING_HEIGHT)/2,left:at?.x??0},b));const[Tt,O]=(0,_react.useState)(false);const[Dt,gt]=(0,_react.useState)(false);const Ht=(0,_index.useHintsDisabled)();const T=(0,_react.useRef)(S);const y=(0,_react.useRef)(C);const p=(0,_react.useRef)({x:C.left,y:C.top});const X=(0,_react.useRef)(null);const et=(0,_react.useRef)(null);const k=(0,_react.useRef)(null);const D=(0,_react.useRef)([]);const v=(0,_react.useCallback)(()=>{D.current.forEach(t=>t());D.current=[]},[]);(0,_react.useEffect)(()=>{y.current=C},[C]);(0,_react.useEffect)(()=>v,[v]);const pt=w||screenH()-b.top;(0,_react.useEffect)(()=>{if(!R||!j){ht(true);return}let t=true;const e=async()=>{const r=await _modalStorage.ModalStorage.load(j);if(t&&r){if(r.mode){Q(r.mode);F.current?.(r.mode)}if(r.panelHeight){tt(r.panelHeight);T.current=r.panelHeight}if(r.dimensions){const s=clampRectToSafeArea(r.dimensions,b);B(s);p.current={x:s.left,y:s.top}}}if(t)ht(true)};e();return()=>{t=false}},[j,R]);(0,_react.useEffect)(()=>{if(!R||!j||!ft)return;const t=setTimeout(()=>{_modalStorage.ModalStorage.save(j,{mode:d,panelHeight:T.current,dimensions:C,isVisible:n})},500);return()=>clearTimeout(t)},[d,Mt,C,n,j,R,ft]);(0,_react.useEffect)(()=>{let t=true;const e=async()=>{try{const r=_devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();const s=await _persistentStorage.persistentStorage.getItem(r);if(t){O(s!=="true");gt(true)}}catch{if(t){O(true);gt(true)}}};e();return()=>{t=false}},[]);const It=(0,_react.useCallback)(async()=>{try{const t=_devToolsStorageKeys.devToolsStorageKeys.modal.hintAcknowledged();await _persistentStorage.persistentStorage.setItem(t,"true");O(false)}catch{O(false)}},[]);const nt=(0,_react.useCallback)(()=>{P(false);M(false);const t=d==="bottomSheet"?"floating":"bottomSheet";Q(t);F.current?.(t)},[d]);(0,_react.useEffect)(()=>{P(false);M(false)},[d]);const H=(0,_react.useCallback)(()=>{if(!m)return;const t={mode:d,panelHeight:T.current,floatingPosition:{x:y.current.left,y:y.current.top},floatingDimensions:{width:y.current.width,height:y.current.height}};if(R&&j)void _modalStorage.ModalStorage.saveMinimized(j,t);const e=V?.x??screenW()-50;const r=V?.y??screenH()-150;v();if(d==="bottomSheet"){const s=X.current;if(!s){m(t);return}const a=screenH();D.current.push(runAnim(300,easeInOut,c=>{s.style.opacity=String(1-c);s.style.transform=`translateY(${c*a}px)`},()=>m(t)))}else{const s=k.current;if(!s){m(t);return}const a={...p.current};D.current.push(runAnim(300,easeInOut,c=>{s.style.opacity=String(1-c);const L=a.x+(e-a.x)*c;const I=a.y+(r-a.y)*c;s.style.transform=`translate(${L}px, ${I}px)`},()=>m(t)))}},[d,m,V,v,R,j]);const xt=(0,_react.useRef)(z);(0,_react.useEffect)(()=>{if(xt.current===z)return;xt.current=z;H()},[z,H]);(0,_react.useEffect)(()=>{if(!g)return;if(g.mode){Q(g.mode);F.current?.(g.mode)}if(g.panelHeight){tt(g.panelHeight);T.current=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};B(t);p.current={x:g.floatingPosition.x,y:g.floatingPosition.y}}},[g]);(0,_react.useLayoutEffect)(()=>{if(!n)return;v();if(d==="bottomSheet"){const t=X.current;if(!t)return;const e=screenH();t.style.transform=`translateY(${e}px)`;t.style.opacity="0";D.current.push(runAnim(300,easeOutCubic,r=>{t.style.transform=`translateY(${(1-r)*e}px)`}),runAnim(200,easeInOut,r=>{t.style.opacity=String(r)}))}else{const t=k.current;if(!t)return;p.current={x:y.current.left,y:y.current.top};t.style.transform=`translate(${p.current.x}px, ${p.current.y}px)`;t.style.opacity="0";D.current.push(runAnim(200,easeInOut,e=>{t.style.opacity=String(e)}))}},[n,d,v]);const mt=(0,_react.useRef)(0);const Y=(0,_react.useRef)(0);const E=(0,_react.useRef)(null);const G=(0,_react.useCallback)(()=>{const t=Date.now();if(t-mt.current>500){Y.current=0}Y.current++;mt.current=t;if(E.current)clearTimeout(E.current);E.current=setTimeout(()=>{if(Y.current===2){nt()}else if(Y.current>=3){if(m)H()}Y.current=0},300)},[nt,m,H]);(0,_react.useEffect)(()=>{return()=>{if(E.current)clearTimeout(E.current)}},[]);const U=(0,_react.useRef)({active:false,resizing:false,startY:0,headerOffsetY:0,samples:[]});const $t=(0,_react.useCallback)(t=>{if(d!=="bottomSheet")return;if(t.button!==0||t.target.closest('button, a, input, textarea, select, [role="button"], [role="tab"], [role="switch"], [contenteditable="true"], [tabindex]'))return;const e=U.current;e.active=true;e.resizing=false;e.startY=t.clientY;const r=t.currentTarget.getBoundingClientRect();e.headerOffsetY=t.clientY-r.top;e.samples=[{t:performance.now(),y:t.clientY}];t.currentTarget.setPointerCapture(t.pointerId)},[d]);const At=(0,_react.useCallback)(t=>{const e=U.current;if(!e.active)return;const r=t.clientY-e.startY;if(!e.resizing&&Math.abs(r)>3){e.resizing=true;v();M(true)}if(!e.resizing)return;const s=t.clientY-e.headerOffsetY;let a=screenH()-s;a=Math.max(u,Math.min(a,pt));T.current=a;if(et.current)et.current.style.height=`${a}px`;const c=performance.now();e.samples.push({t:c,y:t.clientY});while(e.samples.length>2&&c-e.samples[0].t>100)e.samples.shift()},[u,pt,v]);const Pt=(0,_react.useCallback)(t=>{const e=U.current;if(!e.active)return;e.active=false;if(!e.resizing){G();return}M(false);const r=T.current;const s=t.clientY-e.startY;const a=e.samples[0];const c=e.samples[e.samples.length-1];const L=c&&a&&c.t>a.t?(c.y-a.y)/(c.t-a.t):0;const I=L>.8&&s>50||s>150&&r<=u;if(I){const x=X.current;v();if(x){const W=screenH();D.current.push(runAnim(200,easeInOut,$=>{x.style.opacity=String(1-$)}),runAnim(300,easeOutCubic,$=>{x.style.transform=`translateY(${$*W}px)`},()=>o()))}else{o()}return}tt(r)},[u,o,G,v]);const Bt=(0,_react.useCallback)(()=>{const t=U.current;if(!t.active)return;t.active=false;t.resizing=false;M(false)},[]);const q=(0,_react.useRef)({active:false,dragging:false,startX:0,startY:0,startPos:{x:0,y:0}});const Yt=(0,_react.useCallback)(t=>{if(d!=="floating"||A)return;if(t.button!==0||t.target.closest('button, a, input, textarea, select, [role="button"], [role="tab"], [role="switch"], [contenteditable="true"], [tabindex]'))return;const e=q.current;e.active=true;e.dragging=false;e.startX=t.clientX;e.startY=t.clientY;e.startPos={...p.current};t.currentTarget.setPointerCapture(t.pointerId)},[d,A]);const Et=(0,_react.useCallback)(t=>{const e=q.current;if(!e.active)return;const r=t.clientX-e.startX;const s=t.clientY-e.startY;if(!e.dragging&&Math.abs(r)+Math.abs(s)>5){e.dragging=true;P(true)}if(!e.dragging)return;const a=e.startPos.x+r;const c=e.startPos.y+s;p.current={x:a,y:c};if(k.current){k.current.style.transform=`translate(${a}px, ${c}px)`}},[]);const Lt=(0,_react.useCallback)(()=>{const t=q.current;if(!t.active)return;t.active=false;if(!t.dragging){G();return}P(false);const e=y.current;const r=clampRectToSafeArea({...e,left:p.current.x,top:p.current.y},b);const s=r.left;const a=r.top;p.current={x:s,y:a};if(k.current){k.current.style.transform=`translate(${s}px, ${a}px)`}B(c=>({...c,left:s,top:a}))},[b,G]);const Wt=(0,_react.useCallback)(()=>{const t=q.current;if(!t.active)return;t.active=false;t.dragging=false;P(false)},[]);const ot=(0,_react.useRef)({active:false,corner:"bottomRight",startX:0,startY:0,start:{width:0,height:0,top:0,left:0}});const _t=(0,_react.useCallback)(t=>e=>{if(d!=="floating")return;e.stopPropagation();const r=ot.current;r.active=true;r.corner=t;r.startX=e.clientX;r.startY=e.clientY;r.start={...y.current};M(true);e.currentTarget.setPointerCapture(e.pointerId)},[d]);const zt=(0,_react.useCallback)(t=>{const e=ot.current;if(!e.active)return;const r=t.clientX-e.startX;const s=t.clientY-e.startY;if(Math.abs(r)<.5&&Math.abs(s)<.5)return;const a=Math.max(0,b.left);const c=screenH()-Math.max(0,b.bottom);const L=screenW()-Math.max(0,b.right);const I=screenW()*.25;const x=e.start;const W=x.left+x.width;const $=x.top+x.height;let _=x.left;const N=x.top;let Ct=W;let rt=$;if(e.corner==="bottomLeft"){_=Math.max(a,Math.min(x.left+r,W-I));rt=Math.min(c,Math.max($+s,x.top+FLOATING_MIN_HEIGHT))}else{Ct=Math.min(L,Math.max(W+r,x.left+I));rt=Math.min(c,Math.max($+s,x.top+FLOATING_MIN_HEIGHT))}const Ft=Math.max(I,Ct-_);const Ot=Math.max(FLOATING_MIN_HEIGHT,rt-N);const kt={width:Ft,height:Ot,left:_,top:N};y.current=kt;p.current={x:_,y:N};B(kt);if(k.current){k.current.style.transform=`translate(${_}px, ${N}px)`}},[b.left,b.right,b.bottom]);const bt=(0,_react.useCallback)(()=>{const t=ot.current;if(!t.active)return;t.active=false;M(false);B(y.current)},[]);if(!n){return(0,_jsxRuntime.jsx)("div",{style:{display:"none"},"aria-hidden":true,children:i},"hidden")}const yt=f?.title||"Dev tool panel";const l=Z==="night";const vt=ut&&l?(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":true,children:(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{})}):null;const wt=(0,_jsxRuntime.jsxs)("div",{style:{flex:1,minHeight:0,position:"relative",display:"flex",flexDirection:"column",backgroundColor:l?"transparent":buoy.base,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",...h.content},children:[ut&&!l?(0,_jsxRuntime.jsx)(_ToolBackground.ToolBackground,{}):null,Rt?(0,_jsxRuntime.jsx)("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",paddingBottom:ct},children:i}):(0,_jsxRuntime.jsx)("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:ct},children:i}),lt?(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:buoy.base,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:lt}):null]});const jt=(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",top:4,right:4,zIndex:10},children:(0,_jsxRuntime.jsx)(WindowControls,{onClose:o,onMinimize:m?H:void 0,onToggleMode:nt,mode:d})});if(d==="floating"){const t=K||A;return(0,_jsxRuntime.jsxs)("div",{ref:k,role:"dialog","aria-label":yt,style:{position:"fixed",left:0,top:0,width:C.width,height:C.height,transform:`translate(${p.current.x}px, ${p.current.y}px)`,display:"flex",flexDirection:"column",backgroundColor:l?_nightTheme.night.color.bg:buoy.card,borderRadius:l?_nightTheme.night.radius.sheet:6,border:l?`1px solid ${_nightTheme.night.color.accent}55`:t?`2px solid ${buoy.primary}`:`1px solid ${buoy.border}`,boxShadow:l?`0 0 14px ${_nightTheme.night.color.accent}38`:t?`0 0 12px ${buoy.primary}7A`:`0 0 20px ${buoy.primary}4D`,...l?{overflow:"hidden"}:null,boxSizing:"border-box",zIndex:dt??1e3,...h.container},children:[vt,(0,_jsxRuntime.jsx)("div",{onPointerDown:Yt,onPointerMove:Et,onPointerUp:Lt,onPointerCancel:Wt,style:{borderTopLeftRadius:l?_nightTheme.night.radius.sheet:6,borderTopRightRadius:l?_nightTheme.night.radius.sheet:6,backgroundColor:l?"transparent":buoy.card,minHeight:56,border:l?"none":`1px solid ${buoy.border}`,boxSizing:"border-box",display:"flex",flexDirection:"column",justifyContent:"center",flexShrink:0,touchAction:"none",userSelect:"none",cursor:K?"grabbing":"grab",position:"relative"},children:(0,_jsxRuntime.jsx)(ModalHeaderContent,{header:f,isResizing:K||A,mode:d,onMinimize:m?H:void 0,variant:Z})}),jt,wt,["bottomLeft","bottomRight"].map(e=>(0,_jsxRuntime.jsx)("div",{onPointerDown:_t(e),onPointerMove:zt,onPointerUp:bt,onPointerCancel:bt,style:{position:"absolute",width:30,height:30,bottom:4,...e==="bottomLeft"?{left:4}:{right:4},zIndex:1e3,touchAction:"none",cursor:e==="bottomLeft"?"nesw-resize":"nwse-resize"},children:(0,_jsxRuntime.jsx)("div",{style:{width:20,height:20,borderRadius:10,boxSizing:"border-box",backgroundColor:t?`${gameUI.success}1A`:"transparent",border:t?`2px solid ${gameUI.success}`:"none",boxShadow:t?`0 0 8px ${gameUI.success}99`:"none"}})},e))]},"floating")}return(0,_jsxRuntime.jsx)("div",{style:{position:"fixed",inset:0,zIndex:dt??1e3,pointerEvents:"none"},children:(0,_jsxRuntime.jsx)("div",{ref:X,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto"},children:(0,_jsxRuntime.jsxs)("div",{ref:et,role:"dialog","aria-label":yt,style:{height:T.current,display:"flex",flexDirection:"column",backgroundColor:l?_nightTheme.night.color.bg:buoy.card,borderTopLeftRadius:l?_nightTheme.night.radius.sheet:6,borderTopRightRadius:l?_nightTheme.night.radius.sheet:6,border:l?`1px solid ${_nightTheme.night.color.accent}55`:`1px solid ${buoy.border}`,boxShadow:l?`0 -4px 10px ${_nightTheme.night.color.accent}38`:`0 -4px 12px ${buoy.primary}33`,...l?{overflow:"hidden"}:null,boxSizing:"border-box",position:"relative",...h.container},children:[vt,(0,_jsxRuntime.jsx)("div",{onPointerDown:$t,onPointerMove:At,onPointerUp:Pt,onPointerCancel:Bt,style:{borderTopLeftRadius:l?_nightTheme.night.radius.sheet:6,borderTopRightRadius:l?_nightTheme.night.radius.sheet:6,backgroundColor:l?"transparent":buoy.card,minHeight:56,border:l?"none":`1px solid ${buoy.border}`,boxSizing:"border-box",display:"flex",flexDirection:"column",justifyContent:"center",flexShrink:0,touchAction:"none",userSelect:"none",cursor:"ns-resize",position:"relative"},children:(0,_jsxRuntime.jsx)(ModalHeaderContent,{header:f,isResizing:A,mode:d,onMinimize:m?H:void 0,variant:Z})}),jt,Dt&&Tt&&!Ht&&(0,_jsxRuntime.jsx)(ModalHintBanner,{onAcknowledge:It}),wt]})})},"bottomSheet")};const JsModal=exports.JsModal=(0,_react.memo)(n=>{const o=(0,_licenseModule.getUseAccountAccess)()();if(o.status!=="admitted")return n.visible?(0,_jsxRuntime.jsx)(_AccountSetup.AccountSetup,{}):null;return(0,_jsxRuntime.jsx)(JsModalComponent,{...n})});