@buoy-gg/core 7.0.40 → 7.0.42

package/lib/commonjs/floatingMenu/dial/DialHyperspace.js

@@ -1,177 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialHyperspace = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * DialHyperspace — the Hyperspace backdrop's lightspeed starfield, scaled
- * down to live inside the open dial's face. Replaces DialSnow (kept next
- * door for an easy swap back) so the dial matches the tool background.
- *
- * Same construction as the full preset (shared-ui
- * `backgrounds/variants/hyperspace.tsx`, see its header for the derivation):
- * the Skia original's per-frame `screen = plane/z` projection becomes scale
- * keyframes on phase-offset shells — a layer scaled by 1/z moves every star
- * outward on the true hyperbolic curve — with each shell's wrap snap hidden
- * inside the fade the original applies to the first/last 6% of a star's
- * life. Dial tuning: fewer stars, a slightly gentler cycle and lower alpha
- * so the field reads behind the icons instead of competing with them.
- * Stars are round crisp points, as in the original — never streaks.
- *
- * Cost while the dial is open: 1 animated node, ~48 static views — the same
- * budget DialSnow ran. The dial is fixed-size (never user-resized), so
- * sizing geometry from the passed circle size is correct here, and the
- * circle's `overflow: "hidden"` clips the streaks.
- */
-
-const Z_SPAN = 0.94;
-const MAX_SCALE = 6;
-const CYCLE_MS = 2400;
-const SHELLS = 3;
-const STARS_PER_SHELL = 16;
-/** Stride 4: angle, radius, size jitter, palette pick — fixed seeds so the
- * field is identical every open. */
-const SHELL_TABLES = Array.from({
-  length: SHELLS
-}, (_, k) => (0, _sharedUi.scatter)(0x5747 ^ k * 0x9e37, STARS_PER_SHELL * 4));
-const STAR_COLORS = ["#FFFFFF", "#B3D9FF", "#8CB3FF"];
-
-/** The dial face draws 6 grid spokes, one every 60° starting at 0°. Star
- * motion is radial (uniform scale about the centre), so a star whose angle
- * sits near a spoke rides that line for its entire life. Remap the uniform
- * angle pick into the clear wedge between spokes, leaving `SPOKE_GAP` of
- * clearance centred on each line. */
-const SPOKE_STEP = Math.PI / 3;
-const SPOKE_GAP = 14 * Math.PI / 180;
-function spokeClearAngle(u) {
-  const sector = Math.min(5, Math.floor(u * 6));
-  const t = u * 6 - sector;
-  return sector * SPOKE_STEP + SPOKE_GAP / 2 + t * (SPOKE_STEP - SPOKE_GAP);
-}
-function scaleAt(p) {
-  return Math.min(MAX_SCALE, 1 / (1 - p * Z_SPAN));
-}
-function opacityAt(p) {
-  let bright = 0.15 + 0.85 * p * p;
-  // The original's 6% fade at both ends of a star's life.
-  if (p < 0.06) bright *= p / 0.06;else if (p > 0.94) bright *= (1 - p) / 0.06;
-  // Dial tuning: never brighter than 0.7 — the icons own the foreground.
-  return Math.min(0.7, bright);
-}
-
-/** Interpolate stops for shell k (phase = (v + k/K) mod 1), the wrap point
- * double-sampled 1e-4 apart inside the zero-opacity sliver. */
-function shellStops(k) {
-  const offset = k / SHELLS;
-  const vs = [];
-  const SEGMENTS = 12;
-  for (let i = 0; i <= SEGMENTS; i++) vs.push(i / SEGMENTS);
-  const vWrap = (1 - offset) % 1;
-  if (vWrap > 1e-3 && vWrap < 1 - 1e-3) vs.push(vWrap - 1e-4, vWrap + 1e-4);
-  vs.sort((a, b) => a - b);
-  const input = [];
-  const scale = [];
-  const opacity = [];
-  for (const v of vs) {
-    // At the loop boundary the offset-0 shell's phase must read as END of
-    // life (p=1, max scale, zero opacity), not wrap to 0 — otherwise the
-    // last segment lerps scale 6→1 at visible opacity and the stars
-    // retract to the centre once per cycle.
-    const p = offset === 0 && v === 1 ? 1 : (v + offset) % 1;
-    input.push(v);
-    scale.push(scaleAt(p));
-    opacity.push(opacityAt(p));
-  }
-  return {
-    input,
-    scale,
-    opacity
-  };
-}
-const SHELL_STOPS = Array.from({
-  length: SHELLS
-}, (_, k) => shellStops(k));
-const DialHyperspace = exports.DialHyperspace = /*#__PURE__*/(0, _react.memo)(function DialHyperspace({
-  size
-}) {
-  const drive = (0, _sharedUi.useLoop)(CYCLE_MS);
-  const c = size / 2;
-  const shells = [];
-  for (let k = 0; k < SHELLS; k++) {
-    const table = SHELL_TABLES[k];
-    const stops = SHELL_STOPS[k];
-    const stars = [];
-    for (let i = 0; i < STARS_PER_SHELL; i++) {
-      const ang = spokeClearAngle(table[i * 4]);
-      // sqrt-biased outward, inner 15% clear of the vanishing point. Offsets
-      // scale with the HALF-extent, as in the original's projection.
-      const rad = (0.15 + 0.85 * Math.sqrt(table[i * 4 + 1])) * 0.5 * c;
-      const color = STAR_COLORS[Math.floor(table[i * 4 + 3] * STAR_COLORS.length) % 3];
-      const x = c + Math.cos(ang) * rad;
-      const y = c + Math.sin(ang) * rad;
-      // Round crisp points, as in the original — the visible star is the
-      // sprite's lit core (~12.5% of the stamp), so it starts sub-pixel and
-      // only reaches ~2-3px before the fade-out kills it. A soft halo disc
-      // at α0.3 stands in for the sprite's blur.
-      const core = 0.6;
-      const halo = core * 2.4;
-      stars.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: x - halo / 2,
-          top: y - halo / 2,
-          width: halo,
-          height: halo,
-          borderRadius: halo / 2,
-          backgroundColor: (0, _sharedUi.withBgAlpha)(color, 0.3)
-        }
-      }, `${i}-h`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: x - core / 2,
-          top: y - core / 2,
-          width: core,
-          height: core,
-          borderRadius: core / 2,
-          backgroundColor: color
-        }
-      }, i));
-    }
-    shells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: size,
-        height: size,
-        opacity: drive.interpolate({
-          inputRange: stops.input,
-          outputRange: stops.opacity
-        }),
-        transform: [{
-          scale: drive.interpolate({
-            inputRange: stops.input,
-            outputRange: stops.scale
-          })
-        }]
-      },
-      pointerEvents: "none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RasterLayer, {
-        style: {
-          width: size,
-          height: size
-        },
-        raster: false,
-        children: stars
-      })
-    }, k));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: shells
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DialHyperspace=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const Z_SPAN=.94;const MAX_SCALE=6;const CYCLE_MS=2400;const SHELLS=3;const STARS_PER_SHELL=16;const SHELL_TABLES=Array.from({length:SHELLS},(e,t)=>(0,_sharedUi.scatter)(22343^t*40503,STARS_PER_SHELL*4));const STAR_COLORS=["#FFFFFF","#B3D9FF","#8CB3FF"];const SPOKE_STEP=Math.PI/3;const SPOKE_GAP=14*Math.PI/180;function spokeClearAngle(e){const t=Math.min(5,Math.floor(e*6));const n=e*6-t;return t*SPOKE_STEP+SPOKE_GAP/2+n*(SPOKE_STEP-SPOKE_GAP)}function scaleAt(e){return Math.min(MAX_SCALE,1/(1-e*Z_SPAN))}function opacityAt(e){let t=.15+.85*e*e;if(e<.06)t*=e/.06;else if(e>.94)t*=(1-e)/.06;return Math.min(.7,t)}function shellStops(e){const t=e/SHELLS;const n=[];const i=12;for(let o=0;o<=i;o++)n.push(o/i);const a=(1-t)%1;if(a>.001&&a<1-.001)n.push(a-1e-4,a+1e-4);n.sort((o,s)=>o-s);const r=[];const l=[];const c=[];for(const o of n){const s=t===0&&o===1?1:(o+t)%1;r.push(o);l.push(scaleAt(s));c.push(opacityAt(s))}return{input:r,scale:l,opacity:c}}const SHELL_STOPS=Array.from({length:SHELLS},(e,t)=>shellStops(t));const DialHyperspace=exports.DialHyperspace=(0,_react.memo)(function e({size:t}){const n=(0,_sharedUi.useLoop)(CYCLE_MS);const i=t/2;const a=[];for(let r=0;r<SHELLS;r++){const l=SHELL_TABLES[r];const c=SHELL_STOPS[r];const o=[];for(let s=0;s<STARS_PER_SHELL;s++){const p=spokeClearAngle(l[s*4]);const f=(.15+.85*Math.sqrt(l[s*4+1]))*.5*i;const d=STAR_COLORS[Math.floor(l[s*4+3]*STAR_COLORS.length)%3];const S=i+Math.cos(p)*f;const g=i+Math.sin(p)*f;const u=.6;const h=u*2.4;o.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:S-h/2,top:g-h/2,width:h,height:h,borderRadius:h/2,backgroundColor:(0,_sharedUi.withBgAlpha)(d,.3)}},`${s}-h`),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:S-u/2,top:g-u/2,width:u,height:u,borderRadius:u/2,backgroundColor:d}},s))}a.push((0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{position:"absolute",left:0,top:0,width:t,height:t,opacity:n.interpolate({inputRange:c.input,outputRange:c.opacity}),transform:[{scale:n.interpolate({inputRange:c.input,outputRange:c.scale})}]},pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_sharedUi.RasterLayer,{style:{width:t,height:t},raster:false,children:o})},r))}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:a})});

package/lib/commonjs/floatingMenu/dial/DialIcon.js

@@ -1,302 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialIcon = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
-var _jsxRuntime = require("react/jsx-runtime");
-/** Full names agents wait for (`waitFor: "Network"`), not the truncated glyph. */const DIAL_A11Y = {
-  network: "Network",
-  images: "Images",
-  "image-overlay": "Image Overlay",
-  assets: "Assets",
-  query: "React Query",
-  storage: "Storage",
-  env: "Env",
-  console: "Console",
-  events: "Events",
-  redux: "Redux",
-  zustand: "Zustand",
-  jotai: "Jotai",
-  "route-events": "Routes",
-  "time-machine": "Time Machine",
-  "highlight-updates": "Highlight Updates",
-  "debug-borders": "Debug Borders",
-  "perf-monitor": "Perf Monitor",
-  "js-top": "JS Top",
-  "js-top-modal": "JS Top",
-  impersonate: "Impersonate",
-  "perf-monitor-modal": "Perf Monitor"
-};
-function dialAccessibilityLabel(id, name) {
-  if (id && DIAL_A11Y[id]) return DIAL_A11Y[id];
-  return name;
-}
-
-// The circle radius depends on the live window width and is computed inside
-// the component (must match DialDevTools' circle, which does the same).
-const VIEW_SIZE = _floatingToolsCore.DIAL_ICON_SIZE;
-const DialIcon = ({
-  index,
-  icon,
-  iconsProgress,
-  onPress,
-  totalIcons,
-  active
-}) => {
-  // Animation values - using interpolation for better performance
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const {
-    width: screenWidth
-  } = (0, _reactNative.useWindowDimensions)();
-  const layout = (0, _react.useMemo)(() => (0, _floatingToolsCore.getDialLayout)({
-    screenWidth
-  }), [screenWidth]);
-
-  // Hover animation on press in/out - using shared config
-  // Fallback values in case dialAnimationConfig hasn't loaded yet
-  const iconAnimConfig = _floatingToolsCore.dialAnimationConfig?.icons ?? {
-    pressIn: {
-      scale: 0.95,
-      damping: 15,
-      stiffness: 400
-    },
-    pressOut: {
-      scale: 1,
-      damping: 15,
-      stiffness: 400
-    }
-  };
-  const {
-    pressIn,
-    pressOut
-  } = iconAnimConfig;
-  const handlePressIn = () => {
-    _reactNative.Animated.spring(scale, {
-      toValue: pressIn.scale,
-      damping: pressIn.damping,
-      stiffness: pressIn.stiffness,
-      useNativeDriver: true
-    }).start();
-  };
-  const handlePressOut = () => {
-    _reactNative.Animated.spring(scale, {
-      toValue: pressOut.scale,
-      damping: pressOut.damping,
-      stiffness: pressOut.stiffness,
-      useNativeDriver: true
-    }).start();
-  };
-
-  // Position + spiral-entrance interpolations depend only on the (fixed) slot
-  // index, so compute them once. This keeps re-renders — which happen on every
-  // page change as `active` toggles — cheap.
-  const motion = (0, _react.useMemo)(() => {
-    const iconPosition = (0, _floatingToolsCore.getIconPosition)(index, totalIcons, layout.iconRadius, _floatingToolsCore.DIAL_START_ANGLE);
-    const {
-      x: finalX,
-      y: finalY,
-      angle
-    } = iconPosition;
-    const radius = layout.iconRadius;
-    const staggerInputRange = (0, _floatingToolsCore.getIconStaggerInputRange)(index, totalIcons);
-
-    // Use interpolation for smooth animation that works both directions
-    const staggeredProgress = iconsProgress.interpolate({
-      inputRange: staggerInputRange,
-      outputRange: [0, 0, 1, 1],
-      extrapolate: "clamp"
-    });
-
-    // Spiral animation with interpolation
-    const spiralRotation = staggeredProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [Math.PI * 2, 0] // Spiral from 2π to 0
-    });
-
-    // Distance from center
-    const distance = staggeredProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, radius]
-    });
-
-    // Calculate X and Y positions using Animated operations
-    const translateX = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
-      inputRange: [0, Math.PI * 2],
-      outputRange: [Math.cos(angle), Math.cos(angle + Math.PI * 2)]
-    })), staggeredProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, finalX - radius * Math.cos(angle + Math.PI * 2)]
-    }));
-    const translateY = _reactNative.Animated.add(_reactNative.Animated.multiply(distance, spiralRotation.interpolate({
-      inputRange: [0, Math.PI * 2],
-      outputRange: [Math.sin(angle), Math.sin(angle + Math.PI * 2)]
-    })), staggeredProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, finalY - radius * Math.sin(angle + Math.PI * 2)]
-    }));
-
-    // Opacity animation
-    const itemOpacity = staggeredProgress.interpolate({
-      inputRange: [0, 0.3, 1],
-      outputRange: [0, 0.3, 1]
-    });
-    return {
-      translateX,
-      translateY,
-      itemOpacity,
-      progressScale: staggeredProgress
-    };
-  }, [index, totalIcons, iconsProgress, layout]);
-
-  // Main animated style for position and appearance
-  const animatedStyle = {
-    position: "absolute",
-    left: layout.circleRadius - VIEW_SIZE / 2,
-    // Center position
-    top: layout.circleRadius - VIEW_SIZE / 2,
-    // Center position
-    opacity: motion.itemOpacity,
-    transform: [{
-      translateX: motion.translateX
-    },
-    // Apply translation from center
-    {
-      translateY: motion.translateY
-    },
-    // Apply translation from center
-    {
-      scale: _reactNative.Animated.multiply(scale, motion.progressScale)
-    }]
-  };
-
-  // Check if this is an empty spot (no icon and no iconComponent)
-  const isEmpty = icon.icon === null && !icon.iconComponent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [styles.view, animatedStyle, !active && styles.hidden],
-    children: isEmpty ?
-    /*#__PURE__*/
-    // Empty spot - just show a subtle circle
-    (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.emptySpot,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.emptyDot
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      onPress: () => onPress(icon),
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      style: styles.pressable,
-      testID: icon.id ? `buoy-dial-${icon.id}` : undefined,
-      accessibilityLabel: dialAccessibilityLabel(icon.id, icon.name),
-      accessibilityRole: "button",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.iconGradientBg, {
-          backgroundColor: "rgba(0, 0, 0, 0.2)"
-        }]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.iconInnerGlow, {
-          backgroundColor: "rgba(255, 255, 255, 0.02)"
-        }]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.iconWrapper,
-        children: icon.iconComponent ? (() => {
-          const IconComp = icon.iconComponent;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComp, {
-            slot: "dial",
-            size: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE
-          });
-        })() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.iconClamp,
-          children: icon.icon
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.label,
-        numberOfLines: 1,
-        adjustsFontSizeToFit: true,
-        minimumFontScale: 0.7,
-        children: icon.name.toUpperCase()
-      })]
-    })
-  });
-};
-exports.DialIcon = DialIcon;
-const styles = _reactNative.StyleSheet.create({
-  view: {
-    width: VIEW_SIZE,
-    height: VIEW_SIZE,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  hidden: {
-    display: "none"
-  },
-  pressable: {
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 4,
-    backgroundColor: "transparent"
-  },
-  iconGradientBg: {
-    position: "absolute",
-    width: "85%",
-    height: "85%",
-    borderRadius: 12,
-    opacity: 0.3
-  },
-  iconInnerGlow: {
-    position: "absolute",
-    width: "70%",
-    height: "70%",
-    borderRadius: 10,
-    opacity: 0.5
-  },
-  iconWrapper: {
-    marginBottom: 4,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  /**
-   * Hard clamp for PRE-RENDERED icon nodes (icon.icon) — the path where the
-   * glyph's size is baked in by whoever created the node (consumer custom
-   * tools) rather than controlled here. The
-   * fixed overflow-hidden box guarantees an oversized node can never blow past
-   * its slot and dwarf neighboring icons — worst case it center-crops. The
-   * iconComponent path stays unclipped: we render it at DIAL_ICON_GLYPH_SIZE
-   * ourselves, and clipping would shave off the icons' glow shadows.
-   */
-  iconClamp: {
-    width: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE,
-    height: _floatingToolsCore.DIAL_ICON_GLYPH_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  label: {
-    fontSize: _floatingToolsCore.dialStyles.icon.label.fontSize,
-    fontWeight: _floatingToolsCore.dialStyles.icon.label.fontWeight,
-    letterSpacing: _floatingToolsCore.dialStyles.icon.label.letterSpacing,
-    fontFamily: _floatingToolsCore.dialStyles.icon.label.fontFamily,
-    marginTop: _floatingToolsCore.dialStyles.icon.label.marginTop,
-    color: _floatingToolsCore.dialColors.iconLabel
-  },
-  emptySpot: {
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  emptyDot: {
-    width: _floatingToolsCore.dialStyles.emptySlot.dotSize,
-    height: _floatingToolsCore.dialStyles.emptySlot.dotSize,
-    borderRadius: _floatingToolsCore.dialStyles.emptySlot.dotSize / 2,
-    backgroundColor: _floatingToolsCore.dialColors.emptyDotBackground,
-    borderWidth: _floatingToolsCore.dialStyles.emptySlot.borderWidth,
-    borderColor: _floatingToolsCore.dialColors.emptyDotBorder
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DialIcon=void 0;var _react=require("react");var _reactNative=require("react-native");var _floatingToolsCore=require("@buoy-gg/floating-tools-core");var _jsxRuntime=require("react/jsx-runtime");const DIAL_A11Y={network:"Network",images:"Images","image-overlay":"Image Overlay",assets:"Assets",query:"React Query",storage:"Storage",env:"Env",console:"Console",events:"Events",redux:"Redux",zustand:"Zustand",jotai:"Jotai","route-events":"Routes","time-machine":"Time Machine",clock:"Clock","highlight-updates":"Highlight Updates","debug-borders":"Debug Borders","perf-monitor":"Bench HUD","js-top":"JS Top","js-top-modal":"JS Top",impersonate:"Impersonate","perf-monitor-modal":"Bench"};function dialAccessibilityLabel(t,e){if(t&&DIAL_A11Y[t])return DIAL_A11Y[t];return e}const VIEW_SIZE=_floatingToolsCore.DIAL_ICON_SIZE;const DialIcon=({index:t,icon:e,iconsProgress:p,onPress:y,totalIcons:s,active:I})=>{const r=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current;const{width:g}=(0,_reactNative.useWindowDimensions)();const a=(0,_react.useMemo)(()=>(0,_floatingToolsCore.getDialLayout)({screenWidth:g}),[g]);const f=_floatingToolsCore.dialAnimationConfig?.icons??{pressIn:{scale:.95,damping:15,stiffness:400},pressOut:{scale:1,damping:15,stiffness:400}};const{pressIn:l,pressOut:c}=f;const b=()=>{_reactNative.Animated.spring(r,{toValue:l.scale,damping:l.damping,stiffness:l.stiffness,useNativeDriver:true}).start()};const S=()=>{_reactNative.Animated.spring(r,{toValue:c.scale,damping:c.damping,stiffness:c.stiffness,useNativeDriver:true}).start()};const o=(0,_react.useMemo)(()=>{const d=(0,_floatingToolsCore.getIconPosition)(t,s,a.iconRadius,_floatingToolsCore.DIAL_START_ANGLE);const{x:w,y:j,angle:n}=d;const u=a.iconRadius;const v=(0,_floatingToolsCore.getIconStaggerInputRange)(t,s);const i=p.interpolate({inputRange:v,outputRange:[0,0,1,1],extrapolate:"clamp"});const m=i.interpolate({inputRange:[0,1],outputRange:[Math.PI*2,0]});const h=i.interpolate({inputRange:[0,1],outputRange:[0,u]});const A=_reactNative.Animated.add(_reactNative.Animated.multiply(h,m.interpolate({inputRange:[0,Math.PI*2],outputRange:[Math.cos(n),Math.cos(n+Math.PI*2)]})),i.interpolate({inputRange:[0,1],outputRange:[0,w-u*Math.cos(n+Math.PI*2)]}));const _=_reactNative.Animated.add(_reactNative.Animated.multiply(h,m.interpolate({inputRange:[0,Math.PI*2],outputRange:[Math.sin(n),Math.sin(n+Math.PI*2)]})),i.interpolate({inputRange:[0,1],outputRange:[0,j-u*Math.sin(n+Math.PI*2)]}));const D=i.interpolate({inputRange:[0,.3,1],outputRange:[0,.3,1]});return{translateX:A,translateY:_,itemOpacity:D,progressScale:i}},[t,s,p,a]);const R={position:"absolute",left:a.circleRadius-VIEW_SIZE/2,top:a.circleRadius-VIEW_SIZE/2,opacity:o.itemOpacity,transform:[{translateX:o.translateX},{translateY:o.translateY},{scale:_reactNative.Animated.multiply(r,o.progressScale)}]};const C=e.icon===null&&!e.iconComponent;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.view,R,!I&&styles.hidden],children:C?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.emptySpot,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.emptyDot})}):(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>y(e),onPressIn:b,onPressOut:S,style:styles.pressable,testID:e.id?`buoy-dial-${e.id}`:void 0,accessibilityLabel:dialAccessibilityLabel(e.id,e.name),accessibilityRole:"button",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.iconGradientBg,{backgroundColor:"rgba(0, 0, 0, 0.2)"}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.iconInnerGlow,{backgroundColor:"rgba(255, 255, 255, 0.02)"}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconWrapper,children:e.iconComponent?(()=>{const d=e.iconComponent;return(0,_jsxRuntime.jsx)(d,{slot:"dial",size:_floatingToolsCore.DIAL_ICON_GLYPH_SIZE})})():(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconClamp,children:e.icon})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,numberOfLines:1,adjustsFontSizeToFit:true,minimumFontScale:.7,children:e.name.toUpperCase()})]})})};exports.DialIcon=DialIcon;const styles=_reactNative.StyleSheet.create({view:{width:VIEW_SIZE,height:VIEW_SIZE,justifyContent:"center",alignItems:"center"},hidden:{display:"none"},pressable:{width:"100%",height:"100%",justifyContent:"center",alignItems:"center",padding:4,backgroundColor:"transparent"},iconGradientBg:{position:"absolute",width:"85%",height:"85%",borderRadius:12,opacity:.3},iconInnerGlow:{position:"absolute",width:"70%",height:"70%",borderRadius:10,opacity:.5},iconWrapper:{marginBottom:4,alignItems:"center",justifyContent:"center"},iconClamp:{width:_floatingToolsCore.DIAL_ICON_GLYPH_SIZE,height:_floatingToolsCore.DIAL_ICON_GLYPH_SIZE,alignItems:"center",justifyContent:"center",overflow:"hidden"},label:{fontSize:_floatingToolsCore.dialStyles.icon.label.fontSize,fontWeight:_floatingToolsCore.dialStyles.icon.label.fontWeight,letterSpacing:_floatingToolsCore.dialStyles.icon.label.letterSpacing,fontFamily:_floatingToolsCore.dialStyles.icon.label.fontFamily,marginTop:_floatingToolsCore.dialStyles.icon.label.marginTop,color:_floatingToolsCore.dialColors.iconLabel},emptySpot:{width:"100%",height:"100%",justifyContent:"center",alignItems:"center"},emptyDot:{width:_floatingToolsCore.dialStyles.emptySlot.dotSize,height:_floatingToolsCore.dialStyles.emptySlot.dotSize,borderRadius:_floatingToolsCore.dialStyles.emptySlot.dotSize/2,backgroundColor:_floatingToolsCore.dialColors.emptyDotBackground,borderWidth:_floatingToolsCore.dialStyles.emptySlot.borderWidth,borderColor:_floatingToolsCore.dialColors.emptyDotBorder}});

package/lib/commonjs/floatingMenu/dial/DialPagination.js

@@ -1,165 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialPagination = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
-var _jsxRuntime = require("react/jsx-runtime");
-/** Pad a 1-based page number to two digits, e.g. 3 -> "03". */
-const pad = n => String(n).padStart(2, "0");
-/**
- * A single pager button. Press feedback is driven by a native-driver
- * `Animated` value via `onPressIn`/`onPressOut` — so the scale reacts
- * instantly on the UI thread, with no JS re-render in the press path.
- */
-const PagerButton = ({
-  side,
-  label,
-  disabled,
-  onPress
-}) => {
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const springTo = toValue => {
-    _reactNative.Animated.spring(scale, {
-      toValue,
-      damping: 15,
-      stiffness: 400,
-      useNativeDriver: true
-    }).start();
-  };
-  const accent = disabled ? _floatingToolsCore.dialColors.emptyDotBorder : _floatingToolsCore.dialColors.accent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: {
-      transform: [{
-        scale
-      }]
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      testID: `buoy-dial-${side}`,
-      accessibilityRole: "button",
-      accessibilityLabel: `${side === "prev" ? "Previous" : "Next"} dial page`,
-      accessibilityState: {
-        disabled
-      },
-      disabled: disabled,
-      onPress: onPress,
-      onPressIn: () => !disabled && springTo(0.92),
-      onPressOut: () => springTo(1),
-      style: [styles.button, disabled && styles.buttonDisabled],
-      children: [side === "prev" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
-        size: 18,
-        color: accent
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.buttonText, disabled && styles.buttonTextDisabled],
-        children: label
-      }), side === "next" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-        size: 18,
-        color: accent
-      })]
-    })
-  });
-};
-
-/**
- * Prev/Next pager shown below the dial when there are more dial tools than
- * fit on a single page. Tools are ranked by usage, so paging walks from the
- * most-used tools toward the least-used.
- */
-const DialPagination = ({
-  page,
-  pageCount,
-  onPrev,
-  onNext,
-  animatedStyle
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.container, animatedStyle],
-    pointerEvents: "box-none",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
-      side: "prev",
-      label: "PREV",
-      disabled: page <= 0,
-      onPress: onPrev
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.indicator,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.indicatorText,
-        testID: "buoy-dial-page",
-        children: [pad(page + 1), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.indicatorTextDim,
-          children: [" / ", pad(pageCount)]
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PagerButton, {
-      side: "next",
-      label: "NEXT",
-      disabled: page >= pageCount - 1,
-      onPress: onNext
-    })]
-  });
-};
-exports.DialPagination = DialPagination;
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _floatingToolsCore.dialColors.dialBorder,
-    backgroundColor: _floatingToolsCore.dialColors.dialBackground,
-    shadowColor: _floatingToolsCore.dialColors.dialShadow,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 8,
-    elevation: 6
-  },
-  buttonDisabled: {
-    opacity: 0.4
-  },
-  buttonText: {
-    color: _floatingToolsCore.dialColors.centerText,
-    fontSize: 12,
-    fontWeight: "900",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 1.5
-  },
-  buttonTextDisabled: {
-    color: _floatingToolsCore.dialColors.iconLabelMuted
-  },
-  indicator: {
-    paddingHorizontal: 12,
-    paddingVertical: 6
-  },
-  indicatorText: {
-    color: _floatingToolsCore.dialColors.centerText,
-    fontSize: 13,
-    fontWeight: "900",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 2,
-    textShadowColor: _floatingToolsCore.dialColors.centerTextGlow,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 6
-  },
-  indicatorTextDim: {
-    color: _floatingToolsCore.dialColors.iconLabelMuted,
-    textShadowRadius: 0
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DialPagination=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _floatingToolsCore=require("@buoy-gg/floating-tools-core");var _jsxRuntime=require("react/jsx-runtime");const pad=e=>String(e).padStart(2,"0");const PagerButton=({side:e,label:o,disabled:t,onPress:r})=>{const i=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current;const a=s=>{_reactNative.Animated.spring(i,{toValue:s,damping:15,stiffness:400,useNativeDriver:true}).start()};const n=t?_floatingToolsCore.dialColors.emptyDotBorder:_floatingToolsCore.dialColors.accent;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:i}]},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{testID:`buoy-dial-${e}`,accessibilityRole:"button",accessibilityLabel:`${e==="prev"?"Previous":"Next"} dial page`,accessibilityState:{disabled:t},disabled:t,onPress:r,onPressIn:()=>!t&&a(.92),onPressOut:()=>a(1),style:[styles.button,t&&styles.buttonDisabled],children:[e==="prev"&&(0,_jsxRuntime.jsx)(_sharedUi.ChevronLeft,{size:18,color:n}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.buttonText,t&&styles.buttonTextDisabled],children:o}),e==="next"&&(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:18,color:n})]})})};const DialPagination=({page:e,pageCount:o,onPrev:t,onNext:r,animatedStyle:i})=>{return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[styles.container,i],pointerEvents:"box-none",children:[(0,_jsxRuntime.jsx)(PagerButton,{side:"prev",label:"PREV",disabled:e<=0,onPress:t}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.indicator,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.indicatorText,testID:"buoy-dial-page",children:[pad(e+1),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.indicatorTextDim,children:[" / ",pad(o)]})]})}),(0,_jsxRuntime.jsx)(PagerButton,{side:"next",label:"NEXT",disabled:e>=o-1,onPress:r})]})};exports.DialPagination=DialPagination;const styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},button:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:16,paddingVertical:10,borderRadius:10,borderWidth:1,borderColor:_floatingToolsCore.dialColors.dialBorder,backgroundColor:_floatingToolsCore.dialColors.dialBackground,shadowColor:_floatingToolsCore.dialColors.dialShadow,shadowOffset:{width:0,height:0},shadowOpacity:.4,shadowRadius:8,elevation:6},buttonDisabled:{opacity:.4},buttonText:{color:_floatingToolsCore.dialColors.centerText,fontSize:12,fontWeight:"900",fontFamily:_sharedUi.monoFont,letterSpacing:1.5},buttonTextDisabled:{color:_floatingToolsCore.dialColors.iconLabelMuted},indicator:{paddingHorizontal:12,paddingVertical:6},indicatorText:{color:_floatingToolsCore.dialColors.centerText,fontSize:13,fontWeight:"900",fontFamily:_sharedUi.monoFont,letterSpacing:2,textShadowColor:_floatingToolsCore.dialColors.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:6},indicatorTextDim:{color:_floatingToolsCore.dialColors.iconLabelMuted,textShadowRadius:0}});