ilha 0.15.2 → 0.16.0

package/dist/paint-core-D1n4lbpF.js

@@ -0,0 +1,350 @@
+import { g as makeFiber, i as runSetup, m as closeFiber, n as notifyRoots, r as rootListeners, u as isAtomHandle, y as ilhaWarn } from "./start-B-e1dG5U.js";
+import { a as hasBrand, c as isObject, d as skip, l as isString, n as KEY_ATTR, o as isFunction, p as unwrap, r as SLOT_ATTR, s as isIterable, t as KEEP, u as noop } from "./shared-vpgYXytd.js";
+import { n as isVNode, r as Fragment } from "./vnode-DJ25Jn3D.js";
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+
+//#region src/events.ts
+const EVENT_PROP = /^on(?:[A-Z].{2,}|[a-z]{3,}$)/u;
+/** `onClick` / `onclick` → `click`; non-event props → `undefined`. */
+const eventTypeFromProp = (key) => EVENT_PROP.test(key) ? key.slice(2).toLowerCase() : void 0;
+/** One native listener per type; it reads the latest handler at dispatch. */
+const listen = (el, type) => {
+	el.__ilhaEvents ??= /* @__PURE__ */ new Set();
+	if (el.__ilhaEvents.has(type)) return;
+	el.__ilhaEvents.add(type);
+	el.addEventListener(type, (ev) => {
+		const fiber = el.__ilhaFiber;
+		const fn = el.__ilhaHandlers?.get(type);
+		if (!fiber || fiber.closed || !isFunction(fn)) return;
+		const out = fn(ev);
+		if (Effect.isEffect(out)) fiber.run(out);
+	});
+};
+const install = (el, handlers, fiber) => {
+	el.__ilhaHandlers = handlers;
+	el.__ilhaFiber = fiber;
+	for (const type of handlers?.keys() ?? []) listen(el, type);
+};
+const bindEvents = (el, props, fiber) => {
+	const handlers = /* @__PURE__ */ new Map();
+	for (const [key, value] of Object.entries(props)) {
+		const type = eventTypeFromProp(key);
+		if (type && !handlers.has(type)) handlers.set(type, value);
+	}
+	install(el, handlers, fiber);
+};
+/**
+* The morph kept `live` in place of the freshly rendered `fresh`: hand the
+* render's handlers to the live node, so closures never go stale and handlers
+* added on a later render still fire.
+*/
+const adoptEvents = (live, fresh) => {
+	if (fresh.__ilhaFiber) install(live, fresh.__ilhaHandlers, fresh.__ilhaFiber);
+};
+
+//#endregion
+//#region src/security.ts
+const SAFE_CSS_PROP = /^-{0,2}[a-zA-Z][a-zA-Z0-9-]*$/u;
+const URL_ATTR = /(?:^|:)(?:href|src|srcset|imagesrcset|action|formaction|cite|data|poster)$/iu;
+const SRCSET_ATTR = /^(?:srcset|imagesrcset)$/iu;
+const SAFE_DATA_IMAGE = /^data:image\/(?:png|jpe?g|gif|webp|avif)[;,]/iu;
+const UNSAFE_SCHEME = /^(?:javascript|vbscript):/iu;
+const URL_PADDING = /[\0-\u0020\u00A0\u1680\u2000-\u200D\u2028\u2029\u202F\u205F\u3000\uFEFF]/gu;
+const UNSAFE_CSS = /[<>{};\\]|expression\(|javascript:|data:/iu;
+const CSS_URL = /url\s*\(\s*(?<inner>[^)]+)\s*\)/giu;
+const isSafeUrl = (value, allowDataImage = false) => {
+	const url = value.replaceAll(URL_PADDING, "");
+	if (UNSAFE_SCHEME.test(url)) return false;
+	return !/^data:/iu.test(url) || allowDataImage && SAFE_DATA_IMAGE.test(url);
+};
+const isUrlAttributeName = (name) => URL_ATTR.test(name);
+const isSafeUrlAttrValue = (tagName, attrName, value) => {
+	if (SRCSET_ATTR.test(attrName)) return value.split(",").every((candidate) => isSafeUrl(candidate.trim().split(/\s+/u)[0] ?? ""));
+	return isSafeUrl(value, tagName.toLowerCase() === "img" && attrName.toLowerCase() === "src");
+};
+const isSafeStyleValue = (str) => !UNSAFE_CSS.test(str) && [...str.matchAll(CSS_URL)].every((m) => isSafeUrl((m.groups?.inner ?? "").trim().replaceAll(/^['"]|['"]$/gu, "")));
+/** Serialize a style string or object, dropping unsafe properties and values. */
+const serializeStyleAttr = (value) => {
+	return (isString(value) ? value.split(";").map((decl) => {
+		const colon = decl.indexOf(":");
+		return colon === -1 ? ["", ""] : [decl.slice(0, colon).trim(), decl.slice(colon + 1).trim()];
+	}) : Object.entries(value)).filter(([k, v]) => k && v !== null && v !== void 0 && SAFE_CSS_PROP.test(k) && isSafeStyleValue(String(v))).map(([k, v]) => `${(k ?? "").replaceAll(/[A-Z]/gu, (m) => `-${m.toLowerCase()}`)}:${String(v)}`).join(";");
+};
+
+//#endregion
+//#region src/unsafe.ts
+/**
+* Mark a string as pre-rendered HTML and paint it without escaping.
+* Use it for markup you built or sanitized yourself — SVG from an external
+* library, Markdown rendered to HTML, embed codes. Never pass untrusted
+* user input: unlike interpolated strings, this content is not escaped and
+* scripts inserted this way do not run, but event attributes and other
+* markup still apply.
+*/
+const unsafe = (html) => ({
+	$$ilhaUnsafe: 1,
+	html
+});
+const isUnsafeHtml = (x) => hasBrand(x, "$$ilhaUnsafe");
+
+//#endregion
+//#region src/paint-core.ts
+const SVG_NS = "http://www.w3.org/2000/svg";
+const MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+const elementNs = (lower, parent) => {
+	if (lower === "svg") return SVG_NS;
+	if (lower === "math") return MATHML_NS;
+	if (lower === "foreignobject") return "http://www.w3.org/1999/xhtml";
+	const ns = parent.namespaceURI;
+	return ns === SVG_NS || ns === MATHML_NS ? ns : void 0;
+};
+const hasKey = (view) => view.key !== null && view.key !== void 0;
+/** Shallow equality of two prop bags, children compared item by item. */
+const sameProps = (prev, next) => {
+	if (!prev) return false;
+	const keys = Object.keys(next);
+	return keys.length === Object.keys(prev).length && keys.every((k) => {
+		const a = prev[k];
+		const b = next[k];
+		return k === "children" && Array.isArray(a) && Array.isArray(b) ? a.length === b.length && a.every((x, i) => Object.is(x, b[i])) : Object.is(a, b);
+	});
+};
+/** Rerun a component hole with `props`; render closures read the latest box. */
+const rerunHole = (hole, run, props) => {
+	hole.propsBox ??= { current: props };
+	const box = hole.propsBox;
+	box.current = props;
+	runSetup(hole, () => run(box.current));
+};
+const hostOf = (fiber) => fiber.root;
+/** Dispose `hole` and drop it from a `filter` pass. */
+const dispose = (hole) => {
+	hole.dispose();
+	return false;
+};
+const isSkippedPropKey = (k) => k === "children" || k === "key" || k === "ref" || k.toLowerCase() === "srcdoc" || eventTypeFromProp(k) !== void 0 || /^on[A-Z]/u.test(k);
+/**
+* The painter shared by DOM mount, SSR and custom hosts: props,
+* materialization, holes, and keyed reconciliation.
+*/
+const createPainter = (ops) => {
+	const { committed = (el) => el, reuseNode = (host) => host, setStyle = (el, css) => el.setAttribute("style", css) } = ops;
+	const asRoot = (el) => el;
+	const self = {};
+	let depth = 0;
+	const pendingRefs = [];
+	const setFormControl = ops.setFormControl ?? ((el, key, v) => {
+		if (v === null || v === void 0 || v === false) el.removeAttribute(key);
+		else el.setAttribute(key, key === "value" ? String(v) : "");
+	});
+	const writeAttr = (el, k, v) => {
+		if (v === false || v === null || v === void 0) {
+			el.removeAttribute(k);
+			return;
+		}
+		const str = v === true ? "" : String(v);
+		if (!isUrlAttributeName(k) || isSafeUrlAttrValue(el.tagName, k, str)) el.setAttribute(k, str);
+	};
+	const applyProp = (el, k, v, fiber) => {
+		if (isSkippedPropKey(k) || ops.setProp?.(el, k, v) === true) return;
+		if (k === "className" || k === "htmlFor") el.setAttribute(k === "className" ? "class" : "for", String(v ?? ""));
+		else if (k === "style") {
+			const css = isString(v) || isObject(v) ? serializeStyleAttr(v) : "";
+			if (css) setStyle(el, css);
+		} else if (k === "value" || k === "checked" || k === "selected") {
+			if (isAtomHandle(v)) {
+				const unsub = fiber.registry.subscribe(v.atom, (x) => setFormControl(committed(el), k, x), { immediate: true });
+				fiber.holes.push({ dispose: unsub });
+			} else setFormControl(el, k, v);
+		} else if (!isFunction(v)) writeAttr(el, k, v);
+	};
+	const applyProps = (el, props, fiber) => {
+		for (const [k, v] of Object.entries(props)) applyProp(el, k, v, fiber);
+		ops.bindEvents?.(el, props, fiber);
+		const { ref } = props;
+		if (isFunction(ref)) {
+			const refFn = ref;
+			const attach = () => refFn(committed(el));
+			if (depth > 0) pendingRefs.push(attach);
+			else attach();
+			fiber.holes.push({ dispose: () => refFn(null) });
+		}
+	};
+	/**
+	* Open a child fiber rooted in a fresh `display: contents` host. `keep`
+	* holes survive repaints that reach them again; others close on repaint.
+	*/
+	const openHole = (parent, meta = {}, onDispose) => {
+		parent.runtime.holeSeq += 1;
+		const host = ops.createElement("span");
+		host.setAttribute(SLOT_ATTR, String(parent.runtime.holeSeq));
+		setStyle(host, "display:contents");
+		const hole = makeFiber(parent.runtime, asRoot(host), self.paint, { parent });
+		hole.seen = parent.gen;
+		parent.holes.push({
+			...meta,
+			dispose: () => {
+				onDispose?.();
+				closeFiber(hole);
+			},
+			fiber: hole
+		});
+		return {
+			hole,
+			host
+		};
+	};
+	/** Reuse a kept hole in this paint: mark it reached, return its host. */
+	const reuse = (fiber, hole) => {
+		hole.seen = fiber.gen;
+		return reuseNode(hostOf(hole));
+	};
+	const materializeAtom = (view, fiber) => {
+		const found = fiber.holes.find((h) => h.atom === view.atom && h.fiber && !h.fiber.closed && h.fiber.seen !== fiber.gen && hostOf(h.fiber).isConnected !== false)?.fiber;
+		if (found) return [reuse(fiber, found)];
+		let unsub;
+		const { hole, host } = openHole(fiber, {
+			atom: view.atom,
+			keep: true
+		}, () => unsub?.());
+		fiber.runtime.later(() => {
+			if (hole.closed) return;
+			let last;
+			unsub = fiber.registry.subscribe(view.atom, (v) => {
+				const next = unwrap(v, last);
+				if (next !== KEEP && !hole.closed) {
+					last = next;
+					self.paint(hole, next);
+				}
+			}, { immediate: true });
+		});
+		return [host];
+	};
+	const materializeStream = (view, fiber) => {
+		const { ssr } = fiber.runtime;
+		const { hole, host } = openHole(fiber);
+		hole.run((ssr ? view.pipe(Stream.take(1)) : view).pipe(Stream.runForEach((v) => Effect.sync(() => self.paint(hole, v))), Effect.tapError((reason) => Effect.sync(() => self.paint(hole, String(reason))))), ssr ? noop : void 0);
+		return [host];
+	};
+	const mountComponent = (fiber, type, props) => {
+		const opened = openHole(fiber, { keep: true });
+		const { hole } = opened;
+		hole.propsBox = { current: props };
+		hole.componentType = type;
+		fiber.runtime.later(() => {
+			if (!hole.closed && hole.renderGen === void 0) rerunHole(hole, type, props);
+		});
+		return opened;
+	};
+	const materializeComponent = (view, fiber) => {
+		const props = {
+			...view.props,
+			children: view.children
+		};
+		const run = view.type;
+		const keyed = fiber.keyedHoles;
+		const key = String(view.key);
+		let prev = hasKey(view) ? keyed?.get(key) : void 0;
+		if (prev && prev.seen === fiber.gen && !prev.closed) {
+			ilhaWarn("ILHA005", `key "${key}"`);
+			prev = void 0;
+		} else if (hasKey(view)) {
+			if (!prev || prev.closed || prev.componentType !== run) {
+				const { hole, host } = mountComponent(fiber, run, props);
+				keyed?.set(key, hole);
+				return [host];
+			}
+			if (!sameProps(prev.propsBox?.current, props)) rerunHole(prev, run, props);
+			return [reuse(fiber, prev)];
+		}
+		fiber.componentFrame ??= {
+			i: 0,
+			slots: []
+		};
+		const frame = fiber.componentFrame;
+		const at = frame.i;
+		frame.i += 1;
+		const slot = frame.slots[at];
+		if (slot && slot.type === run && !slot.hole.closed) {
+			rerunHole(slot.hole, run, props);
+			return [reuse(fiber, slot.hole)];
+		}
+		const { hole, host } = mountComponent(fiber, run, props);
+		frame.slots[at] = {
+			hole,
+			type: run
+		};
+		return [host];
+	};
+	const materializeElement = (view, fiber) => {
+		const tag = view.type;
+		const lower = tag.toLowerCase();
+		const el = ops.createElement(tag, elementNs(lower, fiber.root));
+		if (hasKey(view)) el.setAttribute(KEY_ATTR, String(view.key));
+		const late = lower === "select";
+		if (!late) applyProps(el, view.props, fiber);
+		const inner = {
+			...fiber,
+			root: asRoot(el)
+		};
+		for (const c of view.children) el.append(...self.materialize(c, inner));
+		if (late) applyProps(el, view.props, fiber);
+		return [el];
+	};
+	self.materialize = (view, fiber) => {
+		if (skip(view)) return [ops.createText("")];
+		if (isUnsafeHtml(view)) return ops.createRaw(view.html, fiber.root);
+		if (isAtomHandle(view)) return materializeAtom(view, fiber);
+		if (Stream.isStream(view)) return materializeStream(view, fiber);
+		if (isFunction(view)) {
+			const { hole, host } = openHole(fiber);
+			fiber.runtime.later(() => {
+				if (!hole.closed) runSetup(hole, view);
+			});
+			return [host];
+		}
+		if (isVNode(view)) {
+			if (view.type === Fragment) return view.children.flatMap((c) => self.materialize(c, fiber));
+			return isFunction(view.type) ? materializeComponent(view, fiber) : materializeElement(view, fiber);
+		}
+		if (isIterable(view)) return [...view].flatMap((c) => self.materialize(c, fiber));
+		return [ops.createText(String(view))];
+	};
+	self.paint = (fiber, view) => {
+		depth += 1;
+		try {
+			const gen = (fiber.gen ?? 0) + 1;
+			fiber.gen = gen;
+			fiber.keyedHoles ??= /* @__PURE__ */ new Map();
+			fiber.componentFrame ??= {
+				i: 0,
+				slots: []
+			};
+			const frame = fiber.componentFrame;
+			frame.i = 0;
+			fiber.holes = fiber.holes.filter((h) => h.keep || dispose(h));
+			const hydrate = fiber.hydrate === true;
+			fiber.hydrate = false;
+			if (Array.isArray(view) && view.length > 0 && view.every((v) => isVNode(v) && isFunction(v.type) && hasKey(v))) ops.placeChildren(fiber.root, view.flatMap((v) => self.materialize(v, fiber)));
+			else {
+				const nodes = self.materialize(view, fiber);
+				if (ops.morph) ops.morph(fiber.root, nodes, hydrate);
+				else ops.placeChildren(fiber.root, nodes);
+			}
+			frame.slots.length = frame.i;
+			fiber.holes = fiber.holes.filter((h) => !h.keep || h.fiber?.seen === gen || dispose(h));
+			for (const [k, hole] of fiber.keyedHoles) if (hole.closed) fiber.keyedHoles.delete(k);
+		} finally {
+			depth -= 1;
+			if (depth === 0) {
+				for (const run of pendingRefs.splice(0)) run();
+				if (rootListeners.size > 0) notifyRoots();
+			}
+		}
+	};
+	return self;
+};
+
+//#endregion
+export { bindEvents as i, unsafe as n, adoptEvents as r, createPainter as t };

package/dist/renderer.d.ts

@@ -1,82 +1,55 @@
-import { b as View, i as Component, m as PropValue, p as PropBag, u as IlhaRuntime } from "./types-DsdtZMhG.js";
-import { n as getFiber, t as FiberLocal } from "./runtime-Baq7MtkE.js";
-//#region src/shared.d.ts
-declare const KEEP: unique symbol;
-//#endregion
+import { _ as View, a as Component, c as IlhaRuntime, m as PropValue, p as PropBag } from "./types-NhEiBvwy.js";
+import { n as getFiber, t as FiberLocal } from "./runtime-BCdKBqYp.js";
 //#region src/paint-core.d.ts
-/** Structural element API shared by DOM `Element` and the SSR `SsrEl` shim. */
+/** Structural element API shared by DOM `Element`, the SSR shim, and custom hosts. */
 interface PaintEl<Node> {
   readonly tagName: string;
-  dataset: DOMStringMap;
+  readonly isConnected?: boolean;
   setAttribute: (name: string, value: string) => void;
   removeAttribute: (name: string) => void;
-  appendChild: (node: Node) => void;
   append: (...nodes: Node[]) => void;
 }
 type FormControlKey = "value" | "checked" | "selected";
+/**
+ * Host operations behind the shared painter. Fiber roots are the mount root
+ * or a hole host element; hosts cast them back to their own node type.
+ */
 interface PaintOps<Node, El extends PaintEl<Node>> {
   createElement: (tag: string, ns?: string) => El;
   createText: (text: string) => Node;
-  /**
-   * Parse pre-rendered HTML into nodes under `parent` (DOM:
-   * context-aware fragment parse; SSR: raw node, parent unused).
-   */
+  /** Parse pre-rendered HTML into nodes for `parent`. */
   createRaw: (html: string, parent: ParentNode) => Node[];
-  /** Display-contents span marking a dynamic hole; `null` omits the slot attr. */
-  createSlotHost: (slotId: string | null) => El;
-  /** Fiber root for a host element (SSR: cast SsrEl up to ParentNode). */
-  asRoot: (el: El) => ParentNode;
-  /** Insertable node for a reused fiber/island host. */
-  asNode: (host: ParentNode) => Node;
-  /**
-   * Node a render returns for a reused live host (DOM: a stand-in the morph
-   * swaps for the host in place, so the host is never detached).
-   */
-  reuseNode: (host: ParentNode) => Node;
   /** Make `root`'s children exactly `nodes`, moving as little as possible. */
   placeChildren: (root: ParentNode, nodes: Node[]) => void;
-  /** Append one node to `root`. Only `Painter.insert` calls it. */
-  appendRoot: (root: ParentNode, node: Node) => void;
-  /** Element view of a host (SSR: SsrEl masquerades as Element). */
-  asElement: (el: El) => Element;
   /**
-   * The element a rendered element ended up as (DOM: the live node the morph
-   * kept in its place; SSR: itself).
+   * Reconcile `root` with a fresh render, keeping live nodes (DOM morph).
+   * Defaults to `placeChildren`. `hydrate` marks a mount's first paint.
    */
-  committed: (el: El) => El;
-  /** Mark a host disconnected (SSR: flag flip; DOM: noop, the DOM tracks it). */
-  disconnect: (el: El) => void;
+  morph?: (root: ParentNode, nodes: Node[], hydrate: boolean) => void;
+  /** Node a render returns for a reused host. Defaults to the host itself. */
+  reuseNode?: (host: El) => Node;
+  /** The element a rendered element ended up as after `morph`. */
+  committed?: (el: El) => El;
   /**
    * Take a prop as the component wrote it, before it is stringified. Return
-   * `true` to claim it; anything else falls through to the attribute, style
-   * and form-control handling below. A host that is not a DOM uses it to keep
-   * object values. Event props, `children`, `key` and `ref` never reach it.
+   * `true` to claim it. Event props, `children`, `key` and `ref` never reach it.
    */
   setProp?: (el: El, key: string, value: PropValue) => boolean;
-  setStyle: (el: El, css: string) => void;
-  setFormControl: (el: El, key: FormControlKey, v: PropValue) => void;
-  bindEvents: (el: El, props: PropBag, fiber: FiberLocal) => void;
+  /** Defaults to the `style` attribute. */
+  setStyle?: (el: El, css: string) => void;
+  /** Defaults to attribute writes. */
+  setFormControl?: (el: El, key: FormControlKey, v: PropValue) => void;
+  bindEvents?: (el: El, props: PropBag, fiber: FiberLocal) => void;
 }
 /** Painter surface returned by `createPainter`, shared by every host. */
-interface Painter<Node, El> {
-  applyProps: (el: El, props: PropBag, fiber: FiberLocal) => void;
-  /** Runs `fn` and flushes queued refs once the outermost paint commits. */
-  commit: (fn: () => void) => void;
-  /**
-   * Runs `fn` as one paint of `fiber`: the keyed components it materializes
-   * stay alive, and the ones it no longer reaches are closed afterwards.
-   */
-  pass: (fiber: FiberLocal, fn: () => void) => void;
-  disposeHoles: (fiber: FiberLocal, opts?: {
-    morph?: boolean;
-  }) => void;
-  insert: (fiber: FiberLocal, nodes: Node[]) => void;
+interface Painter<Node> {
+  /** Paint `view` into `fiber.root`, reusing the holes it still reaches. */
+  paint: (fiber: FiberLocal, view: View) => void;
   materialize: (view: View, fiber: FiberLocal) => Node[];
-  paintHole: (fiber: FiberLocal, view: View | typeof KEEP) => void;
 }
 //#endregion
 //#region src/events.d.ts
-export declare const bindEvents: (node: Element, props: PropBag, fiber: FiberLocal) => void;
+export declare const bindEvents: (el: Element, props: PropBag, fiber: FiberLocal) => void;
 //#endregion
 //#region src/renderer.d.ts
 export interface RendererMountOptions {
@@ -99,21 +72,12 @@ export interface RendererHandle {
   ready: Promise<null>;
   runtime: IlhaRuntime;
 }
-export interface HostRenderer<Node, El extends PaintEl<Node> & Node> {
+export interface HostRenderer<Node> {
   /** The shared painter, for advanced callers that paint holes themselves. */
-  readonly painter: Painter<Node, El>;
+  readonly painter: Painter<Node>;
   mount: (root: ParentNode, fn: Component, options?: RendererMountOptions) => RendererHandle;
 }
-/**
- * Build a renderer for a host described by `ops`.
- *
- * Unlike the DOM painter this materializes fresh host nodes on every paint and
- * attempts no morph: the host receives the new child list through
- * `ops.placeChildren` and decides what to keep. Holes that must survive a
- * repaint (atoms, islands, keyed rows, positional components) stay alive across
- * paints and hand their host node back through `ops.reuseNode`, so their state
- * is never remounted.
- */
-export declare const createRenderer: <Node, El extends PaintEl<Node> & Node>(ops: PaintOps<Node, El>) => HostRenderer<Node, El>;
+/** Build a renderer for a host described by `ops`. */
+export declare const createRenderer: <Node, El extends PaintEl<Node> & Node>(ops: PaintOps<Node, El>) => HostRenderer<Node>;
 //#endregion
 export { type Component, type FiberLocal, type FormControlKey, type IlhaRuntime, type PaintEl, type PaintOps, type Painter, type PropBag, type PropValue, type View, getFiber };

package/dist/renderer.js

@@ -1,68 +1,36 @@
-import { d as defer } from "./vnode-BHUY61Rm.js";
-import { C as getFiber, E as makeRuntime, S as closeFiber, T as makeRootFiber, d as runSetup, l as bindEvents, t as createPainter } from "./paint-core-B7jENZwS.js";
+import { a as startRoot, h as getFiber } from "./start-B-e1dG5U.js";
+import { i as bindEvents, t as createPainter } from "./paint-core-D1n4lbpF.js";
 
 //#region src/renderer.ts
 /**
 * Host renderer seam.
 *
-* `mount()` and `renderToString()` ship the two painters ilha uses on the web:
-* the DOM painter and the SSR string painter. This entry exposes the same
-* machinery for a third host — a native toolkit, a test harness, or any tree
-* that is not a DOM — by letting the caller supply `PaintOps`.
+* `mount()` and `renderToString()` ship the two painters ilha uses on the web.
+* This entry exposes the same painter for a third host — a native toolkit, a
+* test harness, or any tree that is not a DOM — through `PaintOps`.
 *
-* The painter is host-agnostic: props, holes, keyed reconciliation, refs,
-* events, atoms and generators all run through `PaintOps`. The only host
-* differences are element creation, text creation, placement and teardown.
-*
-* A host mounted through `createRenderer` is placed with `placeChildren` only:
-* every paint hands over the complete child list of the root it painted.
-* `appendRoot` is never called on this path.
-*/
-/**
-* Build a renderer for a host described by `ops`.
-*
-* Unlike the DOM painter this materializes fresh host nodes on every paint and
-* attempts no morph: the host receives the new child list through
-* `ops.placeChildren` and decides what to keep. Holes that must survive a
-* repaint (atoms, islands, keyed rows, positional components) stay alive across
-* paints and hand their host node back through `ops.reuseNode`, so their state
-* is never remounted.
+* Every paint materializes fresh host nodes and hands the complete child list
+* of the painted root to `ops.placeChildren` (or `ops.morph`). Holes that
+* survive a repaint (atoms, keyed rows, positional components) hand their host
+* node back through `ops.reuseNode`, so their state is never remounted.
 */
+/** Build a renderer for a host described by `ops`. */
 const createRenderer = (ops) => {
 	const painter = createPainter(ops);
-	const paint = (fiber, view) => {
-		painter.commit(() => {
-			painter.pass(fiber, () => {
-				fiber.islandFrame ??= {
-					i: 0,
-					slots: []
-				};
-				painter.disposeHoles(fiber, { morph: true });
-				ops.placeChildren(fiber.root, painter.materialize(view, fiber));
-			});
-		});
-	};
 	return {
-		mount(root, fn, options = {}) {
-			const runtime = makeRuntime({ onError: options.onError });
-			options.onRuntime?.(runtime);
-			const { promise: ready, resolve } = defer();
-			const fiber = makeRootFiber({
-				paint,
-				root,
-				runtime,
-				settle: resolve
+		mount: (root, fn, { onError, onRuntime } = {}) => {
+			const { close, ready, runtime } = startRoot({
+				fn,
+				onError,
+				onRuntime,
+				paint: painter.paint,
+				root
 			});
-			runtime.begin();
-			runtime.setIdle(resolve);
-			runSetup(fiber, fn);
-			runtime.end();
 			return {
 				ready,
 				runtime,
 				unmount: () => {
-					closeFiber(fiber);
-					runtime.close();
+					close();
 					ops.placeChildren(root, []);
 				}
 			};