@buoy-gg/core 7.0.40 → 7.0.42

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

@@ -1,173 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { memo } from "react";
-import { Animated, View } from "react-native";
-import { RasterLayer, scatter, useLoop, withBgAlpha } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-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) => 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));
-export const DialHyperspace = /*#__PURE__*/memo(function DialHyperspace({
-  size
-}) {
-  const drive = 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__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: x - halo / 2,
-          top: y - halo / 2,
-          width: halo,
-          height: halo,
-          borderRadius: halo / 2,
-          backgroundColor: withBgAlpha(color, 0.3)
-        }
-      }, `${i}-h`), /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(RasterLayer, {
-        style: {
-          width: size,
-          height: size
-        },
-        raster: false,
-        children: stars
-      })
-    }, k));
-  }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: shells
-  });
-});
+"use strict";import{memo as F}from"react";import{Animated as R,View as A}from"react-native";import{RasterLayer as b,scatter as P,useLoop as C,withBgAlpha as w}from"@buoy-gg/shared-ui";import{jsx as u,Fragment as x}from"react/jsx-runtime";const H=.94;const T=6;const v=2400;const f=3;const E=16;const O=Array.from({length:f},(o,t)=>P(22343^t*40503,E*4));const L=["#FFFFFF","#B3D9FF","#8CB3FF"];const _=Math.PI/3;const M=14*Math.PI/180;function k(o){const t=Math.min(5,Math.floor(o*6));const e=o*6-t;return t*_+M/2+e*(_-M)}function B(o){return Math.min(T,1/(1-o*H))}function D(o){let t=.15+.85*o*o;if(o<.06)t*=o/.06;else if(o>.94)t*=(1-o)/.06;return Math.min(.7,t)}function j(o){const t=o/f;const e=[];const i=12;for(let n=0;n<=i;n++)e.push(n/i);const c=(1-t)%1;if(c>.001&&c<1-.001)e.push(c-1e-4,c+1e-4);e.sort((n,s)=>n-s);const r=[];const l=[];const a=[];for(const n of e){const s=t===0&&n===1?1:(n+t)%1;r.push(n);l.push(B(s));a.push(D(s))}return{input:r,scale:l,opacity:a}}const G=Array.from({length:f},(o,t)=>j(t));export const DialHyperspace=F(function o({size:t}){const e=C(v);const i=t/2;const c=[];for(let r=0;r<f;r++){const l=O[r];const a=G[r];const n=[];for(let s=0;s<E;s++){const S=k(l[s*4]);const g=(.15+.85*Math.sqrt(l[s*4+1]))*.5*i;const m=L[Math.floor(l[s*4+3]*L.length)%3];const d=i+Math.cos(S)*g;const y=i+Math.sin(S)*g;const h=.6;const p=h*2.4;n.push(u(A,{style:{position:"absolute",left:d-p/2,top:y-p/2,width:p,height:p,borderRadius:p/2,backgroundColor:w(m,.3)}},`${s}-h`),u(A,{style:{position:"absolute",left:d-h/2,top:y-h/2,width:h,height:h,borderRadius:h/2,backgroundColor:m}},s))}c.push(u(R.View,{style:{position:"absolute",left:0,top:0,width:t,height:t,opacity:e.interpolate({inputRange:a.input,outputRange:a.opacity}),transform:[{scale:e.interpolate({inputRange:a.input,outputRange:a.scale})}]},pointerEvents:"none",children:u(b,{style:{width:t,height:t},raster:false,children:n})},r))}return u(x,{children:c})});

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

@@ -1,299 +1 @@
-"use strict";
-
-import { useMemo, useRef } from "react";
-import { StyleSheet, Pressable, View, Text, useWindowDimensions, Animated } from "react-native";
-import { getDialLayout, getIconPosition, getIconStaggerInputRange, DIAL_START_ANGLE, DIAL_ICON_SIZE, DIAL_ICON_GLYPH_SIZE, dialColors, dialStyles, dialAnimationConfig } from "@buoy-gg/floating-tools-core";
-
-/** Full names agents wait for (`waitFor: "Network"`), not the truncated glyph. */
-import { jsx as _jsx, jsxs as _jsxs } from "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",
-  "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 = DIAL_ICON_SIZE;
-export const DialIcon = ({
-  index,
-  icon,
-  iconsProgress,
-  onPress,
-  totalIcons,
-  active
-}) => {
-  // Animation values - using interpolation for better performance
-  const scale = useRef(new Animated.Value(1)).current;
-  const {
-    width: screenWidth
-  } = useWindowDimensions();
-  const layout = useMemo(() => getDialLayout({
-    screenWidth
-  }), [screenWidth]);
-
-  // Hover animation on press in/out - using shared config
-  // Fallback values in case dialAnimationConfig hasn't loaded yet
-  const iconAnimConfig = dialAnimationConfig?.icons ?? {
-    pressIn: {
-      scale: 0.95,
-      damping: 15,
-      stiffness: 400
-    },
-    pressOut: {
-      scale: 1,
-      damping: 15,
-      stiffness: 400
-    }
-  };
-  const {
-    pressIn,
-    pressOut
-  } = iconAnimConfig;
-  const handlePressIn = () => {
-    Animated.spring(scale, {
-      toValue: pressIn.scale,
-      damping: pressIn.damping,
-      stiffness: pressIn.stiffness,
-      useNativeDriver: true
-    }).start();
-  };
-  const handlePressOut = () => {
-    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 = useMemo(() => {
-    const iconPosition = getIconPosition(index, totalIcons, layout.iconRadius, DIAL_START_ANGLE);
-    const {
-      x: finalX,
-      y: finalY,
-      angle
-    } = iconPosition;
-    const radius = layout.iconRadius;
-    const staggerInputRange = 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 = Animated.add(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 = Animated.add(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: 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__*/_jsx(Animated.View, {
-    style: [styles.view, animatedStyle, !active && styles.hidden],
-    children: isEmpty ?
-    /*#__PURE__*/
-    // Empty spot - just show a subtle circle
-    _jsx(View, {
-      style: styles.emptySpot,
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.emptyDot
-      })
-    }) : /*#__PURE__*/_jsxs(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__*/_jsx(View, {
-        style: [styles.iconGradientBg, {
-          backgroundColor: "rgba(0, 0, 0, 0.2)"
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.iconInnerGlow, {
-          backgroundColor: "rgba(255, 255, 255, 0.02)"
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.iconWrapper,
-        children: icon.iconComponent ? (() => {
-          const IconComp = icon.iconComponent;
-          return /*#__PURE__*/_jsx(IconComp, {
-            slot: "dial",
-            size: DIAL_ICON_GLYPH_SIZE
-          });
-        })() : /*#__PURE__*/_jsx(View, {
-          style: styles.iconClamp,
-          children: icon.icon
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.label,
-        numberOfLines: 1,
-        adjustsFontSizeToFit: true,
-        minimumFontScale: 0.7,
-        children: icon.name.toUpperCase()
-      })]
-    })
-  });
-};
-const styles = 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: DIAL_ICON_GLYPH_SIZE,
-    height: DIAL_ICON_GLYPH_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  label: {
-    fontSize: dialStyles.icon.label.fontSize,
-    fontWeight: dialStyles.icon.label.fontWeight,
-    letterSpacing: dialStyles.icon.label.letterSpacing,
-    fontFamily: dialStyles.icon.label.fontFamily,
-    marginTop: dialStyles.icon.label.marginTop,
-    color: dialColors.iconLabel
-  },
-  emptySpot: {
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  emptyDot: {
-    width: dialStyles.emptySlot.dotSize,
-    height: dialStyles.emptySlot.dotSize,
-    borderRadius: dialStyles.emptySlot.dotSize / 2,
-    backgroundColor: dialColors.emptyDotBackground,
-    borderWidth: dialStyles.emptySlot.borderWidth,
-    borderColor: dialColors.emptyDotBorder
-  }
-});
+"use strict";import{useMemo as D,useRef as E}from"react";import{StyleSheet as G,Pressable as N,View as l,Text as V,useWindowDimensions as Y,Animated as n}from"react-native";import{getDialLayout as F,getIconPosition as X,getIconStaggerInputRange as Z,DIAL_START_ANGLE as H,DIAL_ICON_SIZE as J,DIAL_ICON_GLYPH_SIZE as b,dialColors as I,dialStyles as o,dialAnimationConfig as U}from"@buoy-gg/floating-tools-core";import{jsx as i,jsxs as q}from"react/jsx-runtime";const P={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 Q(s,t){if(s&&P[s])return P[s];return t}const u=J;export const DialIcon=({index:s,icon:t,iconsProgress:R,onPress:M,totalIcons:d,active:v})=>{const g=E(new n.Value(1)).current;const{width:S}=Y();const c=D(()=>F({screenWidth:S}),[S]);const j=U?.icons??{pressIn:{scale:.95,damping:15,stiffness:400},pressOut:{scale:1,damping:15,stiffness:400}};const{pressIn:m,pressOut:h}=j;const A=()=>{n.spring(g,{toValue:m.scale,damping:m.damping,stiffness:m.stiffness,useNativeDriver:true}).start()};const L=()=>{n.spring(g,{toValue:h.scale,damping:h.damping,stiffness:h.stiffness,useNativeDriver:true}).start()};const p=D(()=>{const y=X(s,d,c.iconRadius,H);const{x:k,y:T,angle:a}=y;const f=c.iconRadius;const W=Z(s,d);const r=R.interpolate({inputRange:W,outputRange:[0,0,1,1],extrapolate:"clamp"});const C=r.interpolate({inputRange:[0,1],outputRange:[Math.PI*2,0]});const w=r.interpolate({inputRange:[0,1],outputRange:[0,f]});const x=n.add(n.multiply(w,C.interpolate({inputRange:[0,Math.PI*2],outputRange:[Math.cos(a),Math.cos(a+Math.PI*2)]})),r.interpolate({inputRange:[0,1],outputRange:[0,k-f*Math.cos(a+Math.PI*2)]}));const z=n.add(n.multiply(w,C.interpolate({inputRange:[0,Math.PI*2],outputRange:[Math.sin(a),Math.sin(a+Math.PI*2)]})),r.interpolate({inputRange:[0,1],outputRange:[0,T-f*Math.sin(a+Math.PI*2)]}));const B=r.interpolate({inputRange:[0,.3,1],outputRange:[0,.3,1]});return{translateX:x,translateY:z,itemOpacity:B,progressScale:r}},[s,d,R,c]);const _={position:"absolute",left:c.circleRadius-u/2,top:c.circleRadius-u/2,opacity:p.itemOpacity,transform:[{translateX:p.translateX},{translateY:p.translateY},{scale:n.multiply(g,p.progressScale)}]};const O=t.icon===null&&!t.iconComponent;return i(n.View,{style:[e.view,_,!v&&e.hidden],children:O?i(l,{style:e.emptySpot,children:i(l,{style:e.emptyDot})}):q(N,{onPress:()=>M(t),onPressIn:A,onPressOut:L,style:e.pressable,testID:t.id?`buoy-dial-${t.id}`:void 0,accessibilityLabel:Q(t.id,t.name),accessibilityRole:"button",children:[i(l,{style:[e.iconGradientBg,{backgroundColor:"rgba(0, 0, 0, 0.2)"}]}),i(l,{style:[e.iconInnerGlow,{backgroundColor:"rgba(255, 255, 255, 0.02)"}]}),i(l,{style:e.iconWrapper,children:t.iconComponent?(()=>{const y=t.iconComponent;return i(y,{slot:"dial",size:b})})():i(l,{style:e.iconClamp,children:t.icon})}),i(V,{style:e.label,numberOfLines:1,adjustsFontSizeToFit:true,minimumFontScale:.7,children:t.name.toUpperCase()})]})})};const e=G.create({view:{width:u,height:u,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:b,height:b,alignItems:"center",justifyContent:"center",overflow:"hidden"},label:{fontSize:o.icon.label.fontSize,fontWeight:o.icon.label.fontWeight,letterSpacing:o.icon.label.letterSpacing,fontFamily:o.icon.label.fontFamily,marginTop:o.icon.label.marginTop,color:I.iconLabel},emptySpot:{width:"100%",height:"100%",justifyContent:"center",alignItems:"center"},emptyDot:{width:o.emptySlot.dotSize,height:o.emptySlot.dotSize,borderRadius:o.emptySlot.dotSize/2,backgroundColor:I.emptyDotBackground,borderWidth:o.emptySlot.borderWidth,borderColor:I.emptyDotBorder}});

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

@@ -1,160 +1 @@
-"use strict";
-
-import { useRef } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { ChevronLeft, ChevronRight, monoFont } from "@buoy-gg/shared-ui";
-import { dialColors } from "@buoy-gg/floating-tools-core";
-import { jsx as _jsx, jsxs as _jsxs } from "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 = useRef(new Animated.Value(1)).current;
-  const springTo = toValue => {
-    Animated.spring(scale, {
-      toValue,
-      damping: 15,
-      stiffness: 400,
-      useNativeDriver: true
-    }).start();
-  };
-  const accent = disabled ? dialColors.emptyDotBorder : dialColors.accent;
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: {
-      transform: [{
-        scale
-      }]
-    },
-    children: /*#__PURE__*/_jsxs(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__*/_jsx(ChevronLeft, {
-        size: 18,
-        color: accent
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.buttonText, disabled && styles.buttonTextDisabled],
-        children: label
-      }), side === "next" && /*#__PURE__*/_jsx(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.
- */
-export const DialPagination = ({
-  page,
-  pageCount,
-  onPrev,
-  onNext,
-  animatedStyle
-}) => {
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.container, animatedStyle],
-    pointerEvents: "box-none",
-    children: [/*#__PURE__*/_jsx(PagerButton, {
-      side: "prev",
-      label: "PREV",
-      disabled: page <= 0,
-      onPress: onPrev
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.indicator,
-      children: /*#__PURE__*/_jsxs(Text, {
-        style: styles.indicatorText,
-        testID: "buoy-dial-page",
-        children: [pad(page + 1), /*#__PURE__*/_jsxs(Text, {
-          style: styles.indicatorTextDim,
-          children: [" / ", pad(pageCount)]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(PagerButton, {
-      side: "next",
-      label: "NEXT",
-      disabled: page >= pageCount - 1,
-      onPress: onNext
-    })]
-  });
-};
-const styles = 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: dialColors.dialBorder,
-    backgroundColor: dialColors.dialBackground,
-    shadowColor: dialColors.dialShadow,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 8,
-    elevation: 6
-  },
-  buttonDisabled: {
-    opacity: 0.4
-  },
-  buttonText: {
-    color: dialColors.centerText,
-    fontSize: 12,
-    fontWeight: "900",
-    fontFamily: monoFont,
-    letterSpacing: 1.5
-  },
-  buttonTextDisabled: {
-    color: dialColors.iconLabelMuted
-  },
-  indicator: {
-    paddingHorizontal: 12,
-    paddingVertical: 6
-  },
-  indicatorText: {
-    color: dialColors.centerText,
-    fontSize: 13,
-    fontWeight: "900",
-    fontFamily: monoFont,
-    letterSpacing: 2,
-    textShadowColor: dialColors.centerTextGlow,
-    textShadowOffset: {
-      width: 0,
-      height: 0
-    },
-    textShadowRadius: 6
-  },
-  indicatorTextDim: {
-    color: dialColors.iconLabelMuted,
-    textShadowRadius: 0
-  }
-});
+"use strict";import{useRef as g}from"react";import{Animated as s,Pressable as m,StyleSheet as y,Text as d,View as w}from"react-native";import{ChevronLeft as S,ChevronRight as T,monoFont as b}from"@buoy-gg/shared-ui";import{dialColors as e}from"@buoy-gg/floating-tools-core";import{jsx as r,jsxs as l}from"react/jsx-runtime";const x=t=>String(t).padStart(2,"0");const p=({side:t,label:n,disabled:o,onPress:c})=>{const a=g(new s.Value(1)).current;const u=f=>{s.spring(a,{toValue:f,damping:15,stiffness:400,useNativeDriver:true}).start()};const h=o?e.emptyDotBorder:e.accent;return r(s.View,{style:{transform:[{scale:a}]},children:l(m,{testID:`buoy-dial-${t}`,accessibilityRole:"button",accessibilityLabel:`${t==="prev"?"Previous":"Next"} dial page`,accessibilityState:{disabled:o},disabled:o,onPress:c,onPressIn:()=>!o&&u(.92),onPressOut:()=>u(1),style:[i.button,o&&i.buttonDisabled],children:[t==="prev"&&r(S,{size:18,color:h}),r(d,{style:[i.buttonText,o&&i.buttonTextDisabled],children:n}),t==="next"&&r(T,{size:18,color:h})]})})};export const DialPagination=({page:t,pageCount:n,onPrev:o,onNext:c,animatedStyle:a})=>{return l(s.View,{style:[i.container,a],pointerEvents:"box-none",children:[r(p,{side:"prev",label:"PREV",disabled:t<=0,onPress:o}),r(w,{style:i.indicator,children:l(d,{style:i.indicatorText,testID:"buoy-dial-page",children:[x(t+1),l(d,{style:i.indicatorTextDim,children:[" / ",x(n)]})]})}),r(p,{side:"next",label:"NEXT",disabled:t>=n-1,onPress:c})]})};const i=y.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:e.dialBorder,backgroundColor:e.dialBackground,shadowColor:e.dialShadow,shadowOffset:{width:0,height:0},shadowOpacity:.4,shadowRadius:8,elevation:6},buttonDisabled:{opacity:.4},buttonText:{color:e.centerText,fontSize:12,fontWeight:"900",fontFamily:b,letterSpacing:1.5},buttonTextDisabled:{color:e.iconLabelMuted},indicator:{paddingHorizontal:12,paddingVertical:6},indicatorText:{color:e.centerText,fontSize:13,fontWeight:"900",fontFamily:b,letterSpacing:2,textShadowColor:e.centerTextGlow,textShadowOffset:{width:0,height:0},textShadowRadius:6},indicatorTextDim:{color:e.iconLabelMuted,textShadowRadius:0}});