panelui-native 0.63.0 → 0.65.0

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

@@ -1083,6 +1083,15 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
   const width = plot.width;
   const height = plot.height;
 
+  /*
+   * The readout's own height, measured rather than assumed. Sideways it has to
+   * be clamped inside the plot vertically, and how tall it is depends on how
+   * many series are listed in it — a constant here would either let a
+   * three-series readout hang off the bottom or reserve room a one-series
+   * readout never uses.
+   */
+  const labelHeight = useSharedValue(0);
+
   /*
    * Declared inside the memo, next to its callers: a worklet may only call
    * another worklet, and the rule is enforced by crashing rather than warning.
@@ -1118,8 +1127,17 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       });
   }, [total, left, top, width, height, horizontal, activeIndex, setActiveIndexJS]);
 
-  // The readout centres over its band and is clamped inside the plot, so it
-  // never runs off the edge at the first or last one.
+  /*
+   * The readout centres over its band and is clamped inside the plot, so it
+   * never runs off the edge at the first or last one.
+   *
+   * Which axis the band runs along is the whole difference between the two
+   * orientations. Upright, the bands are side by side, so the readout slides
+   * across and sits above them all. Sideways, the bands are stacked down the
+   * plot, so it slides *down* to the row it is describing and stays centred
+   * across — held at the top instead, it would name the row under the finger
+   * while covering the first one, which is the row a reader checks it against.
+   */
   const labelStyle = useAnimatedStyle(() => {
     const index = activeIndex.value;
     if (index < 0 || !total) return { opacity: 0 };
@@ -1130,7 +1148,23 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       plot.left + plot.width - half,
       Math.max(plot.left + half, horizontal ? plot.left + plot.width / 2 : centre)
     );
-    return { opacity: 1, transform: [{ translateX: clamped - half }] };
+
+    if (!horizontal) {
+      return { opacity: 1, transform: [{ translateX: clamped - half }] };
+    }
+
+    // Until the first measurement lands the height is zero, which clamps to
+    // the top of the plot — the same place it used to sit, rather than a jump
+    // from somewhere it never was.
+    const tall = labelHeight.value;
+    const y = Math.min(
+      plot.top + Math.max(plot.height - tall, 0),
+      Math.max(plot.top, centre - tall / 2)
+    );
+    return {
+      opacity: 1,
+      transform: [{ translateX: clamped - half }, { translateY: y }],
+    };
   });
 
   const active = activeIndexJS >= 0 ? data[activeIndexJS] : null;
@@ -1151,6 +1185,9 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
         >
           {active ? (
             <View
+              onLayout={(event) => {
+                labelHeight.value = event.nativeEvent.layout.height;
+              }}
               className={cn(
                 'rounded-xl border border-border bg-popover px-2.5 py-1.5 shadow-lg',
                 className

package/src/components/bottom-sheet/index.tsx

@@ -31,7 +31,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { getNativeUI } from '../../native';
 import { XIcon } from '../../icons';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -435,7 +435,7 @@ function BottomSheetContent({
   if (!open) return null;
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so nested consumers keep working. */}
       <BottomSheetContext.Provider value={context}>
@@ -507,7 +507,7 @@ function BottomSheetContent({
         </GestureDetector>
         </View>
       </BottomSheetContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/button/index.tsx

@@ -42,8 +42,9 @@ const buttonVariants = tv({
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
-        label: 'text-white',
-        spinner: 'border-white/32 border-t-white',
+        label: 'text-destructive-solid-foreground',
+        spinner:
+          'border-destructive-solid-foreground/32 border-t-destructive-solid-foreground',
       },
       /** Neutral surface for third-party sign-in, sized for a full-width stack. */
       social: {
@@ -53,8 +54,8 @@ const buttonVariants = tv({
       },
     },
     size: {
-      sm: { root: 'h-9 gap-1.5 px-2.5', label: 'text-sm' },
-      md: { root: 'h-11 px-4', label: 'text-base' },
+      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' },
       icon: { root: 'h-11 w-11 px-0' },
     },
@@ -134,18 +135,16 @@ const ATTACHED = 'rounded-none border-transparent shadow-none active:bg-accent';
 
 const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
 
+/** Extra room around the styled sizes so even the compact button reaches 48dp. */
+const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, icon: 2 } as const;
+
 /**
  * The theme token each variant's content reads against. Icons in the content
  * slots inherit the resolved value, so they follow the theme automatically.
- *
- * `destructive` is absent on purpose: its background is a saturated red in
- * every theme, so its content is always white rather than a themed token.
  */
-const CONTENT_COLOR_VAR: Record<
-  Exclude<NonNullable<ButtonVariantProps['variant']>, 'destructive'>,
-  string
-> = {
+const CONTENT_COLOR_VAR: Record<NonNullable<ButtonVariantProps['variant']>, string> = {
   primary: '--color-primary-foreground',
+  destructive: '--color-destructive-solid-foreground',
   secondary: '--color-secondary-foreground',
   outline: '--color-foreground',
   ghost: '--color-foreground',
@@ -328,17 +327,9 @@ export const Button = forwardRef<View, ButtonProps>(
     // Icons in the content slots inherit this, so they stay legible when the
     // theme inverts the button's background. Without it every caller has to
     // hardcode a hex that is wrong in one theme or the other.
-    const themedColor = useCSSVariable(
-      CONTENT_COLOR_VAR[
-        resolvedVariant === 'destructive' ? 'primary' : (resolvedVariant ?? 'primary')
-      ]
-    );
+    const themedColor = useCSSVariable(CONTENT_COLOR_VAR[resolvedVariant ?? 'primary']);
     const contentColor =
-      resolvedVariant === 'destructive'
-        ? '#ffffff'
-        : typeof themedColor === 'string'
-          ? themedColor
-          : undefined;
+      typeof themedColor === 'string' ? themedColor : undefined;
 
     if (nativeUI) {
       const { Host, Button: NativeButton, RNHostView } = nativeUI;
@@ -446,6 +437,9 @@ export const Button = forwardRef<View, ButtonProps>(
           accessibilityRole="button"
           accessibilityState={{ disabled: isDisabled, busy: loading }}
           disabled={isDisabled}
+          // Joined segments cannot borrow room from each other without making
+          // two actions claim the same pixels. ButtonGroup owns that layout.
+          hitSlop={attached ? undefined : BUTTON_HIT_SLOP[resolvedSize ?? 'md']}
           // Before the spread, so a caller can still ask for the scale back.
           pressScale={attached ? 1 : undefined}
           className={root({ className: cn(attached && ATTACHED, className) })}

package/src/components/carousel/index.tsx

@@ -207,7 +207,7 @@ export interface CarouselProps extends ViewProps {
   autoplay?: boolean;
   /** Milliseconds each slide is held when `autoplay` is set. */
   autoplayInterval?: number;
-  /** Controlled active slide. */
+  /** Controlled active slide. Requests move visually only after this value changes. */
   index?: number;
   /** Starting slide when uncontrolled. */
   defaultIndex?: number;
@@ -269,28 +269,37 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
     [isControlled, onIndexChange]
   );
 
-  const scrollTo = useCallback(
+  const animateTo = useCallback(
     (target: number) => {
-      if (count <= 0) return;
-      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
-
       if (reducedMotion) {
-        progress.value = settled;
+        progress.value = target;
       } else if (loop) {
         // Spring to the nearest representation of the target rather than to the
         // target itself, so a wrap from the last slide to the first travels one
         // step forward instead of winding all the way back through the run.
-        const shortest = progress.value + distance(settled, progress.value, count, true);
+        const shortest = progress.value + distance(target, progress.value, count, true);
         progress.value = withSpring(shortest, SPRING, (finished) => {
           if (finished) progress.value = wrap(progress.value, count);
         });
       } else {
-        progress.value = withSpring(settled, SPRING);
+        progress.value = withSpring(target, SPRING);
       }
+    },
+    [count, loop, progress, reducedMotion]
+  );
+
+  const scrollTo = useCallback(
+    (target: number) => {
+      if (count <= 0) return;
+      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
 
+      // A controlled request belongs to its owner. The finger may move the run,
+      // but after release it returns to the current prop until the owner accepts
+      // the request by changing that prop.
+      animateTo(isControlled ? index : settled);
       setIndex(settled);
     },
-    [count, loop, progress, reducedMotion, setIndex]
+    [animateTo, count, index, isControlled, loop, setIndex]
   );
 
   const next = useCallback(() => scrollTo(index + 1), [index, scrollTo]);
@@ -302,8 +311,8 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
   useEffect(() => {
     if (!isControlled || indexProp === undefined || count <= 0) return;
     if (Math.abs(progress.value - indexProp) < 0.001) return;
-    progress.value = reducedMotion ? indexProp : withSpring(indexProp, SPRING);
-  }, [isControlled, indexProp, count, progress, reducedMotion]);
+    animateTo(indexProp);
+  }, [animateTo, isControlled, indexProp, count, progress]);
 
   /*
    * Autoplay stops for good the first time a finger lands, rather than pausing.
@@ -688,16 +697,30 @@ function CarouselDots({
             key={dot}
             disabled={!interactive}
             onPress={() => scrollTo(dot)}
-            hitSlop={6}
             accessibilityRole="tab"
             accessibilityLabel={`Slide ${dot + 1} of ${count}`}
             accessibilityState={{ selected: active }}
-            className={cn(
-              'rounded-full',
-              horizontal ? (active ? 'h-1 w-4' : 'h-1 w-1') : active ? 'h-4 w-1' : 'h-1 w-1',
-              active ? 'bg-foreground' : 'bg-foreground/30'
-            )}
-          />
+            // 24, not the 48 the buttons get. Dots sit a few points apart, so
+            // a 48 box would either overlap its neighbours — making a tap near
+            // the join land on the wrong slide — or push a five-slide run out
+            // to the width of the screen. 24 clears the minimum with the pitch
+            // still wider than the target, so no two dots contend for a touch.
+            className={cn('items-center justify-center', interactive && 'h-6 w-6')}
+          >
+            <View
+              className={cn(
+                'rounded-full',
+                horizontal
+                  ? active
+                    ? 'h-1 w-4'
+                    : 'h-1 w-1'
+                  : active
+                    ? 'h-4 w-1'
+                    : 'h-1 w-1',
+                active ? 'bg-foreground' : 'bg-foreground/30'
+              )}
+            />
+          </Pressable>
         );
       })}
     </View>
@@ -723,12 +746,11 @@ function makeArrow(direction: 'previous' | 'next') {
       <Pressable
         disabled={disabled}
         onPress={direction === 'next' ? next : previous}
-        hitSlop={8}
         accessibilityRole="button"
         accessibilityLabel={direction === 'next' ? 'Next slide' : 'Previous slide'}
         accessibilityState={{ disabled }}
         className={cn(
-          'items-center justify-center rounded-full p-1',
+          'h-12 w-12 items-center justify-center rounded-full',
           disabled ? 'opacity-30' : 'active:bg-foreground/10',
           className
         )}

package/src/components/checkbox/index.tsx

@@ -13,7 +13,7 @@ import { Text } from '../../primitives/text';
 
 const checkboxVariants = tv({
   slots: {
-    row: 'flex-row items-center gap-2.5',
+    row: 'min-h-12 min-w-12 flex-row items-center gap-2.5',
     box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
     fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
     content: 'flex-1 gap-0.5',
@@ -130,7 +130,6 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
         disabled={disabled}
         // An indeterminate box resolves upward: the press turns the group on.
         onPress={() => onCheckedChange?.(indeterminate ? true : !checked)}
-        hitSlop={8}
         // A description makes the row two lines tall — align the box to the
         // label rather than centring it against the whole block.
         className={slots.row({

package/src/components/dialog/index.tsx

@@ -13,7 +13,7 @@ import {
 import { Pressable, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -111,7 +111,7 @@ function DialogContent({
   if (!open) return null;
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so Dialog.Close etc. keep working. */}
       <DialogContext.Provider value={context}>
@@ -142,7 +142,7 @@ function DialogContent({
           </Animated.View>
         </Animated.View>
       </DialogContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/drawer/index.tsx

@@ -84,7 +84,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { XIcon } from '../../icons';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -458,7 +458,7 @@ function DrawerContent({
   };
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so Drawer.Close keeps working. */}
       <DrawerContext.Provider value={{ open, setOpen }}>
@@ -561,7 +561,7 @@ function DrawerContent({
           </View>
         </DirectionContext.Provider>
       </DrawerContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/fab/index.tsx

@@ -129,7 +129,10 @@ const fabVariants = tv({
       primary: { root: 'bg-primary', label: 'text-primary-foreground' },
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
       surface: { root: 'border border-border bg-popover', label: 'text-foreground' },
-      destructive: { root: 'bg-destructive', label: 'text-white' },
+      destructive: {
+        root: 'bg-destructive',
+        label: 'text-destructive-solid-foreground',
+      },
     },
     disabled: {
       true: { root: 'opacity-[0.64] shadow-none' },
@@ -158,8 +161,9 @@ export type FabSize = NonNullable<FabVariantProps['size']>;
 export type FabVariant = NonNullable<FabVariantProps['variant']>;
 
 /** The theme token each variant's icon reads against. */
-const CONTENT_COLOR_VAR: Record<Exclude<FabVariant, 'destructive'>, string> = {
+const CONTENT_COLOR_VAR: Record<FabVariant, string> = {
   primary: '--color-primary-foreground',
+  destructive: '--color-destructive-solid-foreground',
   secondary: '--color-secondary-foreground',
   surface: '--color-foreground',
 };
@@ -234,17 +238,9 @@ const FabRoot = forwardRef<View, FabProps>(
       disabled,
     });
 
-    const themed = useCSSVariable(
-      CONTENT_COLOR_VAR[
-        variant === 'destructive' ? 'primary' : (variant ?? 'primary')
-      ]
-    );
+    const themed = useCSSVariable(CONTENT_COLOR_VAR[variant ?? 'primary']);
     const contentColor =
-      variant === 'destructive'
-        ? '#ffffff'
-        : typeof themed === 'string'
-          ? themed
-          : undefined;
+      typeof themed === 'string' ? themed : undefined;
 
     const handlePress = useCallback(() => {
       if (haptics) selectionTick();

package/src/components/field/index.tsx

@@ -18,7 +18,12 @@
  *     <Field.Title>Marketing emails</Field.Title>
  *     <Field.Description>Product updates, at most weekly.</Field.Description>
  *   </Field.Content>
- *   <Switch value={subscribed} onValueChange={setSubscribed} />
+ *   <Switch
+ *     value={subscribed}
+ *     onValueChange={setSubscribed}
+ *     accessibilityLabel="Marketing emails"
+ *     accessibilityHint="Product updates, at most weekly."
+ *   />
  * </Field>
  * ```
  */
@@ -26,6 +31,7 @@ import {
   createContext,
   forwardRef,
   useContext,
+  useId,
   useMemo,
   type ReactNode,
 } from 'react';
@@ -73,14 +79,22 @@ interface FieldState {
   invalid: boolean;
   disabled: boolean;
   required: boolean;
+  relationshipIds: string[];
 }
 
 const FieldContext = createContext<FieldState>({
   invalid: false,
   disabled: false,
   required: false,
+  relationshipIds: [],
 });
 
+/** Android can announce the label, help and error text rendered beside a control. */
+export function useFieldLabelledBy(): string[] | undefined {
+  const { relationshipIds } = useContext(FieldContext);
+  return relationshipIds.length > 0 ? relationshipIds : undefined;
+}
+
 export interface FieldProps extends ViewProps {
   className?: string;
   /** `horizontal` puts a label beside the control instead of above it. */
@@ -107,9 +121,19 @@ const FieldRoot = forwardRef<View, FieldProps>(
     ref
   ) => {
     const { root } = fieldVariants({ orientation, disabled });
+    const id = useId().replace(/:/g, '');
+    const labelId = `panelui-field-${id}-label`;
+    const titleId = `panelui-field-${id}-title`;
+    const descriptionId = `panelui-field-${id}-description`;
+    const errorId = `panelui-field-${id}-error`;
     const state = useMemo(
-      () => ({ invalid, disabled, required }),
-      [invalid, disabled, required]
+      () => ({
+        invalid,
+        disabled,
+        required,
+        relationshipIds: [labelId, titleId, descriptionId, errorId],
+      }),
+      [invalid, disabled, required, labelId, titleId, descriptionId, errorId]
     );
 
     return (
@@ -145,7 +169,7 @@ FieldContent.displayName = 'Field.Content';
 export interface FieldLabelProps extends LabelProps {}
 
 const FieldLabel = forwardRef<View, FieldLabelProps>(
-  ({ isRequired, isInvalid, isDisabled, ...props }, ref) => {
+  ({ isRequired, isInvalid, isDisabled, nativeID, ...props }, ref) => {
     const ctx = useContext(FieldContext);
     return (
       <Label
@@ -153,6 +177,7 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
         isRequired={isRequired ?? ctx.required}
         isInvalid={isInvalid ?? ctx.invalid}
         isDisabled={isDisabled ?? ctx.disabled}
+        nativeID={nativeID ?? ctx.relationshipIds[0]}
         {...props}
       />
     );
@@ -165,10 +190,17 @@ export interface FieldDescriptionProps extends TextProps {
 }
 
 const FieldDescription = forwardRef<RNText, FieldDescriptionProps>(
-  ({ className, ...props }, ref) => {
-    const { disabled } = useContext(FieldContext);
+  ({ className, nativeID, ...props }, ref) => {
+    const { disabled, relationshipIds } = useContext(FieldContext);
     const { description } = fieldVariants({ disabled });
-    return <Text ref={ref} className={description({ className })} {...props} />;
+    return (
+      <Text
+        ref={ref}
+        nativeID={nativeID ?? relationshipIds[2]}
+        className={description({ className })}
+        {...props}
+      />
+    );
   }
 );
 FieldDescription.displayName = 'Field.Description';
@@ -186,7 +218,8 @@ export interface FieldErrorProps extends Omit<ViewProps, 'children'> {
 }
 
 const FieldError = forwardRef<View, FieldErrorProps>(
-  ({ className, errors, children, ...props }, ref) => {
+  ({ className, errors, children, nativeID, ...props }, ref) => {
+    const { relationshipIds } = useContext(FieldContext);
     const messages = useMemo(() => {
       if (!errors) return null;
       const seen = new Set<string>();
@@ -213,6 +246,7 @@ const FieldError = forwardRef<View, FieldErrorProps>(
         // accessibilityRole list has no alert, the ARIA-aligned one does.
         role="alert"
         accessibilityLiveRegion="polite"
+        nativeID={nativeID ?? relationshipIds[3]}
         className={error({ className })}
         {...props}
       >
@@ -307,9 +341,17 @@ export interface FieldTitleProps extends TextProps {
 }
 
 const FieldTitle = forwardRef<RNText, FieldTitleProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, nativeID, ...props }, ref) => {
     const { title } = fieldVariants();
-    return <Text ref={ref} className={title({ className })} {...props} />;
+    const { relationshipIds } = useContext(FieldContext);
+    return (
+      <Text
+        ref={ref}
+        nativeID={nativeID ?? relationshipIds[1]}
+        className={title({ className })}
+        {...props}
+      />
+    );
   }
 );
 FieldTitle.displayName = 'Field.Title';

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

@@ -0,0 +1,109 @@
+import type { FlowConnection, FlowNodePosition } from '.';
+import type { FlowRect } from './flow-paths';
+
+export const FLOW_MOVE_ACTIONS = [
+  { name: 'flow-move-up', label: 'Move up', dx: 0, dy: -1 },
+  { name: 'flow-move-right', label: 'Move right', dx: 1, dy: 0 },
+  { name: 'flow-move-down', label: 'Move down', dx: 0, dy: 1 },
+  { name: 'flow-move-left', label: 'Move left', dx: -1, dy: 0 },
+] as const;
+
+export const FLOW_DELETE_ACTION = { name: 'flow-delete', label: 'Delete node' } as const;
+
+export interface FlowAccessibilityNode {
+  id: string;
+  label: string;
+}
+
+export interface FlowAccessibilityHandle {
+  key: string;
+  node: string;
+  id: string;
+  label: string;
+  type: 'source' | 'target' | 'both';
+}
+
+export interface FlowConnectionAction {
+  name: string;
+  label: string;
+  connection: FlowConnection;
+}
+
+/** Keep pointer and assistive-technology movement inside the same group bounds. */
+export function clampNodePosition(
+  rect: FlowRect,
+  bounds: FlowRect | undefined,
+  position: FlowNodePosition
+): FlowNodePosition {
+  'worklet';
+  if (!bounds) return position;
+
+  return {
+    x: Math.min(Math.max(position.x, bounds.x), bounds.x + bounds.width - rect.width),
+    y: Math.min(Math.max(position.y, bounds.y), bounds.y + bounds.height - rect.height),
+  };
+}
+
+export function moveNodePosition(
+  rect: FlowRect,
+  bounds: FlowRect | undefined,
+  actionName: string,
+  step: number
+): FlowNodePosition | undefined {
+  const action = FLOW_MOVE_ACTIONS.find((entry) => entry.name === actionName);
+  if (!action) return undefined;
+
+  return clampNodePosition(rect, bounds, {
+    x: rect.x + action.dx * Math.max(1, step),
+    y: rect.y + action.dy * Math.max(1, step),
+  });
+}
+
+/** Build connection choices from the same registered nodes and handles used by drag hit-testing. */
+export function getFlowConnectionActions(
+  sourceNode: string,
+  nodes: FlowAccessibilityNode[],
+  handles: FlowAccessibilityHandle[]
+): FlowConnectionAction[] {
+  const sources = handles.filter(
+    (handle) => handle.node === sourceNode && handle.type !== 'target'
+  );
+  if (sources.length === 0) return [];
+
+  const actions: FlowConnectionAction[] = [];
+  for (const source of sources) {
+    for (const targetNode of nodes) {
+      if (targetNode.id === sourceNode) continue;
+      const targets = handles.filter(
+        (handle) => handle.node === targetNode.id && handle.type !== 'source'
+      );
+
+      if (targets.length === 0) {
+        actions.push({
+          name: `flow-connect:${source.key}->${targetNode.id}`,
+          label: `Connect ${source.label} to ${targetNode.label}`,
+          connection: {
+            source: sourceNode,
+            sourceHandle: source.id,
+            target: targetNode.id,
+          },
+        });
+        continue;
+      }
+
+      for (const target of targets) {
+        actions.push({
+          name: `flow-connect:${source.key}->${target.key}`,
+          label: `Connect ${source.label} to ${targetNode.label}, ${target.label}`,
+          connection: {
+            source: sourceNode,
+            sourceHandle: source.id,
+            target: target.node,
+            targetHandle: target.id,
+          },
+        });
+      }
+    }
+  }
+  return actions;
+}