panelui-native 0.76.0 → 0.78.0

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>

package/src/components/marquee/index.tsx

@@ -44,7 +44,15 @@
  * Screen readers get one copy. The rest are duplicates of content already
  * announced, and hearing a sponsor list four times over is not thoroughness.
  */
-import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
 import {
   Platform,
   Pressable,
@@ -99,7 +107,13 @@ export interface MarqueeProps extends Omit<ViewProps, 'children'> {
   reverse?: boolean;
   /** Set false to hold the content where it is. */
   playing?: boolean;
-  /** Show the built-in user pause/play control while motion is enabled. */
+  /**
+   * Show the built-in user pause/play control while motion is enabled.
+   *
+   * Defaults to `true` on its own, and to `false` inside a `Marquee.Group` —
+   * the group draws one control for everything in it, and a control per row is
+   * how two of them end up stacked on top of each other.
+   */
   showPauseControl?: boolean;
   /** Visible and spoken label for the moving state. */
   pauseLabel?: string;
@@ -109,7 +123,18 @@ export interface MarqueeProps extends Omit<ViewProps, 'children'> {
   onPlayingChange?: (playing: boolean) => void;
 }
 
-export function Marquee({
+/**
+ * Set by `Marquee.Group` so the marquees inside it stop drawing a pause control
+ * each and take the group's instead.
+ */
+interface MarqueeGroupContextValue {
+  /** True while the group's control is holding everything in it still. */
+  paused: boolean;
+}
+
+const MarqueeGroupContext = createContext<MarqueeGroupContextValue | null>(null);
+
+function MarqueeRoot({
   className,
   children,
   speed: speedProp = DEFAULT_MARQUEE_SPEED,
@@ -117,7 +142,7 @@ export function Marquee({
   direction = 'horizontal',
   reverse = false,
   playing = true,
-  showPauseControl = true,
+  showPauseControl,
   pauseLabel = 'Pause',
   playLabel = 'Play',
   onPlayingChange,
@@ -135,7 +160,13 @@ export function Marquee({
   const [content, setContent] = useState(0);
   const [userPaused, setUserPaused] = useState(false);
   const speed = normalizeMarqueeSpeed(speedProp);
-  const moving = playing && !userPaused;
+
+  // A group's pause is the same instruction as this one's, so it is read here
+  // rather than pushed down as a `playing` prop — a caller who set `playing`
+  // themselves should not have it overwritten by the container.
+  const group = useContext(MarqueeGroupContext);
+  const showControl = showPauseControl ?? group === null;
+  const moving = playing && !userPaused && !(group?.paused ?? false);
 
   // The distance from one copy to the same point on the next, and therefore
   // both the layout step and the exact loop length. They are the same number
@@ -250,7 +281,7 @@ export function Marquee({
           );
         })}
       </Animated.View>
-      {showPauseControl && playing && period > 0 && speed > 0 ? (
+      {showControl && playing && period > 0 && speed > 0 ? (
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={userPaused ? playLabel : pauseLabel}
@@ -270,6 +301,98 @@ export function Marquee({
   );
 }
 
+export interface MarqueeGroupProps extends ViewProps {
+  className?: string;
+  /** Set false to hold every marquee in the group where it is. */
+  playing?: boolean;
+  /** Show the group's pause/play control. */
+  showPauseControl?: boolean;
+  /** Visible and spoken label for the moving state. */
+  pauseLabel?: string;
+  /** Visible and spoken label for the user-paused state. */
+  playLabel?: string;
+  /** Reports changes made by the group's control. */
+  onPlayingChange?: (playing: boolean) => void;
+  children?: ReactNode;
+}
+
+/**
+ * Rows of travelling content that stop and start together, under one control.
+ *
+ * Moving content needs a way to stop it, so a marquee draws its own pause
+ * button. Stacked — two rows of logos travelling against each other — that is
+ * one button per row, each pinned to its own bottom corner, and the upper one
+ * lands on top of the row beneath it. Two buttons for one piece of motion, and
+ * one of them covering the content it belongs to.
+ *
+ * A group is the answer to both: the marquees inside it stop drawing their own
+ * control, and the group draws a single one below them rather than over them.
+ *
+ * ```tsx
+ * <Marquee.Group>
+ *   <Marquee>{topRow}</Marquee>
+ *   <Marquee reverse>{bottomRow}</Marquee>
+ * </Marquee.Group>
+ * ```
+ *
+ * Each marquee keeps its own `playing` prop. The group's pause is an additional
+ * hold, not a replacement — a row already held still stays still.
+ */
+function MarqueeGroup({
+  className,
+  children,
+  playing = true,
+  showPauseControl = true,
+  pauseLabel = 'Pause',
+  playLabel = 'Play',
+  onPlayingChange,
+  ...props
+}: MarqueeGroupProps) {
+  const [userPaused, setUserPaused] = useState(false);
+  const reducedMotion = useReducedMotion();
+
+  const value = useMemo(() => ({ paused: userPaused }), [userPaused]);
+
+  // Nothing is moving, so there is nothing to stop. The control is not hidden
+  // to save space — offering to pause content that is already still is the
+  // same lie as a disabled button with no reason on it.
+  const showControl = showPauseControl && playing && !reducedMotion;
+
+  return (
+    <MarqueeGroupContext.Provider value={value}>
+      <View {...props} className={cn('w-full gap-3', className)}>
+        {children}
+        {showControl ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={userPaused ? playLabel : pauseLabel}
+            // In flow and at the end, not floating over the last row. The
+            // control belongs to the group, and a group's control that covers
+            // one of its members is describing itself as part of that member.
+            className="min-h-12 self-end items-center justify-center rounded-full border border-border bg-background px-4"
+            onPress={() => {
+              const next = !userPaused;
+              setUserPaused(next);
+              onPlayingChange?.(!next);
+            }}
+          >
+            <Text className="text-xs font-medium text-foreground">
+              {userPaused ? playLabel : pauseLabel}
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+    </MarqueeGroupContext.Provider>
+  );
+}
+MarqueeGroup.displayName = 'Marquee.Group';
+
+MarqueeRoot.displayName = 'Marquee';
+
+export const Marquee = Object.assign(MarqueeRoot, {
+  Group: MarqueeGroup,
+});
+
 const styles = StyleSheet.create({
   /* Laid out so it measures, hidden so it does not draw, and behind everything
      so it can never intercept anything. */

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

@@ -70,6 +70,7 @@ import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
 import { compactNumber, useSeriesColor, wedgePath } from '../../utils/chart';
 import { cn } from '../../utils/cn';
+import { useSkeletonHandoff } from '../../hooks/use-skeleton-handoff';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -598,10 +599,17 @@ function PieChartSkeleton({ color }: PieChartSkeletonProps) {
   const token = useCSSVariable('--color-skeleton');
   const fill = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
 
-  if (status !== 'loading' || radius <= 0) return null;
+  // Held through the fade rather than to the frame the data lands, so the band
+  // dissolves under the wedges sweeping over it. Cut on `status` alone, the ring
+  // vanishes before the first wedge has any sweep to show.
+  const { mounted, opacity } = useSkeletonHandoff(status === 'loading');
+  const animatedProps = useAnimatedProps(() => ({ opacity: opacity.value }));
+
+  if (!mounted || radius <= 0) return null;
 
   return (
-    <Path
+    <AnimatedPath
+      animatedProps={animatedProps}
       d={wedgePath(size / 2, size / 2, radius, hole, origin, origin + span, 0)}
       fill={fill}
     />