@solidrt/core 0.0.55 → 0.0.56

package/src/text-input.ts

@@ -214,6 +214,9 @@ export type EditorLine = {
 /** The caret's box in content coordinates (before scroll). */
 export type CaretRect = { x: number; y: number; height: number }
 
+/** One line's slice of a selection highlight, in content coordinates (before scroll). */
+export type SelectionRect = { x: number; y: number; width: number; height: number }
+
 export type TextEditorLayout = {
   lines(): EditorLine[]
   caret(): CaretRect
@@ -221,6 +224,8 @@ export type TextEditorLayout = {
   caretLine(): number
   /** The caret position (grapheme boundary) on line `line` nearest to content x. */
   offsetAtX(line: number, x: number): number
+  /** Highlight boxes for the anchor..focus range, one per touched line; empty when collapsed. */
+  selectionRects(anchor: number, focus: number): SelectionRect[]
   /** Index of the line at content y (clamped to the first/last line). */
   lineAtY(y: number): number
   /** The caret position one grapheme left/right of `offset`; a break sequence is one step. For createTextBuffer's `step`. */
@@ -322,18 +327,22 @@ export function createTextEditorLayout(
   }
   let caretLine = createMemo(() => lineOf(input().caret))
 
-  // The caret sits at the last stop at or before its offset (an offset inside
-  // a grapheme, e.g. from a controlled value, snaps back).
-  let caret = createMemo((): CaretRect => {
-    let offset = input().caret
-    let index = caretLine()
-    let line = lines()[index]!
+  // The x of the last stop at or before `offset` on line `index` (an offset
+  // inside a grapheme, e.g. from a controlled value, snaps back).
+  let xAt = (index: number, offset: number): number => {
     let x = 0
     for (let stop of lineStops(index)) {
       if (stop.offset > offset) break
       x = stop.x
     }
-    return { x, y: line.y, height: line.height }
+    return x
+  }
+
+  let caret = createMemo((): CaretRect => {
+    let offset = input().caret
+    let index = caretLine()
+    let line = lines()[index]!
+    return { x: xAt(index, offset), y: line.y, height: line.height }
   })
 
   // Only positions that show on this line are candidates: a boundary offset
@@ -352,6 +361,32 @@ export function createTextEditorLayout(
     return best
   }
 
+  // One box per line the range touches, offsets snapped to stops like the
+  // caret. A line the selection continues past (every one but the last)
+  // highlights to its ink end plus a space width, so the selected break - a
+  // newline, or the wrap the range crosses - is visible, and a selected empty
+  // line shows as that sliver alone. The last line ends at the focus stop; a
+  // range ending on a wrap boundary owns a zero-width box there (the boundary
+  // offset displays on the next line) and drops it.
+  let selectionRects = (anchor: number, focus: number): SelectionRect[] => {
+    let start = Math.min(anchor, focus)
+    let end = Math.max(anchor, focus)
+    if (start >= end) return []
+    let ls = lines()
+    let first = lineOf(start)
+    let last = lineOf(end)
+    let breakWidth = measureText(" ", input().font).width
+    let out: SelectionRect[] = []
+    for (let i = first; i <= last; i++) {
+      let line = ls[i]!
+      let x = i === first ? xAt(i, start) : 0
+      let width = i === last ? xAt(i, end) - x : Math.max(line.width - x, 0) + breakWidth
+      if (width <= 0) continue
+      out.push({ x, y: line.y, width, height: line.height })
+    }
+    return out
+  }
+
   let lineAtY = (y: number): number => {
     let ls = lines()
     let index = 0
@@ -399,7 +434,7 @@ export function createTextEditorLayout(
     setScrollY(follow(scrollY(), c.y, c.height, vh, contentHeight))
   })
 
-  return { lines, caret, caretLine, offsetAtX, lineAtY, step, scrollX, scrollY }
+  return { lines, caret, caretLine, offsetAtX, selectionRects, lineAtY, step, scrollX, scrollY }
 }
 
 // Wrap units wider than `width` (through their glued pieces) split into one

package/src/transform.ts

@@ -26,14 +26,18 @@ const ENGAGE = 0.6
 const QUIET_SMOOTH = 0.19
 
 export type TransformDelta = {
-  /** Focal-point movement since the previous frame, logical px. */
+  /** Focal-point movement since the previous frame, in the handler node's
+   * PARENT frame (the frame its own x/y live in: window pixels under no
+   * scaling ancestor, design pixels under a designSize fit), so it applies
+   * 1:1 to the node or to content inside it. */
   dx: number
   dy: number
   /** Multiplicative span change since the previous frame (1 = unchanged, >1 = fingers spreading). */
   scale: number
   /** Rotation of the pointer pair since the previous frame, radians (0 with a single pointer). */
   rotation: number
-  /** Current focal point in window coordinates (the clientX/clientY frame) - the zoom-about anchor. */
+  /** Current focal point in the handler node's LOCAL frame (its own
+   * pixels) - the zoom-about anchor for content inside it. */
   x: number
   y: number
   /** How many pointers are down right now. Consumers that give one- and
@@ -106,12 +110,25 @@ export interface TransformOptions {
 // path, so an active transform survives leaving the node or the window.
 // cancel() is the external-cancel hook; it ends an active gesture without
 // onTransformEnd. Options are read at event time.
+//
+// Frames: the slop, the span filter and its rate gates are finger-travel
+// thresholds, so they are measured in window pixels (clientX/clientY);
+// the focal movement (dx/dy) and the pair angle are measured in the node's
+// parent frame (parentX/parentY), the frame the node's own coordinates
+// live in, so a scaled ancestor (a designSize fit) is accounted for and
+// the delta applies unchanged to the node or to content inside it; the
+// focal point (x/y) is reported in the node's local frame (localX/localY),
+// the anchor a zoom-about-the-fingers needs. Scale and rotation are ratios
+// and angles, the same in every uniformly scaled frame. The event carries
+// all three frames exactly, on and off the node.
 export function createTransform(options: TransformOptions) {
+  type Tracked = { cx: number; cy: number; px: number; py: number; lx: number; ly: number }
+  let at = (e: PointerEvent): Tracked => ({ cx: e.clientX, cy: e.clientY, px: e.parentX, py: e.parentY, lx: e.localX, ly: e.localY })
   // All tracked pointers, in down order (the first two define the rotation pair).
-  let pointers = new Map<number, { x: number; y: number }>()
+  let pointers = new Map<number, Tracked>()
   let active = false
   // Slop baseline while armed; last delivered configuration while active.
-  let ref: { x: number; y: number; span: number; angle: number } | null = null
+  let ref: { cx: number; cy: number; px: number; py: number; span: number; angle: number } | null = null
   // The zoom gate and filter (see the zoom-noise note above): scale stays 1
   // until the SMOOTHED span leaves spanBase by SLOP, then streams smoothed
   // ratios for the rest of the gesture.
@@ -128,27 +145,41 @@ export function createTransform(options: TransformOptions) {
   // emits nothing.
   let rebase = false
 
+  // Centroids in all three frames, the span in window pixels (it feeds the
+  // finger-travel gates), the pair angle in the parent frame.
   let measure = () => {
     let n = pointers.size
-    let x = 0
-    let y = 0
+    let cx = 0
+    let cy = 0
+    let px = 0
+    let py = 0
+    let lx = 0
+    let ly = 0
     for (let p of pointers.values()) {
-      x += p.x
-      y += p.y
+      cx += p.cx
+      cy += p.cy
+      px += p.px
+      py += p.py
+      lx += p.lx
+      ly += p.ly
     }
-    x /= n
-    y /= n
+    cx /= n
+    cy /= n
+    px /= n
+    py /= n
+    lx /= n
+    ly /= n
     let span = 0
-    for (let p of pointers.values()) span += Math.hypot(p.x - x, p.y - y)
+    for (let p of pointers.values()) span += Math.hypot(p.cx - cx, p.cy - cy)
     span /= n
     let angle = 0
     if (n >= 2) {
       let pair = pointers.values()
       let a = pair.next().value!
       let b = pair.next().value!
-      angle = Math.atan2(b.y - a.y, b.x - a.x)
+      angle = Math.atan2(b.py - a.py, b.px - a.px)
     }
-    return { x, y, span, angle }
+    return { cx, cy, px, py, lx, ly, span, angle }
   }
 
   let reset = () => {
@@ -202,10 +233,10 @@ export function createTransform(options: TransformOptions) {
       if (rotation > Math.PI) rotation -= 2 * Math.PI
       else if (rotation < -Math.PI) rotation += 2 * Math.PI
     }
-    let dx = m.x - ref.x
-    let dy = m.y - ref.y
+    let dx = m.px - ref.px
+    let dy = m.py - ref.py
     ref = m
-    options.onTransformMove?.({ dx, dy, scale, rotation, x: m.x, y: m.y, pointers: pointers.size })
+    options.onTransformMove?.({ dx, dy, scale, rotation, x: m.lx, y: m.ly, pointers: pointers.size })
   }
 
   // An unmount mid-gesture must not leave resolved claims behind (or a live
@@ -226,24 +257,22 @@ export function createTransform(options: TransformOptions) {
         // A finger joining an established gesture belongs to it outright; if
         // the arena refuses (resolved elsewhere) the finger stays out.
         if (!arena.steal(e.pointerId, owner)) return
-        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+        pointers.set(e.pointerId, at(e))
         rebase = true
         return
       }
-      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+      pointers.set(e.pointerId, at(e))
       ref = measure()
     },
     onPointerMove: (e: PointerEvent) => {
-      let p = pointers.get(e.pointerId)
-      if (!p || !ref) return
-      p.x = e.clientX
-      p.y = e.clientY
+      if (!pointers.has(e.pointerId) || !ref) return
+      pointers.set(e.pointerId, at(e))
       if (!active) {
         // Arming runs per event: the slop test tolerates a mixed-age
         // measure (8px against <=1 frame of staleness), and the arena
         // steal must happen synchronously inside the dispatch walk.
         let m = measure()
-        let travel = Math.hypot(m.x - ref.x, m.y - ref.y)
+        let travel = Math.hypot(m.cx - ref.cx, m.cy - ref.cy)
         if (travel < SLOP && Math.abs(m.span - ref.span) < SLOP) return
         let taken: number[] = []
         let refused = false

package/src/types.d.ts

@@ -175,6 +175,48 @@ export interface PaintProps {
   strokeWidth?: number
 }
 
+/**
+ * A drop shadow behind a shape (CSS box-shadow field semantics, one shadow):
+ * the shape's outer geometry, offset by x/y, grown by `spread`, softened by
+ * `blur` (a CSS-style radius in logical px), painted in `color` under the
+ * shape. It casts from the shape's outer box whatever the draw style (strokes
+ * paint inside, so the box is the outer edge) - except on `path`, where the
+ * shadow mirrors the element's own fill/stroke silhouette and `spread` is
+ * rejected (an arbitrary path cannot be inflated exactly). `color` is
+ * required; there is no currentColor to inherit.
+ */
+export interface ShadowProps {
+  x?: number
+  y?: number
+  blur?: number
+  spread?: number
+  color: Color
+}
+
+/**
+ * A subtree filter (the CSS filter functions, object form): the view's
+ * children are composited together, run through the set color operations -
+ * fused into one color matrix, applied in the fixed order grayscale, sepia,
+ * saturate, hueRotate, brightness, contrast, invert - and then blurred.
+ * `blur` is a CSS-style radius in logical px; `hueRotate` is radians (this
+ * API's angle convention); the rest are the CSS amounts (1 = unchanged for
+ * saturate/brightness/contrast, 0 = unchanged for the others; grayscale,
+ * sepia and invert saturate at 1). There is no `opacity` key - the view's
+ * own `opacity` prop is the same compositing layer. Like opacity, a filter
+ * on a non-boundary view costs a save_layer; on a repaintBoundary view it
+ * rides the composite for free. Hit testing is unaffected.
+ */
+export interface FilterProps {
+  blur?: number
+  grayscale?: number
+  sepia?: number
+  saturate?: number
+  hueRotate?: number
+  brightness?: number
+  contrast?: number
+  invert?: number
+}
+
 /** A percentage value, from `pct(50)`. Resolves against the element box. */
 export type Pct = { readonly __unit: "pct"; v: number }
 
@@ -607,11 +649,13 @@ export interface WindowShaderProps {
   program: ProgramId
   /**
    * Uniforms filled by name, paced to the next real repaint. A number drives
-   * a scalar (`float`/`int`); a flat number array drives the declared GLSL
-   * type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
+   * a scalar (`float`/`int`); a flat number array (or a Float32Array /
+   * Float64Array) drives the declared GLSL type: 2/3/4 for
+   * `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`. An undefined or null
+   * entry is skipped.
    */
-  params?: Record<string, number | number[]>
-  /** Extra sampler2D inputs: uniform name to texture id, or `{ id, filter?, wrap? }` for a per-binding sampling override. */
+  params?: Record<string, number | number[] | Float32Array | Float64Array>
+  /** Extra sampler2D inputs: uniform name to texture id, or `{ id, filter?, wrap? }` for a per-binding sampling override. An undefined or null entry is skipped. */
   textures?: TextureBindings
   /** Vertices drawn (attributeless triangles). Default 3, the covering triangle. */
   vertexCount?: number
@@ -671,7 +715,9 @@ export interface ViewOwnProps extends TransformProps, PointerProps {
    * skipping rasterization entirely. Costs texture memory and re-rasterizes
    * on layout-size or display-scale changes. Content painted outside the
    * element's layout box is cropped, and ancestor scale animations smear the
-   * bitmap; best for screen-aligned, static, raster-expensive content.
+   * bitmap; best for screen-aligned, static, raster-expensive content. On a
+   * d-view the box is the inherited frame (the nearest laid-out ancestor's
+   * box, or the design size under a designSize view), same as a capture.
    *
    * "snapshot-no-aa" is "snapshot" rasterized without anti-aliasing: cheaper
    * (no multisampled scratch, one render pass), but vector content - svg
@@ -701,6 +747,19 @@ export interface ViewOwnProps extends TransformProps, PointerProps {
    * unrotated, opaque content.
    */
   shader?: ViewShaderProps | null
+  filter?: FilterProps
+  /**
+   * Filters the pixels already painted BENEATH the view's box, in place,
+   * before the view's own content draws - frosted glass over live content
+   * (CSS `backdrop-filter`). Same keys and semantics as `filter`. The
+   * region is the layout box; give the view an overflow clip with
+   * `clipRadius` for rounded glass. Costs an offscreen capture of the
+   * pixels beneath at that point in the frame, so treat it as a deliberate
+   * panel, not a casual style. Inside a `repaintBoundary="snapshot"`
+   * subtree it sees only that boundary's own offscreen content, never what
+   * is behind the boundary (the same containment `blendMode` has there).
+   */
+  backdropFilter?: FilterProps
 }
 
 /**
@@ -716,11 +775,13 @@ export interface ViewShaderProps {
   program: ProgramId
   /**
    * Uniforms filled by name, paced to the next real repaint. A number drives
-   * a scalar (`float`/`int`); a flat number array drives the declared GLSL
-   * type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
+   * a scalar (`float`/`int`); a flat number array (or a Float32Array /
+   * Float64Array) drives the declared GLSL type: 2/3/4 for
+   * `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`. An undefined or null
+   * entry is skipped.
    */
-  params?: Record<string, number | number[]>
-  /** Extra sampler2D inputs: uniform name to texture id, or `{ id, filter?, wrap? }` for a per-binding sampling override. */
+  params?: Record<string, number | number[] | Float32Array | Float64Array>
+  /** Extra sampler2D inputs: uniform name to texture id, or `{ id, filter?, wrap? }` for a per-binding sampling override. An undefined or null entry is skipped. */
   textures?: TextureBindings
   /**
    * Transparent margin in logical px on every side of the layout box, for
@@ -761,10 +822,13 @@ export interface RectProps extends PaintProps, PointerProps, DashProps {
   // number applies to all four corners; an array is [top-left, top-right,
   // bottom-right, bottom-left] (CSS border-radius order).
   radius?: number | [number, number, number, number]
+  shadow?: ShadowProps
 }
 
 // Strokes paint inside the box, same as `RectProps`.
-export interface OvalProps extends PaintProps, PointerProps, DashProps {}
+export interface OvalProps extends PaintProps, PointerProps, DashProps {
+  shadow?: ShadowProps
+}
 
 /**
  * A stroke's dash pattern, on every stroked primitive (`rect`, `oval`,
@@ -847,6 +911,8 @@ export interface LineProps extends PaintProps, PointerProps, DashProps {
 export interface PathProps extends PaintProps, PointerProps, DashProps {
   d?: string
   fillRule?: "nonzero" | "evenodd"
+  /** Shadows the drawn silhouette (fill and/or stroke); `spread` is rejected here. */
+  shadow?: ShadowProps
 }
 
 export type FontFamily = "sans" | "serif" | "mono" | (string & {})
@@ -957,7 +1023,8 @@ export interface TextureProps extends PaintProps, PointerProps {
   // throws, and set src before params: a write with no src to route to
   // throws). However often a signal writes, the target renders once per
   // frame at the raster flush. A number drives a scalar (`float`/`int`); a
-  // flat number array drives the declared GLSL type: 2/3/4 for
-  // `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
-  params?: Record<string, number | number[]>
+  // flat number array (or a Float32Array / Float64Array) drives the declared
+  // GLSL type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
+  // An undefined or null entry is skipped.
+  params?: Record<string, number | number[] | Float32Array | Float64Array>
 }

package/src/window.ts

@@ -1,4 +1,4 @@
-import { createSignal, onCleanup, onSettled, flush } from "@solidjs/signals"
+import { createSignal, getOwner, onCleanup, onSettled, runWithOwner, flush } from "@solidjs/signals"
 import { requestFrame, setPointerLock } from "flux:rendertree"
 import { renderFrame } from "srt:render"
 import { on, once } from "srt:events"
@@ -7,8 +7,8 @@ import { getEventHandler, focusedNode, setFocus, activateTextInput, setInterestR
 import { scanForOrphans, getNodePath } from "./renderer"
 
 /**
- * Leaves the current app, unconditionally: back to the launcher in a dev
- * client, quitting when standalone or at the launcher itself (on Android the
+ * Leaves the current app, unconditionally: back to the player in a dev
+ * client, quitting when standalone or at the player itself (on Android the
  * client backgrounds instead of dying). The default action of an unprevented
  * `back` event; call it directly to exit programmatically, e.g. after
  * intercepting back for an unsaved-changes dialog.
@@ -44,7 +44,10 @@ let refreshRate = 60
  * control, but measure their delays against the wall clock, not this paced
  * timeline. performance.now() is not on it either: it is real elapsed time
  * for measuring work; Date.now() is calendar time.
- * Returns a cleanup function; also auto-cleans within a reactive scope.
+ * Returns a cleanup function; also auto-cleans within an owned scope. Outside
+ * one - an effect's apply phase, an event handler - the returned cleanup is
+ * the only handle, so return it from the apply (`return onFrame(...)`) to run
+ * a loop only while a condition holds.
  */
 export function onFrame(fn: (tick: number, frame: number, rate: number) => void) {
   let frameId: number = null!
@@ -77,7 +80,7 @@ export function onFrame(fn: (tick: number, frame: number, rate: number) => void)
     cancelled = true
     animationFrames.delete(frameId)
   }
-  onCleanup(cleanup)
+  if (getOwner()) onCleanup(cleanup)
   return cleanup
 }
 
@@ -101,7 +104,7 @@ interface ResizeEvent {
 
 export function onResize(fn: (data: ResizeEvent) => void) {
   let unsubscribe = on("resize", fn)
-  onCleanup(unsubscribe)
+  if (getOwner()) onCleanup(unsubscribe)
   return unsubscribe
 }
 
@@ -110,9 +113,13 @@ export function onResize(fn: (data: ResizeEvent) => void) {
 // Singleton accessors over the same events as onResize / onWindowFocus. There
 // is one window, so these are bare accessors rather than a createX instance.
 // Lazily subscribed on first read (resize is sticky, so the first read sees the
-// current value); app-lifetime, so no onCleanup. `ownedWrite: true` on the
-// signals below is the sticky-replay-into-a-tracked-scope case explained on
-// the ensure* functions in environment.ts.
+// current value); app-lifetime, so no onCleanup. Each is created under no
+// owner (runWithOwner(null)): the first read is usually a component or a
+// computation, and a sticky event replays its cached value synchronously
+// inside on(), so creating the signal in the reader's scope would write it
+// there too - a render-time write, which the guard rejects. Detached, the
+// fact belongs to the app, not to whoever read it first (the reasoning
+// in full is on the ensure* functions in environment.ts).
 
 let sizeAccessor: (() => { width: number; height: number }) | undefined
 let safeAreaAccessor: (() => SafeArea) | undefined
@@ -120,17 +127,19 @@ let displayScaleAccessor: (() => number) | undefined
 
 function ensureResizeState() {
   if (sizeAccessor) return
-  let [size, setSize] = createSignal({ width: 0, height: 0 }, { ownedWrite: true })
-  let [safe, setSafe] = createSignal<SafeArea>({ top: 0, left: 0, right: 0, bottom: 0 }, { ownedWrite: true })
-  let [scale, setScale] = createSignal(1, { ownedWrite: true })
-  on("resize", (e: ResizeEvent) => {
-    setSize({ width: e.width, height: e.height })
-    setSafe(e.safeArea)
-    setScale(e.displayScale)
+  runWithOwner(null, () => {
+    let [size, setSize] = createSignal({ width: 0, height: 0 })
+    let [safe, setSafe] = createSignal<SafeArea>({ top: 0, left: 0, right: 0, bottom: 0 })
+    let [scale, setScale] = createSignal(1)
+    on("resize", (e: ResizeEvent) => {
+      setSize({ width: e.width, height: e.height })
+      setSafe(e.safeArea)
+      setScale(e.displayScale)
+    })
+    sizeAccessor = size
+    safeAreaAccessor = safe
+    displayScaleAccessor = scale
   })
-  sizeAccessor = size
-  safeAreaAccessor = safe
-  displayScaleAccessor = scale
 }
 
 /** Current window size, as a reactive accessor. */
@@ -156,12 +165,14 @@ let focusedAccessor: (() => boolean) | undefined
 /** Whether the window currently has focus, as a reactive accessor. */
 export function windowFocused(): boolean {
   if (!focusedAccessor) {
-    let [focused, setFocused] = createSignal(true)
-    on("windowFocus", () => setFocused(true))
-    on("windowBlur", () => setFocused(false))
-    focusedAccessor = focused
+    runWithOwner(null, () => {
+      let [focused, setFocused] = createSignal(true)
+      on("windowFocus", () => setFocused(true))
+      on("windowBlur", () => setFocused(false))
+      focusedAccessor = focused
+    })
   }
-  return focusedAccessor()
+  return focusedAccessor!()
 }
 
 /**
@@ -183,12 +194,14 @@ let pointerLockedAccessor: (() => boolean) | undefined
 /** Whether the pointer is currently locked (relative mouse mode), as a reactive accessor. */
 export function pointerLocked(): boolean {
   if (!pointerLockedAccessor) {
-    let [locked, setLocked] = createSignal(false)
-    // Sticky event: a subscriber after the lock still observes the state.
-    on("pointerLock", ({ locked }: { locked: boolean }) => setLocked(locked))
-    pointerLockedAccessor = locked
+    runWithOwner(null, () => {
+      let [locked, setLocked] = createSignal(false)
+      // Sticky event: a subscriber after the lock still observes the state.
+      on("pointerLock", ({ locked }: { locked: boolean }) => setLocked(locked))
+      pointerLockedAccessor = locked
+    })
   }
-  return pointerLockedAccessor()
+  return pointerLockedAccessor!()
 }
 
 let keyboardHeightAccessor: (() => number) | undefined
@@ -201,11 +214,13 @@ let keyboardHeightAccessor: (() => number) | undefined
  */
 export function keyboardHeight(): number {
   if (!keyboardHeightAccessor) {
-    let [height, setHeight] = createSignal(0)
-    on("keyboardVisibility", ({ height: h }: { height: number }) => setHeight(h ?? 0))
-    keyboardHeightAccessor = height
+    runWithOwner(null, () => {
+      let [height, setHeight] = createSignal(0)
+      on("keyboardVisibility", ({ height: h }: { height: number }) => setHeight(h ?? 0))
+      keyboardHeightAccessor = height
+    })
   }
-  return keyboardHeightAccessor()
+  return keyboardHeightAccessor!()
 }
 
 // Post-layout handlers run in registration order from one bus subscription,
@@ -251,19 +266,19 @@ export function onLayout(fn: () => void) {
     let i = layoutHandlers.indexOf(fn)
     if (i >= 0) layoutHandlers.splice(i, 1)
   }
-  onCleanup(unsubscribe)
+  if (getOwner()) onCleanup(unsubscribe)
   return unsubscribe
 }
 
 export function onWindowFocus(fn: () => void) {
   let unsubscribe = on("windowFocus", fn)
-  onCleanup(unsubscribe)
+  if (getOwner()) onCleanup(unsubscribe)
   return unsubscribe
 }
 
 export function onWindowBlur(fn: () => void) {
   let unsubscribe = on("windowBlur", fn)
-  onCleanup(unsubscribe)
+  if (getOwner()) onCleanup(unsubscribe)
   return unsubscribe
 }
 
@@ -295,7 +310,8 @@ let backHandlers: ((e: BackEvent) => void)[] = []
  * handler that does not prevent must not act either - the event is still on its
  * way to whoever will handle it.
  *
- * Returns a cleanup function; also auto-cleans within a reactive scope.
+ * Returns a cleanup function; also auto-cleans within an owned scope (outside
+ * one the returned cleanup is the only handle).
  */
 export function onBack(fn: (e: BackEvent) => void) {
   backHandlers.push(fn)
@@ -303,7 +319,7 @@ export function onBack(fn: (e: BackEvent) => void) {
     let i = backHandlers.lastIndexOf(fn)
     if (i >= 0) backHandlers.splice(i, 1)
   }
-  onCleanup(cleanup)
+  if (getOwner()) onCleanup(cleanup)
   return cleanup
 }