@markless/router 0.4.0 → 0.5.0

package/dist/vite/runtime/mdx-route.js

@@ -1,5 +1,756 @@
-function protocolStateVersion(storage) {
-	return (storage?.length ?? 0) > 0 ? 2 : 1;
+import { i as protocolStateVersion, n as protocolInstanceQualifies, t as protocolInstancePath } from "../../protocol-constants-B4WxrZAS.js";
+//#region ../serializer/src/storage-cookie.ts
+const STORAGE_RENDER_CONTEXT_READER = "storageValue";
+//#endregion
+//#region ../web/src/ssr-data/awaitable.ts
+function marklessIsThenable(value) {
+	return typeof value?.then === "function";
+}
+function marklessThen(value, next) {
+	return marklessIsThenable(value) ? value.then(next) : next(value);
+}
+/** `then` with the `finally` of the await it replaces: released on both edges. */
+function marklessSettled(value, release, next) {
+	if (!marklessIsThenable(value)) {
+		release();
+		return next(value);
+	}
+	return value.then((settled) => {
+		release();
+		return next(settled);
+	}, (error) => {
+		release();
+		throw error;
+	});
+}
+//#endregion
+//#region ../web/src/fns/instance-scope.ts
+const INSTANCE_PATH = /^(?:[cpm]\d+:|r:[^:]*:)+/;
+function marklessInstancePath(prefix) {
+	return prefix && INSTANCE_PATH.exec(prefix)?.[0] || "";
+}
+const ROW_SEGMENT = /r:[^:]*:/g;
+function marklessRowFreeSymbolId(symbolId, instancePath) {
+	const path = instancePath ?? INSTANCE_PATH.exec(symbolId)?.[0] ?? "";
+	if (!path.includes("r:")) return symbolId;
+	return path.replace(ROW_SEGMENT, "") + symbolId.slice(path.length);
+}
+function qualifyingGraph(scoped, graph, qualify) {
+	const outerQualify = graph.marklessQualifyGraphNodeId;
+	const qualified = (method) => (operation) => graph[method].call(graph, {
+		...operation,
+		graphNodeId: qualify(operation.graphNodeId)
+	});
+	return Object.assign(scoped, {
+		marklessQualifyGraphNodeId: (graphNodeId) => outerQualify ? outerQualify(qualify(graphNodeId)) : qualify(graphNodeId),
+		read: (graphNodeId, path) => graph.read(qualify(graphNodeId), path),
+		write: qualified("write"),
+		update: qualified("update"),
+		call: qualified("call"),
+		delete: qualified("delete"),
+		subscribe: qualified("subscribe")
+	});
+}
+const composedSymbols = /* @__PURE__ */ new WeakSet();
+const ISLAND_SEGMENT = /^m\d+:/;
+/**
+* An island's symbol invokes callbacks by ids spelled in the island's own module
+* space, but the page loader that answers them only knows page-space ids, so an
+* id without an island segment is sent back with this island's.
+*/
+function marklessIslandSpacedSymbol(symbol, symbolPrefix) {
+	const island = ISLAND_SEGMENT.exec(symbolPrefix)?.[0];
+	if (!island) return symbol;
+	const spaced = (context) => {
+		const invokeSymbol = context.invokeSymbol;
+		return symbol(invokeSymbol ? {
+			...context,
+			invokeSymbol: (symbolId, invokeContext) => invokeSymbol(ISLAND_SEGMENT.test(symbolId) ? symbolId : island + symbolId, invokeContext)
+		} : context);
+	};
+	if (composedSymbols.has(symbol)) composedSymbols.add(spaced);
+	return spaced;
+}
+function marklessInstanceScopedLoadSymbol(loadSymbol) {
+	return (symbolId) => {
+		const instancePath = INSTANCE_PATH.exec(symbolId)?.[0];
+		if (!instancePath) return loadSymbol(symbolId);
+		return marklessThen(loadSymbol(marklessRowFreeSymbolId(symbolId, instancePath)), (symbol) => scopeSymbol(symbol, instancePath));
+	};
+}
+function scopeSymbol(symbol, instancePath) {
+	if (composedSymbols.has(symbol)) return symbol;
+	const rescope = symbol.marklessRescope;
+	if (rescope) return rescope(instancePath, scopeSymbol);
+	const { marklessScopedBase, marklessScopedPath } = symbol;
+	if (marklessScopedBase && (marklessScopedPath === instancePath || marklessScopedPath === instancePath.replace(ROW_SEGMENT, ""))) return scopeSymbol(marklessScopedBase, instancePath);
+	const scoped = (context) => {
+		const graph = context.graph;
+		return symbol({
+			...context,
+			...graph ? { graph: marklessInstanceScopedGraph(graph, instancePath) } : {},
+			getElementHandle: marklessInstanceScopedElementHandle(context.getElementHandle, instancePath, graph),
+			...context.read && graph ? { read: (graphNodeId, path) => graph.read(marklessComposedGraphNodeId(graphNodeId, instancePath, marklessGraphWidgetRegistry(graph)), path) } : {}
+		});
+	};
+	return Object.assign(scoped, {
+		marklessScopedBase: symbol,
+		marklessScopedPath: instancePath
+	});
+}
+/**
+* A widget-scoped `element()` handle names one element PER RENDERED WIDGET, and
+* its compiled id is one module-level string every instance of that widget
+* spells. Qualifying it exactly as the widget's graph nodes are qualified is
+* what turns it back into a key: the registration and the reading handler both
+* land on the rendered widget's own root path, so a page carrying two instances
+* answers each handler with its own element instead of the last registration.
+*
+* A handle that is not widget-scoped is returned untouched. A component-local
+* handle is already one element per key, and a page-scoped `shared()` graph is
+* page space by design.
+*/
+function marklessWidgetHandleId(handleId, instancePath, registry = marklessWidgetScope.active) {
+	if (!instancePath) return handleId;
+	const pageSpace = PAGE_SPACE_ID.exec(handleId);
+	if (!pageSpace || pageSpace[2] !== "shared") return handleId;
+	return marklessComposedGraphNodeId(handleId, instancePath, registry);
+}
+/**
+* The reading half of the same key.
+*
+* The compiled symbol asks for the module-level id, so the instance it is
+* running in is what has to be added here. Every registration a rendered widget
+* makes is qualified the same way - the page-level ones at composition, the
+* ones an `@if` arm files at resume - so a reader whose instance is named asks
+* the qualified key and nothing else.
+*/
+function marklessInstanceScopedElementHandle(getElementHandle, instancePath, graph) {
+	if (typeof getElementHandle !== "function") return getElementHandle;
+	if (getElementHandle.marklessHandleScope === instancePath) return getElementHandle;
+	const scopedReader = (handleIdOrName) => {
+		const scoped = marklessWidgetHandleId(handleIdOrName, instancePath, graph ? marklessGraphWidgetRegistry(graph) : marklessWidgetScope.active);
+		return scoped === handleIdOrName ? getElementHandle(handleIdOrName) : getElementHandle(scoped);
+	};
+	scopedReader.marklessHandleScope = instancePath;
+	return scopedReader;
+}
+function marklessInstanceScopedGraph(graph, instancePath) {
+	if (!instancePath) return graph;
+	if (graph.marklessInstancePath === instancePath) return graph;
+	const registry = marklessGraphWidgetRegistry(graph);
+	if (!composedRegistryViews.has(registry)) marklessNoteGraphWidgetRoots(registry, graph);
+	const takeWidgetView = () => composedRegistryViews.has(registry) ? registry : composedWidgetRegistryView(registry, instancePath);
+	let widgetView = takeWidgetView();
+	const scoped = qualifyingGraph({
+		...graph,
+		marklessPageGraph: graph.marklessPageGraph ?? graph,
+		marklessInstancePath: instancePath,
+		get marklessComposedWidgets() {
+			return widgetView ??= takeWidgetView();
+		}
+	}, graph, (graphNodeId) => marklessComposedGraphNodeId(graphNodeId, instancePath, registry));
+	if (widgetView) marklessShareWidgetRegistry(scoped, widgetView);
+	return scoped;
+}
+/**
+* The rendered widgets a part reading in THIS scope's LOCAL space can name.
+*
+* A component's compiled parts spell every id against that module's own edges.
+* When the component is itself composed one wrapper deep - its markup projected
+* through another component's children - the family root it composes is filed in
+* the registry at its PAGE path (`c0:p1:c0:`) while the part reads with the
+* module-local path (`c0:p1:p2:p3:`). Neither is a prefix of the other and
+* `widgetRootPathFor` can only chop segments off the right, so every lookup
+* misses, the id stays bare, and the write lands on a node no rendered widget
+* owns. Re-spelling the roots that stand under this adapter's path without it
+* puts reader and registry in one space; the adapter's own rule for an
+* already-prefixed `shared:` id then carries the answer back to page space.
+*
+* Roots OUTSIDE the path are dropped rather than carried through unstripped,
+* because a local path and a page path can spell the same segments: an
+* unstripped entry would answer a local reader with a page root and this adapter
+* would prefix it a second time. An id no root here claims is left bare, which
+* is exactly what hands it back to this adapter, which resolves it as before.
+*/
+function composedWidgetRegistryView(registry, instancePath) {
+	let view;
+	for (const [id, rootPath] of registry.rootPaths) {
+		if (!id.startsWith(instancePath) || !rootPath.startsWith(instancePath)) continue;
+		view ??= {
+			rootPaths: /* @__PURE__ */ new Map(),
+			rowRooted: /* @__PURE__ */ new Set()
+		};
+		marklessNoteWidgetRoot(view, id.slice(instancePath.length), rootPath.slice(instancePath.length));
+	}
+	if (view) composedRegistryViews.add(view);
+	return view;
+}
+const PAGE_SPACE_ID = /^((?:[cpm]\d+:|r:[^:]*:)*)(shared|storage):/;
+/**
+* One registry per RUNTIME GRAPH, and a graph is one rendered page.
+*
+* A widget root path is only ever an answer about the container that rendered
+* it, so a realm-wide map is a category error: two Markless roots on one page
+* each render their own widgets, and a torn-down container's roots must not
+* answer for the render that replaces it. Filing the registry against the graph
+* makes both true by construction - the entries die with the graph, and a
+* lookup can only reach the rendered widgets of the graph it was asked about.
+*
+* The key is the PAGE graph, recovered through `marklessPageGraph`, because
+* every scope adapter below hands its symbol a fresh wrapper object over the
+* same page graph and all of them must reach the same answer.
+*/
+const graphRegistries = /* @__PURE__ */ new WeakMap();
+const composedRegistryViews = /* @__PURE__ */ new WeakSet();
+/**
+* Which registry the lookups below read when the CALLER names no graph.
+*
+* Two readers cannot name one. Inside a compose there is no graph yet, so
+* composition.ts swaps this to the render's own registry and swaps it back.
+* And the generated symbol-resolver module's bound-symbol adapter holds the
+* dispatching graph in a closure it never passes on, so it reaches this field
+* instead - which is why every entry point that DOES hold a graph points this
+* at that graph's registry before running anything (`marklessScopeWidgetsTo`).
+*
+* `composing` is what keeps a dispatch from stealing the field out from under a
+* compose. Only a server ever composes and dispatches at once.
+*/
+const marklessWidgetScope = {
+	active: {
+		rootPaths: /* @__PURE__ */ new Map(),
+		rowRooted: /* @__PURE__ */ new Set()
+	},
+	composing: false
+};
+/**
+* Points the graph-less readers at the registry of the graph now being read.
+*
+* A dispatch is not synchronous, so this is a pointer re-aimed per entry rather
+* than a scope that unwinds: the next entry re-aims it, and a torn-down
+* container's registry is never re-aimed at again. Two containers dispatching
+* async bodies that interleave their writes are the one case it cannot separate
+* - the readers that hold a graph are exact regardless.
+*/
+function marklessScopeWidgetsTo(registry) {
+	if (!marklessWidgetScope.composing) marklessWidgetScope.active = registry;
+	return registry;
+}
+function marklessRegistryHolder(graph) {
+	const scoped = graph;
+	return scoped.marklessPageGraph ?? scoped.marklessWidgetHostGraph ?? graph;
+}
+/**
+* This graph's rendered widgets, minted on first ask and filled from the graph
+* itself: the payload's widget-scoped definitions carry their qualified root ids
+* and the projection sites composition registered them under, which is every
+* answer a lookup needs and the only place resume has ever read them from.
+*/
+function marklessGraphWidgetRegistry(graph) {
+	if (!graph) return marklessWidgetScope.active;
+	const own = graph.marklessComposedWidgets ?? graphRegistries.get(graph);
+	if (own) return marklessScopeWidgetsTo(own);
+	const holder = marklessRegistryHolder(graph);
+	const held = graphRegistries.get(holder);
+	if (held) return marklessScopeWidgetsTo(held);
+	const registry = {
+		rootPaths: /* @__PURE__ */ new Map(),
+		rowRooted: /* @__PURE__ */ new Set()
+	};
+	graphRegistries.set(holder, registry);
+	marklessNoteGraphWidgetRoots(registry, graph);
+	return marklessScopeWidgetsTo(registry);
+}
+function marklessShareWidgetRegistry(graph, registry) {
+	graphRegistries.set(graph, registry);
+}
+function marklessNoteGraphWidgetRoots(registry, graph) {
+	for (const definition of graph.listSharedDefinitions?.() ?? []) if (definition.scope === "widget") {
+		const rootPath = marklessInstancePath(definition.id);
+		marklessNoteWidgetRoot(registry, definition.id, rootPath);
+		for (const projectionId of definition.projectionIds ?? []) marklessNoteWidgetRoot(registry, projectionId, rootPath);
+	}
+}
+function marklessNoteWidgetRoot(registry, id, rootPath) {
+	registry.rootPaths.set(id, rootPath);
+	if (rootPath.includes("r:")) registry.rowRooted.add(id.slice(marklessInstancePath(id).length));
+}
+/**
+* The rendered widgets a client-minted repeat row is standing INSIDE.
+*
+* A minted row composes alone, so the registry that render builds holds only the
+* roots the row itself is. A part reading a widget rooted in an ancestor - the
+* collection the repeat iterates, most of all - would find nothing and mint a
+* second instance of it, whose writes no served node ever sees. The mint reads
+* the live page's roots off its graph and installs them here for the row's
+* render; the `rowSegment` guard is what keeps a render running beside it from
+* reading the answer, the same separation `marklessWidgetScope` settles for.
+*/
+const enclosingWidgetScope = {
+	rowSegment: "",
+	roots: void 0
+};
+function enclosingRootPathFor(graphNodeId, roots) {
+	return byDefinition(graphNodeId, (key) => roots.get(key));
+}
+/**
+* The same question asked of a path that may carry rows the ROOT does not.
+*
+* One root per rendered widget means a root inside a repeat is registered under
+* its row and a root outside one is registered without any - but a part
+* projected INTO an outside root from inside the repeat carries the row in its
+* own path regardless. The walk below chops segments off the right, so a leading
+* `r:<key>:` blocks it from ever reaching that root. Rows are asked first, so a
+* per-row root always wins over the row-free reading; only a path no rendered
+* row answers is asked again with its rows dropped.
+*/
+function marklessWidgetRootPathThroughRows(graphNodeId, instancePath, registry) {
+	const withRows = widgetRootPathFor(graphNodeId, instancePath, registry);
+	if (withRows !== void 0) return withRows;
+	const rowFree = instancePath.replace(ROW_SEGMENT, "");
+	if (rowFree === instancePath) return "";
+	return widgetRootPathFor(graphNodeId, rowFree, registry) ?? "";
+}
+/**
+* The two spellings of one containment, and the one that has to wait for a row.
+*
+* A widget root is filed under the path it RENDERED at, rows and all
+* (`r:page%3A5:c0:p2:`). A dispatching bound symbol runs at the compose tree's
+* path for that same containment, which names the component edges and no row
+* (`c0:p2:p3:`) - a bound symbol is minted per edge, and a row key is a runtime
+* value no symbol id can hold. Neither spelling is a prefix of the other, so the
+* walk above can never get from one to the other on its own.
+*
+* Leaving the id in page space here is what breaks the projection bridge: the
+* write lands on an id no rendered widget owns, the record matches, the symbol
+* runs, and nothing moves. Keeping the reading path ON the id instead hands the
+* question to `marklessRowWidgetGraphNodeId`, which is spelled for exactly this
+* input - it holds the dispatched record's rows and re-asks the registry with
+* them, reaching the ONE root this row rendered. An alias resolved at lookup,
+* never a second registry entry, so one containment still yields one instance.
+*
+* Two guards keep that from minting a phantom instance instead. The path must
+* carry no row of its own, because a path that already names its rows and STILL
+* found no root is not waiting on one. And the definition must be one some row
+* really did root: an id belonging to no widget at all - a page-scoped
+* `shared()` graph, a storage slot - is page space and stays exactly as spelled.
+*/
+function marklessUnresolvedWidgetGraphNodeId(graphNodeId, instancePath, registry) {
+	const rowRooted = registry.rowRooted;
+	if (instancePath.includes("r:") || rowRooted.size === 0) return graphNodeId;
+	return byDefinition(graphNodeId, (key) => rowRooted.has(key) || void 0) ? instancePath + graphNodeId : graphNodeId;
+}
+function widgetRootPathFor(graphNodeId, instancePath, registry) {
+	const widgetRootPaths = registry.rootPaths;
+	if (widgetRootPaths.size === 0) return void 0;
+	for (let end = instancePath.length; end > 0; end--) {
+		if (instancePath[end - 1] !== ":") continue;
+		const prefix = instancePath.slice(0, end);
+		const rootPath = byDefinition(graphNodeId, (key) => widgetRootPaths.get(prefix + key));
+		if (rootPath !== void 0) return rootPath;
+	}
+}
+function byDefinition(id, lookup) {
+	const slash = id.lastIndexOf("/");
+	return lookup(id) ?? (slash > 0 ? lookup(id.slice(0, slash)) : void 0);
+}
+function marklessComposedGraphNodeId(graphNodeId, instancePath, registry = marklessWidgetScope.active) {
+	if (!instancePath) return graphNodeId;
+	const pageSpace = PAGE_SPACE_ID.exec(graphNodeId);
+	if (!pageSpace) return instancePath + graphNodeId;
+	if (pageSpace[2] === "storage") return graphNodeId;
+	if (pageSpace[1]) {
+		const sharedId = graphNodeId.slice(pageSpace[1].length);
+		return ((!pageSpace[1].includes("r:") && instancePath.includes("r:") ? widgetRootPathFor(sharedId, instancePath + pageSpace[1], registry) : void 0) ?? instancePath + pageSpace[1]) + sharedId;
+	}
+	const rootPath = marklessWidgetRootPathThroughRows(graphNodeId, instancePath, registry);
+	if (rootPath) return rootPath + graphNodeId;
+	const enclosing = enclosingWidgetScope.roots && instancePath.startsWith(enclosingWidgetScope.rowSegment) ? enclosingRootPathFor(graphNodeId, enclosingWidgetScope.roots) : void 0;
+	if (enclosing) return enclosing + graphNodeId;
+	return marklessUnresolvedWidgetGraphNodeId(graphNodeId, instancePath, registry);
+}
+//#endregion
+//#region ../web/src/fns/projection-html.ts
+const PROJECTION_MARK_PREFIX = "<!--markless-projection:";
+//#endregion
+//#region ../web/src/prerender/shared-seed-slot.ts
+/**
+* The seed-map key a widget root's instance token travels under, restating
+* MARKLESS_WIDGET_INSTANCE_KEY in @markless/compiler (public-render's
+* residue-reader) so the browser never imports the compiler. It is not a graph
+* node id: it names WHICH rendered widget the parts seeded from this map belong
+* to, which is what a shared() element() handle's minted id has to carry.
+* shared-seed-widget.test.ts pins this spelling; element-handle-idref.test.ts
+* proves the two sides agree end to end.
+*/
+const MARKLESS_WIDGET_INSTANCE_KEY = "markless:widget-instance";
+/**
+* The same token, filed PER shared definition.
+*
+* One element can carry handles declared by two different widget families - a
+* radio item's own field handle and the group's set, a tree label's item handle
+* and the root's - so "which rendered widget am I inside" has no single answer
+* on that element. It has one answer per DEFINITION, which is what the reading
+* handle names: a handle's graph node id is `<definitionId>/element:<name>`, so
+* the mint asks for its own family's token and gets the instance the handle was
+* DECLARED in, never whichever family last seeded this scope.
+*
+* The plain key above stays filed too: a page with one widget family reads it
+* exactly as before, and it is the fallback when no per-definition token exists.
+*/
+function marklessWidgetInstanceKey(definitionId) {
+	return `${MARKLESS_WIDGET_INSTANCE_KEY}|${definitionId}`;
+}
+/**
+* Where a part stands in its family's roster, answered for the two regimes that
+* ask it: at render there is no DOM, so the answer is the order this widget
+* instance EMITS its members; after resume the roster is live, so the answer is
+* its document order. The compiler lowers `roster.indexOf(mine)` to one call in
+* each regime with the same two node ids, so the two cannot disagree.
+*/
+/**
+* The seed-map key this render's position counter travels under. The seed map
+* is the one channel that reaches both the compiled SSR child render and the
+* CSR component evaluation, and it already carries the widget-instance token a
+* position counts within.
+*/
+const MARKLESS_ROSTER_POSITIONS_KEY = "markless:roster-positions";
+function marklessRosterPositions(seeds) {
+	const held = seeds?.get(MARKLESS_ROSTER_POSITIONS_KEY);
+	return held && typeof held === "object" ? held : void 0;
+}
+/** The render's seed map with a counter filed on it, minted once per render. */
+function marklessRosterPositionSeeds(seeds) {
+	if (marklessRosterPositions(seeds)) return seeds;
+	const filed = new Map(seeds ?? []);
+	filed.set(MARKLESS_ROSTER_POSITIONS_KEY, { taken: /* @__PURE__ */ new Map() });
+	return filed;
+}
+/**
+* Which rendered widget a roster belongs to, asked of its own family exactly as
+* a minted handle id asks it: a handle's graph node id carries a module path, so
+* the family is everything up to the LAST slash.
+*/
+function rosterInstance(scope, rosterGraphNodeId) {
+	const family = rosterGraphNodeId.slice(0, rosterGraphNodeId.lastIndexOf("/"));
+	return scope?.get(marklessWidgetInstanceKey(family)) ?? scope?.get("markless:widget-instance");
+}
+/**
+* The nth member of this instance's roster to ask is the nth in it.
+*
+* Render walks a widget instance in document order, so counting the asks IS
+* that order — there is no DOM yet to compare against. The count is per widget
+* instance, which is what keeps a second collection on the page starting at
+* zero.
+*/
+function renderRosterPosition(positions, seeds, rosterGraphNodeId, handleGraphNodeId) {
+	const instance = rosterInstance(seeds ?? positions.seeds, rosterGraphNodeId);
+	const key = `${String(instance)}|${rosterGraphNodeId}|${handleGraphNodeId}`;
+	const ledger = positions.seeding ?? positions.taken;
+	const taken = ledger.get(key) ?? 0;
+	ledger.set(key, taken + 1);
+	return taken;
+}
+/**
+* How many parts this instance puts in the roster - asked, unlike a position,
+* by a part that may render BEFORE the members it is counting. The root asking
+* `ui-max` is exactly that: server render is one forward pass.
+*
+* So the ask does not answer. It writes a placeholder naming the roster's own
+* registration key — the widget instance's path then the module-level handle id,
+* which is how marklessWidgetHandleId qualifies it at composition — and the
+* surface resolves it once composition has made the count a fact.
+*/
+function renderRosterCount(positions, seeds, rosterGraphNodeId) {
+	const instance = rosterInstance(seeds ?? positions.seeds, rosterGraphNodeId);
+	const key = (typeof instance === "string" ? instance : "") + rosterGraphNodeId;
+	positions.counted = true;
+	return "" + key + "";
+}
+/**
+* The two roster questions a derive may ask at render time, on one context.
+* Every render-side evaluation site hands the symbol this same object, so a
+* compiled call cannot reach a regime that answers only one of them.
+*/
+function marklessRosterRenderContext(positions, seeds) {
+	if (!positions) return {};
+	return {
+		rosterPosition: (roster, handle) => renderRosterPosition(positions, seeds, roster, handle),
+		rosterCount: (roster) => renderRosterCount(positions, seeds, roster),
+		deferCount: (thunk) => positions.counted ? "" + String((positions.deferred ??= []).push(thunk) - 1) + "" : thunk(resolvedCount)
+	};
+}
+function resolvedCount(value) {
+	if (typeof value !== "number") throw new Error("MARKLESS_ROSTER_COUNT_UNRESOLVED");
+	return value;
+}
+//#endregion
+//#region ../web/src/ssr-data/renderer.ts
+const projectionSpans = /* @__PURE__ */ new Map();
+let nextProjectionKey = 0;
+function openProjectionSpan(tokens) {
+	const key = String(nextProjectionKey++);
+	const span = {
+		key,
+		mark: `${PROJECTION_MARK_PREFIX}${key}-->`,
+		tokens,
+		consumed: false
+	};
+	projectionSpans.set(key, span);
+	return span;
+}
+/**
+* Runs one child render with a projection's token span registered, for a caller
+* that places a projection itself rather than through `renderChunk` - the client
+* mint of a `@for` row whose component projects children. `consumed` answers
+* whether the child's own `{children}` slot reported the span back.
+*/
+function withProjectionSpan(tokens, render) {
+	const span = openProjectionSpan(tokens);
+	const release = () => projectionSpans.delete(span.key);
+	let rendered;
+	try {
+		rendered = render(span.mark);
+	} catch (error) {
+		release();
+		throw error;
+	}
+	return marklessSettled(rendered, release, (result) => ({
+		result,
+		consumed: span.consumed
+	}));
+}
+//#endregion
+//#region ../web/src/fns/roster-position.ts
+/**
+* The server render context with the roster channels on it. One counter per
+* render, held by the closure rather than by a module, so two page renders in
+* one process never share a count.
+*/
+function marklessSsrRosterPositionContext(renderContext) {
+	const context = renderContext ?? {};
+	if (typeof context.rosterPosition === "function") return renderContext;
+	const sharedSeeds = marklessRosterPositionSeeds(context.sharedSeeds);
+	return {
+		...context,
+		sharedSeeds,
+		...marklessRosterRenderContext(marklessRosterPositions(sharedSeeds), void 0)
+	};
+}
+//#endregion
+//#region ../web/src/prerender/island-roster.ts
+/** The counts and count-spending expressions one island minted, made numbers. */
+async function marklessSsrIslandRosterAnswered(renderContext, surface) {
+	const positions = marklessRosterPositions(renderContext?.sharedSeeds);
+	if (!positions?.counted) return surface;
+	const roster = await globalThis.__marklessRosterResume?.();
+	if (!roster) throw new Error("MARKLESS_ROSTER_COUNT_UNRESOLVED");
+	return roster.marklessResolveRosterCounts(roster.marklessResolveDeferredCounts(surface, positions.deferred ?? []));
+}
+//#endregion
+//#region ../web/src/resume-anchor-census.ts
+function isArmBranchAnchorComment(comment) {
+	const text = comment.data ?? comment.textContent ?? "";
+	return text.startsWith("markless:arm-branch:") || text.startsWith("/markless:arm-branch:");
+}
+//#endregion
+//#region ../web/src/fns/scalar-specialized.ts
+const e = (c, s) => {
+	throw Object.assign(Error(c), {
+		code: c,
+		site: s
+	}, c === "MARKLESS_PAYLOAD_INVALID" ? { docsUrl: "https://markless.dev/errors/MARKLESS_PAYLOAD_INVALID" } : {});
+};
+const marklessDecodeScalarCell = (c, g, s) => {
+	const u = c?.valueKind === "unknown";
+	try {
+		const v = c?.value, r = v?.root;
+		if (!c || c.graphNodeId !== g || c.valueKind !== "scalar" && !u || v?.version !== 1 || v.records?.length !== 0) e("MARKLESS_PAYLOAD_INVALID", s);
+		if (r == null || typeof r !== "object") return r;
+		if (r.$type === "undefined") return void 0;
+		if (r.$type === "bigint") return BigInt(r.value);
+		if (r.$type === "number") return Number(r.value);
+		if (r.$type === "date") {
+			const d = new Date(r.value);
+			if (!Number.isNaN(d.getTime())) return d;
+		}
+	} catch {}
+	e(u ? "MARKLESS_SCALAR_SPECIALIZED_ESCALATE" : "MARKLESS_PAYLOAD_INVALID", s);
+};
+//#endregion
+//#region ../web/src/fns/dom-order.ts
+const marklessFindElementAtDomOrderIndex = (r, i) => {
+	let c = r.__marklessCensus;
+	if (!c) {
+		const w = document.createTreeWalker(r, 1);
+		c = r.__marklessCensus = r.nodeType === 1 ? [r] : [];
+		for (let n; n = w.nextNode();) c.push(n);
+	}
+	return c[i];
+};
+//#endregion
+//#region src/vite/runtime/mdx-scalar.ts
+async function tryResumeMdxScalar(input, loadPlan, loadSymbol) {
+	const { root, event, element } = input;
+	if (root.__asyncResumeRuntimeStarted || root.isConnected === false || !element) return false;
+	if (root.querySelector("[overlay]:not([hidden])") || root.ownerDocument?.querySelector("script[type=\"markless/arm\"],script[type=\"markless/state-patch\"]")) return false;
+	let payload = payloads.get(root);
+	if (!payload) {
+		const state = readScript(root, "markless/state");
+		const view = readScript(root, "markless/view");
+		if (!state || !view || state.version !== protocolStateVersion(state.storage) || view.version !== 1) return false;
+		payload = {
+			state,
+			view,
+			plans: /* @__PURE__ */ new Map()
+		};
+		payloads.set(root, payload);
+	}
+	if (event !== 0 && !input.eventRecord && payload.view.events.some((record) => {
+		if (record.eventName !== event.type) return false;
+		const host = locate(root, payload.view, record.hostNodeId);
+		return host === element || host?.contains(element);
+	})) return false;
+	const priming = event === 0 || !input.eventRecord && (event.type === "focusin" || element.tagName === "BUTTON" && (event.type === "keydown" || event.type === "keyup") && (event.key === "Enter" || event.key === " "));
+	const record = priming ? payload.view.events.find((record) => record.eventName !== "visible" && locate(root, payload.view, record.hostNodeId) === element) : input.eventRecord;
+	if (!record) return false;
+	if (!priming && event.type !== record.eventName) return false;
+	if (!priming && event.bubbles === false && event.target !== element) return false;
+	if (payload.view.behaviors.some((behavior) => {
+		const host = locate(root, payload.view, behavior.hostNodeId);
+		return !host || host === element || host.contains(element);
+	})) return false;
+	const path = [{
+		record,
+		element
+	}];
+	if (!priming && event.bubbles !== false && !input.propagationStopped && !event.cancelBubble && element !== root) {
+		const candidates = payload.view.events.filter((record) => record.eventName === event.type).map((record) => ({
+			record,
+			element: locate(root, payload.view, record.hostNodeId)
+		}));
+		if (candidates.some((candidate) => !candidate.element)) return false;
+		for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+			const record = candidates.find((candidate) => candidate.element === ancestor)?.record;
+			if (record) path.push({
+				record,
+				element: ancestor
+			});
+			if (ancestor === root) break;
+		}
+	}
+	const actions = [];
+	for (const matched of path) {
+		const record = matched.record;
+		if (record.action || record.symbolIds.length !== 1 || record.syncPolicy && !priming && (matched !== path[0] || !input.syncPolicyAlreadyApplied)) return false;
+		const symbolId = record.symbolIds[0];
+		const key = record.hostNodeId + "\n" + record.eventName + "\n" + symbolId;
+		let prepared = payload.plans.get(key);
+		if (prepared === void 0) {
+			const action = await loadPlan(symbolId);
+			prepared = action ? prepare(root, payload, action, record) : null;
+			payload.plans.set(key, prepared);
+		}
+		if (!prepared || prepared.element !== matched.element || prepared.element.isConnected === false || prepared.targets.some((target) => target.element.isConnected === false)) return false;
+		actions.push({
+			symbolId,
+			prepared
+		});
+	}
+	if (priming) return true;
+	for (const action of actions) {
+		const symbol = await loadSymbol(action.symbolId);
+		if (isDetached(root)) return true;
+		if (await runScalar(root, event, action.prepared, symbol)) break;
+	}
+	return true;
+}
+async function runScalar(root, event, prepared, symbol) {
+	const values = root.__marklessEventOnlyGraph ?? /* @__PURE__ */ new Map();
+	let value = values.has(prepared.cell) ? values.get(prepared.cell) : prepared.initial;
+	const previous = value;
+	const check = (id, path) => {
+		if (id !== prepared.cell || path?.length) throw new Error("MARKLESS_SCALAR_PLAN_MISMATCH");
+	};
+	const result = symbol({
+		graph: {
+			read(id, path) {
+				check(id, path);
+				return value;
+			},
+			write(write) {
+				check(write.graphNodeId, write.path);
+				value = write.value;
+			},
+			update(update) {
+				check(update.graphNodeId, update.path);
+				const old = value;
+				value = update.update(value);
+				return update.returnValue === "previous" ? old : update.returnValue === "next" ? value : void 0;
+			}
+		},
+		event,
+		element: prepared.element,
+		getElementHandle: () => void 0
+	});
+	const stopped = event.cancelBubble;
+	await result;
+	values.set(prepared.cell, value);
+	root.__marklessEventOnlyGraph = values;
+	if (!Object.is(previous, value)) for (const target of prepared.targets) target.element.textContent = target.prefix + (value == null ? "" : String(value)) + target.suffix;
+	return stopped || event.cancelBubble;
+}
+const payloads = /* @__PURE__ */ new WeakMap();
+function prepare(root, { state, view }, action, record) {
+	const { plan, scope } = action;
+	if (plan.kind !== "scalar" || !scope || protocolInstancePath(scope) !== scope || protocolInstanceQualifies(plan.cell) !== true) return null;
+	const cell = scope + plan.cell;
+	if (scope + action.hostNodeId !== record.hostNodeId || action.eventName !== record.eventName || scope + plan.symbolId !== record.symbolIds[0]) return null;
+	const servedEvent = view.events.find((event) => event.hostNodeId === record.hostNodeId && event.eventName === record.eventName);
+	if (!servedEvent || servedEvent.symbolIds.length !== 1 || servedEvent.symbolIds[0] !== record.symbolIds[0]) return null;
+	const cells = state.cells.filter((candidate) => candidate.graphNodeId === cell);
+	if (cells.length !== 1 || cells[0].valueKind !== "scalar") return null;
+	const updates = view.domUpdates.filter((update) => update.graphNodeId === cell);
+	if (!updates.length || updates.length !== plan.textUpdates.length) return null;
+	const { cells: _cells, ...stateDependencies } = state;
+	const { domUpdates: _updates, ...viewDependencies } = view;
+	if (references(stateDependencies, cell) || references(viewDependencies, cell)) return null;
+	const element = locate(root, view, record.hostNodeId);
+	if (!element) return null;
+	const targets = [];
+	for (const expected of plan.textUpdates) {
+		const update = updates.find((candidate) => candidate.hostNodeId === scope + expected.hostNodeId && candidate.symbolId === scope + expected.symbolId);
+		if (!update || scope + expected.graphNodeId !== cell || update.path.length || update.target?.kind !== "text" || update.target.trueValue !== void 0 || update.target.falseValue !== void 0 || (update.target.prefix ?? "") !== (expected.prefix ?? "") || (update.target.suffix ?? "") !== (expected.suffix ?? "")) return null;
+		const target = locate(root, view, update.hostNodeId);
+		if (!target) return null;
+		targets.push({
+			element: target,
+			prefix: expected.prefix ?? "",
+			suffix: expected.suffix ?? ""
+		});
+	}
+	return {
+		cell,
+		initial: marklessDecodeScalarCell(cells[0], cell, "mdx-scalar"),
+		element,
+		targets
+	};
+}
+function locate(root, view, host) {
+	const locator = view.locators.find((locator) => locator.hostNodeId === host);
+	if (!locator || locator.strategy !== "dom-order") return null;
+	const element = marklessFindElementAtDomOrderIndex(root, locator.index);
+	return element?.tagName.toLowerCase() === locator.tagName.toLowerCase() ? element : null;
+}
+function readScript(root, type) {
+	const text = root.querySelector(`script[type="${type}"]`)?.textContent;
+	return text ? JSON.parse(text) : void 0;
+}
+function references(value, id) {
+	return value === id || !!value && typeof value === "object" && Object.values(value).some((child) => references(child, id));
+}
+function isDetached(root) {
+	return root.isConnected === false;
 }
 //#endregion
 //#region src/vite/runtime/mdx-route.ts
@@ -120,14 +871,34 @@ function createMdxRenderDataSurface(parts, children) {
 		imports: Object.fromEntries(children.flatMap((child) => child.surface.rootComponentName ? [[child.surface.rootComponentName, child.surface]] : []))
 	};
 }
-async function renderMdxChild(children, component, props, child) {
-	const output = await component.renderSsr?.(props);
+async function renderMdxChild(children, component, props, child, pageRenderContext) {
+	const storageValue = pageRenderContext?.[STORAGE_RENDER_CONTEXT_READER];
+	const renderContext = marklessSsrRosterPositionContext({
+		elementIdScope: child.hostPrefix,
+		...storageValue ? { [STORAGE_RENDER_CONTEXT_READER]: storageValue } : {}
+	});
+	const rendered = await renderWithMdxChildren(component, props, child, renderContext);
+	const output = rendered && typeof rendered.html === "string" ? await marklessSsrIslandRosterAnswered(renderContext, rendered) : rendered;
 	if (output) children.push({
 		...child,
 		output
 	});
 	return output?.html ?? "";
 }
+async function renderWithMdxChildren(component, props, child, renderContext) {
+	const tags = child.childrenElementTags;
+	const childrenHtml = props?.children;
+	if (!tags?.length || typeof childrenHtml !== "string") return component.renderSsr?.(props, renderContext);
+	const { result } = await withProjectionSpan(tags.map((tagName, index) => ({
+		kind: "element",
+		hostNodeId: `__mdx:children:${index}`,
+		tagName
+	})), (mark) => component.renderSsr?.({
+		...props,
+		children: mark + childrenHtml
+	}, renderContext));
+	return result;
+}
 function composeMdxState(children) {
 	const childStates = children.map((child) => ({
 		child,
@@ -137,62 +908,285 @@ function composeMdxState(children) {
 	const storage = childStates.flatMap(({ state }) => state.storage ?? []);
 	return {
 		version: protocolStateVersion(storage),
-		cells: childStates.flatMap(({ state }) => state.cells ?? []),
-		computed: childStates.flatMap(({ child, state }) => (state.computed ?? []).map((record) => prefixMdxComputedRecord(record, child))),
-		...childStates.some(({ state }) => state.sharedDefinitions?.length) ? { sharedDefinitions: childStates.flatMap(({ state }) => state.sharedDefinitions ?? []) } : {},
+		cells: childStates.flatMap(({ child, state }) => {
+			const island = islandScope(child, state);
+			return (state.cells ?? []).map((cell) => islandScopedGraphRecord(cell, island));
+		}),
+		computed: childStates.flatMap(({ child, state }) => {
+			const island = islandScope(child, state);
+			return (state.computed ?? []).map((record) => ({
+				...islandScopedGraphRecord(record, island),
+				...record.dependencies ? { dependencies: record.dependencies.map((read) => islandScopedGraphRecord(read, island)) } : {},
+				...record.deriveSymbolId ? { deriveSymbolId: child.symbolPrefix + record.deriveSymbolId } : {}
+			}));
+		}),
+		...childStates.some(({ state }) => state.sharedSeeds?.length) ? { sharedSeeds: childStates.flatMap(({ child, state }) => {
+			const island = islandScope(child, state);
+			return (state.sharedSeeds ?? []).map((seed) => ({
+				...islandScopedGraphRecord(seed, island),
+				deriveSymbolId: child.symbolPrefix + seed.deriveSymbolId,
+				...seed.dependencies ? { dependencies: seed.dependencies.map((dependency) => ({
+					...islandScopedGraphRecord(dependency, island),
+					...dependency.reads ? { reads: islandScopedGraphRecord(dependency.reads, island) } : {}
+				})) } : {}
+			}));
+		}) } : {},
+		...childStates.some(({ state }) => state.sharedDefinitions?.length) ? { sharedDefinitions: childStates.flatMap(({ child, state }) => {
+			const island = islandScope(child, state);
+			return (state.sharedDefinitions ?? []).map((definition) => islandScopedSharedDefinition(definition, island));
+		}) } : {},
 		...storage.length > 0 ? { storage } : {}
 	};
 }
-function composeMdxView(parts, children, initialElementOffset) {
-	const childViews = children.map((child) => ({
+function islandScope(child, state) {
+	const prefix = child.symbolPrefix;
+	return {
+		segment: prefix && protocolInstancePath(prefix) === prefix ? prefix : "",
+		widgetDefinitionIds: new Set((state.sharedDefinitions ?? []).filter((definition) => definition.scope === "widget").map((definition) => definition.id))
+	};
+}
+/**
+* Which of a child's ids belong to the island, and which are the whole page's.
+*
+* Two islands of one component compose from their own roots, so both spell the
+* same `c`/`p` path and their cells, computeds and element-handle rosters land
+* on one node unless the island segment separates them. What must NOT take the
+* segment is the page-space families that mean one node per page on purpose: a
+* `scope: 'page' | 'container' | 'request'` shared() graph and a storage slot
+* are shared BETWEEN islands, and prefixing them gives each island a private
+* copy of state the author asked to be common.
+*
+* A widget-scoped shared() id is the exception inside the exception — one graph
+* per rendered widget, so it is the island's — and a bare one (no path, because
+* no registered widget root claimed it at compose) is recognised by asking the
+* child's own definitions which scope it was declared at.
+*/
+function islandScopedGraphNodeId(graphNodeId, island) {
+	if (!island.segment) return graphNodeId;
+	if (protocolInstancePath(graphNodeId)) return island.segment + graphNodeId;
+	if (protocolInstanceQualifies(graphNodeId) !== false) return island.segment + graphNodeId;
+	const slash = graphNodeId.lastIndexOf("/");
+	return island.widgetDefinitionIds.has(graphNodeId) || slash > 0 && island.widgetDefinitionIds.has(graphNodeId.slice(0, slash)) ? island.segment + graphNodeId : graphNodeId;
+}
+/**
+* The registering half of a handle key, mirrored on the reading half.
+*
+* Resume re-spells only a widget-scoped `shared:` handle id per rendered widget;
+* a component-local handle is already one element per key and the reading symbol
+* asks for it exactly as its module compiled it. Segmenting that second kind
+* here would file it under a key nothing ever asks for.
+*/
+function islandScopedHandleId(handleId, island) {
+	return protocolInstanceQualifies(handleId) !== false ? handleId : islandScopedGraphNodeId(handleId, island);
+}
+function islandScopedGraphRecord(record, island) {
+	return record.graphNodeId ? {
+		...record,
+		graphNodeId: islandScopedGraphNodeId(record.graphNodeId, island)
+	} : record;
+}
+function islandScopedSharedDefinition(definition, island) {
+	const scoped = (id) => islandScopedGraphNodeId(id, island);
+	return {
+		...definition,
+		id: scoped(definition.id),
+		...definition.graphNodeIds ? { graphNodeIds: definition.graphNodeIds.map(scoped) } : {},
+		...definition.projectionIds ? { projectionIds: definition.projectionIds.map(scoped) } : {},
+		...definition.returnProperties ? { returnProperties: definition.returnProperties.map((property) => islandScopedGraphRecord(property, island)) } : {}
+	};
+}
+function composeMdxView(parts, children, initialElementOffset, initialCommentOffset = 0) {
+	const childCensus = children.map((child) => ({
 		...child,
 		view: child.output?.view,
-		hostCount: child.output?.view?.locators?.length ?? 0
-	})).filter((child) => Boolean(child.view));
-	if (childViews.length === 0) return;
-	const childByIndex = new Map(childViews.map((child) => [child.componentIndex, child]));
+		census: mdxRenderedCensus(child.output)
+	}));
+	const firstView = childCensus.find((child) => child.view)?.view;
+	if (!firstView) return;
+	const childByIndex = new Map(childCensus.map((child) => [child.componentIndex, child]));
 	const locators = [];
 	const events = [];
 	const domUpdates = [];
 	const behaviors = [];
 	const elementHandles = [];
+	const keyedRepeats = [];
+	const branches = [];
+	const asyncBoundaries = [];
+	const asyncRunners = {};
 	let elementOffset = initialElementOffset;
+	let commentOffset = initialCommentOffset;
 	for (const part of parts) {
 		if (part.kind === "html") {
 			elementOffset += part.elementCount;
+			commentOffset += part.commentCount ?? 0;
 			continue;
 		}
 		const child = childByIndex.get(part.componentIndex);
 		if (!child) continue;
-		appendMdxChildView({
+		if (child.view) appendMdxChildView({
 			child,
 			elementOffset,
+			commentOffset,
 			locators,
 			events,
 			domUpdates,
 			behaviors,
-			elementHandles
+			elementHandles,
+			keyedRepeats,
+			branches,
+			asyncBoundaries,
+			asyncRunners
 		});
-		elementOffset += child.hostCount;
+		elementOffset += child.census.elements;
+		commentOffset += child.census.comments;
 	}
 	locators.sort((a, b) => a.index - b.index);
 	return {
-		version: childViews[0].view.version,
+		version: firstView.version,
 		locators,
 		events,
 		domUpdates,
 		behaviors,
 		elementHandles,
-		asyncBoundaries: []
+		...keyedRepeats.length > 0 ? { keyedRepeats } : {},
+		...branches.length > 0 ? { branches } : {},
+		asyncBoundaries,
+		...Object.keys(asyncRunners).length > 0 ? { asyncRunners } : {}
+	};
+}
+/**
+* The tally the client keeps of one island's markup.
+*
+* Resume pins a depth-first census of every element under the container and
+* resolves each locator by its index into it, and it walks comments the same
+* way for anchors, so both offsets have to be counted the way the DOM counts
+* them or a later island's records land on the wrong nodes.
+*/
+function mdxRenderedCensus(output) {
+	if (!output) return {
+		elements: 0,
+		comments: 0
+	};
+	if (output.root) return mdxDomCensus(output.root);
+	const scanned = typeof output.html === "string" ? mdxHtmlCensus(output.html) : void 0;
+	return {
+		elements: typeof output.elementCount === "number" ? output.elementCount : scanned?.elements ?? 0,
+		comments: scanned?.comments ?? 0
+	};
+}
+function mdxDomCensus(root) {
+	let elements = 0;
+	let comments = 0;
+	(function visit(node) {
+		if (node.nodeType === 1) elements++;
+		else if (node.nodeType === 8 && !isArmBranchAnchorComment({
+			nodeType: 8,
+			data: node.data
+		})) comments++;
+		for (const child of Array.from(node.childNodes ?? [])) visit(child);
+	})(root);
+	return {
+		elements,
+		comments
+	};
+}
+const MDX_RAW_TEXT_TAGS = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"textarea",
+	"title"
+]);
+function mdxHtmlCensus(html) {
+	let elements = 0;
+	let comments = 0;
+	let templateDepth = 0;
+	let at = 0;
+	while (at < html.length) {
+		const open = html.indexOf("<", at);
+		if (open < 0) break;
+		if (html.startsWith("<!--", open)) {
+			const close = html.indexOf("-->", open + 4);
+			const text = html.slice(open + 4, close < 0 ? html.length : close);
+			if (templateDepth === 0 && !isArmBranchAnchorComment({
+				nodeType: 8,
+				data: text
+			})) comments++;
+			at = close < 0 ? html.length : close + 3;
+			continue;
+		}
+		if (html[open + 1] === "!" || html[open + 1] === "?") {
+			at = mdxTagEnd(html, open);
+			continue;
+		}
+		const closing = html[open + 1] === "/";
+		const name = mdxTagName(html, open + (closing ? 2 : 1));
+		if (!name) {
+			at = open + 1;
+			continue;
+		}
+		const tagEnd = mdxTagEnd(html, open);
+		at = tagEnd;
+		if (closing) {
+			if (name === "template" && templateDepth > 0) templateDepth--;
+			continue;
+		}
+		if (templateDepth === 0) elements++;
+		if (html.slice(open, tagEnd).trimEnd().endsWith("/>")) continue;
+		if (name === "template") templateDepth++;
+		else if (MDX_RAW_TEXT_TAGS.has(name)) {
+			const close = html.toLowerCase().indexOf(`</${name}`, tagEnd);
+			at = close < 0 ? html.length : close;
+		}
+	}
+	return {
+		elements,
+		comments
 	};
 }
+function mdxTagName(html, at) {
+	let end = at;
+	while (end < html.length && !/[\s/>]/.test(html[end])) end++;
+	const name = html.slice(at, end).toLowerCase();
+	return /^[a-z][a-z0-9:-]*$/.test(name) ? name : "";
+}
+function mdxTagEnd(html, at) {
+	let quote = "";
+	for (let index = at + 1; index < html.length; index++) {
+		const character = html[index];
+		if (quote) {
+			if (character === quote) quote = "";
+			continue;
+		}
+		if (character === "\"" || character === "'") quote = character;
+		else if (character === ">") return index + 1;
+	}
+	return html.length;
+}
 function loadMdxSymbol(symbolId, children, loaders) {
-	for (const child of children) if (symbolId.startsWith(child.symbolPrefix) && child.output?.loadSymbol) return child.output.loadSymbol(symbolId.slice(child.symbolPrefix.length));
-	for (const loader of loaders) if (symbolId.startsWith(loader.prefix)) return loader.loadSymbol(symbolId);
+	for (const child of children) {
+		if (!symbolId.startsWith(child.symbolPrefix)) continue;
+		const load = child.output?.loadSymbol?.bind(child.output);
+		if (load) return loadScopedMdxSymbol(symbolId, child.symbolPrefix, load);
+	}
+	for (const loader of loaders) if (symbolId.startsWith(loader.prefix)) return loadScopedMdxSymbol(symbolId, loader.prefix, (id) => loader.loadSymbol(loader.prefix + id));
 	return Promise.reject(/* @__PURE__ */ new Error(`Unknown Markless MDX symbol ${symbolId}`));
 }
+function loadScopedMdxSymbol(symbolId, prefix, load) {
+	const loadChildLocal = ((childSymbolId) => marklessThen(load(childSymbolId.slice(prefix.length)), (symbol) => marklessIslandSpacedSymbol(symbol, prefix)));
+	return marklessInstanceScopedLoadSymbol(loadChildLocal)(symbolId);
+}
 function appendMdxChildView(context) {
 	const childView = context.child.view;
+	const island = islandScope(context.child, context.child.output?.state ?? { version: 1 });
+	const familyContext = {
+		child: context.child,
+		island,
+		commentOffset: context.commentOffset
+	};
+	for (const repeat of childView.keyedRepeats ?? []) context.keyedRepeats.push(islandScopedFamilyRecord(repeat, familyContext));
+	for (const branch of childView.branches ?? []) context.branches.push(islandScopedFamilyRecord(branch, familyContext));
+	for (const boundary of childView.asyncBoundaries ?? []) context.asyncBoundaries.push(islandScopedFamilyRecord(boundary, familyContext));
+	for (const [graphNodeId, symbolId] of Object.entries(childView.asyncRunners ?? {})) context.asyncRunners[islandScopedGraphNodeId(graphNodeId, island)] = context.child.symbolPrefix + symbolId;
 	for (const locator of childView.locators ?? []) context.locators.push({
 		...locator,
 		hostNodeId: context.child.hostPrefix + locator.hostNodeId,
@@ -203,23 +1197,92 @@ function appendMdxChildView(context) {
 		hostNodeId: context.child.hostPrefix + event.hostNodeId,
 		symbolIds: event.symbolIds.map((symbolId) => context.child.symbolPrefix + symbolId)
 	});
-	for (const update of childView.domUpdates ?? []) context.domUpdates.push(prefixMdxSymbolRecord(update, context.child));
-	for (const behavior of childView.behaviors ?? []) context.behaviors.push(prefixMdxSymbolRecord(behavior, context.child));
+	for (const update of childView.domUpdates ?? []) context.domUpdates.push(prefixMdxSymbolRecord(update, context.child, island));
+	for (const behavior of childView.behaviors ?? []) context.behaviors.push(prefixMdxSymbolRecord(behavior, context.child, island));
 	for (const handle of childView.elementHandles ?? []) context.elementHandles.push({
 		...handle,
-		hostNodeId: context.child.hostPrefix + handle.hostNodeId
+		hostNodeId: context.child.hostPrefix + handle.hostNodeId,
+		handleId: islandScopedHandleId(handle.handleId, island)
 	});
 }
-function prefixMdxComputedRecord(record, child) {
-	return {
-		...record,
-		...record.deriveSymbolId ? { deriveSymbolId: child.symbolPrefix + record.deriveSymbolId } : {}
-	};
+const MDX_PAGE_ANCHOR_STRATEGY = "dom-order-comment";
+const MDX_HOST_ID_KEYS = [
+	"hostNodeId",
+	"parentHostNodeId",
+	"ownerHostNodeId"
+];
+const MDX_SYMBOL_ID_KEYS = [
+	"symbolId",
+	"updateSymbolId",
+	"runnerSymbolId"
+];
+const MDX_GRAPH_ID_KEYS = [
+	"graphNodeId",
+	"runnerGraphNodeId",
+	"collectionGraphNodeId"
+];
+const MDX_INSTANCE_PATH_KEYS = ["instancePath", "composedInstancePath"];
+const MDX_NESTED_RECORD_KEYS = [
+	"testReads",
+	"contentReads",
+	"asyncReads",
+	"inputGraphReads",
+	"composedGraphProps",
+	"idrefSites",
+	"locators",
+	"events",
+	"domUpdates",
+	"behaviors",
+	"elementHandles",
+	"rowEvents",
+	"rowElementHandles",
+	"keyedRepeats",
+	"branches",
+	"armRecords",
+	"servedArmRecords"
+];
+/**
+* One island's repeat / branch / boundary record in the composed page's spaces.
+*
+* Every id the record carries takes the island's own prefix for the same reason
+* the flat records do — two embeds of one component spell identical ids — and
+* the two comment anchors take the page's comment offset. Arm-relative
+* coordinates inside an arm record set are island-local by construction and are
+* deliberately left alone.
+*/
+function islandScopedFamilyRecord(record, context) {
+	const { child, island } = context;
+	const mapped = { ...record };
+	if (typeof record.id === "string") mapped.id = child.hostPrefix + record.id;
+	for (const key of MDX_HOST_ID_KEYS) if (typeof record[key] === "string") mapped[key] = child.hostPrefix + record[key];
+	for (const key of MDX_SYMBOL_ID_KEYS) if (typeof record[key] === "string") mapped[key] = child.symbolPrefix + record[key];
+	if (Array.isArray(record.symbolIds)) mapped.symbolIds = record.symbolIds.map((symbolId) => child.symbolPrefix + String(symbolId));
+	for (const key of MDX_GRAPH_ID_KEYS) if (typeof record[key] === "string") mapped[key] = islandScopedGraphNodeId(record[key], island);
+	if (typeof record.handleId === "string") mapped.handleId = islandScopedHandleId(record.handleId, island);
+	for (const key of MDX_INSTANCE_PATH_KEYS) if (typeof record[key] === "string") mapped[key] = island.segment + record[key];
+	if (isFamilyRecord(record.elementHandleIds)) mapped.elementHandleIds = Object.fromEntries(Object.entries(record.elementHandleIds).map(([readId, handleId]) => [readId, islandScopedHandleId(String(handleId), island)]));
+	for (const key of ["startAnchor", "endAnchor"]) {
+		const anchor = record[key];
+		if (isFamilyRecord(anchor) && anchor.strategy === MDX_PAGE_ANCHOR_STRATEGY) mapped[key] = {
+			...anchor,
+			index: context.commentOffset + Number(anchor.index)
+		};
+	}
+	for (const key of MDX_NESTED_RECORD_KEYS) {
+		const nested = record[key];
+		if (Array.isArray(nested)) mapped[key] = nested.map((entry) => isFamilyRecord(entry) ? islandScopedFamilyRecord(entry, context) : entry);
+		else if (isFamilyRecord(nested)) mapped[key] = islandScopedFamilyRecord(nested, context);
+	}
+	return mapped;
 }
-function prefixMdxSymbolRecord(record, child) {
+function isFamilyRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function prefixMdxSymbolRecord(record, child, island) {
 	return {
-		...record,
+		...islandScopedGraphRecord(record, island),
 		hostNodeId: child.hostPrefix + record.hostNodeId,
+		...record.inputGraphReads ? { inputGraphReads: record.inputGraphReads.map((read) => islandScopedGraphRecord(read, island)) } : {},
 		...record.symbolId ? { symbolId: child.symbolPrefix + record.symbolId } : {}
 	};
 }
@@ -227,4 +1290,4 @@ function isDefined(value) {
 	return value !== void 0;
 }
 //#endregion
-export { composeMdxState, composeMdxView, createMdxRenderDataSurface, loadMdxSymbol, renderMdxChild };
+export { composeMdxState, composeMdxView, createMdxRenderDataSurface, loadMdxSymbol, renderMdxChild, tryResumeMdxScalar };