@solidrt/components 0.0.70 → 0.0.72

package/AGENTS.md

@@ -73,7 +73,7 @@ One bullet per module, generated from the first paragraph of its docs/ file.
 - `Text` - Themed text in a layout box. `variant` picks a typography role from the theme's type scale (`caption`/`label`/`body`/`title`/`heading`, default `body`); `color` picks a semantic theme color (`text`, `textMuted`, `primary`, `onPrimary`, `danger`, default `text`), with `muted` as sugar for `color="textMuted"`. Font fields go in `layout` (they affect measurement) and individually override the role; `style.color` still wins over `color`.
 - `Image` - Loads and displays an image from a URL or raw bytes (`src: string | Uint8Array`). URL loads are shared runtime-wide: mounts of the same URL reuse one fetch and one texture, and the bytes are cached on disk (fetched with `cache: "force-cache"` - no freshness check, so use versioned URLs for content that changes). Concurrent asset fetches are kept polite with a per-host limit; a failed load rejects the mounts sharing it and a later remount retries.
 - `SafeArea` - Wraps its children in a view padded clear of system UI intrusions (status bars, home indicators, notches). Top and bottom insets are applied by default; pass `false` to opt out of an edge, or a number to apply the inset with that minimum padding.
-- `TextInput` - Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only). Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
+- `TextInput` - Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only), `onCancel` on Escape or the platform's back, each followed by the blur. Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
 - `RichTextEditor` - Edits a rich text `Document` (styled runs, paragraph attributes) in the same field as `TextInput`: always multiline, same caret, keys, wrapping, scrolling and sizing, and the same font fields on `layout` (the base font the document's runs style from). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue` (start from `plainDocument("")`). Formatting is driven through `editorRef`, which hands you the document buffer - the component ships no toolbar; the app renders its own controls.
 - `Document model` - The value model behind `RichTextEditor`: a `Document` is `{ text, runs, blocks }` - plain text plus attributed runs (inline formatting) and per-paragraph blocks. `plainDocument(text)` builds one from a string; `createDocumentBuffer(doc)` wraps one in the editing API (`format`, `formatBlock`, `insertAtom`, `attributes`, selection and edits) that `editorRef` hands out. `ATOM` is the inline-atom placeholder character (U+FFFC) for embedded objects.
 - `ScrollView` - A scrollable region; vertical by default, `horizontal` to flip. Both the wheel and dragging scroll the content: the drag activates after a small movement threshold along the scroll axis, also when it starts on a pressable (the press is cancelled and its feedback retracts), and keeps scrolling when the pointer leaves the box. Scrolling glides: the offset springs to each new target (250 ms, critically damped), so a wheel notch never jumps and a burst of notches reads as one motion; a dragging finger is tracked exactly, without the spring. A lift at speed flings: the content keeps moving from the finger's release speed and decays (iOS's deceleration), as one runtime-side animation to a projected destination, clamped to the range (it slows into an edge, no bounce). A finger landing on a moving list holds it where it is, a tap included.
@@ -95,11 +95,11 @@ One bullet per module, generated from the first paragraph of its docs/ file.
 - `Spinner` - An indeterminate spinner: a 270-degree arc that rotates continuously, driven by core `onFrame`, so it participates in demand-driven rendering and stops when unmounted. `size` (diameter, default 24), `thickness` (default 3), `speed` (revolutions per second, default 1). Color comes from the theme `primary`; override via `style.color`.
 - `ProgressBar` - A horizontal progress bar: determinate when given a `value` in `[0, 1]` (the fill grows from the left, gliding to each new value - the `fill` transition entry retimes it), indeterminate when `value` is undefined (a short segment slides back and forth, driven by core `onFrame`). Track is `surfaceAlt`, fill is `primary`; override via `style.backgroundColor` (track) and `style.color` (fill), and box the track with `borderColor`/`borderWidth`. The ends follow `radius.full` through `pill`, and the fill glows with the theme's accent glow.
 - `Portal` - Renders its child somewhere other than its lexical position: by default at the window root, so overlays (modals, menus, tooltips) escape the clipping and stacking of their surrounding layout; `mount` targets another node captured from a `ref` instead. A thin JSX wrapper over core `createPortal`. The child should be a single element with `position="absolute"`, since it is inserted into the window's flex root. Portals cannot mount during the app's initial render, so gate them behind a signal that starts false.
-- `Modal` - A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop calls `onClose` (unless `dismissable` is false), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
+- `Modal` - A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop, Escape and the platform's back call `onClose` (unless `dismissable` is false, which keeps the modal up and still stops a back from reaching the screen beneath), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
 - `Tooltip` - A hover-only affordance: under the `desktop`/`hybrid` interaction policies, resting a mouse pointer on the wrapped content shows a bubble near it after `delay` (default 500ms). Under the `touch` policy it never shows, so tooltip content must stay non-essential. The bubble is portal-mounted at the window root, clamped to the window edges, takes no pointer events, fades in and out, hides on leave and on press, and glows with the theme's overlay glow. A string/number `content` renders as themed body text; anything else as-is. `placement` picks the side (`"top"`, the default, or `"bottom"`).
-- `Select` - A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside closes without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+- `Select` - A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 - `SegmentedControl` - A single-choice row of equal-width segments joined flush: only the control's outermost corners are rounded, hairline dividers separate the segments, and the active segment is one `primary` indicator that springs between segments on a selection change - the `indicator` transition entry retimes it. Hovered segments tint with the theme `overlayHover` under non-touch interaction policies. `options` is an `Option[]`; controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Override the inactive fill via `style.backgroundColor` and the outer radius via `style.borderRadius`, and box the control with `borderColor`/`borderWidth`. The indicator glows with the theme's accent glow.
-- `ContextMenu` - Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside closes without selecting.
+- `ContextMenu` - Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 - `NavShell` - An app shell that arranges primary navigation around the content per `policy.navigation`: bottom tabs under it (`bottomTabs`), a narrow rail (`rail`), or a wide sidebar (`sidebar`) beside it. The content is a single stable node; switching arrangement only flips the shell's flex direction and remounts the stateless nav strip, so page state survives a resize across a breakpoint. `items` is a `NavItem[]` (`{ value, label, icon? }`; the icon renders above the label in tabs/rail, beside it in the sidebar); controlled via `value`/`onChange`, or uncontrolled via `defaultValue`. Safe areas are the caller's concern: wrap the shell in `SafeArea`. With `@solidrt/router` the shell is the tabs route's component, `value`/`onChange` wired to `useTabs()` (`active()`/`select(path)`) and `<Outlet />` as the content; the router then keeps a stack per tab and the tabs mounted.
 - `SplitView` - A list-detail container driven by `policy.layout`: `twoPane` shows the `list` pane (width `listWidth`, default `theme.size.splitViewList`) beside the `detail` pane, `singlePane` shows one at a time per `showDetail`. Keep pane state (selection, scroll) in the app, not in the panes: crossing a breakpoint re-arranges and can remount them. It draws no chrome and adds no padding; a back affordance in the single-pane detail is the app's to render (fork on `policy.layout`).
 - `QrCode` - Renders a QR code for `data` out of primitives: same-color modules in a row collapse into one box, drawn on a light quiet-zone panel; the grid recomputes only when `data` or `level` changes. It paints black on white by default (not the theme) so it stays scannable through a theme switch; override `color`/`background` only if the contrast still holds. `moduleSize` (default 6) is pixels per module, `margin` (default 16) the quiet zone (keep it non-zero), `level` the error correction (`L`/`M`/`Q`/`H`, default `M`: higher tolerates more damage but caps data length sooner), `radius` the panel's corner radius.

package/README.md

@@ -276,7 +276,7 @@ API: `SafeArea` - typed and commented in [src/safe-area.tsx](./src/safe-area.tsx
 
 ### TextInput
 
-Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only). Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
+Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only), `onCancel` on Escape or the platform's back, each followed by the blur. Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
 
 ```jsx
 import { TextInput } from "@solidrt/components"
@@ -296,7 +296,11 @@ function NameField() {
 }
 ```
 
-`style` overrides the themed colors, border, and radius (`borderWidth: 0` draws no border at all, and no focus ring). The mouse cursor is the I-beam over the field. `autoFocus` focuses on mount (the on-screen keyboard still waits for a tap). A tap anywhere outside the field blurs it, as does Escape.
+`style` overrides the themed colors, border, and radius (`borderWidth: 0` draws no border at all, and no focus ring). The mouse cursor is the I-beam over the field. `autoFocus` focuses on mount (the on-screen keyboard still waits for a tap). A tap anywhere outside the field blurs it.
+
+Leaving the field: Enter submits (`onSubmit` with the value, then the blur); Escape and the platform's back (the Android button, a pad's back button) cancel (`onCancel`, then the blur). `onCancel` only reports: the value stays as it is, and reverting it is the app's call. `onBlur` runs after either, and on a tap outside.
+
+Keys the focused field keeps for itself, which never reach a parent `onKeyDown` or the window's shortcuts: Backspace, Delete, Left and Right, Home and End, Enter (and a remote's center key), Escape, Ctrl/Cmd+A and Ctrl/Cmd+V, Ctrl/Cmd+C and Ctrl/Cmd+X when text is selected, and every printable key while typing. A multiline field also keeps Up and Down. Everything else bubbles on (Tab, Up and Down in a single-line field, PageUp, function keys, Ctrl+S, ...), so a chat field that wants Up for its history wraps the field in a `View` with an `onKeyDown`.
 
 A multiline field sizes like a flex item. Unconstrained, it grows with its content, up to `maxRows` rows and then scrolls. Sized by its layout it is a fixed box that scrolls to the caret: an explicit `height`, or `flexGrow: 1` in a parent with a height (the field fills what is left and scrolls once the text outgrows it), or a parent too small for the content (the field shrinks to fit rather than overflowing).
 
@@ -374,7 +378,7 @@ createEffect(
 <ScrollView scrollRef={setScroll}>...</ScrollView>
 ```
 
-The range changes whenever the content or the viewport changes size. The first fill (nothing was scrollable before it, whether it mounted with the view or arrived a second later) lands instantly, as a chat opens at its end; after that the view follows the end only if it was at the previous end, and the spring makes that follow a glide. The handle arrives once the component has settled, after an effect's first compute, so hold it in a signal (a setter can be passed as the ref) rather than a plain variable, which the effect would find unset and never track. The offset is read untracked: the policy reacts to the range, not to every scroll.
+The range changes whenever the content or the viewport changes size. The first fill (nothing was scrollable before it, whether it mounted with the view or arrived a second later) lands instantly, as a chat opens at its end; after that the view follows the end only if it was at the previous end, and the spring makes that follow a glide. The handle arrives during mount, outside any reactive scope, so a signal setter can be passed as the ref; holding it in a signal lets the effect track its arrival. The offset is read untracked: the policy reacts to the range, not to every scroll.
 
 A `scrollX`/`scrollY` entry in `transition` replaces the default spring: `transition={{ scrollY: { duration: 400, bounce: 0.2 } }}` (keep it a spring rather than a tween, because the wheel retargets mid-flight). The other entries animate the box itself and its background/border as on any component.
 
@@ -705,7 +709,7 @@ API: `Portal`, `PortalProps` - typed and commented in [src/portal.tsx](./src/por
 
 ### Modal
 
-A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop calls `onClose` (unless `dismissable` is false), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
+A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop, Escape and the platform's back call `onClose` (unless `dismissable` is false, which keeps the modal up and still stops a back from reaching the screen beneath), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
 
 ```jsx
 import { Modal, Card, Button } from "@solidrt/components"
@@ -737,7 +741,7 @@ API: `Tooltip`, `TooltipProps` - typed and commented in [src/tooltip.tsx](./src/
 
 ### Select
 
-A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside closes without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 
 ```jsx
 import { Select } from "@solidrt/components"
@@ -771,7 +775,7 @@ API: `SegmentedControl`, `SegmentedControlProps` - typed and commented in [src/s
 
 ### ContextMenu
 
-Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside closes without selecting.
+Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 
 ```jsx
 import { ContextMenu } from "@solidrt/components"

package/docs/context-menu.md

@@ -1,6 +1,6 @@
 # ContextMenu
 
-Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside closes without selecting.
+Secondary actions on the wrapped content. The opening gesture follows the physical pointer: right-click for a mouse, long-press (500 ms, cancelled by finger travel; core's long-press recognizer) for touch and pen. The long-press wins the finger at its timer: a pressable inside retracts and does not fire on the lift, and a scroll that started first keeps the finger. The presentation forks on the interaction policy: `touch` gets a bottom sheet over a scrim, `desktop`/`hybrid` an anchored menu at the pointer that flips up near the bottom edge. Both presentations fade in and out, and the anchored menu glows with the theme's overlay glow. `items` is a `ContextMenuItem[]` (`{ label, onSelect?, disabled? }`); pressing outside, Escape and the platform's back close without selecting.
 
 ```jsx
 import { ContextMenu } from "@solidrt/components"

package/docs/modal.md

@@ -1,6 +1,6 @@
 # Modal
 
-A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop calls `onClose` (unless `dismissable` is false), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
+A centered overlay rendered at the window root via core `createPortal`: it fills the window with a dimming backdrop (theme `scrim`; override via `backdropColor`, `"transparent"` for no dim) and centers `children` on top, the whole overlay fading in at mount and out on removal (an exiting modal takes no hits). Control visibility by mounting/unmounting it, e.g. `<Show when={open()}>`; the gating signal must start false since portals cannot mount during the initial render. Pressing the backdrop, Escape and the platform's back call `onClose` (unless `dismissable` is false, which keeps the modal up and still stops a back from reaching the screen beneath), pressing the content does not, and while mounted the modal traps `createFocusNav` inside itself.
 
 ```jsx
 import { Modal, Card, Button } from "@solidrt/components"

package/docs/scroll-view.md

@@ -28,7 +28,7 @@ createEffect(
 <ScrollView scrollRef={setScroll}>...</ScrollView>
 ```
 
-The range changes whenever the content or the viewport changes size. The first fill (nothing was scrollable before it, whether it mounted with the view or arrived a second later) lands instantly, as a chat opens at its end; after that the view follows the end only if it was at the previous end, and the spring makes that follow a glide. The handle arrives once the component has settled, after an effect's first compute, so hold it in a signal (a setter can be passed as the ref) rather than a plain variable, which the effect would find unset and never track. The offset is read untracked: the policy reacts to the range, not to every scroll.
+The range changes whenever the content or the viewport changes size. The first fill (nothing was scrollable before it, whether it mounted with the view or arrived a second later) lands instantly, as a chat opens at its end; after that the view follows the end only if it was at the previous end, and the spring makes that follow a glide. The handle arrives during mount, outside any reactive scope, so a signal setter can be passed as the ref; holding it in a signal lets the effect track its arrival. The offset is read untracked: the policy reacts to the range, not to every scroll.
 
 A `scrollX`/`scrollY` entry in `transition` replaces the default spring: `transition={{ scrollY: { duration: 400, bounce: 0.2 } }}` (keep it a spring rather than a tween, because the wheel retargets mid-flight). The other entries animate the box itself and its background/border as on any component.
 

package/docs/select.md

@@ -1,6 +1,6 @@
 # Select
 
-A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside closes without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
+A single-choice picker whose presentation forks on the interaction policy: `desktop`/`hybrid` opens an anchored dropdown under the trigger (flipping above when there is no room), `touch` opens a bottom sheet over a scrim. Same contract either way: `options` is an `Option[]` (`{ value, label }`), controlled via `value`/`onChange` or uncontrolled via `defaultValue`; pressing outside, Escape and the platform's back close without a change. `placeholder` shows in the trigger while nothing is selected. Both presentations fade in and out, the dropdown glows with the theme's overlay glow, and the trigger's chevron flips while open. The option list is not scrollable yet, so keep it short. The chevron is the `theme.icons.chevronDown` slot when a theme sets one.
 
 ```jsx
 import { Select } from "@solidrt/components"

package/docs/text-input.md

@@ -1,6 +1,6 @@
 # TextInput
 
-Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only). Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
+Text input, single-line by default; `multiline` wraps at the field's width and edits across lines (Enter inserts a newline, Up/Down move by line; grows with content up to `maxRows` unless its layout sizes the box, and scrolls to the caret). Controlled via `value`/`onInput`, or uncontrolled via `defaultValue`; `onSubmit` fires on Enter (single-line only), `onCancel` on Escape or the platform's back, each followed by the blur. Also `placeholder`, `maxLength`, `autoFocus`, `disabled`, `onFocus`/`onBlur`, and `hints` for IME behavior (keyboard type, capitalization, autocorrect - identifier-like fields want `{ capitalize: "none", autocorrect: false }`). The font fields of `layout` (`fontSize`, `fontFamily`, `lineHeight`, `fontStyle`, `fontWeight`) shape the text as on `Text`, with the rows, caret and scrolling following.
 
 ```jsx
 import { TextInput } from "@solidrt/components"
@@ -20,7 +20,11 @@ function NameField() {
 }
 ```
 
-`style` overrides the themed colors, border, and radius (`borderWidth: 0` draws no border at all, and no focus ring). The mouse cursor is the I-beam over the field. `autoFocus` focuses on mount (the on-screen keyboard still waits for a tap). A tap anywhere outside the field blurs it, as does Escape.
+`style` overrides the themed colors, border, and radius (`borderWidth: 0` draws no border at all, and no focus ring). The mouse cursor is the I-beam over the field. `autoFocus` focuses on mount (the on-screen keyboard still waits for a tap). A tap anywhere outside the field blurs it.
+
+Leaving the field: Enter submits (`onSubmit` with the value, then the blur); Escape and the platform's back (the Android button, a pad's back button) cancel (`onCancel`, then the blur). `onCancel` only reports: the value stays as it is, and reverting it is the app's call. `onBlur` runs after either, and on a tap outside.
+
+Keys the focused field keeps for itself, which never reach a parent `onKeyDown` or the window's shortcuts: Backspace, Delete, Left and Right, Home and End, Enter (and a remote's center key), Escape, Ctrl/Cmd+A and Ctrl/Cmd+V, Ctrl/Cmd+C and Ctrl/Cmd+X when text is selected, and every printable key while typing. A multiline field also keeps Up and Down. Everything else bubbles on (Tab, Up and Down in a single-line field, PageUp, function keys, Ctrl+S, ...), so a chat field that wants Up for its history wraps the field in a `View` with an `onKeyDown`.
 
 A multiline field sizes like a flex item. Unconstrained, it grows with its content, up to `maxRows` rows and then scrolls. Sized by its layout it is a fixed box that scrolls to the caret: an explicit `height`, or `flexGrow: 1` in a parent with a height (the field fills what is left and scrolls once the text outgrows it), or a parent too small for the content (the field shrinks to fit rather than overflowing).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -19,8 +19,11 @@
   "dependencies": {
     "qrcode-generator": "^2.0.4"
   },
+  "devDependencies": {
+    "@solidrt/test": "0.0.72"
+  },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.70"
+    "@solidrt/core": "0.0.72"
   }
 }

package/src/card.tsx

@@ -1,4 +1,4 @@
-import { Show, createRadialGradient, createSignal, getLayoutBox, withAlpha } from "@solidrt/core"
+import { Show, createRadialGradient, createSignal, getLayoutBox, untrack, withAlpha } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -78,7 +78,10 @@ export function Card(props: CardProps) {
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         node = n
-        props.ref?.(n)
+        // A ref callback runs in the element's owned scope, where a prop
+        // read warns in dev (STRICT_READ_UNTRACKED); the caller's ref is a
+        // one-shot, read untracked.
+        untrack(() => props.ref)?.(n)
       }}
       repaintBoundary
       flexDirection="column"

package/src/carousel.tsx

@@ -82,7 +82,10 @@ export function Carousel(props: CarouselProps) {
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         node = n
-        props.ref?.(n)
+        // A ref callback runs in the element's owned scope, where a prop
+        // read warns in dev (STRICT_READ_UNTRACKED); the caller's ref is a
+        // one-shot, read untracked.
+        untrack(() => props.ref)?.(n)
       }}
       overflow="hidden"
       {...props.layout}

package/src/context-menu.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createLongPress, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
+import { createEffect, createSignal, createLongPress, createPortal, onBack, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
@@ -33,7 +33,8 @@ let margin = () => theme.spacing.sm
  * pressable inside retracts and never fires, and a scroll that started
  * first keeps it). The presentation forks on the interaction policy: touch
  * gets a bottom sheet over a scrim, desktop/hybrid an anchored menu at the
- * pointer. Pressing outside closes without selecting.
+ * pointer. Pressing outside, Escape and the user's back close without
+ * selecting.
  */
 export function ContextMenu(props: ContextMenuProps) {
   let [open, setOpen] = createSignal(false)
@@ -55,6 +56,19 @@ export function ContextMenu(props: ContextMenuProps) {
     item.onSelect?.()
   }
 
+  // Open, the menu is one step of core's back stack: Escape and the user's
+  // back close it as a press outside does, selecting nothing.
+  createEffect(
+    () => open(),
+    (isOpen) => {
+      if (!isOpen) return
+      return onBack((e) => {
+        e.preventDefault()
+        setOpen(false)
+      })
+    },
+  )
+
   let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   let ItemRow = (p: { item: ContextMenuItem; padY: number }) => {

package/src/dismissible.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createSwipe, getLayoutBox } from "@solidrt/core"
+import { createSignal, createSwipe, getLayoutBox, untrack } from "@solidrt/core"
 import type { LayoutProps, SwipeDirection, TransitionEndEvent } from "@solidrt/core"
 import type { StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
@@ -98,7 +98,10 @@ export function Dismissible(props: DismissibleProps) {
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         node = n
-        props.ref?.(n)
+        // A ref callback runs in the element's owned scope, where a prop
+        // read warns in dev (STRICT_READ_UNTRACKED); the caller's ref is a
+        // one-shot, read untracked.
+        untrack(() => props.ref)?.(n)
       }}
       overflow="hidden"
       {...props.layout}

package/src/editor-field.tsx

@@ -12,6 +12,7 @@ import {
   createSignal,
   onCleanup,
   focusedNode,
+  onBack,
   setFocus,
   startTextInput,
   textInputActive,
@@ -63,6 +64,8 @@ export interface EditorFieldProps extends TransitionProps {
   renderLine: (r: LineRender) => Element
 
   onSubmit?: (value: string) => void
+  /** The user backed out of the field (Escape, or the platform's back): fires, then the field blurs. The value is left as it is. */
+  onCancel?: () => void
   onFocus?: () => void
   onBlur?: () => void
   placeholder?: string
@@ -91,7 +94,8 @@ export interface EditorFieldProps extends TransitionProps {
 // range replace it (the buffer's own behavior). Ctrl/Cmd+C/X/V go through
 // navigator.clipboard (copy and cut need a range; single-line paste flattens
 // line breaks). A tap outside the field blurs it (core's outside-tap blur in
-// window.ts), as does Escape.
+// window.ts). Escape and the user's back (core's onBack stack: the Android
+// button, the pad's back) cancel: onCancel fires, then the field blurs.
 // Font options compared field by field: the same keys with the same values.
 function sameFont(a: MeasureTextOptions, b: MeasureTextOptions): boolean {
   let ka = Object.keys(a) as (keyof MeasureTextOptions)[]
@@ -324,7 +328,7 @@ export function EditorField(props: EditorFieldProps) {
       // The remote center key's `key` is "Unidentified"; match its code.
       activateField()
     } else if (e.key === "Escape") {
-      if (node) setFocus(null)
+      cancel()
     } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && textInputActive()) {
       // A printable key is this field's text (it arrives as a text-input
       // event); consumed here so a typed Space never reaches the window as
@@ -371,6 +375,28 @@ export function EditorField(props: EditorFieldProps) {
     }
   }
 
+  // Cancel mirrors submit: the callback, then the blur. Escape reaches it
+  // through the key handler (the focused field consumes the key, so a window
+  // shortcut on Escape never fires on the same press); the user's back
+  // through the back stack, where the field is a step while focused. Focus
+  // comes after any enclosing overlay mounted, so the field tops the stack
+  // and a back leaves the field before it closes the overlay.
+  let cancel = () => {
+    props.onCancel?.()
+    setFocus(null)
+  }
+
+  createEffect(
+    () => focused(),
+    (isFocused) => {
+      if (!isFocused) return
+      return onBack((e) => {
+        e.preventDefault()
+        cancel()
+      })
+    },
+  )
+
   let unregisterNav: (() => void) | null = null
 
   onCleanup(() => {

package/src/image.tsx

@@ -1,9 +1,9 @@
 import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
-import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
+import type { ImageSource, InputProps, LayoutProps, Pct, TextureProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 
-export interface ImageProps extends PointerProps, TransitionProps {
+export interface ImageProps extends InputProps, TransitionProps {
   src: string | Uint8Array
   /**
    * How the image maps into the Image's box (CSS object-fit): "fill"

package/src/modal.tsx

@@ -1,19 +1,21 @@
-import { createPortal, onCleanup } from "@solidrt/core"
-import type { Color, PointerEvent } from "@solidrt/core"
+import { createPortal, onBack, onCleanup } from "@solidrt/core"
+import type { Color } 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
-  // `dismissable` is false.
+  // Called when the backdrop (the area around the content) is pressed, or on
+  // Escape or the platform's back, unless `dismissable` is false.
   onClose?: () => void
   // The modal content, centered over the backdrop.
   children?: any
   // Scrim color behind the content. Defaults to the theme scrim; pass
   // "transparent" for no dim.
   backdropColor?: Color
-  // Whether pressing the backdrop calls onClose. Defaults to true.
+  // Whether a backdrop press, Escape or back calls onClose. Defaults to true.
+  // False keeps the modal up until the app removes it; back still stops at
+  // the modal, never reaching the screen beneath.
   dismissable?: boolean
 }
 
@@ -30,12 +32,24 @@ export interface ModalProps {
  * works because pointer events dispatch to the whole hit path with no
  * stopPropagation, so the content is kept a sibling of the backdrop (not a
  * child): a press on the content never has the backdrop on its path.
+ *
+ * While mounted the modal is one step of core's back stack: Escape and the
+ * user's back close it as the backdrop does. Registered at mount, so a field
+ * focused inside it (which registers at focus) sits above it and a back
+ * leaves the field first, the modal next.
  */
 export function Modal(props: ModalProps) {
-  let dismiss = (_e: PointerEvent) => {
+  let dismiss = () => {
     if (props.dismissable !== false) props.onClose?.()
   }
 
+  // A modal that is not dismissable still takes the step and does nothing:
+  // it wants an answer, and the screen beneath must not get the back.
+  onBack((e) => {
+    e.preventDefault()
+    dismiss()
+  })
+
   // 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

package/src/pressable.tsx

@@ -1,5 +1,5 @@
 import { children, untrack } from "@solidrt/core"
-import type { Element, LayoutProps, PointerProps } from "@solidrt/core"
+import type { Element, InputProps, LayoutProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { createPress, type PressState } from "./press"
@@ -7,7 +7,7 @@ import { colorFade, scaleFeedback } from "./motion"
 
 export type { PressState } from "./press"
 
-export interface PressableProps extends PointerProps, TransitionProps {
+export interface PressableProps extends InputProps, TransitionProps {
   // children and style may be functions of the press state, so a caller can
   // restyle on press/hover without wiring their own signals. The state is live
   // (getters, not a snapshot): read it inside a prop or child expression, never

package/src/scroll-view.tsx

@@ -1,10 +1,10 @@
-import { createPan, createScroll, createSignal, getBoundingBoxViewport, getLayoutBox, onSettled, untrack } from "@solidrt/core"
-import type { LayoutProps, PointerEvent, PointerProps, Scroll, TransitionCurve, TransitionEndEvent, WheelEvent } from "@solidrt/core"
+import { callRef, createPan, createScroll, createSignal, getBoundingBoxViewport, getLayoutBox } from "@solidrt/core"
+import type { InputProps, LayoutProps, PointerEvent, Scroll, TransitionCurve, TransitionEndEvent, WheelEvent } from "@solidrt/core"
 import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 
 export interface ScrollViewProps
-  extends PointerProps,
+  extends InputProps,
     TransitionProps<TransitionViewProp | TransitionStyleProp | TransitionScrollProp> {
   children?: any
   ref?: (node: { id: number }) => void
@@ -14,8 +14,8 @@ export interface ScrollViewProps
   horizontal?: boolean
   /** Receives the scroll handle (offset, range, scrollTo) for driving the view
    * from app code; scroll policies such as following a growing log are written
-   * against it. Called once the component has settled, outside any reactive
-   * scope, so a signal setter can be passed directly. */
+   * against it. Called during mount, outside any reactive scope, so a signal
+   * setter can be passed directly. */
   scrollRef?: (scroll: Scroll) => void
 }
 
@@ -72,11 +72,7 @@ export function ScrollView(props: ScrollViewProps) {
     () => content,
     { axis: props.horizontal ? "horizontal" : "vertical" },
   )
-  // Handed out from onSettled rather than the body: the body is an owned
-  // scope, where a signal write (an app passing its setter) is refused.
-  onSettled(() => {
-    untrack(() => props.scrollRef)?.(scroll)
-  })
+  callRef(() => props.scrollRef, scroll)
 
   // Content follows the finger: it moves opposite to scroll offsets, which
   // grow toward the bottom/right. The lift's velocity (parent-frame px/s,

package/src/select.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
+import { createEffect, createSignal, createPortal, onBack, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
@@ -33,7 +33,8 @@ let margin = () => theme.spacing.sm
  * A single-choice picker whose presentation forks on the interaction policy:
  * desktop/hybrid opens an anchored dropdown under the trigger (flipping above
  * when there is no room), touch opens a bottom sheet over a scrim. Same
- * value/onChange contract either way; pressing outside closes without a change.
+ * value/onChange contract either way; pressing outside, Escape and the user's
+ * back close without a change.
  * The option list is not scrollable yet, so keep it short.
  */
 export function Select<T>(props: SelectProps<T>) {
@@ -51,6 +52,19 @@ export function Select<T>(props: SelectProps<T>) {
     props.onChange?.(v)
   }
 
+  // Open, the picker is one step of core's back stack: Escape and the user's
+  // back close it as a press outside does, without a change.
+  createEffect(
+    () => open(),
+    (isOpen) => {
+      if (!isOpen) return
+      return onBack((e) => {
+        e.preventDefault()
+        setOpen(false)
+      })
+    },
+  )
+
   let bodyText = (color: string) => ({ ...typeStyle("body"), color, maxLines: 1 })
 
   // One option row, shared by both presentations; only the vertical padding

package/src/text-input.tsx

@@ -10,6 +10,13 @@ export interface TextInputProps extends TransitionProps {
   defaultValue?: string
   onInput?: (value: string) => void
   onSubmit?: (value: string) => void
+  /**
+   * The user backed out of the field: Escape, or the platform's back (the
+   * Android button, a pad's back). Fires, then the field blurs, as `onSubmit`
+   * does on Enter; `onBlur` follows either. Reports only: the value stays as
+   * it is, reverting it is the app's call.
+   */
+  onCancel?: () => void
   onFocus?: () => void
   onBlur?: () => void
 
@@ -75,6 +82,7 @@ export function TextInput(props: TextInputProps) {
         </d-text>
       )}
       onSubmit={props.onSubmit}
+      onCancel={props.onCancel}
       onFocus={props.onFocus}
       onBlur={props.onBlur}
       placeholder={props.placeholder}

package/src/text.tsx

@@ -1,5 +1,5 @@
 import { createMemo } from "@solidrt/core"
-import type { PointerProps } from "@solidrt/core"
+import type { InputProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps, TransitionProps, TransitionViewProp } from "./types"
 import { splitTextLayout, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { theme, type TextVariant } from "./theme"
@@ -10,7 +10,7 @@ import { colorFade } from "./motion"
 // make sense as a text fill; style.color takes raw values for anything else.
 export type TextColor = "text" | "textMuted" | "primary" | "onPrimary" | "danger"
 
-export interface TextProps extends PointerProps, TransitionProps<TransitionViewProp | "color"> {
+export interface TextProps extends InputProps, TransitionProps<TransitionViewProp | "color"> {
   children?: any
   // Typography role from the theme's type scale; defaults to "body". Explicit
   // layout font props override the role's fields individually. fontSize

package/src/view.tsx

@@ -1,9 +1,9 @@
-import type { LayoutProps, PointerProps } from "@solidrt/core"
+import type { InputProps, LayoutProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { colorFade } from "./motion"
 
-export interface ViewProps extends PointerProps, TransitionProps {
+export interface ViewProps extends InputProps, TransitionProps {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps

package/src/window.tsx

@@ -1,11 +1,11 @@
 import { createEffect, displayScale, warmText } from "@solidrt/core"
-import type { LayoutProps, PointerProps, WindowShaderProps } from "@solidrt/core"
+import type { InputProps, LayoutProps, WindowShaderProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { colorFade } from "./motion"
 import { theme } from "./theme"
 import { typeScaleStyles } from "./typography"
 
-export interface WindowProps extends PointerProps {
+export interface WindowProps extends InputProps {
   children?: any
   title?: string
   fullscreen?: boolean