From ed812855df268b85b5fcb549b1b12f4076d365a2 Mon Sep 17 00:00:00 2001
From: Chris Lorenzo <chiefcll@gmail.com>
Date: Wed, 13 May 2026 21:12:30 -0400
Subject: [PATCH] fix(navigation): preserve user transitions across directional
 navigation

handleNavigation merged directional transitions on top of el.transition,
silently clobbering any developer-supplied transition keys. The empty
`transition={/* @once */ {}}` default on Row/Column/Virtual also blocked
style-defined transitions because elementNode's style setter skips keys
that are already defined on the node.

- handleNavigation now snapshots the developer's base transition and
  merges as `{ ...directional, ...base }` so user-supplied keys win.
  Re-snapshots when el.transition is changed externally (reactive update).
- Drop empty `transition={{}}` defaults from Row, Column, and Virtual so
  `style.transition` flows through.

Fixes #8

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/primitives/Column.tsx                |  1 -
 src/primitives/Row.tsx                   |  1 -
 src/primitives/Virtual.tsx               |  1 -
 src/primitives/utils/handleNavigation.ts | 31 +++++++++++++++---------
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/primitives/Column.tsx b/src/primitives/Column.tsx
index 9777eb2..bf05b9c 100644
--- a/src/primitives/Column.tsx
+++ b/src/primitives/Column.tsx
@@ -34,7 +34,6 @@ export const Column: Component<ColumnProps> = (props) => {
     <view
       transitionUp={defaultTransitionUp}
       transitionDown={defaultTransitionDown}
-      transition={/* @once */ {}}
       {...props}
       onUp={/* @once */ chainFunctions(props.onUp, onUp)}
       onDown={/* @once */ chainFunctions(props.onDown, onDown)}
diff --git a/src/primitives/Row.tsx b/src/primitives/Row.tsx
index 6dcec2b..1dbdbc0 100644
--- a/src/primitives/Row.tsx
+++ b/src/primitives/Row.tsx
@@ -33,7 +33,6 @@ export const Row: Component<RowProps> = (props) => {
     <view
       transitionLeft={defaultTransitionBack}
       transitionRight={defaultTransitionForward}
-      transition={/* @once */ {}}
       {...props}
       selected={props.selected || 0}
       onLeft={/* @once */ chainFunctions(props.onLeft, onLeft)}
diff --git a/src/primitives/Virtual.tsx b/src/primitives/Virtual.tsx
index be779b3..5ce25a4 100644
--- a/src/primitives/Virtual.tsx
+++ b/src/primitives/Virtual.tsx
@@ -540,7 +540,6 @@ function createVirtual<T>(
 
   return (
     <view
-      transition={/* @once */ {}}
       transitionLeft={isRow ? defaultTransitionBack : undefined}
       transitionRight={isRow ? defaultTransitionForward : undefined}
       transitionUp={!isRow ? defaultTransitionUp : undefined}
diff --git a/src/primitives/utils/handleNavigation.ts b/src/primitives/utils/handleNavigation.ts
index c7a6350..88f66e7 100644
--- a/src/primitives/utils/handleNavigation.ts
+++ b/src/primitives/utils/handleNavigation.ts
@@ -117,32 +117,41 @@ export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
   return selectChild(navigable, selected);
 };
 
+type NavWithTransitionCache = lngp.NavigableElement & {
+  _navBaseTransition?: object;
+  _navLastMerged?: object;
+};
+
 export function handleNavigation(
   direction: 'up' | 'right' | 'down' | 'left',
 ): lng.KeyHandler {
   return function () {
-    const el = this as lngp.NavigableElement;
-    const transition =
+    const el = this as NavWithTransitionCache;
+    const directional =
       direction === 'up'
         ? el.transitionUp
         : direction === 'down'
           ? el.transitionDown
           : direction === 'left'
             ? el.transitionLeft
-            : direction === 'right'
-              ? el.transitionRight
-              : undefined;
+            : el.transitionRight;
 
-    if (transition) {
-      const currentTransition =
+    if (directional) {
+      const current =
         typeof el.transition === 'object' && el.transition !== null
           ? el.transition
           : {};
 
-      el.transition = {
-        ...currentTransition,
-        ...(transition as object),
-      };
+      // Re-snapshot the developer-supplied transition whenever el.transition
+      // doesn't match our last merge — that means it was set externally
+      // (initial render or a reactive update), not by this handler.
+      if (current !== el._navLastMerged) {
+        el._navBaseTransition = current;
+      }
+
+      const merged = { ...(directional as object), ...el._navBaseTransition };
+      el.transition = merged;
+      el._navLastMerged = merged;
     }
 
     return moveSelection(