@solidrt/components 0.0.40 → 0.0.42

package/AGENTS.md

@@ -23,6 +23,14 @@ Most components group props into two objects, plus top-level event handlers:
   transform `x`/`y`/`rotate`/`scale`.
 - Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, NOT
   inside `layout`/`style`.
+- Focus navigation: `createFocusNav` moves real focus across `focusable`
+  elements (Button is focusable by default; Pressable opt-in) - spatially on
+  arrows/dpad, sequentially on Tab/Shift+Tab (reading order, wrapping).
+  Attach its onKeyDown to the window; gamepad dpad/south wire automatically.
+  A focused press control activates on Enter/Space/remote-select via
+  createPress and draws Button's ring under `policy.focusRing` (true when a
+  keyboard OR gamepad/remote is present). An open Modal traps navigation
+  inside itself automatically.
 
 ## Exports
 
@@ -75,13 +83,14 @@ Most components group props into two objects, plus top-level event handlers:
   `moduleSize`/`margin`/`radius`/`level` (L/M/Q/H). Paints black-on-white by
   default (NOT the theme) to stay scannable; override `color`/`background` only
   if contrast holds. Deps on `qrcode-generator`.
-- `Icon` - thin themed wrapper over the core `<svg>` document primitive. `src`
-  is an SVG string (an imported `.svg` asset, a `lucide-static` string export, or
-  an inline literal); `size` sets a square box (default 24); `color` drives
-  `currentColor` (default `theme.color.text`). Carries no icon set of its own and
-  no icon-name registry: pass the SVG string in, so any currentColor set (Lucide,
-  Feather, Heroicons) works and only used icons are bundled. Multi-color
-  documents keep their own fills. Reach for `<svg>` directly for a non-square box.
+- `Icon` - thin themed wrapper over the core `parseSvg` primitive (draws mapped
+  to `<d-path>` in a `viewBox`-fitted box). `src` is an SVG string (an imported
+  `.svg` asset, a `lucide-static` string export, or an inline literal); `size`
+  sets a square box (default 24); `color` drives `currentColor` (default
+  `theme.color.text`). Carries no icon set of its own and no icon-name registry:
+  pass the SVG string in, so any currentColor set (Lucide, Feather, Heroicons)
+  works and only used icons are bundled. Multi-color documents keep their own
+  fills. Reach for `parseSvg` directly for a non-square box.
 - `SafeArea` - pads children clear of system UI (notches, status bars); top and
   bottom on by default, pass `false`/a number per edge.
 - `theme` / `setTheme` / `darkTheme` / `lightTheme` - shared REACTIVE appearance

package/README.md

@@ -246,7 +246,8 @@ function NameField() {
 | `placeholder`  | `string`                  | -       | Shown when value is empty and the field is not focused.      |
 | `maxLength`    | `number`                  | -       | Truncates input to this length.                              |
 | `disabled`     | `boolean`                 | `false` | Ignores pointer and key events when true.                    |
-| `autoFocus`    | `boolean`                 | `false` | Focuses on mount.                                            |
+| `autoFocus`    | `boolean`                 | `false` | Focuses on mount (the on-screen keyboard waits for a tap).   |
+| `hints`        | `TextInputHints`          | -       | IME behavior: keyboard type, capitalization, autocorrect.    |
 | `layout`       | `LayoutProps`             | -       | Layout properties (e.g. `width`).                            |
 | `style`        | `StyleProps`              | -       | Overrides theme colors, border, and radius.                  |
 
@@ -359,13 +360,31 @@ import { Button } from "@solidrt/components"
 
 **Props**
 
-| Prop       | Type          | Description                                    |
-| ---------- | ------------- | ---------------------------------------------- |
-| `onPress`  | `() => void`  | Fires on a completed press.                    |
-| `disabled` | `boolean`     | Mutes colors and ignores presses.              |
-| `layout`   | `LayoutProps` | Overrides padding/sizing.                      |
-| `style`    | `StyleProps`  | Overrides background, radius, etc.             |
-| `children` | `any`         | Label text, or custom content.                 |
+| Prop        | Type          | Description                                              |
+| ----------- | ------------- | -------------------------------------------------------- |
+| `onPress`   | `() => void`  | Fires on a completed press.                              |
+| `disabled`  | `boolean`     | Mutes colors and ignores presses.                        |
+| `focusable` | `boolean`     | Focus-navigation candidacy; defaults to `true`.          |
+| `layout`    | `LayoutProps` | Overrides padding/sizing.                                |
+| `style`     | `StyleProps`  | Overrides background, radius, etc.                       |
+| `children`  | `any`         | Label text, or custom content.                           |
+
+A focused Button (see `createFocusNav`) wears a focus ring under the `focusRing` policy and activates on Enter, Space, or a remote's center key.
+
+### createFocusNav
+
+Focus navigation for pointer-free control (TV remote, keyboard, gamepad), moving focus across the elements declaring `focusable`. Two movement types over the same candidates: spatial (arrow keys, dpad) picks the nearest candidate in the pressed direction by on-screen boxes, and sequential (Tab / Shift+Tab) walks visual reading order - rows top to bottom, left to right - wrapping at the ends. Enter / remote center / gamepad south activates the focused control. Nothing is focused until the first navigation press; pointer input works unchanged throughout. When the focused control disappears (an action replacing it, a screen change), focus lands on the nearest candidate to where it sat as soon as the successor is laid out - the ring follows a Disconnect button into the Connect button that replaces it. A deliberate blur (tapping outside, dismissing the keyboard) stays blurred; the next press resumes at the nearest candidate.
+
+```jsx
+import { createFocusNav } from "@solidrt/components"
+
+function App() {
+  let nav = createFocusNav()
+  return <window onKeyDown={nav.onKeyDown}>...</window>
+}
+```
+
+Attaching `nav.onKeyDown` on the window is what keeps it cooperative: key events bubble from the focused node, so a focused TextInput keeps its arrow keys and navigation only sees what nothing else consumed. Gamepad dpad/south are wired automatically. An open `Modal` traps navigation inside itself with no extra wiring (topmost wins when stacked); pass `scope: () => nodeOrNull` to trap into some other subtree instead. `move`/`tab`/`activate` are exposed for custom triggers.
 
 ### Switch
 
@@ -598,7 +617,7 @@ import { QrCode } from "@solidrt/components"
 
 ### Icon
 
-A thin themed wrapper over the core `<svg>` primitive. `src` is a whole SVG document as a string; the component draws it in a square box and, for monochrome icons that stroke/fill with `currentColor`, recolors it from the theme. It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `<svg>` directly.
+A thin themed wrapper over the core `parseSvg` primitive. `src` is a whole SVG document as a string; the component parses it once (memoized), maps the draws to `<d-path>` in a square `viewBox`-fitted box and, for monochrome icons that stroke/fill with `currentColor`, recolors it from the theme. It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `parseSvg` directly.
 
 Icons are just SVG strings. Import them as assets (`import House from "lucide-static/icons/house.svg"`, resolved to a string), pull them from a string export, or inline a literal:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.26",
-    "@solidrt/core": "0.0.40"
+    "@solidrt/core": "0.0.42"
   }
 }

package/src/button.tsx

@@ -24,6 +24,9 @@ export interface ButtonProps {
   size?: ButtonSize
   onPress?: () => void
   disabled?: boolean
+  // Focus-navigation candidacy (spatial nav, TV remotes); on by default.
+  // Disabled buttons are never candidates.
+  focusable?: boolean
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
@@ -39,6 +42,9 @@ const SIZE_WIDTH: Record<ButtonSize, number> = { sm: 88, md: 120, lg: 160 }
 // nodes are recreated. Override the box via style and the padding/sizing via
 // layout. A caller-set backgroundColor disables the hover tint: we cannot know
 // its hover variant. When disabled, it takes no pointer events at all.
+// Focus (spatial nav) draws a ring under the focusRing policy, text-colored
+// rather than primary so it stays visible on primary-filled buttons; Enter/
+// Space/remote-select activates (handled by createPress).
 export function Button(props: ButtonProps) {
   // Fill, hover fill, and label color per variant, read reactively from the
   // theme. No variant draws a border.
@@ -84,6 +90,7 @@ export function Button(props: ButtonProps) {
   let press = createPress(props)
   let style = () => ({
     ...props.style,
+    ...(press.focused() && policy.focusRing ? { borderWidth: 2, borderColor: theme.color.text } : {}),
     backgroundColor: bg(press.state()),
     borderRadius: radius(),
     // Always a number: a scale that flips from a number back to undefined
@@ -114,6 +121,7 @@ export function Button(props: ButtonProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      focusable={(props.focusable ?? true) && props.disabled !== true}
       pointerEvents={props.disabled ? "none" : undefined}
     >
       <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />

package/src/focus-nav.ts

@@ -0,0 +1,268 @@
+import {
+  createEffect,
+  createSignal,
+  gamepads,
+  getBoundingBoxViewport,
+  getFocusables,
+  focusedNode,
+  getNodePath,
+  onLayout,
+  setFocus,
+} from "@solidrt/core"
+import type { KeyEvent } 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
+//   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
+//   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
+// pointer input: nothing is focused until the first navigation press, and
+// pointer presses work unchanged throughout.
+
+type Direction = "up" | "down" | "left" | "right"
+
+// 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.
+let navActions = new Map<number, () => void>()
+
+export function registerNavAction(nodeId: number, action: () => void): () => void {
+  navActions.set(nodeId, action)
+  return () => {
+    if (navActions.get(nodeId) === action) navActions.delete(nodeId)
+  }
+}
+
+// Open modals register their container here, most recent on top; the top of
+// the stack is every nav's default scope, so modals trap navigation with no
+// per-app wiring (see Modal). An explicit `scope` option overrides the stack.
+// ownedWrite: the pop runs from onCleanup, inside disposal.
+let [scopeStack, setScopeStack] = createSignal<{ id: number }[]>([], { ownedWrite: true })
+
+export function pushNavScope(node: { id: number }): () => void {
+  setScopeStack((s) => [...s, node])
+  return () => setScopeStack((s) => s.filter((n) => n !== node))
+}
+
+export interface FocusNavOptions {
+  /**
+   * Restricts reachable candidates to this node's subtree while it returns
+   * one, overriding the default (the topmost open Modal, which traps
+   * navigation automatically); null/undefined falls back to that default.
+   * When a scope appears while focus sits outside it, focus is pulled inside
+   * (or cleared until the scope has been laid out), so a bubbled Enter cannot
+   * reach a control behind the modal.
+   */
+  scope?: () => { id: number } | null | undefined
+}
+
+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:
+ *
+ *   let nav = createFocusNav()
+ *   <window onKeyDown={nav.onKeyDown}>...
+ *
+ * Gamepad dpad/south edges are wired automatically (call it inside a
+ * component/root scope). move/tab/activate are exposed for custom triggers.
+ */
+export function createFocusNav(options?: FocusNavOptions) {
+  let currentScope = () => options?.scope?.() ?? scopeStack()[scopeStack().length - 1]
+
+  // The currently reachable candidates with their centers: declared, laid
+  // out, and inside the scope's subtree while one is set.
+  let reachable = (): Placed[] => {
+    let scopeNode = currentScope()
+    let placed: Placed[] = []
+    for (let id of getFocusables()) {
+      if (scopeNode && !getNodePath(id).includes(scopeNode.id)) continue
+      let b = getBoundingBoxViewport({ id })
+      if (b) placed.push({ id, x: b.x + b.width / 2, y: b.y + b.height / 2 })
+    }
+    return placed
+  }
+
+  // Reading order: rows top to bottom (1px tie tolerance), left to right
+  // within a row.
+  let ordered = (placed: Placed[]): Placed[] =>
+    [...placed].sort((a, b) => (Math.abs(a.y - b.y) <= 1 ? a.x - b.x : a.y - b.y))
+
+  // Where focus last sat (a candidate's center). Navigation that finds
+  // nothing focused resumes at the nearest candidate instead of restarting
+  // in reading order: activating a control that is then replaced in place
+  // (the dev card's Disconnect swapping to Connect) destroys the focused
+  // node and clears focus, and the next press should land on the successor,
+  // not the top-left of the screen.
+  let lastPos: { x: number; y: number } | null = null
+
+  let focusCandidate = (p: Placed) => {
+    lastPos = { x: p.x, y: p.y }
+    setFocus(p.id)
+  }
+
+  // Entry focus with no history (very first press) or where predictability
+  // beats continuity (a modal opening): the first element in reading order.
+  let focusFirst = (placed: Placed[]) => {
+    focusCandidate(ordered(placed)[0]!)
+  }
+
+  let focusEntry = (placed: Placed[]) => {
+    if (!lastPos) return focusFirst(placed)
+    let { x, y } = lastPos
+    let best = placed.reduce((a, b) =>
+      (b.x - x) ** 2 + (b.y - y) ** 2 < (a.x - x) ** 2 + (a.y - y) ** 2 ? b : a,
+    )
+    focusCandidate(best)
+  }
+
+  let move = (dir: Direction) => {
+    let placed = reachable()
+    if (placed.length === 0) return
+    let focused = focusedNode()
+    let from = focused != null ? placed.find((p) => p.id === focused) : undefined
+    if (!from) return focusEntry(placed)
+    let best: Placed | null = null
+    let bestScore = Infinity
+    for (let p of placed) {
+      if (p === from) continue
+      let dx = p.x - from.x
+      let dy = p.y - from.y
+      // Progress along the pressed direction is required; among candidates the
+      // nearest mostly-aligned one wins (cross-axis distance weighs double).
+      let ahead = dir === "up" ? -dy : dir === "down" ? dy : dir === "left" ? -dx : dx
+      if (ahead <= 1) continue
+      let across = Math.abs(dir === "up" || dir === "down" ? dx : dy)
+      let score = ahead + 2 * across
+      if (score < bestScore) {
+        bestScore = score
+        best = p
+      }
+    }
+    if (best) focusCandidate(best)
+  }
+
+  // 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).
+  let tab = (delta: 1 | -1) => {
+    let placed = reachable()
+    if (placed.length === 0) return
+    let row = ordered(placed)
+    let focused = focusedNode()
+    let i = focused != null ? row.findIndex((p) => p.id === focused) : -1
+    if (i < 0) {
+      if (lastPos) return focusEntry(placed)
+      return focusCandidate(row[delta === 1 ? 0 : row.length - 1]!)
+    }
+    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.
+  let activate = () => {
+    let placed = reachable()
+    if (placed.length === 0) return
+    let focused = focusedNode()
+    let hit = focused != null ? placed.find((p) => p.id === focused) : undefined
+    if (!hit) return focusEntry(placed)
+    // Refresh the resume position before acting: the action may replace the
+    // control (and take the focus) with it.
+    lastPos = { x: hit.x, y: hit.y }
+    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
+  // deliberate blur (outside tap, keyboard dismissal) leaves focus empty,
+  // and the two are told apart by whether the previous node still resolves
+  // (a destroyed node is gone from the tree by effect time - empty path).
+  // The landing waits for the next layout: the successor was mounted this
+  // very tick, so it has no box until the frame the swap itself scheduled.
+  let prevFocused: number | null = null
+  let refocusPending = false
+  createEffect(
+    () => focusedNode(),
+    (id) => {
+      let prev = prevFocused
+      prevFocused = id
+      if (id != null || prev == null) return
+      refocusPending = getNodePath(prev).length === 0
+    },
+  )
+  onLayout(() => {
+    if (!refocusPending) return
+    refocusPending = false
+    if (focusedNode() != null) return
+    let placed = reachable()
+    if (placed.length > 0) focusEntry(placed)
+  })
+
+  // A scope arriving (modal opening) pulls focus inside it: focus left on an
+  // outside control would still receive Enter directly (bubbling), bypassing
+  // the trap. A scope mounted this very tick has no boxes yet - then focus
+  // just clears, and the first navigation press lands inside.
+  createEffect(
+    () => currentScope(),
+    (scopeNode) => {
+      if (!scopeNode) return
+      let focused = focusedNode()
+      if (focused != null && getNodePath(focused).includes(scopeNode.id)) return
+      let placed = reachable()
+      if (placed.length > 0) focusFirst(placed)
+      else if (focused != null) setFocus(null)
+    },
+  )
+
+  // 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
+    },
+  )
+
+  return { onKeyDown, move, tab, activate }
+}

package/src/icon.tsx

@@ -1,3 +1,4 @@
+import { createMemo, parseSvg, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 
@@ -16,22 +17,28 @@ export interface IconProps {
 
 const SIZE = 24
 
-// A themed wrapper over the core <svg> document primitive: a square box sized to
-// `size` and colored from the theme by default. This is the only value it adds
-// over `<svg src>` directly, so reach for the primitive when you need a
-// non-square box or want no theme coupling.
+// A themed wrapper over parseSvg: the document parsed once per src/color (a
+// memo), its draws mapped to <d-path> in a square viewBox-fitted box colored
+// from the theme by default. That is the only value it adds, so reach for
+// parseSvg plus your own <view viewBox> when you need a non-square box or
+// want no theme coupling. The plain repaintBoundary keeps the static subtree
+// from re-recording alongside animating siblings; pointerEvents="all" makes
+// the box one hit unit (and skips per-path outline tests) - an icon's shapes
+// are never individual targets.
 export function Icon(props: IconProps) {
   let size = () => props.size ?? SIZE
+  let doc = createMemo(() => parseSvg(props.src, { color: props.color ?? theme.color.text }))
 
   return (
-    <view repaintBoundary>
-      <svg
-        width={size()}
-        height={size()}
-        src={props.src}
-        color={props.color ?? theme.color.text}
-        {...props.layout}
-      />
+    <view
+      repaintBoundary
+      pointerEvents="all"
+      width={size()}
+      height={size()}
+      viewBox={[doc().width, doc().height]}
+      {...props.layout}
+    >
+      <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>
     </view>
   )
 }

package/src/index.ts

@@ -7,6 +7,7 @@ export { TextInput, type TextInputProps } from "./text-input"
 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 { Switch, type SwitchProps } from "./switch"
 export { Checkbox, type CheckboxProps } from "./checkbox"
 export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio"

package/src/modal.tsx

@@ -1,6 +1,7 @@
-import { createPortal } from "@solidrt/core"
+import { createPortal, onCleanup } from "@solidrt/core"
 import type { Color, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
+import { pushNavScope } from "./focus-nav"
 
 export interface ModalProps {
   // Called when the backdrop (the area around the content) is pressed, unless
@@ -34,8 +35,16 @@ export function Modal(props: ModalProps) {
     if (props.dismissable !== false) props.onClose?.()
   }
 
+  // While mounted, the modal is a focus-navigation trap: its container tops
+  // the nav scope stack, so createFocusNav only reaches controls inside it.
+  let popNavScope: (() => void) | null = null
+  onCleanup(() => popNavScope?.())
+
   return createPortal(
     <view
+      ref={(n: { id: number }) => {
+        popNavScope = pushNavScope(n)
+      }}
       position="absolute"
       top={0}
       left={0}

package/src/policy.ts

@@ -1,4 +1,4 @@
-import { capabilities, env, createSignal } from "@solidrt/core"
+import { capabilities, env, createSignal, gamepads } from "@solidrt/core"
 import type { Capabilities } from "@solidrt/core"
 
 // Policies: how components should behave. Derived from capabilities by a
@@ -56,7 +56,10 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     interaction,
     density: interaction === "desktop" ? "compact" : "comfortable",
     motion: "normal",
-    focusRing: caps.keyboardNav,
+    // Any focus-driving input warrants the ring: a keyboard, or a gamepad -
+    // which includes TV remotes, which register as gamepads and would
+    // otherwise navigate ringless on keyboard-free TVs.
+    focusRing: caps.keyboardNav || gamepads().some((p) => p != null),
     textScale: env.textScale,
     textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
     navigation:

package/src/press.ts

@@ -1,20 +1,25 @@
-import { createSignal, onSettled, getBoundingBoxViewport } from "@solidrt/core"
-import type { PointerEvent } from "@solidrt/core"
+import { createSignal, createMemo, onSettled, focusedNode, getBoundingBoxViewport } from "@solidrt/core"
+import type { PointerEvent, KeyEvent } from "@solidrt/core"
 import { claim, release } from "./arena"
+import { registerNavAction } from "./focus-nav"
 
-// A live view of a recognizer's state, not a snapshot: both fields are getters,
+// A live view of a recognizer's state, not a snapshot: the fields are getters,
 // so a consumer that reads one inside a JSX prop or child expression tracks that
 // signal there and nothing else re-runs. Read them in those positions, not
 // eagerly into a local, or the read lands in whatever scope destructured it.
-export type PressState = { pressed: boolean; hovered: boolean }
+export type PressState = { pressed: boolean; hovered: boolean; focused: boolean }
 
 export interface PressOptions {
   onPress?: () => void
+  disabled?: boolean
   onPointerDown?: (e: PointerEvent) => void
   onPointerUp?: (e: PointerEvent) => void
   onPointerMove?: (e: PointerEvent) => void
   onPointerEnter?: (e: PointerEvent) => void
   onPointerLeave?: (e: PointerEvent) => void
+  onKeyDown?: (e: KeyEvent) => void
+  onFocus?: () => void
+  onBlur?: () => void
 }
 
 // The press state machine shared by the pressable components. onPress fires on
@@ -34,6 +39,13 @@ export interface PressOptions {
 // at event time, so passing a component's reactive props object keeps handler
 // 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.
 // Deliberately framework-agnostic (no theme, no styling): a candidate for
 // promotion into core once the recognizer family grows
 // (okf/plans/component-gestures.md).
@@ -41,6 +53,18 @@ export function createPress(options: PressOptions) {
   let [pressed, setPressed] = createSignal(false)
   let [hovered, setHovered] = createSignal(false)
   let node: { id: number } | null = null
+  let unregisterNav: (() => void) | null = null
+
+  // Focus is derived from core's reactive focus rather than tracked through
+  // the onFocus/onBlur handlers - one source of truth. Memoized so a focus
+  // move propagates into styling only for the two controls whose value flips.
+  // focusedNode() is read FIRST, unconditionally: the memo may first compute
+  // before the ref has set `node`, and short-circuiting past the read would
+  // leave the memo with no dependency, frozen false forever.
+  let focused = createMemo(() => {
+    let id = focusedNode()
+    return id != null && id === node?.id
+  })
   // The pointer this recognizer is tracking while a press is in flight, and
   // the retention state at the last move (read on up; the signal itself is
   // not readable same-dispatch because writes flush on the microtask).
@@ -62,10 +86,17 @@ export function createPress(options: PressOptions) {
     get hovered() {
       return hovered()
     },
+    get focused() {
+      return focused()
+    },
   }
   let state = (): PressState => live
   let ref = (n: { id: number }) => {
     node = n
+    unregisterNav?.()
+    unregisterNav = registerNavAction(n.id, () => {
+      if (!options.disabled) options.onPress?.()
+    })
   }
 
   let within = (e: PointerEvent) => {
@@ -88,7 +119,10 @@ export function createPress(options: PressOptions) {
 
   // A press abandoned mid-flight (unmount during a drag) must not leave its
   // claim behind, or that pointer id could never press anything again.
-  onSettled(() => disengage)
+  onSettled(() => () => {
+    disengage()
+    unregisterNav?.()
+  })
 
   let handlers = {
     onPointerDown: (e: PointerEvent) => {
@@ -123,7 +157,21 @@ export function createPress(options: PressOptions) {
       setHovered(false)
       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()
+        options.onPress?.()
+      }
+      options.onKeyDown?.(e)
+    },
+    onFocus: () => {
+      options.onFocus?.()
+    },
+    onBlur: () => {
+      options.onBlur?.()
+    },
   }
 
-  return { pressed, hovered, state, ref, handlers, cancel }
+  return { pressed, hovered, focused, state, ref, handlers, cancel }
 }

package/src/pressable.tsx

@@ -19,7 +19,10 @@ export interface PressableProps extends PointerProps {
 }
 
 // A pressable box: the createPress semantics (see press.ts) on a styled view.
-// When disabled, it takes no pointer events at all.
+// When disabled, it takes no pointer events at all. Focus navigation is
+// opt-in via `focusable` (Button turns it on by default): a focused Pressable
+// activates on Enter/Space/remote-select and exposes `focused` through the
+// press state for the caller's ring styling.
 export function Pressable(props: PressableProps) {
   let press = createPress(props)
 
@@ -63,11 +66,12 @@ export function Pressable(props: PressableProps) {
       onPointerUp={press.handlers.onPointerUp}
       onPointerMove={press.handlers.onPointerMove}
       onWheel={props.onWheel}
-      onFocus={props.onFocus}
-      onBlur={props.onBlur}
-      onKeyDown={props.onKeyDown}
+      onFocus={press.handlers.onFocus}
+      onBlur={press.handlers.onBlur}
+      onKeyDown={press.handlers.onKeyDown}
       onKeyUp={props.onKeyUp}
       onTextInput={props.onTextInput}
+      focusable={props.focusable === true && props.disabled !== true}
       pointerEvents={props.disabled ? "none" : props.pointerEvents}
     >
       {hasBackground() ? (

package/src/radio.tsx

@@ -103,7 +103,7 @@ export function Radio(props: RadioProps) {
         <d-rect color={props.style?.backgroundColor ?? "transparent"} radius={props.style?.borderRadius} />
       </Show>
       <view width={ring()} height={ring()}>
-        <d-oval x={1} y={1} w={ring() - 2} h={ring() - 2} drawStyle="stroke" color={ringColor()} strokeWidth={2} />
+        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={2} />
         <Show when={selected()}>
           <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
         </Show>

package/src/text-input.tsx

@@ -1,6 +1,17 @@
-import { createEffect, createSignal, onCleanup, measureText, setFocus } from "@solidrt/core"
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  focusedNode,
+  measureText,
+  setFocus,
+  startTextInput,
+  textInputActive,
+} from "@solidrt/core"
 import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
-import type { Color, Gradient, LayoutProps } from "@solidrt/core"
+import type { Color, Gradient, KeyEvent, LayoutProps, TextInputHints } from "@solidrt/core"
+import { registerNavAction } from "./focus-nav"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -27,7 +38,14 @@ export interface TextInputProps {
   maxLength?: number
   disabled?: boolean
   autoFocus?: boolean
+  /**
+   * IME behavior for the field's text sessions (keyboard type,
+   * capitalization, autocorrect). Identifier-like fields want
+   * `{ capitalize: "none", autocorrect: false }`.
+   */
+  hints?: TextInputHints
 
+  ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
 }
@@ -35,17 +53,30 @@ export interface TextInputProps {
 // Single-line. The caret moves through the text (Left/Right/Home/End), edits
 // happen at the caret, and the inner box scrolls to keep it in view. Printable
 // text arrives via onTextInput (post-IME commit). onKeyDown handles caret
-// movement, Backspace/Delete, Enter, Escape. Range selection (shift-movement,
+// movement, Backspace/Delete, Enter/select, Escape - and stops those keys
+// from bubbling further. Focused and editing are distinct (see
+// activateField): navigation focuses, select begins editing, Enter while
+// editing submits. Range selection (shift-movement,
 // highlight, click-to-position) is not wired yet. Outside-click-to-blur is the
 // caller's job.
 export function TextInput(props: TextInputProps) {
-  let [focused, setFocused] = createSignal(false)
   let [caretOn, setCaretOn] = createSignal(true)
 
   let node: { id: number } | undefined
   let viewport: { id: number } | undefined
   let blinkId: any = null
 
+  // Derived from core's reactive focus (setFocus is the only writer); the
+  // onFocus/onBlur handlers below keep only their side effects (blink timer,
+  // caller callbacks). focusedNode() is read FIRST, unconditionally: the
+  // memo may first compute before the ref has set `node`, and
+  // short-circuiting past the read would leave it dependency-free, frozen
+  // false forever.
+  let focused = createMemo(() => {
+    let id = focusedNode()
+    return id != null && id === node?.id
+  })
+
   let buffer = createTextBuffer({
     value: () => props.value,
     defaultValue: props.defaultValue,
@@ -71,7 +102,6 @@ export function TextInput(props: TextInputProps) {
   }
 
   let handleFocus = () => {
-    setFocused(true)
     setCaretOn(true)
     if (blinkId == null) {
       blinkId = setInterval(() => setCaretOn((v) => !v), 500)
@@ -80,7 +110,6 @@ export function TextInput(props: TextInputProps) {
   }
 
   let handleBlur = () => {
-    setFocused(false)
     if (blinkId != null) {
       clearInterval(blinkId)
       blinkId = null
@@ -88,8 +117,12 @@ export function TextInput(props: TextInputProps) {
     props.onBlur?.()
   }
 
-  let handleKeyDown = (e: any) => {
+  // Keys the input consumes stop propagating: an ancestor (or an app-global
+  // shortcut on the window) must not also act on an ArrowLeft that moved the
+  // caret. Anything else (e.g. ctrl+s) bubbles on.
+  let handleKeyDown = (e: KeyEvent) => {
     if (props.disabled) return
+    let consumed = true
     if (e.key === "Backspace") {
       buffer.deleteBackward()
       setCaretOn(true)
@@ -108,12 +141,15 @@ export function TextInput(props: TextInputProps) {
     } else if (e.key === "End") {
       buffer.move("end")
       setCaretOn(true)
-    } else if (e.key === "Enter") {
-      props.onSubmit?.(value())
-      setFocus(null)
+    } else if (e.key === "Enter" || e.code === "Select") {
+      // The remote center key's `key` is "Unidentified"; match its code.
+      activateField()
     } else if (e.key === "Escape") {
       if (node) setFocus(null)
+    } else {
+      consumed = false
     }
+    if (consumed) e.stopPropagation()
   }
 
   let handleTextInput = (e: any) => {
@@ -122,8 +158,28 @@ export function TextInput(props: TextInputProps) {
     setCaretOn(true)
   }
 
+  // Select on the focused field: focused and editing are distinct states. A
+  // field reached by navigation is focused but has no text session yet -
+  // select begins one (raising the on-screen keyboard where used, e.g. a TV
+  // with no keyboard attached); while editing, it submits. On platforms
+  // where the session starts invisibly at focus (desktop, physical
+  // keyboard) the first branch never runs and Enter submits as always.
+  // Registered as the nav action too, for a controller's south button.
+  let activateField = () => {
+    if (props.disabled) return
+    if (!textInputActive()) {
+      startTextInput()
+    } else {
+      props.onSubmit?.(value())
+      setFocus(null)
+    }
+  }
+
+  let unregisterNav: (() => void) | null = null
+
   onCleanup(() => {
     if (blinkId != null) clearInterval(blinkId)
+    unregisterNav?.()
   })
 
   // Style overrides fall back to theme defaults. The border doubles as the
@@ -175,7 +231,14 @@ export function TextInput(props: TextInputProps) {
 
   return (
     <view
-      ref={(n: { id: number }) => (node = n)}
+      ref={(n: { id: number }) => {
+        node = n
+        unregisterNav?.()
+        unregisterNav = registerNavAction(n.id, activateField)
+        props.ref?.(n)
+      }}
+      textInputHints={props.hints}
+      focusable
       flexDirection="row"
       alignItems="center"
       paddingLeft={space("md")}