@buoy-gg/shared-ui 7.0.15 → 7.0.17

package/lib/module/JsModal.web.js

@@ -0,0 +1,1586 @@
+"use strict";
+
+/**
+ * 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)
+ */
+
+import { useState, useRef, useEffect, useLayoutEffect, useCallback, memo, isValidElement, cloneElement } from "react";
+import { devToolsStorageKeys } from "./storage/devToolsStorageKeys.js";
+import { useHintsDisabled } from "./context/index.js";
+
+// ============================================================================
+// PALETTE — inlined from shared-ui with provenance (RN-only modules on web)
+// ============================================================================
+
+/** buoyColors from ui/gameUI/constants/gameUIColors.ts — inlined verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("line", {
+    x1: 18,
+    y1: 6,
+    x2: 6,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth,
+    strokeLinecap: "round"
+  }), /*#__PURE__*/_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__*/_jsx("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/_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__*/_jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: 3,
+    y: 3,
+    width: 18,
+    height: 18,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_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__*/_jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: 3,
+    y: 3,
+    width: 14,
+    height: 14,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx("line", {
+    x1: 7,
+    y1: 17,
+    x2: 7,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx("line", {
+    x1: 7,
+    y1: 21,
+    x2: 21,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx("line", {
+    x1: 21,
+    y1: 21,
+    x2: 21,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_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__*/_jsxs("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: WC_BUTTON_SPACING
+    },
+    children: [onMinimize && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: onMinimize,
+      style: wcDotStyle(WC_COLORS.minimize),
+      "aria-label": "Minimize modal",
+      children: /*#__PURE__*/_jsx(MinusIcon, {
+        size: WC_ICON_SIZE,
+        color: "#7A5A00",
+        strokeWidth: 1.5
+      })
+    }), onToggleMode && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: onToggleMode,
+      style: wcDotStyle(WC_COLORS.toggleMode),
+      "aria-label": toggleModeLabel,
+      children: /*#__PURE__*/_jsx(ToggleModeIcon, {
+        size: WC_ICON_SIZE,
+        color: "#004A1A",
+        strokeWidth: 1.5
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: onClose,
+      style: wcDotStyle(WC_COLORS.close),
+      "aria-label": "Close modal",
+      children: /*#__PURE__*/_jsx(XIcon, {
+        size: WC_ICON_SIZE,
+        color: "#4A0000",
+        strokeWidth: 1.5
+      })
+    })]
+  });
+}
+
+// ============================================================================
+// DRAG INDICATOR — DOM twin of native DragIndicator
+// ============================================================================
+const DragIndicator = /*#__PURE__*/memo(function DragIndicator({
+  isResizing,
+  mode,
+  hasCustomContent = false
+}) {
+  const floating = mode === "floating";
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      position: "relative",
+      // native dragIndicatorContainer: paddingVertical 8;
+      // custom variant: paddingTop 6, paddingBottom 2
+      paddingTop: hasCustomContent ? 6 : 8,
+      paddingBottom: hasCustomContent ? 2 : 8,
+      backgroundColor: "transparent"
+    },
+    children: [/*#__PURE__*/_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
+        width: isResizing ? 40 : floating ? 50 : 40,
+        height: floating ? 5 : 3,
+        backgroundColor: isResizing ? buoy.primary : floating ? buoy.textMuted : buoy.primary,
+        borderRadius: 2,
+        boxShadow: `0 0 4px ${buoy.primary}99`
+      }
+    }), isResizing && mode === "bottomSheet" && /*#__PURE__*/_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__*/_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__*/memo(function ModalHintBanner({
+  onAcknowledge
+}) {
+  return /*#__PURE__*/_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__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 12,
+        // native inner: padding 12, gap 12
+        gap: 12
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          width: 32,
+          height: 32,
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: [/*#__PURE__*/_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__*/_jsx("div", {
+          style: {
+            position: "absolute",
+            width: 20,
+            height: 20,
+            borderRadius: 10,
+            border: `2px solid ${gameUI.info}`,
+            boxSizing: "border-box"
+          }
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: [/*#__PURE__*/_jsx("span", {
+          style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: gameUI.info,
+            letterSpacing: 0.3
+          },
+          children: "\uD83D\uDCA1 Pro Tip"
+        }), /*#__PURE__*/_jsx("span", {
+          style: {
+            fontSize: 12,
+            color: gameUI.primaryLight,
+            lineHeight: "16px"
+          },
+          children: "Double-tap the header to transform this into a floating modal"
+        })]
+      }), /*#__PURE__*/_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
+}) {
+  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__*/isValidElement(header.customContent) && onMinimize) {
+      customContent = /*#__PURE__*/cloneElement(header.customContent, {
+        onMinimize
+      });
+    }
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/_jsx(DragIndicator, {
+        isResizing: isResizing,
+        mode: mode,
+        hasCustomContent: true
+      }), customContent]
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      position: "relative",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/_jsx(DragIndicator, {
+      isResizing: isResizing,
+      mode: mode
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        // native headerContent: paddingHorizontal 16, alignItems center
+        padding: "0 16px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      children: [header?.title && /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 16,
+          // native headerTitle
+          fontWeight: 600,
+          color: gameUI.primary
+        },
+        children: header.title
+      }), header?.subtitle && /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 12,
+          // native headerSubtitle
+          color: gameUI.secondary,
+          paddingTop: 4
+        },
+        children: header.subtitle
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none"
+      },
+      children: /*#__PURE__*/_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,
+  minimizeTargetPosition,
+  initialModalState,
+  zIndex,
+  disableScrollWrapper = false
+}) => {
+  const [insets] = useState(readSafeAreaInsets);
+  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(() => 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] = useState(false);
+  const [hintLoaded, setHintLoaded] = useState(false);
+  const hintsDisabled = useHintsDisabled();
+
+  // -- imperative value refs (native Animated.Value stand-ins) --------------
+  const currentHeightRef = useRef(initialHeight);
+  const currentDimensionsRef = useRef(dimensions);
+  const posRef = useRef({
+    x: dimensions.left,
+    y: dimensions.top
+  });
+
+  // -- DOM refs -------------------------------------------------------------
+  const sheetWrapperRef = useRef(null);
+  const sheetRef = useRef(null);
+  const floatRef = useRef(null);
+
+  // Active rAF animations (cancelled on new visibility runs / unmount).
+  const animCancelsRef = useRef([]);
+  const cancelAnims = useCallback(() => {
+    animCancelsRef.current.forEach(c => c());
+    animCancelsRef.current = [];
+  }, []);
+  useEffect(() => {
+    currentDimensionsRef.current = dimensions;
+  }, [dimensions]);
+  useEffect(() => cancelAnims, [cancelAnims]);
+  const effectiveMaxHeight = maxHeight || screenH() - insets.top;
+
+  // ==========================================================================
+  // PERSISTENCE — exact native key usage, shape and 500ms debounce
+  // ==========================================================================
+  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]);
+  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
+  // ==========================================================================
+  useEffect(() => {
+    let mounted = true;
+    const loadHintStatus = async () => {
+      try {
+        const hintKey = 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 = useCallback(async () => {
+    try {
+      const hintKey = devToolsStorageKeys.modal.hintAcknowledged();
+      await webPersistentStorage.setItem(hintKey, "true");
+      setShowHint(false);
+    } catch {
+      setShowHint(false);
+    }
+  }, []);
+
+  // ==========================================================================
+  // MODE TOGGLE + MINIMIZE
+  // ==========================================================================
+  const toggleMode = 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).
+  useEffect(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, [mode]);
+  const handleMinimize = 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]);
+
+  // Apply initial modal state when restoring from minimized (native parity).
+  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)
+  // ==========================================================================
+  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 = useRef(0);
+  const tapCountRef = useRef(0);
+  const tapTimeoutRef = useRef(null);
+  const registerTap = 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]);
+  useEffect(() => {
+    return () => {
+      if (tapTimeoutRef.current) clearTimeout(tapTimeoutRef.current);
+    };
+  }, []);
+
+  // ==========================================================================
+  // GESTURE: bottom-sheet header drag-resize (native bottomSheetPanResponder)
+  // ==========================================================================
+  const sheetGestureRef = useRef({
+    active: false,
+    resizing: false,
+    startY: 0,
+    headerOffsetY: 0,
+    samples: []
+  });
+  const handleSheetPointerDown = 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 = 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 = 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 = 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 = useRef({
+    active: false,
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    startPos: {
+      x: 0,
+      y: 0
+    }
+  });
+  const handleFloatPointerDown = 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 = 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 = 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 = 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 = useRef({
+    active: false,
+    corner: "bottomRight",
+    startX: 0,
+    startY: 0,
+    start: {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0
+    }
+  });
+  const handleResizePointerDown = 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 = 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 = 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__*/_jsx("div", {
+      style: {
+        display: "none"
+      },
+      "aria-hidden": true,
+      children: children
+    }, "hidden");
+  }
+  const dialogLabel = header?.title || "Dev tool panel";
+
+  // Content block shared by both modes — native styles.content:
+  // flex 1, bg base #121212, borderBottomRadius 16, overflow hidden.
+  const contentBlock = /*#__PURE__*/_jsxs("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      backgroundColor: buoy.base,
+      borderBottomLeftRadius: 16,
+      borderBottomRightRadius: 16,
+      overflow: "hidden",
+      ...customStyles.content
+    },
+    children: [disableScrollWrapper ?
+    /*#__PURE__*/
+    // children manage their own scrolling (native: plain flex View)
+    _jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        paddingBottom: footerHeight
+      },
+      children: children
+    }) :
+    /*#__PURE__*/
+    // native: ScrollView with flexGrow 1 + paddingBottom footerHeight
+    _jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        paddingBottom: footerHeight
+      },
+      children: children
+    }), footer ? /*#__PURE__*/_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
+  _jsx("div", {
+    style: {
+      position: "absolute",
+      top: 4,
+      right: 4,
+      zIndex: 10
+    },
+    children: /*#__PURE__*/_jsx(WindowControls, {
+      onClose: onClose,
+      onMinimize: onMinimize ? handleMinimize : undefined,
+      onToggleMode: toggleMode,
+      mode: mode
+    })
+  });
+
+  // ----- FLOATING MODE ------------------------------------------------------
+  if (mode === "floating") {
+    const active = isDragging || isResizing;
+    return /*#__PURE__*/_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: buoy.card,
+        borderRadius: 6,
+        border: active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
+        boxShadow: active ? `0 0 12px ${buoy.primary}7A` : `0 0 20px ${buoy.primary}4D`,
+        boxSizing: "border-box",
+        // RN borders draw inside the rect
+        zIndex: zIndex ?? 1000,
+        ...customStyles.container
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        onPointerDown: handleFloatPointerDown,
+        onPointerMove: handleFloatPointerMove,
+        onPointerUp: handleFloatPointerUp,
+        onPointerCancel: handleFloatPointerCancel,
+        style: {
+          // native styles.header (+ floatingHeader top radius 6)
+          borderTopLeftRadius: 6,
+          borderTopRightRadius: 6,
+          backgroundColor: buoy.card,
+          minHeight: 56,
+          border: `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
+        },
+        children: /*#__PURE__*/_jsx(ModalHeaderContent, {
+          header: header,
+          isResizing: isDragging || isResizing,
+          mode: mode,
+          onMinimize: onMinimize ? handleMinimize : undefined
+        })
+      }), windowControlsBlock, contentBlock, ["bottomLeft", "bottomRight"].map(corner => /*#__PURE__*/_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__*/_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
+    _jsx("div", {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: zIndex ?? 1000,
+        pointerEvents: "none"
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        ref: sheetWrapperRef,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          pointerEvents: "auto"
+        },
+        children: /*#__PURE__*/_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)
+            height: currentHeightRef.current,
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: buoy.card,
+            borderTopLeftRadius: 6,
+            borderTopRightRadius: 6,
+            border: `1px solid ${buoy.border}`,
+            boxShadow: `0 -4px 12px ${buoy.primary}33`,
+            boxSizing: "border-box",
+            position: "relative",
+            ...customStyles.container
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            onPointerDown: handleSheetPointerDown,
+            onPointerMove: handleSheetPointerMove,
+            onPointerUp: handleSheetPointerUp,
+            onPointerCancel: handleSheetPointerCancel,
+            style: {
+              // native styles.header
+              borderTopLeftRadius: 6,
+              borderTopRightRadius: 6,
+              backgroundColor: buoy.card,
+              minHeight: 56,
+              border: `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
+            },
+            children: /*#__PURE__*/_jsx(ModalHeaderContent, {
+              header: header,
+              isResizing: isResizing,
+              mode: mode,
+              onMinimize: onMinimize ? handleMinimize : undefined
+            })
+          }), windowControlsBlock, hintLoaded && showHint && !hintsDisabled && /*#__PURE__*/_jsx(ModalHintBanner, {
+            onAcknowledge: handleHintAcknowledge
+          }), contentBlock]
+        })
+      })
+    }, "bottomSheet")
+  );
+};
+
+// ============================================================================
+// EXPORT — memoized like native
+// ============================================================================
+export const JsModal = /*#__PURE__*/memo(JsModalComponent);