panelui-native 0.81.0 → 0.82.0

package/lib/typescript/src/primitives/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgBnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAU3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOvE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAkBD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgBnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAwB3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOvE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAkBD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.81.0",
+  "version": "0.82.0",
   "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -149,8 +149,9 @@
     "uniwind": ">=1.0.0"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/react-native": "^1.0.16",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^1.28.0",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.2.2"
   },

package/src/components/bottom-sheet/index.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ComponentProps,
   type ReactElement,
@@ -23,10 +24,9 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   FadeIn,
+  cancelAnimation,
   interpolate,
-  FadeOut,
   SlideInDown,
-  SlideOutDown,
   runOnJS,
   useAnimatedScrollHandler,
   useAnimatedStyle,
@@ -80,10 +80,6 @@ const DISMISS_VELOCITY = 800;
  * is a new object every commit, and the sheet re-renders while it is open.
  */
 const ENTERING = SlideInDown.springify().dampingRatio(0.9).duration(420);
-// Leaving is quicker than arriving, but not by much: the sheet is still
-// crossing the whole screen, and a surface that big snapping out of existence
-// is more startling than the delay it saves is worth.
-const EXITING = SlideOutDown.springify().dampingRatio(1).duration(340);
 
 /**
  * Where a flick would come to rest if it kept decelerating — Apple's
@@ -375,15 +371,98 @@ function BottomSheetContent({
   useBackHandler(open && dismissible, close);
 
   /*
-   * The offset survives a close — the early return below sits after every
-   * hook, so this component keeps its state while the sheet is hidden. A
-   * swipe-dismiss leaves it parked a screen height down, and without this the
-   * next open would draw the sheet below the fold behind a full backdrop:
-   * a dimmed screen with nothing on it and no reachable close button.
+   * The sheet outlives `open`, and this is what keeps it alive.
+   *
+   * It used to be removed from the tree in the same commit `open` flipped,
+   * while an `exiting` layout animation was still declared on it. Reanimated
+   * then held the detached views until that spring settled — and a `duration`
+   * on a `springify()` animation is a target rather than a stop, so how long
+   * that took was not something this file decided. Reopening inside that window
+   * put a second sheet on screen with nothing coordinating the two.
+   *
+   * Now one animation owns the whole travel. Closing springs the sheet down and
+   * clears `presented` from the spring's own completion callback, so the tree
+   * comes down *after* the movement rather than during it. The backdrop is
+   * derived from the same value, so it goes with it.
+   *
+   * Reopening mid-exit is the case this really fixes: `presented` is still
+   * true, so nothing remounts and nothing new is scheduled — the spring is
+   * cancelled and the same sheet is caught on its way down.
    */
+  const [presented, setPresented] = useState(open);
+
   useEffect(() => {
-    if (open) translateY.value = 0;
-  }, [open, translateY]);
+    if (open) {
+      cancelAnimation(translateY);
+      if (!presented) {
+        // A fresh mount starts at rest and ENTERING does the travel. Catching
+        // one that is still on screen must not reset it under the finger, so
+        // this only runs when the sheet had actually gone.
+        translateY.value = 0;
+        setPresented(true);
+        return;
+      }
+      translateY.value = reducedMotion
+        ? withTiming(0, { duration: 150 })
+        : withSpring(0, SPRING);
+      return;
+    }
+
+    if (!presented) return;
+
+    const land = (finished?: boolean) => {
+      'worklet';
+      if (finished) runOnJS(setPresented)(false);
+    };
+    translateY.value = reducedMotion
+      ? withTiming(screenHeight, { duration: 150 }, land)
+      : withSpring(screenHeight, EXIT_SPRING, land);
+  }, [open, presented, reducedMotion, screenHeight, translateY]);
+
+  /*
+   * The native sheet's own presentation queue, which the platform does not have.
+   *
+   * UIKit refuses to present a sheet while the previous one is still being
+   * dismissed, and the request is dropped rather than queued — so a close
+   * followed immediately by an open leaves nothing on screen, and the reader
+   * sees a sheet that "took a moment" or never came at all.
+   *
+   * `isPresented` is therefore driven from here rather than straight from
+   * `open`. A present that arrives during a dismissal is held, and replayed
+   * from the platform's own `onDismiss`, which is the only signal that says the
+   * previous sheet has finished going away.
+   */
+  const [nativePresented, setNativePresented] = useState(open);
+  const nativeDismissing = useRef(false);
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  useEffect(() => {
+    if (!nativeSheet) return;
+
+    if (open) {
+      if (nativeDismissing.current) return;
+      setNativePresented(true);
+      return;
+    }
+
+    if (nativePresented) nativeDismissing.current = true;
+    setNativePresented(false);
+  }, [nativePresented, nativeSheet, open]);
+
+  const onNativeDismiss = useCallback(() => {
+    // Ours, or the reader's? A dismissal we asked for has to hand the queue
+    // back; one the reader performed has to be reported as a close.
+    const wasOurs = nativeDismissing.current;
+    nativeDismissing.current = false;
+
+    if (wasOurs) {
+      if (openRef.current) setNativePresented(true);
+      return;
+    }
+
+    if (dismissible) close();
+  }, [close, dismissible]);
 
   const pan = useMemo(
     () =>
@@ -501,8 +580,8 @@ function BottomSheetContent({
     return (
       <Host matchContents ignoreSafeArea="keyboard" style={{ position: 'absolute' }}>
         <NativeBottomSheet
-          isPresented={open}
-          onDismiss={dismissible ? close : () => {}}
+          isPresented={nativePresented}
+          onDismiss={onNativeDismiss}
           snapPoints={snapPoints}
         >
           <RNHostView matchContents>
@@ -536,7 +615,9 @@ function BottomSheetContent({
     );
   }
 
-  if (!open) return null;
+  // `presented`, not `open`: the sheet stays in the tree until its own exit
+  // animation has finished putting it away.
+  if (!presented) return null;
 
   return (
     <ModalPortal>
@@ -571,7 +652,6 @@ function BottomSheetContent({
              * setting is about.
              */
             entering={reducedMotion ? FadeIn.duration(150) : ENTERING}
-            exiting={reducedMotion ? FadeOut.duration(150) : EXITING}
             accessibilityViewIsModal
             className={sheetVariants({ detached, className })}
             {...props}

package/src/components/button/index.tsx

@@ -63,6 +63,12 @@ const buttonVariants = tv({
       sm: { root: 'min-h-9 min-w-9 gap-1.5 px-2.5 py-2', label: 'text-[14px]' },
       md: { root: 'min-h-11 min-w-11 px-4 py-2.5', label: 'text-[16px]' },
       lg: { root: 'min-h-12 px-6 py-2.5', label: 'text-[18px]' },
+      // A step above `lg`, for the one control a screen is built around — a
+      // compose button in a navigation panel, a primary action alone at the
+      // bottom of a sheet. It maps onto the platform's own extra-large control
+      // size under `native`, which is the size it exists to reach: below it,
+      // `large` is the biggest a platform button can be asked to be.
+      xl: { root: 'min-h-14 px-8 py-3', label: 'text-[18px]' },
       // Icon-only controls have no scalable label, so their square is stable.
       icon: { root: 'h-11 w-11 px-0' },
     },
@@ -140,10 +146,10 @@ export function useButtonGroup(): ButtonGroupContextValue | null {
  */
 const ATTACHED = 'rounded-none border-transparent shadow-none active:bg-accent';
 
-const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
+const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', xl: 'md', icon: 'sm' } as const;
 
 /** Extra room around the styled sizes so even the compact button reaches 48dp. */
-const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, icon: 2 } as const;
+const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, xl: 0, icon: 2 } as const;
 
 /**
  * The theme token each variant's content reads against. Icons in the content
@@ -239,6 +245,7 @@ const NATIVE_HEIGHT: Record<NonNullable<ButtonVariantProps['size']>, number> = {
   sm: 36,
   md: 44,
   lg: 48,
+  xl: 56,
   icon: 44,
 };
 
@@ -283,6 +290,7 @@ const NATIVE_CONTROL_SIZE = {
   sm: 'small',
   md: 'regular',
   lg: 'large',
+  xl: 'extraLarge',
   icon: 'regular',
 } as const;
 

package/src/components/button-group/index.tsx

@@ -85,6 +85,7 @@ const buttonGroupVariants = tv({
       sm: { root: 'rounded-lg' },
       md: { root: 'rounded-xl' },
       lg: { root: 'rounded-xl' },
+      xl: { root: 'rounded-2xl' },
       icon: { root: 'rounded-xl' },
     },
     fullWidth: {

package/src/components/image-generation/dot-field.ts

@@ -0,0 +1,226 @@
+/**
+ * The dot field's drawing, kept out of the component so it can be checked
+ * without a renderer — the same split `progress-button-hold` uses.
+ *
+ * ## Nothing is built while it is running
+ *
+ * The field is hundreds of dots and it is on screen for as long as a model
+ * takes to answer, on a page that may be showing several at once. So every
+ * frame it will ever draw is built when the box is measured, and playing it is
+ * handing react-native-svg a string that already exists.
+ *
+ * Two earlier versions did this the obvious ways and both stalled a page of
+ * them on scroll: one rebuilt every dot as a path string on every frame, the
+ * other clipped a moving shape of light to a path with hundreds of subpaths in
+ * it, which is re-rasterized every time the view is drawn.
+ */
+
+/** Points between one dot and the next. */
+export const DOT_GAP = 10;
+
+/** The dot's radius where the light is not, and where it is strongest. */
+export const DOT_RADIUS = 1;
+export const DOT_LIT_RADIUS = 1.9;
+
+/** How visible the resting grid is, under everything. */
+export const DOT_REST_OPACITY = 0.16;
+
+/** How many still frames one loop is drawn as. */
+export const FRAMES = 24;
+
+/**
+ * The most dots the field will draw, whatever box it is given.
+ *
+ * The grid opens up rather than the count running away: a full-width field on
+ * a tablet gets the same picture drawn coarser, which costs the same and looks
+ * the same at arm's length.
+ */
+const MAX_DOTS = 700;
+
+/** How the light moves through the field. */
+export type DotFieldAnimation = 'drift' | 'pulse' | 'scan';
+
+/** The gap this box is drawn at, opened up if the grid would be too dense. */
+export function gapFor(width: number, height: number): number {
+  if (width <= 0 || height <= 0) return DOT_GAP;
+  const cells = (width / DOT_GAP + 1) * (height / DOT_GAP + 1);
+  return cells > MAX_DOTS ? DOT_GAP * Math.sqrt(cells / MAX_DOTS) : DOT_GAP;
+}
+
+/** A circle as an SVG subpath, which is two half arcs. */
+function circle(x: number, y: number, r: number): string {
+  const d = (r * 2).toFixed(2);
+  return `M${(x - r).toFixed(2)},${y.toFixed(2)}a${r},${r} 0 1,0 ${d},0a${r},${r} 0 1,0 -${d},0`;
+}
+
+/**
+ * Every dot's anchor, in reading order.
+ *
+ * Laid out inside the box by the widest a dot can be drawn, and counted with
+ * `floor` rather than `ceil`, so no part of any dot falls outside it.
+ *
+ * Counted with `ceil` the grid overhangs by up to half a gap on every side.
+ * That is invisible while the light stays near the middle and obvious the
+ * moment it reaches an edge — which the scanning band does by design, and a
+ * short wide box does simply by being short. The dots then draw outside the
+ * card, which looks like the animation has escaped it.
+ *
+ * The row and column are still centred in whatever is left over, because laid
+ * out from the origin the field ends with a strip of nothing down one edge.
+ */
+function anchors(width: number, height: number): [number, number][] {
+  const gap = gapFor(width, height);
+  const margin = DOT_LIT_RADIUS;
+  const innerWidth = Math.max(0, width - margin * 2);
+  const innerHeight = Math.max(0, height - margin * 2);
+
+  const columns = Math.floor(innerWidth / gap) + 1;
+  const rows = Math.floor(innerHeight / gap) + 1;
+  const offsetX = margin + (innerWidth - (columns - 1) * gap) / 2;
+  const offsetY = margin + (innerHeight - (rows - 1) * gap) / 2;
+
+  const out: [number, number][] = [];
+  for (let row = 0; row < rows; row += 1) {
+    for (let column = 0; column < columns; column += 1) {
+      out.push([offsetX + column * gap, offsetY + row * gap]);
+    }
+  }
+  return out;
+}
+
+/** The resting grid as one path. Drawn once, under the light. */
+export function gridPath(width: number, height: number): string {
+  if (width <= 0 || height <= 0) return '';
+  let path = '';
+  for (const [x, y] of anchors(width, height)) path += circle(x, y, DOT_RADIUS);
+  return path;
+}
+
+/** How many dots {@link gridPath} would draw for a box. */
+export function dotCount(width: number, height: number): number {
+  if (width <= 0 || height <= 0) return 0;
+  return anchors(width, height).length;
+}
+
+/**
+ * How strongly a dot at `distance` from the light is lit.
+ *
+ * Smoothstep rather than a linear ramp: linear gives the light a hard rim,
+ * because the eye finds the discontinuity in the first derivative. This one
+ * arrives and leaves at zero slope, so the light has no edge.
+ */
+export function influenceAt(distance: number, radius: number): number {
+  if (radius <= 0) return 0;
+  const proximity = Math.max(0, 1 - distance / radius);
+  return proximity * proximity * (3 - 2 * proximity);
+}
+
+/**
+ * Where the light is at a phase of the loop, and how wide it reaches.
+ *
+ * `drift` wanders around the middle — two periods that do not divide into each
+ * other, so the path never closes into a loop the eye can learn, and small
+ * amplitudes because a light that reaches the corners stops reading as one
+ * source. `pulse` is a ring leaving the centre. `scan` crosses as a band, which
+ * is the same maths with the light infinitely tall.
+ */
+function lightAt(
+  animation: DotFieldAnimation,
+  phase: number,
+  width: number,
+  height: number
+): { x: number; y: number; radius: number; ring: number } {
+  const short = Math.min(width, height);
+  const turn = phase * Math.PI * 2;
+
+  if (animation === 'pulse') {
+    const reach = Math.sqrt(width * width + height * height) / 2;
+    return { x: width / 2, y: height / 2, radius: short * 0.3, ring: phase * reach };
+  }
+
+  if (animation === 'scan') {
+    // A band: infinitely tall, so only the horizontal distance counts.
+    //
+    // It starts and ends half a band clear of the edges rather than a whole
+    // one — far enough to ramp in and out, near enough that some of it is
+    // always on the field. Travelling fully off, the loop spends several
+    // frames drawing nothing at all, which reads as the component having
+    // stopped rather than as a band that has passed.
+    const radius = width * 0.28;
+    return {
+      x: -radius * 0.5 + phase * (width + radius),
+      y: Number.NaN,
+      radius,
+      ring: 0,
+    };
+  }
+
+  return {
+    x: width / 2 + Math.sin(turn) * width * 0.26,
+    y: height / 2 + Math.cos(turn * 1.37) * height * 0.22,
+    radius: short * 0.42,
+    ring: 0,
+  };
+}
+
+/**
+ * The lit dots at one phase of the loop, as a path.
+ *
+ * Only the dots the light actually reaches are in it — the rest are already
+ * drawn by the resting grid underneath, so this is a fraction of the field
+ * rather than all of it.
+ */
+export function litPath(
+  width: number,
+  height: number,
+  phase: number,
+  animation: DotFieldAnimation = 'drift'
+): string {
+  if (width <= 0 || height <= 0) return '';
+
+  const light = lightAt(animation, phase, width, height);
+  let path = '';
+
+  for (const [x, y] of anchors(width, height)) {
+    const deltaX = x - light.x;
+    const deltaY = Number.isNaN(light.y) ? 0 : y - light.y;
+    const distance = Math.abs(
+      Math.sqrt(deltaX * deltaX + deltaY * deltaY) - light.ring
+    );
+    const influence = influenceAt(distance, light.radius);
+    if (influence <= 0.02) continue;
+    path += circle(x, y, DOT_RADIUS + influence * (DOT_LIT_RADIUS - DOT_RADIUS));
+  }
+
+  return path;
+}
+
+/**
+ * Every frame of the loop, built once.
+ *
+ * A still frame the light is somewhere legible in is also what a paused or
+ * reduced-motion field shows, so there is no separate code path for holding it.
+ */
+export function litFrames(
+  width: number,
+  height: number,
+  animation: DotFieldAnimation = 'drift'
+): string[] {
+  return Array.from({ length: FRAMES }, (_unused, index) =>
+    litPath(width, height, index / FRAMES, animation)
+  );
+}
+
+/** One pass of the loop, in milliseconds, per animation. */
+export const PERIOD: Record<DotFieldAnimation, number> = {
+  drift: 4200,
+  pulse: 2200,
+  scan: 1900,
+};
+
+/** Which frame a moment falls on. */
+export function frameAt(time: number, animation: DotFieldAnimation): number {
+  'worklet';
+  const phase = (time % PERIOD[animation]) / PERIOD[animation];
+  return Math.min(FRAMES - 1, Math.floor(phase * FRAMES));
+}