panelui-native 0.77.0 → 0.79.0

package/lib/module/components/marquee/index.js

@@ -46,16 +46,23 @@
  * 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 } from 'react';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';
 import { Platform, Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { useDirectionSign } from "../../hooks/use-direction.js";
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
 import { DEFAULT_MARQUEE_SPEED, marqueeCopyCount, normalizeMarqueeSpeed } from "./marquee-math.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InertView = View;
-export function Marquee({
+
+/**
+ * Set by `Marquee.Group` so the marquees inside it stop drawing a pause control
+ * each and take the group's instead.
+ */
+
+const MarqueeGroupContext = /*#__PURE__*/createContext(null);
+function MarqueeRoot({
   className,
   children,
   speed: speedProp = DEFAULT_MARQUEE_SPEED,
@@ -63,7 +70,7 @@ export function Marquee({
   direction = 'horizontal',
   reverse = false,
   playing = true,
-  showPauseControl = true,
+  showPauseControl,
   pauseLabel = 'Pause',
   playLabel = 'Play',
   onPlayingChange,
@@ -80,7 +87,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
@@ -97,14 +110,46 @@ export function Marquee({
     }, (_, index) => index);
   }, [layout.count]);
   const offset = useSharedValue(0);
+
+  /*
+   * A re-measure is the only thing allowed to move the content back to the
+   * start. The loop length has changed, so an offset taken against the old one
+   * no longer means anything.
+   */
   useEffect(() => {
     cancelAnimation(offset);
     offset.value = 0;
+  }, [offset, period]);
+
+  /*
+   * Pausing freezes where it is. `cancelAnimation` already leaves the shared
+   * value at whatever it had reached, so stopping is simply not starting again
+   * — the content stays exactly where the reader stopped it, which is the
+   * whole point of a pause control on something they are trying to read.
+   *
+   * Resuming picks up from there. The first leg is shortened to the distance
+   * actually left, or the lap after a pause would run at a fraction of the
+   * speed every other lap runs at.
+   */
+  useEffect(() => {
+    cancelAnimation(offset);
     if (reducedMotion || !moving || period <= 0 || speed <= 0) return undefined;
-    offset.value = withRepeat(withTiming(period, {
-      duration: period / speed * 1000,
+    const cycle = period / speed * 1000;
+    const from = (offset.value % period + period) % period;
+    const remaining = period - from;
+    offset.value = from;
+    offset.value = withSequence(withTiming(period, {
+      duration: cycle * (remaining / period),
+      easing: Easing.linear
+    }),
+    // Back to the seam in no time at all. The state at `period` is the state
+    // at `0`, so this is a bookkeeping step rather than a visible one.
+    withTiming(0, {
+      duration: 0
+    }), withRepeat(withTiming(period, {
+      duration: cycle,
       easing: Easing.linear
-    }), -1, false);
+    }), -1, false));
     return () => cancelAnimation(offset);
   }, [offset, period, moving, reducedMotion, speed]);
   const trackStyle = useAnimatedStyle(() => {
@@ -136,6 +181,24 @@ export function Marquee({
     setContent(horizontal ? width : height);
   };
 
+  /*
+   * Whether there is motion here at all: content that measured, a speed to
+   * travel it at, and a `playing` that has not already stopped it from
+   * outside. A control offering to pause a still marquee is the same lie as a
+   * disabled button with no reason on it.
+   */
+  const live = playing && !reducedMotion && period > 0 && speed > 0;
+
+  // Reported to the group, if there is one, so its single control can be
+  // decided the same way this one's is.
+  const id = useId();
+  const report = group?.report;
+  useEffect(() => {
+    if (!report) return undefined;
+    report(id, live);
+    return () => report(id, false);
+  }, [report, id, live]);
+
   // Nothing to loop, so nothing to clip or clone: render the content plainly
   // and let it sit where it falls.
   if (reducedMotion) {
@@ -148,48 +211,58 @@ export function Marquee({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    className: cn('overflow-hidden', className),
+    className: cn('gap-3', className),
     style: style,
-    onLayout: onContainerLayout,
+    onLayout: onLayout,
     ...props,
-    children: [/*#__PURE__*/_jsx(ScrollView, {
-      horizontal: horizontal,
-      scrollEnabled: false,
-      style: styles.measure,
-      pointerEvents: "none",
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: /*#__PURE__*/_jsx(InertView, {
-        inert: Platform.OS === 'web' ? true : undefined,
-        onLayout: onContentLayout,
-        children: children
-      })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [StyleSheet.absoluteFill, trackStyle],
-      pointerEvents: "box-none",
-      children: copies.map(index => {
-        // Index 1 is the copy that starts flush with the container's edge,
-        // and it is the one a screen reader is given.
-        const spoken = index === 1;
-        const at = (index - 1) * period;
-        return /*#__PURE__*/_jsx(InertView, {
-          style: [styles.copy, horizontal ? {
-            left: at
-          } : {
-            top: at
-          }],
-          pointerEvents: spoken ? 'box-none' : 'none',
-          inert: Platform.OS === 'web' && !spoken ? true : undefined,
-          "aria-hidden": !spoken,
-          accessibilityElementsHidden: !spoken,
-          importantForAccessibility: spoken ? 'auto' : 'no-hide-descendants',
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "flex-1 overflow-hidden",
+      onLayout: onContainerLayout,
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        horizontal: horizontal,
+        scrollEnabled: false,
+        style: styles.measure,
+        pointerEvents: "none",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /*#__PURE__*/_jsx(InertView, {
+          inert: Platform.OS === 'web' ? true : undefined,
+          onLayout: onContentLayout,
           children: children
-        }, index);
-      })
-    }), showPauseControl && playing && period > 0 && speed > 0 ? /*#__PURE__*/_jsx(Pressable, {
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [StyleSheet.absoluteFill, trackStyle],
+        pointerEvents: "box-none",
+        children: copies.map(index => {
+          // Index 1 is the copy that starts flush with the container's edge,
+          // and it is the one a screen reader is given.
+          const spoken = index === 1;
+          const at = (index - 1) * period;
+          return /*#__PURE__*/_jsx(InertView, {
+            style: [styles.copy, horizontal ? {
+              left: at
+            } : {
+              top: at
+            }],
+            pointerEvents: spoken ? 'box-none' : 'none',
+            inert: Platform.OS === 'web' && !spoken ? true : undefined,
+            "aria-hidden": !spoken,
+            accessibilityElementsHidden: !spoken,
+            importantForAccessibility: spoken ? 'auto' : 'no-hide-descendants',
+            children: children
+          }, index);
+        })
+      })]
+    }), showControl && live ? /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
-      accessibilityLabel: userPaused ? playLabel : pauseLabel,
-      className: "absolute bottom-2 end-2 min-h-12 min-w-12 items-center justify-center rounded-full border border-border bg-background/95 px-3",
+      accessibilityLabel: userPaused ? playLabel : pauseLabel
+      /*
+       * Below the content, in flow, the way a group's control already is.
+       * Floating over the track it was clipped by the track's own
+       * `overflow-hidden` — a 48pt target on a strip of badges half that
+       * tall — and it covered the content it was there to let you read.
+       */,
+      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);
@@ -202,6 +275,92 @@ export function Marquee({
     }) : null]
   });
 }
+/**
+ * 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
+}) {
+  const [userPaused, setUserPaused] = useState(false);
+  const [liveRows, setLiveRows] = useState(() => new Set());
+  const reducedMotion = useReducedMotion();
+
+  // Each marquee inside says whether it has a loop to stop, and the group's
+  // control is drawn only if at least one of them does.
+  const report = useCallback((id, live) => {
+    setLiveRows(current => {
+      if (current.has(id) === live) return current;
+      const next = new Set(current);
+      if (live) next.add(id);else next.delete(id);
+      return next;
+    });
+  }, []);
+  const value = useMemo(() => ({
+    paused: userPaused,
+    report
+  }), [userPaused, report]);
+
+  // 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 && liveRows.size > 0;
+  return /*#__PURE__*/_jsx(MarqueeGroupContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsxs(View, {
+      ...props,
+      className: cn('w-full gap-3', className),
+      children: [children, showControl ? /*#__PURE__*/_jsx(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);
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          className: "text-xs font-medium text-foreground",
+          children: userPaused ? playLabel : pauseLabel
+        })
+      }) : null]
+    })
+  });
+}
+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/lib/module/components/marquee/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","Platform","Pressable","ScrollView","StyleSheet","View","Animated","cancelAnimation","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withTiming","useDirectionSign","Text","cn","DEFAULT_MARQUEE_SPEED","marqueeCopyCount","normalizeMarqueeSpeed","jsx","_jsx","jsxs","_jsxs","InertView","Marquee","className","children","speed","speedProp","spacing","direction","reverse","playing","showPauseControl","pauseLabel","playLabel","onPlayingChange","style","onLayout","props","horizontal","reducedMotion","sign","flip","viewport","setViewport","content","setContent","userPaused","setUserPaused","moving","layout","period","copies","Array","from","length","count","_","index","offset","value","undefined","duration","easing","linear","trackStyle","travel","transform","translateX","translateY","onContainerLayout","event","width","height","nativeEvent","onContentLayout","scrollEnabled","styles","measure","pointerEvents","accessibilityElementsHidden","importantForAccessibility","inert","OS","absoluteFill","map","spoken","at","copy","left","top","accessibilityRole","accessibilityLabel","onPress","next","create","opacity","zIndex","position"],"sourceRoot":"../../../../src","sources":["components/marquee/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useCallback","useContext","useEffect","useId","useMemo","useState","Platform","Pressable","ScrollView","StyleSheet","View","Animated","cancelAnimation","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withSequence","withTiming","useDirectionSign","Text","cn","DEFAULT_MARQUEE_SPEED","marqueeCopyCount","normalizeMarqueeSpeed","jsx","_jsx","jsxs","_jsxs","InertView","MarqueeGroupContext","MarqueeRoot","className","children","speed","speedProp","spacing","direction","reverse","playing","showPauseControl","pauseLabel","playLabel","onPlayingChange","style","onLayout","props","horizontal","reducedMotion","sign","flip","viewport","setViewport","content","setContent","userPaused","setUserPaused","group","showControl","moving","paused","layout","period","copies","Array","from","length","count","_","index","offset","value","undefined","cycle","remaining","duration","easing","linear","trackStyle","travel","transform","translateX","translateY","onContainerLayout","event","width","height","nativeEvent","onContentLayout","live","id","report","scrollEnabled","styles","measure","pointerEvents","accessibilityElementsHidden","importantForAccessibility","inert","OS","absoluteFill","map","spoken","at","copy","left","top","accessibilityRole","accessibilityLabel","onPress","next","MarqueeGroup","liveRows","setLiveRows","Set","current","has","add","delete","size","Provider","displayName","Marquee","Object","assign","Group","create","opacity","zIndex","position"],"sourceRoot":"../../../../src","sources":["components/marquee/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,QAAQ,QAGH,OAAO;AACd,SACEC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,IAAI,QAGC,cAAc;AACrB,OAAOC,QAAQ,IACbC,eAAe,EACfC,MAAM,EACNC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,UAAU,QACL,yBAAyB;AAChC,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,EAAE,QAAQ,mBAAgB;AACnC,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,qBAAqB,QAChB,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKxB,MAAMC,SAAS,GAAGpB,IAAqC;;AAwCvD;AACA;AACA;AACA;;AAeA,MAAMqB,mBAAmB,gBAAGhC,aAAa,CAAkC,IAAI,CAAC;AAEhF,SAASiC,WAAWA,CAAC;EACnBC,SAAS;EACTC,QAAQ;EACRC,KAAK,EAAEC,SAAS,GAAGb,qBAAqB;EACxCc,OAAO,GAAG,CAAC;EACXC,SAAS,GAAG,YAAY;EACxBC,OAAO,GAAG,KAAK;EACfC,OAAO,GAAG,IAAI;EACdC,gBAAgB;EAChBC,UAAU,GAAG,OAAO;EACpBC,SAAS,GAAG,MAAM;EAClBC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACS,CAAC,EAAE;EACf,MAAMC,UAAU,GAAGV,SAAS,KAAK,YAAY;EAC7C,MAAMW,aAAa,GAAGlC,gBAAgB,CAAC,CAAC;EACxC;EACA,MAAMmC,IAAI,GAAG9B,gBAAgB,CAAC,CAAC;EAC/B,MAAM+B,IAAI,GAAGH,UAAU,GAAGE,IAAI,GAAG,CAAC;EAElC,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAGhD,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACiD,OAAO,EAAEC,UAAU,CAAC,GAAGlD,QAAQ,CAAC,CAAC,CAAC;EACzC,MAAM,CAACmD,UAAU,EAAEC,aAAa,CAAC,GAAGpD,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM8B,KAAK,GAAGV,qBAAqB,CAACW,SAAS,CAAC;;EAE9C;EACA;EACA;EACA,MAAMsB,KAAK,GAAGzD,UAAU,CAAC8B,mBAAmB,CAAC;EAC7C,MAAM4B,WAAW,GAAGlB,gBAAgB,IAAIiB,KAAK,KAAK,IAAI;EACtD,MAAME,MAAM,GAAGpB,OAAO,IAAI,CAACgB,UAAU,IAAI,EAAEE,KAAK,EAAEG,MAAM,IAAI,KAAK,CAAC;;EAElE;EACA;EACA;EACA,MAAMC,MAAM,GAAG1D,OAAO,CACpB,MAAMoB,gBAAgB,CAAC4B,QAAQ,EAAEE,OAAO,EAAEjB,OAAO,CAAC,EAClD,CAACe,QAAQ,EAAEE,OAAO,EAAEjB,OAAO,CAC7B,CAAC;EACD,MAAM;IAAE0B;EAAO,CAAC,GAAGD,MAAM;EAEzB,MAAME,MAAM,GAAG5D,OAAO,CAAC,MAAM;IAC3B;IACA;IACA,OAAO6D,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEL,MAAM,CAACM;IAAM,CAAC,EAAE,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAAC;EAClE,CAAC,EAAE,CAACR,MAAM,CAACM,KAAK,CAAC,CAAC;EAElB,MAAMG,MAAM,GAAGvD,cAAc,CAAC,CAAC,CAAC;;EAEhC;AACF;AACA;AACA;AACA;EACEd,SAAS,CAAC,MAAM;IACdU,eAAe,CAAC2D,MAAM,CAAC;IACvBA,MAAM,CAACC,KAAK,GAAG,CAAC;EAClB,CAAC,EAAE,CAACD,MAAM,EAAER,MAAM,CAAC,CAAC;;EAEpB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE7D,SAAS,CAAC,MAAM;IACdU,eAAe,CAAC2D,MAAM,CAAC;IACvB,IAAItB,aAAa,IAAI,CAACW,MAAM,IAAIG,MAAM,IAAI,CAAC,IAAI5B,KAAK,IAAI,CAAC,EAAE,OAAOsC,SAAS;IAE3E,MAAMC,KAAK,GAAIX,MAAM,GAAG5B,KAAK,GAAI,IAAI;IACrC,MAAM+B,IAAI,GAAG,CAAEK,MAAM,CAACC,KAAK,GAAGT,MAAM,GAAIA,MAAM,IAAIA,MAAM;IACxD,MAAMY,SAAS,GAAGZ,MAAM,GAAGG,IAAI;IAE/BK,MAAM,CAACC,KAAK,GAAGN,IAAI;IACnBK,MAAM,CAACC,KAAK,GAAGtD,YAAY,CACzBC,UAAU,CAAC4C,MAAM,EAAE;MAAEa,QAAQ,EAAEF,KAAK,IAAIC,SAAS,GAAGZ,MAAM,CAAC;MAAEc,MAAM,EAAEhE,MAAM,CAACiE;IAAO,CAAC,CAAC;IACrF;IACA;IACA3D,UAAU,CAAC,CAAC,EAAE;MAAEyD,QAAQ,EAAE;IAAE,CAAC,CAAC,EAC9B3D,UAAU,CAACE,UAAU,CAAC4C,MAAM,EAAE;MAAEa,QAAQ,EAAEF,KAAK;MAAEG,MAAM,EAAEhE,MAAM,CAACiE;IAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CACtF,CAAC;IAED,OAAO,MAAMlE,eAAe,CAAC2D,MAAM,CAAC;EACtC,CAAC,EAAE,CAACA,MAAM,EAAER,MAAM,EAAEH,MAAM,EAAEX,aAAa,EAAEd,KAAK,CAAC,CAAC;EAElD,MAAM4C,UAAU,GAAGjE,gBAAgB,CAAC,MAAM;IACxC,MAAMkE,MAAM,GAAG,CAACzC,OAAO,GAAGgC,MAAM,CAACC,KAAK,GAAG,CAACD,MAAM,CAACC,KAAK,IAAIrB,IAAI;IAC9D,OAAO;MACL8B,SAAS,EAAE,CAACjC,UAAU,GAAG;QAAEkC,UAAU,EAAEF;MAAO,CAAC,GAAG;QAAEG,UAAU,EAAEH;MAAO,CAAC;IAC1E,CAAC;EACH,CAAC,EAAE,CAAChC,UAAU,EAAET,OAAO,EAAEY,IAAI,CAAC,CAAC;;EAE/B;EACA;EACA,MAAMiC,iBAAiB,GAAIC,KAAwB,IAAK;IACtD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAAC1B,MAAM;IAClDT,WAAW,CAACL,UAAU,GAAGsC,KAAK,GAAGC,MAAM,CAAC;IACxCzC,QAAQ,GAAGuC,KAAK,CAAC;EACnB,CAAC;EAED,MAAMI,eAAe,GAAIJ,KAAwB,IAAK;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAAC1B,MAAM;IAClDP,UAAU,CAACP,UAAU,GAAGsC,KAAK,GAAGC,MAAM,CAAC;EACzC,CAAC;;EAED;AACF;AACA;AACA;AACA;AACA;EACE,MAAMG,IAAI,GAAGlD,OAAO,IAAI,CAACS,aAAa,IAAIc,MAAM,GAAG,CAAC,IAAI5B,KAAK,GAAG,CAAC;;EAEjE;EACA;EACA,MAAMwD,EAAE,GAAGxF,KAAK,CAAC,CAAC;EAClB,MAAMyF,MAAM,GAAGlC,KAAK,EAAEkC,MAAM;EAC5B1F,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0F,MAAM,EAAE,OAAOnB,SAAS;IAC7BmB,MAAM,CAACD,EAAE,EAAED,IAAI,CAAC;IAChB,OAAO,MAAME,MAAM,CAACD,EAAE,EAAE,KAAK,CAAC;EAChC,CAAC,EAAE,CAACC,MAAM,EAAED,EAAE,EAAED,IAAI,CAAC,CAAC;;EAEtB;EACA;EACA,IAAIzC,aAAa,EAAE;IACjB,oBACEtB,IAAA,CAACjB,IAAI;MACHuB,SAAS,EAAEX,EAAE,CAAC,iBAAiB,EAAEW,SAAS,CAAE;MAC5CY,KAAK,EAAEA,KAAM;MACbC,QAAQ,EAAEA,QAAS;MAAA,GACfC,KAAK;MAAAb,QAAA,EAERA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEL,KAAA,CAACnB,IAAI;IAACuB,SAAS,EAAEX,EAAE,CAAC,OAAO,EAAEW,SAAS,CAAE;IAACY,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA,QAAS;IAAA,GAAKC,KAAK;IAAAb,QAAA,gBAGlFL,KAAA,CAACnB,IAAI;MAACuB,SAAS,EAAC,wBAAwB;MAACa,QAAQ,EAAEsC,iBAAkB;MAAAlD,QAAA,gBAGnEP,IAAA,CAACnB,UAAU;QACTwC,UAAU,EAAEA,UAAW;QACvB6C,aAAa,EAAE,KAAM;QACrBhD,KAAK,EAAEiD,MAAM,CAACC,OAAQ;QACtBC,aAAa,EAAC,MAAM;QACpBC,2BAA2B;QAC3BC,yBAAyB,EAAC,qBAAqB;QAAAhE,QAAA,eAE/CP,IAAA,CAACG,SAAS;UACRqE,KAAK,EAAE7F,QAAQ,CAAC8F,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG3B,SAAU;UAChD3B,QAAQ,EAAE2C,eAAgB;UAAAvD,QAAA,EAEzBA;QAAQ,CACA;MAAC,CACF,CAAC,eAEbP,IAAA,CAAChB,QAAQ,CAACD,IAAI;QAACmC,KAAK,EAAE,CAACpC,UAAU,CAAC4F,YAAY,EAAEtB,UAAU,CAAE;QAACiB,aAAa,EAAC,UAAU;QAAA9D,QAAA,EAClF8B,MAAM,CAACsC,GAAG,CAAEhC,KAAK,IAAK;UACrB;UACA;UACA,MAAMiC,MAAM,GAAGjC,KAAK,KAAK,CAAC;UAC1B,MAAMkC,EAAE,GAAG,CAAClC,KAAK,GAAG,CAAC,IAAIP,MAAM;UAC/B,oBACEpC,IAAA,CAACG,SAAS;YAERe,KAAK,EAAE,CAACiD,MAAM,CAACW,IAAI,EAAEzD,UAAU,GAAG;cAAE0D,IAAI,EAAEF;YAAG,CAAC,GAAG;cAAEG,GAAG,EAAEH;YAAG,CAAC,CAAE;YAC9DR,aAAa,EAAEO,MAAM,GAAG,UAAU,GAAG,MAAO;YAC5CJ,KAAK,EAAE7F,QAAQ,CAAC8F,EAAE,KAAK,KAAK,IAAI,CAACG,MAAM,GAAG,IAAI,GAAG9B,SAAU;YAC3D,eAAa,CAAC8B,MAAO;YACrBN,2BAA2B,EAAE,CAACM,MAAO;YACrCL,yBAAyB,EAAEK,MAAM,GAAG,MAAM,GAAG,qBAAsB;YAAArE,QAAA,EAElEA;UAAQ,GARJoC,KASI,CAAC;QAEhB,CAAC;MAAC,CACW,CAAC;IAAA,CACZ,CAAC,EACNX,WAAW,IAAI+B,IAAI,gBAClB/D,IAAA,CAACpB,SAAS;MACRqG,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAErD,UAAU,GAAGb,SAAS,GAAGD;MAC7C;AACV;AACA;AACA;AACA;AACA,SALU;MAMAT,SAAS,EAAC,oGAAoG;MAC9G6E,OAAO,EAAEA,CAAA,KAAM;QACb,MAAMC,IAAI,GAAG,CAACvD,UAAU;QACxBC,aAAa,CAACsD,IAAI,CAAC;QACnBnE,eAAe,GAAG,CAACmE,IAAI,CAAC;MAC1B,CAAE;MAAA7E,QAAA,eAEFP,IAAA,CAACN,IAAI;QAACY,SAAS,EAAC,qCAAqC;QAAAC,QAAA,EAClDsB,UAAU,GAAGb,SAAS,GAAGD;MAAU,CAChC;IAAC,CACE,CAAC,GACV,IAAI;EAAA,CACJ,CAAC;AAEX;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASsE,YAAYA,CAAC;EACpB/E,SAAS;EACTC,QAAQ;EACRM,OAAO,GAAG,IAAI;EACdC,gBAAgB,GAAG,IAAI;EACvBC,UAAU,GAAG,OAAO;EACpBC,SAAS,GAAG,MAAM;EAClBC,eAAe;EACf,GAAGG;AACc,CAAC,EAAE;EACpB,MAAM,CAACS,UAAU,EAAEC,aAAa,CAAC,GAAGpD,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM,CAAC4G,QAAQ,EAAEC,WAAW,CAAC,GAAG7G,QAAQ,CAAsB,MAAM,IAAI8G,GAAG,CAAC,CAAC,CAAC;EAC9E,MAAMlE,aAAa,GAAGlC,gBAAgB,CAAC,CAAC;;EAExC;EACA;EACA,MAAM6E,MAAM,GAAG5F,WAAW,CAAC,CAAC2F,EAAU,EAAED,IAAa,KAAK;IACxDwB,WAAW,CAAEE,OAAO,IAAK;MACvB,IAAIA,OAAO,CAACC,GAAG,CAAC1B,EAAE,CAAC,KAAKD,IAAI,EAAE,OAAO0B,OAAO;MAC5C,MAAML,IAAI,GAAG,IAAII,GAAG,CAACC,OAAO,CAAC;MAC7B,IAAI1B,IAAI,EAAEqB,IAAI,CAACO,GAAG,CAAC3B,EAAE,CAAC,CAAC,KAClBoB,IAAI,CAACQ,MAAM,CAAC5B,EAAE,CAAC;MACpB,OAAOoB,IAAI;IACb,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMvC,KAAK,GAAGpE,OAAO,CAAC,OAAO;IAAEyD,MAAM,EAAEL,UAAU;IAAEoC;EAAO,CAAC,CAAC,EAAE,CAACpC,UAAU,EAAEoC,MAAM,CAAC,CAAC;;EAEnF;EACA;EACA;EACA,MAAMjC,WAAW,GAAGlB,gBAAgB,IAAID,OAAO,IAAI,CAACS,aAAa,IAAIgE,QAAQ,CAACO,IAAI,GAAG,CAAC;EAEtF,oBACE7F,IAAA,CAACI,mBAAmB,CAAC0F,QAAQ;IAACjD,KAAK,EAAEA,KAAM;IAAAtC,QAAA,eACzCL,KAAA,CAACnB,IAAI;MAAA,GAAKqC,KAAK;MAAEd,SAAS,EAAEX,EAAE,CAAC,cAAc,EAAEW,SAAS,CAAE;MAAAC,QAAA,GACvDA,QAAQ,EACRyB,WAAW,gBACVhC,IAAA,CAACpB,SAAS;QACRqG,iBAAiB,EAAC,QAAQ;QAC1BC,kBAAkB,EAAErD,UAAU,GAAGb,SAAS,GAAGD;QAC7C;QACA;QACA;QAAA;QACAT,SAAS,EAAC,oGAAoG;QAC9G6E,OAAO,EAAEA,CAAA,KAAM;UACb,MAAMC,IAAI,GAAG,CAACvD,UAAU;UACxBC,aAAa,CAACsD,IAAI,CAAC;UACnBnE,eAAe,GAAG,CAACmE,IAAI,CAAC;QAC1B,CAAE;QAAA7E,QAAA,eAEFP,IAAA,CAACN,IAAI;UAACY,SAAS,EAAC,qCAAqC;UAAAC,QAAA,EAClDsB,UAAU,GAAGb,SAAS,GAAGD;QAAU,CAChC;MAAC,CACE,CAAC,GACV,IAAI;IAAA,CACJ;EAAC,CACqB,CAAC;AAEnC;AACAsE,YAAY,CAACU,WAAW,GAAG,eAAe;AAE1C1F,WAAW,CAAC0F,WAAW,GAAG,SAAS;AAEnC,OAAO,MAAMC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAAC7F,WAAW,EAAE;EAChD8F,KAAK,EAAEd;AACT,CAAC,CAAC;AAEF,MAAMlB,MAAM,GAAGrF,UAAU,CAACsH,MAAM,CAAC;EAC/B;AACF;EACEhC,OAAO,EAAE;IAAEiC,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE,CAAC;EAAE,CAAC;EACnCxB,IAAI,EAAE;IAAEyB,QAAQ,EAAE;EAAW;AAC/B,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/panelside/index.js

@@ -680,6 +680,42 @@ function PanelsideGroupLabel({
     }))
   });
 }
+
+/**
+ * What a row's parts read off the row, rather than being handed it.
+ *
+ * A label goes medium and un-muted when the row is the current destination,
+ * and an icon takes the matching tint. Passing that to every part would mean
+ * `<Panelside.ItemLabel active={active}>` at every call site, with an `active`
+ * that has to be kept in step with the row's own.
+ */
+
+const PanelsideItemContext = /*#__PURE__*/createContext(null);
+function usePanelsideItem(part) {
+  const value = useContext(PanelsideItemContext);
+  if (!value) throw new Error(`${part} must be used inside a <Panelside.Item>.`);
+  return value;
+}
+/**
+ * One destination, or one conversation.
+ *
+ * There are two ways to fill it, and they are the same row. The shorthand —
+ * `icon`, `label`, `badge` — covers the row every navigation panel has, and is
+ * what most call sites should use. The parts cover everything else: two lines
+ * of text, a label that is not a string, a badge before the label rather than
+ * after it, a trailing control that is not an overflow menu.
+ *
+ * ```tsx
+ * <Panelside.Item icon={<InboxIcon />} label="Inbox" badge={12} />
+ *
+ * <Panelside.Item active>
+ *   <Panelside.ItemIcon><Avatar size="xs" src={author.avatar} /></Panelside.ItemIcon>
+ *   <Panelside.ItemLabel>{thread.title}</Panelside.ItemLabel>
+ *   <Panelside.ItemBadge>{thread.unread}</Panelside.ItemBadge>
+ *   <Panelside.Action onPress={rename} />
+ * </Panelside.Item>
+ * ```
+ */
 function PanelsideItem({
   className,
   icon,
@@ -694,42 +730,128 @@ function PanelsideItem({
   const restTint = useCSSVariable('--color-muted-foreground');
   const activeTint = useCSSVariable('--color-foreground');
   const tint = active ? typeof activeTint === 'string' ? activeTint : undefined : typeof restTint === 'string' ? restTint : undefined;
-  return /*#__PURE__*/_jsxs(AnimatedPressable, {
-    className: itemVariants({
-      active,
-      disabled,
-      size,
-      className
-    }),
-    disabled: disabled,
-    accessibilityRole: "button",
-    accessibilityState: {
-      selected: active,
-      disabled
-    },
-    accessibilityLabel: label,
-    pressScale: 0.985,
+  const context = useMemo(() => ({
+    active,
+    disabled,
+    size,
+    tint
+  }), [active, disabled, size, tint]);
+
+  /*
+   * The row needs something flexible in the middle or its trailing content
+   * floats next to the icon instead of sitting at the end. A label supplies
+   * that, and a written-out `Panelside.ItemLabel` supplies it too — so the
+   * spacer is only for the row that has neither, which is a row of nothing but
+   * an icon and a badge.
+   */
+  const filled = label !== undefined || children !== undefined;
+  return /*#__PURE__*/_jsx(PanelsideItemContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+      className: itemVariants({
+        active,
+        disabled,
+        size,
+        className
+      }),
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityState: {
+        selected: active,
+        disabled
+      },
+      accessibilityLabel: label,
+      pressScale: 0.985,
+      ...props,
+      children: [icon ? /*#__PURE__*/_jsx(PanelsideItemIcon, {
+        children: icon
+      }) : null, label !== undefined ? /*#__PURE__*/_jsx(PanelsideItemLabel, {
+        children: label
+      }) : null, filled ? null : /*#__PURE__*/_jsx(View, {
+        className: "flex-1"
+      }), badge !== undefined && badge !== null ? /*#__PURE__*/_jsx(PanelsideItemBadge, {
+        children: badge
+      }) : null, children]
+    })
+  });
+}
+/**
+ * The leading slot on a row.
+ *
+ * Whatever is inside it inherits the row's own tint rather than each call site
+ * passing a colour that stops being right the moment the row goes active.
+ */
+function PanelsideItemIcon({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    tint
+  } = usePanelsideItem('Panelside.ItemIcon');
+
+  // No wrapper unless one was asked for: an icon is already the right size,
+  // and a `View` around it is a layout node between the row and its glyph.
+  if (className === undefined && Object.keys(props).length === 0) {
+    return /*#__PURE__*/_jsx(IconColorProvider, {
+      color: tint,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    className: className,
     ...props,
-    children: [icon ? /*#__PURE__*/_jsx(IconColorProvider, {
+    children: /*#__PURE__*/_jsx(IconColorProvider, {
       color: tint,
-      children: icon
-    }) : null, label ? /*#__PURE__*/_jsx(Text, {
-      size: "base",
-      weight: active ? 'medium' : 'normal',
-      muted: !active,
-      numberOfLines: 1,
-      className: "flex-1",
-      children: label
-    }) : /*#__PURE__*/_jsx(View, {
-      className: "flex-1"
-    }), typeof badge === 'string' || typeof badge === 'number' ? /*#__PURE__*/_jsx(View, {
-      className: "rounded-full bg-secondary px-2 py-0.5",
-      children: /*#__PURE__*/_jsx(Text, {
-        size: "xs",
-        muted: true,
-        children: badge
-      })
-    }) : badge, children]
+      children: children
+    })
+  });
+}
+/**
+ * The row's text. It takes the flexible middle, so a long title truncates
+ * rather than pushing the badge and the action off the end of the panel.
+ */
+function PanelsideItemLabel({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    active
+  } = usePanelsideItem('Panelside.ItemLabel');
+  return /*#__PURE__*/_jsx(Text, {
+    size: "base",
+    weight: active ? 'medium' : 'normal',
+    muted: !active,
+    numberOfLines: 1,
+    className: cn('flex-1', className),
+    ...props,
+    children: children
+  });
+}
+/**
+ * The trailing count or status on a row. Text becomes a pill; anything else is
+ * drawn as given, so a dot or a chip needs no opting out of the pill.
+ */
+function PanelsideItemBadge({
+  className,
+  children,
+  ...props
+}) {
+  usePanelsideItem('Panelside.ItemBadge');
+  if (typeof children !== 'string' && typeof children !== 'number') {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('rounded-full bg-secondary px-2 py-0.5', className),
+    ...props,
+    children: /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      muted: true,
+      children: children
+    })
   });
 }
 function PanelsideAction({
@@ -1057,6 +1179,9 @@ PanelsideContent.displayName = 'Panelside.Content';
 PanelsideGroup.displayName = 'Panelside.Group';
 PanelsideGroupLabel.displayName = 'Panelside.GroupLabel';
 PanelsideItem.displayName = 'Panelside.Item';
+PanelsideItemIcon.displayName = 'Panelside.ItemIcon';
+PanelsideItemLabel.displayName = 'Panelside.ItemLabel';
+PanelsideItemBadge.displayName = 'Panelside.ItemBadge';
 PanelsideAction.displayName = 'Panelside.Action';
 PanelsideFooter.displayName = 'Panelside.Footer';
 PanelsideCta.displayName = 'Panelside.Cta';
@@ -1070,6 +1195,9 @@ export const Panelside = Object.assign(PanelsideRoot, {
   Group: PanelsideGroup,
   GroupLabel: PanelsideGroupLabel,
   Item: PanelsideItem,
+  ItemIcon: PanelsideItemIcon,
+  ItemLabel: PanelsideItemLabel,
+  ItemBadge: PanelsideItemBadge,
   Action: PanelsideAction,
   Footer: PanelsideFooter,
   Cta: PanelsideCta,