@solidrt/core 0.0.54 → 0.0.56

package/examples/stagger.tsx

@@ -0,0 +1,45 @@
+// Enter, exit and stagger are declared on elements; the runtime plays them
+// with no per-frame JS. `from` is the value a property animates in from at
+// first attach, `exit` the value it animates to on removal - the node stays
+// painted until that settles, then frees. Both are per-property entries on
+// the element's own transition spec. `stagger` (ms) goes on an ANCESTOR,
+// never on the animating elements: every descendant enter or exit that
+// begins in the same frame gets index * stagger of extra delay, in
+// occurrence order. It cascades nothing on its own - the descendants must
+// declare from/exit.
+//
+// An enter plays once per mount. To replay it, remount the subtree: a keyed
+// <Show> re-creates its child whenever `when` changes value, so bumping an
+// epoch replays the whole cascade. Tap anywhere: odd taps unmount the list
+// (staggered exits), even taps mount a fresh one (staggered enters).
+import { render, createSignal, Show } from "@solidrt/core"
+import type { Transition } from "@solidrt/core"
+
+const ROWS = ["Signals", "Effects", "Memos", "Stores", "Boundaries"]
+// Extra delay per row before its enter or exit starts.
+const STAGGER_MS = 70
+// Slide in from the left, out to the right; fade both ways.
+const SLIDE = { duration: 500, bounce: 0.2, from: -80, exit: 80 } satisfies Transition
+const FADE = { duration: 350, curve: "ease-out", from: 0, exit: 0 } satisfies Transition
+
+function App() {
+  let [epoch, setEpoch] = createSignal(1)
+
+  return (
+    <window padding={40} gap={12} onPointerDown={() => setEpoch((e) => e + 1)} transition={{ stagger: STAGGER_MS }}>
+      <text color="#8899aa" fontSize={14}>Tap to replay</text>
+      <Show when={epoch() % 2 === 1 ? epoch() : 0} keyed>
+        {(_epoch) =>
+          ROWS.map((label) => (
+            <view x={0} opacity={1} transition={{ x: SLIDE, opacity: FADE }} height={48} justifyContent="center" paddingLeft={16}>
+              <d-rect color="#2a3a55" radius={10} />
+              <text color="#e8eef6" fontSize={18}>{label}</text>
+            </view>
+          ))
+        }
+      </Show>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/text-flow.tsx

@@ -0,0 +1,90 @@
+// App-side line breaking. prepareText shapes a paragraph's words once (through
+// the shared word cache) into units carrying advance, ink width, ascent and
+// descent; layoutNextLine then breaks one line out of them per call, at
+// whatever width it is handed, and returns the cursor the next call continues
+// from. The engine never sees a "shape" or a "column": here the paragraph is
+// poured band by band into a circle (each band's width is the chord at that
+// height, its line centered on it) and, when the circle is full, the same
+// cursor continues in a column beside it. Every line is a d-text of exactly its
+// own text, so the whole break redoes on every resize for arithmetic plus
+// word-cache hits; nothing is shaped twice.
+import { For, createMemo, layoutNextLine, prepareText, render, windowSize } from "@solidrt/core"
+
+const FONT = { fontSize: 16, lineHeight: 1.4 }
+const PAD = 32
+// Gap between the circle and the column that continues its text.
+const GAP = 32
+// A chord shorter than this holds no word: skip the band at the circle's poles.
+const MIN_BAND = 90
+// Breathing room between the ring and the line ends.
+const INSET = 10
+
+const TEXT =
+  "A word is shaped once and keeps its width. From there a line is a loop: add words while the pen stays " +
+  "inside the width you were given, stop, and hand the cursor to whoever wants the next line. Give each " +
+  "call the chord of a circle and the paragraph fills the circle; give the next call a column and it " +
+  "continues there, because a column is only the same loop in a new box. The engine shaped the words " +
+  "before the first frame and never hears about circles or columns at all. Resize the window: the circle " +
+  "grows, every band changes width, and the text re-breaks into it while the words stay as they were. " +
+  "That is the whole trick, and it is the oldest one in typesetting: a compositor with a case of type " +
+  "never reshaped a letter when the column narrowed. The letters kept their width and only the breaks " +
+  "moved. Text engines lost that when a paragraph became one opaque object laid out at one width, and " +
+  "every layout question turned into a re-shape. Prepared text gives the idea back, and this page is that " +
+  "loop and nothing else."
+
+type Placed = { x: number, y: number, w: number, text: string }
+
+function App() {
+  let prepared = prepareText(TEXT, FONT)
+  let lines = createMemo<Placed[]>(() => {
+    let { width, height } = windowSize()
+    let r = Math.min(width * 0.24, (height - 2 * PAD) / 2)
+    let cx = PAD + r
+    let cy = height / 2
+    let units = prepared.units
+    // Single style: every line is as tall as its first unit.
+    let lineH = units[0]!.ascent + units[0]!.descent
+    let out: Placed[] = []
+    let cursor = 0
+    // The circle, top to bottom: each band's width is the chord at its middle.
+    for (let y = cy - r; y + lineH <= cy + r && cursor < units.length; y += lineH) {
+      let dy = y + lineH / 2 - cy
+      let half = Math.sqrt(Math.max(0, (r - INSET) * (r - INSET) - dy * dy))
+      if (2 * half < MIN_BAND) continue
+      let line = layoutNextLine(prepared, cursor, 2 * half)
+      if (!line) break
+      out.push({ x: cx - line.width / 2, y, w: line.width, text: prepared.text.slice(line.start, line.end) })
+      cursor = line.cursor
+    }
+    // The column beside it continues from the same cursor.
+    let colX = cx + r + GAP
+    let colW = width - colX - PAD
+    for (let y = PAD; y + lineH <= height - PAD && cursor < units.length; y += lineH) {
+      let line = layoutNextLine(prepared, cursor, colW)
+      if (!line) break
+      out.push({ x: colX, y, w: line.width, text: prepared.text.slice(line.start, line.end) })
+      cursor = line.cursor
+    }
+    return out
+  })
+  let circle = createMemo(() => {
+    let { width, height } = windowSize()
+    let r = Math.min(width * 0.24, (height - 2 * PAD) / 2)
+    return { x: PAD, y: height / 2 - r, d: 2 * r }
+  })
+  return (
+    <window>
+      <d-rect color="#f4efe6" />
+      <d-oval x={circle().x} y={circle().y} w={circle().d} h={circle().d} drawStyle="stroke" strokeWidth={1} color="#d8b26a" />
+      <For each={lines()} keyed={false}>
+        {line => (
+          <d-text x={line().x} y={line().y} w={line().w + 1} {...FONT} color="#2b2620">
+            {line().text}
+          </d-text>
+        )}
+      </For>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/text-glyphs.tsx

@@ -0,0 +1,73 @@
+// Per-glyph positions. prepareText with `carets: true` reports, per wrap unit,
+// the x of every grapheme boundary from the shaping the engine draws - kerning
+// included - so one d-text per glyph placed from them sits exactly on the whole
+// headline. Measuring characters one at a time with measureText cannot know a
+// glyph's neighbors, so pairs like AV and TA come out loose and the row drifts
+// right. Three rows of the same headline: drawn whole, per glyph from carets,
+// per glyph from measureText. Per-glyph d-texts are what a per-character effect
+// (a wave, a color cycle, a stagger) animates.
+import { measureText, prepareText, render } from "@solidrt/core"
+
+const FONT = { fontSize: 48, fontWeight: 800 } as const
+const HEADLINE = "AVATAR Two Ya"
+const LEFT = 32
+const TOP = 40
+const ROW = 96
+// A single glyph never wraps at this width; it only bounds the d-text.
+const GLYPH_W = FONT.fontSize * 2
+const LABEL = { fontSize: 13, color: "#8a8378" }
+
+type Glyph = { x: number, text: string }
+
+// Kerned: each unit's pen position plus its caret offsets.
+function fromCarets(): Glyph[] {
+  let prepared = prepareText(HEADLINE, { ...FONT, carets: true })
+  let out: Glyph[] = []
+  let pen = 0
+  for (let unit of prepared.units) {
+    let carets = unit.carets!
+    for (let i = 0; i + 1 < carets.length; i++) {
+      out.push({ x: pen + carets[i]!.x, text: prepared.text.slice(carets[i]!.offset, carets[i + 1]!.offset) })
+    }
+    pen += unit.advance
+  }
+  return out
+}
+
+// Unkerned: each character measured alone, advanced by its own width.
+function fromMeasure(): Glyph[] {
+  let out: Glyph[] = []
+  let x = 0
+  for (let ch of HEADLINE) {
+    out.push({ x, text: ch })
+    x += measureText(ch, FONT).width
+  }
+  return out
+}
+
+function Row(props: { y: number, label: string, glyphs: Glyph[], color: string }) {
+  return (
+    <d-view x={LEFT} y={props.y}>
+      <d-text y={-20} {...LABEL}>{props.label}</d-text>
+      {props.glyphs.map(g => (
+        <d-text x={g.x} w={GLYPH_W} {...FONT} color={props.color}>{g.text}</d-text>
+      ))}
+    </d-view>
+  )
+}
+
+function App() {
+  return (
+    <window>
+      <d-rect color="#f4efe6" />
+      <d-view x={LEFT} y={TOP}>
+        <d-text y={-20} {...LABEL}>whole headline</d-text>
+        <d-text {...FONT} color="#2b2620">{HEADLINE}</d-text>
+      </d-view>
+      <Row y={TOP + ROW} label="per glyph from carets: true (kerned)" glyphs={fromCarets()} color="#2b2620" />
+      <Row y={TOP + 2 * ROW} label="per glyph from measureText per character (drifts)" glyphs={fromMeasure()} color="#b3452b" />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/view-design-size.tsx

@@ -30,6 +30,11 @@
 // geometry - diagrams, slides, dashboards, game boards, emulator screens - fit
 // one design space instead.
 //
+// Design space changes the units, not the element choice: laid-out views and
+// text stay the default under a designSize (fact 3). The d-* scene below is
+// free-form drawn geometry; panels, cards and labels would still be built
+// from laid-out elements, as the flex row at the bottom shows.
+//
 // Resize the window and watch: the scene keeps its aspect ratio, everything
 // including text scales together, and the readout reports the same design
 // coordinates for the same spot on the scene at any window size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -17,6 +17,7 @@
     "./microphone": "./src/microphone.ts",
     "./speech-recognition": "./src/speech-recognition.ts",
     "./text-input": "./src/text-input.ts",
+    "./video": "./src/video.ts",
     "./jsx-runtime": "./jsx-runtime.d.ts",
     "./jsx-runtime-dev": "./jsx-runtime.d.ts"
   },
@@ -29,11 +30,11 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.54"
+    "@solidrt/flux-types": "0.0.56"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.3",
-    "@solidjs/universal": "2.0.0-rc.3",
-    "solid-js": "2.0.0-rc.3"
+    "@solidjs/signals": "2.0.0-rc.6",
+    "@solidjs/universal": "2.0.0-rc.6",
+    "solid-js": "2.0.0-rc.6"
   }
 }

package/src/color.ts

@@ -26,6 +26,23 @@ export function mixColors(a: string, b: string, t: number): string {
   return tree.mixColors(a, b, t)
 }
 
+// Alpha byte range of the packed 0xRRGGBBAA color.
+const ALPHA_MAX = 255
+
+/**
+ * The same CSS color at opacity `alpha` (0 = transparent, 1 = opaque),
+ * replacing whatever alpha the input carried. Returns `#rrggbbaa`. Accepts
+ * any color `parseColor` does, so a named color or an `rgb()` is fine. For a
+ * transparent variant of a theme color prefer this over an `rgba()` literal
+ * rebuilt by hand; for a tone that must not depend on what is drawn beneath,
+ * `mixColors` against the backdrop.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  let rgb = parseColor(color) >>> 8
+  let a = Math.round(Math.min(1, Math.max(0, alpha)) * ALPHA_MAX)
+  return "#" + rgb.toString(16).padStart(6, "0") + a.toString(16).padStart(2, "0")
+}
+
 /**
  * Perceived brightness of a CSS color, 0 (black) to 1 (white), YIQ-weighted.
  * Compare a text color against its backdrop to decide rendering polarity,

package/src/core.ts

@@ -1,6 +1,6 @@
 import * as tree from "flux:rendertree"
 import type { TextureId } from "flux:gpu"
-import { createSignal, onCleanup } from "@solidjs/signals"
+import { createSignal, getOwner, onCleanup } from "@solidjs/signals"
 import { on } from "srt:events"
 
 let handlers = new Map<number, Map<string, Function>>()
@@ -93,7 +93,7 @@ export function onPointerMove(fn: (e: GlobalPointerEvent) => void): () => void {
       if (interestRoot != null) syncInterest(interestRoot)
     }
   }
-  onCleanup(cleanup)
+  if (getOwner()) onCleanup(cleanup)
   return cleanup
 }
 
@@ -326,6 +326,19 @@ export function getBoundingBoxViewport(node: { id: number }): BoundingBox | null
   return tree.getBoundingBoxViewport(node.id)
 }
 
+/**
+ * The node's laid-out box in its parent's frame: layout output before any
+ * transform composes (DOM offsetLeft/offsetTop/offsetWidth/offsetHeight
+ * semantics). The untransformed companion to getBoundingBox: pointer events
+ * report localX/localY in this box's units, whatever designSize fits or
+ * transforms sit on the ancestor chain. A snapshot read like getBoundingBox
+ * (call it inside `onLayout` or an event handler); `null` for detached nodes
+ * and before the first layout.
+ */
+export function getLayoutBox(node: { id: number }): BoundingBox | null {
+  return tree.getLayoutBox(node.id)
+}
+
 /**
  * The texture id of a snapshot boundary's retained rasterization
  * (`repaintBoundary="snapshot"`): the subtree's pixels as a live texture any
@@ -352,11 +365,19 @@ export function measureText(text: string, options?: tree.MeasureTextOptions): {
 }
 
 /**
- * Segments `text` into wrap units (words with their trailing whitespace) and
- * shapes each in the given font, once, for laying lines out in app code with
- * layoutNextLine or arithmetic of your own over `units`. For the non-standard
- * case (text into a shape, around a moving obstacle, handed between columns,
- * fitted by size); regular text of any length is a <text>.
+ * App-side line breaking. Segments `text` into wrap units (words with their
+ * trailing whitespace) and shapes each in the given font, once, through the
+ * shared word cache; laying lines out is then arithmetic over `units`, with
+ * layoutNextLine or a loop of your own. This is how text goes into a shape,
+ * parts around an obstacle that is not in the flow, pours across columns
+ * (layoutNextLine's `cursor` continues a paragraph in the next box), fits a
+ * box by trying sizes, and gets per-glyph positions (`carets: true`; the
+ * only kerned source, see TextUnit.carets). Draw each line as a d-text of
+ * exactly its own text. Re-breaking every frame is cheap - the words are
+ * shaped already and the lines' d-texts hit the same cache - so a shape
+ * that moves or breathes can re-flow at frame rate. A paragraph that just
+ * wraps in a box is a <text>, which also does floats, balancing and
+ * ellipsis.
  */
 export function prepareText(text: string, options?: tree.MeasureTextOptions): tree.PreparedText {
   return tree.prepareText(text, options)

package/src/environment.ts

@@ -1,4 +1,4 @@
-import { createRoot, createSignal } from "@solidjs/signals"
+import { createSignal, runWithOwner } from "@solidjs/signals"
 import { on } from "srt:events"
 import { onPointerMove } from "./core"
 import { windowSize, safeArea, displayScale, windowFocused, keyboardHeight } from "./window"
@@ -12,13 +12,17 @@ import { windowSize, safeArea, displayScale, windowFocused, keyboardHeight } fro
 // capability derived from them can appear mid-session (e.g. the first mouse
 // move) but never flickers away.
 //
-// `ownedWrite: true` on the signals below: each is lazily created the first
-// time its ensure* function runs, which can happen inside a tracked scope
-// (e.g. a memo's first read of env.inputDevices). Sticky events replay their
-// cached value synchronously on subscribe (srt:events' on()), so that same
-// call can immediately write the signal it just created. That's a legitimate
-// internal-state write, not a stray write escaping a computation, so it opts
-// out of the write-in-owned-scope guard.
+// Every fact below is lazily created the first time its ensure* function
+// runs, which is usually inside a component or a computation (a memo's first
+// read of env.inputDevices, a HUD effect's first read of pointerLocked()).
+// Created there, the fact would belong to that reader: sticky events replay
+// their cached value synchronously on subscribe (srt:events' on()), so the
+// on() call writes the signal it just created inside the reader's owned
+// scope - a render-time write, which the guard rejects - and a root or a
+// subscription created there is disposed with the reader. The facts are
+// app-lifetime, so each ensure* creates under no owner (runWithOwner(null)):
+// the replay lands unowned, nothing is filed under the reader, and no
+// `ownedWrite` opt-out is needed.
 
 /** Connected input device classes, as reported by the runtime. */
 export interface InputDevices {
@@ -39,58 +43,68 @@ let devicesAccessor: (() => InputDevices | undefined) | undefined
 
 function ensureDevicesState() {
   if (devicesAccessor) return
-  let [devices, setDevices] = createSignal<InputDevices | undefined>(undefined, { ownedWrite: true })
-  // Sticky: the current state replays on subscribe, so the first read already
-  // sees it on runtimes that report devices.
-  on("inputDevices", (d: InputDevices) => {
-    setDevices({ keyboard: !!d.keyboard, mouse: !!d.mouse, touch: !!d.touch, screenKeyboard: !!d.screenKeyboard })
+  runWithOwner(null, () => {
+    let [devices, setDevices] = createSignal<InputDevices | undefined>(undefined)
+    // Sticky: the current state replays on subscribe, so the first read already
+    // sees it on runtimes that report devices.
+    on("inputDevices", (d: InputDevices) => {
+      setDevices({ keyboard: !!d.keyboard, mouse: !!d.mouse, touch: !!d.touch, screenKeyboard: !!d.screenKeyboard })
+    })
+    devicesAccessor = devices
   })
-  devicesAccessor = devices
 }
 
 let systemThemeAccessor: (() => SystemTheme) | undefined
 
 function ensureSystemThemeState() {
   if (systemThemeAccessor) return
-  let [theme, setTheme] = createSignal<SystemTheme>("unknown", { ownedWrite: true })
-  on("systemTheme", (e: { theme?: SystemTheme }) => setTheme(e.theme ?? "unknown"))
-  systemThemeAccessor = theme
+  runWithOwner(null, () => {
+    let [theme, setTheme] = createSignal<SystemTheme>("unknown")
+    on("systemTheme", (e: { theme?: SystemTheme }) => setTheme(e.theme ?? "unknown"))
+    systemThemeAccessor = theme
+  })
 }
 
 let visibilityAccessor: (() => Visibility) | undefined
 
 function ensureVisibilityState() {
   if (visibilityAccessor) return
-  let [visibility, setVisibility] = createSignal<Visibility>("visible", { ownedWrite: true })
-  // Sticky. The runtime may report the same state through several platform
-  // paths; the signal's equality check turns repeats into no-ops for
-  // reactive consumers.
-  on("visibility", (e: { state?: Visibility }) => setVisibility(e.state === "hidden" ? "hidden" : "visible"))
-  visibilityAccessor = visibility
+  runWithOwner(null, () => {
+    let [visibility, setVisibility] = createSignal<Visibility>("visible")
+    // Sticky. The runtime may report the same state through several platform
+    // paths; the signal's equality check turns repeats into no-ops for
+    // reactive consumers.
+    on("visibility", (e: { state?: Visibility }) => setVisibility(e.state === "hidden" ? "hidden" : "visible"))
+    visibilityAccessor = visibility
+  })
 }
 
 let orientationAccessor: (() => Orientation) | undefined
 
 function ensureOrientationState() {
   if (orientationAccessor) return
-  let [orientation, setOrientation] = createSignal<Orientation>("unknown", { ownedWrite: true })
-  on("displayOrientation", (e: { orientation?: Orientation }) => {
-    setOrientation(e.orientation ?? "unknown")
+  runWithOwner(null, () => {
+    let [orientation, setOrientation] = createSignal<Orientation>("unknown")
+    on("displayOrientation", (e: { orientation?: Orientation }) => {
+      setOrientation(e.orientation ?? "unknown")
+    })
+    orientationAccessor = orientation
   })
-  orientationAccessor = orientation
 }
 
 let textScaleAccessor: (() => number) | undefined
 
 function ensureTextScaleState() {
   if (textScaleAccessor) return
-  let [scale, setScale] = createSignal(1, { ownedWrite: true })
-  // Sticky, like systemTheme. Guard nonsense values: a runtime bug reporting
-  // 0 or a negative would otherwise collapse all text.
-  on("textScale", (e: { scale?: number }) => {
-    setScale(typeof e.scale === "number" && e.scale > 0 ? e.scale : 1)
+  runWithOwner(null, () => {
+    let [scale, setScale] = createSignal(1)
+    // Sticky, like systemTheme. Guard nonsense values: a runtime bug reporting
+    // 0 or a negative would otherwise collapse all text.
+    on("textScale", (e: { scale?: number }) => {
+      setScale(typeof e.scale === "number" && e.scale > 0 ? e.scale : 1)
+    })
+    textScaleAccessor = scale
   })
-  textScaleAccessor = scale
 }
 
 let mouseSeenAccessor: (() => boolean) | undefined
@@ -98,50 +112,54 @@ let touchSeenAccessor: (() => boolean) | undefined
 
 function ensurePointerState() {
   if (mouseSeenAccessor) return
-  let [mouse, setMouse] = createSignal(false)
-  let [touch, setTouch] = createSignal(false)
-  let sawMouse = false
-  let sawTouch = false
-  let unsubs: (() => void)[] = []
-  let unsubMove: () => void = null!
-  let note = (e: { pointerType?: string }) => {
-    if (e.pointerType === "mouse" && !sawMouse) {
-      sawMouse = true
-      setMouse(true)
-      // Moves have nothing left to teach: touch is learned from downs (a
-      // touch never moves without one), so drop the move subscription and
-      // with it the ambient interest bit that forces move deliveries.
-      unsubMove()
-    } else if (e.pointerType === "touch" && !sawTouch) {
-      sawTouch = true
-      setTouch(true)
+  runWithOwner(null, () => {
+    let [mouse, setMouse] = createSignal(false)
+    let [touch, setTouch] = createSignal(false)
+    let sawMouse = false
+    let sawTouch = false
+    let unsubs: (() => void)[] = []
+    let unsubMove: () => void = null!
+    let note = (e: { pointerType?: string }) => {
+      if (e.pointerType === "mouse" && !sawMouse) {
+        sawMouse = true
+        setMouse(true)
+        // Moves have nothing left to teach: touch is learned from downs (a
+        // touch never moves without one), so drop the move subscription and
+        // with it the ambient interest bit that forces move deliveries.
+        unsubMove()
+      } else if (e.pointerType === "touch" && !sawTouch) {
+        sawTouch = true
+        setTouch(true)
+      }
+      // Both types observed: nothing left to learn, stop listening.
+      if (sawMouse && sawTouch) for (let u of unsubs) u()
     }
-    // Both types observed: nothing left to learn, stop listening.
-    if (sawMouse && sawTouch) for (let u of unsubs) u()
-  }
-  // Downs always deliver, so the raw bus tap suffices; moves are gated when
-  // nobody listens, so they go through onPointerMove, whose subscription
-  // keeps them flowing. The probe is app-lifetime: createRoot detaches its
-  // scope cleanup from whatever computation first read the accessor.
-  unsubMove = createRoot(() => onPointerMove(note))
-  unsubs.push(unsubMove, on("pointerDown", note))
-  mouseSeenAccessor = mouse
-  touchSeenAccessor = touch
+    // Downs always deliver, so the raw bus tap suffices; moves are gated when
+    // nobody listens, so they go through onPointerMove, whose subscription
+    // keeps them flowing. Unowned here, so it registers no cleanup: the
+    // returned unsubscribe is the probe's only handle, as intended.
+    unsubMove = onPointerMove(note)
+    unsubs.push(unsubMove, on("pointerDown", note))
+    mouseSeenAccessor = mouse
+    touchSeenAccessor = touch
+  })
 }
 
 let keyboardSeenAccessor: (() => boolean) | undefined
 
 function ensureKeyboardState() {
   if (keyboardSeenAccessor) return
-  let [keyboard, setKeyboard] = createSignal(false)
-  // Soft keyboards also deliver some keydowns (Backspace, Return), so this can
-  // read true on a touch-only device once the user types in a field. Only a
-  // fallback: capabilities prefer runtime-reported device presence.
-  let unsub = on("keydown", () => {
-    setKeyboard(true)
-    unsub()
+  runWithOwner(null, () => {
+    let [keyboard, setKeyboard] = createSignal(false)
+    // Soft keyboards also deliver some keydowns (Backspace, Return), so this can
+    // read true on a touch-only device once the user types in a field. Only a
+    // fallback: capabilities prefer runtime-reported device presence.
+    let unsub = on("keydown", () => {
+      setKeyboard(true)
+      unsub()
+    })
+    keyboardSeenAccessor = keyboard
   })
-  keyboardSeenAccessor = keyboard
 }
 
 /**

package/src/gamepad.ts

@@ -1,4 +1,4 @@
-import { createSignal } from "@solidjs/signals"
+import { createSignal, runWithOwner } from "@solidjs/signals"
 import { on } from "srt:events"
 
 // Gamepad State: a reactive mirror of the runtime's sticky "gamepads" event.
@@ -18,7 +18,7 @@ import { on } from "srt:events"
  *
  * The snapshot is a faithful report. Note that pressing "back" (select) on a
  * mapped pad ALSO emits the `back` event (see onBack) - it is the pad-side
- * sibling of Android's system back, the runtime's exit-to-launcher gesture.
+ * sibling of Android's system back, the runtime's exit-to-player gesture.
  * Apps that bind "back" for their own controls should preventDefault that
  * event.
  */
@@ -52,11 +52,13 @@ let gamepadsAccessor: (() => (GamepadState | null)[]) | undefined
  */
 export function gamepads(): (GamepadState | null)[] {
   if (!gamepadsAccessor) {
-    // ownedWrite: the sticky event replays synchronously inside on(), which
-    // may run within a tracked scope's first read (see environment.ts).
-    let [pads, setPads] = createSignal<(GamepadState | null)[]>([], { ownedWrite: true })
-    on("gamepads", (e: { pads?: (GamepadState | null)[] }) => setPads(e.pads ?? []))
-    gamepadsAccessor = pads
+    // Under no owner: the sticky event replays synchronously inside on(),
+    // and the first read is usually a tracked scope (see environment.ts).
+    runWithOwner(null, () => {
+      let [pads, setPads] = createSignal<(GamepadState | null)[]>([])
+      on("gamepads", (e: { pads?: (GamepadState | null)[] }) => setPads(e.pads ?? []))
+      gamepadsAccessor = pads
+    })
   }
-  return gamepadsAccessor()
+  return gamepadsAccessor!()
 }