@solidrt/components 0.0.60 → 0.0.62

package/src/dismissible.tsx

@@ -0,0 +1,124 @@
+import { createSignal, createSwipe, getLayoutBox } from "@solidrt/core"
+import type { LayoutProps, SwipeDirection, TransitionEndEvent } from "@solidrt/core"
+import type { StyleProps, TransitionProps, TransitionStyleProp, TransitionViewProp } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
+
+export type DismissDirection = "Left" | "Right"
+
+export interface DismissibleProps extends TransitionProps<TransitionViewProp | TransitionStyleProp> {
+  children?: any
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+  /** Which swipes dismiss: either way (default), or leftward or rightward
+   * only. A drag the other way is not started at all. */
+  direction?: "horizontal" | "left" | "right"
+  /** The content has left the box, with the swipe's direction. Remove
+   * the row here; until then it stays parked past the edge. */
+  onDismiss?: (direction: DismissDirection) => void
+}
+
+// The leave after a qualifying swipe finishes the remaining travel at the
+// swipe's own speed, within these bounds (ms): a flick never drags on, a
+// slow qualifying swipe never snaps.
+const LEAVE_MIN_MS = 120
+const LEAVE_MAX_MS = 400
+// The spring back to rest after a drag that did not qualify.
+const SNAP_BACK = { duration: 250 }
+
+/**
+ * Swipe-to-dismiss: the content follows the finger sideways and, on a
+ * qualifying swipe (core's swipe recognizer: enough travel and speed,
+ * within 30 degrees of the axis), leaves the box that way and reports
+ * `onDismiss`; a drag that stops short springs back. The recognizer steals
+ * the pointer at its slop, so a pressable row still presses on a tap and
+ * retracts once the drag is one; a vertical drag over the row is left to an
+ * enclosing ScrollView. Mouse and touch alike. The box itself does not
+ * shrink: the caller removes the row (its exit transition then plays).
+ */
+export function Dismissible(props: DismissibleProps) {
+  let node: { id: number } | undefined
+  let [offset, setOffset] = createSignal(0)
+  let [dragging, setDragging] = createSignal(false)
+  // The leave in flight: its tween, and the direction to report at its
+  // end. Plain state is the truth (onSwipe and onSwipeEnd run in one
+  // handler, before any signal flush); the signal drives the motion.
+  let leave: { duration: number; direction: DismissDirection } | null = null
+  let [leaving, setLeaving] = createSignal<{ duration: number; direction: DismissDirection } | null>(null)
+
+  let directions = (): SwipeDirection[] => (props.direction === "left" ? ["Left"] : props.direction === "right" ? ["Right"] : ["Left", "Right"])
+  let width = () => (node && getLayoutBox(node)?.width) || 0
+
+  let swipe = createSwipe({
+    get directions() {
+      return directions()
+    },
+    onSwipeStart: () => setDragging(true),
+    onSwipeMove: dx => setOffset(offset() + dx),
+    onSwipe: (direction, velocity) => {
+      let w = width()
+      let target = direction === "Left" ? -w : w
+      let remaining = Math.abs(target - offset())
+      let speed = Math.abs(velocity.vx)
+      let duration = speed > 0 ? Math.min(LEAVE_MAX_MS, Math.max(LEAVE_MIN_MS, (remaining / speed) * 1000)) : LEAVE_MAX_MS
+      leave = { duration, direction: direction as DismissDirection }
+      setLeaving(leave)
+      setOffset(target)
+    },
+    onSwipeEnd: () => {
+      setDragging(false)
+      if (!leave) setOffset(0)
+    },
+  })
+
+  let settled = (e: TransitionEndEvent) => {
+    if (e.property === "x" && leave) {
+      let done = leave
+      leave = null
+      setLeaving(null)
+      props.onDismiss?.(done.direction)
+    }
+  }
+  // The content's x: tracked exactly under the finger, tweened out on a
+  // leave, sprung back otherwise.
+  let motion = () => {
+    if (dragging()) return null
+    let leave = leaving()
+    return leave ? { x: { duration: leave.duration, curve: "ease-out" as const } } : { x: SNAP_BACK }
+  }
+  let split = () => splitTransition(props.transition)
+
+  return (
+    <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
+      ref={(n: { id: number }) => {
+        node = n
+        props.ref?.(n)
+      }}
+      overflow="hidden"
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
+      {...swipe.handlers}
+    >
+      {props.style?.backgroundColor != null || props.style?.borderRadius != null ? (
+        <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
+          color={props.style?.backgroundColor ?? "transparent"}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
+      {/* transition before x: props apply in source order, and the leave's
+          tween must be declared before the value that starts it lands in
+          the same flush, or the write snaps and no end ever fires. */}
+      <view flexDirection="column" transition={motion()} onTransitionEnd={settled} x={offset()}>
+        {props.children}
+      </view>
+    </view>
+  )
+}

package/src/editor-field.tsx

@@ -19,21 +19,25 @@ import {
 } from "@solidrt/core"
 import { createTextEditorLayout } from "@solidrt/core/text-input"
 import type { EditorLine, TextBuffer } from "@solidrt/core/text-input"
-import type { Color, Gradient, KeyEvent, LayoutProps, PointerEvent, TextInputHints } from "@solidrt/core"
+import type { Color, Gradient, KeyEvent, PointerEvent, TextInputHints } from "@solidrt/core"
 import type { Element } from "solid-js"
 import type { MeasureTextOptions, TextRunRange } from "flux:rendertree"
 import { registerNavAction } from "./focus-nav"
-import type { StyleProps, TransitionProps } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import type { EditorLayoutProps, StyleProps, TransitionProps } from "./types"
+import { splitTextLayout, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { colorFade } from "./motion"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
+import { typeWeight } from "./typography"
 
 // Caret thickness. Shared so the drawn caret and the scroll offset's reserved
 // edge column cannot drift apart.
 const CARET_WIDTH = 1
 
+// Caret blink half-period: how long the caret shows, then hides.
+const CARET_BLINK_MS = 500
+
 // Shaping width of the placeholder: effectively unbounded, so it never wraps;
 // the viewport clips it.
 const PLACEHOLDER_SHAPE_WIDTH = 1e9
@@ -41,7 +45,7 @@ const PLACEHOLDER_SHAPE_WIDTH = 1e9
 /** What the shell hands renderLine for one laid-out line. */
 export type LineRender = {
   line: () => EditorLine
-  /** The field's font options (size, line height), the base for the line's text. */
+  /** The field's resolved font (family, size, line height, style, weight), the base for the line's text. */
   font: () => MeasureTextOptions
   /** The field's text color. */
   color: () => Color | Gradient
@@ -68,7 +72,8 @@ export interface EditorFieldProps extends TransitionProps {
   maxRows?: number
   hints?: TextInputHints
   ref?: (node: { id: number }) => void
-  layout?: LayoutProps
+  /** The box, plus the font the text is shaped in (theme body font by default; fontSize is scaled by policy.textScale). */
+  layout?: EditorLayoutProps
   style?: StyleProps
 }
 
@@ -85,7 +90,15 @@ export interface EditorFieldProps extends TransitionProps {
 // all; the highlight draws behind the lines while focused, and edits on a
 // 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). Outside-click-to-blur is the caller's job.
+// line breaks). A tap outside the field blurs it (core's outside-tap blur in
+// window.ts), as does Escape.
+// 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)[]
+  let kb = Object.keys(b) as (keyof MeasureTextOptions)[]
+  return ka.length === kb.length && ka.every((k) => a[k] === b[k])
+}
+
 export function EditorField(props: EditorFieldProps) {
   let [caretOn, setCaretOn] = createSignal(true)
 
@@ -93,17 +106,61 @@ export function EditorField(props: EditorFieldProps) {
   let viewport: { id: number } | undefined
   let blinkId: any = null
 
+  // The caret shows solid for a full half-period after any activity (the
+  // session starting, a move, an edit, a tap) and blinks from there: the
+  // timer restarts on each, as editors do, so the caret never vanishes under
+  // a typing hand and a read right after an input finds it drawn. A
+  // wall-clock interval on purpose: it wakes twice a second, where an onFrame
+  // loop would hold a standing frame request for every editing field. Timers
+  // follow the dev clock control (pause, step), so a frozen frame keeps the
+  // caret it had.
+  let startBlink = () => {
+    setCaretOn(true)
+    if (blinkId != null) clearInterval(blinkId)
+    blinkId = setInterval(() => setCaretOn((v) => !v), CARET_BLINK_MS)
+  }
+  // Activity before the session (a tap's own pointerdown precedes it, and a
+  // navigation-focused field moves its caret with no session yet) or after
+  // it ended (a paste that settles late) has no blink to restart; the
+  // editing effect below starts it.
+  let restartBlink = () => {
+    if (blinkId != null) startBlink()
+  }
+
   // 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.
+  // onFocus/onBlur handlers below keep only the 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
   })
 
+  // Focused and editing are distinct (see activateField): a field focused by
+  // navigation, or by autoFocus/setFocus on a device whose on-screen keyboard
+  // would come up, has no text session until a tap or startTextInput(), and
+  // typing does nothing. The caret means "you can type", so it follows the
+  // session, not focus: a focused-not-editing field shows only its focus
+  // ring. Where the session starts invisibly at focus (desktop, physical
+  // keyboard) the two coincide.
+  let editing = createMemo(() => focused() && textInputActive())
+
+  // The blink runs exactly while editing. An effect rather than the focus
+  // handler: setFocus fires onFocus before it starts the session, so even
+  // on desktop the handler runs with textInputActive() still false.
+  createEffect(
+    () => editing(),
+    (active) => {
+      if (!active) return
+      startBlink()
+      return () => {
+        if (blinkId != null) clearInterval(blinkId)
+        blinkId = null
+      }
+    },
+  )
+
   // Grapheme steps from the editor's caret stops; the editor is created
   // below and only consulted from event handlers, after both exist. The
   // factory is a one-shot by contract: read once, deliberately untracked.
@@ -162,7 +219,7 @@ export function EditorField(props: EditorFieldProps) {
     let offset = offsetAt(e)
     buffer.setSelection(e.shiftKey ? buffer.selection().anchor : offset, offset)
     if (e.pointerType !== "touch" && (e.button == null || e.button === 0)) dragArmed = e.pointerId
-    setCaretOn(true)
+    restartBlink()
   }
 
   let handleViewportPointerMove = (e: PointerEvent) => {
@@ -173,7 +230,7 @@ export function EditorField(props: EditorFieldProps) {
     }
     if (dragActive === e.pointerId) {
       buffer.setSelection(buffer.selection().anchor, offsetAt(e))
-      setCaretOn(true)
+      restartBlink()
     }
   }
 
@@ -185,20 +242,18 @@ export function EditorField(props: EditorFieldProps) {
     }
   }
 
+  // The caller's handlers are read untracked: setFocus runs the focus and
+  // blur handlers synchronously, and a caller focusing from an effect (this
+  // field's own autoFocus, an app's setFocus) would otherwise land these
+  // prop reads inside its owned scope, where dev warns STRICT_READ_UNTRACKED.
+  // A handler is a one-shot read by nature; nothing here re-runs on a
+  // handler swap, and the swapped-in one is read at the next event.
   let handleFocus = () => {
-    setCaretOn(true)
-    if (blinkId == null) {
-      blinkId = setInterval(() => setCaretOn((v) => !v), 500)
-    }
-    props.onFocus?.()
+    untrack(() => props.onFocus)?.()
   }
 
   let handleBlur = () => {
-    if (blinkId != null) {
-      clearInterval(blinkId)
-      blinkId = null
-    }
-    props.onBlur?.()
+    untrack(() => props.onBlur)?.()
   }
 
   // Keys the input consumes stop propagating: an ancestor (or an app-global
@@ -209,16 +264,16 @@ export function EditorField(props: EditorFieldProps) {
     let consumed = true
     if (e.key === "Backspace") {
       buffer.deleteBackward()
-      setCaretOn(true)
+      restartBlink()
     } else if (e.key === "Delete") {
       buffer.deleteForward()
-      setCaretOn(true)
+      restartBlink()
     } else if (e.key === "ArrowLeft") {
       buffer.move("left", { extend: e.shiftKey })
-      setCaretOn(true)
+      restartBlink()
     } else if (e.key === "ArrowRight") {
       buffer.move("right", { extend: e.shiftKey })
-      setCaretOn(true)
+      restartBlink()
     } else if (e.key === "Home" || e.key === "End") {
       // Multiline: the current line's ends (offsetAtX at 0 / far right, so a
       // wrap boundary resolves to the position that shows on this line).
@@ -228,13 +283,13 @@ export function EditorField(props: EditorFieldProps) {
       } else {
         buffer.move(e.key === "Home" ? "start" : "end", { extend: e.shiftKey })
       }
-      setCaretOn(true)
+      restartBlink()
     } else if (props.multiline && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
       moveLine(e.key === "ArrowUp" ? -1 : 1, e.shiftKey)
-      setCaretOn(true)
+      restartBlink()
     } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
       buffer.setSelection(0, value().length)
-      setCaretOn(true)
+      restartBlink()
     } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
       // Copy acts only on a range; an empty selection leaves the key (and the
       // clipboard) alone and lets it bubble to app shortcuts.
@@ -249,7 +304,7 @@ export function EditorField(props: EditorFieldProps) {
         // clipboard write is reported, not undone.
         navigator.clipboard.writeText(text).catch((err) => console.warn("Clipboard cut failed: " + err))
         buffer.insertText("")
-        setCaretOn(true)
+        restartBlink()
       }
     } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
       navigator.clipboard.readText().then(
@@ -257,13 +312,13 @@ export function EditorField(props: EditorFieldProps) {
           if (text.length === 0) return
           if (!props.multiline) text = text.replace(/\r?\n/g, " ")
           buffer.insertText(text)
-          setCaretOn(true)
+          restartBlink()
         },
         (err) => console.warn("Clipboard paste failed: " + err),
       )
     } else if (props.multiline && e.key === "Enter" && textInputActive()) {
       buffer.insertText("\n")
-      setCaretOn(true)
+      restartBlink()
     } else if (e.key === "Enter" || e.code === "Select") {
       // The remote center key's `key` is "Unidentified"; match its code.
       activateField()
@@ -282,7 +337,7 @@ export function EditorField(props: EditorFieldProps) {
   let handleTextInput = (e: any) => {
     if (props.disabled) return
     buffer.insertText(e.text ?? "")
-    setCaretOn(true)
+    restartBlink()
   }
 
   // Up/Down: the offset on the neighbouring line nearest the caret's x; on
@@ -318,7 +373,6 @@ export function EditorField(props: EditorFieldProps) {
   let unregisterNav: (() => void) | null = null
 
   onCleanup(() => {
-    if (blinkId != null) clearInterval(blinkId)
     unregisterNav?.()
     // An unmount mid-drag must not leave a resolved arena claim behind.
     if (dragActive != null) arena.release(dragActive, dragOwner)
@@ -335,7 +389,7 @@ export function EditorField(props: EditorFieldProps) {
   let borderRadius = () => props.style?.borderRadius ?? theme.radius.md
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
-  let showCaret = () => focused() && caretOn() && !showPlaceholder()
+  let showCaret = () => editing() && caretOn() && !showPlaceholder()
 
   // Everything inside the viewport is detached: the value is drawn per
   // laid-out line by renderLine (createTextEditorLayout breaks the lines from
@@ -344,14 +398,32 @@ export function EditorField(props: EditorFieldProps) {
   // movement, blink and scroll never touch layout. The single-line viewport
   // carries an explicit height (detached content takes no layout slot) equal
   // to the one-line height; a multiline viewport stretches to the field's
-  // height. The editor layout keeps the caret in view and flushes the offsets
-  // before paint; scrollX/scrollY are paint-time translates that also apply
-  // to detached children.
-  // All metrics derive from the scaled body size, so the field, the caret,
-  // and the scroll math grow together under policy.textScale.
-  let fontSize = () => theme.text.body.size * policy.textScale
-  let font = () => ({ fontSize: fontSize(), lineHeight: theme.text.body.lineHeight })
-  let rowHeight = () => Math.round(fontSize() * theme.text.body.lineHeight)
+  // height. The editor layout keeps the caret in view (its offsets land in the
+  // post-layout flush, before paint); scrollX/scrollY are paint-time
+  // translates that also apply to detached children.
+  // The font is the layout's font fields over the theme's body role,
+  // resolved like Text resolves its own (family, scaled size, line height,
+  // style, compensated weight); every metric - the rows, the caret, the
+  // scroll math, the placeholder - derives from it, so a field at a larger
+  // size grows as one. The box half of the layout is what the view takes.
+  let layout = createMemo(() => splitTextLayout(props.layout))
+  let layoutFont = () => layout().text as EditorLayoutProps
+  let fontSize = () => (layoutFont().fontSize ?? theme.text.body.size) * policy.textScale
+  let lineHeight = () => layoutFont().lineHeight ?? theme.text.body.lineHeight
+  // A memo, equal by field: the editor layout reads the font on every
+  // caret, text or size change, and rebuilding it (theme, policy and the
+  // weight compensation) per read cost more than the geometry it fed.
+  let font = createMemo(
+    (): MeasureTextOptions => ({
+      fontFamily: layoutFont().fontFamily ?? theme.text.fontFamily,
+      fontSize: fontSize(),
+      lineHeight: lineHeight(),
+      fontStyle: layoutFont().fontStyle,
+      fontWeight: typeWeight(layoutFont().fontWeight ?? theme.text.body.weight, fontSize()),
+    }),
+    { equals: sameFont },
+  )
+  let rowHeight = () => Math.round(fontSize() * lineHeight())
   let editor = createTextEditorLayout(
     () => viewport,
     () => ({
@@ -368,12 +440,20 @@ export function EditorField(props: EditorFieldProps) {
   )
   let caret = editor.caret
 
-  // Multiline viewport height: a caller-given field height stretches the
-  // viewport (fixed box, scrolls); otherwise the content height, at least one
-  // row and at most maxRows rows. Single-line is always one row.
-  let viewportHeight = (): number | undefined => {
+  // The viewport's natural height: one row single-line; multiline, the
+  // content's height, at least one row and at most maxRows rows. It is the
+  // viewport's flex basis in the field's column, not a fixed size: a
+  // multiline viewport grows and shrinks with the field's box (flexGrow and
+  // flexShrink below), so a field the caller sizes - `layout.height`,
+  // `flexGrow: 1` in a sized parent, a parent too small for the content -
+  // is a fixed box that scrolls to the caret, and an unconstrained one
+  // grows with its content. Both the field and the viewport take minHeight
+  // 0 for that: a flex item's automatic minimum is its content height,
+  // which would pin the content-sized basis and overflow the parent
+  // instead of shrinking (CSS needs the same `min-height: 0`). Single-line
+  // never flexes: it is one row, centered in a taller box.
+  let viewportHeight = (): number => {
     if (!props.multiline) return rowHeight()
-    if (props.layout?.height != null) return undefined
     let lines = editor.lines()
     let last = lines[lines.length - 1]!
     let content = Math.ceil(last.y + last.height)
@@ -391,17 +471,21 @@ export function EditorField(props: EditorFieldProps) {
         node = n
         unregisterNav?.()
         unregisterNav = registerNavAction(n.id, activateField)
-        props.ref?.(n)
+        // A ref callback runs in the element's owned scope, so the caller's
+        // ref is read untracked (see handleFocus).
+        untrack(() => props.ref)?.(n)
       }}
       textInputHints={props.multiline ? { multiline: true, ...props.hints } : props.hints}
       focusable
-      flexDirection="row"
-      alignItems="center"
+      cursor="text"
+      flexDirection="column"
+      justifyContent="center"
+      minHeight={props.multiline ? 0 : undefined}
       paddingLeft={space("md")}
       paddingRight={space("md")}
       paddingTop={space("md")}
       paddingBottom={space("md")}
-      {...props.layout}
+      {...layout().box}
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
@@ -424,9 +508,11 @@ export function EditorField(props: EditorFieldProps) {
       />
       <view
         ref={(n: { id: number }) => (viewport = n)}
-        flex={1}
         height={viewportHeight()}
-        alignSelf={props.multiline ? "stretch" : undefined}
+        minHeight={props.multiline ? 0 : undefined}
+        flexGrow={props.multiline ? 1 : 0}
+        flexShrink={props.multiline ? 1 : 0}
+        alignSelf="stretch"
         overflow="hidden"
         scrollX={editor.scrollX()}
         scrollY={editor.scrollY()}

package/src/index.ts

@@ -7,6 +7,8 @@ export { TextInput, type TextInputProps } from "./text-input"
 export { RichTextEditor, type RichTextEditorProps } from "./rich-text-editor"
 export { createDocumentBuffer, plainDocument, ATOM, type Document, type DocumentRun, type DocumentBuffer, type DocumentBufferOptions, type Attributes, type AttributePatch } from "./rich-text-document"
 export { ScrollView, type ScrollViewProps } from "./scroll-view"
+export { Dismissible, type DismissibleProps, type DismissDirection } from "./dismissible"
+export { Carousel, type CarouselProps } from "./carousel"
 export { Pressable, type PressableProps, type PressState } from "./pressable"
 export { Button, type ButtonProps, type ButtonVariant } from "./button"
 export { createFocusNav, uiActions, uiBindings, type FocusNavOptions, type UiActions, type UiDevices } from "./focus-nav"
@@ -62,7 +64,9 @@ export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
 export type {
   StyleProps,
+  FontProps,
   TextLayoutProps,
+  EditorLayoutProps,
   Option,
   TransitionProps,
   ComponentTransition,

package/src/item.tsx

@@ -1,4 +1,4 @@
-import { Show, children } from "@solidrt/core"
+import { Show, children, untrack } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
@@ -65,7 +65,10 @@ export function Item(props: ItemProps) {
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(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="row"
@@ -85,6 +88,7 @@ export function Item(props: ItemProps) {
       // pointers from its children (a Switch in a settings row) or from an
       // enclosing pressable. Interactivity is decided at mount.
       {...(props.onPress != null ? press.handlers : {})}
+      cursor={props.onPress != null ? "pointer" : undefined}
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >

package/src/nav-shell.tsx

@@ -66,6 +66,7 @@ export function NavShell(props: NavShellProps) {
         paddingBottom={p.padY}
         {...p.layout}
         {...press.handlers}
+        cursor="pointer"
       >
         <d-rect transition={colorFade()} color={itemBg(p.item)} radius={theme.radius.sm} />
         <PressFeedback
@@ -122,6 +123,7 @@ export function NavShell(props: NavShellProps) {
                 marginLeft={theme.spacing.sm}
                 marginRight={theme.spacing.sm}
                 {...press.handlers}
+                cursor="pointer"
               >
                 <d-rect transition={colorFade()} color={itemBg(item)} radius={theme.radius.sm} />
                 <PressFeedback

package/src/press.ts

@@ -38,7 +38,10 @@ export interface PressOptions {
 // Moves and the up arrive on the frozen down path, so the press survives
 // leaving the node: while outside its window-relative bounds the pressed state
 // clears (visual feedback retracts), wandering back in restores it (press
-// retention), and only an up inside fires onPress. Enter/leave drive hover
+// retention), and only an up inside fires onPress - at once, unless a
+// double-tap recognizer is pending on the pointer (core's arena relation),
+// when the firing waits for that recognizer to fail (the double-tap
+// window passing) and is dropped when it wins. Enter/leave drive hover
 // alone. Non-primary buttons (right/middle) do not start a press. cancel() is
 // the external-cancel hook; it ends the press without firing. Options are read
 // at event time, so passing a component's reactive props object keeps handler
@@ -147,11 +150,17 @@ export function createPress(options: PressOptions) {
   let owner = { cancel }
 
   // A press abandoned mid-flight (unmount during a drag) must not leave its
-  // claim behind, or that pointer id could never press anything again.
+  // claim behind, or that pointer id could never press anything again. A
+  // firing the arena deferred (see onPointerUp) past the unmount is dropped.
+  let disposed = false
   onSettled(() => () => {
+    disposed = true
     disengage()
     unregisterNav?.()
   })
+  let fireDeferred = () => {
+    if (!disposed) activate()
+  }
 
   let handlers = {
     onPointerDown: (e: PointerEvent) => {
@@ -174,7 +183,9 @@ export function createPress(options: PressOptions) {
       if (active === e.pointerId) {
         let fire = inside
         cancel()
-        if (fire) activate()
+        // A double-tap pending on this pointer (arena.pend) holds the
+        // firing until it fails; with nothing pending the press fires now.
+        if (fire && !arena.defer(e.pointerId, fireDeferred)) activate()
       }
       options.onPointerUp?.(e)
     },

package/src/pressable.tsx

@@ -1,4 +1,4 @@
-import { children } from "@solidrt/core"
+import { children, untrack } from "@solidrt/core"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps, TransitionProps } from "./types"
 import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
@@ -62,7 +62,10 @@ export function Pressable(props: PressableProps) {
       onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(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
       {...props.layout}
@@ -84,6 +87,7 @@ export function Pressable(props: PressableProps) {
       onTextInput={props.onTextInput}
       focusable={props.focusable === true && props.disabled !== true}
       pointerEvents={props.disabled ? "none" : props.pointerEvents}
+      cursor={props.cursor ?? "pointer"}
     >
       {hasBackground() ? (
         <d-rect

package/src/radio.tsx

@@ -111,6 +111,7 @@ export function Radio(props: RadioProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
       {...press.handlers}
+      cursor="pointer"
       focusable={!disabled()}
       pointerEvents={disabled() ? "none" : undefined}
     >