@solidrt/core 0.0.60 → 0.0.61

package/src/long-press.ts

@@ -0,0 +1,137 @@
+// The long-press recognizer: a pointer held LONG_PRESS_MS without leaving
+// TAP_SLOP of its down fires while still down, then streams moves until
+// the lift (drag-after-long-press is the reorder idiom: the finger that
+// held a row now carries it).
+//
+// Arena: the down arms silently, no claim. A claim at the down would be
+// refused wherever a press already holds the pointer (the same node, or
+// an inner pressable), and the wanted behaviour there is the press
+// showing pressed and the long-press winning at the timer, so the steal
+// happens at the timer instead: the press is cancelled (its feedback
+// retracts, it never fires), an ancestor pan can no longer take the
+// finger, moves stream to the consumer. A pan that crossed its slop first
+// resolved the arena, so the timer's steal is refused and the recognizer
+// stands down: scrolling a list of long-pressable rows scrolls. Nested
+// long-presses resolve innermost-first for free: the inner timer was
+// registered first in the leaf-to-root walk. Options are read at event
+// time; cancel() retracts without an end; an unmount clears the timer and
+// the claim. Mouse and touch alike (a held button long-presses).
+//
+// The hold timer itself (createHoldTimer) is shared with the pointer
+// feed's longPress source, which pulses instead of stealing: the feed is
+// one arena claimant (its transform) and must stay so.
+
+import { onSettled } from "@solidjs/signals"
+import type { PointerEvent } from "./types"
+import { arena, type ArenaOwner } from "./arena"
+import { pastSlop, pointAt, type PointerPoint } from "./gesture"
+
+// Hold before a long-press fires: Flutter, iOS and Android's upper value.
+const LONG_PRESS_MS = 500
+
+export interface HoldTimerOptions {
+  /** Read when the timer is armed. */
+  ms?: () => number | undefined
+  onFire: (pointerId: number, at: PointerPoint, event: { shiftKey: boolean; ctrlKey: boolean; altKey: boolean; metaKey: boolean; button?: number }) => void
+}
+
+/** The arm / slop / timer machine under a long-press: one pointer at a
+ * time, disarmed by travel, by a lift, by a second pointer or by cancel(). */
+export function createHoldTimer(options: HoldTimerOptions) {
+  let armed: { id: number; at: PointerPoint; mods: { shiftKey: boolean; ctrlKey: boolean; altKey: boolean; metaKey: boolean; button?: number } } | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let disarm = () => {
+    if (timer !== null) clearTimeout(timer)
+    timer = null
+    armed = null
+  }
+  return {
+    /** The pointer armed right now, if any. */
+    armed: () => armed?.id ?? null,
+    down(e: PointerEvent) {
+      if (armed) {
+        // A second finger is not a long-press.
+        disarm()
+        return
+      }
+      let ms = options.ms?.() ?? LONG_PRESS_MS
+      armed = { id: e.pointerId, at: pointAt(e), mods: { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey, button: e.button } }
+      timer = setTimeout(() => {
+        timer = null
+        let a = armed!
+        armed = null
+        options.onFire(a.id, a.at, a.mods)
+      }, ms)
+    },
+    move(e: PointerEvent) {
+      if (armed && armed.id === e.pointerId && pastSlop(e, armed.at)) disarm()
+    },
+    up(e: PointerEvent) {
+      if (armed && armed.id === e.pointerId) disarm()
+    },
+    cancel: disarm,
+  }
+}
+
+export interface LongPressOptions {
+  /** Hold before the fire, default 500 ms. */
+  ms?: number
+  /** Fired at the timer while the pointer is still down, with the down's
+   * position. */
+  onLongPress?: (at: PointerPoint) => void
+  /** Movement since the previous event after the fire, in the handler
+   * node's parent frame (createPan's frame rule). */
+  onLongPressMove?: (dx: number, dy: number) => void
+  /** The lift after a fire. */
+  onLongPressEnd?: () => void
+}
+
+export function createLongPress(options: LongPressOptions) {
+  // The pointer the long-press won, and its last delivered parent position.
+  let fired: number | null = null
+  let last: { x: number; y: number } | null = null
+  let hold = createHoldTimer({
+    ms: () => options.ms,
+    onFire: (id, at) => {
+      if (!arena.steal(id, owner)) return
+      fired = id
+      last = { x: at.parentX, y: at.parentY }
+      options.onLongPress?.(at)
+    },
+  })
+  let cancel = () => {
+    hold.cancel()
+    if (fired !== null) {
+      arena.release(fired, owner)
+      fired = null
+      last = null
+    }
+  }
+  let owner: ArenaOwner = { cancel }
+  onSettled(() => cancel)
+
+  let handlers = {
+    onPointerDown: (e: PointerEvent) => {
+      if (e.button != null && e.button !== 0) return
+      if (fired !== null) return
+      hold.down(e)
+    },
+    onPointerMove: (e: PointerEvent) => {
+      if (fired === e.pointerId && last) {
+        options.onLongPressMove?.(e.parentX - last.x, e.parentY - last.y)
+        last = { x: e.parentX, y: e.parentY }
+        return
+      }
+      hold.move(e)
+    },
+    onPointerUp: (e: PointerEvent) => {
+      if (fired === e.pointerId) {
+        cancel()
+        options.onLongPressEnd?.()
+        return
+      }
+      hold.up(e)
+    },
+  }
+  return { handlers, cancel }
+}

package/src/pan.ts

@@ -1,6 +1,8 @@
 import { onSettled } from "@solidjs/signals"
 import type { PointerEvent } from "./types"
 import { arena } from "./arena"
+import { createVelocityTracker, flingVelocity } from "./velocity"
+import type { Velocity } from "./velocity"
 
 // Movement in logical pixels before a pan activates. Below this a drag still
 // reads as a press (tap wiggle); crossing it is the positive evidence that the
@@ -26,7 +28,13 @@ export interface PanOptions {
    * Positive dx is rightward, positive dy downward.
    */
   onPanMove?: (dx: number, dy: number) => void
-  onPanEnd?: () => void
+  /**
+   * The lift, with the pointer's velocity at it in the same parent-frame
+   * pixels per second (a least-squares fit over the last 100 ms, see
+   * velocity.ts): the fling fact for whoever animates on. Zero when the
+   * finger rested before lifting or moved under FLING_MIN_VELOCITY.
+   */
+  onPanEnd?: (velocity: Velocity) => void
 }
 
 // The pan recognizer: turns a drag into a movement-delta stream. On a down it
@@ -36,8 +44,11 @@ export interface PanOptions {
 // resolving it so no other recognizer can take the drag over. If the arena is
 // already resolved (an inner pan won first) the recognizer disarms and stays
 // out. The slop distance itself is swallowed: deltas stream from the
-// activation point on. Moves and the up arrive on the frozen down path, so an
-// active pan keeps streaming when the pointer leaves the node or the window.
+// activation point on, and the up carries the lift velocity (velocity.ts: a
+// fit over the last 100 ms of positions, zero after a rest or under the
+// fling minimum) for momentum. Moves and the up arrive on the frozen down
+// path, so an active pan keeps streaming when the pointer leaves the node
+// or the window.
 // cancel() is the external-cancel hook; it ends an active pan without
 // onPanEnd. Options are read at event time. Single-pointer by design; for
 // multi-pointer pinch/rotate compose createTransform instead.
@@ -55,6 +66,8 @@ export function createPan(options: PanOptions) {
   let origin: { x: number; y: number } | null = null
   let active: number | null = null
   let armed: number | null = null
+  // Parent-frame positions of the active pointer, for the lift's velocity.
+  let tracker = createVelocityTracker()
 
   let past = (e: PointerEvent) => {
     if (!origin) return false
@@ -94,6 +107,8 @@ export function createPan(options: PanOptions) {
           active = e.pointerId
           armed = null
           origin = { x: e.parentX, y: e.parentY }
+          tracker.reset()
+          tracker.push(e.parentX, e.parentY)
           options.onPanStart?.()
         } else {
           // The arena is resolved against us; the drag belongs elsewhere.
@@ -102,14 +117,18 @@ export function createPan(options: PanOptions) {
         return
       }
       if (active === e.pointerId && origin) {
+        tracker.push(e.parentX, e.parentY)
         options.onPanMove?.(e.parentX - origin.x, e.parentY - origin.y)
         origin = { x: e.parentX, y: e.parentY }
       }
     },
     onPointerUp: (e: PointerEvent) => {
       if (active === e.pointerId) {
+        // The up is not a sample: it sits where the last move left the
+        // pointer, and its age is what tells a rest from a flick.
+        let velocity = flingVelocity(tracker.velocity())
         reset()
-        options.onPanEnd?.()
+        options.onPanEnd?.(velocity)
       } else if (armed === e.pointerId) {
         reset()
       }

package/src/renderer.ts

@@ -1,6 +1,8 @@
-import { createRoot, onCleanup, NotReadyError, untrack } from "@solidjs/signals"
+// createErrorBoundary comes from signals, not solid-js: solid-js marks it
+// @internal (an app writes <Errored>, a renderer reaches for the primitive)
+// and strips it from its .d.ts, so the solid-js re-export types as any.
+import { createErrorBoundary, createRoot, onCleanup, NotReadyError, untrack } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
-import { createErrorBoundary } from "solid-js"
 import type { Element } from "solid-js"
 import * as tree from "flux:rendertree"
 import { attachWindow, setWindowRoot } from "./window"
@@ -116,6 +118,10 @@ function removeNode(parent: ProxyNode, node: ProxyNode): void {
 const SENTINEL_INTERVAL_MS = 5000
 let sentinelDue = 0
 let warnedLeakTypes = new Set<string>()
+// The orphan total's order of magnitude (floor of log10) at the last
+// warning: a leak that keeps growing at a stable set of types warns again
+// each time the total crosses the next power of ten.
+let warnedMagnitude = -1
 
 export function scanForOrphans(now: number): void {
   if (!import.meta.env.DEV) return
@@ -129,18 +135,22 @@ export function scanForOrphans(now: number): void {
     counts.set(node.elementType, (counts.get(node.elementType) ?? 0) + 1)
   }
   if (total === 0) return
-  // Warn only when a new element type joins the orphans, but list every type
-  // with its count so the breakdown always adds up to the total.
+  // Warn when a new element type joins the orphans or the total crosses the
+  // next order of magnitude, but list every type with its count so the
+  // breakdown always adds up to the total.
   let fresh = [...counts].filter(([type]) => !warnedLeakTypes.has(type))
-  if (fresh.length === 0) return
+  let magnitude = Math.floor(Math.log10(total))
+  if (fresh.length === 0 && magnitude <= warnedMagnitude) return
   for (let [type] of fresh) warnedLeakTypes.add(type)
+  warnedMagnitude = magnitude
   let list = [...counts].map(([type, n]) => `<${type}> x${n}`).join(", ")
   console.warn(
     `Leak sentinel: ${total} nodes are unreachable and will never be freed: ${list}. ` +
       `The usual cause is reading an element-valued prop more than once (every read ` +
       `builds a new subtree); read it once where it mounts, or resolve it with ` +
       `children(). If these nodes are intentionally kept for later mounting, ignore ` +
-      `this. The next warning comes when a new element type joins the list.`,
+      `this. The next warning comes when a new element type joins the list or the ` +
+      `total passes ${10 ** (magnitude + 1)}.`,
   )
 }
 

package/src/runtime-modules.d.ts

@@ -51,6 +51,10 @@ declare module "*.glb" {
   const bytes: Uint8Array
   export default bytes
 }
+declare module "*.srtm" {
+  const bytes: Uint8Array
+  export default bytes
+}
 
 // UI event bus (lattice), provided by the runtime as a builtin module.
 // on/once return an unsubscribe function. Notable events: the routed pointer

package/src/svg.ts

@@ -27,6 +27,7 @@ export type SvgDraw = {
   color: string | Gradient
   drawStyle: "fill" | "stroke"
   fillRule?: "nonzero" | "evenodd"
+  /** Absent when the source omits it: the d-path default of 1 applies, SVG's own. */
   strokeWidth?: number
   strokeCap?: StrokeCap
   strokeJoin?: StrokeJoin

package/src/swipe.ts

@@ -0,0 +1,130 @@
+// The swipe recognizer: a one-pointer drag that, at the lift, has
+// travelled SWIPE_MIN_DISTANCE from its down at SWIPE_MIN_VELOCITY or
+// more, within SWIPE_ANGLE_TOLERANCE of one of the four axes. Discrete:
+// onSwipe fires once, at the lift, with the direction and the velocity.
+// Direction is the dominant axis of the VELOCITY, not of the travel (a
+// finger that wandered then flicked swipes where it flicked). A drag
+// that ends without qualifying gets onSwipeEnd alone, so a consumer that
+// followed the finger snaps back.
+//
+// Built on createPan with the pan's axis derived from the allowed
+// directions: a horizontal-only swipe inside a vertical ScrollView takes
+// only horizontal drags, exactly as nested scrollers share drags today,
+// and it steals at the pan's slop, so a pressable under it retracts. The
+// pan measures the parent-frame velocity it hands the consumer; the
+// thresholds are finger travel, so the swipe keeps a second tracker in
+// window pixels over the events it wraps. The classifier is shared with
+// the pointer feed's swipe sources. Mouse and touch alike.
+
+import { createPan } from "./pan"
+import type { PointerEvent } from "./types"
+import { createVelocityTracker } from "./velocity"
+import type { Velocity } from "./velocity"
+
+export type SwipeDirection = "Left" | "Right" | "Up" | "Down"
+
+export const SWIPE_DIRECTIONS: readonly SwipeDirection[] = ["Left", "Right", "Up", "Down"]
+
+// Least finger travel (window px) from the down to the lift.
+const SWIPE_MIN_DISTANCE = 24
+// Least finger speed at the lift (window px/s): Android's usual
+// minimumFlingVelocity of 50 dp/s at the density it assumes.
+const SWIPE_MIN_VELOCITY = 300
+// How far off an axis (degrees) the velocity may point.
+const SWIPE_ANGLE_TOLERANCE = 30
+const OFF_AXIS_RATIO = Math.tan((SWIPE_ANGLE_TOLERANCE * Math.PI) / 180)
+
+/**
+ * The direction a lift swipes in, or null: `finger` is the velocity in
+ * window px/s, `travel` the window-px offset from the down.
+ */
+export function classifySwipe(finger: Velocity, travel: { dx: number; dy: number }, directions: readonly SwipeDirection[] = SWIPE_DIRECTIONS): SwipeDirection | null {
+  if (Math.hypot(travel.dx, travel.dy) < SWIPE_MIN_DISTANCE) return null
+  let ax = Math.abs(finger.vx)
+  let ay = Math.abs(finger.vy)
+  if (Math.hypot(ax, ay) < SWIPE_MIN_VELOCITY) return null
+  let direction: SwipeDirection
+  if (ax >= ay) {
+    if (ay > ax * OFF_AXIS_RATIO) return null
+    direction = finger.vx < 0 ? "Left" : "Right"
+  } else {
+    if (ax > ay * OFF_AXIS_RATIO) return null
+    direction = finger.vy < 0 ? "Up" : "Down"
+  }
+  return directions.includes(direction) ? direction : null
+}
+
+export interface SwipeOptions {
+  /** Which directions count; default all four. Decides the pan's axis:
+   * only Left/Right takes horizontal drags, only Up/Down vertical ones. */
+  directions?: SwipeDirection[]
+  onSwipeStart?: () => void
+  /** Movement since the previous event in the handler node's parent frame,
+   * so a card follows the finger (createPan's frame rule). */
+  onSwipeMove?: (dx: number, dy: number) => void
+  /** The lift qualified: fired once, before onSwipeEnd. `velocity` is the
+   * pan's, parent-frame px/s. */
+  onSwipe?: (direction: SwipeDirection, velocity: Velocity) => void
+  /** Every lift of an active swipe, qualified or not. */
+  onSwipeEnd?: (velocity: Velocity) => void
+}
+
+export function createSwipe(options: SwipeOptions) {
+  let directions = () => options.directions ?? SWIPE_DIRECTIONS
+  let axisOf = (): "horizontal" | "vertical" | "both" => {
+    let d = directions()
+    let h = d.includes("Left") || d.includes("Right")
+    let v = d.includes("Up") || d.includes("Down")
+    return h && !v ? "horizontal" : v && !h ? "vertical" : "both"
+  }
+  // The down's window position and the finger's window-px velocity, over
+  // every event the wrapped pan sees.
+  let down: { id: number; x: number; y: number } | null = null
+  // The lift's window position, set just before the pan's up runs.
+  let lift: { x: number; y: number } | null = null
+  let finger = createVelocityTracker()
+  let pan = createPan({
+    get axis() {
+      return axisOf()
+    },
+    onPanStart: () => options.onSwipeStart?.(),
+    onPanMove: (dx, dy) => options.onSwipeMove?.(dx, dy),
+    onPanEnd: velocity => {
+      let direction: SwipeDirection | null = null
+      if (down && lift) {
+        direction = classifySwipe(finger.velocity(), { dx: lift.x - down.x, dy: lift.y - down.y }, directions())
+      }
+      if (direction) options.onSwipe?.(direction, velocity)
+      options.onSwipeEnd?.(velocity)
+    },
+  })
+
+  let handlers = {
+    onPointerDown: (e: PointerEvent) => {
+      if (down === null && (e.button == null || e.button === 0)) {
+        down = { id: e.pointerId, x: e.clientX, y: e.clientY }
+        finger.reset()
+        finger.push(e.clientX, e.clientY)
+      }
+      pan.handlers.onPointerDown(e)
+    },
+    onPointerMove: (e: PointerEvent) => {
+      if (down && down.id === e.pointerId) finger.push(e.clientX, e.clientY)
+      pan.handlers.onPointerMove(e)
+    },
+    onPointerUp: (e: PointerEvent) => {
+      if (down && down.id === e.pointerId) lift = { x: e.clientX, y: e.clientY }
+      pan.handlers.onPointerUp(e)
+      if (down && down.id === e.pointerId) {
+        down = null
+        lift = null
+      }
+    },
+  }
+  let cancel = () => {
+    pan.cancel()
+    down = null
+    lift = null
+  }
+  return { handlers, cancel }
+}

package/src/text-input.ts

@@ -5,7 +5,7 @@
 // are policy and belong to the component (the "skin") that composes these.
 
 import { createMemo, createSignal, flush, untrack } from "@solidjs/signals"
-import { getBoundingBox, layoutNextLine, measureText, prepareText, unitInk } from "./core"
+import { getLayoutBox, layoutNextLine, measureText, prepareText, unitInk } from "./core"
 import type { MeasureTextOptions, PreparedText, TextRunRange, TextUnit } from "flux:rendertree"
 import { onLayout } from "./window"
 
@@ -247,50 +247,82 @@ export type TextEditorLayout = {
  *
  * The scroll offsets are retained between frames and only adjusted when the
  * caret would fall outside the visible range, so stationary text does not
- * jump. The viewport size is read in onLayout and the synchronous flush
- * drains the update before paint, so lines and scroll track a caret, text or
- * size change in the same frame. Pure geometry: no caret rendering and no
- * placeholder/visual policy.
+ * jump. They derive from the caret, the lines and the viewport size, so a
+ * frame that changes none of them does no scroll work. The viewport size is
+ * the node's layout box (the untransformed solved box: the lines are drawn in
+ * the node's own frame, so an ancestor's scale must not change the wrap
+ * width), read in onLayout; the post-layout flush drains the update before
+ * paint, so lines and scroll track a caret, text or size change in the same
+ * frame. A size change that re-breaks nothing (an empty field, lines that
+ * still fit, a height-only change) stops at the line placement: the lines,
+ * the caret and everything the caller derives from them keep their values
+ * and re-run nothing, so a field inside a resizing box costs one placement
+ * per frame, not a flush of its whole graph. Pure geometry: no caret
+ * rendering and no placeholder/visual policy.
  */
 export function createTextEditorLayout(
   viewport: () => { id: number } | undefined,
   input: () => TextEditorLayoutInput,
 ): TextEditorLayout {
-  let [viewportSize, setViewportSize] = createSignal({ width: 0, height: 0 }, { equals: (a, b) => a.width === b.width && a.height === b.height })
-  let [scrollX, setScrollX] = createSignal(0)
-  let [scrollY, setScrollY] = createSignal(0)
+  // Width and height apart: wrapping depends on the width alone, so a
+  // height-only change (a field growing with its content) re-breaks nothing.
+  let [viewportWidth, setViewportWidth] = createSignal(0)
+  let [viewportHeight, setViewportHeight] = createSignal(0)
+
+  // The font as a value: input() builds a fresh options object per read, so
+  // field equality is what lets the metrics below key on the font itself.
+  let font = createMemo(() => input().font, { equals: sameOptions })
+
+  // One space in the font: its height sits the synthesized blank line, its
+  // width is the selection's break sliver. Measured once per font, not once
+  // per placement.
+  let space = createMemo(() => measureText(" ", font()))
 
   let prepared = createMemo(() => {
-    let { text, font, runs } = input()
-    return prepareText(text, { ...font, runs, carets: true })
+    let { text, runs } = input()
+    return prepareText(text, { ...font(), runs, carets: true })
   })
 
   // Lines carry their unit range so the caret math walks only their units.
+  // Equal placements (same units, same breaks and metrics) keep the previous
+  // value, so nothing downstream re-runs for a width change that changed
+  // no line. Within a changed placement, a line equal to its predecessor
+  // keeps the previous object: a row bound to it (a non-keyed <For> item)
+  // sees no change and writes nothing, so a moved break costs the lines it
+  // touched, not every line of the field.
   type PlacedLine = EditorLine & { from: number; to: number }
-  let placed = createMemo((): { units: TextUnit[]; lines: PlacedLine[] } => {
-    let { text, font, wrap, caretWidth = 0 } = input()
-    // Wrapped lines leave room for the caret at the end of a full line, so a
-    // wrapping editor never scrolls horizontally.
-    let width = wrap ? Math.max(0, viewportSize().width - caretWidth) : Infinity
-    let units = wrap ? splitWide(prepared(), width) : prepared()
-    let out: PlacedLine[] = []
-    let y = 0
-    let cursor = 0
-    let line = layoutNextLine(units, cursor, width)
-    let hardBreak = false
-    while (line) {
-      out.push({ start: line.start, end: line.end, y, height: line.height, width: line.width, from: line.from, to: line.to })
-      y += line.height
-      hardBreak = line.hardBreak
-      line = layoutNextLine(units, line.cursor, width)
-    }
-    if (out.length === 0 || hardBreak) {
-      let height = measureText(" ", font).height
-      let n = units.units.length
-      out.push({ start: text.length, end: text.length, y, height, width: 0, from: n, to: n })
-    }
-    return { units: units.units, lines: out }
-  })
+  type Placement = { units: TextUnit[]; lines: PlacedLine[] }
+  let placed = createMemo(
+    (prev): Placement => {
+      let { text, wrap, caretWidth = 0 } = input()
+      // Wrapped lines leave room for the caret at the end of a full line, so a
+      // wrapping editor never scrolls horizontally.
+      let width = wrap ? Math.max(0, viewportWidth() - caretWidth) : Infinity
+      let units = wrap ? splitWide(prepared(), width) : prepared()
+      let out: PlacedLine[] = []
+      let y = 0
+      let cursor = 0
+      let line = layoutNextLine(units, cursor, width)
+      let hardBreak = false
+      while (line) {
+        out.push({ start: line.start, end: line.end, y, height: line.height, width: line.width, from: line.from, to: line.to })
+        y += line.height
+        hardBreak = line.hardBreak
+        line = layoutNextLine(units, line.cursor, width)
+      }
+      if (out.length === 0 || hardBreak) {
+        let n = units.units.length
+        out.push({ start: text.length, end: text.length, y, height: space().height, width: 0, from: n, to: n })
+      }
+      if (prev && prev.units === units.units) {
+        for (let i = 0; i < out.length && i < prev.lines.length; i++) {
+          if (sameLine(prev.lines[i]!, out[i]!)) out[i] = prev.lines[i]!
+        }
+      }
+      return { units: units.units, lines: out }
+    },
+    { equals: samePlacement },
+  )
   let lines = createMemo((): EditorLine[] => placed().lines)
 
   // The caret stops of a line, left to right, with the pen advanced per unit;
@@ -375,7 +407,7 @@ export function createTextEditorLayout(
     let ls = lines()
     let first = lineOf(start)
     let last = lineOf(end)
-    let breakWidth = measureText(" ", input().font).width
+    let breakWidth = space().width
     let out: SelectionRect[] = []
     for (let i = first; i <= last; i++) {
       let line = ls[i]!
@@ -416,22 +448,29 @@ export function createTextEditorLayout(
     return 0
   }
 
-  onLayout(() => {
-    let node = viewport()
-    if (!node) return
-    let box = getBoundingBox(node)
-    setViewportSize({ width: box?.width ?? 0, height: box?.height ?? 0 })
-    flush()
-    let { width: vw, height: vh } = viewportSize()
+  // Each offset follows from its own previous value: `follow` moves it only
+  // when the caret has left the visible range, so the memo carries the
+  // retained position across recomputes.
+  let scrollX = createMemo((prev: number | undefined): number => {
     let { caretWidth = 0, wrap } = input()
+    if (wrap) return 0
+    let contentWidth = lines().reduce((w, l) => Math.max(w, l.width), 0)
+    let c = caret()
+    return follow(prev ?? 0, c.x, caretWidth, viewportWidth(), contentWidth + caretWidth)
+  })
+  let scrollY = createMemo((prev: number | undefined): number => {
     let ls = lines()
-    let contentWidth = ls.reduce((w, l) => Math.max(w, l.width), 0)
     let last = ls[ls.length - 1]!
-    let contentHeight = last.y + last.height
     let c = caret()
+    return follow(prev ?? 0, c.y, c.height, viewportHeight(), last.y + last.height)
+  })
 
-    setScrollX(wrap ? 0 : follow(scrollX(), c.x, caretWidth, vw, contentWidth + caretWidth))
-    setScrollY(follow(scrollY(), c.y, c.height, vh, contentHeight))
+  onLayout(() => {
+    let node = viewport()
+    if (!node) return
+    let box = getLayoutBox(node)
+    setViewportWidth(box?.width ?? 0)
+    setViewportHeight(box?.height ?? 0)
   })
 
   return { lines, caret, caretLine, offsetAtX, selectionRects, lineAtY, step, scrollX, scrollY }
@@ -480,6 +519,25 @@ function splitWide(prepared: PreparedText, width: number): PreparedText {
   return { text: prepared.text, units }
 }
 
+// Font options compared field by field: the same keys with the same values.
+function sameOptions(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])
+}
+
+// The same break (text range) at the same place with the same metrics.
+function sameLine(a: EditorLine, b: EditorLine): boolean {
+  return a.start === b.start && a.end === b.end && a.y === b.y && a.height === b.height && a.width === b.width
+}
+
+// Two placements of the same units with the same lines, break for break and
+// metric for metric.
+function samePlacement(a: { units: TextUnit[]; lines: EditorLine[] }, b: { units: TextUnit[]; lines: EditorLine[] }): boolean {
+  if (a.units !== b.units || a.lines.length !== b.lines.length) return false
+  return a.lines.every((l, i) => sameLine(l, b.lines[i]!))
+}
+
 // The scroll offset along one axis that keeps [pos, pos + size] within a
 // viewport of `extent`, moved only when it is out of view and clamped to the
 // content.