@solidrt/components 0.0.71 → 0.0.73

package/src/focus-nav.ts

@@ -5,6 +5,7 @@ import {
   gamepad,
   getBoundingBoxViewport,
   getFocusables,
+  getLayoutBox,
   focusedNode,
   getNodePath,
   keyboard,
@@ -13,7 +14,7 @@ import {
   setFocus,
   untrack,
 } from "@solidrt/core"
-import type { Binding, GamepadDevice, InputMap, KeyboardDevice, Vec2 } from "@solidrt/core"
+import type { Binding, GamepadDevice, InputMap, KeyboardDevice, Scroll, 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
@@ -145,6 +146,47 @@ export function registerNavAction(nodeId: number, action: () => void): () => voi
   }
 }
 
+// Scroll viewports, by node id, with the handle that moves them: ScrollView
+// registers its own. The nav consults them to bring a candidate it focuses
+// into view, so a list longer than its box can be walked blind (a pad or
+// remote has no pointer to scroll with).
+let scrollViewports = new Map<number, Scroll>()
+
+/**
+ * Registers a scroll viewport node and its handle with the focus
+ * navigation; returns the unregister. ScrollView does this for itself, so
+ * a custom scroller built on createScroll needs it only to have the nav
+ * reveal the controls it focuses inside.
+ */
+export function registerScrollViewport(nodeId: number, scroll: Scroll): () => void {
+  scrollViewports.set(nodeId, scroll)
+  return () => {
+    if (scrollViewports.get(nodeId) === scroll) scrollViewports.delete(nodeId)
+  }
+}
+
+// Scrolls every registered viewport above the node, innermost first, by the
+// amount the node's box overshoots the viewport's (window-relative boxes;
+// the delta is scaled back to box pixels through the viewport's untransformed
+// layout box, as ScrollView does for a finger). The viewport's own motion
+// applies: the list springs to the candidate.
+function revealInScrollViews(nodeId: number): void {
+  for (let id of getNodePath(nodeId)) {
+    let scroll = scrollViewports.get(id)
+    if (!scroll) continue
+    let nb = getBoundingBoxViewport({ id: nodeId })
+    let vb = getBoundingBoxViewport({ id })
+    let lb = getLayoutBox({ id })
+    if (!nb || !vb || !lb || vb.width === 0 || vb.height === 0) continue
+    // Past the start wins over past the end: a node taller than the viewport
+    // shows its top.
+    let overshoot = (lo: number, hi: number, vlo: number, vhi: number) => (lo < vlo ? lo - vlo : hi > vhi ? hi - vhi : 0)
+    let dx = overshoot(nb.x, nb.x + nb.width, vb.x, vb.x + vb.width) * (lb.width / vb.width)
+    let dy = overshoot(nb.y, nb.y + nb.height, vb.y, vb.y + vb.height) * (lb.height / vb.height)
+    if (dx !== 0 || dy !== 0) scroll.scrollBy({ x: dx, y: dy })
+  }
+}
+
 // 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.
@@ -230,6 +272,7 @@ export function createFocusNav(options?: FocusNavOptions) {
   let focusCandidate = (p: Placed) => {
     lastPos = { x: p.x, y: p.y }
     setFocus(p.id)
+    revealInScrollViews(p.id)
   }
 
   // Entry focus with no history (very first press) or where predictability

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/index.ts

@@ -12,7 +12,7 @@ export { Carousel, type CarouselProps } from "./carousel"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { createPress, type PressOptions } from "./press"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
-export { createFocusNav, registerNavAction, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
+export { createFocusNav, registerNavAction, registerScrollViewport, 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/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/popup.tsx

@@ -0,0 +1,94 @@
+import { env } from "@solidrt/core"
+import type { BoundingBox, Scroll } from "@solidrt/core"
+import { theme } from "./theme"
+import { ScrollView } from "./scroll-view"
+
+// The anchored popups (Tooltip, Select's dropdown, ContextMenu) share one
+// placement: portal at the window root, parked offscreen until measured in
+// onLayout, then moved with the x/y paint transforms so tracking the anchor
+// never reflows. The math lives here so every popup keeps the same rules:
+// a side is taken only when it has the room, both axes are clamped to the
+// window margin, and a popup taller than any side caps itself to the room
+// the placement reports.
+
+// Distance between an anchor and the popup it opens.
+export let popupGap = () => theme.spacing.sm
+// Minimum distance kept between a popup and the window edges.
+export let popupMargin = () => theme.spacing.sm
+
+export type PopupSide = "top" | "bottom"
+
+export interface Placement {
+  x: number
+  y: number
+  // The side of the anchor the popup sits on.
+  side: PopupSide
+  // Height available on that side, between the anchor (plus gap) and the
+  // window margin. A popup taller than this caps its content to it; `y`
+  // already assumes it does.
+  room: number
+}
+
+export interface PlaceOptions {
+  // Preferred side (default "bottom"). Kept when the popup fits there;
+  // otherwise the other side when it fits, else whichever has more room.
+  side?: PopupSide
+  // Horizontal alignment to the anchor: on its left edge (default) or
+  // centered on it. Clamped to the window either way.
+  align?: "start" | "center"
+  // Distance from the anchor's edge; default popupGap(). A popup anchored
+  // at a point (a context menu at the pointer) passes 0.
+  gap?: number
+}
+
+/**
+ * Where a popup of `size` goes next to `anchor`, both in window
+ * coordinates (getBoundingBox from the window root, inside onLayout).
+ */
+export function placePopup(anchor: BoundingBox, size: { width: number; height: number }, options: PlaceOptions = {}): Placement {
+  let gap = options.gap ?? popupGap()
+  let margin = popupMargin()
+  let window = env.windowSize
+  let roomBelow = window.height - margin - (anchor.y + anchor.height + gap)
+  let roomAbove = anchor.y - gap - margin
+  let preferred = options.side ?? "bottom"
+  let fits = (side: PopupSide) => size.height <= (side === "bottom" ? roomBelow : roomAbove)
+  let other: PopupSide = preferred === "bottom" ? "top" : "bottom"
+  let side: PopupSide = fits(preferred) ? preferred : fits(other) ? other : roomBelow >= roomAbove ? "bottom" : "top"
+  let room = side === "bottom" ? roomBelow : roomAbove
+  let x = options.align === "center" ? anchor.x + anchor.width / 2 - size.width / 2 : anchor.x
+  x = Math.round(Math.min(Math.max(x, margin), window.width - size.width - margin))
+  let y = Math.round(side === "bottom" ? anchor.y + anchor.height + gap : anchor.y - gap - Math.min(size.height, room))
+  return { x, y, side, room }
+}
+
+export interface PopupListProps {
+  // The list's height: its rows' natural height capped to the room, as the
+  // owner measured and resolved it in its onLayout; null before the first
+  // layout.
+  height: number | null
+  // The rows' column, for the owner to measure (its box is the natural
+  // height, whatever the viewport shows).
+  listRef?: (node: { id: number }) => void
+  scrollRef?: (scroll: Scroll) => void
+  children?: any
+}
+
+/**
+ * The rows of a popup: a column that scrolls once taller than the room it
+ * has. A scroll viewport has no natural height (its minimum is 0, so a max
+ * alone collapses it: see createScroll), so the owner measures the column
+ * through `listRef` and sizes the list explicitly. Until measured it stands
+ * at the window height, so the viewport never reads 0 while its popup is
+ * still parked offscreen or hidden.
+ */
+export function PopupList(props: PopupListProps) {
+  let height = () => (props.height == null ? env.windowSize.height : Math.max(0, props.height))
+  return (
+    <ScrollView layout={{ height: height() }} scrollRef={props.scrollRef}>
+      <view ref={props.listRef} flexDirection="column">
+        {props.children}
+      </view>
+    </ScrollView>
+  )
+}

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,11 @@
-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, onCleanup } 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"
+import { registerScrollViewport } from "./focus-nav"
 
 export interface ScrollViewProps
-  extends PointerProps,
+  extends InputProps,
     TransitionProps<TransitionViewProp | TransitionStyleProp | TransitionScrollProp> {
   children?: any
   ref?: (node: { id: number }) => void
@@ -14,8 +15,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 +73,11 @@ 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)
+  // The focus navigation brings a control it focuses in the viewport into
+  // view; registered from the viewport's ref, released with the component.
+  let unregister: (() => void) | undefined
+  onCleanup(() => unregister?.())
 
   // Content follows the finger: it moves opposite to scroll offsets, which
   // grow toward the bottom/right. The lift's velocity (parent-frame px/s,
@@ -212,7 +213,10 @@ export function ScrollView(props: ScrollViewProps) {
           an instant write needs the withdrawn declaration to land before the
           value in the same flush, or the value starts a spring anyway. */}
       <view
-        ref={(n: { id: number }) => (viewport = n)}
+        ref={(n: { id: number }) => {
+          viewport = n
+          unregister = registerScrollViewport(n.id, scroll)
+        }}
         flex={1}
         overflow="hidden"
         clipRadius={props.style?.borderRadius}

package/src/select.tsx

@@ -1,6 +1,8 @@
-import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
-import type { LayoutProps } from "@solidrt/core"
+import { createEffect, createSignal, createPortal, onBack, onCleanup, onLayout, getBoundingBox, Show, For, env, untrack } from "@solidrt/core"
+import type { BoundingBox, LayoutProps, Scroll } from "@solidrt/core"
 import { createPress } from "./press"
+import { pushNavScope } from "./focus-nav"
+import { placePopup, PopupList } from "./popup"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -8,7 +10,7 @@ import { typeStyle } from "./typography"
 import type { Option, StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 import { Icon } from "./icon"
-import { colorFade, popupFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
+import { colorFade, popupFadeOut, PressFeedback, travelMotion } from "./motion"
 import { Surface } from "./surface"
 
 export interface SelectProps<T = unknown> extends TransitionProps {
@@ -24,20 +26,22 @@ export interface SelectProps<T = unknown> extends TransitionProps {
   style?: StyleProps
 }
 
-// Distance between the trigger and the dropdown.
-let gap = () => theme.spacing.sm
-// Minimum distance kept between the dropdown and the window edges.
-let margin = () => theme.spacing.sm
+// Scrim kept visible above a bottom sheet at its tallest.
+let sheetClearance = () => theme.spacing.xl
 
 /**
  * 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.
- * The option list is not scrollable yet, so keep it short.
+ * desktop/hybrid opens an anchored dropdown under the trigger (above it when
+ * only that side has the room), touch opens a bottom sheet over a scrim.
+ * Same value/onChange contract either way; pressing outside, Escape and the
+ * user's back close without a change. A list taller than the room scrolls,
+ * opening with the selected option in view, and while open the options are
+ * the focus navigation's scope.
  */
 export function Select<T>(props: SelectProps<T>) {
   let trigger: { id: number } | undefined
+  // The selected option's row while a presentation is open.
+  let selectedRow: { id: number } | undefined
   let [open, setOpen] = createSignal(false)
   // The value overload: as far as TypeScript knows T could be a function,
   // which createSignal would read as a compute; the cast picks the value form.
@@ -51,6 +55,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
@@ -59,7 +76,11 @@ export function Select<T>(props: SelectProps<T>) {
     let press = createPress({ onPress: () => choose(p.option.value) })
     return (
       <view
-        ref={press.ref}
+        ref={(n: { id: number }) => {
+          press.ref(n)
+          // A mount-time snapshot: the row that is selected as the list opens.
+          if (p.option.value === untrack(value)) selectedRow = n
+        }}
         repaintBoundary
         flexDirection="row"
         alignItems="center"
@@ -80,30 +101,64 @@ export function Select<T>(props: SelectProps<T>) {
     )
   }
 
-  // Anchored under the trigger, sized at least as wide as it. Positioned like
-  // Tooltip: portal at the window root, pinned at 0,0 and moved with the x/y
-  // paint transforms after measuring, so tracking the anchor never reflows.
-  // Glows with theme.glow.overlay (the sheet sits on a scrim and does not).
+  // Once per opening, once the list has its final size (the scroll range
+  // matches the rows' overflow, so the write is not clamped against a stale
+  // range): the selected row to the middle of the list, without motion.
+  let createReveal = () => {
+    let done = false
+    return (scroll: Scroll | undefined, list: BoundingBox, height: number) => {
+      if (done || !scroll) return
+      let overflow = Math.max(0, list.height - height)
+      if (overflow === 0) {
+        done = true
+        return
+      }
+      if (scroll.range().y !== overflow) return
+      let row = selectedRow && getBoundingBox(selectedRow)
+      done = true
+      if (row) scroll.scrollTo({ y: row.y - list.y - (height - row.height) / 2, behavior: "instant" })
+    }
+  }
+
+  // Anchored under the trigger, sized at least as wide as it, on the side
+  // with room (placePopup): portal at the window root, pinned at 0,0 and
+  // moved with the x/y paint transforms after measuring, so tracking the
+  // anchor never reflows. The rows scroll once taller than the room. Glows
+  // with theme.glow.overlay (the sheet sits on a scrim and does not).
   let Dropdown = () => {
     let menu: { id: number } | undefined
+    let list: { id: number } | undefined
+    let scroll: Scroll | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
     let [minWidth, setMinWidth] = createSignal(0)
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    let reveal = createReveal()
+    selectedRow = undefined
+    // The padding above and below the rows: the popup's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.sm
     onLayout(() => {
       let a = trigger && getBoundingBox(trigger)
       let b = menu && getBoundingBox(menu)
-      if (!a || !b) return
+      let l = list && getBoundingBox(list)
+      if (!a || !b || !l) return
       if (a.width !== minWidth()) setMinWidth(a.width)
-      let x = Math.round(Math.min(Math.max(a.x, margin()), env.windowSize.width - b.width - margin()))
-      let below = a.y + a.height + gap()
-      let y = Math.round(below + b.height > env.windowSize.height - margin() ? a.y - b.height - gap() : below)
+      let p = placePopup(a, { width: b.width, height: l.height + chrome() })
+      let h = Math.min(l.height, p.room - chrome())
+      if (h !== listHeight()) setListHeight(h)
       let cur = pos()
-      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+      if (!cur || cur.x !== p.x || cur.y !== p.y) setPos({ x: p.x, y: p.y })
+      reveal(scroll, l, h)
     })
+    // Open, the options are the focus navigation's scope (as a Modal is), so
+    // a pad or keyboard cannot walk onto the screen behind the dropdown.
+    let popScope: (() => void) | undefined
+    onCleanup(() => popScope?.())
     // The fade is driven by the position write, not a mount-time `from`: the
     // menu parks offscreen until measured, so a `from` would play unseen.
     // The exit fade lives on this root (the node the close unmounts).
     return createPortal(
       <view
+        ref={(n: { id: number }) => (popScope = pushNavScope(n))}
         position="absolute"
         top={0}
         left={0}
@@ -134,19 +189,50 @@ export function Select<T>(props: SelectProps<T>) {
             glow={styled().glow}
             outline={{ color: theme.color.border, width: theme.borderWidth.sm }}
           />
-          <For each={props.options}>
-            {(o: Option<T>) => <OptionRow option={o} padY={space("sm")} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)} scrollRef={(s) => (scroll = s)}>
+            <For each={props.options}>
+              {(o: Option<T>) => <OptionRow option={o} padY={space("sm")} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
   }
 
   // Bottom sheet over a scrim; the content is a sibling of the scrim (Modal's
-  // trick) so pressing an option never has the scrim on its hit path.
-  let Sheet = () =>
-    createPortal(
-      <view position="absolute" top={0} left={0} right={0} bottom={0} opacity={1} transition={popupFade()}>
+  // trick) so pressing an option never has the scrim on its hit path. The
+  // rows scroll once the sheet would reach the clearance under the top safe
+  // area; hidden until measured, as the dropdown is, so the full-height
+  // list of the measuring frame is never seen.
+  let Sheet = () => {
+    let list: { id: number } | undefined
+    let scroll: Scroll | undefined
+    let [listHeight, setListHeight] = createSignal<number | null>(null)
+    let reveal = createReveal()
+    selectedRow = undefined
+    // The padding above and below the rows: the sheet's height beyond the list's.
+    let chrome = () => 2 * theme.spacing.md + env.safeArea.bottom
+    onLayout(() => {
+      let l = list && getBoundingBox(list)
+      if (!l) return
+      let room = env.windowSize.height - env.safeArea.top - sheetClearance() - chrome()
+      let h = Math.min(l.height, room)
+      if (h !== listHeight()) setListHeight(h)
+      reveal(scroll, l, h)
+    })
+    let popScope: (() => void) | undefined
+    onCleanup(() => popScope?.())
+    return createPortal(
+      <view
+        ref={(n: { id: number }) => (popScope = pushNavScope(n))}
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        opacity={listHeight() != null ? 1 : 0}
+        transition={popupFadeOut()}
+      >
         <view position="absolute" top={0} left={0} right={0} bottom={0} onPointerDown={() => setOpen(false)}>
           <d-rect transition={colorFade()} color={theme.color.scrim} />
         </view>
@@ -160,12 +246,15 @@ export function Select<T>(props: SelectProps<T>) {
           paddingBottom={theme.spacing.md + env.safeArea.bottom}
         >
           <Surface role="overlay" fill={theme.color.surface} radius={theme.radius.sm} material={styled().material} glow={null} />
-          <For each={props.options}>
-            {(o: Option<T>) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
-          </For>
+          <PopupList height={listHeight()} listRef={(n) => (list = n)} scrollRef={(s) => (scroll = s)}>
+            <For each={props.options}>
+              {(o: Option<T>) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
+            </For>
+          </PopupList>
         </view>
       </view>,
     )
+  }
 
   let press = createPress({
     onPress: () => {

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/tooltip.tsx

@@ -1,5 +1,6 @@
-import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env, children } from "@solidrt/core"
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { placePopup } from "./popup"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
@@ -17,16 +18,13 @@ export interface TooltipProps extends TransitionProps {
   children?: any
   // Hover delay in milliseconds before showing.
   delay?: number
-  // Which side of the anchor the bubble appears on.
+  // Which side of the anchor the bubble prefers; the other side is taken
+  // when only it has the room.
   placement?: "top" | "bottom"
   layout?: LayoutProps
 }
 
 const DELAY = 500
-// Distance between the anchor and the bubble.
-let gap = () => theme.spacing.sm
-// Minimum distance kept between the bubble and the window edges.
-let margin = () => theme.spacing.sm
 
 /**
  * A hover-only affordance: under desktop/hybrid interaction policies, resting a
@@ -57,8 +55,8 @@ export function Tooltip(props: TooltipProps) {
   // The bubble sits at the window root's origin and is placed with the x/y
   // paint transforms, so repositioning never reflows. Measured after its first
   // layout (parked offscreen until then), then pinned to the anchor's current
-  // box; recomputed each layout so it stays attached when the anchor moves
-  // (scrolling, resizes).
+  // box (placePopup, centered on the anchor); recomputed each layout so it
+  // stays attached when the anchor moves (scrolling, resizes).
   let Bubble = () => {
     let bubble: { id: number } | undefined
     let [pos, setPos] = createSignal<{ x: number; y: number } | null>(null)
@@ -66,11 +64,9 @@ export function Tooltip(props: TooltipProps) {
       let a = anchor && getBoundingBox(anchor)
       let b = bubble && getBoundingBox(bubble)
       if (!a || !b) return
-      let x = a.x + a.width / 2 - b.width / 2
-      x = Math.round(Math.min(Math.max(x, margin()), env.windowSize.width - b.width - margin()))
-      let y = Math.round(props.placement === "bottom" ? a.y + a.height + gap() : a.y - b.height - gap())
+      let p = placePopup(a, b, { side: props.placement ?? "top", align: "center" })
       let cur = pos()
-      if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
+      if (!cur || cur.x !== p.x || cur.y !== p.y) setPos({ x: p.x, y: p.y })
     })
     // Resolved once via children(): the typeof probe and the mount sites must
     // share one build - reading the raw getter again would orphan native nodes.

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