@buoy-gg/floating-tools-core 2.1.4-beta.2 → 2.1.5

package/lib/commonjs/dial.js

@@ -1,617 +1 @@
-"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_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 _colors = require("./colors.js");
-/**
- * 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;
-
-/** 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.
- * Derived from floatingToolsColors for consistency.
- *
- * Property names match existing mobile implementation for compatibility.
- */
-const dialColors = exports.dialColors = {
-  /** Background color for the dial circle */
-  dialBackground: '#000000',
-  /** Gradient layer colors (with alpha) */
-  dialGradient1: (0, _colors.withAlpha)(_colors.floatingToolsColors.info, '10'),
-  dialGradient2: (0, _colors.withAlpha)(_colors.floatingToolsColors.info, '08'),
-  dialGradient3: (0, _colors.withAlpha)(_colors.floatingToolsColors.info, '15'),
-  /** Border color for dial and buttons */
-  dialBorder: (0, _colors.withAlpha)(_colors.floatingToolsColors.info, '40'),
-  /** Shadow/glow color */
-  dialShadow: _colors.floatingToolsColors.info,
-  /** Grid line color */
-  dialGridLine: (0, _colors.withAlpha)(_colors.floatingToolsColors.info, '26'),
-  /** Backdrop overlay color */
-  dialBackdrop: 'rgba(0, 0, 0, 0.85)',
-  /** Center button text color */
-  centerText: _colors.floatingToolsColors.secondary,
-  /** Center button text glow */
-  centerTextGlow: _colors.floatingToolsColors.info,
-  /** Icon label color */
-  iconLabel: _colors.floatingToolsColors.secondary,
-  /** Empty slot dot background */
-  emptyDotBackground: (0, _colors.withAlpha)(_colors.floatingToolsColors.muted, '15'),
-  /** Empty slot dot border */
-  emptyDotBorder: (0, _colors.withAlpha)(_colors.floatingToolsColors.muted, '50')
-};
-// =============================
-// 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: 'monospace'
-    },
-    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: 'monospace',
-      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 {
-      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 {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(${c.pulse.maxScale}); }
-    }`,
-    /** Floating effect - vertical bob */
-    dialFloating: `@keyframes dialFloating {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(${c.floating.maxY}px); }
-    }`,
-    /** Breathing effect - scale pulse */
-    dialBreathing: `@keyframes dialBreathing {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(${c.breathing.maxScale}); }
-    }`,
-    /** Dial rotation entrance */
-    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));
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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_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 _colors=require("./colors.js");const MAX_DIAL_SLOTS=exports.MAX_DIAL_SLOTS=6,DIAL_START_ANGLE=exports.DIAL_START_ANGLE=-1*Math.PI/2,DIAL_BUTTON_SIZE=exports.DIAL_BUTTON_SIZE=80,DIAL_ICON_SIZE=exports.DIAL_ICON_SIZE=60,DIAL_ICON_PADDING=exports.DIAL_ICON_PADDING=20,DIAL_GRID_LINE_COUNT=exports.DIAL_GRID_LINE_COUNT=6,dialColors=exports.dialColors={dialBackground:"#000000",dialGradient1:(0,_colors.withAlpha)(_colors.floatingToolsColors.info,"10"),dialGradient2:(0,_colors.withAlpha)(_colors.floatingToolsColors.info,"08"),dialGradient3:(0,_colors.withAlpha)(_colors.floatingToolsColors.info,"15"),dialBorder:(0,_colors.withAlpha)(_colors.floatingToolsColors.info,"40"),dialShadow:_colors.floatingToolsColors.info,dialGridLine:(0,_colors.withAlpha)(_colors.floatingToolsColors.info,"26"),dialBackdrop:"rgba(0, 0, 0, 0.85)",centerText:_colors.floatingToolsColors.secondary,centerTextGlow:_colors.floatingToolsColors.info,iconLabel:_colors.floatingToolsColors.secondary,emptyDotBackground:(0,_colors.withAlpha)(_colors.floatingToolsColors.muted,"15"),emptyDotBorder:(0,_colors.withAlpha)(_colors.floatingToolsColors.muted,"50")},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,e)=>60*e)},centerButton:{containerRatio:1.5,borderRatio:1.2,borderRadiusRatio:.6,borderWidth:2,text:{fontSize:10,fontWeight:"900",letterSpacing:1,fontFamily:"monospace"},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:"monospace",marginTop:2},wrapperMarginBottom:4},emptySlot:{dotSize:12,borderWidth:1}};function getGridLineRotations(t=DIAL_GRID_LINE_COUNT){return Array.from({length:t},(e,i)=>i*(360/t))}function getDialLayout(t){const{screenWidth:e,maxCircleSize:i=320,circleSizeRatio:n=.75,iconSize:o=DIAL_ICON_SIZE,iconPadding:a=DIAL_ICON_PADDING}=t,r=Math.min(e*n,i),s=r/2;return{circleSize:r,circleRadius:s,iconRadius:s-o/2-a,iconSize:o,buttonSize:DIAL_BUTTON_SIZE}}function getIconAngle(t,e,i=DIAL_START_ANGLE){return i+2*Math.PI/e*t}function getIconPosition(t,e,i,n=DIAL_START_ANGLE){const o=getIconAngle(t,e,n);return{x:i*Math.cos(o),y:i*Math.sin(o),angle:o}}function getAllIconPositions(t,e,i=DIAL_START_ANGLE){return Array.from({length:t},(n,o)=>getIconPosition(o,t,e,i))}function getIconStaggerInputRange(t,e,i=.1){const n=t*i;return[0,n,n+(1-(e-1)*i),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:2*Math.PI,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}}},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 {\n      0%, 100% { transform: translateX(0); }\n      33% { transform: translateX(${t.glitch.offset}px); }\n      66% { transform: translateX(-${t.glitch.offset}px); }\n    }`,dialPulse:`@keyframes dialPulse {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(${t.pulse.maxScale}); }\n    }`,dialFloating:`@keyframes dialFloating {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(${t.floating.maxY}px); }\n    }`,dialBreathing:`@keyframes dialBreathing {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(${t.breathing.maxScale}); }\n    }`,dialRotation:`@keyframes dialRotation {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(${dialAnimationConfig.entrance.dial.rotation.degrees}deg); }\n    }`}}function getDialCSSAnimationStyles(){const t=dialAnimationConfig.continuous;return{glitch:`dialGlitch ${3*t.glitch.stepDuration}ms ease`,pulse:`dialPulse ${2*t.pulse.duration}ms ${dialCSSBeziers.easeInOutCubic} infinite`,floating:`dialFloating ${2*t.floating.duration}ms ${dialCSSBeziers.easeInOutCubic} infinite`,breathing:`dialBreathing ${2*t.breathing.duration}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,e,i,n,o=DIAL_START_ANGLE){const a=getIconPosition(e,i,n,o),r=dialAnimationConfig.icons.spiral,s=dialAnimationConfig.icons.opacity,l=Math.max(0,Math.min(1,t)),c=r.startRotation+(r.endRotation-r.startRotation)*l,g=n*l,u=a.angle+c,d=g*Math.cos(u),p=g*Math.sin(u),f=d+(a.x-d)*l,S=p+(a.y-p)*l;let I;if(l<=s.inputRange[0])I=s.outputRange[0];else if(l<=s.inputRange[1]){const t=(l-s.inputRange[0])/(s.inputRange[1]-s.inputRange[0]);I=s.outputRange[0]+(s.outputRange[1]-s.outputRange[0])*t}else{const t=(l-s.inputRange[1])/(s.inputRange[2]-s.inputRange[1]);I=s.outputRange[1]+(s.outputRange[2]-s.outputRange[1])*t}return{x:f,y:S,rotation:c,scale:l,opacity:I}}function getStaggeredIconProgress(t,e,i){const n=getIconStaggerInputRange(e,i,dialAnimationConfig.icons.staggerRatio);if(t<=n[0])return 0;if(t<=n[1])return 0;if(t>=n[3])return 1;if(t>=n[2])return 1;const o=(t-n[1])/(n[2]-n[1]);return Math.max(0,Math.min(1,o))}

package/lib/commonjs/easing.js

@@ -1,69 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.easing = void 0;
-exports.getEasing = getEasing;
-exports.interpolate = interpolate;
-exports.interpolatePosition = interpolatePosition;
-/**
- * Animation easing functions.
- * Platform-agnostic - used by both web (RAF) and mobile (Animated).
- */
-
-/**
- * Easing functions for animations.
- * All functions take progress (0-1) and return eased value (0-1).
- */
-const easing = exports.easing = {
-  /**
-   * Linear - no easing.
-   */
-  linear: t => t,
-  /**
-   * Ease out cubic - decelerates towards end.
-   * Used for hide/show animations.
-   */
-  easeOutCubic: t => 1 - Math.pow(1 - t, 3),
-  /**
-   * Ease in cubic - accelerates from start.
-   */
-  easeInCubic: t => t * t * t,
-  /**
-   * Ease in-out cubic - smooth acceleration and deceleration.
-   */
-  easeInOutCubic: t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
-  /**
-   * Ease out quad - lighter deceleration than cubic.
-   */
-  easeOutQuad: t => 1 - (1 - t) * (1 - t),
-  /**
-   * Ease out expo - strong deceleration (snappy feel).
-   */
-  easeOutExpo: t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
-};
-/**
- * Get an easing function by name.
- */
-function getEasing(name) {
-  return easing[name];
-}
-
-/**
- * Interpolate between two values using an easing function.
- */
-function interpolate(from, to, progress, easingFn = easing.easeOutCubic) {
-  const eased = easingFn(Math.max(0, Math.min(1, progress)));
-  return from + (to - from) * eased;
-}
-
-/**
- * Interpolate a position (x, y) using an easing function.
- */
-function interpolatePosition(from, to, progress, easingFn = easing.easeOutCubic) {
-  return {
-    x: interpolate(from.x, to.x, progress, easingFn),
-    y: interpolate(from.y, to.y, progress, easingFn)
-  };
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.easing=void 0,exports.getEasing=getEasing,exports.interpolate=interpolate,exports.interpolatePosition=interpolatePosition;const easing=exports.easing={linear:e=>e,easeOutCubic:e=>1-Math.pow(1-e,3),easeInCubic:e=>e*e*e,easeInOutCubic:e=>e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2,easeOutQuad:e=>1-(1-e)*(1-e),easeOutExpo:e=>1===e?1:1-Math.pow(2,-10*e)};function getEasing(e){return easing[e]}function interpolate(e,t,i,n=easing.easeOutCubic){return e+(t-e)*n(Math.max(0,Math.min(1,i)))}function interpolatePosition(e,t,i,n=easing.easeOutCubic){return{x:interpolate(e.x,t.x,i,n),y:interpolate(e.y,t.y,i,n)}}