panelui-native 0.73.0 → 0.75.0

package/src/components/timeline/timeline-geometry.ts

@@ -0,0 +1,9 @@
+export const TIMELINE_WIDE_COLUMN = 268;
+export const TIMELINE_NARROW_COLUMN = 76;
+
+export function timelineColumnWidth(requested: number | undefined, filled: boolean): number {
+  if (requested !== undefined && Number.isFinite(requested) && requested > 0) {
+    return requested;
+  }
+  return filled ? TIMELINE_WIDE_COLUMN : TIMELINE_NARROW_COLUMN;
+}

package/src/components/toast/index.tsx

@@ -18,7 +18,12 @@ import {
   useSyncExternalStore,
   type ReactNode,
 } from 'react';
-import { View, type ViewProps } from 'react-native';
+import {
+  AppState,
+  View,
+  type AppStateStatus,
+  type ViewProps,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   Easing,
@@ -538,6 +543,26 @@ function ToastStack({
 export function ToastViewport() {
   const items = useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot);
 
+  useEffect(() => {
+    /*
+     * Pause on the two states that mean nobody can see the toast, rather than
+     * on everything that is not `active`. Android reports `unknown` before it
+     * has decided, and a toast raised in that window would otherwise have its
+     * countdown parked with nothing coming to restart it.
+     */
+    const syncTimers = (state: AppStateStatus) => {
+      if (state === 'background' || state === 'inactive') toastStore.pauseTimers();
+      else toastStore.resumeTimers();
+    };
+
+    syncTimers(AppState.currentState);
+    const subscription = AppState.addEventListener('change', syncTimers);
+    return () => {
+      subscription.remove();
+      toastStore.pauseTimers();
+    };
+  }, []);
+
   if (items.length === 0) return null;
 
   const top = items.filter((item) => item.placement === 'top');

package/src/components/toast/toast-store.ts

@@ -44,11 +44,18 @@ const DEFAULT_DURATION = 4000;
 
 let counter = 0;
 
-class ToastStore {
+interface ToastTimer {
+  remaining: number;
+  startedAt?: number;
+  timeout?: ReturnType<typeof setTimeout>;
+}
+
+export class ToastStore {
   private items: ToastItem[] = [];
   private snapshot: readonly ToastItem[] = this.items;
   private listeners = new Set<() => void>();
-  private timers = new Map<string, ReturnType<typeof setTimeout>>();
+  private timers = new Map<string, ToastTimer>();
+  private timersPaused = false;
 
   subscribe = (listener: () => void) => {
     this.listeners.add(listener);
@@ -69,10 +76,9 @@ class ToastStore {
 
     const duration = resolved.duration ?? DEFAULT_DURATION;
     if (duration > 0) {
-      this.timers.set(
-        id,
-        setTimeout(() => this.hide(id), duration)
-      );
+      const timer = { remaining: duration };
+      this.timers.set(id, timer);
+      if (!this.timersPaused) this.startTimer(id, timer);
     }
 
     return id;
@@ -81,7 +87,7 @@ class ToastStore {
   hide = (id: string) => {
     const timer = this.timers.get(id);
     if (timer) {
-      clearTimeout(timer);
+      if (timer.timeout !== undefined) clearTimeout(timer.timeout);
       this.timers.delete(id);
     }
     if (!this.items.some((item) => item.id === id)) return;
@@ -90,13 +96,42 @@ class ToastStore {
   };
 
   hideAll = () => {
-    this.timers.forEach(clearTimeout);
+    this.timers.forEach((timer) => {
+      if (timer.timeout !== undefined) clearTimeout(timer.timeout);
+    });
     this.timers.clear();
     if (this.items.length === 0) return;
     this.items = [];
     this.emit();
   };
 
+  /** Pause auto-dismiss countdowns while their viewport is not visible. */
+  pauseTimers = () => {
+    if (this.timersPaused) return;
+    this.timersPaused = true;
+    const now = Date.now();
+
+    this.timers.forEach((timer) => {
+      if (timer.timeout === undefined || timer.startedAt === undefined) return;
+      clearTimeout(timer.timeout);
+      timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));
+      delete timer.timeout;
+      delete timer.startedAt;
+    });
+  };
+
+  /** Resume each auto-dismiss countdown from its remaining visible time. */
+  resumeTimers = () => {
+    if (!this.timersPaused) return;
+    this.timersPaused = false;
+    this.timers.forEach((timer, id) => this.startTimer(id, timer));
+  };
+
+  private startTimer(id: string, timer: ToastTimer) {
+    timer.startedAt = Date.now();
+    timer.timeout = setTimeout(() => this.hide(id), timer.remaining);
+  }
+
   private emit() {
     this.snapshot = this.items;
     this.listeners.forEach((listener) => listener());

package/src/components/tour/index.tsx

@@ -74,6 +74,11 @@ import { Portal } from '../../primitives/portal';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { Button } from '../button';
+import {
+  currentTourCardHeight,
+  nextTourCardMeasurement,
+  type TourCardMeasurement,
+} from './tour-card-measurement';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -466,7 +471,10 @@ function TourOverlay({
   const insets = useSafeAreaInsets();
   const reducedMotion = useReducedMotion();
   const [spot, setSpot] = useState<(Rect & { radius: number }) | null>(null);
-  const [cardHeight, setCardHeight] = useState<number | null>(null);
+  const [cardMeasurement, setCardMeasurement] = useState<TourCardMeasurement | null>(
+    null
+  );
+  const cardHeight = currentTourCardHeight(active, cardMeasurement);
 
   const stepPadding = active?.padding ?? padding;
   const stepRadius = active?.radius ?? radius;
@@ -570,8 +578,8 @@ function TourOverlay({
 
   const onCardLayout = (event: LayoutChangeEvent) => {
     const measured = event.nativeEvent.layout.height;
-    setCardHeight((current) =>
-      current !== null && Math.abs(current - measured) < 1 ? current : measured
+    setCardMeasurement((current) =>
+      nextTourCardMeasurement(active, measured, current)
     );
   };
 

package/src/components/tour/tour-card-measurement.ts

@@ -0,0 +1,29 @@
+/** A measured Tour card height tied to the step that produced it. */
+export interface TourCardMeasurement {
+  owner: object | undefined;
+  height: number;
+}
+
+/**
+ * Returns a height only when it belongs to the step currently being rendered.
+ * A previous step can be much taller or shorter, so reusing its height would
+ * place the next card incorrectly before that card's first layout pass.
+ */
+export function currentTourCardHeight(
+  owner: object | undefined,
+  measurement: TourCardMeasurement | null
+): number | null {
+  return measurement && measurement.owner === owner ? measurement.height : null;
+}
+
+/** Stores a card height without churning state for sub-pixel layout noise. */
+export function nextTourCardMeasurement(
+  owner: object | undefined,
+  height: number,
+  current: TourCardMeasurement | null
+): TourCardMeasurement {
+  if (current && current.owner === owner && Math.abs(current.height - height) < 1) {
+    return current;
+  }
+  return { owner, height };
+}

package/src/index.ts

@@ -61,6 +61,7 @@ export {
   Avatar,
   type AvatarProps,
   type AvatarBadgeProps,
+  type AvatarGroupProps,
 } from './components/avatar';
 export {
   Attachment,
@@ -1032,6 +1033,22 @@ export {
   type SortableReorderDetails,
 } from './components/sortable';
 export { Spinner, type SpinnerProps } from './components/spinner';
+export {
+  Splitter,
+  type SplitterProps,
+  type SplitterPanelProps,
+  type SplitterHandleProps,
+  type SplitterOrientation,
+  type SplitterConstraint,
+} from './components/splitter';
+export {
+  SplitView,
+  useSplitView,
+  type SplitViewProps,
+  type SplitViewPaneProps,
+  type SplitViewDragAreaProps,
+  type SplitViewHandleProps,
+} from './components/split-view';
 export {
   Steps,
   type StepsProps,