@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/JsModal.web.js

@@ -1,1648 +1 @@
-"use strict";
-
-import { getUseAccountAccess } from "./license/licenseModule.js";
-import { AccountSetup } from "./license/AccountSetup";
-/**
- * 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";
-// 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).
-import { ToolBackground } from "./ui/backgrounds/ToolBackground.js";
-// Pure token module (no react-native import) — safe on web.
-import { night } from "./ui/night/nightTheme.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,
-  variant = "default"
-}) {
-  const floating = mode === "floating";
-  const isNight = variant === "night";
-  return /*#__PURE__*/_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__*/_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 ? 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__*/_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,
-  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__*/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,
-        variant: variant
-      }), 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,
-      variant: variant
-    }), /*#__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,
-  minimizeRequest = 0,
-  minimizeTargetPosition,
-  initialModalState,
-  zIndex,
-  disableScrollWrapper = false,
-  background = true,
-  variant = "night"
-}) => {
-  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]);
-  const lastMinimizeRequest = useRef(minimizeRequest);
-  useEffect(() => {
-    if (lastMinimizeRequest.current === minimizeRequest) return;
-    lastMinimizeRequest.current = minimizeRequest;
-    handleMinimize();
-  }, [minimizeRequest, handleMinimize]);
-
-  // 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";
-  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__*/_jsx("div", {
-    style: {
-      position: "absolute",
-      inset: 0,
-      pointerEvents: "none"
-    },
-    "aria-hidden": true,
-    children: /*#__PURE__*/_jsx(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__*/_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__*/_jsx(ToolBackground, {}) : null, 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: isNight ? night.color.bg : buoy.card,
-        borderRadius: isNight ? night.radius.sheet : 6,
-        border: isNight ? `1px solid ${night.color.accent}55` : active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
-        boxShadow: isNight ? `0 0 14px ${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__*/_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 ? night.radius.sheet : 6,
-          borderTopRightRadius: isNight ? 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__*/_jsx(ModalHeaderContent, {
-          header: header,
-          isResizing: isDragging || isResizing,
-          mode: mode,
-          onMinimize: onMinimize ? handleMinimize : undefined,
-          variant: variant
-        })
-      }), 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).
-            // Night: #050505 sheet, top radius 16, hairline accent border.
-            height: currentHeightRef.current,
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: isNight ? night.color.bg : buoy.card,
-            borderTopLeftRadius: isNight ? night.radius.sheet : 6,
-            borderTopRightRadius: isNight ? night.radius.sheet : 6,
-            border: isNight ? `1px solid ${night.color.accent}55` : `1px solid ${buoy.border}`,
-            boxShadow: isNight ? `0 -4px 10px ${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__*/_jsx("div", {
-            onPointerDown: handleSheetPointerDown,
-            onPointerMove: handleSheetPointerMove,
-            onPointerUp: handleSheetPointerUp,
-            onPointerCancel: handleSheetPointerCancel,
-            style: {
-              // native styles.header; night: transparent glass, no border
-              borderTopLeftRadius: isNight ? night.radius.sheet : 6,
-              borderTopRightRadius: isNight ? 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__*/_jsx(ModalHeaderContent, {
-              header: header,
-              isResizing: isResizing,
-              mode: mode,
-              onMinimize: onMinimize ? handleMinimize : undefined,
-              variant: variant
-            })
-          }), windowControlsBlock, hintLoaded && showHint && !hintsDisabled && /*#__PURE__*/_jsx(ModalHintBanner, {
-            onAcknowledge: handleHintAcknowledge
-          }), contentBlock]
-        })
-      })
-    }, "bottomSheet")
-  );
-};
-
-// ============================================================================
-// EXPORT — memoized like native
-// ============================================================================
-export const JsModal = /*#__PURE__*/memo(props => {
-  const access = getUseAccountAccess()();
-  if (access.status !== "admitted") return props.visible ? /*#__PURE__*/_jsx(AccountSetup, {}) : null;
-  return /*#__PURE__*/_jsx(JsModalComponent, {
-    ...props
-  });
-});
+"use strict";import{getUseAccountAccess as ye}from"./license/licenseModule.js";import{AccountSetup as be}from"./license/AccountSetup";import{useState as A,useRef as b,useEffect as P,useLayoutEffect as we,useCallback as y,memo as bt,isValidElement as ve,cloneElement as Ce}from"react";import{persistentStorage as Ut}from"./utils/persistentStorage";import{ModalStorage as wt}from"./utils/modalStorage.js";import{devToolsStorageKeys as Nt}from"./storage/devToolsStorageKeys.js";import{useHintsDisabled as ke}from"./context/index.js";import{ToolBackground as Jt}from"./ui/backgrounds/ToolBackground.js";import{night as C}from"./ui/night/nightTheme.js";import{jsx as o,jsxs as k}from"react/jsx-runtime";const p={base:"#121212",card:"#1A1A1A",border:"#333333",textMuted:"#888888",primary:"#20C997"};const m={primary:"#F5F5F7",primaryLight:"#F5F5F7",secondary:"#A1A1A6",muted:"#8E8E93",success:"#34C759",info:"#00B8E6"};const Re=100;const Se=400;const Vt=500;const Q=80;const ct=()=>typeof window!=="undefined"?window.innerWidth:0;const Y=()=>typeof window!=="undefined"?window.innerHeight:0;const Zt=n=>1-Math.pow(1-n,3);const K=n=>n<.5?2*n*n:1-Math.pow(-2*n+2,2)/2;function j(n,r,s,h){let g=0;let f=false;const H=performance.now();const B=Dt=>{if(f)return;const lt=Math.min((Dt-H)/n,1);s(r(lt));if(lt<1){g=requestAnimationFrame(B)}else{h?.()}};g=requestAnimationFrame(B);return()=>{f=true;cancelAnimationFrame(g)}}function De(){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 r=n.getBoundingClientRect();document.body.removeChild(n);return{top:Math.max(0,r.top),left:Math.max(0,r.left),right:Math.max(0,window.innerWidth-r.right),bottom:Math.max(0,window.innerHeight-r.bottom)}}function vt(n,r){const s=Math.max(Q,window.innerWidth-r.left-r.right);const h=Math.max(Q,window.innerHeight-r.top-r.bottom);const g=Math.min(n.width,s);const f=Math.min(n.height,h);return{width:g,height:f,left:Math.max(r.left,Math.min(n.left,window.innerWidth-r.right-g)),top:Math.max(r.top,Math.min(n.top,window.innerHeight-r.bottom-f))}}const Me=({size:n=24,color:r="currentColor",strokeWidth:s=2})=>k("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[o("line",{x1:18,y1:6,x2:6,y2:18,stroke:r,strokeWidth:s,strokeLinecap:"round"}),o("line",{x1:6,y1:6,x2:18,y2:18,stroke:r,strokeWidth:s,strokeLinecap:"round"})]});const He=({size:n=24,color:r="currentColor",strokeWidth:s=2})=>o("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:o("line",{x1:5,y1:12,x2:19,y2:12,stroke:r,strokeWidth:s,strokeLinecap:"round"})});const Ie=({size:n=24,color:r="currentColor",strokeWidth:s=2})=>k("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[o("rect",{x:3,y:3,width:18,height:18,rx:2,stroke:r,strokeWidth:s}),o("rect",{x:3,y:14,width:18,height:7,fill:r})]});const $e=({size:n=24,color:r="currentColor",strokeWidth:s=2})=>k("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",children:[o("rect",{x:3,y:3,width:14,height:14,rx:2,stroke:r,strokeWidth:s}),o("line",{x1:7,y1:17,x2:7,y2:21,stroke:r,strokeWidth:s}),o("line",{x1:7,y1:21,x2:21,y2:21,stroke:r,strokeWidth:s}),o("line",{x1:21,y1:21,x2:21,y2:7,stroke:r,strokeWidth:s}),o("line",{x1:17,y1:7,x2:21,y2:7,stroke:r,strokeWidth:s})]});const Ct={close:"#FF5F57",minimize:"#FEBC2E",toggleMode:"#28C840"};const kt=24;const Te=2;const Rt=8;const St=n=>({width:kt,height:kt,borderRadius:kt/2,display:"flex",alignItems:"center",justifyContent:"center",background:`radial-gradient(circle, ${n} 6px, transparent 6px)`,border:"none",padding:0,cursor:"pointer",flexShrink:0});function Ae({onClose:n,onMinimize:r,onToggleMode:s,mode:h}){const g=h==="floating"?Ie:$e;const f=h==="floating"?"Dock to bottom sheet":"Make floating window";return k("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:Te},children:[r&&o("button",{type:"button",onClick:r,style:St(Ct.minimize),"aria-label":"Minimize modal",children:o(He,{size:Rt,color:"#7A5A00",strokeWidth:1.5})}),s&&o("button",{type:"button",onClick:s,style:St(Ct.toggleMode),"aria-label":f,children:o(g,{size:Rt,color:"#004A1A",strokeWidth:1.5})}),o("button",{type:"button",onClick:n,style:St(Ct.close),"aria-label":"Close modal",children:o(Me,{size:Rt,color:"#4A0000",strokeWidth:1.5})})]})}const qt=bt(function n({isResizing:r,mode:s,hasCustomContent:h=false,variant:g="default"}){const f=s==="floating";const H=g==="night";return k("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",position:"relative",justifyContent:h?"center":void 0,minHeight:h?32:void 0,paddingTop:h?0:8,paddingBottom:h?0:8,backgroundColor:"transparent"},children:[o("div",{style:{width:H?36:r?40:f?50:40,height:H?5:f?5:3,backgroundColor:H?C.color.placeholder:r?p.primary:f?p.textMuted:p.primary,borderRadius:H?2.5:2,boxShadow:H?"none":`0 0 4px ${p.primary}99`}}),r&&s==="bottomSheet"&&o("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(B=>o("div",{style:{width:12,height:1,backgroundColor:m.success,opacity:.6}},B))})]})});const Pe=bt(function n({onAcknowledge:r}){return o("div",{style:{backgroundColor:`${m.info}15`,borderLeft:`3px solid ${m.info}`,borderRadius:8,margin:"8px 12px 4px",overflow:"hidden",boxShadow:`0 0 8px ${m.info}4D`,flexShrink:0},children:k("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",padding:12,gap:12},children:[k("div",{style:{width:32,height:32,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:[o("div",{style:{position:"absolute",width:20,height:20,borderRadius:10,border:`2px solid ${m.info}`,opacity:.6,transform:"scale(0.8)",boxSizing:"border-box"}}),o("div",{style:{position:"absolute",width:20,height:20,borderRadius:10,border:`2px solid ${m.info}`,boxSizing:"border-box"}})]}),k("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:2},children:[o("span",{style:{fontSize:13,fontWeight:600,color:m.info,letterSpacing:.3},children:"\u{1F4A1} Pro Tip"}),o("span",{style:{fontSize:12,color:m.primaryLight,lineHeight:"16px"},children:"Double-tap the header to transform this into a floating modal"})]}),o("button",{type:"button",onClick:r,style:{backgroundColor:`${m.info}30`,padding:"6px 12px",borderRadius:6,border:`1px solid ${m.info}50`,fontSize:12,fontWeight:600,color:m.info,cursor:"pointer",fontFamily:"inherit",flexShrink:0},children:"Got it!"})]})})});function Qt({header:n,isResizing:r,mode:s,onMinimize:h,variant:g="default"}){if(n?.customContent){let f=n.customContent;if(ve(n.customContent)&&h){f=Ce(n.customContent,{onMinimize:h})}return k("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",minWidth:0},children:[o(qt,{isResizing:r,mode:s,hasCustomContent:true,variant:g}),f]})}return k("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative",minWidth:0},children:[o(qt,{isResizing:r,mode:s,variant:g}),k("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[n?.title&&o("span",{style:{fontSize:16,fontWeight:600,color:m.primary},children:n.title}),n?.subtitle&&o("span",{style:{fontSize:12,color:m.secondary,paddingTop:4},children:n.subtitle})]}),o("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:o("span",{style:{fontSize:10,color:m.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}const Ye=({visible:n,onClose:r,children:s,header:h,styles:g={},minHeight:f=Re,maxHeight:H,initialHeight:B=Se,animatedHeight:Dt,benchMotion:lt,initialMode:Kt="bottomSheet",onModeChange:Mt,persistenceKey:I,enablePersistence:L=true,initialFloatingPosition:Ht,footer:It,footerHeight:$t=0,onBack:Be,onMinimize:R,minimizeRequest:tt=0,minimizeTargetPosition:dt,initialModalState:x,zIndex:Tt,disableScrollWrapper:te=false,background:At=true,variant:ut="night"})=>{const[S]=A(De);const[Pt,Yt]=A(!L);const[u,ft]=A(Kt);const et=b(Mt);et.current=Mt;const[O,W]=A(false);const[ht,G]=A(false);const[ee,pt]=A(B);const[$,U]=A(()=>vt({width:ct(),height:Vt,top:Ht?.y??(Y()-Vt)/2,left:Ht?.x??0},S));const[ne,nt]=A(false);const[oe,Bt]=A(false);const re=ke();const z=b(B);const D=b($);const w=b({x:$.left,y:$.top});const ot=b(null);const gt=b(null);const T=b(null);const E=b([]);const M=y(()=>{E.current.forEach(t=>t());E.current=[]},[]);P(()=>{D.current=$},[$]);P(()=>M,[M]);const Lt=H||Y()-S.top;P(()=>{if(!L||!I){Yt(true);return}let t=true;const e=async()=>{const i=await wt.load(I);if(t&&i){if(i.mode){ft(i.mode);et.current?.(i.mode)}if(i.panelHeight){pt(i.panelHeight);z.current=i.panelHeight}if(i.dimensions){const a=vt(i.dimensions,S);U(a);w.current={x:a.left,y:a.top}}}if(t)Yt(true)};e();return()=>{t=false}},[I,L]);P(()=>{if(!L||!I||!Pt)return;const t=setTimeout(()=>{wt.save(I,{mode:u,panelHeight:z.current,dimensions:$,isVisible:n})},500);return()=>clearTimeout(t)},[u,ee,$,n,I,L,Pt]);P(()=>{let t=true;const e=async()=>{try{const i=Nt.modal.hintAcknowledged();const a=await Ut.getItem(i);if(t){nt(a!=="true");Bt(true)}}catch{if(t){nt(true);Bt(true)}}};e();return()=>{t=false}},[]);const ie=y(async()=>{try{const t=Nt.modal.hintAcknowledged();await Ut.setItem(t,"true");nt(false)}catch{nt(false)}},[]);const mt=y(()=>{G(false);W(false);const t=u==="bottomSheet"?"floating":"bottomSheet";ft(t);et.current?.(t)},[u]);P(()=>{G(false);W(false)},[u]);const F=y(()=>{if(!R)return;const t={mode:u,panelHeight:z.current,floatingPosition:{x:D.current.left,y:D.current.top},floatingDimensions:{width:D.current.width,height:D.current.height}};if(L&&I)void wt.saveMinimized(I,t);const e=dt?.x??ct()-50;const i=dt?.y??Y()-150;M();if(u==="bottomSheet"){const a=ot.current;if(!a){R(t);return}const c=Y();E.current.push(j(300,K,d=>{a.style.opacity=String(1-d);a.style.transform=`translateY(${d*c}px)`},()=>R(t)))}else{const a=T.current;if(!a){R(t);return}const c={...w.current};E.current.push(j(300,K,d=>{a.style.opacity=String(1-d);const V=c.x+(e-c.x)*d;const _=c.y+(i-c.y)*d;a.style.transform=`translate(${V}px, ${_}px)`},()=>R(t)))}},[u,R,dt,M,L,I]);const Wt=b(tt);P(()=>{if(Wt.current===tt)return;Wt.current=tt;F()},[tt,F]);P(()=>{if(!x)return;if(x.mode){ft(x.mode);et.current?.(x.mode)}if(x.panelHeight){pt(x.panelHeight);z.current=x.panelHeight}if(x.floatingDimensions&&x.floatingPosition){const t={width:x.floatingDimensions.width,height:x.floatingDimensions.height,top:x.floatingPosition.y,left:x.floatingPosition.x};U(t);w.current={x:x.floatingPosition.x,y:x.floatingPosition.y}}},[x]);we(()=>{if(!n)return;M();if(u==="bottomSheet"){const t=ot.current;if(!t)return;const e=Y();t.style.transform=`translateY(${e}px)`;t.style.opacity="0";E.current.push(j(300,Zt,i=>{t.style.transform=`translateY(${(1-i)*e}px)`}),j(200,K,i=>{t.style.opacity=String(i)}))}else{const t=T.current;if(!t)return;w.current={x:D.current.left,y:D.current.top};t.style.transform=`translate(${w.current.x}px, ${w.current.y}px)`;t.style.opacity="0";E.current.push(j(200,K,e=>{t.style.opacity=String(e)}))}},[n,u,M]);const zt=b(0);const N=b(0);const J=b(null);const rt=y(()=>{const t=Date.now();if(t-zt.current>500){N.current=0}N.current++;zt.current=t;if(J.current)clearTimeout(J.current);J.current=setTimeout(()=>{if(N.current===2){mt()}else if(N.current>=3){if(R)F()}N.current=0},300)},[mt,R,F]);P(()=>{return()=>{if(J.current)clearTimeout(J.current)}},[]);const it=b({active:false,resizing:false,startY:0,headerOffsetY:0,samples:[]});const se=y(t=>{if(u!=="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=it.current;e.active=true;e.resizing=false;e.startY=t.clientY;const i=t.currentTarget.getBoundingClientRect();e.headerOffsetY=t.clientY-i.top;e.samples=[{t:performance.now(),y:t.clientY}];t.currentTarget.setPointerCapture(t.pointerId)},[u]);const ae=y(t=>{const e=it.current;if(!e.active)return;const i=t.clientY-e.startY;if(!e.resizing&&Math.abs(i)>3){e.resizing=true;M();W(true)}if(!e.resizing)return;const a=t.clientY-e.headerOffsetY;let c=Y()-a;c=Math.max(f,Math.min(c,Lt));z.current=c;if(gt.current)gt.current.style.height=`${c}px`;const d=performance.now();e.samples.push({t:d,y:t.clientY});while(e.samples.length>2&&d-e.samples[0].t>100)e.samples.shift()},[f,Lt,M]);const ce=y(t=>{const e=it.current;if(!e.active)return;e.active=false;if(!e.resizing){rt();return}W(false);const i=z.current;const a=t.clientY-e.startY;const c=e.samples[0];const d=e.samples[e.samples.length-1];const V=d&&c&&d.t>c.t?(d.y-c.y)/(d.t-c.t):0;const _=V>.8&&a>50||a>150&&i<=f;if(_){const v=ot.current;M();if(v){const Z=Y();E.current.push(j(200,K,X=>{v.style.opacity=String(1-X)}),j(300,Zt,X=>{v.style.transform=`translateY(${X*Z}px)`},()=>r()))}else{r()}return}pt(i)},[f,r,rt,M]);const le=y(()=>{const t=it.current;if(!t.active)return;t.active=false;t.resizing=false;W(false)},[]);const st=b({active:false,dragging:false,startX:0,startY:0,startPos:{x:0,y:0}});const de=y(t=>{if(u!=="floating"||O)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=st.current;e.active=true;e.dragging=false;e.startX=t.clientX;e.startY=t.clientY;e.startPos={...w.current};t.currentTarget.setPointerCapture(t.pointerId)},[u,O]);const ue=y(t=>{const e=st.current;if(!e.active)return;const i=t.clientX-e.startX;const a=t.clientY-e.startY;if(!e.dragging&&Math.abs(i)+Math.abs(a)>5){e.dragging=true;G(true)}if(!e.dragging)return;const c=e.startPos.x+i;const d=e.startPos.y+a;w.current={x:c,y:d};if(T.current){T.current.style.transform=`translate(${c}px, ${d}px)`}},[]);const fe=y(()=>{const t=st.current;if(!t.active)return;t.active=false;if(!t.dragging){rt();return}G(false);const e=D.current;const i=vt({...e,left:w.current.x,top:w.current.y},S);const a=i.left;const c=i.top;w.current={x:a,y:c};if(T.current){T.current.style.transform=`translate(${a}px, ${c}px)`}U(d=>({...d,left:a,top:c}))},[S,rt]);const he=y(()=>{const t=st.current;if(!t.active)return;t.active=false;t.dragging=false;G(false)},[]);const xt=b({active:false,corner:"bottomRight",startX:0,startY:0,start:{width:0,height:0,top:0,left:0}});const pe=y(t=>e=>{if(u!=="floating")return;e.stopPropagation();const i=xt.current;i.active=true;i.corner=t;i.startX=e.clientX;i.startY=e.clientY;i.start={...D.current};W(true);e.currentTarget.setPointerCapture(e.pointerId)},[u]);const ge=y(t=>{const e=xt.current;if(!e.active)return;const i=t.clientX-e.startX;const a=t.clientY-e.startY;if(Math.abs(i)<.5&&Math.abs(a)<.5)return;const c=Math.max(0,S.left);const d=Y()-Math.max(0,S.bottom);const V=ct()-Math.max(0,S.right);const _=ct()*.25;const v=e.start;const Z=v.left+v.width;const X=v.top+v.height;let q=v.left;const at=v.top;let Ot=Z;let yt=X;if(e.corner==="bottomLeft"){q=Math.max(c,Math.min(v.left+i,Z-_));yt=Math.min(d,Math.max(X+a,v.top+Q))}else{Ot=Math.min(V,Math.max(Z+i,v.left+_));yt=Math.min(d,Math.max(X+a,v.top+Q))}const me=Math.max(_,Ot-q);const xe=Math.max(Q,yt-at);const Gt={width:me,height:xe,left:q,top:at};D.current=Gt;w.current={x:q,y:at};U(Gt);if(T.current){T.current.style.transform=`translate(${q}px, ${at}px)`}},[S.left,S.right,S.bottom]);const Et=y(()=>{const t=xt.current;if(!t.active)return;t.active=false;W(false);U(D.current)},[]);if(!n){return o("div",{style:{display:"none"},"aria-hidden":true,children:s},"hidden")}const Ft=h?.title||"Dev tool panel";const l=ut==="night";const _t=At&&l?o("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":true,children:o(Jt,{})}):null;const Xt=k("div",{style:{flex:1,minHeight:0,position:"relative",display:"flex",flexDirection:"column",backgroundColor:l?"transparent":p.base,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",...g.content},children:[At&&!l?o(Jt,{}):null,te?o("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",paddingBottom:$t},children:s}):o("div",{style:{flex:1,minHeight:0,overflowY:"auto",paddingBottom:$t},children:s}),It?o("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:p.base,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:It}):null]});const jt=o("div",{style:{position:"absolute",top:4,right:4,zIndex:10},children:o(Ae,{onClose:r,onMinimize:R?F:void 0,onToggleMode:mt,mode:u})});if(u==="floating"){const t=ht||O;return k("div",{ref:T,role:"dialog","aria-label":Ft,style:{position:"fixed",left:0,top:0,width:$.width,height:$.height,transform:`translate(${w.current.x}px, ${w.current.y}px)`,display:"flex",flexDirection:"column",backgroundColor:l?C.color.bg:p.card,borderRadius:l?C.radius.sheet:6,border:l?`1px solid ${C.color.accent}55`:t?`2px solid ${p.primary}`:`1px solid ${p.border}`,boxShadow:l?`0 0 14px ${C.color.accent}38`:t?`0 0 12px ${p.primary}7A`:`0 0 20px ${p.primary}4D`,...l?{overflow:"hidden"}:null,boxSizing:"border-box",zIndex:Tt??1e3,...g.container},children:[_t,o("div",{onPointerDown:de,onPointerMove:ue,onPointerUp:fe,onPointerCancel:he,style:{borderTopLeftRadius:l?C.radius.sheet:6,borderTopRightRadius:l?C.radius.sheet:6,backgroundColor:l?"transparent":p.card,minHeight:56,border:l?"none":`1px solid ${p.border}`,boxSizing:"border-box",display:"flex",flexDirection:"column",justifyContent:"center",flexShrink:0,touchAction:"none",userSelect:"none",cursor:ht?"grabbing":"grab",position:"relative"},children:o(Qt,{header:h,isResizing:ht||O,mode:u,onMinimize:R?F:void 0,variant:ut})}),jt,Xt,["bottomLeft","bottomRight"].map(e=>o("div",{onPointerDown:pe(e),onPointerMove:ge,onPointerUp:Et,onPointerCancel:Et,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:o("div",{style:{width:20,height:20,borderRadius:10,boxSizing:"border-box",backgroundColor:t?`${m.success}1A`:"transparent",border:t?`2px solid ${m.success}`:"none",boxShadow:t?`0 0 8px ${m.success}99`:"none"}})},e))]},"floating")}return o("div",{style:{position:"fixed",inset:0,zIndex:Tt??1e3,pointerEvents:"none"},children:o("div",{ref:ot,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto"},children:k("div",{ref:gt,role:"dialog","aria-label":Ft,style:{height:z.current,display:"flex",flexDirection:"column",backgroundColor:l?C.color.bg:p.card,borderTopLeftRadius:l?C.radius.sheet:6,borderTopRightRadius:l?C.radius.sheet:6,border:l?`1px solid ${C.color.accent}55`:`1px solid ${p.border}`,boxShadow:l?`0 -4px 10px ${C.color.accent}38`:`0 -4px 12px ${p.primary}33`,...l?{overflow:"hidden"}:null,boxSizing:"border-box",position:"relative",...g.container},children:[_t,o("div",{onPointerDown:se,onPointerMove:ae,onPointerUp:ce,onPointerCancel:le,style:{borderTopLeftRadius:l?C.radius.sheet:6,borderTopRightRadius:l?C.radius.sheet:6,backgroundColor:l?"transparent":p.card,minHeight:56,border:l?"none":`1px solid ${p.border}`,boxSizing:"border-box",display:"flex",flexDirection:"column",justifyContent:"center",flexShrink:0,touchAction:"none",userSelect:"none",cursor:"ns-resize",position:"relative"},children:o(Qt,{header:h,isResizing:O,mode:u,onMinimize:R?F:void 0,variant:ut})}),jt,oe&&ne&&!re&&o(Pe,{onAcknowledge:ie}),Xt]})})},"bottomSheet")};export const JsModal=bt(n=>{const r=ye()();if(r.status!=="admitted")return n.visible?o(be,{}):null;return o(Ye,{...n})});