panelui-native 0.65.0 → 0.66.1

package/src/components/signature/index.tsx

@@ -58,7 +58,12 @@ import {
   type ReactNode,
   type Ref,
 } from 'react';
-import { View, type ViewProps } from 'react-native';
+import {
+  AccessibilityInfo,
+  View,
+  type AccessibilityActionEvent,
+  type ViewProps,
+} from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -81,6 +86,12 @@ import {
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import {
+  signatureAccessibilityActions,
+  signatureAccessibilityValue,
+  signatureAnnouncement,
+  type SignatureChangeKind,
+} from './signature-accessibility';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -175,6 +186,12 @@ export interface SignatureProps
   placeholder?: ReactNode;
   /** Take no input. The strokes already there stay visible. */
   disabled?: boolean;
+  /**
+   * Opens a product-provided non-drawing method, such as typing a legal name,
+   * uploading an image, or asking for assisted signing. Exposed as a screen
+   * reader action; provide the same choice as a visible control too.
+   */
+  onRequestAlternative?: () => void;
   /** A stroke has started. */
   onBegin?: () => void;
   /** A stroke has finished. */
@@ -292,12 +309,17 @@ function SignatureRoot(
     guidelineLabel,
     placeholder,
     disabled = false,
+    onRequestAlternative,
     onBegin,
     onEnd,
     onChange,
     padClassName,
     placeholderClassName,
     guideClassName,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityActions,
+    onAccessibilityAction,
     ...props
   }: SignatureProps,
   ref: Ref<SignatureHandle>
@@ -325,19 +347,30 @@ function SignatureRoot(
   beginRef.current = onBegin;
   const endRef = useRef(onEnd);
   endRef.current = onEnd;
+  const alternativeRef = useRef(onRequestAlternative);
+  alternativeRef.current = onRequestAlternative;
 
   // `onChange` fires from an effect rather than from inside a state updater.
   // An updater can be replayed during a render, and calling a parent's setState
   // from there is the "cannot update a component while rendering a different
   // component" warning — earned, not spurious.
   const reported = useRef(0);
+  const changeKind = useRef<SignatureChangeKind>('draw');
   useEffect(() => {
     if (reported.current === strokes.length) return;
+    const previous = reported.current;
     reported.current = strokes.length;
     changeRef.current?.(strokes.length);
+    const announcement = signatureAnnouncement(
+      previous,
+      strokes.length,
+      changeKind.current
+    );
+    if (announcement) AccessibilityInfo.announceForAccessibility(announcement);
   }, [strokes.length]);
 
   const commit = useCallback((d: string) => {
+    changeKind.current = 'draw';
     setStrokes((current) => [...current, d]);
     // Drawing again is a new branch of history, so what was undone is gone.
     setUndone([]);
@@ -419,28 +452,37 @@ function SignatureRoot(
     [layout.height, layout.width]
   );
 
+  const clear = useCallback(() => {
+    changeKind.current = 'clear';
+    setStrokes([]);
+    setUndone([]);
+  }, []);
+
+  const undo = useCallback(() => {
+    const last = strokes[strokes.length - 1];
+    if (last === undefined) return;
+    changeKind.current = 'undo';
+    setUndone((stack) => [...stack, last]);
+    setStrokes(strokes.slice(0, -1));
+  }, [strokes]);
+
+  const redo = useCallback(() => {
+    const restored = undone[undone.length - 1];
+    if (restored === undefined) return;
+    changeKind.current = 'redo';
+    setUndone(undone.slice(0, -1));
+    setStrokes([...strokes, restored]);
+  }, [strokes, undone]);
+
   useImperativeHandle(
     ref,
     (): SignatureHandle => ({
       // These read the current arrays and set flat values rather than nesting
       // one updater inside another — a nested updater runs during the render
       // pass, which is not a safe place to schedule another component's update.
-      clear() {
-        setStrokes([]);
-        setUndone([]);
-      },
-      undo() {
-        const last = strokes[strokes.length - 1];
-        if (last === undefined) return;
-        setUndone((stack) => [...stack, last]);
-        setStrokes(strokes.slice(0, -1));
-      },
-      redo() {
-        const restored = undone[undone.length - 1];
-        if (restored === undefined) return;
-        setUndone(undone.slice(0, -1));
-        setStrokes([...strokes, restored]);
-      },
+      clear,
+      undo,
+      redo,
       isEmpty: () => strokes.length === 0,
       strokeCount: () => strokes.length,
       toSVG: svgDocument,
@@ -524,10 +566,47 @@ function SignatureRoot(
         };
       },
     }),
-    [layout.height, layout.width, rasterise, strokes, undone, svgDocument]
+    [clear, layout.height, layout.width, rasterise, redo, strokes, svgDocument, undo]
   );
 
   const empty = strokes.length === 0;
+  const padActions = useMemo(
+    () =>
+      disabled
+        ? []
+        : [
+            ...(accessibilityActions ?? []),
+            ...signatureAccessibilityActions(
+              strokes.length,
+              undone.length,
+              Boolean(onRequestAlternative),
+              false
+            ),
+          ],
+    [accessibilityActions, disabled, onRequestAlternative, strokes.length, undone.length]
+  );
+  const handleAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (disabled) return;
+      switch (event.nativeEvent.actionName) {
+        case 'signature-undo':
+          undo();
+          return;
+        case 'signature-redo':
+          redo();
+          return;
+        case 'signature-clear':
+          clear();
+          return;
+        case 'signature-alternative':
+          alternativeRef.current?.();
+          return;
+        default:
+          onAccessibilityAction?.(event);
+      }
+    },
+    [clear, disabled, onAccessibilityAction, redo, undo]
+  );
 
   return (
     <View className={slots.root({ className })} {...props}>
@@ -541,9 +620,17 @@ function SignatureRoot(
           onLayout={(event) => setLayout(event.nativeEvent.layout)}
           accessible
           accessibilityRole="image"
-          accessibilityLabel="Signature pad"
-          accessibilityHint="Draw your signature with your finger"
+          accessibilityLabel={accessibilityLabel ?? 'Signature pad'}
+          accessibilityHint={
+            accessibilityHint ??
+            (onRequestAlternative
+              ? 'Direct touch drawing requires tracing a path. Use actions to edit or choose another signature method.'
+              : 'Direct touch drawing requires tracing a path. Use actions to undo, redo, or clear strokes.')
+          }
           accessibilityState={{ disabled }}
+          accessibilityValue={signatureAccessibilityValue(strokes.length)}
+          accessibilityActions={padActions}
+          onAccessibilityAction={handleAccessibilityAction}
         >
           {guideline && layout.height > 0 ? (
             <View

package/src/components/signature/signature-accessibility.ts

@@ -0,0 +1,67 @@
+export type SignatureChangeKind = 'draw' | 'undo' | 'redo' | 'clear';
+
+export interface SignatureAccessibilityAction {
+  name: string;
+  label: string;
+}
+
+/**
+ * What the pad reads as when it is focused.
+ *
+ * It counts strokes and says nothing about whether the signature is finished,
+ * because the component cannot know that — one mark may be the whole signature
+ * or the first letter of it. Announcing "complete" after the first stroke tells
+ * somebody who cannot see the pad that they are done when they may not be.
+ */
+export function signatureAccessibilityValue(strokeCount: number) {
+  return {
+    text:
+      strokeCount === 0
+        ? 'Empty signature'
+        : `Signed, ${strokeCount} ${strokeCount === 1 ? 'stroke' : 'strokes'}`,
+  };
+}
+
+export function signatureAccessibilityActions(
+  strokeCount: number,
+  undoneCount: number,
+  alternative: boolean,
+  disabled: boolean
+): SignatureAccessibilityAction[] {
+  if (disabled) return [];
+
+  const actions: SignatureAccessibilityAction[] = [];
+  if (strokeCount > 0) {
+    actions.push(
+      { name: 'signature-undo', label: 'Undo last stroke' },
+      { name: 'signature-clear', label: 'Clear signature' }
+    );
+  }
+  if (undoneCount > 0) {
+    actions.push({ name: 'signature-redo', label: 'Redo last stroke' });
+  }
+  if (alternative) {
+    actions.push({ name: 'signature-alternative', label: 'Use another signature method' });
+  }
+  return actions;
+}
+
+/**
+ * Spoken when the pad crosses between empty and not, and nowhere else.
+ *
+ * Every stroke is silent on purpose: a running commentary during drawing is
+ * noise over the one gesture the reader is concentrating on. The two crossings
+ * are the ones that cannot be felt — that the pad now holds something, and that
+ * it no longer does.
+ */
+export function signatureAnnouncement(
+  previousCount: number,
+  strokeCount: number,
+  change: SignatureChangeKind
+): string | null {
+  if (previousCount === strokeCount) return null;
+  if (change === 'clear') return 'Signature cleared. Signature is empty.';
+  if (strokeCount === 0) return 'Signature is empty.';
+  if (previousCount === 0) return 'Signature started.';
+  return null;
+}

package/src/components/slider/index.tsx

@@ -186,6 +186,12 @@ function snap(value: number, min: number, max: number, step: number) {
 /** Which thumb a drag has hold of. A one-thumb slider only ever has `high`. */
 type Thumb = 'low' | 'high';
 
+function recordStep(last: Record<Thumb, number>, thumb: Thumb, next: number) {
+  if (next === last[thumb]) return false;
+  last[thumb] = next;
+  return true;
+}
+
 export const Slider = forwardRef<View, SliderProps>(
   (
     {
@@ -278,9 +284,12 @@ export const Slider = forwardRef<View, SliderProps>(
     rangeChangeRef.current = onRangeChange;
     const rangeCommitRef = useRef(onRangeCommit);
     rangeCommitRef.current = onRangeCommit;
-    // The last step a drag ticked on, so haptics fire once per step, not per
-    // pixel of movement within it.
-    const lastTick = useRef(value);
+    // Each thumb owns its last tick. Sharing one scalar lets the stationary
+    // endpoint suppress the thumb under the finger on a range slider.
+    const lastTick = useRef<Record<Thumb, number>>({
+      low,
+      high: isRange ? high : value,
+    });
     /*
      * True from the moment a finger lands until it lifts. A controlled parent
      * echoes every change straight back as a new prop, and springing the thumb
@@ -329,8 +338,7 @@ export const Slider = forwardRef<View, SliderProps>(
       (p: number, commit: boolean) => {
         const raw = min + p * span;
         const snapped = snap(raw, min, max, step);
-        if (haptics && snapped !== lastTick.current) {
-          lastTick.current = snapped;
+        if (haptics && recordStep(lastTick.current, 'high', snapped)) {
           selectionTick();
         }
         emitChange(snapped);
@@ -340,16 +348,13 @@ export const Slider = forwardRef<View, SliderProps>(
     );
 
     const commitRangeFromProgress = useCallback(
-      (pLow: number, pHigh: number, commit: boolean) => {
+      (pLow: number, pHigh: number, commit: boolean, thumb: Thumb) => {
         const next: [number, number] = [
           snap(min + pLow * span, min, max, step),
           snap(min + pHigh * span, min, max, step),
         ];
-        // Either end crossing onto a new step is a step crossed — the tick is
-        // about the thumb under the finger, and only one of them is.
-        const moved = next[0] !== lastTick.current && next[1] !== lastTick.current;
-        if (haptics && moved) {
-          lastTick.current = next[0];
+        const nextStep = thumb === 'low' ? next[0] : next[1];
+        if (haptics && recordStep(lastTick.current, thumb, nextStep)) {
           selectionTick();
         }
         emitRangeChange(next);
@@ -418,12 +423,12 @@ export const Slider = forwardRef<View, SliderProps>(
           const ceiling = Math.max(highProgress.value - gap, 0);
           const next = Math.min(Math.max(dragStartLow.value + delta, 0), ceiling);
           lowProgress.value = next;
-          runOnJS(commitRangeFromProgress)(next, highProgress.value, false);
+          runOnJS(commitRangeFromProgress)(next, highProgress.value, false, 'low');
         } else {
           const floor = Math.min(lowProgress.value + gap, 1);
           const next = Math.min(Math.max(dragStartHigh.value + delta, floor), 1);
           highProgress.value = next;
-          runOnJS(commitRangeFromProgress)(lowProgress.value, next, false);
+          runOnJS(commitRangeFromProgress)(lowProgress.value, next, false, 'high');
         }
       })
       .onFinalize(() => {
@@ -431,7 +436,12 @@ export const Slider = forwardRef<View, SliderProps>(
         pressedLow.value = withSpring(0, KNOB_SPRING);
         runOnJS(setDragging)(false);
         if (isRange) {
-          runOnJS(commitRangeFromProgress)(lowProgress.value, highProgress.value, true);
+          runOnJS(commitRangeFromProgress)(
+            lowProgress.value,
+            highProgress.value,
+            true,
+            activeThumb.value
+          );
         } else {
           runOnJS(commitFromProgress)(highProgress.value, true);
         }
@@ -456,11 +466,11 @@ export const Slider = forwardRef<View, SliderProps>(
         if (pickThumb(event.x) === 'low') {
           const bounded = Math.min(next, Math.max(highProgress.value - gap, 0));
           lowProgress.value = withSpring(bounded, SPRING);
-          runOnJS(commitRangeFromProgress)(bounded, highProgress.value, true);
+          runOnJS(commitRangeFromProgress)(bounded, highProgress.value, true, 'low');
         } else {
           const bounded = Math.max(next, Math.min(lowProgress.value + gap, 1));
           highProgress.value = withSpring(bounded, SPRING);
-          runOnJS(commitRangeFromProgress)(lowProgress.value, bounded, true);
+          runOnJS(commitRangeFromProgress)(lowProgress.value, bounded, true, 'high');
         }
       });
 
@@ -503,7 +513,7 @@ export const Slider = forwardRef<View, SliderProps>(
         const next = snap(value + dir * (step || 1), min, max, step);
         if (next === value) return;
         if (haptics) {
-          lastTick.current = next;
+          recordStep(lastTick.current, 'high', next);
           selectionTick();
         }
         highProgress.value = withSpring(toFraction(next), SPRING);
@@ -521,7 +531,7 @@ export const Slider = forwardRef<View, SliderProps>(
       const next = snap(bounded, min, max, step);
       if (next === current) return;
       if (haptics) {
-        lastTick.current = next;
+        recordStep(lastTick.current, thumb, next);
         selectionTick();
       }
       const pair: [number, number] = thumb === 'low' ? [next, high] : [low, next];

package/src/index.ts

@@ -209,6 +209,8 @@ export {
   type FlowControlsProps,
   type FlowMiniMapProps,
   type FlowConnection,
+  type FlowEndpoint,
+  type FlowEndpointReference,
   type FlowViewport,
   type FlowNodePosition,
   type FlowEdgeVariant,

package/src/primitives/scrim.tsx

@@ -10,17 +10,20 @@
  * that never blurs anything installs nothing. When it is asked for and the
  * package is missing, this falls back to a dim rather than failing: a blur you
  * cannot draw is better shown as a darkened screen than as a crash.
+ * Reduce Transparency replaces the blur with an opaque, tint-aware surface.
  *
  * It fills its parent and does not intercept touches itself — the overlay layers
  * its own dismiss `Pressable` over it — so it is purely the visual backdrop.
  */
-import { type ComponentType } from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
+import { useEffect, useState, type ComponentType } from 'react';
+import { AccessibilityInfo, StyleSheet, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
+type BlurTint = 'light' | 'dark' | 'default' | 'systemMaterial';
+
 interface BlurViewProps {
   intensity?: number;
-  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  tint?: BlurTint;
   style?: unknown;
   children?: React.ReactNode;
 }
@@ -43,16 +46,112 @@ const BlurView: ComponentType<BlurViewProps> | null = (() => {
 /** True when a real blur can be drawn — for a caller that wants to know. */
 export const hasBlur = BlurView !== null;
 
+type ReduceTransparencySource = {
+  isReduceTransparencyEnabled?: () => Promise<boolean>;
+  addEventListener?: (
+    event: 'reduceTransparencyChanged',
+    listener: (enabled: boolean) => void
+  ) => { remove?: () => void } | undefined;
+};
+
+function observeReduceTransparency(
+  source: ReduceTransparencySource,
+  onChange: (enabled: boolean) => void
+) {
+  let active = true;
+  let changed = false;
+  const update = (enabled: boolean) => {
+    changed = true;
+    if (active) onChange(Boolean(enabled));
+  };
+  /*
+   * A platform that cannot report the preference has no preference to respect,
+   * so blur stays available. A platform that has the API and failed to answer
+   * might have it switched on, and that is the case worth being careful about.
+   */
+  const fallback = (queryable: boolean) => () => {
+    if (active && !changed) onChange(queryable);
+  };
+
+  let subscription: { remove?: () => void } | undefined;
+  try {
+    subscription = source.addEventListener?.('reduceTransparencyChanged', update);
+  } catch {
+    // Some web and test shims expose AccessibilityInfo without every event.
+  }
+
+  try {
+    if (typeof source.isReduceTransparencyEnabled !== 'function') fallback(false)();
+    else {
+      void source.isReduceTransparencyEnabled().then((enabled) => {
+        // A preference event that arrived while the query was pending is newer.
+        if (active && !changed) update(enabled);
+      }, fallback(true));
+    }
+  } catch {
+    fallback(true)();
+  }
+
+  return () => {
+    active = false;
+    try {
+      subscription?.remove?.();
+    } catch {
+      // Cleanup stays safe for partial platform shims.
+    }
+  };
+}
+
+/**
+ * The last answer the platform gave, shared by every scrim in the process.
+ *
+ * The query is asynchronous and the preference belongs to the device, not to
+ * any one overlay. Without this, each overlay opens not knowing it and draws
+ * opaque until the answer arrives — a flash on every dialog for the many people
+ * who have the preference off. Remembered here, only the first overlay of a
+ * launch can see it.
+ */
+let knownReduceTransparency: boolean | null = null;
+
+function useReduceTransparency() {
+  // Not knowing is deliberately conservative: draw opaque until the platform
+  // says blur is allowed, rather than flashing blur at someone who opted out.
+  const [enabled, setEnabled] = useState<boolean | null>(knownReduceTransparency);
+  useEffect(
+    () =>
+      observeReduceTransparency(AccessibilityInfo, (next) => {
+        knownReduceTransparency = next;
+        setEnabled(next);
+      }),
+    []
+  );
+  return enabled;
+}
+
+type ScrimMode = 'blur' | 'dim' | 'opaque';
+
+function scrimMode(blur: boolean, canBlur: boolean, reduceTransparency: boolean | null): ScrimMode {
+  if (!blur) return 'dim';
+  if (reduceTransparency !== false) return 'opaque';
+  return canBlur ? 'blur' : 'dim';
+}
+
+function opaqueClassName(tint: BlurTint) {
+  if (tint === 'light') return 'bg-white';
+  if (tint === 'dark') return 'bg-black';
+  return 'bg-background';
+}
+
 export interface ScrimProps extends Omit<ViewProps, 'children'> {
   /** Frost the backdrop instead of dimming it. Falls back to a dim if it can't. */
   blur?: boolean;
   /** Blur strength, 0–100. */
   intensity?: number;
   /** Which way the blur tints. */
-  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  tint?: BlurTint;
   /**
-   * The dim used when not blurring — and when blurring is asked for but
-   * unavailable. A popover passes a lighter one than a dialog.
+   * The dim used when not blurring, when blur is unavailable, and over the
+   * opaque Reduce Transparency fallback. A popover passes a lighter one than a dialog.
    */
   dimClassName?: string;
 }
@@ -65,7 +164,10 @@ export function Scrim({
   style,
   ...props
 }: ScrimProps) {
-  if (blur && BlurView) {
+  const reduceTransparency = useReduceTransparency();
+  const mode = scrimMode(blur, BlurView !== null, reduceTransparency);
+
+  if (mode === 'blur' && BlurView) {
     return (
       <Animated.View
         entering={FadeIn.duration(180)}
@@ -81,6 +183,24 @@ export function Scrim({
     );
   }
 
+  if (mode === 'opaque') {
+    return (
+      <Animated.View
+        entering={FadeIn.duration(180)}
+        exiting={FadeOut.duration(150)}
+        style={[StyleSheet.absoluteFill, style]}
+        {...props}
+      >
+        <View
+          pointerEvents="none"
+          style={StyleSheet.absoluteFill}
+          className={opaqueClassName(tint)}
+        />
+        <View pointerEvents="none" style={StyleSheet.absoluteFill} className={dimClassName} />
+      </Animated.View>
+    );
+  }
+
   return (
     <Animated.View
       entering={FadeIn.duration(150)}