@solidrt/core 0.0.58 → 0.0.60

package/AGENTS.md

@@ -111,12 +111,18 @@ tsconfig.json - the two load-bearing lines are jsx + jsxImportSource:
 ```
 
 Peer deps @solidjs/signals and @solidjs/universal must match (currently
-2.0.0-rc.6); bun resolves them from peerDependencies. On a version bump,
+2.0.0-rc.8); bun resolves them from peerDependencies. On a version bump,
 `bun install` only warns ("incorrect peer dependency") and keeps the old
 ones, and `bun update solid-js @solidjs/signals @solidjs/universal` does
 not read the pin either: it adds all three to package.json at registry
-latest (solid-js 1.x, off Solid 2.0 entirely). The recipe that works is
-`rm -rf bun.lock node_modules/solid-js node_modules/@solidjs && bun install`.
+latest (solid-js 1.x, off Solid 2.0 entirely). The recipe that works
+deletes the installed copies and leaves the lockfile alone:
+`rm -rf node_modules/solid-js node_modules/@solidjs && bun install`
+(delete any nested `node_modules/@solidjs` too, or the old copy keeps
+resolving). Removing the directories is what forces re-resolution. Do not
+delete `bun.lock` to force it: that re-resolves every unrelated dependency
+as well, and a package that floats elsewhere fails the typecheck in a way
+that reads exactly like Solid fallout.
 
 ## Element model (the parts that are easy to get wrong)
 
@@ -455,13 +461,32 @@ latest (solid-js 1.x, off Solid 2.0 entirely). The recipe that works is
   write targets, and the runtime animates natively with no per-frame JS.
   Enter and exit are per-property entries on that same spec: `from` is the
   value the property animates in from at first attach, `exit` the value it
-  animates to on removal (the node stays painted until it settles, then
-  frees - no AnimatePresence equivalent needed). `stagger` (ms) goes on an
+  animates to on removal. An exit reaches the whole unmounted subtree: every
+  `exit` declared under the node that unmounts plays, and the node stays
+  painted until the last of them settles, then frees - a panel's contents
+  leave with `exit` beside their `from`, no closing signal, held mount or
+  settle cue (no AnimatePresence equivalent needed). One rule in both
+  trees: a node animating out is a ghost, painted and nothing else -
+  hit-test invisible here, and in the spatial arena (a @solidrt/2d sprite,
+  a @solidrt/3d node, whose `destroy` verbs carry the same `exit`)
+  invisible to every pick, raycast, overlap and sweep - while an entering
+  node is live from its first frame, whatever `from` it passes through.
+  Either endpoint takes
+  `{ value, curve?, duration?, bounce?, delay? }` to own its direction's
+  motion (an ease-out enter, an ease-in exit). `stagger` (ms) goes on an
   ANCESTOR, never on the animating elements: it delays each descendant's
   enter/exit by `index * stagger`, and cascades nothing unless the
   descendants declare `from`/`exit`. An enter plays once per mount; to
   replay it, remount the subtree (`<Show when={epoch()} keyed>` around it,
-  then bump `epoch`). See examples/stagger.tsx.
+  then bump `epoch`). See examples/stagger.tsx. The companion to the exit
+  pop-out is `layout` on the same spec: an element declaring it slides
+  from where it was painted to the box a layout gives it (a row removed
+  above it, one inserted, a `<For>` reorder) instead of jumping, retargets
+  if the layout changes again mid-slide, and is hit-tested where it is
+  drawn. It is parent-relative, so declare it on every level that should
+  glide; `layout: true` borrows the `all` motion, and `all` alone never
+  slides. Position only today, a size change snaps. See
+  examples/layout-slide.tsx.
   Per-frame work is for genuinely procedural motion, and a game or a
   simulation is that in full: its natural shape is ONE `onFrame` doing one
   sim step and N property (or sprite) writes, which is not a smell but the

package/docs/index.md

@@ -146,6 +146,29 @@ let camera = createCamera()
 The same pattern covers `@solidrt/core/microphone`, `/sound`,
 `/speech-recognition`, `/text-input`, `/image`, `/color`, and `/gpu`.
 
+## Lifecycle
+
+The runtime reports the platform's lifecycle facts and holds the platform
+open while the app acts on them; what to do with them is the app's policy.
+`onBack` is the user's back intent (prevent it for in-app navigation, or let
+it fall through to the platform's default: `background()` on Android, where
+the system keeps the app behind the others, `exit()` elsewhere). `onSuspend` fires when the app is being
+suspended and may be killed without notice (switching away on Android or
+iOS; never on desktop): persist session state there, async is fine, the
+runtime waits for the returned promise up to its deadline. `onQuit` fires
+when this app instance is ending (`exit()`, the window closing, the Android
+activity finishing) and waits the same way, inside the platform's close
+budget. `env.launch` says how this process came to run: "restored" when the
+system recreated the app from a session it ended on its own, "fresh" for a
+launch the user started. Whether to load what `onSuspend` saved is the app's
+call. `env.visibility` is only whether anything is on screen, for pausing
+animation and audio, not the persistence moment.
+
+```tsx
+onSuspend(() => file("session.json").write(JSON.stringify(state)))
+if (env.launch === "restored") state = JSON.parse(await file("session.json").text())
+```
+
 ## Reference
 
 The [reference](/core/reference/) covers the API by subject: the element

package/examples/README.md

@@ -21,6 +21,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `frame-animation.tsx` - `onFrame` driving a transform animation each frame.
 - `on-layout-connect.tsx` - `onLayout` + `getBoundingBox` connecting laid-out boxes with a `d-path`.
 - `stagger.tsx` - enter/exit/stagger with no per-frame JS: `from` and `exit` per property on each row's own `transition`, `stagger` on the ANCESTOR cascading them in occurrence order, and the replay idiom - a keyed `<Show>` remounts the subtree when its `when` value changes, so bumping an epoch replays the whole cascade. Exiting rows stay painted until they settle.
+- `layout-slide.tsx` - the `layout` transition, the companion to exit: rows declaring it slide from the box they had to the box a layout gives them instead of jumping - tap a row to remove it (its exit plays where it was while the rows below slide up), the header to shuffle the order (a `<For>` reorder), the footer to add one back. No per-frame JS, no hand-animated `y`.
 
 ## Pointer input
 - `pointer-local-coords.tsx` - the three pointer coordinate frames (`clientX` window, `localX` the handling node's own frame, `parentX` its path-parent's frame - where the node's x/y live) and the transform-proof drag idiom: grab offset from `localX` at down, place with `parentX - offset` on moves. Exact inside rotated/scaled ancestors and when the pointer leaves the node mid-drag.

package/examples/gpu-draw-list.tsx

@@ -60,22 +60,22 @@ let FRAGMENT_PULSE = glsl`
 function App() {
   let triangle = createBuffer(new Float32Array([0, 0.6, -0.5, -0.4, 0.5, -0.4]), { label: "tri" })
   let vs = compileShader("vertex", VERTEX, { header: true })
-  let attrs = [{ name: "aPos", format: "vec2" as const }]
+  let attrs = [{ name: "aPos", format: "float32x2" as const }]
   let warm = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_WARM, { header: true })), {
-    attributes: attrs,
+    buffers: [{ attributes: attrs }],
     depth: true,
   })
   let cool = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_COOL, { header: true })), {
-    attributes: attrs,
+    buffers: [{ attributes: attrs }],
     depth: true,
   })
   let pulse = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_PULSE, { header: true })), {
-    attributes: attrs,
+    buffers: [{ attributes: attrs }],
   })
 
   let target = createDrawTarget(512, 512, null, { depth: true, clearColor: [0.04, 0.04, 0.08, 1], label: "orbits" })
-  let warmDraw = addDraw(target, warm, { uAngle: 0 }, { buffer: triangle })
-  let coolDraw = addDraw(target, cool, { uAngle: Math.PI }, { buffer: triangle })
+  let warmDraw = addDraw(target, warm, { uAngle: 0 }, { buffers: [triangle] })
+  let coolDraw = addDraw(target, cool, { uAngle: Math.PI }, { buffers: [triangle] })
 
   // A third entry blinks in and out every second: add/remove are ordinary
   // per-frame-affordable writes, and a removed DrawId simply retires. Its
@@ -91,7 +91,7 @@ function App() {
     setDrawParams(target, coolDraw, { uAngle: t + Math.PI })
     let wantPulse = Math.floor(t) % 2 === 0
     if (wantPulse && pulseDraw === null) {
-      pulseDraw = addDraw(target, pulse, { uAngle: t * 0.3, uPhase: t * 5 }, { buffer: triangle, before: warmDraw })
+      pulseDraw = addDraw(target, pulse, { uAngle: t * 0.3, uPhase: t * 5 }, { buffers: [triangle], before: warmDraw })
     } else if (!wantPulse && pulseDraw !== null) {
       removeDraw(target, pulseDraw)
       pulseDraw = null

package/examples/gpu-instancing.tsx

@@ -1,7 +1,7 @@
 // Instanced drawing with per-instance attributes: one 3-vertex triangle in
 // the vertex buffer, drawn hundreds of times, each copy reading its own
-// record from an instance buffer (instanceAttributes on the pipeline +
-// instanceBuffer on the target, vertex divisor 1 underneath). Here each
+// record from an instance buffer (a `stepMode: "instance"` layout on the
+// pipeline, vertex divisor 1 underneath). Here each
 // record is one petal of a phyllotaxis spiral - its angle, radius, size, and
 // tint, computed once in JS - so the vertex stage just reads state instead
 // of re-deriving it from gl_InstanceID every frame, and the geometry buffer
@@ -45,7 +45,7 @@ let FRAGMENT = glsl`
   }
 `
 
-// One record per petal (matching instanceAttributes: 6 floats): radius grows
+// One record per petal (matching the instance layout: 6 floats): radius grows
 // with sqrt(index), the angle steps by the golden angle (~2.39996 rad) - the
 // sunflower layout - petals shrink toward the rim, and the tint walks a
 // cosine palette.
@@ -70,15 +70,19 @@ function App() {
   let instanceId = createBuffer(petalRecords(), { label: "petal-records" })
   let id = createPipelineTexture(VERTEX, FRAGMENT, 512, 512, { uTime: 0 }, {
     label: "petals",
-    attributes: [{ name: "aPos", format: "vec2" }],
-    buffer: bufferId,
-    instanceAttributes: [
-      { name: "iAngle", format: "f32" },
-      { name: "iRadius", format: "f32" },
-      { name: "iScale", format: "f32" },
-      { name: "iTint", format: "vec3" },
+    buffers: [
+      { attributes: [{ name: "aPos", format: "float32x2" }], buffer: bufferId },
+      {
+        stepMode: "instance",
+        attributes: [
+          { name: "iAngle", format: "float32" },
+          { name: "iRadius", format: "float32" },
+          { name: "iScale", format: "float32" },
+          { name: "iTint", format: "float32x3" },
+        ],
+        buffer: instanceId,
+      },
     ],
-    instanceBuffer: instanceId,
     instanceCount: 1,
     clearColor: [0.03, 0.03, 0.06, 1],
   })

package/examples/gpu-particles.tsx

@@ -74,11 +74,15 @@ function App() {
   let bufferId = createBuffer(particles(1500), { label: "particle-verts" })
   let id = createPipelineTexture(VERTEX, FRAGMENT, 512, 512, { uTime: 0, uTintA: [1.0, 0.45, 0.15], uTintB: [0.25, 0.5, 1.0] }, {
     label: "particles",
-    attributes: [
-      { name: "aPos", format: "vec3" },
-      { name: "aSeed", format: "f32" },
+    buffers: [
+      {
+        attributes: [
+          { name: "aPos", format: "float32x3" },
+          { name: "aSeed", format: "float32" },
+        ],
+        buffer: bufferId,
+      },
     ],
-    buffer: bufferId,
     topology: "points",
     blend: "add",
     clearColor: [0.02, 0.02, 0.05, 1],

package/examples/gpu-pipeline.tsx

@@ -87,11 +87,15 @@ function App() {
   let indexId = createBuffer(cubeIndices(), { label: "cube-indices" })
   let id = createPipelineTexture(VERTEX, FRAGMENT, 1024, 1024, { uTime: 0 }, {
     label: "cube",
-    attributes: [
-      { name: "aPos", format: "vec3" },
-      { name: "aColor", format: "vec3" },
+    buffers: [
+      {
+        attributes: [
+          { name: "aPos", format: "float32x3" },
+          { name: "aColor", format: "float32x3" },
+        ],
+        buffer: bufferId,
+      },
     ],
-    buffer: bufferId,
     indexBuffer: indexId,
     indexFormat: "uint16",
     depth: true,

package/examples/gpu-shared-params.tsx

@@ -65,12 +65,12 @@ let FRAGMENT_MAP = glsl`
 function App() {
   let quad = createBuffer(new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]), { label: "quad" })
   let vs = compileShader("vertex", VERTEX, { header: true })
-  let attrs = [{ name: "aPos", format: "vec2" as const }]
+  let attrs = [{ name: "aPos", format: "float32x2" as const }]
   let tint = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_TINT, { header: true })), {
-    attributes: attrs,
+    buffers: [{ attributes: attrs }],
   })
   let mapped = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_MAP, { header: true })), {
-    attributes: attrs,
+    buffers: [{ attributes: attrs }],
   })
 
   // 2x2 patterns, nearest + repeat, so gl_FragCoord tiling shows hard cells.
@@ -99,12 +99,12 @@ function App() {
     if (i === 1 || i === 5) {
       // Patterned entries read the shared uMap; the one at i === 5 brings
       // its own binding and keeps its stripes through every shared swap.
-      addDraw(target, mapped, { uCenter }, i === 5 ? { buffer: quad, textures: { uMap: stripes } } : { buffer: quad })
+      addDraw(target, mapped, { uCenter }, i === 5 ? { buffers: [quad], textures: { uMap: stripes } } : { buffers: [quad] })
     } else if (i === 3) {
       // The override quad: its own uTint beats the shared color cycle.
-      addDraw(target, tint, { uCenter, uTint: [1, 0.62, 0.1, 1] }, { buffer: quad })
+      addDraw(target, tint, { uCenter, uTint: [1, 0.62, 0.1, 1] }, { buffers: [quad] })
     } else {
-      addDraw(target, tint, { uCenter }, { buffer: quad })
+      addDraw(target, tint, { uCenter }, { buffers: [quad] })
     }
   }
 

package/examples/gpu-sprites.tsx

@@ -60,14 +60,18 @@ function App() {
     label: "sprites",
     topology: "triangle-strip",
     vertexCount: 4,
-    attributes: [{ name: "aPos", format: "vec2" }],
-    buffer: quad,
-    instanceAttributes: [
-      { name: "iCenter", format: "vec2" },
-      { name: "iSize", format: "f32" },
-      { name: "iTint", format: "vec3" },
+    buffers: [
+      { attributes: [{ name: "aPos", format: "float32x2" }], buffer: quad },
+      {
+        stepMode: "instance",
+        attributes: [
+          { name: "iCenter", format: "float32x2" },
+          { name: "iSize", format: "float32" },
+          { name: "iTint", format: "float32x3" },
+        ],
+        buffer: records,
+      },
     ],
-    instanceBuffer: records,
     instanceCount: MAX_SPRITES,
     clearColor: [0.03, 0.03, 0.06, 1],
   })

package/examples/layout-slide.tsx

@@ -0,0 +1,78 @@
+// The `layout` transition, the companion to `exit`: a row declaring it
+// slides from the box it had to the box the next layout gives it, so the
+// list never jumps when a row leaves, arrives or moves. Nothing here
+// animates `y` by hand and there is no per-frame JS: the rows keep their
+// flex layout, and the runtime slides each one from where it was painted.
+// Tap a row to remove it - its exit plays where it was (the pop-out) while
+// the rows below slide up past it. Tap the header to shuffle: a `<For>`
+// reorder moves the surviving nodes, so every displaced row slides. Tap
+// the footer to add a row back: the rows below its slot slide apart and
+// the new row enters through its `from`. A reflow that lands mid-slide
+// retargets, and a spring keeps its momentum. `layout` is parent-relative
+// (declare it on every level that should glide) and position only: a size
+// change snaps.
+import { render, createSignal, For } from "@solidrt/core"
+import type { Transition } from "@solidrt/core"
+
+const ALL_ROWS = ["Signals", "Effects", "Memos", "Stores", "Boundaries", "Resources"]
+// Rows the list starts with; the rest come back through the footer.
+const INITIAL_ROWS = 4
+// Every reflow slides on this spring.
+const SLIDE = { duration: 400, bounce: 0.15 } satisfies Transition
+// Enter from the left, leave to the right, each direction on its own curve.
+const ARRIVE = {
+  duration: 300,
+  curve: "ease-out",
+  from: -80,
+  exit: { value: 80, curve: "ease-in", duration: 200 },
+} satisfies Transition
+const FADE = {
+  duration: 300,
+  curve: "ease-out",
+  from: 0,
+  exit: { value: 0, curve: "ease-in", duration: 200 },
+} satisfies Transition
+
+function shuffled(items: string[]): string[] {
+  let pool = items.slice()
+  let out: string[] = []
+  while (pool.length > 0) out.push(...pool.splice(Math.floor(Math.random() * pool.length), 1))
+  return out
+}
+
+function App() {
+  let [rows, setRows] = createSignal(ALL_ROWS.slice(0, INITIAL_ROWS))
+  let addRow = () => {
+    let next = ALL_ROWS.find((label) => !rows().includes(label))
+    if (next) setRows([...rows(), next])
+  }
+
+  return (
+    <window padding={40} gap={12}>
+      <view height={40} justifyContent="center" onPointerDown={() => setRows(shuffled(rows()))}>
+        <text color="#8899aa" fontSize={14}>Tap here to shuffle, a row to remove it</text>
+      </view>
+      <For each={rows()}>
+        {(label) => (
+          <view
+            x={0}
+            opacity={1}
+            transition={{ layout: SLIDE, x: ARRIVE, opacity: FADE }}
+            height={48}
+            justifyContent="center"
+            paddingLeft={16}
+            onPointerDown={() => setRows(rows().filter((row) => row !== label))}
+          >
+            <d-rect color="#2a3a55" radius={10} />
+            <text color="#e8eef6" fontSize={18}>{label}</text>
+          </view>
+        )}
+      </For>
+      <view height={40} justifyContent="center" transition={{ layout: SLIDE }} onPointerDown={addRow}>
+        <text color="#8899aa" fontSize={14}>Tap here to add a row back</text>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/stagger.tsx

@@ -1,16 +1,24 @@
 // 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.
+// first attach, `exit` the value it animates to on removal. Both are
+// per-property entries on the element's own transition spec. An exit
+// reaches the whole removed subtree: every `exit` declared under the node
+// that unmounts plays, and that node stays painted until the last of them
+// settles, then frees. It leaves the layout at once, so a fresh panel
+// mounted mid-exit takes its place while the old one fades over it. The
+// rows below never unmount one by one - the panel around them does - and
+// they still leave the way they arrived. Each direction owns its motion:
+// `from`/`exit` take a bare value (the entry's curve, duration and delay)
+// or `{ value, curve?, duration?, bounce?, delay? }`, so the fade below
+// eases out on the way in and eases in, shorter, on the way out.
+// `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 tree 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
+// epoch replays the whole cascade. Tap anywhere: odd taps unmount the panel
 // (staggered exits), even taps mount a fresh one (staggered enters).
 import { render, createSignal, Show } from "@solidrt/core"
 import type { Transition } from "@solidrt/core"
@@ -18,25 +26,33 @@ 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.
+// Slide in from the left, out to the right; fade both ways, the exit on
+// its own curve and clock.
 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
+const FADE = {
+  duration: 350,
+  curve: "ease-out",
+  from: 0,
+  exit: { value: 0, curve: "ease-in", duration: 200 },
+} satisfies Transition
 
 function App() {
   let [epoch, setEpoch] = createSignal(1)
 
   return (
-    <window padding={40} gap={12} onPointerDown={() => setEpoch((e) => e + 1)} transition={{ stagger: STAGGER_MS }}>
+    <window padding={40} gap={12} onPointerDown={() => setEpoch((e) => e + 1)}>
       <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>
-          ))
-        }
+        {(_epoch) => (
+          <view gap={12} transition={{ stagger: STAGGER_MS }}>
+            {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>
+            ))}
+          </view>
+        )}
       </Show>
     </window>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -31,11 +31,11 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.58"
+    "@solidrt/flux-types": "0.0.60"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.6",
-    "@solidjs/universal": "2.0.0-rc.6",
-    "solid-js": "2.0.0-rc.6"
+    "@solidjs/signals": "2.0.0-rc.8",
+    "@solidjs/universal": "2.0.0-rc.8",
+    "solid-js": "2.0.0-rc.8"
   }
 }

package/src/audio.ts

@@ -218,9 +218,10 @@ export function createPcmSound(
  * Streams a large track, decoding on demand instead of loading it into memory.
  * Single-voice: each play() restarts it. Pass a path (resolved like flux:fs,
  * relative to the process cwd) or a `file()` from flux:fs; a path is wrapped in
- * `file()` for you, so a dev-server-proxied file streams over the proxy. Owns
- * the stream's lifecycle: stopped and released when the reactive owner is
- * disposed. For imperative use, call stream()/play() from "flux:audio".
+ * `file()` for you. The track is read from local storage (the app's assets in
+ * a packed app), not over the network. Owns the stream's lifecycle: stopped
+ * and released when the reactive owner is disposed. For imperative use, call
+ * stream()/play() from "flux:audio".
  */
 export function createSoundStream(source: string | FluxFile, options: SoundStreamOptions = {}): Sound {
   let src = typeof source === "string" ? file(source) : source

package/src/environment.ts

@@ -37,6 +37,8 @@ export type SystemTheme = "dark" | "light" | "unknown"
 
 export type Visibility = "visible" | "hidden"
 
+export type Launch = "fresh" | "restored"
+
 export type Orientation = "portrait" | "portraitFlipped" | "landscape" | "landscapeFlipped" | "unknown"
 
 let devicesAccessor: (() => InputDevices | undefined) | undefined
@@ -65,6 +67,22 @@ function ensureSystemThemeState() {
   })
 }
 
+// Fixed for the process, so a plain value rather than a signal: the sticky
+// `launch` event replays synchronously on subscribe, and the runner emits it
+// before any app code runs.
+let launchValue: Launch | undefined
+
+function ensureLaunchState() {
+  if (launchValue) return
+  runWithOwner(null, () => {
+    on("launch", (e: { state?: Launch }) => {
+      launchValue = e.state === "restored" ? "restored" : "fresh"
+    })
+  })
+  // A runtime that reports no launch fact (desktop today) launches fresh.
+  launchValue ??= "fresh"
+}
+
 let visibilityAccessor: (() => Visibility) | undefined
 
 function ensureVisibilityState() {
@@ -218,15 +236,27 @@ export let env = {
    * `visibilityState` vocabulary without the `document` machinery - react
    * to it in a tracked scope (JSX, memo, effect).
    *
-   * This is the persistence moment: there is no close event on any
-   * platform (Android gives no time, desktop window close never enters
-   * JS), so save state when this goes "hidden". While hidden, timers keep
-   * running but no frames are produced.
+   * A rendering and UI fact (nothing is on screen: stop animating, pause
+   * the audio), not the persistence moment - that is `onSuspend`, which the
+   * runtime waits for. While hidden no frames are produced.
    */
   get visibility(): Visibility {
     ensureVisibilityState()
     return visibilityAccessor!()
   },
+  /**
+   * How this process came to run. "restored": the system recreated the app
+   * from a session it ended on its own (a suspended app reclaimed in the
+   * background; Android's saved instance state). "fresh": launched anew, a
+   * first start or one after `exit()` or a close ended the previous
+   * instance, and always on desktop. Reported, not interpreted: whether to
+   * load what `onSuspend` saved is the app's decision. Fixed for the
+   * process, so it needs no tracked scope.
+   */
+  get launch(): Launch {
+    ensureLaunchState()
+    return launchValue!
+  },
   /** Orientation of the display the window is on. */
   get orientation(): Orientation {
     ensureOrientationState()

package/src/gpu.ts

@@ -135,7 +135,7 @@ export {
 // updated draw range (vertexCount after its buffer gained or lost dynamic
 // geometry, firstVertex for a different window of a shared buffer,
 // instanceCount for an instanced population; absent keys keep their current
-// value, like params) and/or swapped buffers (instanceBuffer pointed at a
+// value, like params) and/or swapped buffers (an instance buffer pointed at a
 // larger buffer once a population outgrows the old one - the growth
 // primitive; replace-only, the range is rechecked); destroyBuffer is the manual
 // cleanup path for buffers created outside a reactive scope. renderTarget is
@@ -147,7 +147,7 @@ export {
 // GPU-side (exact, same size): seed a loadOp "load" accumulator, snapshot a
 // ping-pong buffer, reset state to a known image.
 export { copyTexture, destroyBuffer, renderTarget, setDraw } from "flux:gpu"
-export type { BlendMode, BufferUpdate, CullMode, DrawRange, IndexBinding, IndexFormat, IndexRange, InstanceAttribute, InstanceOrder, OrderUpdate, ShaderParams, Topology, VertexAttribute } from "flux:gpu"
+export type { BlendMode, BufferUpdate, CullMode, DrawRange, IndexBinding, IndexFormat, IndexRange, InstanceOrder, OrderUpdate, ShaderParams, Topology, VertexAttribute, VertexBufferLayout, VertexFormat } from "flux:gpu"
 
 // The draw-list verbs, re-exported raw: entries live and die with their draw
 // target (see createDrawTarget below), so there is no per-entry lifetime to
@@ -366,20 +366,18 @@ export function createShaderTexture(
  * texture id is, e.g. `<texture src>`; resize with `setTargetSize`, drive
  * uniforms with `<texture params>` or `setTargetParams`). Many targets may
  * share one pipeline, and creating a target compiles nothing. The target
- * brings the per-target half: size, the concrete vertex `buffer` the
- * pipeline's attribute layout describes, the `instanceBuffer` its
- * `instanceAttributes` describe (required exactly when it declares any),
- * the draw range (`vertexCount` defaults to the rest of the buffer from
- * `firstVertex` on, `instanceCount` repeats it as instances told apart by
- * `gl_InstanceID` and defaults to one per instance-buffer record; a
- * fullscreen pass over an attributeless pipeline is `{ vertexCount: 3 }`
- * with a covering-triangle vertex stage), uniforms, and
- * `clearColor`. An `indexBuffer` + `indexFormat` pair makes the draw indexed
- * (shared vertices stored once), with the range in `firstIndex`/`indexCount`
- * spelling - see IndexBinding/IndexRange. Draw state (`attributes`,
- * `instanceAttributes`, `topology`, `blend`, `cull`, `depth`, `depthWrite`)
- * lives on the pipeline
- * and throws here. Frees the target when the reactive owner is disposed (opt
+ * brings the per-target half: size, the concrete `buffers` the pipeline's
+ * layouts describe (one id per layout, in declaration order), the draw
+ * range (`vertexCount` defaults to the rest of the tightest vertex-step
+ * buffer from `firstVertex` on, `instanceCount` repeats it as instances
+ * told apart by `gl_InstanceID` and defaults to one per record of the
+ * tightest instance-step buffer; a fullscreen pass over an attributeless
+ * pipeline is `{ vertexCount: 3 }` with a covering-triangle vertex stage),
+ * uniforms, and `clearColor`. An `indexBuffer` + `indexFormat` pair makes
+ * the draw indexed (shared vertices stored once), with the range in
+ * `firstIndex`/`indexCount` spelling - see IndexBinding/IndexRange. Draw
+ * state (`topology`, `blend`, `cull`, `depth`, `depthWrite`) lives on the
+ * pipeline and throws here. Frees the target when the reactive owner is disposed (opt
  * out with `autoFree: false`); the pipeline is yours and outlives it.
  *
  * `render: "manual"` makes it a manual target: the runtime never renders it
@@ -404,11 +402,8 @@ export function createShaderTarget(
   params?: gpu.ShaderParams | null,
   opts?: {
     textures?: gpu.TextureBindings
-    buffer?: gpu.BufferId
-    instanceBuffer?: gpu.BufferId
-    /** One buffer per instance slot of the pipeline (index = the
-     * attributes' `slot`); pass this OR `instanceBuffer`, not both. */
-    instanceBuffers?: gpu.BufferId[]
+    /** One buffer id per layout of the pipeline, in declaration order. */
+    buffers?: gpu.BufferId[]
     /** Draw the instance records in key order (see InstanceOrder). */
     instanceOrder?: gpu.InstanceOrder
     clearColor?: [number, number, number, number]
@@ -658,9 +653,9 @@ function toUint8(data: ArrayBuffer | ArrayBufferView): Uint8Array {
  * texture, returning the texture id (usable anywhere a normal texture id is,
  * e.g. `<texture src>`) - named, like `createShaderTexture`, for what comes
  * back. Unlike `createShaderTexture` the vertex stage is yours:
- * declare `in` attributes matching `opts.attributes` (one interleaved vertex
- * in `opts.buffer`, a {@link createBuffer} id) and your own varyings toward
- * the fragment stage. Clip space is y-down: `gl_Position` y = -1 is the top
+ * declare `in` attributes matching `opts.buffers` (each layout with the
+ * {@link createBuffer} id it reads) and your own varyings toward the
+ * fragment stage. Clip space is y-down: `gl_Position` y = -1 is the top
  * row of the target and +1 the bottom, so camera-up geometry must negate y
  * (or fold the flip into its projection) to display up. Both sources may
  * reference `iResolution` and any uniform they declare (`float`/`int`
@@ -679,10 +674,10 @@ function toUint8(data: ArrayBuffer | ArrayBufferView): Uint8Array {
  * see DrawRange) defaults to the whole buffer drawn once and can be changed
  * later with `setDraw`; `instanceCount` is the standard answer to particles
  * and repeated meshes, N copies of the range told apart by `gl_InstanceID`
- * in the vertex stage. `opts.instanceAttributes` + `opts.instanceBuffer`
- * (declare both or neither) give each instance its own interleaved record -
- * real per-instance state instead of `gl_InstanceID` arithmetic - and
- * `instanceCount` then defaults to one instance per record. An
+ * in the vertex stage. A layout with `stepMode: "instance"` gives each
+ * instance its own interleaved record - real per-instance state instead of
+ * `gl_InstanceID` arithmetic - and `instanceCount` then defaults to one
+ * instance per record. An
  * `indexBuffer` + `indexFormat` pair makes the draw
  * indexed (shared vertices stored once), with the range in
  * `firstIndex`/`indexCount` spelling; `opts.cull` discards one face set by
@@ -701,13 +696,8 @@ export function createPipelineTexture(
   params?: gpu.ShaderParams | null,
   opts?: {
     textures?: gpu.TextureBindings
-    attributes?: gpu.VertexAttribute[]
-    buffer?: gpu.BufferId
-    instanceAttributes?: gpu.InstanceAttribute[]
-    instanceBuffer?: gpu.BufferId
-    /** One buffer per instance slot (index = the attributes' `slot`);
-     * pass this OR `instanceBuffer`, not both. */
-    instanceBuffers?: gpu.BufferId[]
+    /** The pipeline's layouts, each with the buffer it reads. */
+    buffers?: (gpu.VertexBufferLayout & { buffer: gpu.BufferId })[]
     /** Draw the instance records in key order (see InstanceOrder). */
     instanceOrder?: gpu.InstanceOrder
     topology?: gpu.Topology

package/src/index.ts

@@ -3,11 +3,11 @@ export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables,
 export type { BoundingBox, GlobalPointerEvent, TextLine } from "./core"
 export { parseColor, mixColors, withAlpha, brightness, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
-export { onFrame, onLayout, onResize, onWindowFocus, onWindowBlur, onBack, exit } from "./window"
-export type { BackEvent } from "./window"
+export { onFrame, onLayout, onResize, onWindowFocus, onWindowBlur, onBack, onSuspend, onQuit, exit, background } from "./window"
+export type { BackEvent, LifecycleHandler } from "./window"
 export { windowSize, safeArea, displayScale, windowFocused, keyboardHeight, lockPointer, pointerLocked } from "./window"
 export { env } from "./environment"
-export type { InputDevices, SystemTheme, Orientation, Visibility } from "./environment"
+export type { InputDevices, SystemTheme, Orientation, Visibility, Launch } from "./environment"
 export { gamepads } from "./gamepad"
 export type { GamepadState } from "./gamepad"
 export { capabilities } from "./capabilities"

package/src/renderer.ts

@@ -1,4 +1,4 @@
-import { createRoot, onCleanup, NotReadyError } from "@solidjs/signals"
+import { createRoot, onCleanup, NotReadyError, untrack } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
 import { createErrorBoundary } from "solid-js"
 import type { Element } from "solid-js"
@@ -51,9 +51,13 @@ let destroyScheduled = false
 // before dropping handlers so onBlur still fires for a focused descendant.
 function destroyNode(node: ProxyNode): void {
   tree.destroyNode(node.id)
+  // Read once, untracked: destroyNode runs inside effect apply phases (the
+  // root boundary's swap, the end-of-tick sweep), where a per-node signal
+  // read is a STRICT_READ_UNTRACKED warning per node.
+  let focused = untrack(focusedNode)
   let cleanup = (n: ProxyNode) => {
     for (let child of n.children) if (child.parent === n) cleanup(child)
-    if (n.id === focusedNode()) setFocus(null)
+    if (n.id === focused) setFocus(null)
     nodes.delete(n.id)
     cleanupNode(n.id)
   }
@@ -288,6 +292,17 @@ let renderer = createRenderer<ProxyNode>({
       if (anchor) tree.insertNode(parent.id, node.id, anchor.id)
       else tree.insertNode(parent.id, node.id)
 
+      // A bare move - Solid reorders a <For> with insertBefore on a node
+      // that is still attached, no removeNode first - unlinks the node from
+      // wherever it was on the native side (a same-parent reorder included).
+      // The mirror must drop the old entry too, or it keeps both and
+      // getNextSibling hands Solid stale anchors from then on, so every
+      // later insert lands in the wrong place.
+      let previous = node.parent
+      if (previous) {
+        let at = previous.children.indexOf(node)
+        if (at !== -1) previous.children.splice(at, 1)
+      }
       node.parent = parent
 
       if (!anchor) {

package/src/runtime-modules.d.ts

@@ -66,12 +66,19 @@ declare module "srt:events" {
 // The running application's own surface (lattice), present in every build.
 declare module "srt:app" {
   /**
-   * Leave the current app, unconditionally: back to the player in a dev
-   * client, quit when standalone or at the player root (on Android the
-   * client backgrounds instead of dying). The default action of an
-   * unprevented `back` event; prefer the @solidrt/core re-export.
+   * End the current app now, without running the quit hooks: back to the
+   * player in a dev client, quit when standalone or at the player root (on
+   * Android the activity finishes). Prefer the @solidrt/core `exit`, which
+   * runs `onQuit` first.
    */
   export function exit(): void
+  /**
+   * Leave the current app without ending it: back to the player in a dev
+   * client; otherwise to the OS background (Android moveTaskToBack, a
+   * minimized window on desktop). Core's default action of an unprevented
+   * `back` on Android; exposed there as `background`.
+   */
+  export function background(): void
 }
 
 // Dev-server control surface (lattice). Present only in dev/go builds; in other

package/src/types.d.ts

@@ -461,6 +461,23 @@ export interface LineGeometryProps extends PositionProps {
 /** A cubic-bezier timing curve: a CSS name or [x1, y1, x2, y2] control values. */
 export type TransitionCurve = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | [number, number, number, number]
 
+/**
+ * The object form of `from`/`exit`: the endpoint value plus that
+ * direction's own motion, so an ease-out enter pairs with an ease-in exit
+ * instead of playing the entry's curve backwards. Every field but `value`
+ * is optional and falls back to the entry's (`delay` included, so a
+ * staggered list needs no change), except that naming a `curve` or a
+ * `bounce` decides the kind outright: `{ value: 0, curve: "ease-in" }` on a
+ * spring entry is a tween of the entry's duration.
+ */
+export interface TransitionEndpoint {
+  value: number | string
+  duration?: number
+  curve?: TransitionCurve
+  bounce?: number
+  delay?: number
+}
+
 /**
  * A perceptual spring - the default kind: a bare `{ duration }` is a
  * critically damped spring. `duration` (ms) is the perceptual settling
@@ -479,20 +496,26 @@ export interface TransitionSpring {
    * Mount-time enter animation: at the element's first attach the property
    * snaps to this value and animates to the value it mounted with. Numbers
    * for the scalar properties; the color property takes a CSS color string
-   * or packed number. Per-property entries only (not under `all`); a later
-   * move or reorder re-runs nothing.
+   * or packed number, or a {@link TransitionEndpoint} giving the enter its
+   * own curve, duration, bounce or delay. Per-property entries only (not
+   * under `all`); a later move or reorder re-runs nothing.
    */
-  from?: number | string
+  from?: number | string | TransitionEndpoint
   /**
-   * Removal exit animation: an unmounted element stays visible, animates
-   * the property to this value (honoring `delay`), and is freed when its
-   * exit animations settle. Same value forms as `from`, per-property only.
-   * A move never plays it, the exiting element is hit-test invisible, its
-   * whole subtree stays painted with it, and no onTransitionEnd fires (the
-   * component is already disposed). An attached element keeps its layout
-   * slot until the exit finishes.
+   * Removal exit animation: when an element unmounts, every `exit`
+   * declared on it or under it animates its property to this value
+   * (honoring `delay`), and the unmounted element stays visible, subtree
+   * and all, until the last of them settles, then frees. Same value forms
+   * as `from`, per-property only. A move never plays it, the exiting
+   * subtree is hit-test invisible, and no onTransitionEnd fires (the
+   * components are already disposed). An exiting element leaves the layout
+   * flow at once: its siblings reflow as if it were gone, and it is painted
+   * at its last box, which follows its parent's moves but not the parent's
+   * own reflow. The {@link TransitionEndpoint} form gives the exit its own
+   * motion: an ease-out enter reads wrong played backwards, so pair it with
+   * `exit: { value, curve: "ease-in" }`.
    */
-  exit?: number | string
+  exit?: number | string | TransitionEndpoint
 }
 
 /**
@@ -511,20 +534,26 @@ export interface TransitionTween {
    * Mount-time enter animation: at the element's first attach the property
    * snaps to this value and animates to the value it mounted with. Numbers
    * for the scalar properties; the color property takes a CSS color string
-   * or packed number. Per-property entries only (not under `all`); a later
-   * move or reorder re-runs nothing.
+   * or packed number, or a {@link TransitionEndpoint} giving the enter its
+   * own curve, duration, bounce or delay. Per-property entries only (not
+   * under `all`); a later move or reorder re-runs nothing.
    */
-  from?: number | string
+  from?: number | string | TransitionEndpoint
   /**
-   * Removal exit animation: an unmounted element stays visible, animates
-   * the property to this value (honoring `delay`), and is freed when its
-   * exit animations settle. Same value forms as `from`, per-property only.
-   * A move never plays it, the exiting element is hit-test invisible, its
-   * whole subtree stays painted with it, and no onTransitionEnd fires (the
-   * component is already disposed). An attached element keeps its layout
-   * slot until the exit finishes.
+   * Removal exit animation: when an element unmounts, every `exit`
+   * declared on it or under it animates its property to this value
+   * (honoring `delay`), and the unmounted element stays visible, subtree
+   * and all, until the last of them settles, then frees. Same value forms
+   * as `from`, per-property only. A move never plays it, the exiting
+   * subtree is hit-test invisible, and no onTransitionEnd fires (the
+   * components are already disposed). An exiting element leaves the layout
+   * flow at once: its siblings reflow as if it were gone, and it is painted
+   * at its last box, which follows its parent's moves but not the parent's
+   * own reflow. The {@link TransitionEndpoint} form gives the exit its own
+   * motion: an ease-out enter reads wrong played backwards, so pair it with
+   * `exit: { value, curve: "ease-in" }`.
    */
-  exit?: number | string
+  exit?: number | string | TransitionEndpoint
 }
 
 /**
@@ -571,9 +600,12 @@ export type TransitionPropName =
   | "radius"
   | "color"
 
-/** Payload of onTransitionEnd: which animated property finished. */
+/**
+ * Payload of onTransitionEnd: which animated property finished. `"layout"`
+ * is the layout slide settling on its box.
+ */
 export interface TransitionEndEvent {
-  property: TransitionPropName
+  property: TransitionPropName | "layout"
 }
 
 export interface TransitionProps {
@@ -610,6 +642,20 @@ export interface TransitionProps {
          * lifecycle are unaffected. Adds on top of a per-entry `delay`.
          */
         stagger?: number
+        /**
+         * Layout slide: when a layout moves this element (a row removed
+         * above it, one inserted, a `<For>` reorder, a resize), it slides
+         * from where it was painted to its new box on this motion instead
+         * of jumping, and is hit-tested where it is drawn. A reflow
+         * mid-slide retargets (a spring keeps its velocity). Its first
+         * layout, a reparent and a `display: none` toggle snap. The slide is
+         * parent-relative: a parent that moves carries its children at
+         * once, so declare it on every level that should glide. `true`
+         * borrows the `all` entry's motion (an error without one); `all`
+         * alone never slides. Position only today: a size change snaps.
+         * Settles with onTransitionEnd property `"layout"`.
+         */
+        layout?: Omit<TransitionSpring, "from" | "exit"> | Omit<TransitionTween, "from" | "exit"> | TransitionShorthand | boolean
       } & {
         [P in TransitionPropName]?: Transition
       })

package/src/video.ts

@@ -5,74 +5,134 @@
 // subtree effects - applies to video for free. A richer Video component
 // composes on top of this in a higher layer, not in core.
 //
+// A plane player (`present: "plane"`, Android) has no texture: the platform
+// composites the picture fullscreen beneath the UI on the video's own clock,
+// and the UI simply draws over it. It exists from open until the owner is
+// disposed, and it streams: the source may be a URL, read as it plays. On a
+// platform without a plane the open fails (error() with kind "no-plane"),
+// and an app that runs everywhere falls back to a texture player itself.
+//
 // The imperative primitive lives in the `flux:video` module; import { open }
 // from "flux:video" for non-reactive use.
 
 import { createSignal, onCleanup } from "@solidjs/signals"
 import type { TextureId } from "flux:gpu"
-import { open } from "flux:video"
+import { open, type VideoError, type VideoPlane, type VideoPlayer, type VideoSource } from "flux:video"
+
+export type { VideoError, VideoErrorKind, VideoSource } from "flux:video"
 
 export type VideoOptions = {
-  /** Start playback as soon as the file is open. */
+  /** Start playback as soon as the source is open. */
   autoplay?: boolean
+  /**
+   * Where the picture goes: a texture (default, displayed by the app) or the
+   * platform's video plane (fullscreen beneath the UI, Android only).
+   */
+  present?: "texture" | "plane"
+  /** Plane only: letterboxed (default) or cropped to fill the window. */
+  fit?: "contain" | "cover"
 }
 
 /** An opened video as reactive accessors plus playback controls. */
 export type VideoStream = {
-  /** Texture id once the file is open, undefined while opening; render with <texture src={...}>. */
+  /** True once the source is open (and, for a plane, the plane exists). */
+  ready(): boolean
+  /** Texture id once open, undefined while opening and always for a plane player; render with <texture src={...}>. */
   texture(): TextureId | undefined
   /** Frame size, undefined while opening. */
   width(): number | undefined
   height(): number | undefined
-  /** Duration in seconds, undefined while opening. */
+  /** Duration in seconds, undefined while opening or when the source has no known end. */
   duration(): number | undefined
-  /** Set if opening failed (unreadable file, unsupported codec). */
-  error(): Error | undefined
+  /**
+   * The failure: opening failed (unreadable or unreachable source,
+   * unsupported codec, no plane on this platform), or playback stopped on
+   * one later. Its `kind` says which; an app's plane-to-texture fallback
+   * keys on "no-plane" only.
+   */
+  error(): VideoError | undefined
   /** Start or resume playback (before open resolves, playback starts on resolve). */
   play(): void
   /** Pause playback; the current frame stays displayed. */
   pause(): void
+  /**
+   * Seek to a time in seconds. A no-op while opening, on a texture player,
+   * and on a source that cannot seek (see `seekable`). While paused the
+   * target frame is shown.
+   */
+  seek(seconds: number): void
+  /** Whether `seek` does anything (plain read, not a signal). */
+  seekable(): boolean
   /** Whether playback is running (plain read, not a signal). */
   playing(): boolean
   /** Presentation time of the displayed frame in seconds (plain read, not a signal). */
   currentTime(): number
   /** Whether the last frame has been displayed (plain read, not a signal). */
   finished(): boolean
+  /** Whether playback is held for the source to catch up (plain read, not a signal). */
+  buffering(): boolean
+}
+
+type AnyPlayer = VideoPlayer | VideoPlane
+
+function toVideoError(e: unknown): VideoError {
+  if (e instanceof Error && "kind" in e) return e as VideoError
+  let error = new Error(String(e)) as VideoError
+  error.kind = "decode"
+  return error
 }
 
 /**
- * Opens a video file (MP4, H.264 + AAC) and exposes it as reactive signals:
- * read texture() in JSX and the frames appear once playback starts. Closes
+ * Opens a video (WebM, VP9 + Opus) from a path, an http(s) URL (plane
+ * players only) or a file(), and exposes it as reactive signals: read
+ * texture() in JSX and the frames appear once playback starts. Closes
  * automatically when the reactive owner is disposed (e.g. the component
- * unmounts). For imperative use, call open() from "flux:video" directly.
+ * unmounts), abandoning an open still in flight. For imperative use, call
+ * open() from "flux:video" directly.
  */
-export function createVideo(path: string, options: VideoOptions = {}): VideoStream {
+export function createVideo(source: VideoSource, options: VideoOptions = {}): VideoStream {
+  let [ready, setReady] = createSignal(false)
   let [texture, setTexture] = createSignal<TextureId | undefined>(undefined)
   let [width, setWidth] = createSignal<number | undefined>(undefined)
   let [height, setHeight] = createSignal<number | undefined>(undefined)
   let [duration, setDuration] = createSignal<number | undefined>(undefined)
-  let [error, setError] = createSignal<Error | undefined>(undefined)
-  let player: Awaited<ReturnType<typeof open>> | undefined
+  let [error, setError] = createSignal<VideoError | undefined>(undefined)
+  let player: AnyPlayer | undefined
   let disposed = false
   let wantPlay = options.autoplay ?? false
+  // Disposal aborts a pending open, so a player never appears after the
+  // owner is gone.
+  let abort = new AbortController()
 
-  open(path)
+  let opened: Promise<AnyPlayer> =
+    options.present === "plane"
+      ? open(source, { present: "plane", fit: options.fit, signal: abort.signal })
+      : open(source, { signal: abort.signal })
+  opened
     .then((video) => {
       if (disposed) {
         video.close()
         return
       }
       player = video
-      setTexture(video.texture)
+      if ("texture" in video) setTexture(video.texture)
       setWidth(video.width)
       setHeight(video.height)
       setDuration(video.duration)
+      setReady(true)
       if (wantPlay) video.play()
+      // A failure that stops playback later lands in the same signal.
+      video.failed.then((failure) => {
+        if (failure && !disposed) setError(failure)
+      })
+    })
+    .catch((e) => {
+      if (!disposed) setError(toVideoError(e))
     })
-    .catch((e) => setError(e instanceof Error ? e : new Error(String(e))))
 
   onCleanup(() => {
     disposed = true
+    abort.abort()
     if (player) {
       player.close()
       player = undefined
@@ -80,6 +140,7 @@ export function createVideo(path: string, options: VideoOptions = {}): VideoStre
   })
 
   return {
+    ready,
     texture,
     width,
     height,
@@ -93,8 +154,13 @@ export function createVideo(path: string, options: VideoOptions = {}): VideoStre
       wantPlay = false
       player?.pause()
     },
+    seek(seconds: number) {
+      player?.seek(seconds)
+    },
+    seekable: () => player?.seekable ?? false,
     playing: () => player?.playing() ?? false,
     currentTime: () => player?.currentTime() ?? 0,
     finished: () => player?.finished() ?? false,
+    buffering: () => player?.buffering() ?? false,
   }
 }

package/src/window.ts

@@ -2,18 +2,152 @@ import { createSignal, getOwner, onCleanup, onSettled, runWithOwner, flush } fro
 import { requestFrame, setPointerLock } from "flux:rendertree"
 import { renderFrame } from "srt:render"
 import { on, once } from "srt:events"
-import { exit } from "srt:app"
+import { exit as nativeExit, background as nativeBackground } from "srt:app"
+import { platform } from "flux:process"
 import { getEventHandler, focusedNode, setFocus, activateTextInput, setInterestRoot } from "./core"
 import { scanForOrphans, getNodePath } from "./renderer"
 
+// ------ Lifecycle hooks ----------------
+
+// A suspend or quit handler; the runtime waits for a returned promise.
+export type LifecycleHandler = () => void | Promise<void>
+
+// How long exit() waits for the quit handlers before leaving anyway. The
+// platform-initiated ends (window close, Android onDestroy) are bounded by the
+// runtime's own deadline instead; this one only keeps a hung handler from
+// pinning an app that asked to leave.
+const EXIT_HOOK_DEADLINE_MS = 2000
+
+let suspendHandlers: LifecycleHandler[] = []
+let quitHandlers: LifecycleHandler[] = []
+// The suspend dispatch still in flight, if any: a quit that follows a
+// suspend (a finishing Android activity runs onPause, then onDestroy) waits
+// for it before its own handlers, so the persist that suspend started lands
+// before the process ends.
+let pendingSuspend: Promise<void> | null = null
+
+function registerLifecycle(list: LifecycleHandler[], fn: LifecycleHandler) {
+  list.push(fn)
+  let cleanup = () => {
+    let i = list.lastIndexOf(fn)
+    if (i >= 0) list.splice(i, 1)
+  }
+  if (getOwner()) onCleanup(cleanup)
+  return cleanup
+}
+
+// Runs every handler (a throw counts as a rejected promise) and settles once
+// all of them have, logging the failures: one handler's error must not cut
+// another's write short.
+function settleHandlers(name: string, list: LifecycleHandler[]): Promise<void> {
+  let results = [...list].map((fn) => {
+    try {
+      return Promise.resolve(fn())
+    } catch (err) {
+      return Promise.reject(err)
+    }
+  })
+  return Promise.allSettled(results).then((settled) => {
+    for (let r of settled) {
+      if (r.status === "rejected") console.error(`Error in ${name} handler:`, r.reason)
+    }
+  })
+}
+
+function dispatchSuspend(): Promise<void> {
+  let p = settleHandlers("onSuspend", suspendHandlers).finally(() => {
+    if (pendingSuspend === p) pendingSuspend = null
+  })
+  pendingSuspend = p
+  return p
+}
+
+function dispatchQuit(): Promise<void> {
+  let inflight = pendingSuspend ?? Promise.resolve()
+  return inflight.then(() => settleHandlers("onQuit", quitHandlers))
+}
+
+// The runtime asks through the event bus and waits for `done()`: the
+// platform is held open (or its close budget spent) until then, so this must
+// answer exactly once, whatever the handlers do. Subscribed at module load:
+// core is always present, and a hook nobody listens to would leave the
+// runtime waiting out its deadline on every close.
+on("suspend", (e: { done: () => void }) => {
+  dispatchSuspend().then(e.done, e.done)
+})
+on("quit", (e: { done: () => void }) => {
+  dispatchQuit().then(e.done, e.done)
+})
+
+/**
+ * Calls `fn` when the app is being suspended and may be killed without
+ * further notice: the user switches away on Android or iOS (the platform's
+ * "will enter background" moment). Never fires on desktop, where a minimized
+ * app is not killed. This is the moment to persist session state - a file, a
+ * database row, an HTTP request - so a later launch can pick the session up;
+ * the runtime holds the platform open and waits for a returned promise, up to
+ * its deadline (about ten seconds, platform-dependent), then lets the
+ * platform proceed. Nothing decides for you whether to restore afterwards;
+ * that is the app's call.
+ *
+ * Returns a cleanup function; also auto-cleans within an owned scope.
+ */
+export function onSuspend(fn: LifecycleHandler) {
+  return registerLifecycle(suspendHandlers, fn)
+}
+
+/**
+ * Calls `fn` when this app instance is ending: `exit()` (including the
+ * default action of an unprevented `back` on desktop), the desktop window
+ * closing, the Android activity finishing. Not when the app goes to the
+ * background (`background()`, or back at the root on Android). Not a last chance to save - on mobile the
+ * suspend hook has already run, and a user who quits usually does not want
+ * a session kept - but the place for work that needs a real close, and the
+ * runtime waits for a returned promise up to its deadline (well under a
+ * second on Android, where the platform's close budget is fixed; a couple of
+ * seconds on desktop). A force quit or a crash gives no signal on any
+ * platform.
+ *
+ * Returns a cleanup function; also auto-cleans within an owned scope.
+ */
+export function onQuit(fn: LifecycleHandler) {
+  return registerLifecycle(quitHandlers, fn)
+}
+
+/**
+ * Ends the current app: back to the player in a dev client, quitting when
+ * standalone or at the player itself (on Android the activity finishes, so
+ * the next launch starts fresh). The default action of an unprevented `back`
+ * event on desktop; call it directly to exit programmatically, e.g. after
+ * intercepting back for an unsaved-changes dialog. Runs the `onQuit`
+ * handlers first and leaves once their promises settle (or the deadline
+ * passes); returns immediately.
+ */
+export function exit() {
+  let deadline = new Promise<void>((resolve) => setTimeout(resolve, EXIT_HOOK_DEADLINE_MS))
+  Promise.race([dispatchQuit(), deadline]).then(nativeExit, nativeExit)
+}
+
 /**
- * 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.
+ * Leaves the current app without ending it: back to the player in a dev
+ * client; otherwise the OS takes the app to the background - on Android the
+ * task moves behind the others with the process kept, on desktop the window
+ * minimizes. The default action of an unprevented `back` event on Android,
+ * where that is what the system itself does at the root of an app. No
+ * `onQuit` runs (the app is not ending); `onSuspend` fires on Android on the
+ * way, as for any background.
  */
-export { exit }
+export function background() {
+  nativeBackground()
+}
+
+// The default action of an unprevented back event: what the platform itself
+// does at the root of an app. Android backgrounds (since Android 12);
+// everywhere else back at the root ends the app.
+function backDefault() {
+  if (platform === "android") background()
+  else exit()
+}
 
 // ------ Pointer routing -----------------
 
@@ -301,8 +435,10 @@ let backHandlers: ((e: BackEvent) => void)[] = []
  * desktop dev chord). Call `e.preventDefault()` when back means in-app
  * navigation right now (close a modal, previous screen); unprevented, the
  * event passes to the handler registered before this one, and if none of them
- * prevents it either, to the default action: exit(). Apps without a handler
- * exit on back everywhere, which is the correct zero-effort default.
+ * prevents it either, to the default action: what the platform does at the
+ * root of an app - `background()` on Android, `exit()` elsewhere. Apps
+ * without a handler get the platform's behavior, which is the correct
+ * zero-effort default.
  *
  * Handlers form a stack: the most recently registered runs first and the first
  * to prevent ends the dispatch, so each screen or overlay owns one step of the
@@ -516,7 +652,7 @@ export function attachWindow(nodeId: number) {
       // Top of the stack down, stopping as soon as one takes the event.
       let stack = [...backHandlers]
       for (let i = stack.length - 1; i >= 0 && !prevented; i--) stack[i]!(e)
-      if (!prevented) exit()
+      if (!prevented) backDefault()
     })
 
     unsubTextInput = on("textInput", (e: any) => {