panelui-native 0.65.0 → 0.68.0

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

@@ -70,6 +70,7 @@ import Animated, {
 import Svg, { G, Line as SvgLine, Path } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { bandOf, compactNumber, yOf, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
@@ -234,7 +235,7 @@ function ohlcOf(
   return { open, high, low, close };
 }
 
-export interface CandlestickChartProps extends ViewProps {
+export interface CandlestickChartProps extends ViewProps, ChartAccessibilityProps<CandlestickChartDatum> {
   className?: string;
   /** The rows. Each one is a period along the x-axis. */
   data: CandlestickChartDatum[];
@@ -333,6 +334,11 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
       candleWidth,
       fadedOpacity = 0.3,
       onActiveIndexChange,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       compact = false,
       children,
       ...props
@@ -532,7 +538,29 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
       <CandlestickChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
-          <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          <ChartAccessibilityData
+            chart="Candlestick chart"
+            data={data}
+            disabled={accessible === false || loading}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(datum) => [
+              [xDataKey, datum[xDataKey]],
+              [openDataKey, datum[openDataKey]],
+              [highDataKey, datum[highDataKey]],
+              [lowDataKey, datum[lowDataKey]],
+              [closeDataKey, datum[closeDataKey]],
+            ]}
+          />
+          <View
+            onLayout={onLayout}
+            style={{ aspectRatio }}
+            className="w-full"
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
             {plot.width > 0 ? (
               <>
                 <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/components/carousel/carousel-lifecycle.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+export function normalizeCarouselIndex(index: number, count: number, loop: boolean): number {
+  'worklet';
+  if (count <= 0 || !Number.isFinite(index)) return 0;
+  if (loop) return ((index % count) + count) % count;
+  return Math.max(0, Math.min(index, count - 1));
+}
+
+interface CarouselIndexLifecycleOptions {
+  requestedIndex: number;
+  count: number;
+  countKnown: boolean;
+  loop: boolean;
+  onCorrection: (index: number) => void;
+  onSettledIndex: (index: number) => void;
+}
+
+/** Keeps the rendered position inside the current run and reports corrections once. */
+export function useCarouselIndexLifecycle({
+  requestedIndex,
+  count,
+  countKnown,
+  loop,
+  onCorrection,
+  onSettledIndex,
+}: CarouselIndexLifecycleOptions): number {
+  const index = countKnown
+    ? normalizeCarouselIndex(requestedIndex, count, loop)
+    : requestedIndex;
+  const reportedCorrection = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!countKnown) return;
+    onSettledIndex(index);
+
+    if (index === requestedIndex) {
+      reportedCorrection.current = null;
+      return;
+    }
+
+    const correction = `${requestedIndex}:${count}:${loop}`;
+    if (reportedCorrection.current === correction) return;
+    reportedCorrection.current = correction;
+    onCorrection(index);
+  }, [count, countKnown, index, loop, onCorrection, onSettledIndex, requestedIndex]);
+
+  return index;
+}
+
+interface CarouselAutoplayOptions {
+  enabled: boolean;
+  index: number;
+  count: number;
+  loop: boolean;
+  interval: number;
+  onAdvance: (index: number) => void;
+}
+
+/** One autoplay request per accepted index; configuration changes re-arm it. */
+export function useCarouselAutoplay({
+  enabled,
+  index,
+  count,
+  loop,
+  interval,
+  onAdvance,
+}: CarouselAutoplayOptions): void {
+  useEffect(() => {
+    if (!enabled || count <= 1 || (!loop && index >= count - 1)) return;
+    const timer = setTimeout(() => onAdvance(index + 1), interval);
+    return () => clearTimeout(timer);
+  }, [count, enabled, index, interval, loop, onAdvance]);
+}

package/src/components/carousel/index.tsx

@@ -50,11 +50,13 @@ import {
   Children,
   createContext,
   forwardRef,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react';
@@ -74,6 +76,11 @@ import Animated, {
 import { ChevronLeftIcon, ChevronRightIcon } from '../../icons';
 import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import {
+  normalizeCarouselIndex,
+  useCarouselAutoplay,
+  useCarouselIndexLifecycle,
+} from './carousel-lifecycle';
 
 /** Settles the run onto a whole index. Tuned to stop rather than to bounce. */
 const SPRING = { damping: 22, stiffness: 190, mass: 0.55 } as const;
@@ -161,8 +168,7 @@ export function useCarouselState() {
  */
 function wrap(value: number, count: number) {
   'worklet';
-  if (count <= 0) return 0;
-  return ((value % count) + count) % count;
+  return normalizeCarouselIndex(value, count, true);
 }
 
 /**
@@ -183,6 +189,17 @@ function distance(index: number, progress: number, count: number, loop: boolean)
   return raw;
 }
 
+/** Drop the empty nodes React omits before assigning slide positions. */
+function renderableChildren(children: ReactNode) {
+  // React treats a Fragment as one child here. Keep that keyed boundary rather
+  // than recursively flattening it and changing React's reconciliation model.
+  return Children.toArray(children);
+}
+
+function renderableChildKey(child: ReactNode, index: number) {
+  return isValidElement(child) && child.key !== null ? child.key : index;
+}
+
 export interface CarouselProps extends ViewProps {
   className?: string;
   /** How the slides are arranged, and how they move. */
@@ -203,11 +220,14 @@ export interface CarouselProps extends ViewProps {
    * wants; set it for a run that shows more than one at a time.
    */
   itemSize?: number;
-  /** Advance on a timer. Stops for good the first time a finger lands. */
+  /** Advance on a timer. Stops at the non-looping end or after the first touch. */
   autoplay?: boolean;
   /** Milliseconds each slide is held when `autoplay` is set. */
   autoplayInterval?: number;
-  /** Controlled active slide. Requests move visually only after this value changes. */
+  /**
+   * Controlled active slide. Requests move visually only after this value changes;
+   * an index invalidated by a child-count change is normalized and reported.
+   */
   index?: number;
   /** Starting slide when uncontrolled. */
   defaultIndex?: number;
@@ -245,14 +265,15 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
 ) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [internalIndex, setInternalIndex] = useState(defaultIndex);
-  const [count, setCount] = useState(0);
+  const [count, setCountValue] = useState(0);
+  const [countKnown, setCountKnown] = useState(false);
   const [touched, setTouched] = useState(false);
   const reducedMotion = useReducedMotion();
 
   const isControlled = indexProp !== undefined;
-  const index = isControlled ? indexProp : internalIndex;
+  const requestedIndex = isControlled ? indexProp : internalIndex;
 
-  const progress = useSharedValue(defaultIndex);
+  const progress = useSharedValue(indexProp ?? defaultIndex);
   const engaged = useSharedValue(0);
 
   // A deck is dealt from the top of a pile, so it is dragged sideways whatever
@@ -261,6 +282,11 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
   const along = axis === 'horizontal' ? size.width : size.height;
   const itemSize = itemSizeProp ?? along ?? 0;
 
+  const setCount = useCallback((next: number) => {
+    setCountValue(next);
+    setCountKnown(true);
+  }, []);
+
   const setIndex = useCallback(
     (next: number) => {
       if (!isControlled) setInternalIndex(next);
@@ -269,8 +295,22 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
     [isControlled, onIndexChange]
   );
 
+  /*
+   * The slide the run is currently travelling to.
+   *
+   * Moving the run and recording where it went are two steps: `scrollTo` starts
+   * the spring, then the new index arrives back through state and the lifecycle
+   * effect asks for it again. Without this the second ask restarts the spring a
+   * frame into the first — from a standstill, so a flick loses the momentum it
+   * was carrying. Remembering the target lets the echo be recognised and
+   * ignored, while a genuine request for the same slide still animates, because
+   * that one comes through `scrollTo` and sets this first.
+   */
+  const animatedTarget = useRef<number | null>(null);
+
   const animateTo = useCallback(
     (target: number) => {
+      animatedTarget.current = target;
       if (reducedMotion) {
         progress.value = target;
       } else if (loop) {
@@ -288,10 +328,27 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
     [count, loop, progress, reducedMotion]
   );
 
+  const settleIndex = useCallback(
+    (next: number) => {
+      if (animatedTarget.current === next) return;
+      if (Math.abs(progress.value - next) >= 0.001) animateTo(next);
+    },
+    [animateTo, progress]
+  );
+
+  const index = useCarouselIndexLifecycle({
+    requestedIndex,
+    count,
+    countKnown,
+    loop,
+    onCorrection: setIndex,
+    onSettledIndex: settleIndex,
+  });
+
   const scrollTo = useCallback(
     (target: number) => {
       if (count <= 0) return;
-      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
+      const settled = normalizeCarouselIndex(target, count, loop);
 
       // 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
@@ -307,23 +364,19 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
 
   useImperativeHandle(ref, () => ({ next, previous, scrollTo }), [next, previous, scrollTo]);
 
-  // A controlled index moving underneath us animates rather than jumps.
-  useEffect(() => {
-    if (!isControlled || indexProp === undefined || count <= 0) return;
-    if (Math.abs(progress.value - indexProp) < 0.001) return;
-    animateTo(indexProp);
-  }, [animateTo, isControlled, indexProp, count, progress]);
-
   /*
    * Autoplay stops for good the first time a finger lands, rather than pausing.
    * Someone who has taken hold of the run is reading it, and having it start
    * moving again a few seconds later is the behaviour everybody hates.
    */
-  useEffect(() => {
-    if (!autoplay || touched || count <= 1) return;
-    const timer = setInterval(() => scrollTo(index + 1), autoplayInterval);
-    return () => clearInterval(timer);
-  }, [autoplay, touched, count, index, autoplayInterval, scrollTo]);
+  useCarouselAutoplay({
+    enabled: autoplay && !touched,
+    index,
+    count,
+    loop,
+    interval: autoplayInterval,
+    onAdvance: scrollTo,
+  });
 
   const settle = useCallback(
     (target: number) => {
@@ -447,13 +500,13 @@ export interface CarouselContentProps extends ViewProps {
  */
 function CarouselContent({ className, children, ...props }: CarouselContentProps) {
   const { setCount, variant, orientation, align } = useCarousel('Carousel.Content');
-  const slides = Children.count(children);
+  const slides = renderableChildren(children);
   const horizontal = orientation === 'horizontal';
   const centred = align === 'center' || variant === 'coverflow' || variant === 'stack';
 
   useEffect(() => {
-    setCount(slides);
-  }, [setCount, slides]);
+    setCount(slides.length);
+  }, [setCount, slides.length]);
 
   return (
     <View
@@ -474,8 +527,10 @@ function CarouselContent({ className, children, ...props }: CarouselContentProps
         props.style,
       ]}
     >
-      {Children.map(children, (child, index) => (
-        <ItemIndexContext.Provider value={index}>{child}</ItemIndexContext.Provider>
+      {slides.map((child, index) => (
+        <ItemIndexContext.Provider key={renderableChildKey(child, index)} value={index}>
+          {child}
+        </ItemIndexContext.Provider>
       ))}
     </View>
   );

package/src/components/context-menu/context-menu-invocation.ts

@@ -0,0 +1,44 @@
+export type ContextMenuInvocation = 'menu' | 'press';
+
+export interface ContextMenuKey {
+  key: string;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  repeat?: boolean;
+}
+
+/** The cross-platform subset ContextMenu consumes from a key-down event. */
+export interface ContextMenuKeyDownEvent {
+  nativeEvent: ContextMenuKey;
+  preventDefault: () => void;
+  isDefaultPrevented: () => boolean;
+}
+
+/** Resolve a screen-reader/switch action to the same paths touch users have. */
+export function contextMenuAccessibilityInvocation(
+  actionName: string,
+  hasPrimaryAction: boolean,
+  disabled: boolean
+): ContextMenuInvocation | undefined {
+  if (disabled) return undefined;
+  if (actionName === 'showMenu') return 'menu';
+  if (actionName === 'activate') return hasPrimaryAction ? 'press' : 'menu';
+  return undefined;
+}
+
+/** Resolve web/hardware keys without stealing modified shortcuts or repeats. */
+export function contextMenuKeyInvocation(
+  event: ContextMenuKey,
+  hasPrimaryAction: boolean,
+  disabled: boolean
+): ContextMenuInvocation | undefined {
+  if (disabled || event.repeat) return undefined;
+  if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) return 'menu';
+  if (event.altKey || event.ctrlKey || event.metaKey) return undefined;
+  if (event.key === 'Enter' || event.key === ' ') {
+    return hasPrimaryAction ? 'press' : 'menu';
+  }
+  return undefined;
+}

package/src/components/context-menu/index.tsx

@@ -4,7 +4,8 @@
  * A `Menu` hangs off a control that exists to be pressed: a ⋯ button, a toolbar
  * item, something whose whole job is to open the menu. A context menu has no
  * such control. The target is the content itself — a message, a note, a photo,
- * a row — and the actions are reached by pressing and holding it.
+ * a row — and the actions are reached by holding it, by a named accessibility
+ * action, or from the keyboard.
  *
  * ```tsx
  * <ContextMenu>
@@ -31,9 +32,9 @@
  * them. The panel is `Menu`'s panel, which is `Popover`'s, so `presentation`,
  * submenus and edge-flipping all arrive already working.
  *
- * What this component owns is the two things a menu opened on content needs and
- * a menu opened from a button does not: the long press, and where the panel
- * goes.
+ * What this component owns is what a menu opened on content needs and a menu
+ * opened from a button does not: alternate invocation paths, and where the
+ * panel goes.
  *
  * ## Anchored to the finger, not to the target
  *
@@ -73,7 +74,11 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react';
-import { View, type ViewProps } from 'react-native';
+import {
+  View,
+  type AccessibilityActionInfo,
+  type ViewProps,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   FadeOut,
@@ -95,6 +100,12 @@ import {
 import { usePopoverAnchor } from '../popover';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
+import {
+  contextMenuAccessibilityInvocation,
+  contextMenuKeyInvocation,
+  type ContextMenuInvocation,
+  type ContextMenuKeyDownEvent,
+} from './context-menu-invocation';
 
 /**
  * How long the target is held before the menu opens.
@@ -260,7 +271,7 @@ function ContextMenuRoot({ children, ...props }: ContextMenuProps) {
 /** Which rectangle the panel is placed against. */
 export type ContextMenuAnchor = 'point' | 'target';
 
-export interface ContextMenuTriggerProps extends Omit<ViewProps, 'children'> {
+export interface ContextMenuTriggerProps extends Omit<ViewProps, 'children' | 'onKeyDown'> {
   /**
    * Classes on the wrapper the content sits in, which lays out like any other
    * view — it does not shrink to its child, because the things held are usually
@@ -280,7 +291,8 @@ export interface ContextMenuTriggerProps extends Omit<ViewProps, 'children'> {
    * Point is the default because a context menu's target is usually large, and
    * the middle of a whole message is not where the press was. Reach for
    * `target` when the target is small and list-shaped and the panel should read
-   * as lining up with it.
+   * as lining up with it. Keyboard and accessibility opens always use the target
+   * bounds, because those modalities have no pointer coordinate.
    */
   anchor?: ContextMenuAnchor;
   /** How long the hold has to last, in milliseconds. 350 by default. */
@@ -310,10 +322,17 @@ export interface ContextMenuTriggerProps extends Omit<ViewProps, 'children'> {
   haptics?: boolean;
   /** Nothing opens the menu, and the short press stops firing too. */
   disabled?: boolean;
+  /**
+   * Called first for keyboard events. Prevent the event to keep ContextMenu
+   * from handling it. Context Menu and Shift+F10 open the menu; Enter and Space
+   * mirror the trigger's accessible activation.
+   */
+  onKeyDown?: (event: ContextMenuKeyDownEvent) => void;
 }
 
 /**
- * Wraps the content and opens the menu when it is held.
+ * Wraps the content and opens the menu when held, through accessibility
+ * actions, or from the keyboard.
  *
  * The wrapper is a plain view and lays out like one, stretching as a view does
  * rather than shrinking to its child. That is the opposite of what a tooltip's
@@ -334,6 +353,14 @@ function ContextMenuTrigger({
   onPress,
   haptics = false,
   disabled = false,
+  accessible,
+  accessibilityActions,
+  onAccessibilityAction,
+  accessibilityRole,
+  accessibilityState,
+  focusable,
+  tabIndex,
+  onKeyDown,
   ...props
 }: ContextMenuTriggerProps) {
   const { setOpen, anchorTo } = usePopoverAnchor('ContextMenu.Trigger');
@@ -359,8 +386,8 @@ function ContextMenuTrigger({
    * The target is measured either way, because the preview draws at that rect
    * whatever the panel is placed against.
    */
-  const openAt = useCallback(
-    (x: number, y: number) => {
+  const open = useCallback(
+    (point?: { x: number; y: number }) => {
       // Ticked here rather than in the gesture callback so it fires once the
       // hold has been accepted, which is the moment there is something to
       // confirm — and on the same side of the bridge as the opening.
@@ -382,8 +409,8 @@ function ContextMenuTrigger({
          */
         const grown = hasPreview ? (PREVIEW_SCALE - 1) / 2 : 0;
         anchorTo(
-          against === 'point'
-            ? { x, y, width: 0, height: 0 }
+          against === 'point' && point
+            ? { ...point, width: 0, height: 0 }
             : {
                 x: mx - width * grown,
                 y: my - height * grown,
@@ -397,6 +424,63 @@ function ContextMenuTrigger({
     [against, anchorTo, setOpen, haptics, setTarget, setContent, children, hasPreview]
   );
 
+  const openAt = useCallback((x: number, y: number) => open({ x, y }), [open]);
+  // Keyboard and accessibility actions have no pointer coordinate to honour.
+  // The measured target is the only real location they can anchor against.
+  const openFromTarget = useCallback(() => open(), [open]);
+
+  const invoke = useCallback(
+    (invocation: ContextMenuInvocation) => {
+      if (invocation === 'menu') openFromTarget();
+      else onPress?.();
+    },
+    [onPress, openFromTarget]
+  );
+
+  const triggerActions = useMemo<readonly AccessibilityActionInfo[] | undefined>(() => {
+    if (disabled) return undefined;
+    const reserved = new Set(['activate', 'showMenu']);
+    return [
+      { name: 'activate' },
+      { name: 'showMenu', label: 'Show menu' },
+      ...(accessibilityActions ?? []).filter(({ name }) => !reserved.has(name)),
+    ];
+  }, [accessibilityActions, disabled]);
+
+  const handleAccessibilityAction = useCallback<
+    NonNullable<ViewProps['onAccessibilityAction']>
+  >(
+    (event) => {
+      const actionName = event.nativeEvent.actionName;
+      const invocation = contextMenuAccessibilityInvocation(actionName, !!onPress, disabled);
+      if (invocation) {
+        invoke(invocation);
+        return;
+      }
+      // Reserved actions cannot bypass a disabled trigger through a consumer
+      // handler, while unrelated custom actions still compose normally.
+      if (actionName === 'activate' || actionName === 'showMenu') return;
+      onAccessibilityAction?.(event);
+    },
+    [disabled, invoke, onAccessibilityAction, onPress]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: ContextMenuKeyDownEvent) => {
+      onKeyDown?.(event);
+      if (event.isDefaultPrevented()) return;
+      const invocation = contextMenuKeyInvocation(event.nativeEvent, !!onPress, disabled);
+      if (!invocation) return;
+      event.preventDefault();
+      invoke(invocation);
+    },
+    [disabled, invoke, onKeyDown, onPress]
+  );
+
+  // React Native exposes key events at runtime (and in its generated types),
+  // while its compatibility ViewProps declaration does not yet list them.
+  const keyboardProps = { onKeyDown: handleKeyDown } as ViewProps;
+
   const gesture = useMemo(() => {
     /*
      * The hold and the tap are given to the recogniser as alternatives, so it
@@ -432,7 +516,23 @@ function ContextMenuTrigger({
         a view that only groups children is otherwise flattened away — and a
         flattened view cannot be measured, which `anchor="target"` needs.
       */}
-      <View ref={ref} collapsable={false} className={className} {...props}>
+      <View
+        ref={ref}
+        collapsable={false}
+        accessible={accessible ?? true}
+        accessibilityRole={accessibilityRole ?? 'button'}
+        accessibilityState={{
+          ...accessibilityState,
+          disabled: disabled || accessibilityState?.disabled,
+        }}
+        accessibilityActions={triggerActions}
+        onAccessibilityAction={handleAccessibilityAction}
+        focusable={focusable ?? !disabled}
+        tabIndex={tabIndex ?? (disabled ? -1 : 0)}
+        className={className}
+        {...keyboardProps}
+        {...props}
+      >
         {children}
       </View>
     </GestureDetector>

package/src/components/dialog/index.tsx

@@ -89,6 +89,9 @@ export interface DialogContentProps extends ViewProps {
    * Frost the screen behind the dialog instead of dimming it. Uses `expo-blur`
    * when installed and falls back to the dim when it is not, so it is safe to
    * pass either way.
+   *
+   * Someone who has Reduce Transparency switched on gets an opaque
+   * backdrop instead, which is the whole point of the setting.
    */
   blur?: boolean;
   children?: ReactNode;

package/src/components/drawer/index.tsx

@@ -285,6 +285,9 @@ export interface DrawerContentProps extends ViewProps {
   /**
    * Frost the screen behind the drawer instead of dimming it. Needs the
    * optional `expo-blur`; without it this dims, rather than failing.
+   *
+   * Someone who has Reduce Transparency switched on gets an opaque
+   * backdrop instead, which is the whole point of the setting.
    */
   blur?: boolean;
   children?: ReactNode;

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

@@ -29,6 +29,14 @@ export interface FlowConnectionAction {
   connection: FlowConnection;
 }
 
+/** Opaque, collision-free name for the native accessibility action map. */
+export function flowConnectionActionName(
+  source: { node: string; handle?: string },
+  target: { node: string; handle?: string }
+): string {
+  return `flow-connect:${JSON.stringify([source, target])}`;
+}
+
 /** Keep pointer and assistive-technology movement inside the same group bounds. */
 export function clampNodePosition(
   rect: FlowRect,
@@ -80,7 +88,10 @@ export function getFlowConnectionActions(
 
       if (targets.length === 0) {
         actions.push({
-          name: `flow-connect:${source.key}->${targetNode.id}`,
+          name: flowConnectionActionName(
+            { node: source.node, handle: source.id },
+            { node: targetNode.id }
+          ),
           label: `Connect ${source.label} to ${targetNode.label}`,
           connection: {
             source: sourceNode,
@@ -93,7 +104,10 @@ export function getFlowConnectionActions(
 
       for (const target of targets) {
         actions.push({
-          name: `flow-connect:${source.key}->${target.key}`,
+          name: flowConnectionActionName(
+            { node: source.node, handle: source.id },
+            { node: target.node, handle: target.id }
+          ),
           label: `Connect ${source.label} to ${targetNode.label}, ${target.label}`,
           connection: {
             source: sourceNode,