@solidrt/core 0.0.50 → 0.0.52

package/examples/{view-viewbox.tsx → view-design-size.tsx}

@@ -1,21 +1,26 @@
-// `viewBox` on a <view> is the fixed-aspect answer to "many screen sizes": you
-// author the whole scene once, in your own made-up design units, and the view
-// scales that space to fit its box. It is SVG's viewBox generalized to any
-// subtree, not an SVG-only thing.
+// `designSize` on a <view> is the fixed-aspect answer to "many screen sizes":
+// you author the whole scene once, in your own made-up design units, and the
+// view scales that space to fit its box. It is SVG's viewBox generalized off
+// the graphics format and onto a layout element - the design size is the only
+// irreducible half of it, since a transform already does what min-x/min-y did.
 //
 // Four facts, each demonstrated below:
-// 1. It NEVER sizes the element. `viewBox` is a pure fit transform; the box
-//    still takes its size from layout (here `flex={1}`). A view with only a
-//    viewBox and no layout size is zero-sized and paints nothing.
+// 1. The view sizes like a REPLACED element (think <img>): its intrinsic size
+//    is the design size, one sized axis derives the other from the design
+//    aspect, and layout props override it as usual - here `flex={1}` takes
+//    the whole window. It never refuses to shrink: a design has no size it
+//    cannot scale below.
 // 2. It fits UNIFORMLY and centers - one scale for both axes, SVG's default
 //    preserveAspectRatio. Content never stretches; the leftover on the loose
 //    axis is letterbox, showing the window background through it.
-// 3. Children live in DESIGN space. Their x/y, w/h, fontSize, stroke widths -
-//    everything resolves against the design size, not the box. The box a child
-//    inherits IS the design size, so a bare `d-rect` fills the design space
-//    and detached text wraps at its width.
+// 3. Children live in DESIGN space, laid-out ones included. x/y, w/h,
+//    fontSize, stroke widths, flex, percentages, text wrapping - everything
+//    resolves against the design size, not the box. The box a child inherits
+//    IS the design size, so a bare `d-rect` fills the design space, detached
+//    text wraps at its width, and a flex row is laid out at the design width
+//    whatever the window - nothing reflows on resize, the fit does the work.
 // 4. Pointer coordinates arrive in design space too. localX/localY on the
-//    viewBox view (and on anything under it) read in design units, so no
+//    design-size view (and on anything under it) read in design units, so no
 //    scale factor is threaded through the app's hit math.
 //
 // The payoff: no `windowSizeClass` branching, no per-breakpoint sizes, no
@@ -44,14 +49,15 @@ function App() {
     <window>
       <d-rect color="#0b0f17" />
 
-      {/* flex={1} sizes the box; viewBox only maps content into it (fact 1). */}
+      {/* flex={1} overrides the intrinsic design size: the box is the whole
+          window, and the fit maps the design into it (fact 1). */}
       <view
         flex={1}
-        viewBox={[DESIGN_W, DESIGN_H]}
+        designSize={[DESIGN_W, DESIGN_H]}
         onPointerMove={(e) => setAt({ x: e.localX, y: e.localY })}
         onPointerLeave={() => setAt(null)}
       >
-        {/* No w/h, so it fills the box it inherits - which under a viewBox is
+        {/* No w/h, so it fills the box it inherits - which under a design size is
             the design space (fact 3). Its edges are the letterbox edges. */}
         <d-rect color="#151b28" />
 
@@ -78,6 +84,18 @@ function App() {
         <Show when={at()}>
           {(a) => <d-oval x={a().x - 8} y={a().y - 8} w={16} h={16} color="#f85149" />}
         </Show>
+
+        {/* A laid-out row under the design size (fact 3): positioned and sized in
+            design units, the bar flexing against the design width. Resize the
+            window: it scales with the scene instead of reflowing. */}
+        <view position="absolute" left={40} right={40} top={364} flexDirection="row" alignItems="center" gap={12}>
+          <text fontSize={16} color="#8b949e">
+            flex row, laid out in design units
+          </text>
+          <view flex={1} height={10}>
+            <d-rect radius={5} color="#1f6feb" />
+          </view>
+        </view>
       </view>
     </window>
   )

package/jsx-runtime.d.ts

@@ -15,6 +15,7 @@ import type {
   OvalGeometryProps,
   TextGeometryProps,
   LineGeometryProps,
+  TransitionProps,
   Element as CoreElement,
   ElementChildrenAttribute as CoreElementChildrenAttribute
 } from "./src/types"
@@ -41,20 +42,20 @@ export namespace JSX {
   // layout box; d-* forms compose the paint-space geometry props instead.
   interface IntrinsicElements {
     window: WindowProps & ElementRef
-    view: ViewProps & ElementRef
-    text: TextProps & LayoutProps & ElementRef
-    rect: RectProps & LayoutProps & ElementRef
-    oval: OvalProps & LayoutProps & ElementRef
-    line: LineProps & LayoutProps & ElementRef
-    path: PathProps & LayoutProps & ElementRef
-    texture: TextureProps & LayoutProps & ElementRef
-    "d-view": ViewOwnProps & ElementRef
-    "d-rect": RectProps & GeometryProps & ElementRef
-    "d-oval": OvalProps & OvalGeometryProps & ElementRef
-    "d-line": LineProps & LineGeometryProps & ElementRef
-    "d-path": PathProps & PositionProps & ElementRef
-    "d-texture": TextureProps & GeometryProps & ElementRef
-    "d-text": TextProps & TextGeometryProps & ElementRef
+    view: ViewProps & TransitionProps & ElementRef
+    text: TextProps & LayoutProps & TransitionProps & ElementRef
+    rect: RectProps & LayoutProps & TransitionProps & ElementRef
+    oval: OvalProps & LayoutProps & TransitionProps & ElementRef
+    line: LineProps & LayoutProps & TransitionProps & ElementRef
+    path: PathProps & LayoutProps & TransitionProps & ElementRef
+    texture: TextureProps & LayoutProps & TransitionProps & ElementRef
+    "d-view": ViewOwnProps & TransitionProps & ElementRef
+    "d-rect": RectProps & GeometryProps & TransitionProps & ElementRef
+    "d-oval": OvalProps & OvalGeometryProps & TransitionProps & ElementRef
+    "d-line": LineProps & LineGeometryProps & TransitionProps & ElementRef
+    "d-path": PathProps & PositionProps & TransitionProps & ElementRef
+    "d-texture": TextureProps & GeometryProps & TransitionProps & ElementRef
+    "d-text": TextProps & TextGeometryProps & TransitionProps & ElementRef
     // A styled run inside <text>/<d-text>; never has a layout box, so there is
     // no d- form.
     span: SpanProps & ElementRef

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "license": "MIT",
+  "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
     "./camera": "./src/camera.ts",
+    "./color": "./src/color.ts",
+    "./data": "./src/data.ts",
     "./gpu": "./src/gpu.ts",
     "./image": "./src/image.ts",
+    "./audio": "./src/audio.ts",
     "./microphone": "./src/microphone.ts",
-    "./sound": "./src/sound.ts",
     "./speech-recognition": "./src/speech-recognition.ts",
     "./text-input": "./src/text-input.ts",
     "./jsx-runtime": "./jsx-runtime.d.ts",
@@ -21,17 +24,16 @@
     "src/",
     "examples/",
     "jsx-runtime.d.ts",
+    "agents/",
+    "docs/",
     "AGENTS.md"
   ],
-  "dependencies": {
-    "colord": "^2.9.3"
-  },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.50"
+    "@solidrt/flux-types": "0.0.52"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.0",
-    "@solidjs/universal": "2.0.0-rc.0",
-    "solid-js": "2.0.0-rc.0"
+    "@solidjs/signals": "2.0.0-rc.1",
+    "@solidjs/universal": "2.0.0-rc.1",
+    "solid-js": "2.0.0-rc.1"
   }
 }

package/src/{sound.ts → audio.ts}

@@ -27,6 +27,15 @@ export type SoundOptions = {
    * Omitted means unspatialized.
    */
   pan?: number
+  /**
+   * Playback rate: 1.0 plays as loaded, higher is faster and higher-pitched
+   * (clamped to [0.01, 100]). Defaults to 1.0.
+   */
+  rate?: number
+  /** Fade each play() in from silence over this many milliseconds. */
+  fadeInMs?: number
+  /** Bus name for every voice of this sound (see flux:audio `stop({ bus })`). */
+  bus?: string
   /**
    * Let play() stack overlapping voices instead of restarting. Defaults to
    * true: rapid triggers overlap. Set false for a single-voice sound where each
@@ -35,6 +44,21 @@ export type SoundOptions = {
   overlap?: boolean
 }
 
+/** Options for the live setters: ramp to the value instead of jumping. */
+export type SoundRampOptions = {
+  /**
+   * Reach the new value over this many milliseconds, engine-smoothed (immune
+   * to frame hitches). Omitted (or 0) sets immediately.
+   */
+  rampMs?: number
+}
+
+/** Options for {@link Sound.stop}. */
+export type SoundStopOptions = {
+  /** Fade to silence over this many milliseconds before stopping. */
+  fadeOutMs?: number
+}
+
 /** Options for a PCM sound: `SoundOptions` plus the channel count. */
 export type PcmSoundOptions = SoundOptions & {
   /** Channel count, interleaved samples when 2. Defaults to 1 (mono). */
@@ -49,18 +73,26 @@ export type SoundStreamOptions = {
   gain?: number
   /** Stereo position in [-1, 1] (see {@link SoundOptions.pan}). */
   pan?: number
+  /** Playback rate (see {@link SoundOptions.rate}). Defaults to 1.0. */
+  rate?: number
+  /** Fade each play() in from silence over this many milliseconds. */
+  fadeInMs?: number
+  /** Bus name for the stream's voice (see flux:audio `stop({ bus })`). */
+  bus?: string
 }
 
 /** A decoded sound with reactive lifecycle. */
 export type Sound = {
   /** Start the clip. Overlaps or restarts per the `overlap` option. */
   play(): void
-  /** Stop every voice started from this sound. */
-  stop(): void
+  /** Stop every voice started from this sound, fading first if asked. */
+  stop(options?: SoundStopOptions): void
   /** Set the volume of every live voice, and of voices started later. */
-  setGain(gain: number): void
+  setGain(gain: number, options?: SoundRampOptions): void
   /** Set the stereo position of every live voice, and of voices started later. */
-  setPan(pan: number): void
+  setPan(pan: number, options?: SoundRampOptions): void
+  /** Set the playback rate of every live voice, and of voices started later. */
+  setRate(rate: number, options?: SoundRampOptions): void
   /** True after play() until stop() (does not track natural completion). */
   playing(): boolean
   /** Set if loading failed. */
@@ -69,12 +101,12 @@ export type Sound = {
 
 // Shared reactive wrapper: owns the loaded clip, tracks live voices, and
 // disposes both on cleanup. `loader` runs once (may throw -> error signal).
-// Gain and pan are remembered so later voices start where setGain/setPan left
-// the sound, not back at the initial options.
+// Gain, pan and rate are remembered so later voices start where the setters
+// left the sound, not back at the initial options.
 function reactiveSound(
   loader: () => Clip,
   overlap: boolean,
-  initial: { loop?: boolean; gain?: number; pan?: number },
+  initial: { loop?: boolean; gain?: number; pan?: number; rate?: number; fadeInMs?: number; bus?: string },
 ): Sound {
   let [error, setError] = createSignal<Error | undefined>(undefined, { ownedWrite: true })
   let [playing, setPlaying] = createSignal(false, { ownedWrite: true })
@@ -84,6 +116,9 @@ function reactiveSound(
   let loop = initial.loop
   let gain = initial.gain
   let pan = initial.pan
+  let rate = initial.rate
+  let fadeInMs = initial.fadeInMs
+  let bus = initial.bus
   try {
     clip = loader()
   } catch (e) {
@@ -96,8 +131,8 @@ function reactiveSound(
     voices = voices.filter((v) => !v.ended())
   }
 
-  let stopAll = () => {
-    for (let v of voices) v.stop()
+  let stopAll = (options?: SoundStopOptions) => {
+    for (let v of voices) v.stop(options)
     voices = []
     setPlaying(false)
   }
@@ -115,19 +150,24 @@ function reactiveSound(
       if (!clip) return
       if (overlap) prune()
       else stopAll()
-      voices.push(clip.play({ loop, gain, pan }))
+      voices.push(clip.play({ loop, gain, pan, rate, fadeInMs, bus }))
       setPlaying(true)
     },
     stop: stopAll,
-    setGain(value) {
+    setGain(value, options) {
       gain = value
       prune()
-      for (let v of voices) v.setGain(value)
+      for (let v of voices) v.setGain(value, options)
     },
-    setPan(value) {
+    setPan(value, options) {
       pan = value
       prune()
-      for (let v of voices) v.setPan(value)
+      for (let v of voices) v.setPan(value, options)
+    },
+    setRate(value, options) {
+      rate = value
+      prune()
+      for (let v of voices) v.setRate(value, options)
     },
     playing,
     error,
@@ -144,6 +184,9 @@ export function createSound(source: Uint8Array, options: SoundOptions = {}): Sou
     loop: options.loop,
     gain: options.gain,
     pan: options.pan,
+    rate: options.rate,
+    fadeInMs: options.fadeInMs,
+    bus: options.bus,
   })
 }
 
@@ -165,6 +208,9 @@ export function createPcmSound(
     loop: options.loop,
     gain: options.gain,
     pan: options.pan,
+    rate: options.rate,
+    fadeInMs: options.fadeInMs,
+    bus: options.bus,
   })
 }
 
@@ -178,5 +224,12 @@ export function createPcmSound(
  */
 export function createSoundStream(source: string | FluxFile, options: SoundStreamOptions = {}): Sound {
   let src = typeof source === "string" ? file(source) : source
-  return reactiveSound(() => stream(src), false, { loop: options.loop, gain: options.gain, pan: options.pan })
+  return reactiveSound(() => stream(src), false, {
+    loop: options.loop,
+    gain: options.gain,
+    pan: options.pan,
+    rate: options.rate,
+    fadeInMs: options.fadeInMs,
+    bus: options.bus,
+  })
 }

package/src/color.ts

@@ -1,30 +1,29 @@
-import { colord, extend } from "colord"
-import namesPlugin from "colord/plugins/names"
-import mixPlugin from "colord/plugins/mix"
-extend([namesPlugin, mixPlugin])
+import * as tree from "flux:rendertree"
+
+// Color parsing and mixing live in the runtime (alloy's color module), one
+// owner for the CSS grammar and the perceptual math; these re-exports keep
+// the core API surface. The renderer no longer parses at all: color strings
+// cross the FFI raw and the runtime decodes them.
 
 /**
  * Parses a CSS color string (named, hex, `rgb()`, `hsl()`, ...) into a packed
- * `0xRRGGBBAA` u32: red in the high byte, alpha in the low byte. Alpha is scaled
- * from colord's 0..1 to 0..255. This is the wire format the runtime expects for
- * the `color` property. Throws on a string that is not a valid CSS color, so a
- * typo fails on the line that wrote it instead of silently painting black.
+ * `0xRRGGBBAA` u32: red in the high byte, alpha in the low byte. This is the
+ * wire format the runtime expects for the `color` property. Throws on a
+ * string that is not a valid CSS color, so a typo fails on the line that
+ * wrote it instead of silently painting black.
  */
 export function parseColor(color: string): number {
-  let c = colord(color)
-  if (!c.isValid()) throw new Error(`Invalid color "${color}"`)
-  let { r, g, b, a } = c.toRgb()
-  return (((r & 0xFF) << 24) | ((g & 0xFF) << 16) | ((b & 0xFF) << 8) | ((a * 255) & 0xFF)) >>> 0
+  return tree.parseColor(color)
 }
 
 /**
- * Mixes two CSS colors in the CIE LAB color space; `t` is the fraction of `b`
- * (0 = pure `a`, 1 = pure `b`). Returns an opaque hex string. Use it to derive
- * semantic tones (muted text, subtle borders) instead of alpha overlays, so
- * the resulting color does not depend on what is drawn beneath it.
+ * Mixes two CSS colors in oklab; `t` is the fraction of `b` (0 = pure `a`,
+ * 1 = pure `b`). Returns a hex string. Use it to derive semantic tones
+ * (muted text, subtle borders) instead of alpha overlays, so the resulting
+ * color does not depend on what is drawn beneath it.
  */
 export function mixColors(a: string, b: string, t: number): string {
-  return colord(a).mix(b, t).toHex()
+  return tree.mixColors(a, b, t)
 }
 
 /**
@@ -33,7 +32,7 @@ export function mixColors(a: string, b: string, t: number): string {
  * e.g. whether a label sits light-on-dark (see typeWeight in components).
  */
 export function brightness(color: string): number {
-  return colord(color).brightness()
+  return tree.brightness(color)
 }
 
 // A color stop: `offset` is 0..1 along the gradient, `color` any CSS color string.

package/src/core.ts

@@ -1,4 +1,5 @@
 import * as tree from "flux:rendertree"
+import type { TextureId } from "flux:gpu"
 import { createSignal, onCleanup } from "@solidjs/signals"
 import { on } from "srt:events"
 
@@ -310,7 +311,8 @@ export interface BoundingBox {
  * reactive: call it inside `onLayout` (or an event handler) to get values for
  * the current frame. Transforms anywhere in the chain (including the node's
  * own) compose fully; the box is the axis-aligned bounds of the transformed
- * quad.
+ * quad. A detached node reports its painted box: its own w/h (or the
+ * inherited box), or for `d-line` and `d-path` the geometry plus its stroke.
  */
 export function getBoundingBox(node: { id: number }): BoundingBox | null {
   return tree.getBoundingBox(node.id)
@@ -324,6 +326,22 @@ export function getBoundingBoxViewport(node: { id: number }): BoundingBox | null
   return tree.getBoundingBoxViewport(node.id)
 }
 
+/**
+ * The texture id of a snapshot boundary's retained rasterization
+ * (`repaintBoundary="snapshot"`): the subtree's pixels as a live texture any
+ * GPU consumer - a `<texture>`, a shader or draw target binding, a 3d
+ * material - samples by id. Allocated on the first call and stable for the
+ * node's lifetime; the runtime re-points it at the current pixels after every
+ * rasterization, and only when the subtree changes (a static panel on an
+ * animated consumer costs no repaint). Empty until the first paint. Owned by
+ * the boundary: `destroyTexture` throws on it, and unmounting the boundary
+ * releases it. Throws if the node is not a snapshot boundary. Not a readback:
+ * for pixels on the CPU use `captureSnapshot`.
+ */
+export function snapshotTexture(node: { id: number }): TextureId {
+  return tree.snapshotTexture(node.id)
+}
+
 /**
  * Measures the rendered size of `text` in layout pixels under the given font
  * options (family, size, weight, style, maxLines), without adding it to the
@@ -363,6 +381,21 @@ export type TextLine = {
   cursor: number
 }
 
+/**
+ * Ink width of the wrap unit starting at unit `index`: its advance through
+ * every glued piece that follows, plus the last piece's ink. What must fit on
+ * the line for the unit to go on it.
+ */
+export function unitInk(units: tree.TextUnit[], index: number): number {
+  let ink = units[index]!.width
+  let advance = 0
+  for (let j = index + 1; j < units.length && units[j]!.glue; j++) {
+    advance += units[j - 1]!.advance
+    ink = advance + units[j]!.width
+  }
+  return ink
+}
+
 /**
  * The next line of `prepared` from unit `cursor` that fits `width`, or null
  * when the text is used up. Greedy: units go on the line while the pen plus
@@ -370,7 +403,9 @@ export type TextLine = {
  * wider than `width` on its own goes on the line whole and overflows. Draw a
  * line as `<d-text x y w={line.width + 1}>{prepared.text.slice(line.start, line.end)}</d-text>`
  * with the same font options; its words are already shaped, so that is
- * cheap. Floats, balancing and ellipsis are <text> features, not this.
+ * cheap. With `runs`, a unit crossing a run boundary is several glued units
+ * that always land on one line; draw such a line with a <span> per run.
+ * Floats, balancing and ellipsis are <text> features, not this.
  */
 export function layoutNextLine(prepared: tree.PreparedText, cursor: number, width: number): TextLine | null {
   let units = prepared.units
@@ -381,7 +416,9 @@ export function layoutNextLine(prepared: tree.PreparedText, cursor: number, widt
   let i = cursor
   while (i < units.length) {
     let unit = units[i]!
-    if (i > cursor && pen + unit.width > width) break
+    // Glued pieces stay with the unit they continue: the whole wrap unit
+    // (this piece through the last glued one) must fit for any of it to go on.
+    if (i > cursor && !unit.glue && pen + unitInk(units, i) > width) break
     pen += unit.advance
     if (unit.ascent > ascent) ascent = unit.ascent
     if (unit.descent > descent) descent = unit.descent

package/src/data.ts

@@ -0,0 +1,99 @@
+// Reactive SQLite. A query is a reactive value: it re-runs when any table it
+// reads is written on this connection, and every consumer updates through
+// normal Solid reactivity. SQLite itself reports both sides of the dependency
+// graph - the statement's read-set comes from `stmt.tables()` (SQLite's
+// authorizer) and writes come from `db.onWrite` (SQLite's update hook, so
+// trigger and cascade writes are included). No SQL parsing, no manual
+// declarations, no wrapper: queries take the plain `flux:sqlite` Database.
+//
+// The contract, in one sentence: a query re-runs when any table it reads is
+// written on this connection. Granularity is per table; writes from another
+// connection or process are not seen; WITHOUT ROWID tables do not report.
+//
+// The imperative primitives live in the `flux:sqlite` module and are
+// framework-neutral. This module is only the thin Solid binding on top (a
+// version signal per table, an async memo per query).
+
+import { createMemo, createSignal } from "@solidjs/signals"
+import type { Signal, SourceAccessor } from "@solidjs/signals"
+import type { Database, Row, SqlParam, Statement } from "flux:sqlite"
+
+export { Database } from "flux:sqlite"
+export type { OpenMode, Row, RunResult, SqlParam, SqlValue, Statement } from "flux:sqlite"
+
+/** Bind parameters: a plain array, or an accessor for reactive params. */
+export type Params = SqlParam[] | (() => SqlParam[])
+
+// Per-database dependency tracking, created lazily on the first createQuery:
+// one version signal per table, bumped from the connection's write events.
+// The function reads (and lazily creates) the version signal of one table.
+// Keyed by the plain Database so there is no wrapper type to hand around.
+let trackers = new WeakMap<Database, (table: string) => void>()
+
+function trackerFor(db: Database): (table: string) => void {
+  let track = trackers.get(db)
+  if (track) return track
+
+  let versions = new Map<string, Signal<number>>()
+  // A write bumps only existing signals: a signal that was never read has no
+  // subscribers, so there is nothing to invalidate. The subscription lives
+  // for the connection's life; close() ends it.
+  db.onWrite((tables) => {
+    for (let table of tables) {
+      let version = versions.get(table)
+      if (version) version[1]((v) => v + 1)
+    }
+  })
+  track = (table) => {
+    let version = versions.get(table)
+    if (!version) {
+      version = createSignal(0)
+      versions.set(table, version)
+    }
+    version[0]()
+  }
+  trackers.set(db, track)
+  return track
+}
+
+/**
+ * A reactive query: an accessor over the matching rows that re-runs when any
+ * table the statement reads is written on this connection. Reads surface as
+ * pending until the first result lands - wrap in `<Loading>` or default with
+ * `?? []`. Pass params as an accessor to also re-run when they change.
+ */
+export function createQuery(db: Database, sql: string, params?: Params): SourceAccessor<Row[]> {
+  return statementQuery(db, sql, params, (stmt, p) => stmt.all(p))
+}
+
+/**
+ * Like {@link createQuery}, but for single-row reads: resolves to the first
+ * matching row, or `undefined` when there is none.
+ */
+export function createQueryRow(
+  db: Database,
+  sql: string,
+  params?: Params,
+): SourceAccessor<Row | undefined> {
+  return statementQuery(db, sql, params, (stmt, p) => stmt.get(p))
+}
+
+function statementQuery<T>(
+  db: Database,
+  sql: string,
+  params: Params | undefined,
+  run: (stmt: Statement, params?: SqlParam[]) => Promise<T>,
+): SourceAccessor<T> {
+  let track = trackerFor(db)
+  let stmt = db.query(sql)
+  // The read-set arrives async (one authorizer round-trip on the connection
+  // thread); computed once, it never changes for a given statement. Reads of
+  // the query below surface as pending until it lands, then the query runs -
+  // so the first execution already subscribes to its tables and no write can
+  // slip between subscription and execution.
+  let tables = createMemo(() => stmt.tables())
+  return createMemo(() => {
+    for (let table of tables()) track(table)
+    return run(stmt, typeof params === "function" ? params() : params)
+  })
+}