@solidrt/core 0.0.49 → 0.0.51

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

@@ -1,14 +1,15 @@
 // Sound playback, reactive (SolidJS) layer. `createSound` decodes an encoded
 // clip (Ogg/Vorbis or WAV) once and owns its lifecycle: the decoded clip is
 // released, and any playing voices stopped, when the reactive owner is disposed.
-// Each play() is cheap (no re-decode). `createSoundStream` is the same but reads
-// a large track from a file path on demand instead of decoding it into memory.
+// Each play() is cheap (no re-decode). `createPcmSound` is the same over raw
+// samples the app generated itself; `createSoundStream` reads a large track
+// from a file path on demand instead of decoding it into memory.
 //
 // The imperative primitive lives in the `flux:audio` module; import
 // { play, load, loadPcm, stream } from "flux:audio" for non-reactive use.
 
 import { createSignal, onCleanup } from "@solidjs/signals"
-import { load, stream } from "flux:audio"
+import { load, loadPcm, stream } from "flux:audio"
 import { file } from "flux:fs"
 
 type FluxFile = ReturnType<typeof file>
@@ -26,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
@@ -34,6 +44,27 @@ 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). */
+  channels?: 1 | 2
+}
+
 /** Options for a streamed sound. Streams are always single-voice. */
 export type SoundStreamOptions = {
   /** Repeat the track until stopped. Defaults to false. */
@@ -42,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. */
@@ -62,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 })
@@ -77,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) {
@@ -89,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)
   }
@@ -108,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,
@@ -137,6 +184,33 @@ 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,
+  })
+}
+
+/**
+ * A sound over raw PCM samples the app generated itself - no decoding, no
+ * container. The typed array is the sample format (Uint8Array = unsigned
+ * 8-bit, Int16Array = signed 16-bit, Float32Array = 32-bit float), interleaved
+ * when `channels` is 2. Same handle and lifecycle as createSound; on a box with
+ * no audio device the clip fails to load, so `error()` is set and play() is a
+ * no-op, exactly like createSound there. For imperative use, call loadPcm()
+ * from "flux:audio".
+ */
+export function createPcmSound(
+  samples: Uint8Array | Int16Array | Float32Array,
+  sampleRate: number,
+  options: PcmSoundOptions = {},
+): Sound {
+  return reactiveSound(() => loadPcm(samples, sampleRate, { channels: options.channels }), options.overlap ?? true, {
+    loop: options.loop,
+    gain: options.gain,
+    pan: options.pan,
+    rate: options.rate,
+    fadeInMs: options.fadeInMs,
+    bus: options.bus,
   })
 }
 
@@ -150,5 +224,12 @@ export function createSound(source: Uint8Array, options: SoundOptions = {}): Sou
  */
 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

@@ -331,4 +331,92 @@ export function getBoundingBoxViewport(node: { id: number }): BoundingBox | null
  */
 export function measureText(text: string, options?: tree.MeasureTextOptions): { width: number, height: number } {
   return tree.measureText(text, options)
+}
+
+/**
+ * Segments `text` into wrap units (words with their trailing whitespace) and
+ * shapes each in the given font, once, for laying lines out in app code with
+ * layoutNextLine or arithmetic of your own over `units`. For the non-standard
+ * case (text into a shape, around a moving obstacle, handed between columns,
+ * fitted by size); regular text of any length is a <text>.
+ */
+export function prepareText(text: string, options?: tree.MeasureTextOptions): tree.PreparedText {
+  return tree.prepareText(text, options)
+}
+
+/** One laid-out line from layoutNextLine. */
+export type TextLine = {
+  /** Unit range [from, to) into prepared.units. */
+  from: number
+  to: number
+  /** Character range into prepared.text: `text.slice(start, end)` is the line's text (break characters included). */
+  start: number
+  end: number
+  /** Ink width: the units' advances plus the last unit's width, without its trailing whitespace. */
+  width: number
+  /** Tallest ascent plus tallest descent on the line. */
+  height: number
+  ascent: number
+  /** The line ended at a hard break rather than by running out of width. */
+  hardBreak: boolean
+  /** Where the next line starts; equal to `to`. */
+  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
+ * the unit's ink stays within `width`; a hard break ends the line; a unit
+ * 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. 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
+  if (cursor >= units.length) return null
+  let pen = 0
+  let ascent = 0
+  let descent = 0
+  let i = cursor
+  while (i < units.length) {
+    let unit = units[i]!
+    // 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
+    i++
+    if (unit.hardBreak) break
+  }
+  let last = units[i - 1]!
+  return {
+    from: cursor,
+    to: i,
+    start: units[cursor]!.start,
+    end: last.end,
+    width: pen - last.advance + last.width,
+    height: ascent + descent,
+    ascent,
+    hardBreak: last.hardBreak,
+    cursor: i,
+  }
 }

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)
+  })
+}

package/src/gpu.ts

@@ -21,8 +21,10 @@
 // `<texture>` elements and set their `blendMode` (e.g. `blendMode="plus"` for
 // an additive pass over a base pass) instead of writing a pass that samples
 // both. WITHIN one pipeline draw, `blend: "add"` accumulates overlapping
-// geometry additively (order-independent, no sorting); anything else draws
-// with GL blending disabled and overwrites.
+// geometry additively and `blend: "multiply"` scales it (both
+// order-independent, no sorting); `blend: "alpha"` composites over in
+// draw-list order (order-dependent: the app or a scene layer sorts); anything
+// else draws with GL blending disabled and overwrites.
 //
 // The pixel contract. Three facts hold for every texture and target:
 //
@@ -40,8 +42,8 @@
 //   default transparent black needs no thought.
 // - Values are non-linear RGBA8, with no color-space concept. Every texture
 //   and target holds 8-bit RGBA UNORM exactly as written; nothing converts to
-//   or from linear light. `filter: "linear"` averages and `blend: "add"`
-//   accumulates non-linear values - the usual approximation, stated so
+//   or from linear light. `filter: "linear"` averages and the `blend` modes
+//   accumulate non-linear values - the usual approximation, stated so
 //   shaders written today stay correct if a format vocabulary arrives.
 
 import { createEffect, createSignal, getOwner, onCleanup, untrack } from "@solidjs/signals"
@@ -98,6 +100,7 @@ export type { BufferId, DrawId, ProgramId, RenderPipelineId, ShaderStageId, Text
 // registered at creation keeps working and no re-registration is needed.
 export {
   destroyTexture,
+  endBufferWrite,
   resizeTexture,
   setTargetParams,
   setTargetSize,
@@ -512,10 +515,12 @@ function toUint8(data: ArrayBuffer | ArrayBufferView): Uint8Array {
  * `opts.depth` attaches a private depth buffer (cleared + tested per render);
  * `opts.depthWrite: false` (requires depth) keeps the test but stops the
  * draw from writing depth. `opts.blend: "add"` makes the draw accumulate
- * overlapping geometry additively (order-independent, no sorting) instead of
- * overwriting; a depth-tested additive pass is `{ depth: true, blend: "add",
- * depthWrite: false }` - each option only does what it says, neither implies
- * the other. The draw range (`firstVertex`, `vertexCount`, `instanceCount` -
+ * overlapping geometry additively and `"multiply"` makes it scale (darken)
+ * what is already there, both order-independent (no sorting) instead of
+ * overwriting; `"alpha"` composites over in draw-list order (premultiplied
+ * output, back-to-front is the caller's job). A depth-tested blended pass is
+ * `{ depth: true, blend: "add", depthWrite: false }` - each option only does
+ * what it says, neither implies the other. The draw range (`firstVertex`, `vertexCount`, `instanceCount` -
  * 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`
@@ -571,12 +576,29 @@ export function createPipelineTexture(
  * created outside a reactive scope you must call `destroyBuffer` yourself.
  * (Destruction order relative to pipelines does not matter.)
  */
-export function createBuffer(data: ArrayBuffer | ArrayBufferView, opts?: CreateOptions): gpu.BufferId {
-  let id = gpu.createBuffer(toUint8(data), opts)
+export function createBuffer(data: ArrayBuffer | ArrayBufferView | number, opts?: CreateOptions): gpu.BufferId {
+  let id = gpu.createBuffer(typeof data === "number" ? data : toUint8(data), opts)
   if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyBuffer(id))
   return id
 }
 
+/**
+ * Opens a zero-copy write into a vertex buffer: returns a Float32Array over
+ * runtime-owned memory spanning the whole buffer. Write records in place,
+ * then publish with {@link endBufferWrite} - the bytes move to the GPU with
+ * no copy on the CPU path, which is the per-frame streaming path (instanced
+ * sprites, dynamic geometry). Reach other element types through `.buffer`.
+ *
+ * Contents are UNSPECIFIED at begin (a recycled block holds what was
+ * published the time before last): fill everything you publish. One open
+ * write per buffer at a time. The view is detached at end/destroy - retained
+ * references become zero-length, so a stale write is inert, never a race.
+ */
+export function beginBufferWrite(id: gpu.BufferId): Float32Array {
+  let ab = gpu.beginBufferWrite(id)
+  return new Float32Array(ab, 0, (ab.byteLength / 4) | 0)
+}
+
 /**
  * Overwrites part of a vertex buffer at `byteOffset` (default 0). Every
  * pipeline drawing from the buffer re-renders with its last-applied params,

package/src/index.ts

@@ -1,11 +1,11 @@
 export * from "./renderer"
-export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, getBoundingBox, getBoundingBoxViewport, onPointerMove } from "./core"
-export type { BoundingBox, GlobalPointerEvent } from "./core"
+export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, onPointerMove } from "./core"
+export type { BoundingBox, GlobalPointerEvent, TextLine } from "./core"
 export { parseColor, mixColors, 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 { windowSize, safeArea, displayScale, windowFocused, keyboardHeight } 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 { gamepads } from "./gamepad"
@@ -49,7 +49,7 @@ export type {
   Color,
   Pct,
 } from "./types"
-export type { MeasureTextOptions } from "flux:rendertree"
+export type { MeasureTextOptions, PreparedText, TextUnit } from "flux:rendertree"
 
 // A percentage value for dimensional props (e.g. transformOrigin): `pct(50)` is
 // half the element box. Keeps percentages a first-class branded value rather

package/src/renderer.ts

@@ -4,7 +4,6 @@ import type { Element } from "solid-js"
 import * as tree from "flux:rendertree"
 import { attachWindow } from "./window"
 import { setEventHandler, setFocusable, setTextInputHints, cleanupNode, focusedNode, setFocus } from "./core"
-import { parseColor, isGradient } from "./color"
 
 export { getEventHandler } from "./core"
 
@@ -166,34 +165,49 @@ function setTreeProperty(node: ProxyNode, name: string, value: unknown): void {
 // Shared by the renderer's setProperty hook and by createElement, which since
 // the dom-expressions "universal" template passes static props inline as a
 // second argument rather than as separate setProp calls.
+// A property's route is a function of its name alone, so the classifying
+// regex and compares run once per unique name; per write it is one Map get.
+const ROUTE_TREE = 0
+const ROUTE_EVENT = 1
+const ROUTE_FOCUSABLE = 2
+const ROUTE_HINTS = 3
+let propRoutes = new Map<string, number>()
+
+function routeFor(name: string): number {
+  let route = propRoutes.get(name)
+  if (route === undefined) {
+    route = /^on[A-Z]/.test(name)
+      ? ROUTE_EVENT
+      : name === "focusable"
+        ? ROUTE_FOCUSABLE
+        : name === "textInputHints"
+          ? ROUTE_HINTS
+          : ROUTE_TREE
+    propRoutes.set(name, route)
+  }
+  return route
+}
+
 function applyProp<T>(node: ProxyNode, name: string, value: T): void {
   if (!node) return
 
   // console.debug("[srt] applyProp", node.id, name, value)
 
-  if (/^on[A-Z]/.test(name) && (value == null || typeof value === "function")) {
-    setEventHandler(node.id, name, value as Function | null | undefined)
-    return
-  }
-
-  if (name === "focusable") {
-    setFocusable(node.id, value === true)
-    return
-  }
-
-  if (name === "textInputHints") {
-    setTextInputHints(node.id, value as any)
-    return
-  }
-
-  if (name === "color" && isGradient(value)) {
-    setTreeProperty(node, name, value)
-    return
-  }
-
-  if (name === "color" && typeof value === "string") {
-    setTreeProperty(node, name, parseColor(value))
-    return
+  switch (routeFor(name)) {
+    case ROUTE_EVENT:
+      // A non-function, non-null value on an on* name is not a handler;
+      // fall through to the tree so the native side rejects it.
+      if (value == null || typeof value === "function") {
+        setEventHandler(node.id, name, value as Function | null | undefined)
+        return
+      }
+      break
+    case ROUTE_FOCUSABLE:
+      setFocusable(node.id, value === true)
+      return
+    case ROUTE_HINTS:
+      setTextInputHints(node.id, value as any)
+      return
   }
 
   setTreeProperty(node, name, value)
@@ -233,10 +247,12 @@ export let {
     return proxy
   },
 
+  // A string child of <text> or <span>: a run of its parent's content, with
+  // no element form of its own (the DOM's "#text" node name).
   createTextNode: (value: string): ProxyNode => {
-    let proxy = createProxyNode("d-span")
+    let proxy = createProxyNode("#text")
     // console.debug("[srt] createTextNode", proxy.id, value)
-    tree.createNode(proxy.id, "d-span")
+    tree.createNode(proxy.id, "#text")
     tree.setProperty(proxy.id, "text", "" + value)
     return proxy
   },
@@ -246,7 +262,7 @@ export let {
     tree.setProperty(node.id, "text", "" + value)
   },
 
-  isTextNode: (node: ProxyNode): boolean => node?.elementType === "d-span",
+  isTextNode: (node: ProxyNode): boolean => node?.elementType === "#text",
   setProperty: <T>(node: ProxyNode, name: string, value: T): void => {
     // console.debug("[srt] setProperty", node.id, name, value)
     applyProp(node, name, value)