@buoy-gg/floating-tools-core 7.0.41 → 7.0.43

package/lib/commonjs/dial.js

@@ -1,639 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dialStyles = exports.dialColors = exports.dialCSSBeziers = exports.dialAnimationConfig = exports.MAX_DIAL_SLOTS = exports.DIAL_START_ANGLE = exports.DIAL_ICON_SIZE = exports.DIAL_ICON_PADDING = exports.DIAL_ICON_GLYPH_SIZE = exports.DIAL_GRID_LINE_COUNT = exports.DIAL_BUTTON_SIZE = void 0;
-exports.generateDialCSSKeyframes = generateDialCSSKeyframes;
-exports.getAllIconPositions = getAllIconPositions;
-exports.getDialCSSAnimationStyles = getDialCSSAnimationStyles;
-exports.getDialCSSKeyframesString = getDialCSSKeyframesString;
-exports.getDialLayout = getDialLayout;
-exports.getGridLineRotations = getGridLineRotations;
-exports.getIconAngle = getIconAngle;
-exports.getIconPosition = getIconPosition;
-exports.getIconStaggerInputRange = getIconStaggerInputRange;
-exports.getSpiralAnimationPosition = getSpiralAnimationPosition;
-exports.getStaggeredIconProgress = getStaggeredIconProgress;
-var _fonts = require("./fonts");
-/**
- * Dial Menu - Shared layout calculations, colors, and styling.
- *
- * Pure configuration and math functions for the dial menu.
- * No React or platform-specific code.
- */
-
-// =============================
-// Constants
-// =============================
-
-/** Maximum number of slots in the dial */
-const MAX_DIAL_SLOTS = exports.MAX_DIAL_SLOTS = 6;
-
-/** Starting angle for first icon (top of circle, -90 degrees in radians) */
-const DIAL_START_ANGLE = exports.DIAL_START_ANGLE = -1 * Math.PI / 2;
-
-/** Default button size in the center */
-const DIAL_BUTTON_SIZE = exports.DIAL_BUTTON_SIZE = 80;
-
-/** Default icon view size */
-const DIAL_ICON_SIZE = exports.DIAL_ICON_SIZE = 60;
-
-/**
- * Size of the icon GLYPH inside a dial slot. The slot (DIAL_ICON_SIZE) also
- * holds the label (and "Unavailable" caption), so the glyph must be smaller —
- * rendering a glyph at DIAL_ICON_SIZE overflows the slot and dwarfs its
- * neighbors.
- */
-const DIAL_ICON_GLYPH_SIZE = exports.DIAL_ICON_GLYPH_SIZE = 32;
-
-/** Padding from edge of circle to icons */
-const DIAL_ICON_PADDING = exports.DIAL_ICON_PADDING = 20;
-
-/** Number of grid lines in the dial */
-const DIAL_GRID_LINE_COUNT = exports.DIAL_GRID_LINE_COUNT = 6;
-
-// =============================
-// Dial Colors
-// =============================
-
-/**
- * Color palette for the dial menu — night theme.
- *
- * Values mirror the night tokens in @buoy-gg/shared-ui `ui/night/nightTheme.ts`
- * (kept as literals so this module stays dependency-free): near-black surfaces,
- * neutral hairlines, dark shadows instead of colored glows, and the brand green
- * surviving only as the single small accent.
- *
- * Property names match existing mobile implementation for compatibility.
- */
-const dialColors = exports.dialColors = {
-  /** Background color for the dial circle (night sheet) */
-  dialBackground: '#050505',
-  /** Gradient layer colors — faint neutral lifts for depth */
-  dialGradient1: 'rgba(255, 255, 255, 0.05)',
-  dialGradient2: 'rgba(255, 255, 255, 0.03)',
-  dialGradient3: 'rgba(255, 255, 255, 0.06)',
-  /** Border color for dial and buttons — neutral hairline */
-  dialBorder: 'rgba(255, 255, 255, 0.12)',
-  /** Shadow color — plain dark drop shadow, no colored glow */
-  dialShadow: '#000000',
-  /** Grid line color (night separator) */
-  dialGridLine: 'rgba(255, 255, 255, 0.08)',
-  /** Backdrop overlay color */
-  dialBackdrop: 'rgba(0, 0, 0, 0.85)',
-  /** Center hub — glass. The inner button is a soft dark puck (enough ink to
-   *  keep BUOY / PRO legible over a bright core) and the outer disc a barely-
-   *  there shade; no rings, so the tool background reads through the middle
-   *  of the dial. */
-  hubFill: 'rgba(5, 5, 5, 0.34)',
-  hubHalo: 'rgba(5, 5, 5, 0.12)',
-  /** Center button text color (night text) */
-  centerText: '#ECEDEE',
-  /** Center button text halo — dark, keeps text legible over star fields */
-  centerTextGlow: 'rgba(0, 0, 0, 0.6)',
-  /** Icon label color (night text) */
-  iconLabel: '#ECEDEE',
-  /** Muted companion for labels (night textSecondary) */
-  iconLabelMuted: '#9BA1A6',
-  /** The one brand accent (night accent, Buoy green) */
-  accent: '#20C997',
-  /** Empty slot dot background (night fill) */
-  emptyDotBackground: 'rgba(255, 255, 255, 0.06)',
-  /** Empty slot dot border */
-  emptyDotBorder: 'rgba(255, 255, 255, 0.16)'
-};
-// =============================
-// Dial Styling Configuration
-// =============================
-
-/**
- * Styling configuration for the dial menu.
- * All numeric values that affect appearance.
- */
-const dialStyles = exports.dialStyles = {
-  // Backdrop
-  backdrop: {
-    opacity: 0.85
-  },
-  // Main circle
-  circle: {
-    borderWidth: 1,
-    shadowOpacity: 0.5,
-    shadowRadius: 20
-  },
-  // Gradient layers (for depth effect)
-  gradientLayers: [{
-    opacity: 0.6,
-    offsetPercent: 0
-  }, {
-    opacity: 0.4,
-    offsetPercent: 30
-  }, {
-    opacity: 0.3,
-    offsetPercent: 50
-  }],
-  // Grid lines
-  grid: {
-    lineCount: 6,
-    lineHeight: 1,
-    /** Rotation angles in degrees for each line */
-    getLineRotations: () => Array.from({
-      length: 6
-    }, (_, i) => i * 60)
-  },
-  // Center button
-  centerButton: {
-    /** Button container is this multiple of button size */
-    containerRatio: 1.5,
-    /** Button border wrapper is this multiple of button size */
-    borderRatio: 1.2,
-    /** Border radius ratio */
-    borderRadiusRatio: 0.6,
-    borderWidth: 2,
-    text: {
-      fontSize: 10,
-      fontWeight: '900',
-      letterSpacing: 1,
-      fontFamily: _fonts.monoFont
-    },
-    proText: {
-      fontSize: 8,
-      letterSpacing: 2
-    }
-  },
-  // Icon items
-  icon: {
-    /** Background gradient size as percent of icon size */
-    gradientBgSizePercent: 85,
-    gradientBgBorderRadius: 12,
-    gradientBgOpacity: 0.3,
-    /** Inner glow size as percent of icon size */
-    innerGlowSizePercent: 70,
-    innerGlowBorderRadius: 10,
-    innerGlowOpacity: 0.5,
-    label: {
-      fontSize: 8,
-      fontWeight: '900',
-      letterSpacing: 0.3,
-      fontFamily: _fonts.monoFont,
-      marginTop: 2
-    },
-    /** Icon wrapper margin bottom */
-    wrapperMarginBottom: 4
-  },
-  // Empty slot
-  emptySlot: {
-    dotSize: 12,
-    borderWidth: 1
-  }
-};
-
-// =============================
-// Helper to generate grid line rotations
-// =============================
-
-/**
- * Get rotation angles for grid lines.
- * @param count - Number of grid lines (default: 6)
- * @returns Array of rotation angles in degrees
- */
-function getGridLineRotations(count = DIAL_GRID_LINE_COUNT) {
-  return Array.from({
-    length: count
-  }, (_, i) => i * (360 / count));
-}
-
-// =============================
-// Layout Calculations
-// =============================
-
-/**
- * Calculate dial layout dimensions based on screen size.
- */
-function getDialLayout(config) {
-  const {
-    screenWidth,
-    maxCircleSize = 320,
-    circleSizeRatio = 0.75,
-    iconSize = DIAL_ICON_SIZE,
-    iconPadding = DIAL_ICON_PADDING
-  } = config;
-  const circleSize = Math.min(screenWidth * circleSizeRatio, maxCircleSize);
-  const circleRadius = circleSize / 2;
-  const iconRadius = circleRadius - iconSize / 2 - iconPadding;
-  return {
-    circleSize,
-    circleRadius,
-    iconRadius,
-    iconSize,
-    buttonSize: DIAL_BUTTON_SIZE
-  };
-}
-
-// =============================
-// Icon Position Calculations
-// =============================
-
-/**
- * Get the angle for an icon at a given index.
- *
- * @param index - Icon index (0-based)
- * @param totalIcons - Total number of icon slots
- * @param startAngle - Starting angle in radians (default: top of circle)
- */
-function getIconAngle(index, totalIcons, startAngle = DIAL_START_ANGLE) {
-  const anglePerIcon = 2 * Math.PI / totalIcons;
-  return startAngle + anglePerIcon * index;
-}
-
-/**
- * Get the position for an icon at a given index.
- *
- * @param index - Icon index (0-based)
- * @param totalIcons - Total number of icon slots
- * @param radius - Distance from center to icon
- * @param startAngle - Starting angle in radians (default: top of circle)
- */
-function getIconPosition(index, totalIcons, radius, startAngle = DIAL_START_ANGLE) {
-  const angle = getIconAngle(index, totalIcons, startAngle);
-  return {
-    x: radius * Math.cos(angle),
-    y: radius * Math.sin(angle),
-    angle
-  };
-}
-
-/**
- * Get positions for all icons in the dial.
- *
- * @param totalIcons - Total number of icon slots
- * @param radius - Distance from center to icons
- * @param startAngle - Starting angle in radians (default: top of circle)
- */
-function getAllIconPositions(totalIcons, radius, startAngle = DIAL_START_ANGLE) {
-  return Array.from({
-    length: totalIcons
-  }, (_, index) => getIconPosition(index, totalIcons, radius, startAngle));
-}
-
-// =============================
-// Animation Timing
-// =============================
-
-/**
- * Get the interpolation input range for staggered icon animation.
- * Used to create smooth entrance animations with stagger.
- *
- * @param index - Icon index (0-based)
- * @param totalIcons - Total number of icons
- * @param staggerRatio - Delay ratio per icon (default: 0.1)
- */
-function getIconStaggerInputRange(index, totalIcons, staggerRatio = 0.1) {
-  const staggerDelay = index * staggerRatio;
-  const maxStagger = (totalIcons - 1) * staggerRatio;
-  return [0, staggerDelay, staggerDelay + (1 - maxStagger), 1];
-}
-
-// =============================
-// Comprehensive Animation Config
-// =============================
-
-/**
- * Easing function names used in animations.
- */
-
-/**
- * Spring animation configuration.
- */
-
-/**
- * Comprehensive animation configuration for the dial menu.
- * All timing, easing, and effect parameters in one place.
- */
-const dialAnimationConfig = exports.dialAnimationConfig = {
-  /** Entrance animation sequence */
-  entrance: {
-    /** Backdrop fade in */
-    backdrop: {
-      duration: 400,
-      easing: 'linear'
-    },
-    /** Dial circle animations */
-    dial: {
-      /** Spring scale from 0 to 1 */
-      scale: {
-        type: 'spring',
-        damping: 15,
-        stiffness: 150,
-        mass: 1
-      },
-      /** 360 degree rotation on entrance */
-      rotation: {
-        duration: 800,
-        degrees: 360,
-        easing: 'easeOutCubic'
-      }
-    },
-    /** Center button spring scale with delay */
-    centerButton: {
-      delay: 300,
-      type: 'spring',
-      damping: 10,
-      stiffness: 200
-    },
-    /** Icons stagger entrance */
-    icons: {
-      delay: 500,
-      duration: 600,
-      easing: 'easeOutCubic'
-    },
-    /** Circuit traces fade in */
-    circuitTraces: {
-      delay: 600,
-      duration: 1000
-    }
-  },
-  /** Exit animation sequence */
-  exit: {
-    /** Icons collapse back to center */
-    icons: {
-      duration: 300,
-      easing: 'easeInCubic'
-    },
-    /** Center button scale down */
-    centerButton: {
-      duration: 200,
-      easing: 'easeInCubic'
-    },
-    /** Dial scale down */
-    dialScale: {
-      duration: 250,
-      easing: 'easeInCubic'
-    },
-    /** Backdrop fade out */
-    backdrop: {
-      duration: 200
-    }
-  },
-  /** Continuous looping effects */
-  continuous: {
-    /** Glitch effect - horizontal jitter */
-    glitch: {
-      interval: 3000,
-      offset: 2,
-      stepDuration: 50
-    },
-    /** Pulse effect - subtle scale oscillation */
-    pulse: {
-      minScale: 0.98,
-      maxScale: 1.02,
-      duration: 1000,
-      easing: 'easeInOutCubic'
-    },
-    /** Floating effect - vertical bobbing */
-    floating: {
-      minY: 0,
-      maxY: -8,
-      duration: 3000,
-      easing: 'easeInOutCubic'
-    },
-    /** Breathing effect - scale on center button */
-    breathing: {
-      minScale: 0.98,
-      maxScale: 1.05,
-      duration: 2500,
-      easing: 'easeInOutCubic'
-    }
-  },
-  /** Icon-specific animations */
-  icons: {
-    /** Stagger ratio for entrance (0-1 per icon) */
-    staggerRatio: 0.1,
-    /** Spiral effect parameters */
-    spiral: {
-      /** Start rotation in radians (2π = full rotation) */
-      startRotation: Math.PI * 2,
-      /** End rotation in radians */
-      endRotation: 0
-    },
-    /** Opacity interpolation during entrance */
-    opacity: {
-      inputRange: [0, 0.3, 1],
-      outputRange: [0, 0.3, 1]
-    },
-    /** Press in animation */
-    pressIn: {
-      scale: 0.95,
-      type: 'spring',
-      damping: 15,
-      stiffness: 400
-    },
-    /** Press out animation */
-    pressOut: {
-      scale: 1,
-      type: 'spring',
-      damping: 15,
-      stiffness: 400
-    }
-  },
-  /** User interaction animations */
-  interaction: {
-    /** Icon selection pulse effect */
-    iconSelect: {
-      pulse: [{
-        scale: 0.9,
-        damping: 15,
-        stiffness: 500
-      }, {
-        scale: 1,
-        damping: 10,
-        stiffness: 200
-      }],
-      actionDelay: 50
-    },
-    /** Center button hover effect */
-    centerHover: {
-      scale: 1.05,
-      duration: 150
-    }
-  }
-};
-// =============================
-// CSS Bezier Curve Equivalents
-// =============================
-
-/**
- * CSS cubic-bezier approximations for React Native springs.
- * These provide similar visual feel in CSS transitions/animations.
- */
-const dialCSSBeziers = exports.dialCSSBeziers = {
-  // Spring approximations (derived from damping/stiffness values)
-  /** Spring: damping 15, stiffness 150 (dial scale) */
-  dialScale: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-  /** Spring: damping 10, stiffness 200 (center button) */
-  centerButton: 'cubic-bezier(0.25, 1.7, 0.55, 1)',
-  /** Spring: damping 15, stiffness 400 (icon press) */
-  iconPress: 'cubic-bezier(0.22, 1.2, 0.36, 1)',
-  /** Spring: damping 15, stiffness 500 (icon select pulse) */
-  iconSelectPulse: 'cubic-bezier(0.18, 1.15, 0.32, 1)',
-  // Standard easing curves
-  /** Decelerate - for entrance animations */
-  easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
-  /** Accelerate - for exit animations */
-  easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)',
-  /** Smooth in-out - for continuous effects */
-  easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)',
-  /** Linear */
-  linear: 'linear'
-};
-// =============================
-// CSS Keyframe Generators
-// =============================
-
-/**
- * Generate CSS @keyframes definitions for dial animations.
- * Can be injected into a <style> tag or used with CSS-in-JS.
- */
-function generateDialCSSKeyframes() {
-  const c = dialAnimationConfig.continuous;
-  return {
-    /** Glitch effect - horizontal jitter */
-    dialGlitch: `@keyframes dialGlitch {
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.dialStyles=exports.dialColors=exports.dialCSSBeziers=exports.dialAnimationConfig=exports.MAX_DIAL_SLOTS=exports.DIAL_START_ANGLE=exports.DIAL_ICON_SIZE=exports.DIAL_ICON_PADDING=exports.DIAL_ICON_GLYPH_SIZE=exports.DIAL_GRID_LINE_COUNT=exports.DIAL_BUTTON_SIZE=void 0;exports.generateDialCSSKeyframes=generateDialCSSKeyframes;exports.getAllIconPositions=getAllIconPositions;exports.getDialCSSAnimationStyles=getDialCSSAnimationStyles;exports.getDialCSSKeyframesString=getDialCSSKeyframesString;exports.getDialLayout=getDialLayout;exports.getGridLineRotations=getGridLineRotations;exports.getIconAngle=getIconAngle;exports.getIconPosition=getIconPosition;exports.getIconStaggerInputRange=getIconStaggerInputRange;exports.getSpiralAnimationPosition=getSpiralAnimationPosition;exports.getStaggeredIconProgress=getStaggeredIconProgress;var _fonts=require("./fonts");const MAX_DIAL_SLOTS=exports.MAX_DIAL_SLOTS=6;const DIAL_START_ANGLE=exports.DIAL_START_ANGLE=-1*Math.PI/2;const DIAL_BUTTON_SIZE=exports.DIAL_BUTTON_SIZE=80;const DIAL_ICON_SIZE=exports.DIAL_ICON_SIZE=60;const DIAL_ICON_GLYPH_SIZE=exports.DIAL_ICON_GLYPH_SIZE=32;const DIAL_ICON_PADDING=exports.DIAL_ICON_PADDING=20;const DIAL_GRID_LINE_COUNT=exports.DIAL_GRID_LINE_COUNT=6;const dialColors=exports.dialColors={dialBackground:"#050505",dialGradient1:"rgba(255, 255, 255, 0.05)",dialGradient2:"rgba(255, 255, 255, 0.03)",dialGradient3:"rgba(255, 255, 255, 0.06)",dialBorder:"rgba(255, 255, 255, 0.12)",dialShadow:"#000000",dialGridLine:"rgba(255, 255, 255, 0.08)",dialBackdrop:"rgba(0, 0, 0, 0.85)",hubFill:"rgba(5, 5, 5, 0.34)",hubHalo:"rgba(5, 5, 5, 0.12)",centerText:"#ECEDEE",centerTextGlow:"rgba(0, 0, 0, 0.6)",iconLabel:"#ECEDEE",iconLabelMuted:"#9BA1A6",accent:"#20C997",emptyDotBackground:"rgba(255, 255, 255, 0.06)",emptyDotBorder:"rgba(255, 255, 255, 0.16)"};const dialStyles=exports.dialStyles={backdrop:{opacity:.85},circle:{borderWidth:1,shadowOpacity:.5,shadowRadius:20},gradientLayers:[{opacity:.6,offsetPercent:0},{opacity:.4,offsetPercent:30},{opacity:.3,offsetPercent:50}],grid:{lineCount:6,lineHeight:1,getLineRotations:()=>Array.from({length:6},(t,a)=>a*60)},centerButton:{containerRatio:1.5,borderRatio:1.2,borderRadiusRatio:.6,borderWidth:2,text:{fontSize:10,fontWeight:"900",letterSpacing:1,fontFamily:_fonts.monoFont},proText:{fontSize:8,letterSpacing:2}},icon:{gradientBgSizePercent:85,gradientBgBorderRadius:12,gradientBgOpacity:.3,innerGlowSizePercent:70,innerGlowBorderRadius:10,innerGlowOpacity:.5,label:{fontSize:8,fontWeight:"900",letterSpacing:.3,fontFamily:_fonts.monoFont,marginTop:2},wrapperMarginBottom:4},emptySlot:{dotSize:12,borderWidth:1}};function getGridLineRotations(t=DIAL_GRID_LINE_COUNT){return Array.from({length:t},(a,i)=>i*(360/t))}function getDialLayout(t){const{screenWidth:a,maxCircleSize:i=320,circleSizeRatio:e=.75,iconSize:o=DIAL_ICON_SIZE,iconPadding:c=DIAL_ICON_PADDING}=t;const s=Math.min(a*e,i);const n=s/2;const r=n-o/2-c;return{circleSize:s,circleRadius:n,iconRadius:r,iconSize:o,buttonSize:DIAL_BUTTON_SIZE}}function getIconAngle(t,a,i=DIAL_START_ANGLE){const e=2*Math.PI/a;return i+e*t}function getIconPosition(t,a,i,e=DIAL_START_ANGLE){const o=getIconAngle(t,a,e);return{x:i*Math.cos(o),y:i*Math.sin(o),angle:o}}function getAllIconPositions(t,a,i=DIAL_START_ANGLE){return Array.from({length:t},(e,o)=>getIconPosition(o,t,a,i))}function getIconStaggerInputRange(t,a,i=.1){const e=t*i;const o=(a-1)*i;return[0,e,e+(1-o),1]}const dialAnimationConfig=exports.dialAnimationConfig={entrance:{backdrop:{duration:400,easing:"linear"},dial:{scale:{type:"spring",damping:15,stiffness:150,mass:1},rotation:{duration:800,degrees:360,easing:"easeOutCubic"}},centerButton:{delay:300,type:"spring",damping:10,stiffness:200},icons:{delay:500,duration:600,easing:"easeOutCubic"},circuitTraces:{delay:600,duration:1e3}},exit:{icons:{duration:300,easing:"easeInCubic"},centerButton:{duration:200,easing:"easeInCubic"},dialScale:{duration:250,easing:"easeInCubic"},backdrop:{duration:200}},continuous:{glitch:{interval:3e3,offset:2,stepDuration:50},pulse:{minScale:.98,maxScale:1.02,duration:1e3,easing:"easeInOutCubic"},floating:{minY:0,maxY:-8,duration:3e3,easing:"easeInOutCubic"},breathing:{minScale:.98,maxScale:1.05,duration:2500,easing:"easeInOutCubic"}},icons:{staggerRatio:.1,spiral:{startRotation:Math.PI*2,endRotation:0},opacity:{inputRange:[0,.3,1],outputRange:[0,.3,1]},pressIn:{scale:.95,type:"spring",damping:15,stiffness:400},pressOut:{scale:1,type:"spring",damping:15,stiffness:400}},interaction:{iconSelect:{pulse:[{scale:.9,damping:15,stiffness:500},{scale:1,damping:10,stiffness:200}],actionDelay:50},centerHover:{scale:1.05,duration:150}}};const dialCSSBeziers=exports.dialCSSBeziers={dialScale:"cubic-bezier(0.34, 1.56, 0.64, 1)",centerButton:"cubic-bezier(0.25, 1.7, 0.55, 1)",iconPress:"cubic-bezier(0.22, 1.2, 0.36, 1)",iconSelectPulse:"cubic-bezier(0.18, 1.15, 0.32, 1)",easeOutCubic:"cubic-bezier(0.33, 1, 0.68, 1)",easeInCubic:"cubic-bezier(0.32, 0, 0.67, 0)",easeInOutCubic:"cubic-bezier(0.65, 0, 0.35, 1)",linear:"linear"};function generateDialCSSKeyframes(){const t=dialAnimationConfig.continuous;return{dialGlitch:`@keyframes dialGlitch {
       0%, 100% { transform: translateX(0); }
-      33% { transform: translateX(${c.glitch.offset}px); }
-      66% { transform: translateX(-${c.glitch.offset}px); }
-    }`,
-    /** Pulse effect - scale oscillation */
-    dialPulse: `@keyframes dialPulse {
+      33% { transform: translateX(${t.glitch.offset}px); }
+      66% { transform: translateX(-${t.glitch.offset}px); }
+    }`,dialPulse:`@keyframes dialPulse {
       0%, 100% { transform: scale(1); }
-      50% { transform: scale(${c.pulse.maxScale}); }
-    }`,
-    /** Floating effect - vertical bob */
-    dialFloating: `@keyframes dialFloating {
+      50% { transform: scale(${t.pulse.maxScale}); }
+    }`,dialFloating:`@keyframes dialFloating {
       0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(${c.floating.maxY}px); }
-    }`,
-    /** Breathing effect - scale pulse */
-    dialBreathing: `@keyframes dialBreathing {
+      50% { transform: translateY(${t.floating.maxY}px); }
+    }`,dialBreathing:`@keyframes dialBreathing {
       0%, 100% { transform: scale(1); }
-      50% { transform: scale(${c.breathing.maxScale}); }
-    }`,
-    /** Dial rotation entrance */
-    dialRotation: `@keyframes dialRotation {
+      50% { transform: scale(${t.breathing.maxScale}); }
+    }`,dialRotation:`@keyframes dialRotation {
       from { transform: rotate(0deg); }
       to { transform: rotate(${dialAnimationConfig.entrance.dial.rotation.degrees}deg); }
-    }`
-  };
-}
-
-/**
- * Get CSS animation shorthand values for continuous effects.
- * Use these in the `animation` CSS property.
- */
-function getDialCSSAnimationStyles() {
-  const c = dialAnimationConfig.continuous;
-  return {
-    /** Glitch: triggered periodically via JS interval */
-    glitch: `dialGlitch ${c.glitch.stepDuration * 3}ms ease`,
-    /** Pulse: infinite loop */
-    pulse: `dialPulse ${c.pulse.duration * 2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,
-    /** Floating: infinite loop */
-    floating: `dialFloating ${c.floating.duration * 2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,
-    /** Breathing: infinite loop */
-    breathing: `dialBreathing ${c.breathing.duration * 2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,
-    /** Dial rotation: plays once on entrance */
-    dialRotation: `dialRotation ${dialAnimationConfig.entrance.dial.rotation.duration}ms ${dialCSSBeziers.easeOutCubic}`
-  };
-}
-
-/**
- * Get all keyframes as a single CSS string for injection.
- */
-function getDialCSSKeyframesString() {
-  return Object.values(generateDialCSSKeyframes()).join('\n\n');
-}
-
-// =============================
-// Spiral Animation Utilities
-// =============================
-
-/**
- * Position and visual state during spiral animation.
- */
-
-/**
- * Calculate icon position during spiral entrance animation.
- *
- * @param progress - Animation progress (0 = start at center, 1 = final position)
- * @param index - Icon index (0-based)
- * @param totalIcons - Total number of icons
- * @param radius - Final radius from center
- * @param startAngle - Starting angle for icon layout (default: top of circle)
- */
-function getSpiralAnimationPosition(progress, index, totalIcons, radius, startAngle = DIAL_START_ANGLE) {
-  const finalPos = getIconPosition(index, totalIcons, radius, startAngle);
-  const spiral = dialAnimationConfig.icons.spiral;
-  const opacityConfig = dialAnimationConfig.icons.opacity;
-
-  // Clamp progress to 0-1
-  const p = Math.max(0, Math.min(1, progress));
-
-  // Spiral rotation: interpolate from startRotation to endRotation
-  const rotation = spiral.startRotation + (spiral.endRotation - spiral.startRotation) * p;
-
-  // Distance from center grows with progress
-  const distance = radius * p;
-
-  // Calculate position along spiral path
-  const spiralAngle = finalPos.angle + rotation;
-
-  // Interpolate from spiral position to final position
-  const spiralX = distance * Math.cos(spiralAngle);
-  const spiralY = distance * Math.sin(spiralAngle);
-
-  // Blend spiral position with final position based on progress
-  const x = spiralX + (finalPos.x - spiralX) * p;
-  const y = spiralY + (finalPos.y - spiralY) * p;
-
-  // Opacity interpolation with configurable curve
-  let opacity;
-  if (p <= opacityConfig.inputRange[0]) {
-    opacity = opacityConfig.outputRange[0];
-  } else if (p <= opacityConfig.inputRange[1]) {
-    const t = (p - opacityConfig.inputRange[0]) / (opacityConfig.inputRange[1] - opacityConfig.inputRange[0]);
-    opacity = opacityConfig.outputRange[0] + (opacityConfig.outputRange[1] - opacityConfig.outputRange[0]) * t;
-  } else {
-    const t = (p - opacityConfig.inputRange[1]) / (opacityConfig.inputRange[2] - opacityConfig.inputRange[1]);
-    opacity = opacityConfig.outputRange[1] + (opacityConfig.outputRange[2] - opacityConfig.outputRange[1]) * t;
-  }
-  return {
-    x,
-    y,
-    rotation,
-    scale: p,
-    opacity
-  };
-}
-
-/**
- * Calculate staggered progress for an icon based on master progress.
- * Applies the stagger delay so icons animate in sequence.
- *
- * @param masterProgress - Overall animation progress (0-1)
- * @param index - Icon index (0-based)
- * @param totalIcons - Total number of icons
- */
-function getStaggeredIconProgress(masterProgress, index, totalIcons) {
-  const inputRange = getIconStaggerInputRange(index, totalIcons, dialAnimationConfig.icons.staggerRatio);
-
-  // Map master progress through stagger input range
-  if (masterProgress <= inputRange[0]) return 0;
-  if (masterProgress <= inputRange[1]) return 0;
-  if (masterProgress >= inputRange[3]) return 1;
-  if (masterProgress >= inputRange[2]) return 1;
-
-  // Interpolate between inputRange[1] and inputRange[2]
-  const t = (masterProgress - inputRange[1]) / (inputRange[2] - inputRange[1]);
-  return Math.max(0, Math.min(1, t));
-}
+    }`}}function getDialCSSAnimationStyles(){const t=dialAnimationConfig.continuous;return{glitch:`dialGlitch ${t.glitch.stepDuration*3}ms ease`,pulse:`dialPulse ${t.pulse.duration*2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,floating:`dialFloating ${t.floating.duration*2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,breathing:`dialBreathing ${t.breathing.duration*2}ms ${dialCSSBeziers.easeInOutCubic} infinite`,dialRotation:`dialRotation ${dialAnimationConfig.entrance.dial.rotation.duration}ms ${dialCSSBeziers.easeOutCubic}`}}function getDialCSSKeyframesString(){return Object.values(generateDialCSSKeyframes()).join("\n\n")}function getSpiralAnimationPosition(t,a,i,e,o=DIAL_START_ANGLE){const c=getIconPosition(a,i,e,o);const s=dialAnimationConfig.icons.spiral;const n=dialAnimationConfig.icons.opacity;const r=Math.max(0,Math.min(1,t));const g=s.startRotation+(s.endRotation-s.startRotation)*r;const d=e*r;const p=c.angle+g;const f=d*Math.cos(p);const S=d*Math.sin(p);const I=f+(c.x-f)*r;const m=S+(c.y-S)*r;let l;if(r<=n.inputRange[0]){l=n.outputRange[0]}else if(r<=n.inputRange[1]){const u=(r-n.inputRange[0])/(n.inputRange[1]-n.inputRange[0]);l=n.outputRange[0]+(n.outputRange[1]-n.outputRange[0])*u}else{const u=(r-n.inputRange[1])/(n.inputRange[2]-n.inputRange[1]);l=n.outputRange[1]+(n.outputRange[2]-n.outputRange[1])*u}return{x:I,y:m,rotation:g,scale:r,opacity:l}}function getStaggeredIconProgress(t,a,i){const e=getIconStaggerInputRange(a,i,dialAnimationConfig.icons.staggerRatio);if(t<=e[0])return 0;if(t<=e[1])return 0;if(t>=e[3])return 1;if(t>=e[2])return 1;const o=(t-e[1])/(e[2]-e[1]);return Math.max(0,Math.min(1,o))}