@buoy-gg/core 7.0.41 → 7.0.43

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

@@ -1,412 +1 @@
-"use strict";
-
-import { FloatingToolHost } from "@buoy-gg/shared-ui/floating";
-import { LicenseManager, useLicense } from "@buoy-gg/license";
-import { AccountSetup } from "@buoy-gg/shared-ui";
-import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
-import { useSettings, getToolLabel, getToolDescription, getToolColor } from '@buoy-gg/floating-tools-react';
-import { persistentStorage, devToolsStorageKeys, EnvironmentIndicator, EnvironmentSelectorInline } from '@buoy-gg/shared-ui';
-import { autoDiscoverWithCustom, getToolsBySlot } from "../utils/autoDiscoverPresets.web.js";
-import { FloatingTools, UserStatus } from "./floatingTools.web.js";
-import { DialMenu } from "./dial/DialDevTools.web.js";
-import { getRankedToolIds, recordToolUsage } from "./dial/dialUsageStore.js";
-import { OnboardingTooltip } from "./dial/OnboardingTooltip.web.js";
-import { SettingsModal } from "./DevToolsSettingsModal.web.js";
-import { AppHostProvider, AppOverlay, useAppHost } from "./AppHost.web.js";
-import { MinimizedToolsStack } from "./MinimizedToolsStack.web.js";
-import { createWebTools } from "../utils/createWebTools.js";
-import { BrowserToolRuntime } from "./BrowserToolRuntime.js";
-import { DevToolsVisibilityProvider, useDevToolsVisibility } from "./DevToolsVisibilityContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const EMPTY_MODULES = {};
-
-// native FloatingMenu.tsx TOOLTIP_SHOWN_KEY
-const MENU_TOOLTIP_KEY = '@react_buoy_floating_menu_tooltip_shown';
-const webSettingsStorage = persistentStorage;
-
-// =============================
-// 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__*/_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__*/_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__*/_jsx(DevToolsVisibilityProvider, {
-    children: /*#__PURE__*/_jsx(AppHostProvider, {
-      children: /*#__PURE__*/_jsx(FloatingDevToolsInner, {
-        ...props
-      })
-    })
-  });
-}
-function FloatingDevToolsInner({
-  environment,
-  userRole,
-  availableEnvironments,
-  onEnvironmentSwitch,
-  apps,
-  modules = EMPTY_MODULES,
-  externalSync,
-  requiredEnvVars,
-  sentryGetClient,
-  disableHints = false,
-  headless = false
-}) {
-  // Internal state for dial and settings
-  const [isDialOpen, setIsDialOpen] = useState(false);
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const stateRestoredRef = useRef(false);
-  const appHost = useAppHost();
-
-  // Auto-discover tools and merge with custom apps
-  const tools = useMemo(() => autoDiscoverWithCustom([...createWebTools(modules), ...(apps ?? [])]), [apps, modules]);
-  const visibility = useDevToolsVisibility();
-  const toolVisible = appHost.openApps.some(app => !app.minimized);
-  useEffect(() => {
-    visibility.setDialOpen(isDialOpen);
-  }, [isDialOpen, visibility.setDialOpen]);
-  useEffect(() => {
-    visibility.setToolOpen(toolVisible || isSettingsOpen);
-  }, [toolVisible, isSettingsOpen, visibility.setToolOpen]);
-
-  // Let the host restore `@react_buoy_open_apps` from the previous session
-  // once it knows which tools exist (native registerApps parity).
-  const {
-    registerApps
-  } = appHost;
-  useEffect(() => {
-    registerApps(tools.map(tool => {
-      const icon = tool.icon;
-      return {
-        ...tool,
-        icon: typeof icon === 'function' ? ({
-          size
-        }) => icon(size) : icon
-      };
-    }));
-  }, [registerApps, tools]);
-
-  // Convert to available tools config for settings
-  const availableToolsConfig = 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
-  } = useSettings({
-    availableTools: availableToolsConfig,
-    storage: webSettingsStorage
-  });
-
-  // Dial/settings open-state persistence — native FloatingMenu.tsx:95-122 and
-  // DialDevTools.tsx:136-164 restore these across reloads.
-  useEffect(() => {
-    let cancelled = false;
-    const restore = async () => {
-      const [dialOpen, settingsOpen] = await Promise.all([persistentStorage.getItem(devToolsStorageKeys.dial.isOpen()), persistentStorage.getItem(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;
-    };
-  }, []);
-  useEffect(() => {
-    if (!stateRestoredRef.current) return;
-    void persistentStorage.setItem(devToolsStorageKeys.dial.isOpen(), isDialOpen ? 'true' : 'false');
-  }, [isDialOpen]);
-  useEffect(() => {
-    if (!stateRestoredRef.current) return;
-    void persistentStorage.setItem(devToolsStorageKeys.settings.modalOpen(), isSettingsOpen ? 'true' : 'false');
-  }, [isSettingsOpen]);
-
-  // Shared open path for dial + bubble-row tools.
-  const openTool = useCallback(tool => {
-    void recordToolUsage(tool.id);
-    if (tool.launchMode === 'toggle-only') {
-      tool.onPress?.();
-      return;
-    }
-    if (tool.component) {
-      const dockIcon = typeof tool.icon === 'function' ? tool.icon(20) : tool.icon;
-      appHost.open({
-        id: tool.id,
-        title: tool.name || getToolLabel(tool.id),
-        component: tool.component,
-        props: tool.props,
-        modal: tool.modal,
-        launchMode: tool.launchMode || 'self-modal',
-        singleton: tool.singleton ?? true,
-        icon: dockIcon,
-        color: tool.color || 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 = useMemo(() => {
-    const dialTools = getToolsBySlot(tools, 'dial');
-    return dialTools.map(tool => {
-      const color = tool.color || 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 || 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 = useMemo(() => {
-    if (!isDialOpen) return dialIcons;
-    const byId = new Map(dialIcons.map(i => [i.id, i]));
-    return 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 = useMemo(() => 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 = useMemo(() => tools.map(tool => ({
-    id: tool.id,
-    name: tool.name || getToolLabel(tool.id),
-    description: tool.description || 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] = useState(false);
-  const isAnyToolOpen = appHost.openApps.some(app => !app.minimized);
-  useEffect(() => {
-    if (disableHints) return;
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      const seen = await persistentStorage.getItem(MENU_TOOLTIP_KEY);
-      if (!cancelled && !seen) setShowWelcomeTooltip(true);
-    }, 1000);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [disableHints]);
-  const dismissWelcomeTooltip = useCallback(() => {
-    setShowWelcomeTooltip(false);
-    void persistentStorage.setItem(MENU_TOOLTIP_KEY, 'true');
-  }, []);
-
-  // Callbacks
-  const handleOpenDial = useCallback(() => {
-    // Opening the dial dismisses the welcome tooltip (native handleDialOpen).
-    dismissWelcomeTooltip();
-    setIsDialOpen(true);
-  }, [dismissWelcomeTooltip]);
-  const handleCloseDial = 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 = useCallback(() => {
-    setIsSettingsOpen(open => !open);
-  }, []);
-  const handleCloseSettings = 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');
-  const runtime = /*#__PURE__*/_jsx(BrowserToolRuntime, {
-    modules: modules,
-    apps: apps,
-    requiredEnvVars: requiredEnvVars,
-    externalSync: externalSync,
-    headless: headless,
-    sentryGetClient: sentryGetClient
-  });
-  if (headless) return runtime;
-  return /*#__PURE__*/_jsxs("div", {
-    "data-buoy-root": "",
-    style: {
-      display: 'contents'
-    },
-    children: [runtime, welcomeActive && /*#__PURE__*/_jsx("div", {
-      style: {
-        position: 'fixed',
-        inset: 0,
-        backgroundColor: 'rgba(0,0,0,0.85)',
-        zIndex: 10000
-      }
-    }), /*#__PURE__*/_jsxs(FloatingTools, {
-      enablePositionPersistence: !welcomeActive,
-      pushToSide: isDialOpen || isAnyToolOpen,
-      suspendPointerEvents: isDialOpen,
-      centerOnboarding: welcomeActive,
-      minimizedStack: hasMinimizedTools ? /*#__PURE__*/_jsx(MinimizedToolsStack, {}) : undefined,
-      hasMinimizedStack: hasMinimizedTools,
-      children: [environment && environmentEnabled && !showEnvironmentSelector && /*#__PURE__*/_jsx(EnvironmentIndicator, {
-        environment: environment
-      }), showEnvironmentSelector && environmentEnabled && /*#__PURE__*/_jsx(EnvironmentSelectorInline, {
-        currentEnvironment: environment ?? 'local',
-        availableEnvironments: availableEnvironments,
-        onSelect: onEnvironmentSwitch
-      }), userRole ? /*#__PURE__*/_jsx(UserStatus, {
-        userRole: userRole,
-        onPress: handleOpenDial
-      }) :
-      /*#__PURE__*/
-      // native MenuLauncherIcon fallback: dial stays reachable without a
-      // userRole pill.
-      _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__*/_jsx(MenuLauncherIcon, {})
-      }), rowTools.map(tool =>
-      /*#__PURE__*/
-      // native FloatingMenu fab: paddingH 6, paddingV 4, r6, transparent
-      _jsx("button", {
-        "aria-label": tool.name || 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__*/_jsx(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__*/_jsx(DialMenu, {
-      icons: rankedDialIcons,
-      onClose: handleCloseDial,
-      centerLabel: "BUOY",
-      onCenterPress: handleCenterPress,
-      settingsOpen: isSettingsOpen,
-      hintsDisabled: disableHints
-    }), /*#__PURE__*/_jsx(SettingsModal, {
-      visible: isSettingsOpen,
-      onClose: handleCloseSettings,
-      availableTools: availableTools,
-      onSettingsChange: _newSettings => {
-        // Settings are already saved by the hook
-      }
-    }), /*#__PURE__*/_jsx(AppOverlay, {}), /*#__PURE__*/_jsx(FloatingToolHost, {})]
-  });
-}
-
-// =============================
-// Re-exports for convenience
-// =============================
-
-export function FloatingDevTools(props) {
-  const {
-    access,
-    isPro,
-    licenseKey
-  } = useLicense();
-  useEffect(() => {
-    void 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__*/_jsx(AccountSetup, {});
-  return /*#__PURE__*/_jsx(AdmittedFloatingDevTools, {
-    ...props
-  });
-}
+"use strict";import{FloatingToolHost as oe}from"@buoy-gg/shared-ui/floating";import{LicenseManager as ie,useLicense as se}from"@buoy-gg/license";import{AccountSetup as re}from"@buoy-gg/shared-ui";import{useState as x,useMemo as h,useCallback as b,useEffect as c,useRef as ae}from"react";import{useSettings as ce,getToolLabel as E,getToolDescription as le,getToolColor as F}from"@buoy-gg/floating-tools-react";import{persistentStorage as d,devToolsStorageKeys as I,EnvironmentIndicator as de,EnvironmentSelectorInline as me}from"@buoy-gg/shared-ui";import{autoDiscoverWithCustom as pe,getToolsBySlot as N}from"../utils/autoDiscoverPresets.web.js";import{FloatingTools as ue,UserStatus as fe}from"./floatingTools.web.js";import{DialMenu as ge}from"./dial/DialDevTools.web.js";import{getRankedToolIds as ye,recordToolUsage as ve}from"./dial/dialUsageStore.js";import{OnboardingTooltip as Te}from"./dial/OnboardingTooltip.web.js";import{SettingsModal as he}from"./DevToolsSettingsModal.web.js";import{AppHostProvider as be,AppOverlay as Oe,useAppHost as Se}from"./AppHost.web.js";import{MinimizedToolsStack as Ce}from"./MinimizedToolsStack.web.js";import{createWebTools as De}from"../utils/createWebTools.js";import{BrowserToolRuntime as we}from"./BrowserToolRuntime.js";import{markReleaseOptIn as Ee}from"../releaseOptIn.js";import{DevToolsVisibilityProvider as Ie,useDevToolsVisibility as _e}from"./DevToolsVisibilityContext.js";import{jsx as t,jsxs as Y}from"react/jsx-runtime";const Me={};const G="@react_buoy_floating_menu_tooltip_shown";const Pe=d;function ke({size:o=14,color:m="#20C997"}){const s=Math.max(2,o/4);const p=Math.max(1,o/16);return t("div",{style:{display:"grid",gridTemplateColumns:`repeat(3, ${s}px)`,gap:p,width:o,height:o,alignContent:"center",justifyContent:"center"},children:Array.from({length:9}).map((u,l)=>t("div",{style:{width:s,height:s,borderRadius:s/2,backgroundColor:m}},l))})}function xe(o){return t(Ie,{children:t(be,{children:t(Ae,{...o})})})}function Ae({environment:o,userRole:m,availableEnvironments:s,onEnvironmentSwitch:p,apps:u,modules:l=Me,externalSync:O,requiredEnvVars:H,sentryGetClient:q,disableHints:_=false,headless:A=false}){const[r,S]=x(false);const[f,C]=x(false);const M=ae(false);const g=Se();const a=h(()=>pe([...De(l),...u??[]]),[u,l]);const D=_e();const L=g.openApps.some(e=>!e.minimized);c(()=>{D.setDialOpen(r)},[r,D.setDialOpen]);c(()=>{D.setToolOpen(L||f)},[L,f,D.setToolOpen]);const{registerApps:K}=g;c(()=>{K(a.map(e=>{const n=e.icon;return{...e,icon:typeof n==="function"?({size:i})=>n(i):n}}))},[K,a]);const $=h(()=>a.map(e=>({id:e.id,name:e.name,description:e.description,slot:e.slot})),[a]);const{settings:P}=ce({availableTools:$,storage:Pe});c(()=>{let e=false;const n=async()=>{const[i,T]=await Promise.all([d.getItem(I.dial.isOpen()),d.getItem(I.settings.modalOpen())]);if(e)return;if(i==="true")S(true);if(T==="true"){S(true);C(true)}M.current=true};void n();return()=>{e=true}},[]);c(()=>{if(!M.current)return;void d.setItem(I.dial.isOpen(),r?"true":"false")},[r]);c(()=>{if(!M.current)return;void d.setItem(I.settings.modalOpen(),f?"true":"false")},[f]);const k=b(e=>{void ve(e.id);if(e.launchMode==="toggle-only"){e.onPress?.();return}if(e.component){const n=typeof e.icon==="function"?e.icon(20):e.icon;g.open({id:e.id,title:e.name||E(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||F(e.id)})}else{e.onPress?.()}},[g]);const w=h(()=>{const e=N(a,"dial");return e.map(n=>{const i=n.color||F(n.id);let T;if(typeof n.icon==="string"){T=n.icon}else if(typeof n.icon==="function"){T=n.icon(32)}else{T=null}return{id:n.id,name:n.name||E(n.id),icon:T,unavailable:!n.component&&!n.onPress,color:i,onPress:()=>{k(n);S(false)}}})},[a,k]);const J=h(()=>{if(!r)return w;const e=new Map(w.map(n=>[n.id,n]));return ye(w.map(n=>n.id)).map(n=>e.get(n)).filter(n=>Boolean(n))},[r,w]);const Q=h(()=>N(a,"row").filter(e=>P.floatingTools[e.id]===true&&(e.component||e.onPress)),[a,P.floatingTools]);const X=h(()=>a.map(e=>({id:e.id,name:e.name||E(e.id),description:e.description||le(e.id),slot:e.slot,icon:e.icon,color:e.color})),[a]);const[Z,R]=x(false);const j=g.openApps.some(e=>!e.minimized);c(()=>{if(_)return;let e=false;const n=setTimeout(async()=>{const i=await d.getItem(G);if(!e&&!i)R(true)},1e3);return()=>{e=true;clearTimeout(n)}},[_]);const y=b(()=>{R(false);void d.setItem(G,"true")},[]);const V=b(()=>{y();S(true)},[y]);const ee=b(()=>{S(false);C(false)},[]);const ne=b(()=>{C(e=>!e)},[]);const te=b(()=>C(false),[]);const B=Boolean(s?.length&&p);const U=P.floatingTools.environment!==false;const v=Z&&!r&&!j;c(()=>{if(!v)return;const e=i=>{if(!(i.target instanceof Element)||!i.target.closest("[data-buoy-root]"))y()};const n=i=>{if(i.key==="Escape")y()};document.addEventListener("pointerdown",e,true);document.addEventListener("keydown",n);return()=>{document.removeEventListener("pointerdown",e,true);document.removeEventListener("keydown",n)}},[v,y]);const W=g.openApps.some(e=>e.minimized&&e.launchMode!=="toggle-only");const z=t(we,{modules:l,apps:u,requiredEnvVars:H,externalSync:O,headless:A,sentryGetClient:q});if(A)return z;return Y("div",{"data-buoy-root":"",style:{display:"contents"},children:[z,v&&t("div",{style:{position:"fixed",inset:0,backgroundColor:"rgba(0,0,0,0.85)",zIndex:1e4,pointerEvents:"none"}}),Y(ue,{enablePositionPersistence:!v,pushToSide:r||j,suspendPointerEvents:r,centerOnboarding:v,minimizedStack:W?t(Ce,{}):void 0,hasMinimizedStack:W,children:[o&&U&&!B&&t(de,{environment:o}),B&&U&&t(me,{currentEnvironment:o??"local",availableEnvironments:s,onSelect:p}),m?t(fe,{userRole:m,onPress:V}):t("button",{"aria-label":"Open dev tools",onClick:V,style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",background:"none",border:"none",cursor:"pointer"},children:t(ke,{})}),Q.map(e=>t("button",{"aria-label":e.name||E(e.id),title:e.description,onClick:()=>k(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))]}),v&&t(Te,{title:"Welcome to Buoy!",message:"Grab and position this menu wherever you want, then tap the icon to open your tools.",onDismiss:y}),r&&t(ge,{icons:J,onClose:ee,centerLabel:"BUOY",onCenterPress:ne,settingsOpen:f,hintsDisabled:_}),t(he,{visible:f,onClose:te,availableTools:X,onSettingsChange:e=>{}}),t(Oe,{}),t(oe,{})]})}export function FloatingDevTools(o){const{access:m,isPro:s,licenseKey:p}=se();c(()=>{void ie.configure(o.licenseKey)},[o.licenseKey]);const u=o.licenseKey===void 0||o.licenseKey.trim().toUpperCase()===(p??"");const l=typeof __DEV__!=="undefined"?__DEV__:process.env.NODE_ENV!=="production";const O=u&&m.status==="admitted";c(()=>{if(!l&&s&&O)Ee()},[l,s,O]);if(!l&&!s)return null;if(!O)return o.headless?null:t(re,{});return t(xe,{...o})}