gesso-framework 0.1.0

package/dist/persisted-Ddb51avc.js

@@ -0,0 +1,2648 @@
+import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, debounceTime, distinctUntilChanged, map, of, skip, tap, throttleTime } from "rxjs";
+//#region src/Input.ts
+/**
+* Reactive cell holding a component input.
+*
+* Inputs must be cells because render() runs exactly once. A component
+* that read a plain input value during render would capture it for the
+* life of the instance, so a parent supplying new props under a
+* dynamic subtree would update the field while the rendered tree kept
+* showing the original value.
+*
+* The cell is written by the component host only: it accepts whatever
+* the parent passed, subscribing it first when the parent passed an
+* Observable. `value` is deliberately read-only, so `this.label.value =
+* x` inside a component is a compile error rather than a silent
+* violation of the one-way data flow.
+*/
+var InputCell = class extends BehaviorSubject {
+	/**
+	* What to call this cell in a warning: `Component.prop`, or
+	* `channel.key`. Set by whoever creates it; a cell without one is
+	* reported as "a cell".
+	*/
+	label;
+	/** The component whose body read `.value`, for the stale-read warning below. */
+	snapshotBy = null;
+	warnedStale = false;
+	/** Everything emitted through `emit`, created on the first `events` read. */
+	emitted = null;
+	constructor(initialValue) {
+		super(initialValue);
+	}
+	/**
+	* Fires the output this cell stands for.
+	*
+	* An output is a cell whose value is what the parent gave to be
+	* called: a function, or a target made by `into(subject)`. `emit`
+	* calls it with the arguments, and also pushes the first argument
+	* through `events`, so the component can fire from three places
+	* without passing the cell around and a parent that wants a stream
+	* can have one. A parent that passed nothing is fine: the call
+	* simply reaches nobody.
+	*/
+	emit(...args) {
+		const handler = super.getValue();
+		if (typeof handler === "function") handler(...args);
+		this.emitted?.next(args[0]);
+	}
+	/** What `emit` has fired, as a stream: the first argument of each call. */
+	get events() {
+		if (this.emitted === null) this.emitted = new Subject();
+		return this.emitted.asObservable();
+	}
+	get value() {
+		trackRead(this);
+		if (bodyOf !== null && tracking === null && this.snapshotBy === null) this.snapshotBy = bodyOf;
+		return super.getValue();
+	}
+	/**
+	* The one place the run-once model goes quietly wrong is a body that
+	* reads `props.x.value`, uses the value to build the tree, and never
+	* hears that it changed. Nothing crashes; the screen is simply stale.
+	* So a cell remembers being read while a body ran, and if it later
+	* changes with nobody subscribed to it, it says so once. A cell that
+	* something is following is fine: the follower carries the change.
+	*/
+	next(value) {
+		if (this.snapshotBy !== null && !this.warnedStale && !this.observed && !Object.is(value, super.getValue())) {
+			this.warnedStale = true;
+			warnStaleRead(this.snapshotBy, this.label, super.getValue(), value);
+		}
+		super.next(value);
+	}
+};
+/** The component whose function body is running, while one is. */
+let bodyOf = null;
+/** The component whose body is running, for a cell that wants to remember being read there. */
+function currentBody() {
+	return bodyOf;
+}
+/** The set a running `computed` is collecting its reads into, while one is. */
+let tracking = null;
+/** Records a `.value` read for whatever `computed` is running, if one is. */
+function trackRead(cell) {
+	tracking?.add(cell);
+}
+/** Runs `run` with every `.value` read on the way recorded into `into`. */
+function withTracking(into, run) {
+	const previous = tracking;
+	tracking = into;
+	try {
+		return run();
+	} finally {
+		tracking = previous;
+	}
+}
+/**
+* Runs a component's body with its name on record, so a `.value` read
+* inside it can be told apart from one in an event handler later, which
+* is the ordinary way to read the current value and warns about nothing.
+*/
+function withBodyOf(tag, run) {
+	const previous = bodyOf;
+	bodyOf = tag;
+	try {
+		return run();
+	} finally {
+		bodyOf = previous;
+	}
+}
+function warnStaleRead(tag, label, from, to) {
+	const what = label === void 0 ? "a cell" : `\`${label}\``;
+	const change = describeChange(from, to);
+	console.warn(`Component '${tag}' read ${what} with .value while its body ran, and nothing is following that cell. It has since changed ${change}, and whatever was built from the first value still shows it. A component body runs once: bind the cell instead (pass it, or pipe it, into the prop it feeds), or give the component a key so a new value builds a new one.`);
+}
+/**
+* "from X to Y", or for two plain objects the first field that differs,
+* because two objects that print alike for sixty characters say nothing
+* about what actually moved.
+*/
+function describeChange(from, to) {
+	if (isPlainObject$2(from) && isPlainObject$2(to)) {
+		for (const key of /* @__PURE__ */ new Set([...Object.keys(from), ...Object.keys(to)])) {
+			const before = from[key];
+			const after = to[key];
+			if (!Object.is(before, after) && safeJson(before) !== safeJson(after)) return `at .${key}, from ${describe(before)} to ${describe(after)}`;
+		}
+		return "to an equal-looking object";
+	}
+	return `from ${describe(from)} to ${describe(to)}`;
+}
+function isPlainObject$2(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function safeJson(value) {
+	try {
+		return JSON.stringify(value) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+function describe(value) {
+	let text;
+	try {
+		text = typeof value === "function" ? "a function" : JSON.stringify(value) ?? String(value);
+	} catch {
+		text = String(value);
+	}
+	return text.length > 60 ? `${text.slice(0, 57)}...` : text;
+}
+function input(first, fallback) {
+	if (arguments.length < 2 || !(first instanceof InputCell)) return new InputCell(first);
+	const source = first;
+	const withFallback = (value) => value === void 0 ? fallback : value;
+	const derived = new InputCell(withFallback(source.value));
+	derived.label = source.label;
+	source.subscribe({
+		next: (value) => derived.next(withFallback(value)),
+		complete: () => derived.complete()
+	});
+	return derived;
+}
+/**
+* An output a class component declares as a field:
+*
+*   @Output() changed = output<[value: number]>();
+*
+* The host wires the parent's handler into it exactly as it wires an
+* input, and `this.changed.emit(next)` fires it.
+*/
+function output() {
+	return new InputCell(void 0);
+}
+const OUTPUT_TARGET = Symbol("gesso:output-target");
+function into(target) {
+	return { [OUTPUT_TARGET]: target };
+}
+function isOutputTarget(value) {
+	return typeof value === "object" && value !== null && OUTPUT_TARGET in value;
+}
+/** The receiver an `into()` target wraps. */
+function outputTargetOf(target) {
+	return target[OUTPUT_TARGET];
+}
+//#endregion
+//#region src/InternalState.ts
+/**
+* A component's own state: originated here, and never crossing the
+* barrier.
+*
+* The writable counterpart to `InputCell`. The two are the same
+* `BehaviorSubject` and differ by one accessor — this one has a
+* `.value` setter — and that difference is the whole semantics:
+*
+*     internalState()   never crosses    I write it
+*     input()           crosses inward   someone else writes it
+*
+* Named on that axis deliberately. It used to be `state()`, which
+* described *what* a thing was while `input()` described *where it
+* came from*; two names on two axes made neither of them tell you
+* anything about the other. `internalState(products)` reads as a
+* mistake at the call site in a way `state(products)` never did.
+*
+* For values that originate on this thread and die with the component:
+* a tooltip's open flag, a caret, a scroll offset, the active tab.
+* Anything that survives a reload, or that another screen cares about,
+* is application state and belongs on a channel. Anything derived from
+* other cells is a `computed`.
+*
+* It is not only for components. The thread that owns a channel's data
+* writes cells too, and wrote them as a `BehaviorSubject` mirrored
+* into an `asObservable()` because this was reachable only through the
+* framework's main entry. `gesso-framework/worker` is the same cell
+* with none of the renderer behind it, so an application worker holds
+* one cell rather than a subject and a copy of it, and reads it with
+* `.value` in a `computed` rather than listing it in a
+* `combineLatest`. "Internal" still means what it says there: written
+* here, and crossing the barrier only as the plain data a view key
+* publishes.
+*/
+var InternalState = class extends BehaviorSubject {
+	/** What to call this cell in a warning or the inspector; optional. */
+	label;
+	constructor(initialValue) {
+		super(initialValue);
+	}
+	get value() {
+		trackRead(this);
+		return super.getValue();
+	}
+	set value(next) {
+		this.next(next);
+	}
+};
+/**
+* Creates a reactive state cell.
+*
+* Usage inside a component:
+*
+*   private readonly count = state(0);
+*
+*   increment() {
+*     this.count.value++;
+*   }
+*/
+function internalState(initialValue, label) {
+	const state = new InternalState(initialValue);
+	if (label !== void 0) state.label = label;
+	return state;
+}
+//#endregion
+//#region src/channel/structuralEquals.ts
+/**
+* Deep comparison for store read models.
+*
+* Projections and selectors allocate a fresh value on every
+* evaluation, so reference equality reports a change on every
+* unrelated state emission. That invalidates bindings and dirties
+* nodes across the whole tree for state the view never read.
+*
+* Scope is deliberately narrow: primitives, arrays, and plain objects
+* — what a projection is allowed to return. Anything else (class
+* instances, Date, Map, Set, functions) compares by reference, which
+* is conservative: it reports a change, so the UI updates when it did
+* not need to rather than failing to update when it did.
+*
+* The same comparison becomes the equality half of the patch differ
+* in Phase E, so a store behaves identically local or remote.
+*/
+const MAX_DEPTH$1 = 100;
+function structurallyEqual(a, b) {
+	return compare(a, b, 0);
+}
+function compare(a, b, depth) {
+	if (Object.is(a, b)) return true;
+	if (depth > MAX_DEPTH$1) return false;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	const aIsArray = Array.isArray(a);
+	if (aIsArray !== Array.isArray(b)) return false;
+	if (aIsArray) {
+		const left = a;
+		const right = b;
+		if (left.length !== right.length) return false;
+		for (let i = 0; i < left.length; i++) if (!compare(left[i], right[i], depth + 1)) return false;
+		return true;
+	}
+	if (!isPlainObject$1(a) || !isPlainObject$1(b)) return false;
+	const left = a;
+	const right = b;
+	const leftKeys = Object.keys(left);
+	if (leftKeys.length !== Object.keys(right).length) return false;
+	for (const key of leftKeys) {
+		if (!Object.prototype.hasOwnProperty.call(right, key)) return false;
+		if (!compare(left[key], right[key], depth + 1)) return false;
+	}
+	return true;
+}
+/**
+* Objects created from an object literal or a null prototype. Class
+* instances are excluded so they keep reference semantics.
+*/
+function isPlainObject$1(value) {
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+//#endregion
+//#region src/derive.ts
+/**
+* One value from several, kept equal to `project` of the latest of each
+* source, and emitted only when it changes.
+*
+* This is `combineLatest(...).pipe(map(...), distinctUntilChanged())`,
+* which is what nearly every derived binding in a component body wants
+* and what nearly every one had to write out. Sources are cells or any
+* Observables; the result is what a prop takes.
+*
+*   const playing = derive([queue.view.playlistId, audio.state], (id, state) =>
+*     id === card.id && state.status === 'playing'
+*   );
+*
+* @deprecated Write it as a `computed`, which is the one derivation the
+* documentation teaches. A cell is read with
+* `.value` and anything else through the `read` the function is handed,
+* so the sources are the reads themselves and there is no list beside
+* the expression to keep in step with it:
+*
+*   const playing = computed(read =>
+*     queue.view.playlistId.value === card.id && read(audio.state).status === 'playing'
+*   );
+*
+* It still works and nothing that uses it needs changing today.
+*/
+function derive(sources, project, options = {}) {
+	const equal = equalityOf(options.equal ?? "reference");
+	return combineLatest(sources).pipe(map((values) => project(...values)), distinctUntilChanged(equal));
+}
+/** The comparison an `Equality` names. Shared with `computed`. */
+function equalityOf(equal) {
+	if (equal === "reference") return Object.is;
+	if (equal === "structural") return (a, b) => structurallyEqual(a, b);
+	return equal;
+}
+//#endregion
+//#region src/computed.ts
+/**
+* A cell whose value is a function of other cells.
+*
+* `computed(() => quantity.value * price.value)` reads like the value it
+* is. The cells its function reads through `.value` are its sources,
+* found by running the function and watching what it touches, so there
+* is no list to keep in step with the expression; a read the function
+* did not make this time is a source it no longer has.
+*
+* A stream that is not a cell is read through the `read` the function
+* is handed: `computed(read => read(stream).status)` follows the stream
+* as it follows a cell. That is what makes this the only derivation an
+* application needs, whether or not the thing it derives from happens
+* to have a current value of its own.
+*
+* It is a cell and nothing else. Bound to a prop it is an Observable
+* like every other cell, so a component written with it and one written
+* with `pipe` compose without translation. Read in a handler with
+* `.value` it is the current result, computed on the spot if nothing is
+* following it. RxJS is underneath and nothing here replaces it.
+*
+* Nothing runs until someone asks. With no subscriber the function runs
+* only when `.value` is read; with one, the cell follows its sources and
+* emits a result when it differs from the last by `equal`. When the last
+* subscriber leaves it lets go of its sources, so a computed made in a
+* component body dies with the component's bindings and needs no
+* disposal of its own.
+*
+* Reading it with `.value` while a component body runs is the same
+* snapshot an input read there is, and it warns the same way: once, if
+* it later changes with nobody following.
+*/
+var ComputedCell = class extends Observable {
+	compute;
+	label;
+	equal;
+	changes = new Subject();
+	sources = /* @__PURE__ */ new Set();
+	cached;
+	hasValue = false;
+	upstream = null;
+	subscribers = 0;
+	attaching = false;
+	snapshotBy = null;
+	warnedStale = false;
+	/** Follows the sources after a body read, only to notice the change the body will not. */
+	staleWatch = null;
+	constructor(compute, options = {}) {
+		super((subscriber) => {
+			this.subscribers++;
+			this.staleWatch?.unsubscribe();
+			this.staleWatch = null;
+			if (this.upstream === null) this.attach();
+			subscriber.next(this.cached);
+			const following = this.changes.subscribe(subscriber);
+			return () => {
+				following.unsubscribe();
+				this.subscribers--;
+				if (this.subscribers === 0) this.detach();
+			};
+		});
+		this.compute = compute;
+		this.equal = equalityOf(options.equal ?? "reference");
+		this.label = options.label;
+	}
+	/** The current result: kept by the sources while followed, computed now when not. */
+	get value() {
+		trackRead(this);
+		if (this.upstream === null) this.recompute();
+		const body = currentBody();
+		if (body !== null && this.snapshotBy === null) {
+			this.snapshotBy = body;
+			this.watchForStaleRead();
+		}
+		return this.cached;
+	}
+	/**
+	* A body read the value once; if a source now changes with nothing
+	* following this cell, the screen built from that read is stale and
+	* nobody would know. So the sources are watched for exactly that, and
+	* the watch ends with the warning or with a real subscriber arriving.
+	*/
+	watchForStaleRead() {
+		this.staleWatch = new Subscription();
+		let settling = true;
+		for (const source of this.sources) this.staleWatch.add(source.subscribe(() => {
+			if (settling || this.observed) return;
+			if (this.recompute()) {
+				this.warnStale();
+				this.staleWatch?.unsubscribe();
+				this.staleWatch = null;
+			}
+		}));
+		settling = false;
+	}
+	warnStale() {
+		if (this.snapshotBy === null || this.warnedStale) return;
+		this.warnedStale = true;
+		console.warn(`Component '${this.snapshotBy}' read ${this.label === void 0 ? "a computed cell" : `\`${this.label}\``} with .value while its body ran, and nothing is following that cell. It has since changed, and whatever was built from the first value still shows it. A component body runs once: bind the cell instead.`);
+	}
+	/** Whether anything is following this cell; the stale-read warning's question. */
+	get observed() {
+		return this.subscribers > 0;
+	}
+	/** Runs the function, watching what it reads; true when the result changed. */
+	recompute() {
+		const touched = /* @__PURE__ */ new Set();
+		const next = withTracking(touched, () => this.compute(readSource));
+		this.sources = touched;
+		const changed = !this.hasValue || !this.equal(this.cached, next);
+		this.hasValue = true;
+		this.cached = next;
+		return changed;
+	}
+	/** Follows the current sources, re-running on any change to them. */
+	attach() {
+		this.attaching = true;
+		this.recompute();
+		this.upstream = new Subscription();
+		for (const source of this.sources) this.upstream.add(source.subscribe(() => this.onSourceChanged()));
+		this.attaching = false;
+	}
+	detach() {
+		this.upstream?.unsubscribe();
+		this.upstream = null;
+	}
+	onSourceChanged() {
+		if (this.attaching) return;
+		const before = new Set(this.sources);
+		const changed = this.recompute();
+		if (!sameSet(before, this.sources)) {
+			this.detach();
+			this.attaching = true;
+			this.upstream = new Subscription();
+			for (const source of this.sources) this.upstream.add(source.subscribe(() => this.onSourceChanged()));
+			this.attaching = false;
+		}
+		if (changed) this.changes.next(this.cached);
+	}
+};
+/**
+* A cell computed from what its function reads. See `ComputedCell`.
+*
+*   const total = computed(() => quantity.value * PRICE * RATES[currency.value]);
+*   <text text={computed(() => String(count.value))} />
+*
+* Cells are read with `.value`; anything else is read through the
+* `read` the function is given, which follows it the same way:
+*
+*   const late = computed(read => read(clock) > deadline);
+*/
+function computed(compute, options = {}) {
+	return new ComputedCell(compute, options);
+}
+/**
+* The cell standing for a stream, one per stream.
+*
+* Anything that already has a current value is its own cell, so a
+* `read` of an input, an internal state or another computed costs a
+* property access and nothing more. Everything else gets a `StreamCell`
+* held against it here, so several computeds reading one stream share a
+* single subscription to it rather than opening one each.
+*
+* Weak on purpose: the entry is reachable only while the stream is, so
+* a stream made in a component body is collected with the component.
+*/
+const streamCells = /* @__PURE__ */ new WeakMap();
+/**
+* Whether a source's `.value` announces itself to the running computed,
+* decided once per source and remembered.
+*
+* Having a `value` is not enough. A framework cell records its reads
+* through `trackRead`, which is what lets a computed learn what it
+* depends on; a plain `BehaviorSubject` has a `value` too and records
+* nothing, so a computed that trusted the property would read it once
+* and never hear it change. That is exactly what happened to three
+* data-layer specs that fed a raw subject where the application feeds
+* a channel view. The probe reads `.value` once under a tracking set
+* of its own and asks whether the source turned up in it.
+*/
+const tracksReads = /* @__PURE__ */ new WeakMap();
+function announcesItsReads(source) {
+	let known = tracksReads.get(source);
+	if (known === void 0) {
+		const seen = /* @__PURE__ */ new Set();
+		withTracking(seen, () => void source.value);
+		known = seen.has(source);
+		tracksReads.set(source, known);
+	}
+	return known;
+}
+function cellFor(source) {
+	if ("value" in source && announcesItsReads(source)) return source;
+	let cell = streamCells.get(source);
+	if (cell === void 0) {
+		cell = new StreamCell(source);
+		streamCells.set(source, cell);
+	}
+	return cell;
+}
+/** The `read` every computed's function is handed. */
+const readSource = (source) => cellFor(source).value;
+/**
+* A plain stream, seen as a cell.
+*
+* It holds the last value it saw and hands it to whoever asks, which is
+* the one thing a cell has and an Observable does not. While something
+* follows it, it follows the stream; when the last follower leaves it
+* lets go, so it costs nothing between uses and needs no disposal, on
+* the same terms as `ComputedCell`.
+*
+* A `.value` read with nothing following takes one synchronous
+* subscription and drops it again, which is how a `BehaviorSubject`
+* behind an `asObservable()`, or a `combineLatest` over such subjects,
+* answers with what it already holds. A stream that has nothing to say
+* synchronously answers `undefined` until its first emission arrives,
+* which is the honest answer: there is no value yet.
+*/
+var StreamCell = class extends Observable {
+	stream;
+	last;
+	followers = 0;
+	upstream = null;
+	changes = new Subject();
+	constructor(stream) {
+		super((subscriber) => {
+			this.followers++;
+			if (this.upstream === null) this.attach();
+			subscriber.next(this.last);
+			const following = this.changes.subscribe(subscriber);
+			return () => {
+				following.unsubscribe();
+				this.followers--;
+				if (this.followers === 0) {
+					this.upstream?.unsubscribe();
+					this.upstream = null;
+				}
+			};
+		});
+		this.stream = stream;
+	}
+	get value() {
+		trackRead(this);
+		if (this.upstream === null) this.stream.subscribe((value) => {
+			this.last = value;
+		}).unsubscribe();
+		return this.last;
+	}
+	attach() {
+		this.upstream = this.stream.subscribe((value) => {
+			this.last = value;
+			this.changes.next(value);
+		});
+	}
+};
+function sameSet(a, b) {
+	if (a.size !== b.size) return false;
+	for (const item of a) if (!b.has(item)) return false;
+	return true;
+}
+//#endregion
+//#region src/select.ts
+function select(source, keyOrProject, options = {}) {
+	const project = typeof keyOrProject === "function" ? keyOrProject : (value) => value === null || value === void 0 ? void 0 : value[keyOrProject];
+	return computed((read) => project(read(source)), {
+		equal: options.equal ?? "structural",
+		...options.label === void 0 ? {} : { label: options.label }
+	});
+}
+//#endregion
+//#region src/resource.ts
+/**
+* A request, keyed, so a stale answer cannot win.
+*
+* The key says what to fetch, and every value the key source emits is
+* a request. An answer is published only if its request is still the
+* current one, which is the generation counter every screen that loads
+* anything was writing by hand, and the reason opening a page, going
+* back and opening another before the first answers does not end with
+* the first answer on screen.
+*
+*   private readonly ref = internalState<PageRef | null>(null);
+*   readonly page = resource(this.ref, ref => api.trackPage(ref));
+*
+*   show(ref: PageRef | null): Promise<void> {
+*     this.ref.value = ref;
+*     return this.page.settled;
+*   }
+*
+* A `null` key is "nothing is being asked for": the status is `idle`,
+* the value is `null`, and no fetch runs. That is what a screen showing
+* nothing yet actually means, and it saves every caller a branch.
+*
+* Unlike `computed`, a resource is eager: it follows its key from the
+* moment it is made, because a request is an effect and an effect that
+* waits for a subscriber is a request that never happens. It takes one
+* subscription to the key source for its whole life, however many
+* requests run through it, and `dispose()` gives that back.
+*
+* It is a helper and not a data layer. Nothing in the framework
+* requires one, a channel is reached exactly as it was, and an
+* application that would rather write its own is writing against the
+* same barrier this is written against.
+*/
+var Resource = class {
+	fetch;
+	options;
+	/** The one cell everything else here is a projection of. */
+	cell;
+	/** Bumped per request; an answer from an older one is dropped. */
+	requests = 0;
+	asked = null;
+	settling = Promise.resolve();
+	following;
+	/** Status, value and error as one record: what a channel view key takes. */
+	state;
+	status;
+	/** What is loaded, or `null` while there is nothing to show. */
+	value;
+	/** Why the last request failed, as its message; `null` when it did not. */
+	error;
+	constructor(key, fetch, options = {}) {
+		this.fetch = fetch;
+		this.options = options;
+		this.cell = internalState({
+			status: "idle",
+			value: null,
+			error: null
+		}, options.label);
+		this.state = this.cell;
+		this.status = select(this.cell, "status", named(options.label, "status"));
+		this.value = select(this.cell, "value", {
+			...named(options.label, "value"),
+			equal: "reference"
+		});
+		this.error = select(this.cell, "error", named(options.label, "error"));
+		this.following = key.subscribe((next) => this.request(next ?? null));
+	}
+	/** What is being asked for, for a caller that needs to guard on it. */
+	get requested() {
+		return this.asked;
+	}
+	/**
+	* The request in the air, as a promise that resolves when it settles.
+	*
+	* Already resolved when nothing is in flight, so a caller that sets
+	* the key and returns this reads as an ordinary async method. Each
+	* request keeps its own promise, so a dropped one still resolves for
+	* whoever is awaiting it; it simply changes nothing on the way.
+	*/
+	get settled() {
+		return this.settling;
+	}
+	/**
+	* Asks again for the same key, keeping what is on screen.
+	*
+	* This is the retry button. It does not clear the value the way a
+	* new key does, because a person pressing retry is asking for the
+	* thing they can already see to be brought up to date, and blanking
+	* it first would be a worse answer than the stale one.
+	*/
+	retry() {
+		if (this.asked === null) return this.settling;
+		const generation = ++this.requests;
+		const held = this.cell.value;
+		if (held.value === null && held.status !== "loading") this.write({
+			status: "loading",
+			value: null,
+			error: null
+		});
+		this.settling = this.run(this.asked, generation);
+		return this.settling;
+	}
+	/**
+	* Replaces what is loaded, for a change made here rather than
+	* fetched.
+	*
+	* A page of comments appended to the answer already held, an
+	* optimistic edit: the resource holds the value, so something has to
+	* be able to write it. It does not touch the request in flight, so a
+	* refresh that lands afterwards still wins, which is what it should
+	* do: it is the newer truth.
+	*/
+	set(value) {
+		this.write({
+			status: "ready",
+			value,
+			error: null
+		});
+	}
+	/** Gives back the subscription to the key source. */
+	dispose() {
+		this.following.unsubscribe();
+	}
+	request(key) {
+		this.asked = key;
+		const generation = ++this.requests;
+		if (key === null) {
+			this.write({
+				status: "idle",
+				value: null,
+				error: null
+			});
+			this.settling = Promise.resolve();
+			return;
+		}
+		const held = this.options.peek?.(key) ?? null;
+		this.write({
+			status: held === null ? "loading" : "ready",
+			value: held,
+			error: null
+		});
+		this.settling = this.run(key, generation);
+	}
+	run(key, generation) {
+		return this.fetch(key).then((answer) => this.answered(generation, answer), (error) => this.refused(generation, error));
+	}
+	answered(generation, answer) {
+		if (generation !== this.requests) return;
+		if (answer === null) {
+			const held = this.cell.value.value;
+			this.write({
+				status: held === null ? "missing" : "ready",
+				value: held,
+				error: null
+			});
+			return;
+		}
+		this.write({
+			status: "ready",
+			value: answer,
+			error: null
+		});
+	}
+	refused(generation, error) {
+		if (generation !== this.requests) return;
+		const held = this.cell.value.value;
+		this.write({
+			status: held === null ? "failed" : "ready",
+			value: held,
+			error: messageOf(error)
+		});
+	}
+	write(next) {
+		this.cell.value = next;
+	}
+};
+/**
+* A keyed request with a status, a value, an error and a retry.
+*
+*   const page = resource(ref, key => api.page(key), { peek: key => store.get(key) });
+*   <Show when={computed(() => page.status.value === 'loading')}>{() => <Spinner />}</Show>
+*
+* See `Resource` for what each status means and when a stale value is
+* kept. The key is an Observable so that setting a cell is what asks
+* for something: `computed` and `internalState` both work, and so does
+* a channel view key or a router match.
+*/
+function resource(key, fetch, options = {}) {
+	return new Resource(key, fetch, options);
+}
+function named(base, part) {
+	return base === void 0 ? {} : { label: `${base}.${part}` };
+}
+function messageOf(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+//#endregion
+//#region src/mutate.ts
+/**
+* An optimistic change to a cell, with a rollback that does not fight
+* the person.
+*
+*   private readonly favourites = internalState<readonly string[]>([]);
+*   private readonly like = mutate(this.favourites, toggled, id => api.favourite(id));
+*
+*   toggle(id: string): void {
+*     void this.like.run(id);
+*   }
+*
+* Three things happen and the order is the whole point. `apply` runs
+* first and writes the cell, so the screen changes on the press rather
+* than a round trip later. `commit` then does the real write. If it
+* rejects, or resolves `false`, the cell goes back to what it held
+* before.
+*
+* **The rollback is guarded.** It happens only while the cell still
+* holds exactly what `apply` wrote. Without that, a slow rejection
+* would fight a fast second press and the cell would end up saying the
+* opposite of the last thing anyone did, which is the guard every
+* optimistic screen writes by hand and half of them get wrong.
+*
+* The cell is named first, and not because it was first written
+* `mutate(apply, commit)`: the cell is what makes the guard possible.
+* A mutation handed only two functions can undo its own change but
+* cannot tell whether undoing it is still the right thing to do.
+*
+* A helper and not a data layer: nothing in the framework requires
+* one, and an application that would rather write the four lines out
+* is writing the same four lines this does.
+*/
+function mutate(cell, apply, commit, options = {}) {
+	const equal = equalityOf(options.equal ?? "structural");
+	const inFlight = internalState(0, options.label);
+	const revert = (before, applied) => {
+		if (!equal(cell.value, applied)) return;
+		cell.value = before;
+	};
+	return {
+		pending: inFlight,
+		async run(argument) {
+			const before = cell.value;
+			const applied = apply(before, argument);
+			cell.value = applied;
+			inFlight.value = inFlight.value + 1;
+			try {
+				if (await commit(argument, applied) === false) {
+					revert(before, applied);
+					return false;
+				}
+				return true;
+			} catch {
+				revert(before, applied);
+				return false;
+			} finally {
+				inFlight.value = Math.max(0, inFlight.value - 1);
+			}
+		}
+	};
+}
+//#endregion
+//#region src/debounce.ts
+/**
+* A cell that lets its source through on a timer.
+*
+* The two operators below are the same machinery with a different
+* gate, and both are cells rather than plain streams on purpose: a
+* `computed` reads a cell with `.value` and follows it, so a debounced
+* search term composes with everything else in the dialect instead of
+* being the one value in a screen that has to be piped.
+*
+* It holds the last value the gate let through, which is what `.value`
+* answers while something is following it. With nothing following
+* there is no timer running to hold anything back, so `.value` reads
+* the source directly, which is the honest answer rather than a value
+* frozen at whatever moment the last follower left.
+*
+* A value equal to the one it already holds is not a change and is not
+* emitted, the same rule `computed` follows. Without it the first pass
+* of the gate after a subscription would repeat the value the
+* subscriber had just been handed.
+*
+* One subscription upstream however many followers it has, given back
+* when the last of them leaves, on the same terms as `ComputedCell`.
+*/
+var TimedCell = class extends Observable {
+	stream;
+	gate;
+	current;
+	hasCurrent = false;
+	followers = 0;
+	seeding = false;
+	upstream = null;
+	changes = new Subject();
+	constructor(stream, gate) {
+		super((subscriber) => {
+			this.followers++;
+			if (this.upstream === null) this.attach();
+			subscriber.next(this.current);
+			const following = this.changes.subscribe(subscriber);
+			return () => {
+				following.unsubscribe();
+				this.followers--;
+				if (this.followers === 0) {
+					this.upstream?.unsubscribe();
+					this.upstream = null;
+				}
+			};
+		});
+		this.stream = stream;
+		this.gate = gate;
+	}
+	get value() {
+		trackRead(this);
+		if (this.upstream === null) this.stream.subscribe((value) => {
+			this.current = value;
+			this.hasCurrent = true;
+		}).unsubscribe();
+		return this.current;
+	}
+	attach() {
+		this.seeding = true;
+		this.upstream = this.stream.pipe(tap((value) => {
+			if (this.seeding && !this.hasCurrent) {
+				this.current = value;
+				this.hasCurrent = true;
+			}
+		}), this.gate).subscribe((value) => {
+			if (this.hasCurrent && Object.is(this.current, value)) return;
+			this.current = value;
+			this.hasCurrent = true;
+			this.changes.next(value);
+		});
+		this.seeding = false;
+	}
+};
+/**
+* A cell that follows its source once it has stopped moving.
+*
+*   const query = internalState('');
+*   const term = debounced(query, 200);
+*   const results = computed(() => index.search(term.value));
+*
+* Nothing is emitted while values keep arriving; `ms` after the last
+* one, the last one is. This is what a search field wants and what
+* every search field in the tree was reaching the router without: a
+* keystroke is not a question, and a pause is.
+*
+* The value the source already held is there immediately, so a screen
+* built from this draws on the first frame rather than `ms` later.
+*/
+function debounced(source, ms) {
+	return new TimedCell(source, debounceTime(ms));
+}
+/**
+* A cell that follows its source at most once every `ms`.
+*
+*   const position = throttled(scrollOffset, 100);
+*
+* The first value goes straight through and the last of a burst
+* follows at the end of the window, so a value that arrives while the
+* window is open is late rather than lost. That pairing is what makes
+* this usable for a position or a progress reading, where the
+* beginning and the end of a movement both matter and the middle does
+* not.
+*
+* Use this for something that is continuously true, and `debounced`
+* for something a person has finished saying.
+*/
+function throttled(source, ms) {
+	return new TimedCell(source, throttleTime(ms, void 0, {
+		leading: true,
+		trailing: true
+	}));
+}
+//#endregion
+//#region src/channel/ChannelToken.ts
+/**
+* Declares a channel.
+*
+* The name identifies it across the thread boundary and must be
+* stable; unlike a class name it survives minification, which is why
+* it is written out rather than derived.
+*/
+function channel(name, initial) {
+	if (name.length === 0) throw new Error("A channel needs a name: it is how the two threads agree on which one this is.");
+	return {
+		name,
+		initial
+	};
+}
+/**
+* Declares a channel from one object.
+*
+*   export const Catalog = defineChannel('catalog', {
+*     view: {
+*       products: [] as readonly ProductRow[],
+*       status: 'loading' as ShelfStatus
+*     },
+*     commands: {} as {
+*       addToCart(id: string, quantity: number): void;
+*       move(from: number, to: number): void;
+*     }
+*   });
+*
+*   export type CatalogView = ViewOf<typeof Catalog>;
+*
+* The same token `channel()` returns, declared once instead of three
+* times. `channel<View, Commands>(name, initial)` wrote the view as an
+* interface, then as an initial literal that had to agree with it, and
+* a key added to one and forgotten in the other was a type error in a
+* third file. Here the object is the type.
+*
+* A field whose initial value is narrower than the type it holds is
+* given the type it holds: `[]` is `never[]` and `'loading'` is
+* `string` unless it is said, which is what the `as` clauses above are
+* for. `ViewOf` and `CommandsOf` name the resulting types wherever the
+* application used to name its own interface.
+*
+* `channel()` is not deprecated and keeps working exactly as it did.
+* An application with interfaces it wants to keep, because they are
+* shared with something else or because the initial values are built
+* elsewhere, has nothing to migrate.
+*/
+function defineChannel(name, spec) {
+	return channel(name, spec.view);
+}
+/**
+* The keys a channel publishes.
+*
+* Structural in its parameter rather than generic over the token, so
+* it does not have to agree with any particular command type to read
+* what is only ever the initial value's shape.
+*/
+function viewKeys(token) {
+	return Object.keys(token.initial);
+}
+//#endregion
+//#region src/channel/ChannelProtocol.ts
+function isChannelClientMessage(value) {
+	const type = value?.type;
+	return type === "channel:sync" || type === "channel:command";
+}
+function isChannelHostMessage(value) {
+	const type = value?.type;
+	return type === "channel:patch" || type === "channel:error";
+}
+//#endregion
+//#region src/channel/StorePatch.ts
+/**
+* Describes how to turn `previous` into `current` for one projection.
+*
+* Returns an empty list when nothing changed, which is the common case
+* and the reason this exists: the point of a projection is that most
+* state changes do not alter it, and the ones that do usually alter a
+* small part.
+*/
+function diffProjection(projection, previous, current) {
+	const patches = [];
+	diff(projection, [], previous, current, patches);
+	return patches;
+}
+function diff(projection, path, previous, current, out) {
+	if (structurallyEqual(previous, current)) return;
+	if (Array.isArray(previous) && Array.isArray(current)) {
+		diffArray(projection, path, previous, current, out);
+		return;
+	}
+	if (isPlainObject(previous) && isPlainObject(current)) {
+		for (const key of Object.keys(current)) if (Object.prototype.hasOwnProperty.call(previous, key)) diff(projection, [...path, key], previous[key], current[key], out);
+		else out.push({
+			op: "set",
+			projection,
+			path: [...path, key],
+			value: current[key]
+		});
+		for (const key of Object.keys(previous)) if (!Object.prototype.hasOwnProperty.call(current, key)) out.push({
+			op: "delete",
+			projection,
+			path: [...path, key]
+		});
+		return;
+	}
+	out.push({
+		op: "set",
+		projection,
+		path,
+		value: current
+	});
+}
+/**
+* Diffs two arrays by trimming the common prefix and suffix.
+*
+* This is not a minimal edit script — a shuffle degrades to replacing
+* the middle wholesale. It is chosen because the operations lists
+* actually undergo (append, prepend, remove one, edit in place) all
+* reduce to a single small patch, and computing a true LCS on every
+* store change would cost more than it saves.
+*/
+function diffArray(projection, path, previous, current, out) {
+	let start = 0;
+	while (start < previous.length && start < current.length && structurallyEqual(previous[start], current[start])) start++;
+	let previousEnd = previous.length - 1;
+	let currentEnd = current.length - 1;
+	while (previousEnd >= start && currentEnd >= start && structurallyEqual(previous[previousEnd], current[currentEnd])) {
+		previousEnd--;
+		currentEnd--;
+	}
+	const previousCount = previousEnd - start + 1;
+	const currentCount = currentEnd - start + 1;
+	if (previousCount === 0 && currentCount === 0) return;
+	if (previousCount === currentCount) {
+		for (let offset = 0; offset < previousCount; offset++) {
+			const index = start + offset;
+			diff(projection, [...path, index], previous[index], current[index], out);
+		}
+		return;
+	}
+	out.push({
+		op: "splice",
+		projection,
+		path,
+		index: start,
+		deleteCount: previousCount,
+		items: current.slice(start, currentEnd + 1)
+	});
+}
+/**
+* Applies patches to a projection value, sharing structure with the
+* original everywhere the patch did not reach.
+*
+* Nothing is mutated: bindings hold onto emitted values, so a replica
+* that edited in place would change data a component already rendered.
+*/
+function applyPatches(root, patches) {
+	let next = root;
+	for (const patch of patches) next = applyPatch(next, patch);
+	return next;
+}
+function applyPatch(root, patch) {
+	switch (patch.op) {
+		case "set": return setIn(root, patch.path, 0, patch.value);
+		case "delete":
+			if (patch.path.length === 0) return;
+			return deleteIn(root, patch.path, 0);
+		case "splice": return updateIn(root, patch.path, 0, (node) => {
+			const array = Array.isArray(node) ? node : [];
+			return array.slice(0, patch.index).concat(patch.items, array.slice(patch.index + patch.deleteCount));
+		});
+	}
+}
+function setIn(node, path, index, value) {
+	if (index === path.length) return value;
+	const key = path[index];
+	const copy = cloneContainer(node, key);
+	setKey(copy, key, setIn(readKey(node, key), path, index + 1, value));
+	return copy;
+}
+function deleteIn(node, path, index) {
+	const key = path[index];
+	const copy = cloneContainer(node, key);
+	if (index === path.length - 1) {
+		if (Array.isArray(copy)) copy.splice(Number(key), 1);
+		else delete copy[String(key)];
+		return copy;
+	}
+	setKey(copy, key, deleteIn(readKey(node, key), path, index + 1));
+	return copy;
+}
+function updateIn(node, path, index, update) {
+	if (index === path.length) return update(node);
+	const key = path[index];
+	const copy = cloneContainer(node, key);
+	setKey(copy, key, updateIn(readKey(node, key), path, index + 1, update));
+	return copy;
+}
+function cloneContainer(node, key) {
+	if (Array.isArray(node)) return node.slice();
+	if (isPlainObject(node)) return { ...node };
+	return typeof key === "number" ? [] : {};
+}
+function readKey(node, key) {
+	if (node === null || node === void 0) return;
+	return node[key];
+}
+function setKey(container, key, value) {
+	container[key] = value;
+}
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+//#endregion
+//#region src/channel/plainData.ts
+/**
+* Checks that a value can cross the barrier.
+*
+* `structurallyEqual` understands primitives, arrays and plain
+* objects, and falls back to reference equality for everything else —
+* which for a freshly built value reports "changed" every single time.
+* A view key holding a `Date`, a `Map` or a domain object therefore
+* re-emits on every unrelated update and dirties the subtree bound to
+* it, forever, while looking perfectly correct.
+*
+* That failure is invisible in a test and shows up as a vague slowness
+* much later, so `provide` checks each key's first emission and throws
+* naming the path. The view-model layer is where rich objects become
+* flat data; this is what makes that a rule rather than a convention.
+*
+* The check runs once per key, on the first value only. It is a
+* development guard against a design mistake, not a validator on the
+* hot path.
+*/
+const MAX_DEPTH = 100;
+/**
+* Returns the path to the first value that cannot cross, or null when
+* the whole tree is plain data.
+*/
+function findUnplainPath(value, path = []) {
+	if (path.length > MAX_DEPTH) return format(path);
+	if (value === null) return null;
+	const type = typeof value;
+	if (type === "string" || type === "number" || type === "boolean" || type === "undefined") return null;
+	if (type === "function" || type === "symbol" || type === "bigint") return format(path);
+	if (Array.isArray(value)) {
+		for (let index = 0; index < value.length; index++) {
+			const found = findUnplainPath(value[index], [...path, index]);
+			if (found !== null) return found;
+		}
+		return null;
+	}
+	const prototype = Object.getPrototypeOf(value);
+	if (prototype !== Object.prototype && prototype !== null) return format(path);
+	for (const [key, member] of Object.entries(value)) {
+		const found = findUnplainPath(member, [...path, key]);
+		if (found !== null) return found;
+	}
+	return null;
+}
+/**
+* Throws when `value` cannot cross the barrier, naming the channel,
+* the key and the path within it.
+*/
+function requirePlainData(channelName, key, value) {
+	const path = findUnplainPath(value);
+	if (path === null) return;
+	const where = path === "" ? `'${key}'` : `'${key}'${path}`;
+	throw new Error(`Channel '${channelName}' published ${where}, which is not plain data. Only primitives, arrays and plain objects cross the barrier: a Date, Map, Set, class instance or function compares by reference, so it would report a change on every update and rebuild the subtree bound to it. Flatten it in the view model.`);
+}
+function format(path) {
+	return path.map((step) => typeof step === "number" ? `[${step}]` : `.${step}`).join("");
+}
+//#endregion
+//#region src/channel/provide.ts
+/**
+* Publishes a channel from the thread that owns its data.
+*
+* Each view key is subscribed, diffed against what the other side last
+* saw, and sent as patches. Whatever produced the observable — a bare
+* subject or a stack of layers — stays here; only plain data crosses.
+*
+* Keys are subscribed on the first sync request, so a channel nobody
+* is watching costs nothing.
+*/
+function provide(token, source, port) {
+	return new ProvidedChannel(token, source, port);
+}
+var ProvidedChannel = class {
+	token;
+	source;
+	port;
+	subscriptions = new Subscription();
+	/**
+	* What the other side is known to hold, seeded from the token's
+	* initial value — which the replica also starts from, so an app
+	* whose first emission equals the initial sends nothing at all.
+	*/
+	previous = /* @__PURE__ */ new Map();
+	checked = /* @__PURE__ */ new Set();
+	synced = false;
+	constructor(token, source, port) {
+		this.token = token;
+		this.source = source;
+		this.port = port;
+		for (const key of viewKeys(token)) this.previous.set(key, token.initial[key]);
+		this.port.onmessage = (event) => this.receive(event.data);
+	}
+	receive(data) {
+		if (!isChannelClientMessage(data)) return;
+		try {
+			if (data.type === "channel:sync") {
+				this.sync();
+				return;
+			}
+			this.runCommand(data.command, data.payload, data.rest);
+		} catch (error) {
+			this.post({
+				type: "channel:error",
+				message: error instanceof Error ? error.message : String(error),
+				stack: error instanceof Error ? error.stack : void 0
+			});
+		}
+	}
+	runCommand(name, payload, rest) {
+		const handler = this.source.commands?.[name];
+		if (handler === void 0) {
+			const names = Object.keys(this.source.commands ?? {}).sort().join(", ");
+			throw new Error(`Channel '${this.token.name}' has no command '${name}'. Declared commands: ${names.length > 0 ? names : "(none)"}.`);
+		}
+		handler(payload, ...rest ?? []);
+	}
+	sync() {
+		if (this.synced) {
+			this.resend();
+			return;
+		}
+		this.synced = true;
+		for (const key of viewKeys(this.token)) {
+			const observable = this.source.view[key];
+			if (observable === void 0) {
+				this.post({
+					type: "channel:error",
+					message: `Channel '${this.token.name}' declares view key '${key}' but nothing was provided for it.`
+				});
+				continue;
+			}
+			this.subscriptions.add(observable.subscribe({
+				next: (value) => this.publish(key, value),
+				error: (error) => this.post({
+					type: "channel:error",
+					message: `Channel '${this.token.name}' view key '${key}' errored: ${error instanceof Error ? error.message : String(error)}`,
+					stack: error instanceof Error ? error.stack : void 0
+				})
+			}));
+		}
+	}
+	publish(key, value) {
+		if (!this.checked.has(key)) {
+			this.checked.add(key);
+			try {
+				requirePlainData(this.token.name, key, value);
+			} catch (error) {
+				this.post({
+					type: "channel:error",
+					message: error instanceof Error ? error.message : String(error),
+					stack: error instanceof Error ? error.stack : void 0
+				});
+				return;
+			}
+		}
+		const patches = diffProjection(key, this.previous.get(key), value);
+		this.previous.set(key, value);
+		if (patches.length > 0) this.post({
+			type: "channel:patch",
+			patches
+		});
+	}
+	/** Re-sends every key in full, for a client that reattached. */
+	resend() {
+		const patches = [];
+		for (const [key, value] of this.previous) patches.push({
+			op: "set",
+			projection: key,
+			path: [],
+			value
+		});
+		if (patches.length > 0) this.post({
+			type: "channel:patch",
+			patches
+		});
+	}
+	post(message) {
+		this.port.postMessage(message);
+	}
+	dispose() {
+		this.subscriptions.unsubscribe();
+		this.port.onmessage = null;
+	}
+};
+//#endregion
+//#region src/app/NodeReport.ts
+/**
+* A node as a path somebody can read: `App > TrackScreen > ActionRow >
+* Button "Like"`.
+*
+* Written for error messages rather than for the inspector, and the
+* difference decides the shape. A report is read beside the tree it
+* came from, so an id is a handle; an error is read in a console or an
+* overlay with no tree beside it, and `node-4821` there is a fact
+* about nothing. The owner chain is what a person recognises, because
+* it is the components they wrote.
+*
+* Owners arrive nearest-first, as `UiNodeReport.owners` computes them,
+* and read outermost-first, as a path does. The accessible name is the
+* leaf when there is one: two `Button`s in the same row are only told
+* apart by what they say.
+*/
+function formatNodePath(owners, node) {
+	const names = owners.map((owner) => owner.name).reverse();
+	if (names.length === 0) return node.label === void 0 || node.label === "" ? `${node.type} ${node.id}` : `${node.type} "${node.label}"`;
+	const path = names.join(" > ");
+	return node.label === void 0 || node.label === "" ? path : `${path} "${node.label}"`;
+}
+/**
+* Describes the stream driving a property.
+*
+* `timeOrigin` turns the binding's own reading into an epoch stamp:
+* `performance.timeOrigin` on a thread that has one, and zero where
+* the reading is already an epoch.
+*/
+function describeStream(binding, timeOrigin) {
+	const label = binding.observable?.label;
+	const labelled = typeof label === "string" && label !== "";
+	const emittedAt = binding.emittedAt();
+	return {
+		source: labelled ? label : `observable #${binding.id}`,
+		kind: labelled ? "cell" : "observable",
+		value: printPropValue(binding.value()),
+		emissions: binding.emissionCount(),
+		emittedAt: emittedAt === null ? null : timeOrigin + emittedAt,
+		connected: binding.connected()
+	};
+}
+/** A stream as one line: what feeds the prop, and how long ago it said so. */
+function formatStream(stream, now = Date.now()) {
+	const when = stream.emittedAt === null ? "no value yet" : `${formatAge(Math.max(0, now - stream.emittedAt))} ago`;
+	const emissions = `${stream.emissions} emission${stream.emissions === 1 ? "" : "s"}`;
+	return `${stream.source} · ${emissions} · ${when}${stream.connected ? "" : " · disconnected"}`;
+}
+/** An age in the largest unit that stays readable. */
+function formatAge(ms) {
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	return `${Math.round(ms / 6e4)}m`;
+}
+/**
+* A value as one line a person can read.
+*
+* `JSON.stringify` alone is not enough: the two values a canvas UI
+* puts in a property that it cannot handle are a `Set` (a node's
+* visual states) and a function (an event handler), and it prints both
+* as `{}`, which in an inspector reads as a bug in the application
+* rather than one in the inspector.
+*/
+function printPropValue(value) {
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	if (typeof value === "function") return `ƒ ${value.name === "" ? "(anonymous)" : value.name}`;
+	if (typeof value === "symbol") return value.toString();
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
+	if (value instanceof Set) return `Set { ${[...value].map(printPropValue).join(", ")} }`;
+	if (value instanceof Map) return `Map { ${[...value].map(([key, entry]) => `${printPropValue(key)}: ${printPropValue(entry)}`).join(", ")} }`;
+	if (Array.isArray(value)) return `[${value.map(printPropValue).join(", ")}]`;
+	try {
+		return JSON.stringify(value) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+/** The report as text, for a console or a test failure. */
+function formatNodeReport(report) {
+	const lines = [`${report.type} '${report.id}'`];
+	if (report.owners.length > 0) lines.push(`rendered by ${report.owners.map((owner) => owner.name).join(" inside ")}`);
+	if (report.modifiers.length > 0) lines.push(`modifiers: ${report.modifiers.join(", ")}`);
+	if (report.listens.length > 0) lines.push(`listens: ${report.listens.join(", ")}`);
+	if (report.beneath.length > 0) {
+		lines.push("beneath, at the pointer:");
+		for (const under of report.beneath) {
+			const owner = under.owner === void 0 ? "" : ` (${under.owner})`;
+			const listens = under.listens.length === 0 ? "" : `, listens: ${under.listens.join(", ")}`;
+			lines.push(`  ${under.type} ${under.id}${owner}${listens}`);
+		}
+	}
+	if (report.props.length > 0) {
+		lines.push("props:");
+		for (const prop of report.props) {
+			lines.push(`  ${prop.name} = ${prop.value}${prop.source === void 0 ? "" : ` (${prop.source})`}`);
+			if (prop.stream !== void 0) lines.push(`    ${formatStream(prop.stream)}`);
+		}
+	}
+	if (report.environment.length > 0) {
+		lines.push("environment:");
+		for (const entry of report.environment) lines.push(`  ${entry.key} = ${entry.value}${entry.provided ? " (provided here)" : ""}`);
+	}
+	if (report.semantics !== void 0) {
+		const parts = [
+			report.semantics.role === void 0 ? void 0 : `role ${report.semantics.role}`,
+			report.semantics.label === void 0 ? void 0 : `label ${report.semantics.label}`,
+			report.semantics.value === void 0 ? void 0 : `value ${report.semantics.value}`,
+			report.semantics.states === void 0 || report.semantics.states.length === 0 ? void 0 : `states ${report.semantics.states.join(", ")}`
+		].filter((part) => part !== void 0);
+		if (parts.length > 0) lines.push(`semantics: ${parts.join(" · ")}`);
+	}
+	lines.push(report.explanation);
+	return lines.join("\n");
+}
+//#endregion
+//#region src/worker/captureConsole.ts
+const LEVELS = [
+	"log",
+	"info",
+	"warn",
+	"error",
+	"debug"
+];
+/**
+* Copies every `console.*` call on `target` (the worker global's
+* console by default) to `sink`. Returns a function that restores the
+* original methods.
+*
+* Idempotent per target: a second capture on the same console replaces
+* the first's sink rather than nesting, so toggling a panel on twice
+* does not log twice.
+*/
+function captureConsole(sink, target = console) {
+	const installed = target[CAPTURED];
+	if (installed !== void 0) {
+		installed.sink = sink;
+		return installed.restore;
+	}
+	const originals = /* @__PURE__ */ new Map();
+	const state = {
+		sink,
+		restore: () => {
+			for (const [level, original] of originals) target[level] = original;
+			delete target[CAPTURED];
+		}
+	};
+	for (const level of LEVELS) {
+		const original = target[level];
+		originals.set(level, original);
+		target[level] = (...args) => {
+			original.apply(target, args);
+			try {
+				state.sink({
+					level,
+					args: args.map(formatConsoleArg),
+					at: Date.now()
+				});
+			} catch {}
+		};
+	}
+	target[CAPTURED] = state;
+	return state.restore;
+}
+const CAPTURED = Symbol.for("gesso:console-captured");
+/**
+* One console argument as the panel prints it.
+*
+* `printPropValue` already prints the values a canvas UI is likely to
+* log; an Error is the one thing it prints badly (`{}`), and the one
+* thing a developer most wants to read whole.
+*/
+function formatConsoleArg(value) {
+	if (value instanceof Error) return value.stack !== void 0 && value.stack !== "" ? value.stack : `${value.name}: ${value.message}`;
+	return printPropValue(value);
+}
+function isConsoleForwardingMessage(value) {
+	const message = value;
+	return message?.type === "gesso:console" && typeof message.enabled === "boolean";
+}
+function isConsoleEntryMessage(value) {
+	const message = value;
+	return message?.type === "gesso:console" && typeof message.entry === "object" && message.entry !== null;
+}
+//#endregion
+//#region src/worker/WorkerPorts.ts
+/**
+* Named `MessagePort`s into a worker.
+*
+* A worker's global `onmessage` is a single channel, so a worker that
+* receives messages on it can host exactly one conversation. That is
+* why a store in a data worker used to mean a worker per store: the
+* client claimed the `Worker` object itself, and a second one had
+* nowhere to go.
+*
+* A handshake fixes it. The client opens a `MessageChannel`, keeps one
+* end and transfers the other with a name; the worker serves that name
+* and the two ends talk privately from then on. The global channel is
+* used once per conversation and carries nothing else.
+*
+* Nothing here knows what travels over a port. It is the transport the
+* store replication in `../store/worker` runs on today and the barrier
+* contract will run on next.
+*/
+function isPortHandshake(value) {
+	const message = value;
+	return message?.type === "gesso:port" && typeof message.key === "string";
+}
+/**
+* Stands for "whichever worker the shell spawned for the application".
+*
+* A registration inside the render worker cannot name that worker: it
+* is created by the shell and its port only arrives with `init`, long
+* after `useChannel` and `useService` have run. This sentinel is what a
+* registration puts there instead, and the render worker swaps it for
+* the real handle once the port shows up.
+*
+* Opening a port on it before then is a bug rather than a race, so it
+* says so.
+*/
+const APPLICATION_WORKER = {
+	open() {
+		throw new Error("APPLICATION_WORKER was used directly. It is a placeholder the render worker replaces with the shell's port; reaching it means no application-logic worker was supplied. Pass appLogicWorker to createApp.");
+	},
+	spawned: false,
+	terminate() {}
+};
+/**
+* A handle over an endpoint someone else owns.
+*
+* The shell spawns the application worker and hands the render worker
+* one end of a channel to it; this is what the render worker opens
+* named ports over. `terminate` is a no-op — the lifetime belongs to
+* whoever created the endpoint, and a handle that could kill a worker
+* it did not spawn would be a surprising thing to hand out.
+*/
+function portHandle(endpoint) {
+	return {
+		open(key) {
+			const channel = new MessageChannel();
+			endpoint.postMessage({
+				type: "gesso:port",
+				key
+			}, [channel.port2]);
+			return channel.port1;
+		},
+		get spawned() {
+			return true;
+		},
+		terminate() {}
+	};
+}
+function isHubMessage(value) {
+	return value?.type === "gesso:hub";
+}
+const BASE_INSTALLED = Symbol.for("gesso:port-base-installed");
+const CONSOLE_RESTORE = Symbol.for("gesso:port-console-restore");
+/**
+* Starts or stops copying this worker's console to whoever posts to
+* it, as `ConsoleEntryMessage`s. A host with no `postMessage` (a test's
+* bare object) has nowhere to send them and forwards nothing.
+*/
+function setConsoleForwarding(host, enabled) {
+	host[CONSOLE_RESTORE]?.();
+	delete host[CONSOLE_RESTORE];
+	const post = host.postMessage;
+	if (!enabled || typeof post !== "function") return;
+	host[CONSOLE_RESTORE] = captureConsole((entry) => {
+		const message = {
+			type: "gesso:console",
+			entry
+		};
+		post.call(host, message);
+	});
+}
+/**
+* The handler every `servePorts` chain sits on top of.
+*
+* It owns the two things no individual server can: routing a hub port
+* through the whole chain, and answering a handshake that nobody
+* accepted. Both have to be innermost — the first because the chain is
+* only complete once every server has wrapped `onmessage`, the second
+* because "nobody accepted" is only known after every server has
+* declined.
+*/
+function installBase(host) {
+	if (host[BASE_INSTALLED] === true) return;
+	host[BASE_INSTALLED] = true;
+	const previous = host.onmessage;
+	const registered = host[SERVED_NAMES] ?? [];
+	host.onmessage = (event) => {
+		if (isConsoleForwardingMessage(event.data)) {
+			setConsoleForwarding(host, event.data.enabled);
+			return;
+		}
+		if (isHubMessage(event.data)) {
+			const port = event.ports?.[0];
+			if (port === void 0) throw new Error("A hub message arrived with no port attached.");
+			port.onmessage = host.onmessage;
+			return;
+		}
+		if (!isPortHandshake(event.data)) {
+			previous?.(event);
+			return;
+		}
+		const port = event.ports?.[0];
+		if (port === void 0) throw new Error(`Port handshake for '${event.data.key}' arrived with no port attached.`);
+		const served = registered.flatMap((get) => [...get()]).sort();
+		const error = {
+			type: "port:error",
+			message: `Nothing is served under '${event.data.key}'. This worker serves: ${served.length > 0 ? served.join(", ") : "(nothing)"}.`
+		};
+		port.postMessage(error);
+	};
+}
+/**
+* Wraps a worker factory so the worker is created once and shared.
+*
+* A factory rather than a URL for the same reason the render worker
+* takes one: a bundler only emits a chunk for a worker it can see
+* constructed literally in the calling module.
+*
+*   const data = workerHandle(
+*     () => new Worker(new URL('./data.worker.ts', import.meta.url), { type: 'module' })
+*   );
+*/
+function workerHandle(factory) {
+	let worker;
+	return {
+		open(key) {
+			worker ??= factory();
+			const channel = new MessageChannel();
+			worker.postMessage({
+				type: "gesso:port",
+				key
+			}, [channel.port2]);
+			return channel.port1;
+		},
+		get spawned() {
+			return worker !== void 0;
+		},
+		terminate() {
+			worker?.terminate();
+			worker = void 0;
+		}
+	};
+}
+function isPortErrorMessage(value) {
+	const message = value;
+	return message?.type === "port:error" && typeof message.message === "string";
+}
+/** Every name served on a host, across all `servePorts` calls on it. */
+const SERVED_NAMES = Symbol.for("gesso:served-port-names");
+/**
+* Serves named ports inside a worker.
+*
+* Call it synchronously at the top level of the worker module, before
+* any await, so no handshake is missed.
+*
+* `onPort` returns whether it took the port. Returning false passes
+* the handshake to whatever was serving before, which is what lets two
+* kinds of thing — stores and channels, during the migration — share
+* one worker: each answers for its own names and declines the rest.
+* When nobody accepts, the port is answered with an error naming
+* everything the worker does serve, because a handshake that silently
+* matched nothing leaves the client waiting forever with nothing said.
+*
+* `names` is only read to build that message.
+*
+* Returns a function that stops serving.
+*/
+function servePorts(onPort, names, host = self) {
+	const withNames = host;
+	const registered = withNames[SERVED_NAMES] ??= [];
+	registered.push(names);
+	installBase(host);
+	const previous = host.onmessage;
+	host.onmessage = (event) => {
+		if (!isPortHandshake(event.data)) {
+			previous?.(event);
+			return;
+		}
+		const port = event.ports?.[0];
+		if (port === void 0) throw new Error(`Port handshake for '${event.data.key}' arrived with no port attached.`);
+		if (onPort(event.data.key, port)) return;
+		previous?.(event);
+	};
+	return () => {
+		host.onmessage = previous;
+		const index = registered.indexOf(names);
+		if (index >= 0) registered.splice(index, 1);
+	};
+}
+//#endregion
+//#region src/channel/serveChannels.ts
+/**
+* One served channel, with its source checked against its token.
+*
+* `ServedChannel` is erased on purpose, so one list can hold channels
+* of every shape; the cost is that a view key the token declares and
+* the source forgets is found at startup, by the error `provide`
+* reports, rather than by the compiler. This is the typed seam: the
+* source must hold an Observable for every key of the token's view and
+* a handler for every command, and each handler takes the arguments
+* the token declares, so none of them needs an annotation.
+*
+*   serveChannels([
+*     serve(Catalog, { view: catalog, commands: { add: name => catalog.add(name) } })
+*   ]);
+*
+* The view may be any object with the right observables on it, which
+* is often the domain object itself when its properties are named
+* after the keys. Only the declared keys are read from it.
+*/
+function serve(token, source) {
+	return {
+		token,
+		source
+	};
+}
+/**
+* Publishes channels from an application worker.
+*
+* Call it synchronously at the top level of the worker module, before
+* any await, so no handshake is missed:
+*
+*   const catalog = new CatalogViewModel(new CatalogDomain(new OpfsStore()));
+*   serveChannels([
+*     serve(Catalog, { view: { products: catalog.products$ }, commands: { … } })
+*   ]);
+*
+* Everything above this call is the application's own — plain classes,
+* plain observables, no framework import. This function is the entire
+* seam between it and the view.
+*
+* Returns a function that stops serving and disposes what it provided.
+*/
+function serveChannels(channels, host) {
+	const byName = /* @__PURE__ */ new Map();
+	for (const served of channels) byName.set(served.token.name, served);
+	const provided = [];
+	const stop = servePorts((key, port) => {
+		const served = byName.get(key);
+		if (served === void 0) return false;
+		provided.push(provide(served.token, served.source, port));
+		return true;
+	}, () => [...byName.keys()], host);
+	return () => {
+		stop();
+		for (const channel of provided) channel.dispose();
+		provided.length = 0;
+	};
+}
+//#endregion
+//#region src/channel/pick.ts
+/**
+* One key of a view model, as its own Observable, emitting only when
+* that key's value changes.
+*
+* `provide` and `serveChannels` want one Observable per view key, so
+* the differ can patch each key on its own, while a view model is most
+* naturally one Observable of one object. This is the seam between the
+* two, and every application worker was about to write it.
+*/
+function pick(source, key) {
+	return source.pipe(map((value) => value[key]), distinctUntilChanged());
+}
+/**
+* Every key of a view model as its own Observable: the `view` a channel
+* source wants, from the one Observable a view model has.
+*
+*   serveChannels([{ token: Queue, source: { view: pickKeys(queue.view, QUEUE_KEYS), commands } }])
+*/
+function pickKeys(source, keys) {
+	const out = {};
+	for (const key of keys) out[key] = pick(source, key);
+	return out;
+}
+//#endregion
+//#region src/storage/StorageAdapter.ts
+/**
+* Which of the four outcomes a thrown platform error is.
+*
+* The names are the ones the storage APIs actually throw.
+* `QuotaExceededError` is the DOM's word for full, and every browser
+* uses it for OPFS, IndexedDB and `localStorage` alike. `SecurityError`
+* and `NotAllowedError` are what a blocked origin gets. A missing API
+* (no `navigator.storage`, no `indexedDB`) is a `TypeError` here and
+* is `denied` for the same reason: nothing the application does will
+* produce a store.
+*/
+function classifyStorageError(error) {
+	const name = error instanceof Error ? error.name : "";
+	if (name === "QuotaExceededError" || name === "NS_ERROR_DOM_QUOTA_REACHED") return "full";
+	if (name === "SecurityError" || name === "NotAllowedError" || name === "TypeError") return "denied";
+	return "failed";
+}
+/** A thrown value as the message a screen could show. */
+function storageErrorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/** A read that could not answer, as one record. */
+function storageReadFailure(error) {
+	return {
+		outcome: classifyStorageError(error),
+		value: null,
+		error: storageErrorMessage(error)
+	};
+}
+/** A read that answered, whether or not it found anything. */
+function storageReadValue(value) {
+	return {
+		outcome: "ok",
+		value,
+		error: null
+	};
+}
+/**
+* The same contract in memory, for specs and for a platform with no
+* store at all.
+*
+* Not a fallback anything installs on its own. An application that
+* would rather run with an unremembered session than fail says so by
+* passing one of these; one that would rather tell the person its
+* settings will not be kept reads the `denied` outcome and says so.
+* Choosing between those two on an application's behalf is exactly the
+* kind of decision the thread model keeps out of the framework.
+*/
+var MemoryStorage = class {
+	records = /* @__PURE__ */ new Map();
+	/** Written by a spec that wants to see what a full store does. */
+	full = false;
+	read(key) {
+		return Promise.resolve(storageReadValue(this.records.get(key) ?? null));
+	}
+	write(key, value) {
+		if (this.full) return Promise.resolve("full");
+		this.records.set(key, value);
+		return Promise.resolve("ok");
+	}
+	remove(key) {
+		this.records.delete(key);
+		return Promise.resolve("ok");
+	}
+	keys() {
+		return Promise.resolve([...this.records.keys()]);
+	}
+};
+//#endregion
+//#region src/undo/UndoStack.ts
+const NOTHING = {
+	undo: null,
+	redo: null
+};
+/**
+* The application's undo, as a stack of named transactions.
+*
+* A component registers what it did and how to unmake it, and a menu,
+* a button or a keyboard shortcut drives the stack. Nothing here
+* listens to anything or knows what an application's state is: the two
+* functions in a transaction are the whole of the coupling, which is
+* why this can sit on either thread and why it does not become a data
+* layer.
+*
+*   const undo = ctx.inject(UndoStack);
+*
+*   queue.send.remove(at);
+*   undo.push({
+*     label: `Remove ${track.title}`,
+*     undo: () => queue.send.addToQueue(track.id),
+*     redo: () => queue.send.remove(at)
+*   });
+*
+* ## How this relates to the undo inside a text field
+*
+* `EditableTextModel` has had its own undo since text became editable,
+* and the two are deliberately separate. A field's undo is a stack of
+* **snapshots of one string**, private to the field, and it has to be:
+* the model is the only thing that knows where the caret was, which
+* run of typing coalesces with which, and what an IME composition is
+* doing. This one is a stack of **inverse operations** over whatever
+* an application's state happens to be, and it cannot see inside a
+* field at all.
+*
+* They meet at one key press, and the rule there is that the focused
+* field wins: `registerUndoShortcuts` skips Mod+Z while something is
+* being typed into, so undo in a field undoes typing and undo
+* everywhere else undoes the application's last change. Merging the
+* two stacks would mean a keystroke and a queue reorder sharing one
+* history, which is not what either of them means.
+*
+* ## Reentrancy
+*
+* A push while an undo or a redo is running is dropped. Without it an
+* application whose edit path records itself would record the undo as
+* a new edit and the stack would never empty. Write the inverse
+* functions to call the state directly rather than through the same
+* path that records, and the guard never fires.
+*/
+var UndoStack = class {
+	entries = [];
+	undone = [];
+	limit;
+	/** True while `undo()` or `redo()` is running one of the functions. */
+	running = false;
+	/** Set by `endRun`, so the next push starts a new entry whatever its key. */
+	sealed = false;
+	labels;
+	/** What undoing would undo, or null when there is nothing to undo. */
+	undoLabel;
+	/** What redoing would redo, or null when there is nothing to redo. */
+	redoLabel;
+	/** Whether there is anything to undo, for a menu item's `disabled`. */
+	canUndo;
+	canRedo;
+	constructor(options = {}) {
+		this.limit = Math.max(1, options.limit ?? 100);
+		this.labels = internalState(NOTHING, options.label);
+		this.undoLabel = select(this.labels, "undo");
+		this.redoLabel = select(this.labels, "redo");
+		this.canUndo = computed(() => this.undoLabel.value !== null);
+		this.canRedo = computed(() => this.redoLabel.value !== null);
+	}
+	/** How many entries are held, for a spec or a budget. */
+	get size() {
+		return this.entries.length;
+	}
+	/** How many redos are waiting, for a spec or a budget. */
+	get redoSize() {
+		return this.undone.length;
+	}
+	/**
+	* Records a change that has already been made.
+	*
+	* Pushing is what discards the redo branch: making a change after
+	* undoing two is the person choosing the other future, and keeping
+	* the abandoned one would mean redoing into a state that no longer
+	* follows from what is on screen.
+	*/
+	push(transaction) {
+		if (this.running) return;
+		this.undone.length = 0;
+		const previous = this.entries[this.entries.length - 1];
+		const sealed = this.sealed;
+		this.sealed = false;
+		if (!sealed && previous !== void 0 && transaction.coalesce !== void 0 && previous.coalesce === transaction.coalesce) {
+			this.entries[this.entries.length - 1] = {
+				label: transaction.label,
+				undo: previous.undo,
+				redo: transaction.redo,
+				coalesce: transaction.coalesce
+			};
+			this.publish();
+			return;
+		}
+		this.entries.push(transaction);
+		while (this.entries.length > this.limit) this.entries.shift();
+		this.publish();
+	}
+	/**
+	* Groups everything pushed inside `body` into one entry.
+	*
+	* For a change an application makes as several calls and a person
+	* made as one press: undoing runs the group's undos in reverse, and
+	* redoing runs its redos in order. Unlike `coalesce`, a group keeps
+	* every step, because a group is written down as a group rather than
+	* discovered from a run of similar pushes.
+	*/
+	transact(label, body) {
+		if (this.running) return body();
+		const outer = this.entries.length;
+		const result = body();
+		const collected = this.entries.splice(outer);
+		if (collected.length > 0) {
+			this.entries.push({
+				label,
+				undo: () => {
+					for (let at = collected.length - 1; at >= 0; at--) collected[at].undo();
+				},
+				redo: () => {
+					for (const step of collected) step.redo();
+				}
+			});
+			this.sealed = true;
+			this.publish();
+		}
+		return result;
+	}
+	/**
+	* Ends the current run, so the next push starts its own entry.
+	*
+	* The twin of `EditableTextModel.endTypingRun`. A drag calls it when
+	* the pointer comes up: without it, dragging a row, letting go, and
+	* dragging the same row again would coalesce into one entry, and one
+	* undo would put the row back where it was two gestures ago.
+	*/
+	endRun() {
+		this.sealed = true;
+	}
+	/** Undoes the last change. False when there was nothing to undo. */
+	undo() {
+		const entry = this.entries.pop();
+		if (entry === void 0) return false;
+		this.run(entry.undo);
+		this.undone.push(entry);
+		this.sealed = true;
+		this.publish();
+		return true;
+	}
+	/** Redoes the last undone change. False when there was nothing to redo. */
+	redo() {
+		const entry = this.undone.pop();
+		if (entry === void 0) return false;
+		this.run(entry.redo);
+		this.entries.push(entry);
+		this.sealed = true;
+		this.publish();
+		return true;
+	}
+	/**
+	* Forgets everything, in both directions.
+	*
+	* What an application calls when the thing the entries refer to is
+	* gone: a queue emptied, a document closed, a signed-out account's
+	* library replaced. `EditableTextModel.setText` does the same for
+	* the same reason, and the reason is that an inverse function whose
+	* subject no longer exists is not an undo, it is a surprise.
+	*/
+	clear() {
+		this.entries.length = 0;
+		this.undone.length = 0;
+		this.sealed = false;
+		this.publish();
+	}
+	run(action) {
+		this.running = true;
+		try {
+			action();
+		} finally {
+			this.running = false;
+		}
+	}
+	publish() {
+		const next = {
+			undo: this.entries[this.entries.length - 1]?.label ?? null,
+			redo: this.undone[this.undone.length - 1]?.label ?? null
+		};
+		if (next.undo !== this.labels.value.undo || next.redo !== this.labels.value.redo) this.labels.value = next;
+	}
+};
+//#endregion
+//#region src/undo/undoable.ts
+/**
+* Puts a `mutate` on an undo stack, by way of its own inverse.
+*
+*   private readonly liked = internalState<readonly string[]>([]);
+*   private readonly like = mutate(this.liked, toggled, id => api.favourite(id));
+*   readonly toggleLike = undoable(undo, this.like, id => id, { label: () => 'Like' });
+*
+* The whole of it is that undoing an optimistic change is another
+* optimistic change. Nothing here writes the cell behind the
+* mutation's back, which is the thing that would go wrong if an undo
+* stack held values rather than operations: it would restore a value
+* the server has not been told about, and the next rollback would
+* fight it.
+*
+* `invert` answers the argument that undoes this one. For a toggle
+* that is the same argument again, which is why the example above
+* looks like it does nothing.
+*
+* **A refused write is not on the stack.** `mutate` already puts the
+* cell back when a commit rejects or resolves `false`, so the change
+* did not happen and there is nothing to undo; pushing it would give a
+* person an undo that undoes something they never saw.
+*
+* The undo and the redo call `mutation.run` rather than this wrapper,
+* so running them records nothing and the stack's reentrancy guard
+* never has to fire.
+*/
+function undoable(stack, mutation, invert, options) {
+	const { label, coalesce } = options;
+	return async (argument) => {
+		if (!await mutation.run(argument)) return false;
+		stack.push({
+			label: typeof label === "function" ? label(argument) : label,
+			undo: () => void mutation.run(invert(argument)),
+			redo: () => void mutation.run(argument),
+			...coalesce === void 0 ? {} : { coalesce: typeof coalesce === "function" ? coalesce(argument) : coalesce }
+		});
+		return true;
+	};
+}
+//#endregion
+//#region src/storage/OpfsStorage.ts
+/**
+* A store in the origin's private file system.
+*
+* The right default for an application's own state. It is reachable
+* from a worker, which `localStorage` is not, so the thread that owns
+* the state is the thread that writes it and nothing has to cross the
+* barrier to be remembered. It is asynchronous throughout, so nothing
+* it does blocks a frame. And it is per-origin and invisible to the
+* person, which is the right place for a queue or a draft and the
+* wrong place for anything they should be able to find and delete.
+*
+* One file per key, named by the key with the characters a file system
+* would refuse escaped, so a key is recoverable from a listing and a
+* key containing a slash cannot reach out of the folder.
+*
+* What happens on each failure:
+*
+* - **The platform has no OPFS**, or the browser refuses it (a private
+*   window, a blocked origin): every method answers `denied` and the
+*   error message says which. The store is not usable this session and
+*   `persisted` stops writing to it after the first denial.
+* - **The quota is spent**: the write answers `full`. Nothing is
+*   rolled back, because the value the application holds is the real
+*   one and only the remembering failed.
+* - **There is no such record**: the read answers `ok` with `null`.
+*   Not having been written yet is the ordinary first run, not a
+*   failure.
+* - **Anything else**: `failed`, with the platform's message. A file
+*   whose *contents* are not what this version writes is a different
+*   thing and is `persisted`'s to judge, which it does by discarding
+*   it, the same call `Tokens.ts` makes.
+*/
+var OpfsStorage = class {
+	folder;
+	rootOf;
+	/** The folder, once opened. Reused, because opening it is a round trip. */
+	opening = null;
+	constructor(options = {}) {
+		this.folder = options.directory ?? "gesso";
+		this.rootOf = options.root ?? defaultRoot;
+	}
+	async read(key) {
+		try {
+			return storageReadValue(await (await (await (await this.open()).getFileHandle(fileFor(key))).getFile()).text());
+		} catch (error) {
+			if (error instanceof Error && error.name === "NotFoundError") return storageReadValue(null);
+			return storageReadFailure(error);
+		}
+	}
+	async write(key, value) {
+		try {
+			const writable = await (await (await this.open()).getFileHandle(fileFor(key), { create: true })).createWritable();
+			await writable.write(value);
+			await writable.close();
+			return "ok";
+		} catch (error) {
+			return classifyStorageError(error);
+		}
+	}
+	async remove(key) {
+		try {
+			await (await this.open()).removeEntry(fileFor(key));
+			return "ok";
+		} catch (error) {
+			if (error instanceof Error && error.name === "NotFoundError") return "ok";
+			return classifyStorageError(error);
+		}
+	}
+	async keys() {
+		try {
+			const found = [];
+			for await (const name of (await this.open()).keys()) found.push(keyFor(name));
+			return found;
+		} catch {
+			return [];
+		}
+	}
+	/**
+	* The folder, opened once and kept.
+	*
+	* A failed open is *not* kept. A rejected promise left in `opening`
+	* would answer every later call with the same rejection, so one
+	* refusal at start-up would be a store that never worked again even
+	* after the person granted storage or made room. Kept when it
+	* succeeds, dropped when it does not, which is one line and the
+	* difference between a cache and a poison.
+	*/
+	open() {
+		if (this.opening === null) {
+			const opening = this.rootOf().then((root) => root.getDirectoryHandle(this.folder, { create: true }));
+			this.opening = opening;
+			opening.catch(() => {
+				if (this.opening === opening) this.opening = null;
+			});
+		}
+		return this.opening;
+	}
+};
+function defaultRoot() {
+	const storage = globalThis.navigator?.storage;
+	if (storage?.getDirectory === void 0) return Promise.reject(/* @__PURE__ */ new TypeError("This environment has no Origin Private File System."));
+	return storage.getDirectory();
+}
+/**
+* A key as a file name.
+*
+* `encodeURIComponent` and not a hash, so a listing of the folder in
+* devtools reads as the keys the application wrote. It escapes the
+* slash and the dot, which is what stops a key reaching a directory it
+* was not given.
+*/
+function fileFor(key) {
+	return `${encodeURIComponent(key)}.json`;
+}
+function keyFor(name) {
+	return decodeURIComponent(name.replace(/\.json$/, ""));
+}
+//#endregion
+//#region src/storage/IndexedDbStorage.ts
+/**
+* A store in IndexedDB.
+*
+* Beside OPFS rather than instead of it, because the two fail in
+* different places and an application picks by which failure it
+* minds. IndexedDB is reachable from every thread, survives longer
+* under a browser's own eviction, and is what a Safari that has
+* disabled OPFS still has; OPFS is faster for one large record and
+* simpler to inspect. Neither is a default the framework picks: an
+* application names the one it wants.
+*
+* One object store of strings keyed by string, which is the shape
+* `StorageAdapter` describes and no more. Indexes, versions past the
+* first, and cursors over ranges are what an application builds when
+* it has outgrown a key-value store, and at that point it is writing
+* against IndexedDB rather than against this.
+*
+* What happens on each failure:
+*
+* - **No `indexedDB`, or an origin that may not open one** (a private
+*   window in some browsers, a blocked third-party context): every
+*   method answers `denied`, and the open is retried next time rather
+*   than cached, because a `denied` can be lifted by a site setting
+*   mid-session.
+* - **The quota is spent**: the write answers `full`. IndexedDB
+*   reports this on the transaction rather than on the request, which
+*   is why the write waits for `oncomplete` and not for
+*   `onsuccess`: a put that succeeded into a transaction that then
+*   aborted has not been written, and answering `ok` for it would be
+*   the adapter assuming success.
+* - **A version change from another tab**: the connection is closed
+*   and dropped, so the next call opens a fresh one. Answering
+*   `failed` and holding a dead connection would make every later
+*   call fail too.
+* - **Anything else**: `failed`, with the platform's message.
+*/
+var IndexedDbStorage = class {
+	database;
+	store;
+	factory;
+	connecting = null;
+	constructor(options = {}) {
+		this.database = options.database ?? "gesso";
+		this.store = options.store ?? "records";
+		this.factory = options.factory ?? globalThis.indexedDB;
+	}
+	async read(key) {
+		try {
+			const value = await this.transact("readonly", (store) => store.get(key));
+			return storageReadValue(typeof value === "string" ? value : null);
+		} catch (error) {
+			return storageReadFailure(error);
+		}
+	}
+	async write(key, value) {
+		return this.outcomeOf(() => this.transact("readwrite", (store) => store.put(value, key)));
+	}
+	async remove(key) {
+		return this.outcomeOf(() => this.transact("readwrite", (store) => store.delete(key)));
+	}
+	async keys() {
+		try {
+			const found = await this.transact("readonly", (store) => store.getAllKeys());
+			return Array.isArray(found) ? found.filter((key) => typeof key === "string") : [];
+		} catch {
+			return [];
+		}
+	}
+	/** Lets go of the connection, for a spec or an application shutting down. */
+	close() {
+		const connecting = this.connecting;
+		this.connecting = null;
+		connecting?.then((database) => database.close(), () => void 0);
+	}
+	async outcomeOf(work) {
+		try {
+			await work();
+			return "ok";
+		} catch (error) {
+			const outcome = classifyStorageError(error);
+			if (outcome === "denied") this.connecting = null;
+			return outcome;
+		}
+	}
+	/**
+	* Runs one request inside one transaction and answers its result.
+	*
+	* A write resolves on the transaction completing rather than on the
+	* request succeeding, because those are two different claims: the
+	* second says the put was accepted, and only the first says it
+	* reached the disk.
+	*/
+	async transact(mode, run) {
+		const database = await this.connect();
+		return new Promise((resolve, reject) => {
+			let answer;
+			const transaction = database.transaction(this.store, mode);
+			const request = run(transaction.objectStore(this.store));
+			request.onsuccess = () => {
+				answer = request.result;
+			};
+			request.onerror = () => reject(request.error ?? /* @__PURE__ */ new Error("The request failed."));
+			transaction.oncomplete = () => resolve(answer);
+			transaction.onabort = () => reject(transaction.error ?? /* @__PURE__ */ new Error("The transaction was aborted."));
+		});
+	}
+	connect() {
+		this.connecting ??= this.open();
+		return this.connecting;
+	}
+	open() {
+		const factory = this.factory;
+		if (factory === void 0) return Promise.reject(/* @__PURE__ */ new TypeError("This environment has no IndexedDB."));
+		return new Promise((resolve, reject) => {
+			let request;
+			try {
+				request = factory.open(this.database, 1);
+			} catch (error) {
+				reject(error);
+				return;
+			}
+			request.onupgradeneeded = () => {
+				if (!request.result.objectStoreNames.contains(this.store)) request.result.createObjectStore(this.store);
+			};
+			request.onsuccess = () => {
+				request.result.onversionchange = () => this.close();
+				resolve(request.result);
+			};
+			request.onerror = () => reject(request.error ?? /* @__PURE__ */ new Error("The database could not be opened."));
+			request.onblocked = () => reject(/* @__PURE__ */ new Error("The database is open in another tab at a different version."));
+		});
+	}
+};
+//#endregion
+//#region src/storage/persisted.ts
+const MESSAGES = {
+	denied: "This browser will not let the application store anything.",
+	full: "There is no room left to store this.",
+	failed: "The store could not be written to."
+};
+/**
+* A value that survives the application being closed.
+*
+* Hydration is a `resource`, which is not a detail: reading from a
+* disk is a keyed request that can be slow, can answer "there is
+* nothing", and can fail, which is the same set of outcomes a request
+* over the network has. So the statuses here are `ResourceStatus`
+* itself rather than a fourth enum saying the same five things in
+* different words.
+*
+*   readonly draft = persisted(new OpfsStorage(), 'draft', { initial: '' });
+*
+*   // on a screen
+*   <TextInput value={draft.value} onChange={text => draft.set(text)} />
+*
+* ## What a screen sees before hydration finishes
+*
+* The default, and `status` reading `loading`. Nothing waits, nothing
+* is null, and no screen has a shape it only has for the first eighty
+* milliseconds. When the read lands the value changes like any other
+* cell change, and a screen that wants to say "restoring" reads
+* `status`.
+*
+* The one race that needs a rule is a person changing the value before
+* the disk has answered, which is not rare: a queue is a press away
+* and OPFS is a round trip away. **What they did wins.** A hydration
+* answer is applied only if nothing has been `set` since, on the same
+* reasoning as `mutate`'s guarded rollback: an answer that was
+* overtaken is stale, and putting it on screen would undo something
+* the person just did.
+*
+* ## What happens when storing fails
+*
+* - `denied`: nothing is written this session and nothing is tried
+*   again, because the answer will not change. `status` is `failed`
+*   and `saveError` says so once rather than on every keystroke.
+* - `full`: the write failed and the value in memory is kept. Nothing
+*   is rolled back: the change is real and only the remembering of it
+*   failed. The next change is still attempted, because a quota can be
+*   given back.
+* - `failed`: the same as `full`, and for the same reason.
+* - A record that parses but is not the shape `revive` accepts is
+*   treated as `missing`: the application starts from its default
+*   rather than showing an error about a file the person cannot see.
+*
+* ## It is a helper
+*
+* Nothing in the framework holds one, and nothing is reachable only
+* through it. A channel is served from plain Observables as it always
+* was, and an application that would rather read and write a store
+* itself is writing against the same `StorageAdapter` this is written
+* against. The thread model declined to own an application's data
+* architecture, and remembering a value is not the exception to that.
+*/
+var PersistedState = class {
+	adapter;
+	key;
+	held;
+	saves;
+	failure;
+	record;
+	writing;
+	/** True once the application has written a value of its own. */
+	touched = false;
+	/** Set when the store said `denied`, which is permanent for the session. */
+	refused = false;
+	/** The text last known to be on disk, so hydration does not write itself back. */
+	stored = null;
+	/** What `forget` goes back to. */
+	initial;
+	/** Where the first read got to; the same five words `resource` uses. */
+	status;
+	/** Why the read did not answer, as a message; null when it did. */
+	error;
+	/** What is remembered: the default until the read lands. */
+	value;
+	/** Writes in the air, for a saving indicator. A count, as `mutate.pending` is. */
+	saving;
+	/** Why the last write did not happen, as a message; null when it did. */
+	saveError;
+	/** Resolves when the first read has settled, whatever it found. */
+	hydrated;
+	constructor(adapter, key, options) {
+		this.adapter = adapter;
+		this.key = key;
+		const label = options.label;
+		this.initial = options.initial;
+		this.held = internalState(options.initial, label);
+		this.saves = internalState(0, label === void 0 ? void 0 : `${label}.saving`);
+		this.failure = internalState(null, label === void 0 ? void 0 : `${label}.saveError`);
+		this.value = this.held;
+		this.saving = this.saves;
+		this.saveError = this.failure;
+		this.record = resource(of(key), () => this.load(options.revive), label === void 0 ? {} : { label: `${label}.hydration` });
+		this.status = this.record.status;
+		this.error = this.record.error;
+		this.hydrated = this.record.settled.then(() => this.apply());
+		this.writing = debounced(this.held, options.settle ?? 250).pipe(skip(1)).subscribe((value) => void this.flush(value));
+	}
+	/** What is remembered right now, for code that is not subscribing. */
+	get current() {
+		return this.held.value;
+	}
+	/** Remembers a new value. The write follows once the changes stop. */
+	set(value) {
+		this.touched = true;
+		this.held.value = value;
+	}
+	/**
+	* Writes what is held now, without waiting for the gate.
+	*
+	* For the moment an application knows it is about to lose the thread:
+	* a `visibilitychange`, a route away from an editor, a sign-out.
+	*/
+	save() {
+		return this.flush(this.held.value);
+	}
+	/**
+	* Forgets the record and goes back to the default.
+	*
+	* Both halves, because a stored value removed while the cell still
+	* holds it would be written straight back by the next change.
+	*/
+	async forget() {
+		this.stored = null;
+		this.touched = true;
+		this.held.value = this.initial;
+		await this.adapter.remove(this.key);
+	}
+	/** Gives back the write subscription and the resource's. */
+	dispose() {
+		this.writing.unsubscribe();
+		this.record.dispose();
+	}
+	async load(revive) {
+		const read = await this.adapter.read(this.key);
+		if (read.outcome !== "ok") {
+			if (read.outcome === "denied") this.refused = true;
+			throw new Error(read.error ?? MESSAGES[read.outcome] ?? "The store could not be read.");
+		}
+		if (read.value === null) return null;
+		this.stored = read.value;
+		let parsed;
+		try {
+			parsed = JSON.parse(read.value);
+		} catch {
+			return null;
+		}
+		return revive === void 0 ? parsed : revive(parsed);
+	}
+	apply() {
+		const found = this.record.value.value;
+		if (found === null || this.touched) return;
+		this.held.value = found;
+	}
+	async flush(value) {
+		if (this.refused) return;
+		let text;
+		try {
+			text = JSON.stringify(value);
+		} catch (error) {
+			this.failure.value = error instanceof Error ? error.message : String(error);
+			return;
+		}
+		if (text === this.stored) return;
+		this.saves.value = this.saves.value + 1;
+		try {
+			const outcome = await this.adapter.write(this.key, text);
+			if (outcome === "ok") {
+				this.stored = text;
+				this.failure.value = null;
+				return;
+			}
+			if (outcome === "denied") this.refused = true;
+			this.failure.value = MESSAGES[outcome] ?? "The store could not be written to.";
+		} finally {
+			this.saves.value = Math.max(0, this.saves.value - 1);
+		}
+	}
+};
+/**
+* A value read from a store on start and written back as it changes.
+*
+*   const settings = persisted(new IndexedDbStorage(), 'settings', {
+*     initial: DEFAULTS,
+*     revive: raw => (isSettings(raw) ? raw : null)
+*   });
+*
+* See `PersistedState` for what a screen sees before the read lands
+* and what each kind of storage failure does.
+*/
+function persisted(adapter, key, options) {
+	return new PersistedState(adapter, key, options);
+}
+//#endregion
+export { InternalState as $, printPropValue as A, channel as B, captureConsole as C, formatNodePath as D, formatAge as E, applyPatch as F, mutate as G, viewKeys as H, applyPatches as I, select as J, Resource as K, diffProjection as L, provide as M, findUnplainPath as N, formatNodeReport as O, requirePlainData as P, structurallyEqual as Q, isChannelClientMessage as R, workerHandle as S, describeStream as T, debounced as U, defineChannel as V, throttled as W, computed as X, ComputedCell as Y, derive as Z, isHubMessage as _, undoable as a, output as at, portHandle as b, classifyStorageError as c, storageReadValue as d, internalState as et, pick as f, APPLICATION_WORKER as g, serveChannels as h, OpfsStorage as i, isOutputTarget as it, ProvidedChannel as j, formatStream as k, storageErrorMessage as l, serve as m, persisted as n, input as nt, UndoStack as o, outputTargetOf as ot, pickKeys as p, resource as q, IndexedDbStorage as r, into as rt, MemoryStorage as s, withBodyOf as st, PersistedState as t, InputCell as tt, storageReadFailure as u, isPortErrorMessage as v, isConsoleEntryMessage as w, servePorts as x, isPortHandshake as y, isChannelHostMessage as z };
+
+//# sourceMappingURL=persisted-Ddb51avc.js.map