panelui-native 0.77.0 → 0.79.0

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

@@ -11,17 +11,26 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react';
-import { Pressable, useWindowDimensions, View, type ViewProps } from 'react-native';
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ViewProps,
+} from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  Extrapolation,
   FadeIn,
+  interpolate,
   FadeOut,
   SlideInDown,
   SlideOutDown,
   runOnJS,
   useAnimatedScrollHandler,
   useAnimatedStyle,
+  useReducedMotion,
   useSharedValue,
   withSpring,
   withTiming,
@@ -36,11 +45,60 @@ import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
 import { cn } from '../../utils/cn';
+import { impactKnock } from '../../utils/haptics';
+
+/**
+ * One spring for the whole surface, in Apple's two designer parameters rather
+ * than mass/stiffness/damping — the sheet arriving, the sheet snapping back and
+ * the sheet leaving used to be three slightly different springs, which is three
+ * different weights for one object.
+ *
+ * A little under critically damped, so it settles without a bounce. A sheet
+ * that overshoots reads as light, and a sheet is not light.
+ *
+ * Slower than the 300ms a small state change gets, and deliberately. This is a
+ * large surface travelling most of the screen, and it is the same category of
+ * movement as a screen transition rather than as a toggle — the platform's own
+ * sheets are slower still. Taken at toggle speed it arrives before the eye has
+ * followed it, which reads as a jump-cut to a different screen rather than as
+ * something coming up from the bottom.
+ */
+const SPRING = { duration: 420, dampingRatio: 0.9 } as const;
+
+/**
+ * Leaving, where the far side of the travel is off screen: clamped, because a
+ * spring allowed to overshoot past the bottom flashes a gap under the sheet on
+ * its way back.
+ */
+const EXIT_SPRING = { duration: 380, dampingRatio: 1, overshootClamping: true } as const;
 
-const SPRING = { damping: 22, stiffness: 280, mass: 0.7 } as const;
 const DISMISS_DISTANCE = 120;
 const DISMISS_VELOCITY = 800;
 
+/*
+ * Built once at module scope. A layout-animation builder constructed in render
+ * 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
+ * exponential-decay form.
+ *
+ * Distance alone makes the sheet heavy: a short fast flick downward is
+ * unmistakably a dismissal, and asking it to also travel 120 points first means
+ * the reader has to throw the sheet twice.
+ */
+function project(velocity: number): number {
+  'worklet';
+  const decelerationRate = 0.998;
+  return ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);
+}
+
 const sheetVariants = tv({
   base: 'border border-border bg-popover px-5 pt-2 shadow-lg',
   variants: {
@@ -287,6 +345,7 @@ function BottomSheetContent({
   const { open, setOpen } = context;
   const nativeSheet = useContext(NativeSheetContext);
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
+  const reducedMotion = useReducedMotion();
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
   const closeTint = useCSSVariable('--color-muted-foreground');
@@ -353,15 +412,31 @@ function BottomSheetContent({
           translateY.value = next > 0 ? next : next / 3;
         })
         .onEnd((event) => {
+          /*
+           * Velocity decides as much as distance does, and it is handed to the
+           * animation rather than only consulted by it. A flat timing from
+           * wherever the finger let go ignores how fast it was moving, so the
+           * frame the touch ends is a visible seam between a fast drag and a
+           * slow slide — the single detail that separates a sheet that follows
+           * your hand from one that merely goes where you put it.
+           */
+          const projected = translateY.value + project(event.velocityY);
           if (
-            translateY.value > DISMISS_DISTANCE ||
+            projected > DISMISS_DISTANCE ||
             event.velocityY > DISMISS_VELOCITY
           ) {
-            translateY.value = withTiming(screenHeight, { duration: 200 }, () => {
-              runOnJS(close)();
-            });
+            translateY.value = withSpring(
+              screenHeight,
+              { ...EXIT_SPRING, velocity: event.velocityY },
+              (finished) => {
+                if (finished) runOnJS(close)();
+              }
+            );
           } else {
-            translateY.value = withSpring(0, SPRING);
+            translateY.value = withSpring(0, { ...SPRING, velocity: event.velocityY });
+            // It caught rather than went. Fired here, at the moment the sheet
+            // commits to staying, not when it finishes arriving.
+            runOnJS(impactKnock)();
           }
         }),
     // Rebuilt only when one of these changes. Built inline it would be a new
@@ -374,6 +449,15 @@ function BottomSheetContent({
     transform: [{ translateY: translateY.value }],
   }));
 
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      translateY.value,
+      [0, screenHeight],
+      [1, 0],
+      Extrapolation.CLAMP
+    ),
+  }));
+
   /*
    * A sized sheet is clamped rather than handed its fraction outright.
    * `insets.top` is the status bar and the notch, and content that runs under
@@ -453,7 +537,12 @@ function BottomSheetContent({
           subtree — re-provide the context so nested consumers keep working. */}
       <BottomSheetContext.Provider value={context}>
         <View className="absolute inset-0 justify-end">
-        <View className="absolute inset-0">
+        {/* Derived from the same value the sheet moves on, so the backdrop
+            cannot disagree with it: dragging the sheet halfway down lightens
+            the screen behind it by half. Left to its own fade the scrim stayed
+            fully dark until the sheet had gone, which reads as a dimmed screen
+            with nothing on it. */}
+        <Animated.View style={[StyleSheet.absoluteFill, backdropStyle]}>
           {/* Scrim draws the backdrop and its own fade; the Pressable over it
               is what closes the sheet, since the scrim takes no touches. */}
           <Scrim blur={blur} />
@@ -462,11 +551,20 @@ function BottomSheetContent({
             className="flex-1"
             onPress={dismissible ? close : undefined}
           />
-        </View>
+        </Animated.View>
         <GestureDetector gesture={pan}>
           <Animated.View
-            entering={SlideInDown.springify().damping(22).stiffness(240).mass(0.8)}
-            exiting={SlideOutDown.duration(200)}
+            /*
+             * The same spring the drag settles with, so a sheet caught halfway
+             * through arriving and a sheet released after a drag are the same
+             * object moving at the same weight.
+             *
+             * Reduced motion keeps the scrim's fade and drops the slide: the
+             * state change still has to be legible, and it is the travel that
+             * setting is about.
+             */
+            entering={reducedMotion ? FadeIn.duration(150) : ENTERING}
+            exiting={reducedMotion ? FadeOut.duration(150) : EXITING}
             accessibilityViewIsModal
             className={sheetVariants({ detached, className })}
             {...props}

package/src/components/funnel-chart/index.tsx

@@ -90,6 +90,7 @@ import { useDirection } from '../../hooks/use-direction';
 import { Text } from '../../primitives/text';
 import { compactNumber, ribbonPath, useSeriesColor } from '../../utils/chart';
 import { cn } from '../../utils/cn';
+import { useSkeletonHandoff } from '../../hooks/use-skeleton-handoff';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -790,12 +791,19 @@ function FunnelChartSkeleton({ color }: FunnelChartSkeletonProps) {
   const token = useCSSVariable('--color-skeleton');
   const fill = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
 
-  if (status !== 'loading' || width <= 0 || height <= 0) return null;
+  // Held through the fade rather than to the frame the data lands, so the plain
+  // taper dissolves under the stages growing across it instead of leaving a
+  // blank panel between the two.
+  const { mounted, opacity } = useSkeletonHandoff(status === 'loading');
+  const animatedProps = useAnimatedProps(() => ({ opacity: opacity.value }));
+
+  if (!mounted || width <= 0 || height <= 0) return null;
 
   const extent = Math.max(0, height / 2 - textBand);
 
   return (
-    <Path
+    <AnimatedPath
+      animatedProps={animatedProps}
       d={ribbonPath(0, width, extent, extent * 0.4, middle, curve)}
       fill={fill}
     />

package/src/components/heatmap-chart/index.tsx

@@ -54,18 +54,18 @@ import Animated, {
   Easing,
   runOnJS,
   useAnimatedProps,
+  useAnimatedStyle,
   useReducedMotion,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import Svg, { ClipPath, Defs, G, Line as SvgLine, Rect } from 'react-native-svg';
+import Svg, { G, Line as SvgLine, Rect } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
 import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { cn } from '../../utils/cn';
 import { normalizeWeekStart, startOfDay } from '../../utils/date';
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
 /**
  * Rows in a week — the default, and what the calendar helper and the weekday
@@ -187,7 +187,6 @@ interface HeatmapContextValue {
   cornerRadius: number;
   inactiveOpacity: number;
   weekStartDay: number;
-  clipId: string;
   activeCell: HeatmapCell | null;
   setActiveCell: (cell: HeatmapCell | null) => void;
 }
@@ -409,7 +408,6 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
 ) {
   const [width, setWidth] = useState(0);
   const [activeCell, setActiveCellState] = useState<HeatmapCell | null>(null);
-  const clipId = `panelui-heat-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const reducedMotion = useReducedMotion();
@@ -551,7 +549,6 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
       cornerRadius,
       inactiveOpacity,
       weekStartDay,
-      clipId,
       activeCell,
       setActiveCell,
     }),
@@ -565,7 +562,6 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
       cornerRadius,
       inactiveOpacity,
       weekStartDay,
-      clipId,
       activeCell,
       setActiveCell,
     ]
@@ -576,7 +572,7 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
    * effect is the same — columns arriving in order — and it costs one animated
    * value instead of one per week, which for a year is fifty-two.
    */
-  const clipProps = useAnimatedProps(() => ({ width: grid.width * reveal.value }));
+  const revealStyle = useAnimatedStyle(() => ({ width: grid.width * reveal.value }));
 
   return (
     <HeatmapContext.Provider value={context}>
@@ -625,23 +621,32 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
           <View style={{ width: grid.width, height: grid.height }}>
             {grid.width > 0 ? (
               <>
-                <Svg width={grid.width} height={grid.height} style={StyleSheet.absoluteFill}>
-                  <Defs>
-                    <ClipPath id={clipId}>
-                      <AnimatedRect
-                        x={0}
-                        y={0}
-                        width={grid.width}
-                        height={grid.height}
-                        animatedProps={clipProps}
-                      />
-                    </ClipPath>
-                  </Defs>
-                  <G clipPath={`url(#${clipId})`}>
+                {/*
+                 * The reveal is a view that grows, not an SVG clip path.
+                 *
+                 * It used to be an animated `<Rect>` inside `<Defs>`, and on
+                 * Android those animated props never reach the native clip, so
+                 * the grid drew complete and the reveal did not play at all. A
+                 * view with `overflow: 'hidden'` is clipped by the platform
+                 * itself, which both platforms agree on.
+                 *
+                 * Animating `width` is normally a layout pass per frame. This
+                 * view is absolutely positioned and its only child is an
+                 * `<Svg>` with an explicit width and height, so it is one node
+                 * and nothing around it moves.
+                 */}
+                <Animated.View
+                  pointerEvents="none"
+                  style={[
+                    { position: 'absolute', top: 0, bottom: 0, left: 0, overflow: 'hidden' },
+                    revealStyle,
+                  ]}
+                >
+                  <Svg width={grid.width} height={grid.height}>
                     {parts.rules}
                     {parts.cells}
-                  </G>
-                </Svg>
+                  </Svg>
+                </Animated.View>
                 {parts.tooltip}
               </>
             ) : null}

package/src/components/hex-chart/index.tsx

@@ -526,21 +526,37 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
             <>
               <Svg width={width} height={height}>
                 <Defs>
+                  {/*
+                   * The reveal's own geometry is declared statically as well as
+                   * animated, and it has to be. Animated props on an element
+                   * inside `Defs` do not reach the native clip on every
+                   * platform — Android is the one that does not — and with the
+                   * size coming only from the animation there is no size at all
+                   * where they do not: an empty clip, and a honeycomb whose
+                   * series never appear while its field draws normally.
+                   *
+                   * Declared, the worst case is the reveal not playing and the
+                   * split being there from the first frame, which is a chart
+                   * that is merely less pleasing rather than a chart that is
+                   * missing its answer.
+                   */}
                   <ClipPath id={clipId}>
                     {shape === 'blob' ? (
                       <AnimatedEllipse
                         cx={left + fieldWidth / 2}
                         cy={top + fieldHeight / 2}
+                        rx={(fieldWidth / 2) * CORNER_REACH}
+                        ry={(fieldHeight / 2) * CORNER_REACH}
                         animatedProps={ellipseProps}
                       />
                     ) : (
                       <AnimatedRect
-                          x={0}
-                          y={0}
-                          width={width}
-                          height={height}
-                          animatedProps={rectProps}
-                        />
+                        x={0}
+                        y={0}
+                        width={width}
+                        height={height}
+                        animatedProps={rectProps}
+                      />
                     )}
                   </ClipPath>
                 </Defs>

package/src/components/line-chart/index.tsx

@@ -71,13 +71,11 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, {
   Circle,
-  ClipPath,
   Defs,
   G,
   Line as SvgLine,
   LinearGradient,
   Path,
-  Rect,
   Stop,
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
@@ -96,7 +94,6 @@ import {
 import { cn } from '../../utils/cn';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 
@@ -114,7 +111,7 @@ const Y_AXIS_GUTTER = 6;
  * stays a flat list of children instead of two nested slots the caller has to
  * remember the order of.
  */
-type Layer = 'svg' | 'overlay' | 'header';
+type Layer = 'svg' | 'series' | 'overlay' | 'header';
 
 export type LineChartStatus = 'loading' | 'ready';
 export type LineChartCurve = 'monotone' | 'linear';
@@ -143,7 +140,6 @@ interface LineChartContextValue {
   activeIndex: SharedValue<number>;
   activeIndexJS: number;
   setActiveIndexJS: (index: number) => void;
-  clipId: string;
 }
 
 const LineChartContext = createContext<LineChartContextValue | null>(null);
@@ -242,7 +238,6 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [series, setSeries] = useState<[string, string][]>([]);
   const [activeIndexJS, setActiveIndexJS] = useState(-1);
-  const clipId = `panelui-clip-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const domainMin = useSharedValue(0);
@@ -373,7 +368,7 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
   // `replay()` re-runs the reveal — for a control the caller wires up.
   useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);
 
-  const clipProps = useAnimatedProps(() => ({ width: plot.width * reveal.value }));
+  const revealStyle = useAnimatedStyle(() => ({ width: plot.width * reveal.value }));
 
   // One place the crosshair index lands, so the chart's own children and a
   // readout outside it never disagree about which point is active.
@@ -411,7 +406,6 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
       activeIndex,
       activeIndexJS,
       setActiveIndexJS: handleActiveIndex,
-      clipId,
     }),
     // `plot` is rebuilt every render from `size`, so it is compared by value.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -433,11 +427,10 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
       activeIndex,
       activeIndexJS,
       handleActiveIndex,
-      clipId,
     ]
   );
 
-  const { svg, overlay, header } = partition(children);
+  const { svg, series: seriesLayer, overlay, header } = partition(children);
 
   /*
    * Two views, because the header is not part of the plot. `aspectRatio` and
@@ -472,32 +465,42 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
           {plot.width > 0 ? (
             <>
               <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
-                <Defs>
-                  {/*
-                   * One clip for everything in the plot. Sharing it is what
-                   * makes the reveal read as the chart arriving, rather than as
-                   * three separate things animating in at once.
-                   *
-                   * `width` is set statically as well as animated, and it has
-                   * to be. Animated props on an element inside `Defs` do not
-                   * reach the native clip on every platform, and with the width
-                   * coming only from the animation there is no width at all
-                   * when they do not — an empty clip, and a chart whose marks
-                   * are all invisible while its axes draw normally. Declared,
-                   * the worst case is the reveal not playing.
-                   */}
-                  <ClipPath id={clipId}>
-                    <AnimatedRect
-                      x={plot.left}
-                      y={0}
-                      width={plot.width}
-                      height={size.height}
-                      animatedProps={clipProps}
-                    />
-                  </ClipPath>
-                </Defs>
                 {svg}
               </Svg>
+              {/*
+               * The reveal is a view that grows, not an SVG clip path.
+               *
+               * It used to be an animated `<Rect>` inside `<Defs>`, and on
+               * Android those animated props never reach the native clip — the
+               * rect keeps whatever width was declared on it, so the chart drew
+               * complete and the reveal simply did not play. A view with
+               * `overflow: 'hidden'` is clipped by the platform itself, which
+               * both platforms agree on.
+               *
+               * Animating `width` is normally a layout pass per frame. Here the
+               * view is absolutely positioned and its only child is an `<Svg>`
+               * with an explicit width and height, so the work is one node and
+               * nothing around it moves.
+               *
+               * The inner `<Svg>` is pulled back by `plot.left` so the series
+               * keeps the same coordinate space as the grid underneath it —
+               * otherwise every mark would shift by the y-axis gutter.
+               */}
+              <Animated.View
+                pointerEvents="none"
+                style={[
+                  { position: 'absolute', top: 0, bottom: 0, left: plot.left, overflow: 'hidden' },
+                  revealStyle,
+                ]}
+              >
+                <Svg
+                  width={size.width}
+                  height={size.height}
+                  style={{ position: 'absolute', top: 0, left: -plot.left }}
+                >
+                  {seriesLayer}
+                </Svg>
+              </Animated.View>
               {overlay}
             </>
           ) : null}
@@ -511,20 +514,29 @@ LineChartRoot.displayName = 'LineChart';
 /** Sorts the children into the SVG tree and the view layer over it. */
 function partition(children: ReactNode) {
   const svg: ReactNode[] = [];
+  const series: ReactNode[] = [];
   const overlay: ReactNode[] = [];
   const header: ReactNode[] = [];
 
   Children.forEach(children, (child, index) => {
     if (!isValidElement(child)) return;
     const layer = (child.type as { layer?: Layer }).layer ?? 'svg';
-    (layer === 'header' ? header : layer === 'overlay' ? overlay : svg).push(
+    const bucket =
+      layer === 'header'
+        ? header
+        : layer === 'overlay'
+          ? overlay
+          : layer === 'series'
+            ? series
+            : svg;
+    bucket.push(
       // Children of a `Children.forEach` need keys of their own once they are
       // put into a new array.
       <ChildSlot key={index}>{child}</ChildSlot>
     );
   });
 
-  return { svg, overlay, header };
+  return { svg, series, overlay, header };
 }
 
 /** Identity wrapper, purely so the partitioned arrays can carry keys. */
@@ -600,7 +612,7 @@ function LineChartLine({
   dashArray,
   showMarkers = false,
 }: LineChartLineProps) {
-  const { data, plot, domainMin, domainMax, curve, status, registerSeries, unregisterSeries, clipId } =
+  const { data, plot, domainMin, domainMax, curve, status, registerSeries, unregisterSeries } =
     useChart('LineChart.Line');
   const stroke = useSeriesColor(color, colorIndex);
 
@@ -617,7 +629,7 @@ function LineChartLine({
   }));
 
   return (
-    <G clipPath={`url(#${clipId})`}>
+    <G>
       <AnimatedPath
         animatedProps={animatedProps}
         fill="none"
@@ -647,7 +659,7 @@ function LineChartLine({
   );
 }
 LineChartLine.displayName = 'LineChart.Line';
-LineChartLine.layer = 'svg' as Layer;
+LineChartLine.layer = 'series' as Layer;
 
 /** A dot at one point. Follows the y-domain tween exactly as the line does. */
 function PointMarker({
@@ -690,7 +702,7 @@ export interface LineChartAreaProps {
  * fills over each other make a third colour that means nothing.
  */
 function LineChartArea({ dataKey, color, colorIndex = 1, opacity = 0.18 }: LineChartAreaProps) {
-  const { data, plot, domainMin, domainMax, curve, status, clipId } = useChart('LineChart.Area');
+  const { data, plot, domainMin, domainMax, curve, status } = useChart('LineChart.Area');
   const fill = useSeriesColor(color, colorIndex);
   const gradientId = `panelui-area-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
@@ -702,7 +714,7 @@ function LineChartArea({ dataKey, color, colorIndex = 1, opacity = 0.18 }: LineC
   }));
 
   return (
-    <G clipPath={`url(#${clipId})`}>
+    <G>
       <Defs>
         <LinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
           <Stop offset="0" stopColor={fill} stopOpacity={opacity} />
@@ -714,7 +726,7 @@ function LineChartArea({ dataKey, color, colorIndex = 1, opacity = 0.18 }: LineC
   );
 }
 LineChartArea.displayName = 'LineChart.Area';
-LineChartArea.layer = 'svg' as Layer;
+LineChartArea.layer = 'series' as Layer;
 
 export interface LineChartSkeletonProps {
   /** Milliseconds for one pass of the sweep. */
@@ -733,6 +745,9 @@ function LineChartSkeleton({ duration = 1400, color }: LineChartSkeletonProps) {
   const token = useCSSVariable('--color-skeleton');
   const base = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
   const highlight = useSeriesColor(undefined, 1);
+  // Unique per instance: a fixed id makes two of these on one screen share a
+  // gradient, and the second one to mount wins.
+  const gradientId = `panelui-chart-skeleton-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const sweep = useSharedValue(0);
   const reducedMotion = useReducedMotion();
@@ -759,7 +774,6 @@ function LineChartSkeleton({ duration = 1400, color }: LineChartSkeletonProps) {
   if (!loading) return null;
 
   const y = plot.top + plot.height / 2;
-  const gradientId = 'panelui-chart-skeleton';
 
   return (
     <G>