@buoy-gg/core 7.0.41 → 7.0.43

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

@@ -1,891 +1 @@
-"use strict";
-
-/**
- * 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)
- */
-
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { getDialLayout, getAllIconPositions, getGridLineRotations, getIconStaggerInputRange, MAX_DIAL_SLOTS, DIAL_ICON_SIZE, dialAnimationConfig, getDialCSSKeyframesString, getDialCSSAnimationStyles, dialColors, dialStyles, withAlpha, floatingToolsColors } from '@buoy-gg/floating-tools-react';
-import { persistentStorage, monoFont, ToolBackground, useToolBackground } from '@buoy-gg/shared-ui';
-import { DialHyperspace } from "./DialHyperspace.js";
-import { OnboardingTooltip } from "./OnboardingTooltip.web.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const DIAL_BACKGROUND_FOCUS = {
-  x: 0.5,
-  y: 0.5
-};
-
-// 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 = 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] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
-  const isEmpty = !icon.icon && icon.id.startsWith('empty-');
-  const isUnavailable = !isEmpty && icon.unavailable === true;
-  const interactive = !isEmpty && !isUnavailable;
-  const {
-    icons: iconConfig
-  } = dialAnimationConfig;
-
-  // Get stagger input range for this icon
-  const staggerInputRange = 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 = 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__*/_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__*/_jsx("div", {
-      style: {
-        width: dialStyles.emptySlot.dotSize,
-        height: dialStyles.emptySlot.dotSize,
-        borderRadius: dialStyles.emptySlot.dotSize / 2,
-        backgroundColor: dialColors.emptyDotBackground,
-        border: `${dialStyles.emptySlot.borderWidth}px solid ${dialColors.emptyDotBorder}`
-      }
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          width: `${dialStyles.icon.gradientBgSizePercent}%`,
-          height: `${dialStyles.icon.gradientBgSizePercent}%`,
-          borderRadius: dialStyles.icon.gradientBgBorderRadius,
-          backgroundColor: 'rgba(0, 0, 0, 0.2)',
-          opacity: dialStyles.icon.gradientBgOpacity
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          width: `${dialStyles.icon.innerGlowSizePercent}%`,
-          height: `${dialStyles.icon.innerGlowSizePercent}%`,
-          borderRadius: dialStyles.icon.innerGlowBorderRadius,
-          backgroundColor: 'rgba(255, 255, 255, 0.02)',
-          opacity: dialStyles.icon.innerGlowOpacity
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          marginBottom: 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__*/_jsx("span", {
-        style: {
-          fontSize:
-          // native: adjustsFontSizeToFit minimumFontScale 0.7 — long
-          // names shrink instead of wrapping/overflowing the slot.
-          icon.name.length > 8 ? Math.max(dialStyles.icon.label.fontSize * 0.7, dialStyles.icon.label.fontSize * 8 / icon.name.length) : dialStyles.icon.label.fontSize,
-          fontWeight: dialStyles.icon.label.fontWeight,
-          fontFamily: dialStyles.icon.label.fontFamily,
-          color: dialColors.iconLabel,
-          letterSpacing: dialStyles.icon.label.letterSpacing,
-          marginTop: dialStyles.icon.label.marginTop,
-          textTransform: 'uppercase',
-          whiteSpace: 'nowrap'
-        },
-        children: icon.name
-      }), isUnavailable &&
-      /*#__PURE__*/
-      // native DialIcon.tsx unavailableCaption: label size - 1, muted
-      _jsx("span", {
-        style: {
-          fontSize: dialStyles.icon.label.fontSize - 1,
-          fontWeight: dialStyles.icon.label.fontWeight,
-          fontFamily: dialStyles.icon.label.fontFamily,
-          letterSpacing: dialStyles.icon.label.letterSpacing,
-          color: 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__*/_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__*/_jsx("line", {
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      stroke: color,
-      strokeWidth: 2
-    }, i))
-  });
-}
-function PagerButton({
-  side,
-  disabled,
-  onClick
-}) {
-  const [isPressed, setIsPressed] = useState(false);
-
-  // native DialPagination.tsx: accent = disabled ? emptyDotBorder : dialColors.accent
-  const accent = disabled ? dialColors.emptyDotBorder : dialColors.accent;
-  return /*#__PURE__*/_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 ${dialColors.dialBorder}`,
-      backgroundColor: dialColors.dialBackground,
-      // native: buttonText night text, buttonTextDisabled iconLabelMuted
-      color: disabled ? dialColors.iconLabelMuted : dialColors.centerText,
-      fontSize: 12,
-      fontWeight: 900,
-      fontFamily: 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 ${withAlpha(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__*/_jsx(PagerChevron, {
-      side: "prev",
-      color: accent
-    }), side === 'prev' ? 'PREV' : 'NEXT', side === 'next' && /*#__PURE__*/_jsx(PagerChevron, {
-      side: "next",
-      color: accent
-    })]
-  });
-}
-
-// =============================
-// Main DialMenu Component
-// =============================
-
-export function DialMenu({
-  icons,
-  onClose,
-  centerLabel = 'MENU',
-  onCenterPress,
-  settingsOpen = false,
-  hintsDisabled = false
-}) {
-  const {
-    id: backgroundId
-  } = useToolBackground();
-
-  // Animation values
-  const [backdropOpacity, setBackdropOpacity] = useState(0);
-  const [dialScale, setDialScale] = useState(0);
-  const [dialRotation, setDialRotation] = useState(0);
-  const [centerButtonScale, setCenterButtonScale] = useState(0);
-  const [iconProgress, setIconProgress] = useState(0);
-  const [centerPulseScale, setCenterPulseScale] = useState(1);
-
-  // UI state
-  const [isHoveringCenter, setIsHoveringCenter] = useState(false);
-  const [isExiting, setIsExiting] = useState(false);
-  const [entranceComplete, setEntranceComplete] = useState(false);
-
-  // Refs
-  const dialogRef = useRef(null);
-  const centerRef = useRef(null);
-  const animationRef = useRef(null);
-  const isClosingRef = useRef(false);
-
-  // Config
-  const {
-    entrance,
-    exit,
-    interaction
-  } = dialAnimationConfig;
-  const cssAnimations = getDialCSSAnimationStyles();
-
-  // Layout
-  const [viewport, setViewport] = useState(() => ({
-    width: window.innerWidth,
-    height: window.innerHeight
-  }));
-  useEffect(() => {
-    const resize = () => setViewport({
-      width: window.innerWidth,
-      height: window.innerHeight
-    });
-    window.addEventListener('resize', resize);
-    return () => window.removeEventListener('resize', resize);
-  }, []);
-  const layout = useMemo(() => getDialLayout({
-    screenWidth: viewport.width,
-    maxCircleSize: Math.max(120, Math.min(320, viewport.height - 96))
-  }), [viewport]);
-  const gridRotations = useMemo(() => getGridLineRotations(), []);
-  const positions = useMemo(() => getAllIconPositions(MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
-
-  // Pagination: tools are split across pages of MAX_DIAL_SLOTS.
-  const [currentPage, setCurrentPage] = useState(0);
-  const pageCount = Math.max(1, Math.ceil(icons.length / MAX_DIAL_SLOTS));
-  const safePage = Math.min(currentPage, pageCount - 1);
-  const paddedIcons = useMemo(() => {
-    const start = safePage * MAX_DIAL_SLOTS;
-    const result = [...icons.slice(start, start + MAX_DIAL_SLOTS)];
-    while (result.length < MAX_DIAL_SLOTS) {
-      result.push({
-        id: `empty-${result.length}`,
-        name: '',
-        icon: null,
-        onPress: () => {}
-      });
-    }
-    return result;
-  }, [icons, safePage]);
-
-  // Inject keyframes
-  useEffect(() => {
-    injectKeyframes();
-  }, []);
-
-  // ENTRANCE Animation - runs once on mount
-  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 = 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]);
-  useEffect(() => {
-    const opener = document.activeElement;
-    const dialog = dialogRef.current;
-    return () => {
-      if (opener?.isConnected && (document.activeElement === document.body || dialog?.contains(document.activeElement))) {
-        opener.focus();
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (settingsOpen) return;
-    centerRef.current?.focus();
-    const handleKeyDown = event => {
-      const dialog = dialogRef.current;
-      if (!dialog) return;
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        handleClose();
-      } else if (event.key === 'Tab') {
-        const controls = Array.from(dialog.querySelectorAll('button:not(:disabled):not([aria-disabled="true"]), [tabindex="0"]')).filter(element => element.getClientRects().length > 0);
-        const first = controls[0];
-        const last = controls[controls.length - 1];
-        if (!dialog.contains(document.activeElement) || (event.shiftKey ? document.activeElement === first : document.activeElement === last)) {
-          event.preventDefault();
-          (event.shiftKey ? last : first)?.focus();
-        }
-      } else if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-        const items = Array.from(dialog.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
-        const current = items.indexOf(document.activeElement);
-        if (current < 0 || !items.length) return;
-        event.preventDefault();
-        const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (current + (event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
-        items[next].focus();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleClose, settingsOpen]);
-
-  // 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] = useState(false);
-  useEffect(() => {
-    if (hintsDisabled) return;
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      const seen = await persistentStorage.getItem(SETTINGS_TOOLTIP_KEY);
-      if (!cancelled && !seen) setShowSettingsTooltip(true);
-    }, 1200);
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [hintsDisabled]);
-  const dismissSettingsTooltip = useCallback(() => {
-    setShowSettingsTooltip(false);
-    void persistentStorage.setItem(SETTINGS_TOOLTIP_KEY, 'true');
-  }, []);
-  useEffect(() => {
-    if (settingsOpen && showSettingsTooltip) {
-      dismissSettingsTooltip();
-    }
-  }, [settingsOpen, showSettingsTooltip, dismissSettingsTooltip]);
-
-  // Icon press handler
-  const handleIconPress = 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 = 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 * dialStyles.centerButton.containerRatio;
-  const buttonBorderSize = layout.buttonSize * dialStyles.centerButton.borderRatio;
-  // Grid spokes stop this far from the centre: the hub's outer disc plus a breath.
-  const hubClearance = layout.buttonSize * dialStyles.centerButton.containerRatio / 2 + 6;
-  const isAnimating = entranceComplete && !isExiting;
-  return /*#__PURE__*/_jsxs("div", {
-    ref: dialogRef,
-    role: "dialog",
-    "aria-label": "Dial Menu",
-    "aria-modal": "true",
-    style: {
-      position: 'fixed',
-      inset: 0,
-      zIndex: 10000
-    },
-    children: [/*#__PURE__*/_jsx("button", {
-      type: "button",
-      "aria-label": "Close dial menu",
-      tabIndex: 0,
-      onClick: handleClose,
-      style: {
-        position: 'absolute',
-        inset: 0,
-        border: 0,
-        padding: 0,
-        backgroundColor: dialColors.dialBackdrop,
-        opacity: backdropOpacity
-      }
-    }), /*#__PURE__*/_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: dialColors.dialBackground,
-        border: `${dialStyles.circle.borderWidth}px solid ${dialColors.dialBorder}`,
-        // native: shadowColor dialShadow at shadowOpacity 0.5, shadowRadius 20
-        boxShadow: `0 0 ${dialStyles.circle.shadowRadius}px ${withAlpha(dialColors.dialShadow, dialStyles.circle.shadowOpacity)}`,
-        transform: `scale(${dialScale}) rotate(${dialRotation}deg)`,
-        opacity: dialScale > 0.01 ? 1 : 0,
-        overflow: 'hidden'
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          borderRadius: '50%',
-          backgroundColor: dialColors.dialGradient1,
-          opacity: dialStyles.gradientLayers[0].opacity
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          top: '30%',
-          left: '30%',
-          borderRadius: '50%',
-          backgroundColor: dialColors.dialGradient2,
-          opacity: dialStyles.gradientLayers[1].opacity
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          inset: 0,
-          top: '50%',
-          left: '50%',
-          borderRadius: '50%',
-          backgroundColor: dialColors.dialGradient3,
-          opacity: dialStyles.gradientLayers[2].opacity
-        }
-      }), gridRotations.map(deg => /*#__PURE__*/_jsx("div", {
-        style: {
-          position: 'absolute',
-          top: '50%',
-          left: 0,
-          right: 0,
-          height: dialStyles.grid.lineHeight,
-          transform: `rotate(${deg}deg)`,
-          transformOrigin: 'center'
-        },
-        children: ['left', 'right'].map(side => /*#__PURE__*/_jsx("div", {
-          style: {
-            position: 'absolute',
-            top: 0,
-            [side]: 0,
-            width: `calc(50% - ${hubClearance}px)`,
-            height: dialStyles.grid.lineHeight,
-            backgroundColor: dialColors.dialGridLine
-          }
-        }, side))
-      }, deg)), /*#__PURE__*/_jsx("div", {
-        "data-testid": "dial-background",
-        "data-background": backgroundId,
-        style: {
-          position: 'absolute',
-          inset: 0,
-          pointerEvents: 'none'
-        },
-        children: backgroundId === 'hyperspace' ? /*#__PURE__*/_jsx(DialHyperspace, {
-          size: layout.circleSize
-        }) : /*#__PURE__*/_jsx(ToolBackground, {
-          focus: DIAL_BACKGROUND_FOCUS
-        })
-      }), paddedIcons.map((icon, index) => /*#__PURE__*/_jsx(DialIconItem, {
-        icon: icon,
-        index: index,
-        totalIcons: paddedIcons.length,
-        position: positions[index],
-        progress: iconProgress,
-        onPress: () => handleIconPress(icon)
-      }, index)), /*#__PURE__*/_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: dialColors.hubHalo,
-          borderRadius: layout.buttonSize,
-          overflow: 'hidden',
-          transform: `scale(${centerButtonScale * centerPulseScale})`,
-          opacity: centerButtonScale > 0.01 ? 1 : 0
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            backgroundColor: dialColors.dialGradient1,
-            opacity: 0.5,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/_jsx("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            top: '20%',
-            left: '20%',
-            backgroundColor: dialColors.dialGradient2,
-            opacity: 0.3,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/_jsx("div", {
-          style: {
-            position: 'absolute',
-            inset: 0,
-            top: '40%',
-            left: '40%',
-            backgroundColor: dialColors.dialGradient3,
-            opacity: 0.2,
-            borderRadius: layout.buttonSize
-          }
-        }), /*#__PURE__*/_jsx("div", {
-          style: {
-            width: buttonBorderSize,
-            height: buttonBorderSize,
-            borderRadius: layout.buttonSize * dialStyles.centerButton.borderRadiusRatio,
-            backgroundColor: dialColors.hubFill,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          },
-          children: /*#__PURE__*/_jsx("button", {
-            ref: centerRef,
-            type: "button",
-            "aria-label": settingsOpen ? 'Close settings' : 'Open settings',
-            disabled: !onCenterPress,
-            onClick: onCenterPress,
-            onMouseEnter: () => setIsHoveringCenter(true),
-            onMouseLeave: () => setIsHoveringCenter(false),
-            style: {
-              border: 0,
-              padding: 0,
-              background: 'transparent',
-              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
-            _jsxs("span", {
-              style: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                fontSize: dialStyles.centerButton.text.fontSize - 2,
-                fontWeight: dialStyles.centerButton.text.fontWeight,
-                fontFamily: dialStyles.centerButton.text.fontFamily,
-                color: dialColors.centerText,
-                letterSpacing: dialStyles.centerButton.text.letterSpacing,
-                textAlign: 'center',
-                textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
-                textTransform: 'uppercase',
-                lineHeight: 1.2
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                style: {
-                  marginBottom: -2
-                },
-                children: "CLOSE"
-              }), /*#__PURE__*/_jsx("span", {
-                style: {
-                  marginTop: -2
-                },
-                children: "SETTINGS"
-              })]
-            }) : /*#__PURE__*/_jsx("span", {
-              style: {
-                fontSize: dialStyles.centerButton.text.fontSize,
-                fontWeight: dialStyles.centerButton.text.fontWeight,
-                fontFamily: dialStyles.centerButton.text.fontFamily,
-                color: dialColors.centerText,
-                // native DialDevTools.tsx centerText
-                letterSpacing: dialStyles.centerButton.text.letterSpacing,
-                textAlign: 'center',
-                textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
-                textTransform: 'uppercase'
-              },
-              children: centerLabel
-            })
-          })
-        })]
-      })]
-    }), pageCount > 1 && /*#__PURE__*/_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__*/_jsx(PagerButton, {
-        side: "prev",
-        disabled: safePage <= 0,
-        onClick: () => handlePageChange(safePage - 1)
-      }), /*#__PURE__*/_jsxs("span", {
-        style: {
-          padding: '6px 12px',
-          // native indicator: paddingVertical 6, paddingHorizontal 12
-          fontSize: 13,
-          fontWeight: 900,
-          fontFamily: monoFont,
-          letterSpacing: 2,
-          color: dialColors.centerText,
-          textShadow: `0 0 6px ${dialColors.centerTextGlow}`
-        },
-        children: [String(safePage + 1).padStart(2, '0'), /*#__PURE__*/_jsxs("span", {
-          style: {
-            color: dialColors.iconLabelMuted,
-            textShadow: 'none'
-          },
-          children: [' / ', String(pageCount).padStart(2, '0')]
-        })]
-      }), /*#__PURE__*/_jsx(PagerButton, {
-        side: "next",
-        disabled: safePage >= pageCount - 1,
-        onClick: () => handlePageChange(safePage + 1)
-      })]
-    }), showSettingsTooltip && !settingsOpen && /*#__PURE__*/_jsx(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";import{useState as u,useEffect as P,useMemo as Z,useRef as J,useCallback as Q}from"react";import{getDialLayout as Pe,getAllIconPositions as $e,getGridLineRotations as Le,getIconStaggerInputRange as Fe,MAX_DIAL_SLOTS as U,DIAL_ICON_SIZE as We,dialAnimationConfig as ge,getDialCSSKeyframesString as Ge,getDialCSSAnimationStyles as He,dialColors as o,dialStyles as e,withAlpha as he,floatingToolsColors as _e}from"@buoy-gg/floating-tools-react";import{persistentStorage as ye,monoFont as be,ToolBackground as je,useToolBackground as Oe}from"@buoy-gg/shared-ui";import{DialHyperspace as qe}from"./DialHyperspace.js";import{OnboardingTooltip as Ue}from"./OnboardingTooltip.web.js";import{jsx as n,Fragment as Ke,jsxs as B}from"react/jsx-runtime";const Ne={x:.5,y:.5};const Se="@react_buoy_settings_tooltip_shown";let xe=false;function Ve(){if(xe||typeof document==="undefined")return;const r=document.createElement("style");r.textContent=Ge();document.head.appendChild(r);xe=true}const G=r=>1-Math.pow(1-r,3);const le=r=>r*r*r;function Xe({icon:r,index:p,totalIcons:R,position:y,progress:l,onPress:x}){const[M,$]=u(false);const[D,I]=u(false);const w=!r.icon&&r.id.startsWith("empty-");const K=!w&&r.unavailable===true;const C=!w&&!K;const{icons:N}=ge;const b=Fe(p,R);let m=0;if(l<=b[1]){m=0}else if(l<=b[2]){m=(l-b[1])/(b[2]-b[1])}else{m=1}m=Math.max(0,Math.min(1,m));const v=We;const ee=N.pressIn.scale;const H=1.1;const V=m*(D?ee:M?H:1);let A=0;if(m<=0){A=0}else if(m<=.3){A=m}else{A=.3+(m-.3)*(.7/.7)}const te=y.x*m;const ne=y.y*m;return n("button",{role:"menuitem","aria-label":w?"Empty slot":r.name,"aria-disabled":!C,tabIndex:C?0:-1,onClick:C?x:void 0,onMouseEnter:()=>C&&$(true),onMouseLeave:()=>{$(false);I(false)},onMouseDown:()=>C&&I(true),onMouseUp:()=>I(false),style:{position:"absolute",left:"50%",top:"50%",width:v,height:v,marginLeft:-v/2,marginTop:-v/2,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:C?"pointer":"default",transform:`translate(${te}px, ${ne}px) scale(${V})`,opacity:A,transition:M||D?"transform 100ms ease":"none",background:"none",border:"none",padding:0},children:w?n("div",{style:{width:e.emptySlot.dotSize,height:e.emptySlot.dotSize,borderRadius:e.emptySlot.dotSize/2,backgroundColor:o.emptyDotBackground,border:`${e.emptySlot.borderWidth}px solid ${o.emptyDotBorder}`}}):B(Ke,{children:[n("div",{style:{position:"absolute",width:`${e.icon.gradientBgSizePercent}%`,height:`${e.icon.gradientBgSizePercent}%`,borderRadius:e.icon.gradientBgBorderRadius,backgroundColor:"rgba(0, 0, 0, 0.2)",opacity:e.icon.gradientBgOpacity}}),n("div",{style:{position:"absolute",width:`${e.icon.innerGlowSizePercent}%`,height:`${e.icon.innerGlowSizePercent}%`,borderRadius:e.icon.innerGlowBorderRadius,backgroundColor:"rgba(255, 255, 255, 0.02)",opacity:e.icon.innerGlowOpacity}}),n("div",{style:{marginBottom:e.icon.wrapperMarginBottom,display:"flex",alignItems:"center",justifyContent:"center",fontSize:32,filter:M?"brightness(1.2)":"none"},children:r.icon}),n("span",{style:{fontSize:r.name.length>8?Math.max(e.icon.label.fontSize*.7,e.icon.label.fontSize*8/r.name.length):e.icon.label.fontSize,fontWeight:e.icon.label.fontWeight,fontFamily:e.icon.label.fontFamily,color:o.iconLabel,letterSpacing:e.icon.label.letterSpacing,marginTop:e.icon.label.marginTop,textTransform:"uppercase",whiteSpace:"nowrap"},children:r.name}),K&&n("span",{style:{fontSize:e.icon.label.fontSize-1,fontWeight:e.icon.label.fontWeight,fontFamily:e.icon.label.fontFamily,letterSpacing:e.icon.label.letterSpacing,color:_e.muted,textTransform:"uppercase",whiteSpace:"nowrap"},children:"Unavailable"})]})})}function we({side:r,color:p}){const R=r==="prev"?[[15,18,9,12],[9,12,15,6]]:[[9,18,15,12],[15,12,9,6]];return n("svg",{width:18,height:18,viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",children:R.map(([y,l,x,M],$)=>n("line",{x1:y,y1:l,x2:x,y2:M,stroke:p,strokeWidth:2},$))})}function Ce({side:r,disabled:p,onClick:R}){const[y,l]=u(false);const x=p?o.emptyDotBorder:o.accent;return B("button",{type:"button","aria-label":`${r==="prev"?"Previous":"Next"} dial page`,disabled:p,onClick:R,onMouseDown:()=>!p&&l(true),onMouseUp:()=>l(false),onMouseLeave:()=>l(false),style:{display:"flex",alignItems:"center",gap:4,padding:"10px 16px",borderRadius:10,border:`1px solid ${o.dialBorder}`,backgroundColor:o.dialBackground,color:p?o.iconLabelMuted:o.centerText,fontSize:12,fontWeight:900,fontFamily:be,letterSpacing:1.5,textTransform:"uppercase",cursor:p?"default":"pointer",opacity:p?.4:1,boxShadow:p?"none":`0 0 8px ${he(o.dialShadow,.4)}`,transform:y?"scale(0.92)":"scale(1)",transition:"transform 100ms ease"},children:[r==="prev"&&n(we,{side:"prev",color:x}),r==="prev"?"PREV":"NEXT",r==="next"&&n(we,{side:"next",color:x})]})}export function DialMenu({icons:r,onClose:p,centerLabel:R="MENU",onCenterPress:y,settingsOpen:l=false,hintsDisabled:x=false}){const{id:M}=Oe();const[$,D]=u(0);const[I,w]=u(0);const[K,C]=u(0);const[N,b]=u(0);const[m,v]=u(0);const[ee,H]=u(1);const[V,A]=u(false);const[te,ne]=u(false);const[ve,ke]=u(false);const oe=J(null);const de=J(null);const S=J(null);const X=J(false);const{entrance:_,exit:j,interaction:O}=ge;const ze=He();const[ie,Be]=u(()=>({width:window.innerWidth,height:window.innerHeight}));P(()=>{const i=()=>Be({width:window.innerWidth,height:window.innerHeight});window.addEventListener("resize",i);return()=>window.removeEventListener("resize",i)},[]);const s=Z(()=>Pe({screenWidth:ie.width,maxCircleSize:Math.max(120,Math.min(320,ie.height-96))}),[ie]);const Me=Z(()=>Le(),[]);const Ie=Z(()=>$e(U,s.iconRadius),[s.iconRadius]);const[Te,Re]=u(0);const L=Math.max(1,Math.ceil(r.length/U));const k=Math.min(Te,L-1);const ue=Z(()=>{const i=k*U;const t=[...r.slice(i,i+U)];while(t.length<U){t.push({id:`empty-${t.length}`,name:"",icon:null,onPress:()=>{}})}return t},[r,k]);P(()=>{Ve()},[]);P(()=>{const i=_.backdrop.duration;const t=_.dial.rotation.duration;const f=_.centerButton.delay;const c=_.icons.delay;const d=_.icons.duration;const g=performance.now();const h=T=>{const a=T-g;D(Math.min(1,a/i));const z=Math.min(1,a/400);let F=G(z)*1.1;if(z>.7){F-=(z-.7)*.33}if(z>=1)F=1;w(Math.max(0,Math.min(1.05,F)));const E=Math.min(1,a/t);C(G(E)*360);if(a>=f){const W=Math.min(1,(a-f)/300);let ce=G(W)*1.15;if(W>.6){ce-=(W-.6)*.375}if(W>=1)ce=1;b(Math.max(0,Math.min(1.05,ce)))}if(a>=c){const W=Math.min(1,(a-c)/d);v(G(W))}const se=c+d;if(a<se){S.current=requestAnimationFrame(h)}else{D(1);w(1);C(360);b(1);v(1);ke(true)}};S.current=requestAnimationFrame(h);return()=>{if(S.current)cancelAnimationFrame(S.current)}},[]);const q=Q(()=>{if(X.current)return;X.current=true;ne(true);if(S.current){cancelAnimationFrame(S.current)}const i=performance.now();const t=j.icons.duration;const f=j.centerButton.duration;const c=j.dialScale.duration;const d=Math.max(f,c);const g=j.backdrop.duration;const h=T=>{const a=T-i;if(a<t){const E=le(a/t);v(1-E);S.current=requestAnimationFrame(h);return}const z=t;if(a<z+d){v(0);const E=Math.min(1,(a-z)/f);const se=Math.min(1,(a-z)/c);b(1-le(E));w(1-le(se));S.current=requestAnimationFrame(h);return}const F=z+d;if(a<F+g){w(0);b(0);const E=(a-F)/g;D(1-E);S.current=requestAnimationFrame(h);return}D(0);p()};S.current=requestAnimationFrame(h)},[j,p]);P(()=>{const i=document.activeElement;const t=oe.current;return()=>{if(i?.isConnected&&(document.activeElement===document.body||t?.contains(document.activeElement))){i.focus()}}},[]);P(()=>{if(l)return;de.current?.focus();const i=t=>{const f=oe.current;if(!f)return;if(t.key==="Escape"){t.preventDefault();q()}else if(t.key==="Tab"){const c=Array.from(f.querySelectorAll('button:not(:disabled):not([aria-disabled="true"]), [tabindex="0"]')).filter(h=>h.getClientRects().length>0);const d=c[0];const g=c[c.length-1];if(!f.contains(document.activeElement)||(t.shiftKey?document.activeElement===d:document.activeElement===g)){t.preventDefault();(t.shiftKey?g:d)?.focus()}}else if(["ArrowRight","ArrowDown","ArrowLeft","ArrowUp","Home","End"].includes(t.key)){const c=Array.from(f.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));const d=c.indexOf(document.activeElement);if(d<0||!c.length)return;t.preventDefault();const g=t.key==="Home"?0:t.key==="End"?c.length-1:(d+(t.key==="ArrowRight"||t.key==="ArrowDown"?1:-1)+c.length)%c.length;c[g].focus()}};document.addEventListener("keydown",i);return()=>document.removeEventListener("keydown",i)},[q,l]);const[re,pe]=u(false);P(()=>{if(x)return;let i=false;const t=setTimeout(async()=>{const f=await ye.getItem(Se);if(!i&&!f)pe(true)},1200);return()=>{i=true;clearTimeout(t)}},[x]);const ae=Q(()=>{pe(false);void ye.setItem(Se,"true")},[]);P(()=>{if(l&&re){ae()}},[l,re,ae]);const De=Q(i=>{if(i.id.startsWith("empty-")||X.current)return;const[t,f]=O.iconSelect.pulse;const c=performance.now();const d=150;const g=h=>{const T=h-c;if(T<d){const a=G(T/d);H(1-(1-t.scale)*a);requestAnimationFrame(g)}else if(T<d*2){const a=G((T-d)/d);H(t.scale+(f.scale-t.scale)*a);requestAnimationFrame(g)}else{H(1)}};requestAnimationFrame(g);setTimeout(()=>{i.onPress();q()},O.iconSelect.actionDelay)},[O.iconSelect,q]);const me=Q(i=>{if(X.current)return;const t=Math.max(0,Math.min(i,L-1));if(t!==k)Re(t)},[L,k]);const Y=s.buttonSize*e.centerButton.containerRatio;const fe=s.buttonSize*e.centerButton.borderRatio;const Ae=s.buttonSize*e.centerButton.containerRatio/2+6;const Ee=ve&&!te;return B("div",{ref:oe,role:"dialog","aria-label":"Dial Menu","aria-modal":"true",style:{position:"fixed",inset:0,zIndex:1e4},children:[n("button",{type:"button","aria-label":"Close dial menu",tabIndex:0,onClick:q,style:{position:"absolute",inset:0,border:0,padding:0,backgroundColor:o.dialBackdrop,opacity:$}}),B("div",{style:{position:"absolute",left:"50%",marginLeft:-s.circleSize/2,bottom:80,width:s.circleSize,height:s.circleSize,borderRadius:"50%",backgroundColor:o.dialBackground,border:`${e.circle.borderWidth}px solid ${o.dialBorder}`,boxShadow:`0 0 ${e.circle.shadowRadius}px ${he(o.dialShadow,e.circle.shadowOpacity)}`,transform:`scale(${I}) rotate(${K}deg)`,opacity:I>.01?1:0,overflow:"hidden"},children:[n("div",{style:{position:"absolute",inset:0,borderRadius:"50%",backgroundColor:o.dialGradient1,opacity:e.gradientLayers[0].opacity}}),n("div",{style:{position:"absolute",inset:0,top:"30%",left:"30%",borderRadius:"50%",backgroundColor:o.dialGradient2,opacity:e.gradientLayers[1].opacity}}),n("div",{style:{position:"absolute",inset:0,top:"50%",left:"50%",borderRadius:"50%",backgroundColor:o.dialGradient3,opacity:e.gradientLayers[2].opacity}}),Me.map(i=>n("div",{style:{position:"absolute",top:"50%",left:0,right:0,height:e.grid.lineHeight,transform:`rotate(${i}deg)`,transformOrigin:"center"},children:["left","right"].map(t=>n("div",{style:{position:"absolute",top:0,[t]:0,width:`calc(50% - ${Ae}px)`,height:e.grid.lineHeight,backgroundColor:o.dialGridLine}},t))},i)),n("div",{"data-testid":"dial-background","data-background":M,style:{position:"absolute",inset:0,pointerEvents:"none"},children:M==="hyperspace"?n(qe,{size:s.circleSize}):n(je,{focus:Ne})}),ue.map((i,t)=>n(Xe,{icon:i,index:t,totalIcons:ue.length,position:Ie[t],progress:m,onPress:()=>De(i)},t)),B("div",{style:{position:"absolute",left:"50%",top:"50%",width:Y,height:Y,marginLeft:-Y/2,marginTop:-Y/2,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:o.hubHalo,borderRadius:s.buttonSize,overflow:"hidden",transform:`scale(${N*ee})`,opacity:N>.01?1:0},children:[n("div",{style:{position:"absolute",inset:0,backgroundColor:o.dialGradient1,opacity:.5,borderRadius:s.buttonSize}}),n("div",{style:{position:"absolute",inset:0,top:"20%",left:"20%",backgroundColor:o.dialGradient2,opacity:.3,borderRadius:s.buttonSize}}),n("div",{style:{position:"absolute",inset:0,top:"40%",left:"40%",backgroundColor:o.dialGradient3,opacity:.2,borderRadius:s.buttonSize}}),n("div",{style:{width:fe,height:fe,borderRadius:s.buttonSize*e.centerButton.borderRadiusRatio,backgroundColor:o.hubFill,display:"flex",alignItems:"center",justifyContent:"center"},children:n("button",{ref:de,type:"button","aria-label":l?"Close settings":"Open settings",disabled:!y,onClick:y,onMouseEnter:()=>A(true),onMouseLeave:()=>A(false),style:{border:0,padding:0,background:"transparent",width:s.buttonSize,height:s.buttonSize,borderRadius:s.buttonSize/2,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:y?"pointer":"default",transform:V?`scale(${O.centerHover.scale})`:"scale(1)",transition:`transform ${O.centerHover.duration}ms ease`,animation:Ee&&!V?ze.pulse:"none"},children:l?B("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",fontSize:e.centerButton.text.fontSize-2,fontWeight:e.centerButton.text.fontWeight,fontFamily:e.centerButton.text.fontFamily,color:o.centerText,letterSpacing:e.centerButton.text.letterSpacing,textAlign:"center",textShadow:`0 0 4px ${o.centerTextGlow}`,textTransform:"uppercase",lineHeight:1.2},children:[n("span",{style:{marginBottom:-2},children:"CLOSE"}),n("span",{style:{marginTop:-2},children:"SETTINGS"})]}):n("span",{style:{fontSize:e.centerButton.text.fontSize,fontWeight:e.centerButton.text.fontWeight,fontFamily:e.centerButton.text.fontFamily,color:o.centerText,letterSpacing:e.centerButton.text.letterSpacing,textAlign:"center",textShadow:`0 0 4px ${o.centerTextGlow}`,textTransform:"uppercase"},children:R})})})]})]}),L>1&&B("div",{style:{position:"absolute",left:"50%",marginLeft:-s.circleSize/2,top:"calc(100% - 64px)",width:s.circleSize,display:"flex",alignItems:"center",justifyContent:"space-between",opacity:Math.min(1,I),transform:`scale(${Math.min(1,I)})`},children:[n(Ce,{side:"prev",disabled:k<=0,onClick:()=>me(k-1)}),B("span",{style:{padding:"6px 12px",fontSize:13,fontWeight:900,fontFamily:be,letterSpacing:2,color:o.centerText,textShadow:`0 0 6px ${o.centerTextGlow}`},children:[String(k+1).padStart(2,"0"),B("span",{style:{color:o.iconLabelMuted,textShadow:"none"},children:[" / ",String(L).padStart(2,"0")]})]}),n(Ce,{side:"next",disabled:k>=L-1,onClick:()=>me(k+1)})]}),re&&!l&&n(Ue,{title:"Welcome to Buoy!",message:"Tap the center button to configure and add tools to your dial menu.",onDismiss:ae,showArrow:false})]})}