@buoy-gg/core 7.0.40 → 7.0.42

package/lib/commonjs/floatingMenu/dial/DialDevTools.web.js

@@ -1,821 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialMenu = DialMenu;
-var _react = require("react");
-var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _OnboardingTooltipWeb = require("./OnboardingTooltip.web.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * DialDevTools - Web renderer for the radial dial menu.
- *
- * Uses shared layout calculations, styling, and animation config from @buoy-gg/floating-tools-core.
- * Platform-specific: CSS animations, mouse events, web JSX.
- *
- * Visuals mirror the native DialDevTools.tsx exactly — values that never made
- * it into the shared dial.ts are inlined here with provenance comments.
- *
- * @platform React DOM Web (Vite, CRA, Next.js, Electron)
- */
-
-// native DialDevTools.tsx SETTINGS_TOOLTIP_KEY
-const SETTINGS_TOOLTIP_KEY = '@react_buoy_settings_tooltip_shown';
-
-// Inject CSS keyframes once on module load
-let keyframesInjected = false;
-function injectKeyframes() {
-  if (keyframesInjected || typeof document === 'undefined') return;
-  const style = document.createElement('style');
-  style.textContent = (0, _floatingToolsReact.getDialCSSKeyframesString)();
-  document.head.appendChild(style);
-  keyframesInjected = true;
-}
-
-// Easing functions
-const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
-const easeInCubic = t => t * t * t;
-
-// =============================
-// Types
-// =============================
-
-// =============================
-// Dial Icon Component
-// =============================
-
-function DialIconItem({
-  icon,
-  index,
-  totalIcons,
-  position,
-  progress,
-  onPress
-}) {
-  const [isHovered, setIsHovered] = (0, _react.useState)(false);
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  const isEmpty = !icon.icon && icon.id.startsWith('empty-');
-  const isUnavailable = !isEmpty && icon.unavailable === true;
-  const interactive = !isEmpty && !isUnavailable;
-  const {
-    icons: iconConfig
-  } = _floatingToolsReact.dialAnimationConfig;
-
-  // Get stagger input range for this icon
-  const staggerInputRange = (0, _floatingToolsReact.getIconStaggerInputRange)(index, totalIcons);
-
-  // Calculate this icon's individual progress based on the global progress
-  let iconProgress = 0;
-  if (progress <= staggerInputRange[1]) {
-    iconProgress = 0;
-  } else if (progress <= staggerInputRange[2]) {
-    iconProgress = (progress - staggerInputRange[1]) / (staggerInputRange[2] - staggerInputRange[1]);
-  } else {
-    iconProgress = 1;
-  }
-  iconProgress = Math.max(0, Math.min(1, iconProgress));
-  const iconSize = _floatingToolsReact.DIAL_ICON_SIZE;
-  const pressedScale = iconConfig.pressIn.scale;
-  const hoveredScale = 1.1; // web-only hover affordance (no native counterpart)
-
-  const scale = iconProgress * (isPressed ? pressedScale : isHovered ? hoveredScale : 1);
-
-  // Opacity interpolation — native DialIcon.tsx: [0, 0.3, 1] -> [0, 0.3, 1]
-  let opacity = 0;
-  if (iconProgress <= 0) {
-    opacity = 0;
-  } else if (iconProgress <= 0.3) {
-    opacity = iconProgress;
-  } else {
-    opacity = 0.3 + (iconProgress - 0.3) * (0.7 / 0.7);
-  }
-  const x = position.x * iconProgress;
-  const y = position.y * iconProgress;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    role: "menuitem",
-    "aria-label": isEmpty ? 'Empty slot' : icon.name,
-    "aria-disabled": !interactive,
-    tabIndex: interactive ? 0 : -1,
-    onClick: interactive ? onPress : undefined,
-    onMouseEnter: () => interactive && setIsHovered(true),
-    onMouseLeave: () => {
-      setIsHovered(false);
-      setIsPressed(false);
-    },
-    onMouseDown: () => interactive && setIsPressed(true),
-    onMouseUp: () => setIsPressed(false),
-    style: {
-      position: 'absolute',
-      left: '50%',
-      top: '50%',
-      width: iconSize,
-      height: iconSize,
-      marginLeft: -iconSize / 2,
-      marginTop: -iconSize / 2,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: interactive ? 'pointer' : 'default',
-      transform: `translate(${x}px, ${y}px) scale(${scale})`,
-      opacity,
-      transition: isHovered || isPressed ? 'transform 100ms ease' : 'none',
-      background: 'none',
-      border: 'none',
-      padding: 0
-    },
-    children: isEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        width: _floatingToolsReact.dialStyles.emptySlot.dotSize,
-        height: _floatingToolsReact.dialStyles.emptySlot.dotSize,
-        borderRadius: _floatingToolsReact.dialStyles.emptySlot.dotSize / 2,
-        backgroundColor: _floatingToolsReact.dialColors.emptyDotBackground,
-        border: `${_floatingToolsReact.dialStyles.emptySlot.borderWidth}px solid ${_floatingToolsReact.dialColors.emptyDotBorder}`
-      }
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          width: `${_floatingToolsReact.dialStyles.icon.gradientBgSizePercent}%`,
-          height: `${_floatingToolsReact.dialStyles.icon.gradientBgSizePercent}%`,
-          borderRadius: _floatingToolsReact.dialStyles.icon.gradientBgBorderRadius,
-          backgroundColor: 'rgba(0, 0, 0, 0.2)',
-          opacity: _floatingToolsReact.dialStyles.icon.gradientBgOpacity
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          width: `${_floatingToolsReact.dialStyles.icon.innerGlowSizePercent}%`,
-          height: `${_floatingToolsReact.dialStyles.icon.innerGlowSizePercent}%`,
-          borderRadius: _floatingToolsReact.dialStyles.icon.innerGlowBorderRadius,
-          backgroundColor: 'rgba(255, 255, 255, 0.02)',
-          opacity: _floatingToolsReact.dialStyles.icon.innerGlowOpacity
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          marginBottom: _floatingToolsReact.dialStyles.icon.wrapperMarginBottom,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 32,
-          // native DialIcon.tsx: icon rendered at size 32
-          filter: isHovered ? 'brightness(1.2)' : 'none'
-        },
-        children: icon.icon
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize:
-          // native: adjustsFontSizeToFit minimumFontScale 0.7 — long
-          // names shrink instead of wrapping/overflowing the slot.
-          icon.name.length > 8 ? Math.max(_floatingToolsReact.dialStyles.icon.label.fontSize * 0.7, _floatingToolsReact.dialStyles.icon.label.fontSize * 8 / icon.name.length) : _floatingToolsReact.dialStyles.icon.label.fontSize,
-          fontWeight: _floatingToolsReact.dialStyles.icon.label.fontWeight,
-          fontFamily: _floatingToolsReact.dialStyles.icon.label.fontFamily,
-          color: _floatingToolsReact.dialColors.iconLabel,
-          letterSpacing: _floatingToolsReact.dialStyles.icon.label.letterSpacing,
-          marginTop: _floatingToolsReact.dialStyles.icon.label.marginTop,
-          textTransform: 'uppercase',
-          whiteSpace: 'nowrap'
-        },
-        children: icon.name
-      }), isUnavailable &&
-      /*#__PURE__*/
-      // native DialIcon.tsx unavailableCaption: label size - 1, muted
-      (0, _jsxRuntime.jsx)("span", {
-        style: {
-          fontSize: _floatingToolsReact.dialStyles.icon.label.fontSize - 1,
-          fontWeight: _floatingToolsReact.dialStyles.icon.label.fontWeight,
-          fontFamily: _floatingToolsReact.dialStyles.icon.label.fontFamily,
-          letterSpacing: _floatingToolsReact.dialStyles.icon.label.letterSpacing,
-          color: _floatingToolsReact.floatingToolsColors.muted,
-          textTransform: 'uppercase',
-          whiteSpace: 'nowrap'
-        },
-        children: "Unavailable"
-      })]
-    })
-  });
-}
-
-// =============================
-// Pagination (mirrors native DialPagination.tsx)
-// =============================
-
-/**
- * Chevron glyph matching the native pager's ChevronLeft/ChevronRight from
- * @buoy-gg/shared-ui (lucide two-line chevron, size 18, strokeWidth 2).
- * Inlined as SVG because shared-ui is React Native-only.
- */
-function PagerChevron({
-  side,
-  color
-}) {
-  // native lucide-icons.tsx ChevronLeft: (15,18)->(9,12)->(15,6); ChevronRight mirrored
-  const lines = side === 'prev' ? [[15, 18, 9, 12], [9, 12, 15, 6]] : [[9, 18, 15, 12], [15, 12, 9, 6]];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    width: 18,
-    height: 18,
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false",
-    children: lines.map(([x1, y1, x2, y2], i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      stroke: color,
-      strokeWidth: 2
-    }, i))
-  });
-}
-function PagerButton({
-  side,
-  disabled,
-  onClick
-}) {
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-
-  // native DialPagination.tsx: accent = disabled ? emptyDotBorder : dialColors.accent
-  const accent = disabled ? _floatingToolsReact.dialColors.emptyDotBorder : _floatingToolsReact.dialColors.accent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-    type: "button",
-    "aria-label": `${side === 'prev' ? 'Previous' : 'Next'} dial page`,
-    disabled: disabled,
-    onClick: onClick,
-    onMouseDown: () => !disabled && setIsPressed(true),
-    onMouseUp: () => setIsPressed(false),
-    onMouseLeave: () => setIsPressed(false),
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 4,
-      // native DialPagination.tsx: gap 4
-      padding: '10px 16px',
-      // native: paddingVertical 10, paddingHorizontal 16
-      borderRadius: 10,
-      border: `1px solid ${_floatingToolsReact.dialColors.dialBorder}`,
-      backgroundColor: _floatingToolsReact.dialColors.dialBackground,
-      // native: buttonText night text, buttonTextDisabled iconLabelMuted
-      color: disabled ? _floatingToolsReact.dialColors.iconLabelMuted : _floatingToolsReact.dialColors.centerText,
-      fontSize: 12,
-      fontWeight: 900,
-      fontFamily: _sharedUi.monoFont,
-      letterSpacing: 1.5,
-      textTransform: 'uppercase',
-      cursor: disabled ? 'default' : 'pointer',
-      opacity: disabled ? 0.4 : 1,
-      // native: buttonDisabled opacity 0.4
-      // native: shadowColor dialShadow, shadowOpacity 0.4, shadowRadius 8
-      boxShadow: disabled ? 'none' : `0 0 8px ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.dialColors.dialShadow, 0.4)}`,
-      // native: press-in springs to scale 0.92
-      transform: isPressed ? 'scale(0.92)' : 'scale(1)',
-      transition: 'transform 100ms ease'
-    },
-    children: [side === 'prev' && /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerChevron, {
-      side: "prev",
-      color: accent
-    }), side === 'prev' ? 'PREV' : 'NEXT', side === 'next' && /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerChevron, {
-      side: "next",
-      color: accent
-    })]
-  });
-}
-
-// =============================
-// Main DialMenu Component
-// =============================
-
-function DialMenu({
-  icons,
-  onClose,
-  centerLabel = 'MENU',
-  onCenterPress,
-  settingsOpen = false,
-  hintsDisabled = false
-}) {
-  // Animation values
-  const [backdropOpacity, setBackdropOpacity] = (0, _react.useState)(0);
-  const [dialScale, setDialScale] = (0, _react.useState)(0);
-  const [dialRotation, setDialRotation] = (0, _react.useState)(0);
-  const [centerButtonScale, setCenterButtonScale] = (0, _react.useState)(0);
-  const [iconProgress, setIconProgress] = (0, _react.useState)(0);
-  const [centerPulseScale, setCenterPulseScale] = (0, _react.useState)(1);
-
-  // UI state
-  const [isHoveringCenter, setIsHoveringCenter] = (0, _react.useState)(false);
-  const [isExiting, setIsExiting] = (0, _react.useState)(false);
-  const [entranceComplete, setEntranceComplete] = (0, _react.useState)(false);
-
-  // Refs
-  const animationRef = (0, _react.useRef)(null);
-  const isClosingRef = (0, _react.useRef)(false);
-
-  // Config
-  const {
-    entrance,
-    exit,
-    interaction
-  } = _floatingToolsReact.dialAnimationConfig;
-  const cssAnimations = (0, _floatingToolsReact.getDialCSSAnimationStyles)();
-
-  // Layout
-  const layout = (0, _react.useMemo)(() => (0, _floatingToolsReact.getDialLayout)({
-    screenWidth: window.innerWidth
-  }), []);
-  const gridRotations = (0, _react.useMemo)(() => (0, _floatingToolsReact.getGridLineRotations)(), []);
-  const positions = (0, _react.useMemo)(() => (0, _floatingToolsReact.getAllIconPositions)(_floatingToolsReact.MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
-
-  // Pagination: tools are split across pages of MAX_DIAL_SLOTS.
-  const [currentPage, setCurrentPage] = (0, _react.useState)(0);
-  const pageCount = Math.max(1, Math.ceil(icons.length / _floatingToolsReact.MAX_DIAL_SLOTS));
-  const safePage = Math.min(currentPage, pageCount - 1);
-  const paddedIcons = (0, _react.useMemo)(() => {
-    const start = safePage * _floatingToolsReact.MAX_DIAL_SLOTS;
-    const result = [...icons.slice(start, start + _floatingToolsReact.MAX_DIAL_SLOTS)];
-    while (result.length < _floatingToolsReact.MAX_DIAL_SLOTS) {
-      result.push({
-        id: `empty-${result.length}`,
-        name: '',
-        icon: null,
-        onPress: () => {}
-      });
-    }
-    return result;
-  }, [icons, safePage]);
-
-  // Inject keyframes
-  (0, _react.useEffect)(() => {
-    injectKeyframes();
-  }, []);
-
-  // ENTRANCE Animation - runs once on mount
-  (0, _react.useEffect)(() => {
-    // Capture config values at mount time
-    const backdropDuration = entrance.backdrop.duration;
-    const rotationDuration = entrance.dial.rotation.duration;
-    const centerButtonDelay = entrance.centerButton.delay;
-    const iconsDelay = entrance.icons.delay;
-    const iconsDuration = entrance.icons.duration;
-    const startTime = performance.now();
-    const animate = currentTime => {
-      const elapsed = currentTime - startTime;
-
-      // Backdrop (0-400ms)
-      setBackdropOpacity(Math.min(1, elapsed / backdropDuration));
-
-      // Dial scale with spring overshoot (~400ms)
-      const dialProgress = Math.min(1, elapsed / 400);
-      let springScale = easeOutCubic(dialProgress) * 1.1;
-      if (dialProgress > 0.7) {
-        springScale -= (dialProgress - 0.7) * 0.33;
-      }
-      if (dialProgress >= 1) springScale = 1;
-      setDialScale(Math.max(0, Math.min(1.05, springScale)));
-
-      // Dial rotation (0-800ms)
-      const rotProgress = Math.min(1, elapsed / rotationDuration);
-      setDialRotation(easeOutCubic(rotProgress) * 360);
-
-      // Center button (300ms delay)
-      if (elapsed >= centerButtonDelay) {
-        const centerProgress = Math.min(1, (elapsed - centerButtonDelay) / 300);
-        let centerSpring = easeOutCubic(centerProgress) * 1.15;
-        if (centerProgress > 0.6) {
-          centerSpring -= (centerProgress - 0.6) * 0.375;
-        }
-        if (centerProgress >= 1) centerSpring = 1;
-        setCenterButtonScale(Math.max(0, Math.min(1.05, centerSpring)));
-      }
-
-      // Icons (500ms delay, 600ms duration)
-      if (elapsed >= iconsDelay) {
-        const iconsProgress = Math.min(1, (elapsed - iconsDelay) / iconsDuration);
-        setIconProgress(easeOutCubic(iconsProgress));
-      }
-
-      // Continue or finish
-      const totalTime = iconsDelay + iconsDuration;
-      if (elapsed < totalTime) {
-        animationRef.current = requestAnimationFrame(animate);
-      } else {
-        // Finalize
-        setBackdropOpacity(1);
-        setDialScale(1);
-        setDialRotation(360);
-        setCenterButtonScale(1);
-        setIconProgress(1);
-        setEntranceComplete(true);
-      }
-    };
-    animationRef.current = requestAnimationFrame(animate);
-    return () => {
-      if (animationRef.current) cancelAnimationFrame(animationRef.current);
-    };
-  }, []);
-
-  // EXIT Animation
-  const handleClose = (0, _react.useCallback)(() => {
-    if (isClosingRef.current) return;
-    isClosingRef.current = true;
-    setIsExiting(true);
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-    }
-    const startTime = performance.now();
-    const iconsDuration = exit.icons.duration;
-    const centerDuration = exit.centerButton.duration;
-    const dialDuration = exit.dialScale.duration;
-    const step2Duration = Math.max(centerDuration, dialDuration);
-    const backdropDuration = exit.backdrop.duration;
-    const animate = currentTime => {
-      const elapsed = currentTime - startTime;
-
-      // Step 1: Icons collapse (0 - 300ms)
-      if (elapsed < iconsDuration) {
-        const progress = easeInCubic(elapsed / iconsDuration);
-        setIconProgress(1 - progress);
-        animationRef.current = requestAnimationFrame(animate);
-        return;
-      }
-
-      // Step 2: Dial + Center scale down in parallel — native runs the center
-      // button (200ms) and dial (250ms) with their own durations.
-      const step2Start = iconsDuration;
-      if (elapsed < step2Start + step2Duration) {
-        setIconProgress(0);
-        const centerProgress = Math.min(1, (elapsed - step2Start) / centerDuration);
-        const dialProgress = Math.min(1, (elapsed - step2Start) / dialDuration);
-        setCenterButtonScale(1 - easeInCubic(centerProgress));
-        setDialScale(1 - easeInCubic(dialProgress));
-        animationRef.current = requestAnimationFrame(animate);
-        return;
-      }
-
-      // Step 3: Backdrop fade (550 - 750ms)
-      const step3Start = step2Start + step2Duration;
-      if (elapsed < step3Start + backdropDuration) {
-        setDialScale(0);
-        setCenterButtonScale(0);
-        const progress = (elapsed - step3Start) / backdropDuration;
-        setBackdropOpacity(1 - progress);
-        animationRef.current = requestAnimationFrame(animate);
-        return;
-      }
-
-      // Done
-      setBackdropOpacity(0);
-      onClose();
-    };
-    animationRef.current = requestAnimationFrame(animate);
-  }, [exit, onClose]);
-
-  // Document-level Escape key handler
-  (0, _react.useEffect)(() => {
-    const handleKeyDown = e => {
-      if (e.key === 'Escape') {
-        handleClose();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleClose]);
-
-  // Settings onboarding tooltip — native DialDevTools.tsx:174-196: shown
-  // 1200ms after the dial mounts (entrance animations settle first) if never
-  // dismissed; suppressed while settings is open; dismissed forever when
-  // settings opens.
-  const [showSettingsTooltip, setShowSettingsTooltip] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (hintsDisabled) return;
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      const seen = await _sharedUi.persistentStorage.getItem(SETTINGS_TOOLTIP_KEY);
-      if (!cancelled && !seen) setShowSettingsTooltip(true);
-    }, 1200);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [hintsDisabled]);
-  const dismissSettingsTooltip = (0, _react.useCallback)(() => {
-    setShowSettingsTooltip(false);
-    void _sharedUi.persistentStorage.setItem(SETTINGS_TOOLTIP_KEY, 'true');
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (settingsOpen && showSettingsTooltip) {
-      dismissSettingsTooltip();
-    }
-  }, [settingsOpen, showSettingsTooltip, dismissSettingsTooltip]);
-
-  // Icon press handler
-  const handleIconPress = (0, _react.useCallback)(icon => {
-    if (icon.id.startsWith('empty-') || isClosingRef.current) return;
-
-    // Pulse animation
-    const [pulseIn, pulseOut] = interaction.iconSelect.pulse;
-    const startTime = performance.now();
-    const pulseDuration = 150;
-    const animatePulse = currentTime => {
-      const elapsed = currentTime - startTime;
-      if (elapsed < pulseDuration) {
-        const progress = easeOutCubic(elapsed / pulseDuration);
-        setCenterPulseScale(1 - (1 - pulseIn.scale) * progress);
-        requestAnimationFrame(animatePulse);
-      } else if (elapsed < pulseDuration * 2) {
-        const progress = easeOutCubic((elapsed - pulseDuration) / pulseDuration);
-        setCenterPulseScale(pulseIn.scale + (pulseOut.scale - pulseIn.scale) * progress);
-        requestAnimationFrame(animatePulse);
-      } else {
-        setCenterPulseScale(1);
-      }
-    };
-    requestAnimationFrame(animatePulse);
-
-    // Trigger action after delay
-    setTimeout(() => {
-      icon.onPress();
-      handleClose();
-    }, interaction.iconSelect.actionDelay);
-  }, [interaction.iconSelect, handleClose]);
-
-  // Page navigation - icons are keyed by slot index, so this only swaps
-  // their content in place (no remount, no re-animation) for an instant page
-  // change.
-  const handlePageChange = (0, _react.useCallback)(next => {
-    if (isClosingRef.current) return;
-    const clamped = Math.max(0, Math.min(next, pageCount - 1));
-    if (clamped !== safePage) setCurrentPage(clamped);
-  }, [pageCount, safePage]);
-
-  // Computed values
-  const buttonContainerSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio;
-  const buttonBorderSize = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRatio;
-  // Grid spokes stop this far from the centre: the hub's outer disc plus a breath.
-  const hubClearance = layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.containerRatio / 2 + 6;
-  const isAnimating = entranceComplete && !isExiting;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    role: "dialog",
-    "aria-label": "Dial Menu",
-    "aria-modal": "true",
-    style: {
-      position: 'fixed',
-      inset: 0,
-      zIndex: 10000
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      role: "button",
-      "aria-label": "Close dial menu",
-      tabIndex: 0,
-      onClick: handleClose,
-      onKeyDown: e => e.key === 'Escape' && handleClose(),
-      style: {
-        position: 'absolute',
-        inset: 0,
-        backgroundColor: _floatingToolsReact.dialColors.dialBackdrop,
-        opacity: backdropOpacity
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        position: 'absolute',
-        left: '50%',
-        marginLeft: -layout.circleSize / 2,
-        bottom: 80,
-        // native DialDevTools.tsx: bottom: 80
-        width: layout.circleSize,
-        height: layout.circleSize,
-        borderRadius: '50%',
-        backgroundColor: _floatingToolsReact.dialColors.dialBackground,
-        border: `${_floatingToolsReact.dialStyles.circle.borderWidth}px solid ${_floatingToolsReact.dialColors.dialBorder}`,
-        // native: shadowColor dialShadow at shadowOpacity 0.5, shadowRadius 20
-        boxShadow: `0 0 ${_floatingToolsReact.dialStyles.circle.shadowRadius}px ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.dialColors.dialShadow, _floatingToolsReact.dialStyles.circle.shadowOpacity)}`,
-        transform: `scale(${dialScale}) rotate(${dialRotation}deg)`,
-        opacity: dialScale > 0.01 ? 1 : 0,
-        overflow: 'hidden'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          borderRadius: '50%',
-          backgroundColor: _floatingToolsReact.dialColors.dialGradient1,
-          opacity: _floatingToolsReact.dialStyles.gradientLayers[0].opacity
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          top: '30%',
-          left: '30%',
-          borderRadius: '50%',
-          backgroundColor: _floatingToolsReact.dialColors.dialGradient2,
-          opacity: _floatingToolsReact.dialStyles.gradientLayers[1].opacity
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          top: '50%',
-          left: '50%',
-          borderRadius: '50%',
-          backgroundColor: _floatingToolsReact.dialColors.dialGradient3,
-          opacity: _floatingToolsReact.dialStyles.gradientLayers[2].opacity
-        }
-      }), gridRotations.map(deg => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          top: '50%',
-          left: 0,
-          right: 0,
-          height: _floatingToolsReact.dialStyles.grid.lineHeight,
-          transform: `rotate(${deg}deg)`,
-          transformOrigin: 'center'
-        },
-        children: ['left', 'right'].map(side => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: 'absolute',
-            top: 0,
-            [side]: 0,
-            width: `calc(50% - ${hubClearance}px)`,
-            height: _floatingToolsReact.dialStyles.grid.lineHeight,
-            backgroundColor: _floatingToolsReact.dialColors.dialGridLine
-          }
-        }, side))
-      }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DialIconItem, {
-        icon: icon,
-        index: index,
-        totalIcons: paddedIcons.length,
-        position: positions[index],
-        progress: iconProgress,
-        onPress: () => handleIconPress(icon)
-      }, index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: {
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          width: buttonContainerSize,
-          height: buttonContainerSize,
-          marginLeft: -buttonContainerSize / 2,
-          marginTop: -buttonContainerSize / 2,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          // Glass hub — see the native twin: a barely-there shade on the outer
-          // disc, a soft puck inside, no rings, so the tool background runs
-          // through the middle of the dial.
-          backgroundColor: _floatingToolsReact.dialColors.hubHalo,
-          borderRadius: layout.buttonSize,
-          overflow: 'hidden',
-          transform: `scale(${centerButtonScale * centerPulseScale})`,
-          opacity: centerButtonScale > 0.01 ? 1 : 0
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            backgroundColor: _floatingToolsReact.dialColors.dialGradient1,
-            opacity: 0.5,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            top: '20%',
-            left: '20%',
-            backgroundColor: _floatingToolsReact.dialColors.dialGradient2,
-            opacity: 0.3,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            top: '40%',
-            left: '40%',
-            backgroundColor: _floatingToolsReact.dialColors.dialGradient3,
-            opacity: 0.2,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: buttonBorderSize,
-            height: buttonBorderSize,
-            borderRadius: layout.buttonSize * _floatingToolsReact.dialStyles.centerButton.borderRadiusRatio,
-            backgroundColor: _floatingToolsReact.dialColors.hubFill,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onClick: onCenterPress,
-            onMouseEnter: () => setIsHoveringCenter(true),
-            onMouseLeave: () => setIsHoveringCenter(false),
-            style: {
-              width: layout.buttonSize,
-              height: layout.buttonSize,
-              borderRadius: layout.buttonSize / 2,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              cursor: onCenterPress ? 'pointer' : 'default',
-              transform: isHoveringCenter ? `scale(${interaction.centerHover.scale})` : 'scale(1)',
-              transition: `transform ${interaction.centerHover.duration}ms ease`,
-              animation: isAnimating && !isHoveringCenter ? cssAnimations.pulse : 'none'
-            },
-            children: settingsOpen ?
-            /*#__PURE__*/
-            // native DialDevTools.tsx:716-724 — stacked CLOSE / SETTINGS
-            (0, _jsxRuntime.jsxs)("span", {
-              style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                fontSize: _floatingToolsReact.dialStyles.centerButton.text.fontSize - 2,
-                fontWeight: _floatingToolsReact.dialStyles.centerButton.text.fontWeight,
-                fontFamily: _floatingToolsReact.dialStyles.centerButton.text.fontFamily,
-                color: _floatingToolsReact.dialColors.centerText,
-                letterSpacing: _floatingToolsReact.dialStyles.centerButton.text.letterSpacing,
-                textAlign: 'center',
-                textShadow: `0 0 4px ${_floatingToolsReact.dialColors.centerTextGlow}`,
-                textTransform: 'uppercase',
-                lineHeight: 1.2
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: {
-                  marginBottom: -2
-                },
-                children: "CLOSE"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                style: {
-                  marginTop: -2
-                },
-                children: "SETTINGS"
-              })]
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: {
-                fontSize: _floatingToolsReact.dialStyles.centerButton.text.fontSize,
-                fontWeight: _floatingToolsReact.dialStyles.centerButton.text.fontWeight,
-                fontFamily: _floatingToolsReact.dialStyles.centerButton.text.fontFamily,
-                color: _floatingToolsReact.dialColors.centerText,
-                // native DialDevTools.tsx centerText
-                letterSpacing: _floatingToolsReact.dialStyles.centerButton.text.letterSpacing,
-                textAlign: 'center',
-                textShadow: `0 0 4px ${_floatingToolsReact.dialColors.centerTextGlow}`,
-                textTransform: 'uppercase'
-              },
-              children: centerLabel
-            })
-          })
-        })]
-      })]
-    }), pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        position: 'absolute',
-        left: '50%',
-        marginLeft: -layout.circleSize / 2,
-        top: 'calc(100% - 64px)',
-        // native: screenHeight - 80 + 16
-        width: layout.circleSize,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        opacity: Math.min(1, dialScale),
-        transform: `scale(${Math.min(1, dialScale)})`
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
-        side: "prev",
-        disabled: safePage <= 0,
-        onClick: () => handlePageChange(safePage - 1)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        style: {
-          padding: '6px 12px',
-          // native indicator: paddingVertical 6, paddingHorizontal 12
-          fontSize: 13,
-          fontWeight: 900,
-          fontFamily: _sharedUi.monoFont,
-          letterSpacing: 2,
-          color: _floatingToolsReact.dialColors.centerText,
-          textShadow: `0 0 6px ${_floatingToolsReact.dialColors.centerTextGlow}`
-        },
-        children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: {
-            color: _floatingToolsReact.dialColors.iconLabelMuted,
-            textShadow: 'none'
-          },
-          children: [' / ', String(pageCount).padStart(2, '0')]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
-        side: "next",
-        disabled: safePage >= pageCount - 1,
-        onClick: () => handlePageChange(safePage + 1)
-      })]
-    }), showSettingsTooltip && !settingsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltipWeb.OnboardingTooltip, {
-      title: "Welcome to Buoy!",
-      message: "Tap the center button to configure and add tools to your dial menu.",
-      onDismiss: dismissSettingsTooltip,
-      showArrow: false
-    })]
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DialMenu=DialMenu;var _react=require("react");var _floatingToolsReact=require("@buoy-gg/floating-tools-react");var _sharedUi=require("@buoy-gg/shared-ui");var _DialHyperspace=require("./DialHyperspace.js");var _OnboardingTooltipWeb=require("./OnboardingTooltip.web.js");var _jsxRuntime=require("react/jsx-runtime");const DIAL_BACKGROUND_FOCUS={x:.5,y:.5};const SETTINGS_TOOLTIP_KEY="@react_buoy_settings_tooltip_shown";let keyframesInjected=false;function injectKeyframes(){if(keyframesInjected||typeof document==="undefined")return;const o=document.createElement("style");o.textContent=(0,_floatingToolsReact.getDialCSSKeyframesString)();document.head.appendChild(o);keyframesInjected=true}const easeOutCubic=o=>1-Math.pow(1-o,3);const easeInCubic=o=>o*o*o;function DialIconItem({icon:o,index:l,totalIcons:k,position:f,progress:s,onPress:y}){const[w,D]=(0,_react.useState)(false);const[M,v]=(0,_react.useState)(false);const S=!o.icon&&o.id.startsWith("empty-");const $=!S&&o.unavailable===true;const h=!S&&!$;const{icons:F}=_floatingToolsReact.dialAnimationConfig;const m=(0,_floatingToolsReact.getIconStaggerInputRange)(l,k);let c=0;if(s<=m[1]){c=0}else if(s<=m[2]){c=(s-m[1])/(m[2]-m[1])}else{c=1}c=Math.max(0,Math.min(1,c));const b=_floatingToolsReact.DIAL_ICON_SIZE;const q=F.pressIn.scale;const B=1.1;const W=c*(M?q:w?B:1);let T=0;if(c<=0){T=0}else if(c<=.3){T=c}else{T=.3+(c-.3)*(.7/.7)}const H=f.x*c;const U=f.y*c;return(0,_jsxRuntime.jsx)("button",{role:"menuitem","aria-label":S?"Empty slot":o.name,"aria-disabled":!h,tabIndex:h?0:-1,onClick:h?y:void 0,onMouseEnter:()=>h&&D(true),onMouseLeave:()=>{D(false);v(false)},onMouseDown:()=>h&&v(true),onMouseUp:()=>v(false),style:{position:"absolute",left:"50%",top:"50%",width:b,height:b,marginLeft:-b/2,marginTop:-b/2,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:h?"pointer":"default",transform:`translate(${H}px, ${U}px) scale(${W})`,opacity:T,transition:w||M?"transform 100ms ease":"none",background:"none",border:"none",padding:0},children:S?(0,_jsxRuntime.jsx)("div",{style:{width:_floatingToolsReact.dialStyles.emptySlot.dotSize,height:_floatingToolsReact.dialStyles.emptySlot.dotSize,borderRadius:_floatingToolsReact.dialStyles.emptySlot.dotSize/2,backgroundColor:_floatingToolsReact.dialColors.emptyDotBackground,border:`${_floatingToolsReact.dialStyles.emptySlot.borderWidth}px solid ${_floatingToolsReact.dialColors.emptyDotBorder}`}}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",width:`${_floatingToolsReact.dialStyles.icon.gradientBgSizePercent}%`,height:`${_floatingToolsReact.dialStyles.icon.gradientBgSizePercent}%`,borderRadius:_floatingToolsReact.dialStyles.icon.gradientBgBorderRadius,backgroundColor:"rgba(0, 0, 0, 0.2)",opacity:_floatingToolsReact.dialStyles.icon.gradientBgOpacity}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",width:`${_floatingToolsReact.dialStyles.icon.innerGlowSizePercent}%`,height:`${_floatingToolsReact.dialStyles.icon.innerGlowSizePercent}%`,borderRadius:_floatingToolsReact.dialStyles.icon.innerGlowBorderRadius,backgroundColor:"rgba(255, 255, 255, 0.02)",opacity:_floatingToolsReact.dialStyles.icon.innerGlowOpacity}}),(0,_jsxRuntime.jsx)("div",{style:{marginBottom:_floatingToolsReact.dialStyles.icon.wrapperMarginBottom,display:"flex",alignItems:"center",justifyContent:"center",fontSize:32,filter:w?"brightness(1.2)":"none"},children:o.icon}),(0,_jsxRuntime.jsx)("span",{style:{fontSize:o.name.length>8?Math.max(_floatingToolsReact.dialStyles.icon.label.fontSize*.7,_floatingToolsReact.dialStyles.icon.label.fontSize*8/o.name.length):_floatingToolsReact.dialStyles.icon.label.fontSize,fontWeight:_floatingToolsReact.dialStyles.icon.label.fontWeight,fontFamily:_floatingToolsReact.dialStyles.icon.label.fontFamily,color:_floatingToolsReact.dialColors.iconLabel,letterSpacing:_floatingToolsReact.dialStyles.icon.label.letterSpacing,marginTop:_floatingToolsReact.dialStyles.icon.label.marginTop,textTransform:"uppercase",whiteSpace:"nowrap"},children:o.name}),$&&(0,_jsxRuntime.jsx)("span",{style:{fontSize:_floatingToolsReact.dialStyles.icon.label.fontSize-1,fontWeight:_floatingToolsReact.dialStyles.icon.label.fontWeight,fontFamily:_floatingToolsReact.dialStyles.icon.label.fontFamily,letterSpacing:_floatingToolsReact.dialStyles.icon.label.letterSpacing,color:_floatingToolsReact.floatingToolsColors.muted,textTransform:"uppercase",whiteSpace:"nowrap"},children:"Unavailable"})]})})}function PagerChevron({side:o,color:l}){const k=o==="prev"?[[15,18,9,12],[9,12,15,6]]:[[9,18,15,12],[15,12,9,6]];return(0,_jsxRuntime.jsx)("svg",{width:18,height:18,viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",children:k.map(([f,s,y,w],D)=>(0,_jsxRuntime.jsx)("line",{x1:f,y1:s,x2:y,y2:w,stroke:l,strokeWidth:2},D))})}function PagerButton({side:o,disabled:l,onClick:k}){const[f,s]=(0,_react.useState)(false);const y=l?_floatingToolsReact.dialColors.emptyDotBorder:_floatingToolsReact.dialColors.accent;return(0,_jsxRuntime.jsxs)("button",{type:"button","aria-label":`${o==="prev"?"Previous":"Next"} dial page`,disabled:l,onClick:k,onMouseDown:()=>!l&&s(true),onMouseUp:()=>s(false),onMouseLeave:()=>s(false),style:{display:"flex",alignItems:"center",gap:4,padding:"10px 16px",borderRadius:10,border:`1px solid ${_floatingToolsReact.dialColors.dialBorder}`,backgroundColor:_floatingToolsReact.dialColors.dialBackground,color:l?_floatingToolsReact.dialColors.iconLabelMuted:_floatingToolsReact.dialColors.centerText,fontSize:12,fontWeight:900,fontFamily:_sharedUi.monoFont,letterSpacing:1.5,textTransform:"uppercase",cursor:l?"default":"pointer",opacity:l?.4:1,boxShadow:l?"none":`0 0 8px ${(0,_floatingToolsReact.withAlpha)(_floatingToolsReact.dialColors.dialShadow,.4)}`,transform:f?"scale(0.92)":"scale(1)",transition:"transform 100ms ease"},children:[o==="prev"&&(0,_jsxRuntime.jsx)(PagerChevron,{side:"prev",color:y}),o==="prev"?"PREV":"NEXT",o==="next"&&(0,_jsxRuntime.jsx)(PagerChevron,{side:"next",color:y})]})}function DialMenu({icons:o,onClose:l,centerLabel:k="MENU",onCenterPress:f,settingsOpen:s=false,hintsDisabled:y=false}){const{id:w}=(0,_sharedUi.useToolBackground)();const[D,M]=(0,_react.useState)(0);const[v,S]=(0,_react.useState)(0);const[$,h]=(0,_react.useState)(0);const[F,m]=(0,_react.useState)(0);const[c,b]=(0,_react.useState)(0);const[q,B]=(0,_react.useState)(1);const[W,T]=(0,_react.useState)(false);const[H,U]=(0,_react.useState)(false);const[ne,ie]=(0,_react.useState)(false);const K=(0,_react.useRef)(null);const J=(0,_react.useRef)(null);const g=(0,_react.useRef)(null);const O=(0,_react.useRef)(false);const{entrance:E,exit:L,interaction:P}=_floatingToolsReact.dialAnimationConfig;const ae=(0,_floatingToolsReact.getDialCSSAnimationStyles)();const[N,se]=(0,_react.useState)(()=>({width:window.innerWidth,height:window.innerHeight}));(0,_react.useEffect)(()=>{const t=()=>se({width:window.innerWidth,height:window.innerHeight});window.addEventListener("resize",t);return()=>window.removeEventListener("resize",t)},[]);const i=(0,_react.useMemo)(()=>(0,_floatingToolsReact.getDialLayout)({screenWidth:N.width,maxCircleSize:Math.max(120,Math.min(320,N.height-96))}),[N]);const re=(0,_react.useMemo)(()=>(0,_floatingToolsReact.getGridLineRotations)(),[]);const le=(0,_react.useMemo)(()=>(0,_floatingToolsReact.getAllIconPositions)(_floatingToolsReact.MAX_DIAL_SLOTS,i.iconRadius),[i.iconRadius]);const[ce,de]=(0,_react.useState)(0);const A=Math.max(1,Math.ceil(o.length/_floatingToolsReact.MAX_DIAL_SLOTS));const x=Math.min(ce,A-1);const Q=(0,_react.useMemo)(()=>{const t=x*_floatingToolsReact.MAX_DIAL_SLOTS;const e=[...o.slice(t,t+_floatingToolsReact.MAX_DIAL_SLOTS)];while(e.length<_floatingToolsReact.MAX_DIAL_SLOTS){e.push({id:`empty-${e.length}`,name:"",icon:null,onPress:()=>{}})}return e},[o,x]);(0,_react.useEffect)(()=>{injectKeyframes()},[]);(0,_react.useEffect)(()=>{const t=E.backdrop.duration;const e=E.dial.rotation.duration;const d=E.centerButton.delay;const a=E.icons.delay;const r=E.icons.duration;const u=performance.now();const p=j=>{const n=j-u;M(Math.min(1,n/t));const C=Math.min(1,n/400);let I=easeOutCubic(C)*1.1;if(C>.7){I-=(C-.7)*.33}if(C>=1)I=1;S(Math.max(0,Math.min(1.05,I)));const z=Math.min(1,n/e);h(easeOutCubic(z)*360);if(n>=d){const R=Math.min(1,(n-d)/300);let Z=easeOutCubic(R)*1.15;if(R>.6){Z-=(R-.6)*.375}if(R>=1)Z=1;m(Math.max(0,Math.min(1.05,Z)))}if(n>=a){const R=Math.min(1,(n-a)/r);b(easeOutCubic(R))}const Y=a+r;if(n<Y){g.current=requestAnimationFrame(p)}else{M(1);S(1);h(360);m(1);b(1);ie(true)}};g.current=requestAnimationFrame(p);return()=>{if(g.current)cancelAnimationFrame(g.current)}},[]);const _=(0,_react.useCallback)(()=>{if(O.current)return;O.current=true;U(true);if(g.current){cancelAnimationFrame(g.current)}const t=performance.now();const e=L.icons.duration;const d=L.centerButton.duration;const a=L.dialScale.duration;const r=Math.max(d,a);const u=L.backdrop.duration;const p=j=>{const n=j-t;if(n<e){const z=easeInCubic(n/e);b(1-z);g.current=requestAnimationFrame(p);return}const C=e;if(n<C+r){b(0);const z=Math.min(1,(n-C)/d);const Y=Math.min(1,(n-C)/a);m(1-easeInCubic(z));S(1-easeInCubic(Y));g.current=requestAnimationFrame(p);return}const I=C+r;if(n<I+u){S(0);m(0);const z=(n-I)/u;M(1-z);g.current=requestAnimationFrame(p);return}M(0);l()};g.current=requestAnimationFrame(p)},[L,l]);(0,_react.useEffect)(()=>{const t=document.activeElement;const e=K.current;return()=>{if(t?.isConnected&&(document.activeElement===document.body||e?.contains(document.activeElement))){t.focus()}}},[]);(0,_react.useEffect)(()=>{if(s)return;J.current?.focus();const t=e=>{const d=K.current;if(!d)return;if(e.key==="Escape"){e.preventDefault();_()}else if(e.key==="Tab"){const a=Array.from(d.querySelectorAll('button:not(:disabled):not([aria-disabled="true"]), [tabindex="0"]')).filter(p=>p.getClientRects().length>0);const r=a[0];const u=a[a.length-1];if(!d.contains(document.activeElement)||(e.shiftKey?document.activeElement===r:document.activeElement===u)){e.preventDefault();(e.shiftKey?u:r)?.focus()}}else if(["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End"].includes(e.key)){const a=Array.from(d.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));const r=a.indexOf(document.activeElement);if(r<0||!a.length)return;e.preventDefault();const u=e.key==="Home"?0:e.key==="End"?a.length-1:(r+(e.key==="ArrowRight"||e.key==="ArrowDown"?1:-1)+a.length)%a.length;a[u].focus()}};document.addEventListener("keydown",t);return()=>document.removeEventListener("keydown",t)},[_,s]);const[X,ee]=(0,_react.useState)(false);(0,_react.useEffect)(()=>{if(y)return;let t=false;const e=setTimeout(async()=>{const d=await _sharedUi.persistentStorage.getItem(SETTINGS_TOOLTIP_KEY);if(!t&&!d)ee(true)},1200);return()=>{t=true;clearTimeout(e)}},[y]);const V=(0,_react.useCallback)(()=>{ee(false);void _sharedUi.persistentStorage.setItem(SETTINGS_TOOLTIP_KEY,"true")},[]);(0,_react.useEffect)(()=>{if(s&&X){V()}},[s,X,V]);const ue=(0,_react.useCallback)(t=>{if(t.id.startsWith("empty-")||O.current)return;const[e,d]=P.iconSelect.pulse;const a=performance.now();const r=150;const u=p=>{const j=p-a;if(j<r){const n=easeOutCubic(j/r);B(1-(1-e.scale)*n);requestAnimationFrame(u)}else if(j<r*2){const n=easeOutCubic((j-r)/r);B(e.scale+(d.scale-e.scale)*n);requestAnimationFrame(u)}else{B(1)}};requestAnimationFrame(u);setTimeout(()=>{t.onPress();_()},P.iconSelect.actionDelay)},[P.iconSelect,_]);const te=(0,_react.useCallback)(t=>{if(O.current)return;const e=Math.max(0,Math.min(t,A-1));if(e!==x)de(e)},[A,x]);const G=i.buttonSize*_floatingToolsReact.dialStyles.centerButton.containerRatio;const oe=i.buttonSize*_floatingToolsReact.dialStyles.centerButton.borderRatio;const pe=i.buttonSize*_floatingToolsReact.dialStyles.centerButton.containerRatio/2+6;const fe=ne&&!H;return(0,_jsxRuntime.jsxs)("div",{ref:K,role:"dialog","aria-label":"Dial Menu","aria-modal":"true",style:{position:"fixed",inset:0,zIndex:1e4},children:[(0,_jsxRuntime.jsx)("button",{type:"button","aria-label":"Close dial menu",tabIndex:0,onClick:_,style:{position:"absolute",inset:0,border:0,padding:0,backgroundColor:_floatingToolsReact.dialColors.dialBackdrop,opacity:D}}),(0,_jsxRuntime.jsxs)("div",{style:{position:"absolute",left:"50%",marginLeft:-i.circleSize/2,bottom:80,width:i.circleSize,height:i.circleSize,borderRadius:"50%",backgroundColor:_floatingToolsReact.dialColors.dialBackground,border:`${_floatingToolsReact.dialStyles.circle.borderWidth}px solid ${_floatingToolsReact.dialColors.dialBorder}`,boxShadow:`0 0 ${_floatingToolsReact.dialStyles.circle.shadowRadius}px ${(0,_floatingToolsReact.withAlpha)(_floatingToolsReact.dialColors.dialShadow,_floatingToolsReact.dialStyles.circle.shadowOpacity)}`,transform:`scale(${v}) rotate(${$}deg)`,opacity:v>.01?1:0,overflow:"hidden"},children:[(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,borderRadius:"50%",backgroundColor:_floatingToolsReact.dialColors.dialGradient1,opacity:_floatingToolsReact.dialStyles.gradientLayers[0].opacity}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,top:"30%",left:"30%",borderRadius:"50%",backgroundColor:_floatingToolsReact.dialColors.dialGradient2,opacity:_floatingToolsReact.dialStyles.gradientLayers[1].opacity}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,top:"50%",left:"50%",borderRadius:"50%",backgroundColor:_floatingToolsReact.dialColors.dialGradient3,opacity:_floatingToolsReact.dialStyles.gradientLayers[2].opacity}}),re.map(t=>(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",top:"50%",left:0,right:0,height:_floatingToolsReact.dialStyles.grid.lineHeight,transform:`rotate(${t}deg)`,transformOrigin:"center"},children:["left","right"].map(e=>(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",top:0,[e]:0,width:`calc(50% - ${pe}px)`,height:_floatingToolsReact.dialStyles.grid.lineHeight,backgroundColor:_floatingToolsReact.dialColors.dialGridLine}},e))},t)),(0,_jsxRuntime.jsx)("div",{"data-testid":"dial-background","data-background":w,style:{position:"absolute",inset:0,pointerEvents:"none"},children:w==="hyperspace"?(0,_jsxRuntime.jsx)(_DialHyperspace.DialHyperspace,{size:i.circleSize}):(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{focus:DIAL_BACKGROUND_FOCUS})}),Q.map((t,e)=>(0,_jsxRuntime.jsx)(DialIconItem,{icon:t,index:e,totalIcons:Q.length,position:le[e],progress:c,onPress:()=>ue(t)},e)),(0,_jsxRuntime.jsxs)("div",{style:{position:"absolute",left:"50%",top:"50%",width:G,height:G,marginLeft:-G/2,marginTop:-G/2,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:_floatingToolsReact.dialColors.hubHalo,borderRadius:i.buttonSize,overflow:"hidden",transform:`scale(${F*q})`,opacity:F>.01?1:0},children:[(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,backgroundColor:_floatingToolsReact.dialColors.dialGradient1,opacity:.5,borderRadius:i.buttonSize}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,top:"20%",left:"20%",backgroundColor:_floatingToolsReact.dialColors.dialGradient2,opacity:.3,borderRadius:i.buttonSize}}),(0,_jsxRuntime.jsx)("div",{style:{position:"absolute",inset:0,top:"40%",left:"40%",backgroundColor:_floatingToolsReact.dialColors.dialGradient3,opacity:.2,borderRadius:i.buttonSize}}),(0,_jsxRuntime.jsx)("div",{style:{width:oe,height:oe,borderRadius:i.buttonSize*_floatingToolsReact.dialStyles.centerButton.borderRadiusRatio,backgroundColor:_floatingToolsReact.dialColors.hubFill,display:"flex",alignItems:"center",justifyContent:"center"},children:(0,_jsxRuntime.jsx)("button",{ref:J,type:"button","aria-label":s?"Close settings":"Open settings",disabled:!f,onClick:f,onMouseEnter:()=>T(true),onMouseLeave:()=>T(false),style:{border:0,padding:0,background:"transparent",width:i.buttonSize,height:i.buttonSize,borderRadius:i.buttonSize/2,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:f?"pointer":"default",transform:W?`scale(${P.centerHover.scale})`:"scale(1)",transition:`transform ${P.centerHover.duration}ms ease`,animation:fe&&!W?ae.pulse:"none"},children:s?(0,_jsxRuntime.jsxs)("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",fontSize:_floatingToolsReact.dialStyles.centerButton.text.fontSize-2,fontWeight:_floatingToolsReact.dialStyles.centerButton.text.fontWeight,fontFamily:_floatingToolsReact.dialStyles.centerButton.text.fontFamily,color:_floatingToolsReact.dialColors.centerText,letterSpacing:_floatingToolsReact.dialStyles.centerButton.text.letterSpacing,textAlign:"center",textShadow:`0 0 4px ${_floatingToolsReact.dialColors.centerTextGlow}`,textTransform:"uppercase",lineHeight:1.2},children:[(0,_jsxRuntime.jsx)("span",{style:{marginBottom:-2},children:"CLOSE"}),(0,_jsxRuntime.jsx)("span",{style:{marginTop:-2},children:"SETTINGS"})]}):(0,_jsxRuntime.jsx)("span",{style:{fontSize:_floatingToolsReact.dialStyles.centerButton.text.fontSize,fontWeight:_floatingToolsReact.dialStyles.centerButton.text.fontWeight,fontFamily:_floatingToolsReact.dialStyles.centerButton.text.fontFamily,color:_floatingToolsReact.dialColors.centerText,letterSpacing:_floatingToolsReact.dialStyles.centerButton.text.letterSpacing,textAlign:"center",textShadow:`0 0 4px ${_floatingToolsReact.dialColors.centerTextGlow}`,textTransform:"uppercase"},children:k})})})]})]}),A>1&&(0,_jsxRuntime.jsxs)("div",{style:{position:"absolute",left:"50%",marginLeft:-i.circleSize/2,top:"calc(100% - 64px)",width:i.circleSize,display:"flex",alignItems:"center",justifyContent:"space-between",opacity:Math.min(1,v),transform:`scale(${Math.min(1,v)})`},children:[(0,_jsxRuntime.jsx)(PagerButton,{side:"prev",disabled:x<=0,onClick:()=>te(x-1)}),(0,_jsxRuntime.jsxs)("span",{style:{padding:"6px 12px",fontSize:13,fontWeight:900,fontFamily:_sharedUi.monoFont,letterSpacing:2,color:_floatingToolsReact.dialColors.centerText,textShadow:`0 0 6px ${_floatingToolsReact.dialColors.centerTextGlow}`},children:[String(x+1).padStart(2,"0"),(0,_jsxRuntime.jsxs)("span",{style:{color:_floatingToolsReact.dialColors.iconLabelMuted,textShadow:"none"},children:[" / ",String(A).padStart(2,"0")]})]}),(0,_jsxRuntime.jsx)(PagerButton,{side:"next",disabled:x>=A-1,onClick:()=>te(x+1)})]}),X&&!s&&(0,_jsxRuntime.jsx)(_OnboardingTooltipWeb.OnboardingTooltip,{title:"Welcome to Buoy!",message:"Tap the center button to configure and add tools to your dial menu.",onDismiss:V,showArrow:false})]})}