@buoy-gg/core 1.7.7 → 1.7.8

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

@@ -0,0 +1,590 @@
+"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.
+ *
+ * Animation behavior matches mobile exactly - see docs/dial-animation-spec.md
+ *
+ * @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, dialAnimationConfig, getDialCSSKeyframesString, getDialCSSAnimationStyles, dialColors, dialStyles } from '@buoy-gg/floating-tools-react';
+
+// Inject CSS keyframes once on module load
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 {
+    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 = 60;
+  const pressedScale = iconConfig.pressIn.scale;
+  const hoveredScale = 1.1;
+  const scale = iconProgress * (isPressed ? pressedScale : isHovered ? hoveredScale : 1);
+
+  // Opacity interpolation
+  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": isEmpty,
+    tabIndex: isEmpty ? -1 : 0,
+    onClick: isEmpty ? undefined : onPress,
+    onMouseEnter: () => !isEmpty && setIsHovered(true),
+    onMouseLeave: () => {
+      setIsHovered(false);
+      setIsPressed(false);
+    },
+    onMouseDown: () => !isEmpty && 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: isEmpty ? 'default' : 'pointer',
+      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,
+          filter: isHovered ? 'brightness(1.2)' : 'none'
+        },
+        children: icon.icon
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 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'
+        },
+        children: icon.name
+      })]
+    })
+  });
+}
+
+// =============================
+// Main DialMenu Component
+// =============================
+
+export function DialMenu({
+  icons,
+  onClose,
+  centerLabel = 'MENU',
+  onCenterPress
+}) {
+  // 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 [triggerGlitch, setTriggerGlitch] = useState(0);
+  const [isExiting, setIsExiting] = useState(false);
+  const [entranceComplete, setEntranceComplete] = useState(false);
+
+  // Refs
+  const animationRef = useRef(null);
+  const glitchIntervalRef = useRef(null);
+  const isClosingRef = useRef(false);
+
+  // Config
+  const {
+    entrance,
+    exit,
+    continuous,
+    interaction
+  } = dialAnimationConfig;
+  const cssAnimations = getDialCSSAnimationStyles();
+
+  // Layout
+  const layout = useMemo(() => getDialLayout({
+    screenWidth: window.innerWidth
+  }), []);
+  const gridRotations = useMemo(() => getGridLineRotations(), []);
+  const positions = useMemo(() => getAllIconPositions(MAX_DIAL_SLOTS, layout.iconRadius), [layout.iconRadius]);
+  const paddedIcons = useMemo(() => {
+    const result = [...icons.slice(0, MAX_DIAL_SLOTS)];
+    while (result.length < MAX_DIAL_SLOTS) {
+      result.push({
+        id: `empty-${result.length}`,
+        name: '',
+        icon: null,
+        onPress: () => {}
+      });
+    }
+    return result;
+  }, [icons]);
+
+  // 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 glitchInterval = continuous.glitch.interval;
+    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);
+
+    // Glitch interval
+    glitchIntervalRef.current = setInterval(() => {
+      setTriggerGlitch(prev => prev + 1);
+    }, glitchInterval);
+    return () => {
+      if (animationRef.current) cancelAnimationFrame(animationRef.current);
+      if (glitchIntervalRef.current) clearInterval(glitchIntervalRef.current);
+    };
+  }, []);
+
+  // EXIT Animation
+  const handleClose = useCallback(() => {
+    if (isClosingRef.current) return;
+    isClosingRef.current = true;
+    setIsExiting(true);
+    if (glitchIntervalRef.current) {
+      clearInterval(glitchIntervalRef.current);
+      glitchIntervalRef.current = null;
+    }
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    const startTime = performance.now();
+    const iconsDuration = exit.icons.duration;
+    const dialDuration = Math.max(exit.centerButton.duration, exit.dialScale.duration);
+    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 (300 - 550ms)
+      const step2Start = iconsDuration;
+      if (elapsed < step2Start + dialDuration) {
+        setIconProgress(0);
+        const progress = easeInCubic((elapsed - step2Start) / dialDuration);
+        setDialScale(1 - progress);
+        setCenterButtonScale(1 - progress);
+        animationRef.current = requestAnimationFrame(animate);
+        return;
+      }
+
+      // Step 3: Backdrop fade (550 - 750ms)
+      const step3Start = step2Start + dialDuration;
+      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
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleClose]);
+
+  // 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]);
+
+  // Computed values
+  const buttonContainerSize = layout.buttonSize * dialStyles.centerButton.containerRatio;
+  const buttonBorderSize = layout.buttonSize * dialStyles.centerButton.borderRatio;
+  const isAnimating = entranceComplete && !isExiting;
+  return /*#__PURE__*/_jsxs("div", {
+    role: "dialog",
+    "aria-label": "Dial Menu",
+    "aria-modal": "true",
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 10000,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [/*#__PURE__*/_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: dialColors.dialBackdrop,
+        opacity: backdropOpacity
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        animation: isAnimating ? cssAnimations.floating : 'none'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          animation: triggerGlitch > 0 && isAnimating ? cssAnimations.glitch : 'none'
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          style: {
+            position: 'relative',
+            width: layout.circleSize,
+            height: layout.circleSize,
+            borderRadius: '50%',
+            backgroundColor: dialColors.dialBackground,
+            border: `${dialStyles.circle.borderWidth}px solid ${dialColors.dialBorder}`,
+            boxShadow: `0 0 ${dialStyles.circle.shadowRadius}px ${dialColors.dialShadow}`,
+            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,
+              backgroundColor: dialColors.dialGridLine,
+              transform: `rotate(${deg}deg)`,
+              transformOrigin: 'center'
+            }
+          }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/_jsx(DialIconItem, {
+            icon: icon,
+            index: index,
+            totalIcons: paddedIcons.length,
+            position: positions[index],
+            progress: iconProgress,
+            onPress: () => handleIconPress(icon)
+          }, icon.id)), /*#__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',
+              backgroundColor: dialColors.dialBackground,
+              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.dialGridLine,
+                border: `${dialStyles.centerButton.borderWidth}px solid ${dialColors.dialBorder}`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              },
+              children: /*#__PURE__*/_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.breathing : 'none'
+                },
+                children: /*#__PURE__*/_jsx("span", {
+                  style: {
+                    fontSize: dialStyles.centerButton.text.fontSize,
+                    fontWeight: dialStyles.centerButton.text.fontWeight,
+                    fontFamily: dialStyles.centerButton.text.fontFamily,
+                    color: dialColors.centerText,
+                    letterSpacing: dialStyles.centerButton.text.letterSpacing,
+                    textShadow: `0 0 4px ${dialColors.centerTextGlow}`,
+                    textTransform: 'uppercase'
+                  },
+                  children: centerLabel
+                })
+              })
+            })]
+          })]
+        })
+      }, triggerGlitch)
+    })]
+  });
+}