@buoy-gg/core 7.0.40 → 7.0.42

package/lib/commonjs/floatingMenu/FloatingDevTools.web.js

@@ -1,401 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FloatingDevTools = FloatingDevTools;
-var _floating = require("@buoy-gg/shared-ui/floating");
-var _license = require("@buoy-gg/license");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _react = require("react");
-var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
-var _autoDiscoverPresetsWeb = require("../utils/autoDiscoverPresets.web.js");
-var _floatingToolsWeb = require("./floatingTools.web.js");
-var _DialDevToolsWeb = require("./dial/DialDevTools.web.js");
-var _dialUsageStore = require("./dial/dialUsageStore.js");
-var _OnboardingTooltipWeb = require("./dial/OnboardingTooltip.web.js");
-var _DevToolsSettingsModalWeb = require("./DevToolsSettingsModal.web.js");
-var _AppHostWeb = require("./AppHost.web.js");
-var _MinimizedToolsStackWeb = require("./MinimizedToolsStack.web.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * FloatingDevTools - Unified dev tools component for React DOM Web.
- *
- * Matches the mobile FloatingDevTools API exactly:
- * - Self-contained (doesn't wrap your app)
- * - Auto-discovers installed tool packages
- * - Manages dial menu and settings modal state internally
- *
- * Usage (same as mobile):
- * ```tsx
- * <>
- *   <YourApp />
- *   <FloatingDevTools environment="qa" userRole="admin" />
- * </>
- * ```
- *
- * @platform React DOM Web (Vite, CRA, Next.js, Electron)
- */
-
-// native FloatingMenu.tsx TOOLTIP_SHOWN_KEY
-const MENU_TOOLTIP_KEY = '@react_buoy_floating_menu_tooltip_shown';
-
-// Same localStorage adapter the settings modal uses — without it, useSettings
-// never loads persisted settings and this instance sits on defaults across
-// launches (live changes still arrive via the settings event bus).
-const webSettingsStorage = {
-  getItem: key => localStorage.getItem(key),
-  setItem: (key, value) => localStorage.setItem(key, value)
-};
-
-// =============================
-// Types
-// =============================
-
-// =============================
-// MenuLauncherIcon — native FloatingMenu.tsx:446-478: 3×3 dot grid rendered
-// when no userRole is set, so the dial/settings stay reachable.
-// =============================
-function MenuLauncherIcon({
-  size = 14,
-  color = '#20C997'
-}) {
-  const dot = Math.max(2, size / 4);
-  const gap = Math.max(1, size / 16);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      display: 'grid',
-      gridTemplateColumns: `repeat(3, ${dot}px)`,
-      gap,
-      width: size,
-      height: size,
-      alignContent: 'center',
-      justifyContent: 'center'
-    },
-    children: Array.from({
-      length: 9
-    }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        width: dot,
-        height: dot,
-        borderRadius: dot / 2,
-        backgroundColor: color
-      }
-    }, i))
-  });
-}
-
-// =============================
-// Main Component
-// =============================
-
-function AdmittedFloatingDevTools(props) {
-  // The tool host wraps everything so dial presses can open tool components
-  // into the AppOverlay (web twin of the native AppHostProvider/AppOverlay).
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppHostProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingDevToolsInner, {
-      ...props
-    })
-  });
-}
-function FloatingDevToolsInner({
-  environment,
-  userRole,
-  availableEnvironments,
-  onEnvironmentSwitch,
-  apps,
-  disableHints = false,
-  headless = false
-}) {
-  // Internal state for dial and settings
-  const [isDialOpen, setIsDialOpen] = (0, _react.useState)(false);
-  const [isSettingsOpen, setIsSettingsOpen] = (0, _react.useState)(false);
-  const stateRestoredRef = (0, _react.useRef)(false);
-  const appHost = (0, _AppHostWeb.useAppHost)();
-
-  // Auto-discover tools and merge with custom apps
-  const tools = (0, _react.useMemo)(() => (0, _autoDiscoverPresetsWeb.autoDiscoverWithCustom)(apps), [apps]);
-
-  // Let the host restore `@react_buoy_open_apps` from the previous session
-  // once it knows which tools exist (native registerApps parity).
-  const {
-    registerApps
-  } = appHost;
-  (0, _react.useEffect)(() => {
-    registerApps(tools);
-  }, [registerApps, tools]);
-
-  // Convert to available tools config for settings
-  const availableToolsConfig = (0, _react.useMemo)(() => tools.map(tool => ({
-    id: tool.id,
-    name: tool.name,
-    description: tool.description,
-    slot: tool.slot
-  })), [tools]);
-
-  // Register available tools with the shared settings hook (used by the
-  // settings modal and the bubble-row visibility gating).
-  const {
-    settings
-  } = (0, _floatingToolsReact.useSettings)({
-    availableTools: availableToolsConfig,
-    storage: webSettingsStorage
-  });
-
-  // Dial/settings open-state persistence — native FloatingMenu.tsx:95-122 and
-  // DialDevTools.tsx:136-164 restore these across reloads.
-  (0, _react.useEffect)(() => {
-    let cancelled = false;
-    const restore = async () => {
-      const [dialOpen, settingsOpen] = await Promise.all([_sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.dial.isOpen()), _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.modalOpen())]);
-      if (cancelled) return;
-      if (dialOpen === 'true') setIsDialOpen(true);
-      if (settingsOpen === 'true') {
-        setIsDialOpen(true); // settings lives above the dial (native structure)
-        setIsSettingsOpen(true);
-      }
-      stateRestoredRef.current = true;
-    };
-    void restore();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (!stateRestoredRef.current) return;
-    void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.dial.isOpen(), isDialOpen ? 'true' : 'false');
-  }, [isDialOpen]);
-  (0, _react.useEffect)(() => {
-    if (!stateRestoredRef.current) return;
-    void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.modalOpen(), isSettingsOpen ? 'true' : 'false');
-  }, [isSettingsOpen]);
-
-  // Shared open path for dial + bubble-row tools.
-  const openTool = (0, _react.useCallback)(tool => {
-    void (0, _dialUsageStore.recordToolUsage)(tool.id);
-    if (tool.component) {
-      const dockIcon = typeof tool.icon === 'function' ? tool.icon(20) : tool.icon;
-      appHost.open({
-        id: tool.id,
-        title: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
-        component: tool.component,
-        props: tool.props,
-        launchMode: tool.launchMode || 'self-modal',
-        singleton: tool.singleton ?? true,
-        icon: dockIcon,
-        color: tool.color || (0, _floatingToolsReact.getToolColor)(tool.id)
-      });
-    } else {
-      tool.onPress?.();
-    }
-  }, [appHost]);
-
-  // Build dial icons for every dial-eligible tool. The dial paginates and
-  // ranks them by usage, so there is no per-tool show/hide setting.
-  const dialIcons = (0, _react.useMemo)(() => {
-    const dialTools = (0, _autoDiscoverPresetsWeb.getToolsBySlot)(tools, 'dial');
-    return dialTools.map(tool => {
-      const color = tool.color || (0, _floatingToolsReact.getToolColor)(tool.id);
-      // Handle icon - can be string (emoji) or function (size) => ReactNode
-      let icon;
-      if (typeof tool.icon === 'string') {
-        icon = tool.icon;
-      } else if (typeof tool.icon === 'function') {
-        // It's a render function - call it with size
-        icon = tool.icon(32);
-      } else {
-        icon = null;
-      }
-      return {
-        id: tool.id,
-        // The tool's own name wins (native parity); the registry label is
-        // the fallback for preset tools that don't set one.
-        name: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
-        icon,
-        // Preset tools with no component and no onPress can't do anything on
-        // web — render them like native's uninstalled tools ("Unavailable"
-        // caption, non-interactive) instead of a tile that silently no-ops.
-        unavailable: !tool.component && !tool.onPress,
-        color,
-        onPress: () => {
-          openTool(tool);
-          setIsDialOpen(false);
-        }
-      };
-    });
-  }, [tools, openTool]);
-
-  // Snapshot the usage-ranked order each time the dial opens. It stays stable
-  // while open so icons don't jump positions mid-interaction.
-  const rankedDialIcons = (0, _react.useMemo)(() => {
-    if (!isDialOpen) return dialIcons;
-    const byId = new Map(dialIcons.map(i => [i.id, i]));
-    return (0, _dialUsageStore.getRankedToolIds)(dialIcons.map(i => i.id)).map(id => byId.get(id)).filter(i => Boolean(i));
-  }, [isDialOpen, dialIcons]);
-
-  // Bubble-row tools — native FloatingMenu.tsx:349-386: slot !== 'dial',
-  // explicitly enabled in settings, rendered as small icon buttons.
-  const rowTools = (0, _react.useMemo)(() => (0, _autoDiscoverPresetsWeb.getToolsBySlot)(tools, 'row').filter(tool => settings.floatingTools[tool.id] === true && (tool.component || tool.onPress)), [tools, settings.floatingTools]);
-
-  // Build available tools for settings modal
-  const availableTools = (0, _react.useMemo)(() => tools.map(tool => ({
-    id: tool.id,
-    name: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
-    description: tool.description || (0, _floatingToolsReact.getToolDescription)(tool.id),
-    slot: tool.slot,
-    // Settings rows fall back to the tool's own icon when the modal has
-    // no hardcoded glyph for it (mirrors native DialDevTools).
-    icon: tool.icon,
-    color: tool.color
-  })), [tools]);
-
-  // Welcome tooltip — native FloatingMenu.tsx:134-157: 1000ms after mount,
-  // once ever, only while nothing else is open; the bubble centers under the
-  // arrow while it shows.
-  const [showWelcomeTooltip, setShowWelcomeTooltip] = (0, _react.useState)(false);
-  const isAnyToolOpen = appHost.openApps.some(app => !app.minimized);
-  (0, _react.useEffect)(() => {
-    if (disableHints) return;
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      const seen = await _sharedUi.persistentStorage.getItem(MENU_TOOLTIP_KEY);
-      if (!cancelled && !seen) setShowWelcomeTooltip(true);
-    }, 1000);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [disableHints]);
-  const dismissWelcomeTooltip = (0, _react.useCallback)(() => {
-    setShowWelcomeTooltip(false);
-    void _sharedUi.persistentStorage.setItem(MENU_TOOLTIP_KEY, 'true');
-  }, []);
-
-  // Callbacks
-  const handleOpenDial = (0, _react.useCallback)(() => {
-    // Opening the dial dismisses the welcome tooltip (native handleDialOpen).
-    if (showWelcomeTooltip) dismissWelcomeTooltip();
-    setIsDialOpen(true);
-  }, [showWelcomeTooltip, dismissWelcomeTooltip]);
-  const handleCloseDial = (0, _react.useCallback)(() => {
-    setIsDialOpen(false);
-    setIsSettingsOpen(false); // settings lives above the dial
-  }, []);
-  // Center press toggles settings while the dial STAYS OPEN underneath —
-  // the center label flips to CLOSE/SETTINGS (native DialDevTools behavior).
-  const handleCenterPress = (0, _react.useCallback)(() => {
-    setIsSettingsOpen(open => !open);
-  }, []);
-  const handleCloseSettings = (0, _react.useCallback)(() => setIsSettingsOpen(false), []);
-  const showEnvironmentSelector = Boolean(availableEnvironments?.length && onEnvironmentSwitch);
-  const environmentEnabled = settings.floatingTools.environment !== false;
-  const welcomeActive = showWelcomeTooltip && !isDialOpen && !isAnyToolOpen;
-  const hasMinimizedTools = appHost.openApps.some(app => app.minimized && app.launchMode !== 'toggle-only');
-
-  // Headless: desktop sync is native-only, so there is nothing to mount on
-  // web — accept the prop for API parity and render nothing. (After all
-  // hooks so hook order is preserved.)
-  if (headless) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [welcomeActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        position: 'fixed',
-        inset: 0,
-        backgroundColor: 'rgba(0,0,0,0.85)',
-        zIndex: 10000
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_floatingToolsWeb.FloatingTools, {
-      enablePositionPersistence: !welcomeActive,
-      pushToSide: isDialOpen || isAnyToolOpen,
-      suspendPointerEvents: isDialOpen,
-      centerOnboarding: welcomeActive,
-      minimizedStack: hasMinimizedTools ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MinimizedToolsStackWeb.MinimizedToolsStack, {}) : undefined,
-      hasMinimizedStack: hasMinimizedTools,
-      children: [environment && environmentEnabled && !showEnvironmentSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentIndicator, {
-        environment: environment
-      }), showEnvironmentSelector && environmentEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentSelectorInline, {
-        currentEnvironment: environment ?? 'local',
-        availableEnvironments: availableEnvironments,
-        onSelect: onEnvironmentSwitch
-      }), userRole ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.UserStatus, {
-        userRole: userRole,
-        onPress: handleOpenDial
-      }) :
-      /*#__PURE__*/
-      // native MenuLauncherIcon fallback: dial stays reachable without a
-      // userRole pill.
-      (0, _jsxRuntime.jsx)("button", {
-        "aria-label": "Open dev tools",
-        onClick: handleOpenDial,
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '6px 8px',
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer'
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuLauncherIcon, {})
-      }), rowTools.map(tool =>
-      /*#__PURE__*/
-      // native FloatingMenu fab: paddingH 6, paddingV 4, r6, transparent
-      (0, _jsxRuntime.jsx)("button", {
-        "aria-label": tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
-        title: tool.description,
-        onClick: () => openTool(tool),
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '4px 6px',
-          borderRadius: 6,
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer'
-        },
-        children: typeof tool.icon === 'function' ? tool.icon(16) : tool.icon
-      }, tool.id))]
-    }), welcomeActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltipWeb.OnboardingTooltip, {
-      title: "Welcome to Buoy!",
-      message: "Grab and position this menu wherever you want, then tap the icon to open your tools.",
-      onDismiss: dismissWelcomeTooltip
-    }), isDialOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialDevToolsWeb.DialMenu, {
-      icons: rankedDialIcons,
-      onClose: handleCloseDial,
-      centerLabel: "BUOY",
-      onCenterPress: handleCenterPress,
-      settingsOpen: isSettingsOpen,
-      hintsDisabled: disableHints
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModalWeb.SettingsModal, {
-      visible: isSettingsOpen,
-      onClose: handleCloseSettings,
-      availableTools: availableTools,
-      onSettingsChange: _newSettings => {
-        // Settings are already saved by the hook
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floating.FloatingToolHost, {})]
-  });
-}
-
-// =============================
-// Re-exports for convenience
-// =============================
-
-function FloatingDevTools(props) {
-  const {
-    access,
-    isPro,
-    licenseKey
-  } = (0, _license.useLicense)();
-  (0, _react.useEffect)(() => {
-    void _license.LicenseManager.configure(props.licenseKey);
-  }, [props.licenseKey]);
-  const matches = props.licenseKey === undefined || props.licenseKey.trim().toUpperCase() === (licenseKey ?? "");
-  const dev = typeof __DEV__ !== "undefined" ? __DEV__ : process.env.NODE_ENV !== "production";
-  if (!dev && !isPro) return null;
-  if (!matches || access.status !== "admitted") return props.headless ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AccountSetup, {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AdmittedFloatingDevTools, {
-    ...props
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.FloatingDevTools=FloatingDevTools;var _floating=require("@buoy-gg/shared-ui/floating");var _license=require("@buoy-gg/license");var _sharedUi=require("@buoy-gg/shared-ui");var _react=require("react");var _floatingToolsReact=require("@buoy-gg/floating-tools-react");var _autoDiscoverPresetsWeb=require("../utils/autoDiscoverPresets.web.js");var _floatingToolsWeb=require("./floatingTools.web.js");var _DialDevToolsWeb=require("./dial/DialDevTools.web.js");var _dialUsageStore=require("./dial/dialUsageStore.js");var _OnboardingTooltipWeb=require("./dial/OnboardingTooltip.web.js");var _DevToolsSettingsModalWeb=require("./DevToolsSettingsModal.web.js");var _AppHostWeb=require("./AppHost.web.js");var _MinimizedToolsStackWeb=require("./MinimizedToolsStack.web.js");var _createWebTools=require("../utils/createWebTools.js");var _BrowserToolRuntime=require("./BrowserToolRuntime.js");var _releaseOptIn=require("../releaseOptIn.js");var _DevToolsVisibilityContext=require("./DevToolsVisibilityContext.js");var _jsxRuntime=require("react/jsx-runtime");const EMPTY_MODULES={};const MENU_TOOLTIP_KEY="@react_buoy_floating_menu_tooltip_shown";const webSettingsStorage=_sharedUi.persistentStorage;function MenuLauncherIcon({size:t=14,color:l="#20C997"}){const o=Math.max(2,t/4);const c=Math.max(1,t/16);return(0,_jsxRuntime.jsx)("div",{style:{display:"grid",gridTemplateColumns:`repeat(3, ${o}px)`,gap:c,width:t,height:t,alignContent:"center",justifyContent:"center"},children:Array.from({length:9}).map((u,a)=>(0,_jsxRuntime.jsx)("div",{style:{width:o,height:o,borderRadius:o/2,backgroundColor:l}},a))})}function AdmittedFloatingDevTools(t){return(0,_jsxRuntime.jsx)(_DevToolsVisibilityContext.DevToolsVisibilityProvider,{children:(0,_jsxRuntime.jsx)(_AppHostWeb.AppHostProvider,{children:(0,_jsxRuntime.jsx)(FloatingDevToolsInner,{...t})})})}function FloatingDevToolsInner({environment:t,userRole:l,availableEnvironments:o,onEnvironmentSwitch:c,apps:u,modules:a=EMPTY_MODULES,externalSync:v,requiredEnvVars:W,sentryGetClient:A,disableHints:S=false,headless:D=false}){const[i,b]=(0,_react.useState)(false);const[d,T]=(0,_react.useState)(false);const j=(0,_react.useRef)(false);const p=(0,_AppHostWeb.useAppHost)();const r=(0,_react.useMemo)(()=>(0,_autoDiscoverPresetsWeb.autoDiscoverWithCustom)([...(0,_createWebTools.createWebTools)(a),...u??[]]),[u,a]);const y=(0,_DevToolsVisibilityContext.useDevToolsVisibility)();const O=p.openApps.some(e=>!e.minimized);(0,_react.useEffect)(()=>{y.setDialOpen(i)},[i,y.setDialOpen]);(0,_react.useEffect)(()=>{y.setToolOpen(O||d)},[O,d,y.setToolOpen]);const{registerApps:w}=p;(0,_react.useEffect)(()=>{w(r.map(e=>{const n=e.icon;return{...e,icon:typeof n==="function"?({size:s})=>n(s):n}}))},[w,r]);const L=(0,_react.useMemo)(()=>r.map(e=>({id:e.id,name:e.name,description:e.description,slot:e.slot})),[r]);const{settings:x}=(0,_floatingToolsReact.useSettings)({availableTools:L,storage:webSettingsStorage});(0,_react.useEffect)(()=>{let e=false;const n=async()=>{const[s,f]=await Promise.all([_sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.dial.isOpen()),_sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.modalOpen())]);if(e)return;if(s==="true")b(true);if(f==="true"){b(true);T(true)}j.current=true};void n();return()=>{e=true}},[]);(0,_react.useEffect)(()=>{if(!j.current)return;void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.dial.isOpen(),i?"true":"false")},[i]);(0,_react.useEffect)(()=>{if(!j.current)return;void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.modalOpen(),d?"true":"false")},[d]);const _=(0,_react.useCallback)(e=>{void(0,_dialUsageStore.recordToolUsage)(e.id);if(e.launchMode==="toggle-only"){e.onPress?.();return}if(e.component){const n=typeof e.icon==="function"?e.icon(20):e.icon;p.open({id:e.id,title:e.name||(0,_floatingToolsReact.getToolLabel)(e.id),component:e.component,props:e.props,modal:e.modal,launchMode:e.launchMode||"self-modal",singleton:e.singleton??true,icon:n,color:e.color||(0,_floatingToolsReact.getToolColor)(e.id)})}else{e.onPress?.()}},[p]);const h=(0,_react.useMemo)(()=>{const e=(0,_autoDiscoverPresetsWeb.getToolsBySlot)(r,"dial");return e.map(n=>{const s=n.color||(0,_floatingToolsReact.getToolColor)(n.id);let f;if(typeof n.icon==="string"){f=n.icon}else if(typeof n.icon==="function"){f=n.icon(32)}else{f=null}return{id:n.id,name:n.name||(0,_floatingToolsReact.getToolLabel)(n.id),icon:f,unavailable:!n.component&&!n.onPress,color:s,onPress:()=>{_(n);b(false)}}})},[r,_]);const R=(0,_react.useMemo)(()=>{if(!i)return h;const e=new Map(h.map(n=>[n.id,n]));return(0,_dialUsageStore.getRankedToolIds)(h.map(n=>n.id)).map(n=>e.get(n)).filter(n=>Boolean(n))},[i,h]);const K=(0,_react.useMemo)(()=>(0,_autoDiscoverPresetsWeb.getToolsBySlot)(r,"row").filter(e=>x.floatingTools[e.id]===true&&(e.component||e.onPress)),[r,x.floatingTools]);const B=(0,_react.useMemo)(()=>r.map(e=>({id:e.id,name:e.name||(0,_floatingToolsReact.getToolLabel)(e.id),description:e.description||(0,_floatingToolsReact.getToolDescription)(e.id),slot:e.slot,icon:e.icon,color:e.color})),[r]);const[U,C]=(0,_react.useState)(false);const E=p.openApps.some(e=>!e.minimized);(0,_react.useEffect)(()=>{if(S)return;let e=false;const n=setTimeout(async()=>{const s=await _sharedUi.persistentStorage.getItem(MENU_TOOLTIP_KEY);if(!e&&!s)C(true)},1e3);return()=>{e=true;clearTimeout(n)}},[S]);const g=(0,_react.useCallback)(()=>{C(false);void _sharedUi.persistentStorage.setItem(MENU_TOOLTIP_KEY,"true")},[]);const M=(0,_react.useCallback)(()=>{g();b(true)},[g]);const V=(0,_react.useCallback)(()=>{b(false);T(false)},[]);const z=(0,_react.useCallback)(()=>{T(e=>!e)},[]);const F=(0,_react.useCallback)(()=>T(false),[]);const k=Boolean(o?.length&&c);const I=x.floatingTools.environment!==false;const m=U&&!i&&!E;(0,_react.useEffect)(()=>{if(!m)return;const e=s=>{if(!(s.target instanceof Element)||!s.target.closest("[data-buoy-root]"))g()};const n=s=>{if(s.key==="Escape")g()};document.addEventListener("pointerdown",e,true);document.addEventListener("keydown",n);return()=>{document.removeEventListener("pointerdown",e,true);document.removeEventListener("keydown",n)}},[m,g]);const P=p.openApps.some(e=>e.minimized&&e.launchMode!=="toggle-only");const q=(0,_jsxRuntime.jsx)(_BrowserToolRuntime.BrowserToolRuntime,{modules:a,apps:u,requiredEnvVars:W,externalSync:v,headless:D,sentryGetClient:A});if(D)return q;return(0,_jsxRuntime.jsxs)("div",{"data-buoy-root":"",style:{display:"contents"},children:[q,m&&(0,_jsxRuntime.jsx)("div",{style:{position:"fixed",inset:0,backgroundColor:"rgba(0,0,0,0.85)",zIndex:1e4,pointerEvents:"none"}}),(0,_jsxRuntime.jsxs)(_floatingToolsWeb.FloatingTools,{enablePositionPersistence:!m,pushToSide:i||E,suspendPointerEvents:i,centerOnboarding:m,minimizedStack:P?(0,_jsxRuntime.jsx)(_MinimizedToolsStackWeb.MinimizedToolsStack,{}):void 0,hasMinimizedStack:P,children:[t&&I&&!k&&(0,_jsxRuntime.jsx)(_sharedUi.EnvironmentIndicator,{environment:t}),k&&I&&(0,_jsxRuntime.jsx)(_sharedUi.EnvironmentSelectorInline,{currentEnvironment:t??"local",availableEnvironments:o,onSelect:c}),l?(0,_jsxRuntime.jsx)(_floatingToolsWeb.UserStatus,{userRole:l,onPress:M}):(0,_jsxRuntime.jsx)("button",{"aria-label":"Open dev tools",onClick:M,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",background:"none",border:"none",cursor:"pointer"},children:(0,_jsxRuntime.jsx)(MenuLauncherIcon,{})}),K.map(e=>(0,_jsxRuntime.jsx)("button",{"aria-label":e.name||(0,_floatingToolsReact.getToolLabel)(e.id),title:e.description,onClick:()=>_(e),style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",borderRadius:6,background:"none",border:"none",cursor:"pointer"},children:typeof e.icon==="function"?e.icon(16):e.icon},e.id))]}),m&&(0,_jsxRuntime.jsx)(_OnboardingTooltipWeb.OnboardingTooltip,{title:"Welcome to Buoy!",message:"Grab and position this menu wherever you want, then tap the icon to open your tools.",onDismiss:g}),i&&(0,_jsxRuntime.jsx)(_DialDevToolsWeb.DialMenu,{icons:R,onClose:V,centerLabel:"BUOY",onCenterPress:z,settingsOpen:d,hintsDisabled:S}),(0,_jsxRuntime.jsx)(_DevToolsSettingsModalWeb.SettingsModal,{visible:d,onClose:F,availableTools:B,onSettingsChange:e=>{}}),(0,_jsxRuntime.jsx)(_AppHostWeb.AppOverlay,{}),(0,_jsxRuntime.jsx)(_floating.FloatingToolHost,{})]})}function FloatingDevTools(t){const{access:l,isPro:o,licenseKey:c}=(0,_license.useLicense)();(0,_react.useEffect)(()=>{void _license.LicenseManager.configure(t.licenseKey)},[t.licenseKey]);const u=t.licenseKey===void 0||t.licenseKey.trim().toUpperCase()===(c??"");const a=typeof __DEV__!=="undefined"?__DEV__:process.env.NODE_ENV!=="production";const v=u&&l.status==="admitted";(0,_react.useEffect)(()=>{if(!a&&o&&v)(0,_releaseOptIn.markReleaseOptIn)()},[a,o,v]);if(!a&&!o)return null;if(!v)return t.headless?null:(0,_jsxRuntime.jsx)(_sharedUi.AccountSetup,{});return(0,_jsxRuntime.jsx)(AdmittedFloatingDevTools,{...t})}