@solidrt/components 0.0.55 → 0.0.57

package/src/focus-nav.ts

@@ -1,37 +1,132 @@
 import {
   createEffect,
+  createInputMap,
   createSignal,
-  gamepads,
+  gamepad,
   getBoundingBoxViewport,
   getFocusables,
   focusedNode,
   getNodePath,
+  keyboard,
+  onCleanup,
   onLayout,
   setFocus,
+  untrack,
 } from "@solidrt/core"
-import type { KeyEvent } from "@solidrt/core"
+import type { Binding, GamepadDevice, InputMap, KeyboardDevice, Vec2 } from "@solidrt/core"
 
 // Focus navigation: the pointer-free control path, so a TV remote, a
 // keyboard, or a gamepad can drive an app. Two movement types over the same
 // candidates, both steering real focus (setFocus) across the elements
 // declaring `focusable`:
 //
-// - Spatial (arrows, dpad): judged by on-screen boxes at press time - the
+// - Spatial (`navigate`): judged by on-screen boxes at press time - the
 //   nearest candidate with progress in the pressed direction wins, so
 //   registration order never matters.
-// - Sequential (Tab / Shift+Tab): visual reading order - rows top to bottom,
-//   left to right within a row, wrapping at the ends. Derived from the same
+// - Sequential (`cycle`): visual reading order - rows top to bottom, left
+//   to right within a row, wrapping at the ends. Derived from the same
 //   boxes rather than registration order, which reordering mounts (a <For>
 //   shuffle) silently scrambles.
 //
-// Activation is split by source: Enter / the remote center key bubble to the
-// focused node itself (createPress consumes them there), while a controller's
-// south button goes through the action registry below. Purely additive to
+// The nav reads no device (ARCHITECTURE.md: controls through an
+// abstraction, never direct event handling). It consumes the three UI
+// actions of an input map - `navigate` (vec2), `cycle` (axis), `select`
+// (button) - the way Flutter's focus widgets consume intents and Godot's
+// controls the ui_* actions. A component library must work with nothing
+// wired, as those two do, so a nav created bare binds the standard set
+// itself (uiBindings over the keyboard and every pad) on a map of its own,
+// reachable as `nav.input` for rebinding; given `input`, it consumes the
+// app's map, which may hold the app's other actions too. Either way the
+// app spreads the map's handlers on the window: keys arrive there only when
+// no focused component consumed them, so a focused TextInput keeps its
+// caret keys and the Slider its arrows.
+//
+// A held direction repeats on the nav's own timing over the action's rate
+// (a first step on the edge, the next after NAV_REPEAT_DELAY, then every
+// NAV_REPEAT_INTERVAL), so pads and remotes walk the way keyboards used to
+// through key repeat. Activation is one path: the `select` press runs the
+// focused node's action from the registry below, for Enter, Space, the
+// remote's center key and the pad's south button alike. Purely additive to
 // pointer input: nothing is focused until the first navigation press, and
 // pointer presses work unchanged throughout.
 
 type Direction = "up" | "down" | "left" | "right"
 
+// A held direction walks: the first step on the edge, the next after this
+// many ms, then one every NAV_REPEAT_INTERVAL ms while it holds.
+const NAV_REPEAT_DELAY = 400
+const NAV_REPEAT_INTERVAL = 100
+// Deflection along the dominant axis of `navigate` (a stick) or on `cycle`
+// below which the action reads as no direction; dpad and arrows read 1.
+const NAV_THRESHOLD = 0.5
+
+/** The UI actions the focus navigation consumes: `navigate` (vec2, the
+ * direction to move focus in the screen convention, x right and y down),
+ * `cycle` (axis: +1 steps to the next candidate in reading order, -1 to
+ * the previous) and `select` (button: activate the focused control). An
+ * app's own map declares them by spreading this object. */
+export const uiActions = { navigate: "vec2", cycle: "axis", select: "button" } as const
+export type UiActions = typeof uiActions
+
+export type UiDevices = { keyboard?: KeyboardDevice; gamepad?: GamepadDevice }
+
+/**
+ * The standard UI bindings: the arrows on `navigate`, Tab and Shift+Tab
+ * on `cycle`, Enter, Space and the remote's center key (code "Select") on
+ * `select` for the keyboard; the dpad and the left stick on `navigate` and
+ * the south button on `select` for a pad. What a bare createFocusNav
+ * binds; an app with its own map applies it with `input.bind(...)`.
+ */
+export function uiBindings(devices: UiDevices): Binding[] {
+  let out: Binding[] = []
+  let kb = devices.keyboard
+  if (kb) {
+    out.push(
+      { action: "navigate", source: kb.arrows },
+      { action: "cycle", source: kb.axis("Shift+Tab", "Tab") },
+      { action: "select", source: kb.key("Enter") },
+      { action: "select", source: kb.key("Space") },
+      { action: "select", source: kb.key("Select") },
+    )
+  }
+  let pad = devices.gamepad
+  if (pad) {
+    out.push({ action: "navigate", source: pad.dpad }, { action: "navigate", source: pad.leftStick }, { action: "select", source: pad.button("south") })
+  }
+  return out
+}
+
+// Steps on a held value: once on the edge, again after NAV_REPEAT_DELAY,
+// then every NAV_REPEAT_INTERVAL until it reads null or changes (a change
+// restarts the delay). Runs under the calling scope: the effect and the
+// timer die with it.
+function repeating<T>(read: () => T | null, step: (value: T) => void): void {
+  let current: T | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let stop = () => {
+    if (timer == null) return
+    clearTimeout(timer)
+    timer = null
+  }
+  let later = (value: T, delay: number) => {
+    timer = setTimeout(() => {
+      step(value)
+      later(value, NAV_REPEAT_INTERVAL)
+    }, delay)
+  }
+  // The step reads focus and the candidates for itself, a snapshot, not a
+  // dependency: untracked so the strict-mode read diagnostic stays quiet.
+  createEffect(read, (value) => {
+    if (value === current) return
+    current = value
+    stop()
+    if (value === null) return
+    untrack(() => step(value))
+    later(value, NAV_REPEAT_DELAY)
+  })
+  onCleanup(stop)
+}
+
 // What "select" means per focusable node, registered by createPress's ref.
 // Only the controller path consults it - key activation reaches the focused
 // node by bubbling and never comes through here. Package-internal.
@@ -56,6 +151,15 @@ export function pushNavScope(node: { id: number }): () => void {
 }
 
 export interface FocusNavOptions {
+  /**
+   * The input map to consume the UI actions from: it must declare
+   * `navigate`, `cycle` and `select` with the kinds of `uiActions`, and the
+   * app binds it (uiBindings or its own) and spreads its handlers on the
+   * window. Without one the nav makes its own map bound to the standard set
+   * over the keyboard and every pad, which `nav.input` exposes for
+   * rebinding.
+   */
+  input?: InputMap<any>
   /**
    * Restricts reachable candidates to this node's subtree while it returns
    * one, overriding the default (the topmost open Modal, which traps
@@ -71,16 +175,23 @@ type Placed = { id: number; x: number; y: number }
 
 /**
  * Creates focus navigation over the `focusable` elements: spatial movement on
- * arrows/dpad, sequential on Tab/Shift+Tab. Attach the returned onKeyDown to
- * the window - keys arrive there only when no focused component consumed
- * them, so a focused TextInput keeps its caret keys:
+ * `navigate`, sequential on `cycle`, activation on `select`, consumed from an
+ * input map (see FocusNavOptions.input). Spread the map's handlers on the
+ * window - keys arrive there only when no focused component consumed them,
+ * so a focused TextInput keeps its caret keys:
  *
  *   let nav = createFocusNav()
- *   <window onKeyDown={nav.onKeyDown}>...
+ *   <window {...nav.handlers}>...
  *
- * Gamepad dpad/south edges are wired automatically (call it inside a
- * component/root scope). move/tab/activate are exposed for custom triggers.
+ * Call it inside a component/root scope: its effects and repeat timers live
+ * there. move/tab/activate are the verbs, for custom triggers.
  */
+let defaultMap = (): InputMap<UiActions> => {
+  let map = createInputMap(uiActions)
+  map.bind(uiBindings({ keyboard, gamepad: gamepad() }))
+  return map
+}
+
 export function createFocusNav(options?: FocusNavOptions) {
   let currentScope = () => options?.scope?.() ?? scopeStack()[scopeStack().length - 1]
 
@@ -157,9 +268,9 @@ export function createFocusNav(options?: FocusNavOptions) {
   }
 
   // Sequential step in reading order, wrapping at the ends. With no
-  // reachable focus it resumes near the last position; lacking one, Tab
-  // enters at the first element and Shift+Tab at the last (the step "wraps
-  // into" the set from either side).
+  // reachable focus it resumes near the last position; lacking one, a
+  // forward step enters at the first element and a backward one at the
+  // last (the step "wraps into" the set from either side).
   let tab = (delta: 1 | -1) => {
     let placed = reachable()
     if (placed.length === 0) return
@@ -173,9 +284,9 @@ export function createFocusNav(options?: FocusNavOptions) {
     focusCandidate(row[(i + delta + row.length) % row.length]!)
   }
 
-  // Controller select, and Enter reaching the window (nothing focused, or the
-  // focused node did not consume it): with no reachable focus the press lands
-  // focus instead of acting.
+  // The `select` press (Enter, the remote's center key, the pad's south
+  // button, whatever the app bound): runs the focused node's registered
+  // action; with no reachable focus the press lands focus instead of acting.
   let activate = () => {
     let placed = reachable()
     if (placed.length === 0) return
@@ -188,18 +299,6 @@ export function createFocusNav(options?: FocusNavOptions) {
     navActions.get(hit.id)?.()
   }
 
-  // Keyboard and TV remote. Arrows and Tab use key repeat (holding walks
-  // through candidates); activation ignores it. The remote center key's `key`
-  // is "Unidentified", so it is matched by code.
-  let onKeyDown = (e: KeyEvent) => {
-    if (e.key === "ArrowUp") move("up")
-    else if (e.key === "ArrowDown") move("down")
-    else if (e.key === "ArrowLeft") move("left")
-    else if (e.key === "ArrowRight") move("right")
-    else if (e.key === "Tab") tab(e.shiftKey ? -1 : 1)
-    else if ((e.key === "Enter" || e.code === "Select") && !e.repeat) activate()
-  }
-
   // The focused control vanishing (replaced by its own action, a screen
   // change) clears focus; hand it to the nearest successor so the ring
   // never disappears mid-navigation. Only when the node actually died: a
@@ -243,26 +342,26 @@ export function createFocusNav(options?: FocusNavOptions) {
     },
   )
 
-  // Gamepads: edge-detect the dpad and south button on the union of all pads'
-  // pressed buttons. The sticky replay on the first read seeds the baseline
-  // (a button already held at creation fires its edge once).
-  let prevButtons = new Set<string>()
-  createEffect(
-    () => gamepads(),
-    (pads) => {
-      let now = new Set<string>()
-      for (let pad of pads) for (let b of pad?.buttons ?? []) now.add(b)
-      for (let b of now) {
-        if (prevButtons.has(b)) continue
-        if (b === "dpadUp") move("up")
-        else if (b === "dpadDown") move("down")
-        else if (b === "dpadLeft") move("left")
-        else if (b === "dpadRight") move("right")
-        else if (b === "south") activate()
-      }
-      prevButtons = now
-    },
-  )
+  // The map: the app's, checked for the UI actions, or the platform default.
+  let input: InputMap<any> = options?.input ?? defaultMap()
+  for (let [name, kind] of Object.entries(uiActions)) {
+    if (input.actions[name] !== kind) throw new Error(`createFocusNav: the input map needs a ${kind} action "${name}" (declare it with uiActions)`)
+  }
+  // The direction an action reads now, or null: the dominant axis of
+  // `navigate` past the threshold, the sign of `cycle`.
+  let direction = (): Direction | null => {
+    let [x, y] = input.value("navigate") as Vec2
+    if (Math.max(Math.abs(x), Math.abs(y)) < NAV_THRESHOLD) return null
+    if (Math.abs(x) > Math.abs(y)) return x > 0 ? "right" : "left"
+    return y > 0 ? "down" : "up"
+  }
+  let cycleStep = (): 1 | -1 | null => {
+    let v = input.value("cycle") as number
+    return v >= NAV_THRESHOLD ? 1 : v <= -NAV_THRESHOLD ? -1 : null
+  }
+  repeating(direction, move)
+  repeating(cycleStep, tab)
+  onCleanup(input.onPress("select", activate))
 
-  return { onKeyDown, move, tab, activate }
+  return { input, handlers: input.handlers, move, tab, activate }
 }

package/src/index.ts

@@ -9,7 +9,7 @@ export { createDocumentBuffer, plainDocument, ATOM, type Document, type Document
 export { ScrollView, type ScrollViewProps } from "./scroll-view"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
-export { createFocusNav, type FocusNavOptions } from "./focus-nav"
+export { createFocusNav, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
 export { Switch, type SwitchProps } from "./switch"
 export { Checkbox, type CheckboxProps } from "./checkbox"
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"

package/src/item.tsx

@@ -1,12 +1,13 @@
 import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { createPress, type PressState } from "./press"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor } from "./types"
+import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { colorFade, PressFeedback } from "./motion"
 
 export interface ItemProps extends TransitionProps {
   // Leading content: an icon, avatar, checkbox, ...
@@ -47,14 +48,6 @@ export function Item(props: ItemProps) {
   let press = createPress(props)
 
   let bg = () => styled().backgroundColor ?? (props.selected ? theme.color.surfaceAlt : "transparent")
-  let overlay = (s: PressState) =>
-    !interactive()
-      ? "transparent"
-      : s.pressed
-        ? theme.color.overlayPressed
-        : s.hovered && policy.interaction !== "touch"
-          ? theme.color.overlayHover
-          : "transparent"
   let radius = () => styled().borderRadius ?? theme.radius.sm
 
   // Resolved once via children(): the typeof probe and the mount site must
@@ -95,18 +88,22 @@ export function Item(props: ItemProps) {
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
-      <d-rect color={overlay(press.state())} radius={radius()} />
+      <d-rect transition={withTransitionDefaults(split().background, colorFade())} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
+      <PressFeedback
+        pressed={interactive() && press.pressed()}
+        hovered={interactive() && press.hovered() && policy.interaction !== "touch"}
+        radius={radius()}
+      />
       {props.startContent}
       <view flexDirection="column" flexGrow={1} flexShrink={1} gap={Math.round(space("sm") / 2)}>
         <Show when={labelIsText()} fallback={label()}>
-          <text color={theme.color.text} {...typeStyle("body")} maxLines={1}>
+          <text transition={colorFade()} color={theme.color.text} {...typeStyle("body")} maxLines={1}>
             {label()}
           </text>
         </Show>
         <Show when={props.description != null}>
           <Show when={descriptionIsText()} fallback={description()}>
-            <text color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
+            <text transition={colorFade()} color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
               {description()}
             </text>
           </Show>

package/src/modal.tsx

@@ -2,6 +2,7 @@ import { createPortal, onCleanup } from "@solidrt/core"
 import type { Color, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { pushNavScope } from "./focus-nav"
+import { colorFade, popupFade } from "./motion"
 
 export interface ModalProps {
   // Called when the backdrop (the area around the content) is pressed, unless
@@ -40,6 +41,9 @@ export function Modal(props: ModalProps) {
   let popNavScope: (() => void) | null = null
   onCleanup(() => popNavScope?.())
 
+  // The whole overlay (scrim and content together) fades in at mount and
+  // out on removal via popupFade; an exiting modal is hit-test invisible,
+  // so a press during the fade-out reaches what is behind it.
   return createPortal(
     <view
       ref={(n: { id: number }) => {
@@ -52,6 +56,8 @@ export function Modal(props: ModalProps) {
       bottom={0}
       alignItems="center"
       justifyContent="center"
+      opacity={1}
+      transition={popupFade()}
     >
       <view
         position="absolute"
@@ -61,7 +67,7 @@ export function Modal(props: ModalProps) {
         bottom={0}
         onPointerDown={dismiss}
       >
-        <d-rect color={props.backdropColor ?? theme.color.scrim} />
+        <d-rect transition={colorFade()} color={props.backdropColor ?? theme.color.scrim} />
       </view>
       {props.children}
     </view>

package/src/motion.tsx

@@ -0,0 +1,122 @@
+import { withAlpha } from "@solidrt/core"
+import type { Transition } from "@solidrt/core"
+import { theme } from "./theme"
+import { policy } from "./policy"
+
+// The components' built-in motion. Every default transition in the package
+// is declared through these helpers, so timing comes from theme.motion and
+// the whole set degrades together under policy.motion: "reduced" keeps the
+// fades (color and opacity carry state; a fade is not movement) but snaps
+// everything that travels or scales, "none" snaps it all. Each helper
+// returns undefined while its motion is off. A caller's `transition` prop
+// overrides a default per property (see withTransitionDefaults in types.ts)
+// and `transition={null}` suppresses the defaults outright.
+
+// Scale a pressed control shrinks to; the release springs back.
+const PRESS_SCALE = 0.97
+// Overshoot of the travel springs (switch knob, segmented indicator): a
+// touch of bounce reads as physical without wobble.
+const TRAVEL_BOUNCE = 0.15
+// Fraction of its size a state mark (checkmark, radio dot) grows in from.
+const MARK_FROM_SCALE = 0.4
+
+/** State-change fade for colors and opacity - also the theme cross-fade. */
+export function fadeMotion(): Transition | undefined {
+  if (policy.motion === "none") return undefined
+  return { duration: theme.motion.base, curve: "ease-out" } satisfies Transition
+}
+
+/** Press/hover feedback fade (the overlay tints): faster than fadeMotion so a press reads as immediate. */
+export function feedbackFade(): Transition | undefined {
+  if (policy.motion === "none") return undefined
+  return { duration: theme.motion.fast, curve: "ease-out" } satisfies Transition
+}
+
+/** Travel spring for a control's moving part. Movement, so "reduced" snaps it too. */
+export function travelMotion(bounce: number = TRAVEL_BOUNCE): Transition | undefined {
+  if (policy.motion !== "normal") return undefined
+  return { duration: theme.motion.slow, bounce } satisfies Transition
+}
+
+/** Default `{ color: fade }` declaration for a themed paint node. */
+export function colorFade(): { color: Transition } | undefined {
+  let fade = fadeMotion()
+  return fade === undefined ? undefined : { color: fade }
+}
+
+/** Default `{ scale: spring }` declaration for a control that shrinks on press. */
+export function scaleFeedback(): { scale: Transition } | undefined {
+  if (policy.motion !== "normal") return undefined
+  return { scale: { duration: theme.motion.fast } satisfies Transition }
+}
+
+/** The scale a pressed control renders at: PRESS_SCALE under full motion, 1 otherwise (a scale snap is worse than none; the overlay tint still marks the press). */
+export function pressScale(pressed: boolean): number {
+  return pressed && policy.motion === "normal" ? PRESS_SCALE : 1
+}
+
+/**
+ * Enter/exit fade for an overlay surface mounted in place (modal, bottom
+ * sheet): fades in at mount, fades out on removal. The node must set
+ * `opacity` explicitly - only carried properties animate.
+ */
+export function popupFade(): { opacity: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  return { opacity: { duration: theme.motion.base, curve: "ease-out", from: 0, exit: 0 } satisfies Transition }
+}
+
+/**
+ * Exit-only fade for popups that park offscreen until measured (tooltip,
+ * menus): they fade in by writing opacity 0 -> 1 once positioned - a
+ * mount-time `from` would play unseen - and fade out on removal.
+ */
+export function popupFadeOut(): { opacity: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  return { opacity: { duration: theme.motion.base, curve: "ease-out", exit: 0 } satisfies Transition }
+}
+
+/**
+ * Enter/exit pop for a control's state mark (checkbox check, radio dot),
+ * declared on a wrapper view that sets `opacity={1} scale={1}`: it fades
+ * in/out, with a small scale pop under full motion only.
+ */
+export function markMotion(): { opacity: Transition; scale?: Transition } | undefined {
+  if (policy.motion === "none") return undefined
+  let declaration: { opacity: Transition; scale?: Transition } = {
+    opacity: { duration: theme.motion.base, curve: "ease-out", from: 0, exit: 0 } satisfies Transition,
+  }
+  if (policy.motion === "normal")
+    declaration.scale = {
+      duration: theme.motion.slow,
+      bounce: TRAVEL_BOUNCE,
+      from: MARK_FROM_SCALE,
+      exit: MARK_FROM_SCALE,
+    } satisfies Transition
+  return declaration
+}
+
+/**
+ * The hover/pressed tint every pressable control draws over its own fill.
+ * One always-mounted rect whose hidden state is the same tint at alpha 0,
+ * not "transparent": a fade from transparent black would darken a dark
+ * scheme's white tint midway. Pressed swaps in the deeper tint; showing,
+ * hiding and the pressed/hover swap all fade at feedback speed.
+ */
+export function PressFeedback(props: {
+  pressed?: boolean
+  hovered?: boolean
+  radius?: number | [number, number, number, number]
+}) {
+  let tint = () => (props.pressed ? theme.color.overlayPressed : theme.color.overlayHover)
+  let fade = () => {
+    let f = feedbackFade()
+    return f === undefined ? undefined : { color: f }
+  }
+  return (
+    <d-rect
+      transition={fade()}
+      color={props.pressed || props.hovered ? tint() : withAlpha(tint(), 0)}
+      radius={props.radius}
+    />
+  )
+}

package/src/nav-shell.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Switch, Match, For } from "@solidrt/core"
+import { createSignal, Switch, Match, For, withAlpha } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
@@ -7,6 +7,7 @@ import { space } from "./spacing"
 import { typeStyle } from "./typography"
 import type { TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
+import { colorFade, PressFeedback } from "./motion"
 
 export interface NavItem {
   value: unknown
@@ -44,12 +45,11 @@ export function NavShell(props: NavShellProps) {
   }
 
   let labelColor = (item: NavItem) => (item.value === value() ? theme.color.primary : theme.color.textMuted)
-  let itemBg = (item: NavItem, hovered: boolean) =>
-    item.value === value()
-      ? theme.color.surfaceAlt
-      : hovered && policy.interaction !== "touch"
-        ? theme.color.overlayHover
-        : "transparent"
+  // The selection fill: the surfaceAlt tint at alpha 0 while unselected, so
+  // selecting fades it in (same trap as PressFeedback: a fade from
+  // "transparent" would pass through the wrong hue).
+  let itemBg = (item: NavItem) =>
+    item.value === value() ? theme.color.surfaceAlt : withAlpha(theme.color.surfaceAlt, 0)
 
   // Icon over a small label, centered; shared by the tab bar and the rail.
   let StackedItem = (p: { item: NavItem; padY: number; layout?: LayoutProps }) => {
@@ -67,9 +67,14 @@ export function NavShell(props: NavShellProps) {
         {...p.layout}
         {...press.handlers}
       >
-        <d-rect color={itemBg(p.item, press.hovered())} radius={theme.radius.sm} />
+        <d-rect transition={colorFade()} color={itemBg(p.item)} radius={theme.radius.sm} />
+        <PressFeedback
+          pressed={press.pressed()}
+          hovered={press.hovered() && policy.interaction !== "touch" && p.item.value !== value()}
+          radius={theme.radius.sm}
+        />
         {p.item.icon}
-        <text color={labelColor(p.item)} {...typeStyle("caption")}>
+        <text transition={colorFade()} color={labelColor(p.item)} {...typeStyle("caption")}>
           {p.item.label}
         </text>
       </view>
@@ -79,7 +84,7 @@ export function NavShell(props: NavShellProps) {
   let Tabs = () => (
     <view flexDirection="column" flexShrink={0}>
       <view flexDirection="row">
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} layout={{ flex: 1 }} />}
         </For>
@@ -90,7 +95,7 @@ export function NavShell(props: NavShellProps) {
   let Rail = () => (
     <view flexDirection="row" flexShrink={0}>
       <view flexDirection="column" width={theme.size.navRail} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>{(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} />}</For>
       </view>
     </view>
@@ -99,7 +104,7 @@ export function NavShell(props: NavShellProps) {
   let Sidebar = () => (
     <view flexDirection="row" flexShrink={0}>
       <view flexDirection="column" width={theme.size.navSidebar} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
-        <d-rect color={theme.color.surface} />
+        <d-rect transition={colorFade()} color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => {
             let press = createPress({ onPress: () => select(item.value) })
@@ -118,9 +123,15 @@ export function NavShell(props: NavShellProps) {
                 marginRight={theme.spacing.sm}
                 {...press.handlers}
               >
-                <d-rect color={itemBg(item, press.hovered())} radius={theme.radius.sm} />
+                <d-rect transition={colorFade()} color={itemBg(item)} radius={theme.radius.sm} />
+                <PressFeedback
+                  pressed={press.pressed()}
+                  hovered={press.hovered() && policy.interaction !== "touch" && item.value !== value()}
+                  radius={theme.radius.sm}
+                />
                 {item.icon}
                 <text
+                  transition={colorFade()}
                   color={item.value === value() ? theme.color.primary : theme.color.text}
                   {...typeStyle("body")}
                 >

package/src/press.ts

@@ -45,12 +45,12 @@ export interface PressOptions {
 // changes live. The host view must attach `ref` for retention bounds; without
 // it every position counts as inside (the up always fires).
 //
-// Keyboard/remote activation: when the host node holds focus (spatial nav or
-// setFocus), Enter, Space, or the remote center key fires onPress and stops
-// propagating; `focused` mirrors the node's focus for styling (a ring). The
-// ref also registers onPress as the node's nav action, the path a
-// controller's south button activates through (see focus-nav.ts). Key
-// activation shows no pressed state - the focus ring is the feedback.
+// Keyboard/remote/controller activation reads no key here: the ref registers
+// onPress as the node's nav action, and the focus navigation's `select`
+// action (Enter, Space, the remote center key, the pad's south button, or
+// whatever the app bound) runs it while the node holds focus (see
+// focus-nav.ts). `focused` mirrors the node's focus for styling (a ring).
+// Key activation shows no pressed state - the focus ring is the feedback.
 // The arena and the movement recognizers (createPan, createTransform) live in
 // core; press stays here because it couples to this package's focus-nav
 // (registerNavAction) and nothing outside components needs it yet
@@ -187,11 +187,6 @@ export function createPress(options: PressOptions) {
       options.onPointerLeave?.(e)
     },
     onKeyDown: (e: KeyEvent) => {
-      // The remote center key's `key` is "Unidentified"; match its code.
-      if ((e.key === "Enter" || e.key === " " || e.code === "Select") && !e.repeat && !options.disabled) {
-        e.stopPropagation()
-        activate()
-      }
       options.onKeyDown?.(e)
     },
     onFocus: () => {