panelui-native 0.68.0 → 0.71.0

package/lib/typescript/src/primitives/focus-restoration-store.d.ts

@@ -0,0 +1,24 @@
+interface FocusDocument {
+    activeElement?: FocusTarget | null;
+    body?: FocusTarget | null;
+    documentElement?: FocusTarget | null;
+}
+interface FocusTarget {
+    disabled?: boolean;
+    isConnected?: boolean;
+    focus: (options?: {
+        preventScroll?: boolean;
+    }) => void;
+    getAttribute?: (name: string) => string | null;
+}
+type RestoreFocus = () => boolean;
+/** Restores nested overlays in last-opened order, even when parents close first. */
+export declare class FocusRestorationStore {
+    private owners;
+    acquire(owner: string, restore: RestoreFocus): (() => void);
+    private restoreReleasedOwners;
+}
+/** Captures the current browser focus without evaluating DOM APIs on native. */
+export declare function captureFocusRestore(document?: FocusDocument | undefined): RestoreFocus;
+export {};
+//# sourceMappingURL=focus-restoration-store.d.ts.map

package/lib/typescript/src/primitives/focus-restoration-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-restoration-store.d.ts","sourceRoot":"","sources":["../../../../src/primitives/focus-restoration-store.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CAChD;AAED,KAAK,YAAY,GAAG,MAAM,OAAO,CAAC;AAQlC,oFAAoF;AACpF,qBAAa,qBAAqB;IAChC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC;IAW3D,OAAO,CAAC,qBAAqB;CAQ9B;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CACjC,QAAQ,4BAAwD,GAC/D,YAAY,CAoBd"}

package/lib/typescript/src/primitives/portal.d.ts

@@ -10,6 +10,10 @@ export declare function Portal({ children }: {
 export declare function ModalPortal({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
+/** A non-isolating portal that returns browser focus to what opened it. */
+export declare function FocusRestorePortal({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** Whether any modal portal currently owns focus. */
 export declare function useModalIsolationActive(): boolean;
 /** Mount point for portaled content. PanelUIProvider renders one automatically. */

package/lib/typescript/src/primitives/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAoCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAYnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAU3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOhE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAUD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsCf,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgBnE;AAUD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,QAU3D;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAOvE;AAED,qDAAqD;AACrD,wBAAgB,uBAAuB,IAAI,OAAO,CAGjD;AAkBD,mFAAmF;AACnF,wBAAgB,UAAU,gCAWzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.68.0",
+  "version": "0.71.0",
   "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -22,6 +22,36 @@
       "react-native": "./src/hooks/*.ts",
       "default": "./lib/module/hooks/*.js"
     },
+    "./provider": {
+      "types": "./lib/typescript/src/providers/panel-ui-provider.d.ts",
+      "react-native": "./src/providers/panel-ui-provider.tsx",
+      "default": "./lib/module/providers/panel-ui-provider.js"
+    },
+    "./theme": {
+      "types": "./lib/typescript/src/theme/use-theme.d.ts",
+      "react-native": "./src/theme/use-theme.ts",
+      "default": "./lib/module/theme/use-theme.js"
+    },
+    "./primitives/animated-pressable": {
+      "types": "./lib/typescript/src/primitives/animated-pressable.d.ts",
+      "react-native": "./src/primitives/animated-pressable.tsx",
+      "default": "./lib/module/primitives/animated-pressable.js"
+    },
+    "./primitives/keyboard-avoider": {
+      "types": "./lib/typescript/src/primitives/keyboard-avoider.d.ts",
+      "react-native": "./src/primitives/keyboard-avoider.tsx",
+      "default": "./lib/module/primitives/keyboard-avoider.js"
+    },
+    "./primitives/scrim": {
+      "types": "./lib/typescript/src/primitives/scrim.d.ts",
+      "react-native": "./src/primitives/scrim.tsx",
+      "default": "./lib/module/primitives/scrim.js"
+    },
+    "./primitives/scroll-progress": {
+      "types": "./lib/typescript/src/primitives/scroll-progress.d.ts",
+      "react-native": "./src/primitives/scroll-progress.tsx",
+      "default": "./lib/module/primitives/scroll-progress.js"
+    },
     "./utils/cn": {
       "types": "./lib/typescript/src/utils/cn.d.ts",
       "react-native": "./src/utils/cn.ts",
@@ -52,12 +82,15 @@
   "sideEffects": false,
   "scripts": {
     "build": "npm run clean && bob build",
-    "prepack": "npm run build && npm run verify:package",
+    "prepack": "npm run check:subpaths && npm run build && npm run verify:package",
     "test": "node --experimental-strip-types --test test/*.test.mjs",
     "benchmark:bar-chart": "node scripts/benchmark-bar-chart.mjs",
+    "benchmark:planner": "node --experimental-strip-types scripts/benchmark-planner.mjs",
     "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.type-tests.json",
     "clean": "rm -rf lib",
-    "verify:package": "node scripts/verify-package.mjs"
+    "verify:package": "node scripts/verify-package.mjs",
+    "generate:subpaths": "node scripts/generate-subpath-exports.mjs --write",
+    "check:subpaths": "node scripts/generate-subpath-exports.mjs"
   },
   "keywords": [
     "react-native",

package/src/components/accordion/index.tsx

@@ -10,6 +10,10 @@
  * also changes the shape of `value`: a string when single, an array when
  * multiple.
  *
+ * With the operating system set to reduce motion the section arrives at its new
+ * height and the chevron at its new angle without travelling to either. The
+ * disclosure is the point and it still happens; the movement is what goes.
+ *
  * A closed section costs nothing, because its body is unmounted. That is the
  * right default and the wrong one for a body with state in it: a half-filled
  * form, a list scrolled to the middle, a video part-way through. Collapsing
@@ -25,6 +29,7 @@ import {
   isValidElement,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
   type ReactNode,
@@ -33,7 +38,8 @@ import { Pressable, View, type Text as RNText, type ViewProps } from 'react-nati
 import Animated, {
   LinearTransition,
   useAnimatedStyle,
-  useDerivedValue,
+  useReducedMotion,
+  useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
@@ -49,6 +55,12 @@ export type AccordionVariant =
 
 export type AccordionSelectionMode = 'single' | 'multiple';
 
+/**
+ * How long the height change and the chevron take. One constant for both, so
+ * the panel and the arrow that describes it finish together.
+ */
+const TRANSITION_DURATION = 200;
+
 const accordionVariants = tv({
   slots: {
     root: 'w-full flex-col overflow-hidden',
@@ -162,6 +174,7 @@ const AccordionRoot = forwardRef<View, AccordionProps>(
     },
     ref
   ) => {
+    const reducedMotion = useReducedMotion();
     const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue));
     const isControlled = value !== undefined;
     const expanded = isControlled ? toArray(value) : internal;
@@ -197,7 +210,10 @@ const AccordionRoot = forwardRef<View, AccordionProps>(
       <AccordionContext.Provider value={context}>
         <Animated.View
           ref={ref}
-          layout={LinearTransition.duration(200)}
+          // Dropping the layout animation is what honours Reduce Motion here:
+          // the section still opens, it just arrives at its new height rather
+          // than travelling to it.
+          layout={reducedMotion ? undefined : LinearTransition.duration(TRANSITION_DURATION)}
           className={root({ className })}
           {...props}
         >
@@ -227,6 +243,7 @@ export interface AccordionItemProps extends ViewProps {
 const AccordionItem = forwardRef<View, AccordionItemProps>(
   ({ className, value, isDisabled = false, children, ...props }, ref) => {
     const { expanded, variant } = useAccordion('Accordion.Item');
+    const reducedMotion = useReducedMotion();
     const isExpanded = expanded.includes(value);
     const { item } = accordionVariants({ variant });
 
@@ -239,7 +256,7 @@ const AccordionItem = forwardRef<View, AccordionItemProps>(
       <AccordionItemContext.Provider value={context}>
         <Animated.View
           ref={ref}
-          layout={LinearTransition.duration(200)}
+          layout={reducedMotion ? undefined : LinearTransition.duration(TRANSITION_DURATION)}
           className={item({ className })}
           {...props}
         >
@@ -294,13 +311,19 @@ const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
     const { variant } = useAccordion('Accordion.Indicator');
     const { isExpanded } = useAccordionItem('Accordion.Indicator');
     const { indicator } = accordionVariants({ variant });
+    const reducedMotion = useReducedMotion();
+    const progress = useSharedValue(isExpanded ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = reducedMotion
+        ? isExpanded
+          ? 1
+          : 0
+        : withTiming(isExpanded ? 1 : 0, { duration: TRANSITION_DURATION });
+    }, [isExpanded, reducedMotion, progress]);
 
-    const rotation = useDerivedValue(
-      () => withTiming(isExpanded ? 180 : 0, { duration: 200 }),
-      [isExpanded]
-    );
     const style = useAnimatedStyle(() => ({
-      transform: [{ rotate: `${rotation.value}deg` }],
+      transform: [{ rotate: `${progress.value * 180}deg` }],
     }));
 
     return (

package/src/components/button/index.tsx

@@ -15,7 +15,10 @@ import { Spinner } from '../spinner';
 const buttonVariants = tv({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
-    label: 'font-medium',
+    // Let a constrained label wrap, and centre every line of an action name.
+    // An explicit Tailwind text step would also impose a fixed line height,
+    // which can be shorter than the glyphs after Dynamic Type scales them.
+    label: 'min-w-0 shrink text-center font-medium',
     spinner: '',
   },
   variants: {
@@ -54,9 +57,13 @@ const buttonVariants = tv({
       },
     },
     size: {
-      sm: { root: 'h-9 min-w-9 gap-1.5 px-2.5', label: 'text-sm' },
-      md: { root: 'h-11 min-w-11 px-4', label: 'text-base' },
-      lg: { root: 'h-12 px-6', label: 'text-lg' },
+      // These padding + intrinsic-font pairs equal the old 36/44/48dp boxes
+      // at the default scale. `min-h-*`, rather than `h-*`, lets the same box
+      // grow when the label's system-scaled glyphs or wrapped lines need it.
+      sm: { root: 'min-h-9 min-w-9 gap-1.5 px-2.5 py-2', label: 'text-[14px]' },
+      md: { root: 'min-h-11 min-w-11 px-4 py-2.5', label: 'text-[16px]' },
+      lg: { root: 'min-h-12 px-6 py-2.5', label: 'text-[18px]' },
+      // Icon-only controls have no scalable label, so their square is stable.
       icon: { root: 'h-11 w-11 px-0' },
     },
     fullWidth: {

package/src/components/collapsible/index.tsx

@@ -0,0 +1,278 @@
+/**
+ * Collapsible — one section of content that a header shows and hides.
+ *
+ * ```tsx
+ * <Collapsible variant="surface">
+ *   <Collapsible.Trigger>
+ *     Delivery options
+ *     <Collapsible.Indicator />
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     <Text>Anything, of any height.</Text>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * ## Why this and not a one-item Accordion
+ *
+ * The two look the same and differ in what happens to the body when it closes.
+ * An accordion unmounts it, which is right when a closed section should cost
+ * nothing and there is nothing inside worth keeping.
+ *
+ * This one keeps the body mounted and animates its height, so what is inside
+ * survives being closed — a part-filled form still has what was typed into it,
+ * a list is still scrolled to where it was, a video is still part-way through.
+ * That is the case this component exists for; reach for `Accordion` when
+ * sections are mutually exclusive or the body is expensive and rarely opened.
+ *
+ * ## The body is mounted whether or not it is open
+ *
+ * A height cannot be animated from `auto`, so the content has to be measured
+ * before it can be travelled to, and measuring it means rendering it. There is
+ * no lazy version of that: a body that has never been opened has still been
+ * rendered once. For a body heavy enough that this matters, an `Accordion` with
+ * a single item unmounts it instead.
+ *
+ * ## Reduced motion
+ *
+ * With the operating system set to reduce motion the panel snaps between its
+ * two states and the chevron turns without travelling. The disclosure still
+ * happens — it is the movement that is dropped, not the change.
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon } from '../../icons';
+import { Collapse } from '../../primitives/collapse';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
+
+export type CollapsibleVariant = 'default' | 'surface' | 'ghost';
+
+/** Matches the chevron in `Accordion`, so the two read as the same control. */
+const INDICATOR_DURATION = 200;
+
+const collapsibleVariants = tv({
+  slots: {
+    root: 'w-full flex-col',
+    trigger: 'flex-row items-center justify-between gap-4 py-4',
+    title: 'flex-1 text-base font-medium text-foreground',
+    indicator: 'items-center justify-center',
+    content: 'pb-4',
+    contentText: 'text-sm text-muted-foreground',
+  },
+  variants: {
+    variant: {
+      default: { trigger: 'px-1', content: 'px-1' },
+      surface: {
+        root: 'overflow-hidden rounded-2xl border border-border bg-surface',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      ghost: { trigger: 'px-0', content: 'px-0' },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+interface CollapsibleContextValue {
+  open: boolean;
+  toggle: () => void;
+  isDisabled: boolean;
+  variant: CollapsibleVariant;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsible(component: string): CollapsibleContextValue {
+  const context = useContext(CollapsibleContext);
+  if (!context) throw new Error(`${component} must be used within a <Collapsible>`);
+  return context;
+}
+
+export interface CollapsibleProps extends ViewProps {
+  className?: string;
+  variant?: CollapsibleVariant;
+  /** Whether the body is showing, controlled. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Stops the trigger opening or closing it, and marks it disabled to a screen reader. */
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const CollapsibleRoot = forwardRef<View, CollapsibleProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internal;
+
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setInternal(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+
+    const context = useMemo(
+      () => ({ open: isOpen, toggle, isDisabled, variant }),
+      [isOpen, toggle, isDisabled, variant]
+    );
+
+    const { root } = collapsibleVariants({ variant });
+
+    return (
+      <CollapsibleContext.Provider value={context}>
+        <View ref={ref} className={root({ className })} {...props}>
+          {children}
+        </View>
+      </CollapsibleContext.Provider>
+    );
+  }
+);
+CollapsibleRoot.displayName = 'Collapsible';
+
+export interface CollapsibleTriggerProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The pressable header row. Bare strings are wrapped in the title style. */
+const CollapsibleTrigger = forwardRef<View, CollapsibleTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, toggle, isDisabled, variant } = useCollapsible('Collapsible.Trigger');
+    const { trigger, title } = collapsibleVariants({ variant });
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={toggle}
+        className={trigger({ className })}
+        {...props}
+      >
+        {textChildren(children, (text) => (
+          <Text className={title()}>{text}</Text>
+        ))}
+      </Pressable>
+    );
+  }
+);
+CollapsibleTrigger.displayName = 'Collapsible.Trigger';
+
+const CollapsibleTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { variant } = useCollapsible('Collapsible.Title');
+  const { title } = collapsibleVariants({ variant });
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+CollapsibleTitle.displayName = 'Collapsible.Title';
+
+export interface CollapsibleIndicatorProps extends ViewProps {
+  className?: string;
+  /** Replaces the default chevron. */
+  children?: ReactNode;
+}
+
+/** Chevron that rotates 180° while the body is open. */
+const CollapsibleIndicator = forwardRef<View, CollapsibleIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, variant } = useCollapsible('Collapsible.Indicator');
+    const { indicator } = collapsibleVariants({ variant });
+    const reducedMotion = useReducedMotion();
+    const progress = useSharedValue(open ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = reducedMotion
+        ? open
+          ? 1
+          : 0
+        : withTiming(open ? 1 : 0, { duration: INDICATOR_DURATION });
+    }, [open, reducedMotion, progress]);
+
+    const style = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${progress.value * 180}deg` }],
+    }));
+
+    return (
+      <Animated.View style={style}>
+        <View ref={ref} className={indicator({ className })} {...props}>
+          {children ?? <ChevronDownIcon size={18} />}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+CollapsibleIndicator.displayName = 'Collapsible.Indicator';
+
+export interface CollapsibleContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * The body, opened and closed by animating its own height.
+ *
+ * It stays mounted while closed, which is the point of the component — see the
+ * note at the top of the file. A closed body is hidden from the accessibility
+ * tree as well as from the eye, because a screen reader reading out a section
+ * that is not on screen is worse than one that skips it.
+ */
+const CollapsibleContent = forwardRef<View, CollapsibleContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, variant } = useCollapsible('Collapsible.Content');
+    const { content, contentText } = collapsibleVariants({ variant });
+
+    return (
+      <Collapse open={open} className={content({ className })}>
+        <View
+          ref={ref}
+          accessibilityElementsHidden={!open}
+          importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+          {...props}
+        >
+          {textChildren(children, (text) => (
+            <Text className={contentText()}>{text}</Text>
+          ))}
+        </View>
+      </Collapse>
+    );
+  }
+);
+CollapsibleContent.displayName = 'Collapsible.Content';
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Title: CollapsibleTitle,
+  Indicator: CollapsibleIndicator,
+  Content: CollapsibleContent,
+});

package/src/components/flow/index.tsx

@@ -31,6 +31,10 @@
  * the edges are ordinary elements and cost a render per drag frame. That is a
  * real cost and it is the right trade.
  *
+ * An `animated` edge keeps that arrangement and animates the one property the
+ * geometry does not own: the dash offset. Its `d` still arrives by re-render,
+ * so a dragged node reshapes the edge while the dashes keep marching.
+ *
  * JavaScript is told a drag has finished through `onNodeDragEnd`. Positions
  * are otherwise yours to leave alone: pass `position` once and the canvas
  * takes it from there, or keep it in state and pass it back to drive nodes
@@ -65,10 +69,12 @@ import {
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  cancelAnimation,
   runOnJS,
   useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withRepeat,
   withTiming,
@@ -159,6 +165,15 @@ const CONNECT_RADIUS = 44;
  */
 const GROUP_EDGE_STANDOFF = 5;
 
+/** Dash and gap length for a broken edge, in graph points. */
+const EDGE_DASH = 6;
+
+/**
+ * How long an animated edge takes to travel one dash-and-gap. Slow enough to
+ * read as flow rather than flicker, fast enough to look live.
+ */
+const EDGE_MARCH_DURATION = 600;
+
 export type FlowEdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
 
 export interface FlowViewport {
@@ -1496,7 +1511,9 @@ export interface FlowEdgeProps {
   variant?: FlowEdgeVariant;
   /**
    * Mark the edge as carrying something — a request, a build, a dependency
-   * that is live rather than declared. Draws it dashed.
+   * that is live rather than declared. Draws it dashed and marches the dashes
+   * from source to target. Falls back to a still dashed edge when the
+   * operating system is set to reduce motion.
    */
   animated?: boolean;
   /** Draw it broken rather than solid. */
@@ -1551,6 +1568,63 @@ function FlowEdge(props: FlowEdgeProps) {
   return null;
 }
 
+/**
+ * A dashed edge whose dashes travel from source to target.
+ *
+ * The dash offset is the only animated property here, and the geometry is
+ * deliberately not one: `d` arrives as an ordinary prop and changes by
+ * re-render when a node moves. A path in React Native draws reliably when one
+ * property animates and the rest are plain, so splitting them this way lets a
+ * dragged node reshape the edge without ever interrupting the march.
+ *
+ * One dash and one gap of travel per cycle, which is why the loop is seamless:
+ * the end state is the start state shifted by exactly one period.
+ */
+function FlowMarchingEdge({
+  d,
+  stroke,
+  width,
+}: {
+  d: string;
+  stroke: string;
+  width: number;
+}) {
+  const offset = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (reducedMotion) {
+      offset.value = 0;
+      return undefined;
+    }
+    // Negative, so the dashes run the way the path was drawn: source to target.
+    offset.value = withRepeat(
+      withTiming(-EDGE_DASH * 2, {
+        duration: EDGE_MARCH_DURATION,
+        easing: Easing.linear,
+      }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(offset);
+  }, [offset, reducedMotion]);
+
+  const dashProps = useAnimatedProps(() => ({ strokeDashoffset: offset.value }));
+
+  return (
+    <AnimatedPath
+      animatedProps={dashProps}
+      d={d}
+      fill="none"
+      stroke={stroke}
+      strokeWidth={width}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray={`${EDGE_DASH} ${EDGE_DASH}`}
+    />
+  );
+}
+
 /** The part that actually draws an edge, inside the canvas's one `<Svg>`. */
 function FlowEdgePath({
   from,
@@ -1612,7 +1686,7 @@ function FlowEdgePath({
   const b = { x: outB.x + origin.x, y: outB.y + origin.y };
 
   const d = edgePath(variant, a, sideA, b, sideB, curvature, radius, gap);
-  const dash = dashed || animated ? 6 : 0;
+  const dash = dashed || animated ? EDGE_DASH : 0;
   const stroke = color ?? tint;
 
   const head = arrow
@@ -1624,15 +1698,19 @@ function FlowEdgePath({
 
   return (
     <>
-      <Path
-        d={d}
-        fill="none"
-        stroke={stroke}
-        strokeWidth={width}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray={dash ? `${dash} ${dash}` : undefined}
-      />
+      {animated ? (
+        <FlowMarchingEdge d={d} stroke={stroke} width={width} />
+      ) : (
+        <Path
+          d={d}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={width}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={dash ? `${dash} ${dash}` : undefined}
+        />
+      )}
       {head ? <Path d={head} fill={stroke} /> : null}
     </>
   );
@@ -1703,9 +1781,10 @@ function FlowEdgeLayer() {
           origin={origin}
         />
       ))}
-      {/* The connection line is the one path that does animate, because it
-          follows a finger and has nothing else to follow. It animates `d` and
-          only `d`, which is the one thing that works. */}
+      {/* The connection line follows a finger, so it is the path that animates
+          `d` — and only `d`, which is the one thing that works while the
+          geometry is what moves. An animated edge inverts the split: static
+          `d`, animated dash offset. Either is fine; both at once is not. */}
       <AnimatedPath
         animatedProps={lineProps}
         fill="none"