@solidrt/core 0.0.51 → 0.0.52

package/src/gpu.ts

@@ -11,11 +11,14 @@
 // `flux:gpu` module.
 //
 // Sampling is a per-texture property declared at creation: `filter`
-// ("linear" default | "nearest") and `wrap` ("clamp" default | "repeat") on
-// every create* helper. One state for every consumer - `<texture>` display
-// and shader sampling both follow it - so a nearest texture upscales with
-// hard pixels everywhere (the retro/pixel-art path: render small, display
-// big). No mipmaps exist.
+// ("linear" default | "nearest"), `wrap` ("clamp" default | "repeat") and
+// `mipmap` (default false) on every create* helper. One state for every
+// consumer - `<texture>` display and shader sampling both follow it - so a
+// nearest texture upscales with hard pixels everywhere (the retro/pixel-art
+// path: render small, display big). `mipmap: true` keeps a mip chain the
+// runtime regenerates after every upload or render, so shader sampling of a
+// minified texture (3d surfaces at distance, a supersampled target) does
+// not alias; the display draw samples the full-size level only.
 //
 // Combining several passes is a render-tree job, not a shader one: stack
 // `<texture>` elements and set their `blendMode` (e.g. `blendMode="plus"` for
@@ -62,8 +65,8 @@ export type CreateOptions = { autoFree?: boolean; label?: string }
 
 // Sampling options every texture-producing create* helper accepts, applied at
 // creation as a property of the texture id (there is no set-sampler-later).
-export type SamplerOptions = { filter?: gpu.FilterMode; wrap?: gpu.WrapMode }
-export type { FilterMode, WrapMode } from "flux:gpu"
+export type SamplerOptions = { filter?: gpu.FilterMode; wrap?: gpu.WrapMode; mipmap?: boolean }
+export type { FilterMode, WrapMode, TextureBinding, TextureBindings } from "flux:gpu"
 
 // Pixel format option for the pixel-upload creates (createTexture,
 // createMutableTexture), fixed for the id's lifetime like the sampler state.
@@ -98,7 +101,11 @@ export type { BufferId, DrawId, ProgramId, RenderPipelineId, ShaderStageId, Text
 // resize in place at a stable id (so `<texture src>` and sampler bindings
 // stay valid); because the id survives, the owner-scoped auto-free
 // registered at creation keeps working and no re-registration is needed.
+// depthTexture(target) names a draw target's sampleable depth (created with
+// `depth: "texture"`): a sampler-only id bound like any texture, owned by
+// the target - no auto-free of its own, it dies with the target's.
 export {
+  depthTexture,
   destroyTexture,
   endBufferWrite,
   resizeTexture,
@@ -112,7 +119,9 @@ 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); destroyBuffer is the manual
+// value, like params) and/or swapped buffers (instanceBuffer 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
 // the explicit render verb for `render: "manual"` targets - targets whose
 // pass is state (accumulation, feedback) rather than a pure function of its
@@ -122,22 +131,22 @@ 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, CullMode, DrawRange, IndexBinding, IndexFormat, IndexRange, ShaderParams, Topology, VertexAttribute } from "flux:gpu"
+export type { BlendMode, BufferUpdate, CullMode, DrawRange, IndexBinding, IndexFormat, IndexRange, InstanceAttribute, ShaderParams, Topology, VertexAttribute } 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
 // wrap. addDraw adds an entry (appended, or inserted via opts.before) and
 // returns its stable DrawId; removeDraw drops one; setDrawParams /
-// setDrawTextures / setDrawRange are the per-entry forms of setTargetParams /
-// setTargetTextures / setDraw, taking (target, draw, value) with identical
-// merge and validation semantics. The per-object hot path is setDrawParams (a
+// setDrawTextures / setDrawRange / setDrawBuffers are the per-entry forms of
+// setTargetParams / setTargetTextures / setDraw (its range and buffer halves),
+// taking (target, draw, value) with identical merge and validation semantics. The per-object hot path is setDrawParams (a
 // moved mesh = one call with its new matrix); the per-target one is
 // setTargetParams (exported above), which on a draw target writes the SHARED
 // params every entry reads. setDrawOrder replaces the whole
 // list order with a full permutation of the live ids - the sorting verb
 // (opaque front-to-back, transparent back-to-front, re-issued when the
 // camera moves).
-export { addDraw, removeDraw, setDrawOrder, setDrawParams, setDrawRange, setDrawTextures } from "flux:gpu"
+export { addDraw, removeDraw, setDrawBuffers, setDrawOrder, setDrawParams, setDrawRange, setDrawTextures } from "flux:gpu"
 
 // The device ceilings (max texture/target size, sampler inputs per pass,
 // vertex attributes per pipeline), queried once at startup. Creates and binds
@@ -162,6 +171,7 @@ export {
   destroyRenderPipeline,
   destroyShader,
   linkProgram,
+  programAttributes,
 } from "flux:gpu"
 
 /**
@@ -283,7 +293,7 @@ export function createShaderTexture(
   width: number,
   height: number,
   params?: gpu.ShaderParams | null,
-  opts?: CreateOptions & SamplerOptions & { textures?: Record<string, gpu.TextureId> },
+  opts?: CreateOptions & SamplerOptions & { textures?: gpu.TextureBindings },
 ): gpu.TextureId {
   let id = gpu.createShaderTexture(fragmentSrc, width, height, params, opts)
   if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
@@ -320,6 +330,12 @@ export function createShaderTexture(
  * the default `"clear"` clears to `clearColor` per render; state that must
  * read its own pixels (decay, blur, simulation) still ping-pongs across two
  * manual targets, and `copyTexture` seeds either shape.
+ *
+ * `samples` (2, 4 or 8) multisamples the target's storage so filled
+ * geometry gets anti-aliased edges; the texture id still names a
+ * single-sample image, so nothing downstream changes. Clamped to the device
+ * maximum, falls back to single-sample (with a warning) where the driver
+ * refuses, and throws with `loadOp: "load"`.
  */
 export function createShaderTarget(
   pipeline: gpu.RenderPipelineId,
@@ -327,12 +343,16 @@ export function createShaderTarget(
   height: number,
   params?: gpu.ShaderParams | null,
   opts?: {
-    textures?: Record<string, gpu.TextureId>
+    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[]
     clearColor?: [number, number, number, number]
     render?: "auto" | "manual"
     loadOp?: "clear" | "load"
+    samples?: 1 | 2 | 4 | 8
   } & (gpu.DrawRange | (gpu.IndexBinding & gpu.IndexRange)) &
     CreateOptions &
     SamplerOptions,
@@ -352,7 +372,10 @@ export function createShaderTarget(
  * `setDrawParams` / `setDrawTextures` / `setDrawRange`. `depth: true` gives
  * the target the depth storage all entries share (cross-entry occlusion);
  * whether an entry tests/writes it stays pipeline state, and a depth-testing
- * pipeline into a depthless target throws at `addDraw`.
+ * pipeline into a depthless target throws at `addDraw`. `depth: "texture"`
+ * makes that storage a sampleable depth texture with its own id,
+ * `depthTexture(target)` - the shadow-map / depth-effect input; not with
+ * `samples`.
  *
  * `params` seeds the target's SHARED params - values every entry reads,
  * written once per target instead of once per entry (a camera's
@@ -379,11 +402,12 @@ export function createDrawTarget(
   height: number,
   params?: gpu.ShaderParams | null,
   opts?: {
-    depth?: boolean
-    textures?: Record<string, gpu.TextureId>
+    depth?: boolean | "texture"
+    textures?: gpu.TextureBindings
     clearColor?: [number, number, number, number]
     render?: "auto" | "manual"
     loadOp?: "clear" | "load"
+    samples?: 1 | 2 | 4 | 8
   } & CreateOptions &
     SamplerOptions,
 ): gpu.TextureId {
@@ -393,29 +417,31 @@ export function createDrawTarget(
 }
 
 /** The reactive shader description `createShaderTextureMemo` builds from.
- * Sampling (`filter`/`wrap`) is creation-time state, so changing it rebuilds
+ * Sampling (`filter`/`wrap`/`mipmap`) is creation-time state, so changing it rebuilds
  * at a fresh id, like a fragment-source or sampler-binding change. */
 export type ShaderSpec = {
   fragmentSrc: string
   width: number
   height: number
   params?: gpu.ShaderParams
-  textures?: Record<string, gpu.TextureId>
+  textures?: gpu.TextureBindings
 } & SamplerOptions
 
 // Shallow name->value equality for params/textures records; treats undefined
 // as the empty record. A param value may be a number or a flat number array
-// (typed uniforms), so arrays compare elementwise.
-function sameValue(a: number | number[] | undefined, b: number | number[] | undefined): boolean {
+// (typed uniforms), so arrays compare elementwise; a texture binding may be
+// an `{ id, filter?, wrap? }` override, compared field by field.
+type RecordValue = number | number[] | gpu.TextureBinding
+function sameValue(a: RecordValue | undefined, b: RecordValue | undefined): boolean {
   if (a === b) return true
-  if (!Array.isArray(a) || !Array.isArray(b)) return false
-  return a.length === b.length && a.every((v, i) => v === b[i])
+  if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => v === b[i])
+  if (typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b)) {
+    return a.id === b.id && a.filter === b.filter && a.wrap === b.wrap
+  }
+  return false
 }
 
-function sameRecord(
-  a: Record<string, number | number[]> | undefined,
-  b: Record<string, number | number[]> | undefined,
-): boolean {
+function sameRecord(a: Record<string, RecordValue> | undefined, b: Record<string, RecordValue> | undefined): boolean {
   if (a === b) return true
   let ka = a ? Object.keys(a) : []
   let kb = b ? Object.keys(b) : []
@@ -450,7 +476,12 @@ export function createShaderTextureMemo(
   opts?: { onError?: (error: unknown) => void },
 ): () => gpu.TextureId {
   let make = (s: ShaderSpec) =>
-    gpu.createShaderTexture(s.fragmentSrc, s.width, s.height, s.params, { textures: s.textures, filter: s.filter, wrap: s.wrap })
+    gpu.createShaderTexture(s.fragmentSrc, s.width, s.height, s.params, {
+      textures: s.textures,
+      filter: s.filter,
+      wrap: s.wrap,
+      mipmap: s.mipmap,
+    })
   let current = untrack(spec)
   let currentId = make(current)
   let [id, setId] = createSignal(currentId)
@@ -460,7 +491,8 @@ export function createShaderTextureMemo(
         next.fragmentSrc === current.fragmentSrc &&
         sameRecord(next.textures, current.textures) &&
         next.filter === current.filter &&
-        next.wrap === current.wrap
+        next.wrap === current.wrap &&
+        next.mipmap === current.mipmap
       ) {
         // Program and inputs unchanged: mutate in place, the id stays stable.
         if (next.width !== current.width || next.height !== current.height) {
@@ -545,11 +577,14 @@ export function createPipelineTexture(
   height: number,
   params?: gpu.ShaderParams | null,
   opts?: {
-    textures?: Record<string, gpu.TextureId>
+    textures?: gpu.TextureBindings
     attributes?: gpu.VertexAttribute[]
     buffer?: gpu.BufferId
-    instanceAttributes?: gpu.VertexAttribute[]
+    instanceAttributes?: gpu.InstanceAttribute[]
     instanceBuffer?: gpu.BufferId
+    /** One buffer per instance slot (index = the attributes' `slot`);
+     * pass this OR `instanceBuffer`, not both. */
+    instanceBuffers?: gpu.BufferId[]
     topology?: gpu.Topology
     depth?: boolean
     depthWrite?: boolean
@@ -558,6 +593,7 @@ export function createPipelineTexture(
     clearColor?: [number, number, number, number]
     render?: "auto" | "manual"
     loadOp?: "clear" | "load"
+    samples?: 1 | 2 | 4 | 8
   } & (gpu.DrawRange | (gpu.IndexBinding & gpu.IndexRange)) &
     CreateOptions &
     SamplerOptions,

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from "./renderer"
-export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, onPointerMove } from "./core"
+export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, snapshotTexture, onPointerMove } from "./core"
 export type { BoundingBox, GlobalPointerEvent, TextLine } from "./core"
 export { parseColor, mixColors, brightness, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
@@ -17,9 +17,11 @@ export type { TextureId } from "./gpu"
 export { createImage, decodeImage, encodeImage } from "./image"
 export type { DecodedImage, ImageSource } from "./image"
 export { parseSvg, svg } from "./svg"
+export { Logo } from "./logo"
+export type { LogoProps } from "./logo"
 export type { SvgDocument, SvgDraw } from "./svg"
 export { createScroll } from "./scroll"
-export type { Scroll, ScrollAxis, ScrollOffset, ScrollOptions } from "./scroll"
+export type { Scroll, ScrollAxis, ScrollBehavior, ScrollOffset, ScrollOptions, ScrollToOptions } from "./scroll"
 export { arena } from "./arena"
 export type { ArenaOwner } from "./arena"
 export { createPan } from "./pan"
@@ -31,6 +33,10 @@ export type {
   LayoutProps,
   TransformProps,
   PointerProps,
+  TransitionProps,
+  Transition,
+  TransitionPropName,
+  TransitionEndEvent,
   PointerEvent,
   WheelEvent,
   KeyEvent,

package/src/logo.tsx

@@ -0,0 +1,92 @@
+// The SolidRT brand mark: seven puzzle segments authored in a 100x100 space,
+// each filled with its own light-to-dark gradient. Static by default; the
+// animated forms stagger a fade per segment, either once (fade in and hold)
+// or in a loop (in, then out, repeat) like the scaffold's welcome screen.
+import { For, Show, createSignal } from "solid-js"
+import { createLinearGradient } from "./color"
+import { onFrame } from "./window"
+
+export interface LogoProps {
+  // Rendered width and height in pixels; the mark is square. Default 100.
+  size?: number
+  // "none" draws the mark at full opacity and requests no frames (default).
+  // "once" fades the segments in one after the other and then holds; "loop"
+  // fades them in, then out, and repeats.
+  animation?: "none" | "once" | "loop"
+}
+
+// Per segment: the delay of its fade in ms (its fade out follows at the same
+// offset after the last fade in has completed), its gradient, its path.
+const SEGMENTS = [
+  { base: 0, light: "#3f5494", dark: "#162b6c", d: "M50.000 50.000 L28.330 50.000 C28.330 48.810 27.695 47.711 26.665 47.116 C25.635 46.521 24.365 46.521 23.335 47.116 C22.305 47.711 21.670 48.810 21.670 50.000 L0.000 50.000 L50.000 0.000 L50.000 9.170 C48.810 9.170 47.711 9.805 47.116 10.835 C46.521 11.865 46.521 13.135 47.116 14.165 C47.711 15.195 48.810 15.830 50.000 15.830 L50.000 25.000 L50.000 34.170 C48.810 34.170 47.711 34.805 47.116 35.835 C46.521 36.865 46.521 38.135 47.116 39.165 C47.711 40.195 48.810 40.830 50.000 40.830 L50.000 50.000 Z" },
+  { base: 90, light: "#547ebf", dark: "#2b5696", d: "M50.000 50.000 L50.000 59.170 C48.810 59.170 47.711 59.805 47.116 60.835 C46.521 61.865 46.521 63.135 47.116 64.165 C47.711 65.195 48.810 65.830 50.000 65.830 L50.000 75.000 L50.000 84.170 C48.810 84.170 47.711 84.805 47.116 85.835 C46.521 86.865 46.521 88.135 47.116 89.165 C47.711 90.195 48.810 90.830 50.000 90.830 L50.000 100.000 L0.000 50.000 L21.670 50.000 C21.670 48.810 22.305 47.711 23.335 47.116 C24.365 46.521 25.635 46.521 26.665 47.116 C27.695 47.711 28.330 48.810 28.330 50.000 L50.000 50.000 Z" },
+  { base: 180, light: "#7ea9ea", dark: "#5681c1", d: "M50.000 25.000 L50.000 15.830 C48.810 15.830 47.711 15.195 47.116 14.165 C46.521 13.135 46.521 11.865 47.116 10.835 C47.711 9.805 48.810 9.170 50.000 9.170 L50.000 0.000 L75.000 25.000 L65.830 25.000 C65.830 26.190 65.195 27.289 64.165 27.884 C63.135 28.479 61.865 28.479 60.835 27.884 C59.805 27.289 59.170 26.190 59.170 25.000 L50.000 25.000 Z" },
+  { base: 270, light: "#547ebf", dark: "#2b5696", d: "M50.000 25.000 L59.170 25.000 C59.170 26.190 59.805 27.289 60.835 27.884 C61.865 28.479 63.135 28.479 64.165 27.884 C65.195 27.289 65.830 26.190 65.830 25.000 L75.000 25.000 L75.000 34.170 C73.810 34.170 72.711 34.805 72.116 35.835 C71.521 36.865 71.521 38.135 72.116 39.165 C72.711 40.195 73.810 40.830 75.000 40.830 L75.000 50.000 L65.830 50.000 C65.830 48.810 65.195 47.711 64.165 47.116 C63.135 46.521 61.865 46.521 60.835 47.116 C59.805 47.711 59.170 48.810 59.170 50.000 L50.000 50.000 L50.000 40.830 C48.810 40.830 47.711 40.195 47.116 39.165 C46.521 38.135 46.521 36.865 47.116 35.835 C47.711 34.805 48.810 34.170 50.000 34.170 L50.000 25.000 Z" },
+  { base: 360, light: "#7ea9ea", dark: "#5681c1", d: "M50.000 50.000 L59.170 50.000 C59.170 48.810 59.805 47.711 60.835 47.116 C61.865 46.521 63.135 46.521 64.165 47.116 C65.195 47.711 65.830 48.810 65.830 50.000 L75.000 50.000 L64.855 60.145 C64.013 59.304 62.787 58.976 61.638 59.283 C60.489 59.591 59.591 60.489 59.283 61.638 C58.976 62.787 59.304 64.013 60.145 64.855 L50.000 75.000 L50.000 65.830 C48.810 65.830 47.711 65.195 47.116 64.165 C46.521 63.135 46.521 61.865 47.116 60.835 C47.711 59.805 48.810 59.170 50.000 59.170 L50.000 50.000 Z" },
+  { base: 450, light: "#3f5494", dark: "#162b6c", d: "M75.000 50.000 L75.000 59.170 C73.810 59.170 72.711 59.805 72.116 60.835 C71.521 61.865 71.521 63.135 72.116 64.165 C72.711 65.195 73.810 65.830 75.000 65.830 L75.000 75.000 L50.000 100.000 L50.000 90.830 C48.810 90.830 47.711 90.195 47.116 89.165 C46.521 88.135 46.521 86.865 47.116 85.835 C47.711 84.805 48.810 84.170 50.000 84.170 L50.000 75.000 L60.145 64.855 C59.304 64.013 58.976 62.787 59.283 61.638 C59.591 60.489 60.489 59.591 61.638 59.283 C62.787 58.976 64.013 59.304 64.855 60.145 L75.000 50.000 Z" },
+  { base: 540, light: "#7ea9ea", dark: "#5681c1", d: "M100.000 50.000 L75.000 75.000 L75.000 65.830 C73.810 65.830 72.711 65.195 72.116 64.165 C71.521 63.135 71.521 61.865 72.116 60.835 C72.711 59.805 73.810 59.170 75.000 59.170 L75.000 50.000 L75.000 40.830 C73.810 40.830 72.711 40.195 72.116 39.165 C71.521 38.135 71.521 36.865 72.116 35.835 C72.711 34.805 73.810 34.170 75.000 34.170 L75.000 25.000 L100.000 50.000 Z" },
+]
+
+const FADE = 360
+const LAST = SEGMENTS[SEGMENTS.length - 1]!.base
+// The whole mark is visible from IN_DONE; a loop cycle fades out after that.
+const IN_DONE = LAST + FADE
+const CYCLE = IN_DONE + LAST + FADE
+
+let clamp = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x)
+let ease = (t: number) => 1 - (1 - t) * (1 - t)
+let byte = (x: number) => Math.round(clamp(x) * 255).toString(16).padStart(2, "0")
+
+export function Logo(props: LogoProps) {
+  let size = () => props.size ?? 100
+  let mode = () => props.animation ?? "none"
+
+  // Elapsed animation time; only advanced while an animated mode is mounted.
+  let [clock, setClock] = createSignal(0)
+
+  // The frame loop is mounted through the <Show> below so a mode change
+  // remounts it: onFrame holds a standing frame request while registered.
+  // "once" releases its request as soon as the last segment is in.
+  let Animate = () => {
+    let start = -1
+    let stop = onFrame((tick) => {
+      if (start < 0) start = tick
+      let t = tick - start
+      if (mode() === "loop") setClock(t % CYCLE)
+      else if (t < IN_DONE) setClock(t)
+      else {
+        setClock(IN_DONE)
+        stop()
+      }
+    })
+    return null
+  }
+
+  let alpha = (seg: (typeof SEGMENTS)[number]) => {
+    if (mode() === "none") return 1
+    let t = clock()
+    if (t < seg.base) return 0
+    let fadeIn = clamp((t - seg.base) / FADE)
+    if (mode() === "once") return ease(fadeIn)
+    let end = IN_DONE + seg.base + FADE
+    if (t >= end) return 0
+    return ease(Math.min(fadeIn, clamp((end - t) / FADE)))
+  }
+
+  let fill = (seg: (typeof SEGMENTS)[number]) => {
+    let a = byte(alpha(seg))
+    return createLinearGradient(0, 0, 1, 1, [
+      { offset: 0, color: seg.light + a },
+      { offset: 1, color: seg.dark + a },
+    ])
+  }
+
+  return (
+    <view width={size()} height={size()} designSize={[100, 100]}>
+      <Show when={mode() !== "none"}>
+        <Animate />
+      </Show>
+      <For each={SEGMENTS}>{(seg) => <d-path d={seg.d} color={fill(seg)} />}</For>
+    </view>
+  )
+}

package/src/renderer.ts

@@ -1,8 +1,9 @@
-import { createRoot, onCleanup } from "@solidjs/signals"
+import { createRoot, onCleanup, NotReadyError } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
+import { createErrorBoundary } from "solid-js"
 import type { Element } from "solid-js"
 import * as tree from "flux:rendertree"
-import { attachWindow } from "./window"
+import { attachWindow, setWindowRoot } from "./window"
 import { setEventHandler, setFocusable, setTextInputHints, cleanupNode, focusedNode, setFocus } from "./core"
 
 export { getEventHandler } from "./core"
@@ -213,20 +214,7 @@ function applyProp<T>(node: ProxyNode, name: string, value: T): void {
   setTreeProperty(node, name, value)
 }
 
-export let {
-  effect,
-  memo,
-  createComponent,
-  createElement,
-  createTextNode,
-  insertNode,
-  insert,
-  spread,
-  setProp,
-  mergeProps,
-  applyRef,
-  ref,
-} = createRenderer<ProxyNode>({
+let renderer = createRenderer<ProxyNode>({
   createElement: (elementType: string, props?: Record<string, any>): ProxyNode => {
     let proxy = createProxyNode(elementType)
 
@@ -235,11 +223,13 @@ export let {
     if (elementType === "window") tree.createRoot(proxy.id)
     else tree.createNode(proxy.id, elementType)
 
-    // The universal JSX template hands static props here as an object; children
-    // and ref arrive through their own hooks, so skip them.
+    // The universal JSX template hands static props here as an object. The
+    // compiler routes children/ref expressions through their own hooks, so
+    // those names only appear here in degenerate literal forms (children="hi",
+    // a bare ref) - let them flow to the tree so the unknown-property warning
+    // reports them instead of dropping them silently.
     if (props) {
       for (let name in props) {
-        if (name === "children" || name === "ref") continue
         applyProp(proxy, name, props[name])
       }
     }
@@ -309,28 +299,185 @@ export let {
   },
 })
 
-// The app's single <window> node, set by render(). Serves as the default mount
-// target for createPortal (single window by design, so one ambient ref).
+export let { memo, createComponent, createElement, createTextNode, insertNode, spread, setProp, mergeProps, applyRef, ref } =
+  renderer
+let { effect: rawEffect, insert: rawInsert } = renderer
+
+// ------ Per-node error containment --------
+//
+// Every reactive write into the tree goes through two exports the compiled
+// JSX calls: `effect` (an element's dynamic props) and `insert` (a child
+// expression). An error thrown while computing either is contained right
+// there: the props or children keep their last good value, the effect stays
+// subscribed (the throwing read is tracked, so fixing it recomputes and the
+// node recovers on its own), and the rest of the app keeps running. Without
+// this one unclaimed error halts the whole reactive system. A NotReadyError
+// is not an error but a pending async read on its way to the nearest
+// <Loading>, so it passes through. Reported once per site until it recovers,
+// not once per run. What escapes these two (a user createEffect that throws)
+// still reaches render()'s root boundary.
+const SKIP = Symbol("skip")
+
+function guard<T>(fn: (prev?: T) => T, describe: () => string, nested: boolean, empty: T): (prev?: T) => T {
+  let last = empty
+  let failing = false
+  return (prev?: T) => {
+    try {
+      let value = fn(prev === SKIP ? undefined : prev)
+      if (failing) {
+        failing = false
+        console.warn(`Recovered: ${describe()} computes again`)
+      }
+      // A child expression resolving to a function is read by an inner
+      // effect (universal's insert); that read gets the same containment.
+      // Solid's flatten only unwraps zero-arity functions and inserts any
+      // other function as a node, so only accessors are wrapped, and the
+      // wrapper keeps arity 0.
+      if (nested && typeof value === "function" && value.length === 0) {
+        let inner = guard(value as any, describe, true, empty)
+        value = (() => inner()) as any
+      }
+      last = value
+      return value
+    } catch (e) {
+      if (e instanceof NotReadyError) throw e
+      if (!failing) {
+        failing = true
+        console.error(`Contained error: ${describe()} threw and keeps its last value until it computes again.`, e)
+      }
+      return last
+    }
+  }
+}
+
+// Universal's declarations trail its runtime (effect takes options, insert
+// takes initial and options), so the wrappers carry the runtime signatures.
+type EffectFn = <T>(fn: (prev?: T) => T, effectFn?: (value: T, prev?: T) => void, options?: unknown) => void
+type InsertFn = (parent: ProxyNode, accessor: unknown, marker?: unknown, initial?: unknown, options?: unknown) => ProxyNode
+let effectRaw = rawEffect as unknown as EffectFn
+let insertRaw = rawInsert as unknown as InsertFn
+
+export let effect: EffectFn = (fn, effectFn, options) =>
+  effectRaw<any>(
+    guard<any>(fn, () => "an element's prop expression", false, SKIP),
+    effectFn && ((value, prev) => (value === SKIP ? undefined : effectFn(value, prev === SKIP ? undefined : prev))),
+    options,
+  )
+
+export let insert: InsertFn = (parent, accessor, marker, initial, options) =>
+  insertRaw(
+    parent,
+    typeof accessor === "function"
+      ? guard(accessor as any, () => `a child expression of <${parent.elementType}> ${getNodePath(parent.id).join("/")}`, true, undefined)
+      : accessor,
+    marker,
+    initial,
+    options,
+  )
+
+// The current <window> node: the app's, or the error window standing in for
+// it. Serves as the default mount target for createPortal (single window by
+// design, so one ambient ref).
 let windowRoot: ProxyNode | undefined
+let rendered = false
+// Ids of error windows built by the root boundary, alive only while shown.
+let errorWindows = new Set<number>()
 
 /**
  * Mounts a SolidRT app. Call once at the top level: `render(() => <App />)`.
  * The element returned by `code` MUST be a `<window>` (it becomes the native
  * window and root of the render tree); anything else throws. Runs inside a
  * reactive root, so the whole tree is disposed together on engine reload.
+ *
+ * The whole app, window included, sits inside an error boundary: an error no
+ * <Errored> claims replaces the app's window with an error window (message,
+ * stack, a reset button) instead of halting the reactive system for good.
+ * The app's subtree stays alive behind it - the boundary keeps it and marks
+ * only the failed computations - so reset recomputes those in place and the
+ * same window node comes back.
  */
 export function render(code: () => any) {
+  // Once per app: there is no unmount; teardown is engine teardown.
+  if (rendered) {
+    throw new Error("render() already called; an app has exactly one render()")
+  }
+  rendered = true
   createRoot(() => {
-    let root = code()
-    if (!root || root.elementType !== "window") {
-      throw new Error("render() root must be a <window> element")
-    }
-    windowRoot = root
-    attachWindow(root.id)
-    insert(null, root)
+    let root = createErrorBoundary(
+      () => {
+        let win = code()
+        if (!win || win.elementType !== "window") {
+          throw new Error("render() root must be a <window> element")
+        }
+        return win
+      },
+      (error, reset) => {
+        // The boundary hands the error as an accessor.
+        let err = error()
+        console.error("Uncaught error: the app is replaced by the error window until reset or reload.", err)
+        let win = errorWindow(err, reset)
+        errorWindows.add(win.id)
+        return win
+      },
+    )
+    rawEffect(
+      () => root() as ProxyNode,
+      (win, prev) => swapRoot(win, prev),
+    )
   })
 }
 
+// The boundary's value changed: the app's window on mount and after a
+// successful reset, an error window after an error. Creating a window already
+// made it the native root; setRoot is the way back to an existing one.
+function swapRoot(win: ProxyNode, prev?: ProxyNode) {
+  windowRoot = win
+  if (prev === undefined) {
+    attachWindow(win.id)
+    return
+  }
+  // Creating the error window made it the native root; the app's window
+  // coming back is the case that needs the explicit way back.
+  if (!errorWindows.has(win.id)) tree.setRoot(win.id)
+  setWindowRoot(win.id)
+  // Keys route to the focused node; one inside the hidden window must not
+  // keep hearing them.
+  setFocus(null)
+  // The app's window survives behind an error window (the boundary keeps its
+  // subtree for reset); an error window replaced by anything is dead.
+  if (errorWindows.has(prev.id) || !errorWindows.has(win.id)) {
+    errorWindows.delete(prev.id)
+    destroyNode(prev)
+  }
+}
+
+// The error window: the in-app sibling of the runtime's startup BSOD, built
+// from the primitives directly (no JSX in core). Static content; the reset
+// button recomputes the failed sources, and a reload replaces everything.
+function errorWindow(err: unknown, reset: () => void): ProxyNode {
+  let message = err instanceof Error ? err.message : String(err)
+  let stack = err instanceof Error && err.stack ? err.stack : ""
+  let text = (content: string, props: Record<string, any>) => {
+    let node = createElement("text", props)
+    insertNode(node, createTextNode(content))
+    return node
+  }
+  let win = createElement("window", { title: "Application error" })
+  insertNode(win, createElement("d-rect", { color: "#1144bb" }))
+  let column = createElement("view", { flexGrow: 1, flexDirection: "column", padding: 40, gap: 12 })
+  insertNode(column, text(":(", { color: "white", fontSize: 64, fontWeight: 700 }))
+  insertNode(column, text("Something went wrong", { color: "white", fontSize: 22 }))
+  insertNode(column, text(message, { color: "white", fontSize: 16 }))
+  if (stack) insertNode(column, text(stack, { color: "#aac2ff", fontSize: 12, fontFamily: "mono" }))
+  insertNode(column, text("Fix the error and save to reload, or reset to retry the failed computations.", { color: "#aac2ff", fontSize: 14 }))
+  let button = createElement("view", { alignSelf: "flex-start", padding: 12, onPointerDown: () => reset() })
+  insertNode(button, createElement("d-rect", { color: "white", radius: 6 }))
+  insertNode(button, text("Reset", { color: "#1144bb", fontSize: 16, fontWeight: 600 }))
+  insertNode(column, button)
+  insertNode(win, column)
+  return win
+}
+
 /**
  * Relocates an already-built node out of its lexical position to `mount` (the
  * window root by default), then removes it again when the surrounding reactive
@@ -362,6 +509,11 @@ export function createPortal(node: Element, mount?: ProxyNode): null {
     throw new Error("createPortal: node must be a single built element")
   }
   insertNode(target, node as ProxyNode)
-  onCleanup(() => removeNode(target, node as ProxyNode))
+  // A destroyed mount target has already swept the portaled node with it
+  // (destroy walks the mount tree), so detaching then would hand freed ids to
+  // the native side, which panics. Gone from the proxy map = already freed.
+  onCleanup(() => {
+    if (nodes.has((node as ProxyNode).id)) removeNode(target, node as ProxyNode)
+  })
   return null
 }

package/src/runtime-modules.d.ts

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