@askrjs/askr 0.0.50 → 0.0.52

package/dist/jsx-dev-runtime.d.ts

@@ -1,12 +1,26 @@
 import { IntrinsicFallbackProps, KnownIntrinsicElementProps, Props } from "./common/props.js";
 import { Fragment, JSXComponent, JSXElement, JSXElementType } from "./common/jsx.js";
 import { EagerControlPrimitive } from "./common/control.js";
+
 //#region src/jsx/jsx-dev-runtime.d.ts
+declare namespace JSX {
+  interface Element extends JSXElement {
+    readonly __askrJsxElementBrand?: never;
+  }
+  interface IntrinsicElements extends KnownIntrinsicElementProps {
+    [elem: string]: IntrinsicFallbackProps | KnownIntrinsicElementProps[keyof KnownIntrinsicElementProps];
+  }
+  interface ElementAttributesProperty {
+    props: Props;
+  }
+  interface ElementChildrenAttribute {
+    children: unknown;
+  }
+}
 declare function jsxDEV(type: EagerControlPrimitive, props: Props | null, key?: string | number, isStaticChildren?: boolean): unknown;
 declare function jsxDEV<TTag extends keyof KnownIntrinsicElementProps>(type: TTag, props: KnownIntrinsicElementProps[TTag] | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
 declare function jsxDEV<TTag extends string>(type: Exclude<TTag, keyof KnownIntrinsicElementProps>, props: IntrinsicFallbackProps | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
 declare function jsxDEV<TProps extends object>(type: (props: TProps) => unknown, props: TProps | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
 declare function jsxDEV(type: symbol, props: Props | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
 //#endregion
-export { Fragment, type JSXComponent, type JSXElement, type JSXElementType, jsxDEV };
-//# sourceMappingURL=jsx-dev-runtime.d.ts.map
+export { Fragment, JSX, type JSXComponent, type JSXElement, type JSXElementType, jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -1,18 +1,12 @@
 import { isEagerControlPrimitive } from "./common/control.js";
-import { ELEMENT_TYPE, Fragment, STATIC_CHILDREN } from "./common/jsx.js";
-import { markReadableUsage } from "./runtime/readable.js";
+import { ELEMENT_TYPE, Fragment } from "./common/jsx.js";
+import "./runtime/readable.js";
+import "./runtime/index.js";
 import "./jsx/types.js";
-//#region src/jsx/jsx-dev-runtime.ts
 function annotatePropsUsage(props) {
-	const normalizedProps = props ?? {};
-	for (const value of Object.values(normalizedProps)) markReadableUsage(value);
-	return normalizedProps;
+	return props ?? {};
 }
 function markStaticChildren(props) {
-	if (Array.isArray(props.children)) Object.defineProperty(props.children, STATIC_CHILDREN, {
-		value: true,
-		configurable: true
-	});
 	return props;
 }
 function jsxDEV(type, props, key, isStaticChildren = false) {
@@ -28,5 +22,3 @@ function jsxDEV(type, props, key, isStaticChildren = false) {
 }
 //#endregion
 export { Fragment, jsxDEV };
-
-//# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/jsx-runtime.d.ts

@@ -1,7 +1,22 @@
 import { IntrinsicFallbackProps, KnownIntrinsicElementProps, Props } from "./common/props.js";
 import { Fragment, JSXComponent, JSXElement, JSXElementType } from "./common/jsx.js";
 import { EagerControlPrimitive } from "./common/control.js";
+
 //#region src/jsx/jsx-runtime.d.ts
+declare namespace JSX {
+  interface Element extends JSXElement {
+    readonly __askrJsxElementBrand?: never;
+  }
+  interface IntrinsicElements extends KnownIntrinsicElementProps {
+    [elem: string]: IntrinsicFallbackProps | KnownIntrinsicElementProps[keyof KnownIntrinsicElementProps];
+  }
+  interface ElementAttributesProperty {
+    props: Props;
+  }
+  interface ElementChildrenAttribute {
+    children: unknown;
+  }
+}
 declare function jsxDEV(type: EagerControlPrimitive, props: Props | null, key?: string | number, isStaticChildren?: boolean): unknown;
 declare function jsxDEV<TTag extends keyof KnownIntrinsicElementProps>(type: TTag, props: KnownIntrinsicElementProps[TTag] | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
 declare function jsxDEV<TTag extends string>(type: Exclude<TTag, keyof KnownIntrinsicElementProps>, props: IntrinsicFallbackProps | null, key?: string | number, isStaticChildren?: boolean): JSXElement;
@@ -18,5 +33,4 @@ declare function jsxs<TTag extends string>(type: Exclude<TTag, keyof KnownIntrin
 declare function jsxs<TProps extends object>(type: (props: TProps) => unknown, props: TProps | null, key?: string | number): JSXElement;
 declare function jsxs(type: symbol, props: Props | null, key?: string | number): JSXElement;
 //#endregion
-export { Fragment, type JSXComponent, type JSXElement, type JSXElementType, jsx, jsxDEV, jsxs };
-//# sourceMappingURL=jsx-runtime.d.ts.map
+export { Fragment, JSX, type JSXComponent, type JSXElement, type JSXElementType, jsx, jsxDEV, jsxs };

package/dist/jsx-runtime.js

@@ -1,37 +1,31 @@
 import { isEagerControlPrimitive } from "./common/control.js";
-import { ELEMENT_TYPE, Fragment, STATIC_CHILDREN } from "./common/jsx.js";
-import { markReadableUsage } from "./runtime/readable.js";
+import { ELEMENT_TYPE, Fragment } from "./common/jsx.js";
+import "./runtime/readable.js";
+import "./runtime/index.js";
 import "./jsx/types.js";
-//#region src/jsx/jsx-runtime.ts
-function annotatePropsUsage(props) {
-	const normalizedProps = props ?? {};
-	for (const value of Object.values(normalizedProps)) markReadableUsage(value);
-	return normalizedProps;
-}
-function markStaticChildren(props) {
-	if (Array.isArray(props.children)) Object.defineProperty(props.children, STATIC_CHILDREN, {
-		value: true,
-		configurable: true
-	});
-	return props;
-}
 function jsxDEV(type, props, key, isStaticChildren = false) {
-	const normalizedProps = annotatePropsUsage(props);
-	const preparedProps = isStaticChildren ? markStaticChildren(normalizedProps) : normalizedProps;
-	if (isEagerControlPrimitive(type)) return type(preparedProps);
+	const normalizedProps = props ?? {};
+	if (typeof type === "function" && isEagerControlPrimitive(type)) return type(normalizedProps);
 	return {
 		$$typeof: ELEMENT_TYPE,
 		type,
-		props: preparedProps,
+		props: normalizedProps,
 		key: key ?? null
 	};
 }
 function jsx(type, props, key) {
-	return jsxDEV(type, props, key);
+	const normalizedProps = props ?? {};
+	if (typeof type === "function" && isEagerControlPrimitive(type)) return type(normalizedProps);
+	return {
+		$$typeof: ELEMENT_TYPE,
+		type,
+		props: normalizedProps,
+		key: key ?? null
+	};
 }
 function jsxs(type, props, key) {
-	const normalizedProps = markStaticChildren(annotatePropsUsage(props));
-	if (isEagerControlPrimitive(type)) return type(normalizedProps);
+	const normalizedProps = props ?? {};
+	if (typeof type === "function" && isEagerControlPrimitive(type)) return type(normalizedProps);
 	return {
 		$$typeof: ELEMENT_TYPE,
 		type,
@@ -41,5 +35,3 @@ function jsxs(type, props, key) {
 }
 //#endregion
 export { Fragment, jsx, jsxDEV, jsxs };
-
-//# sourceMappingURL=jsx-runtime.js.map

package/dist/jsx-runtime2.d.ts

@@ -1,3 +1,3 @@
 import { Fragment, JSXComponent, JSXElement, JSXElementType } from "./common/jsx.js";
-import { jsx, jsxDEV, jsxs } from "./jsx-runtime.js";
+import { JSX, jsx, jsxDEV, jsxs } from "./jsx-runtime.js";
 export { Fragment, jsx, jsxs };

package/dist/renderer/attributes.js

@@ -1,4 +1,5 @@
 import { incrementPerfMetric } from "../runtime/perf-metrics.js";
+import "../runtime/index.js";
 import { extractKey, getRenderedAttributeName, isSkippedProp, parseEventName, readElementClassName, removeRenderedAttribute, setRenderedAttribute, tagNamesEqualIgnoreCase, writeElementClassName } from "./utils.js";
 function applyFormControlProp(el, key, value, tagName) {
 	if (key === "value") {
@@ -173,7 +174,10 @@ function applyScalarPropValue(el, key, value, tagName, previousValue, descriptor
 }
 function removeStaleAttributes(el, vnode, props) {
 	const desiredAttributes = /* @__PURE__ */ new Set();
-	if (extractKey(vnode) !== void 0) desiredAttributes.add("data-key");
+	if (extractKey(vnode) !== void 0) {
+		desiredAttributes.add("data-key");
+		desiredAttributes.add("data-askr-key-kind");
+	}
 	for (const propName in props) {
 		if (isSkippedProp(propName)) continue;
 		if (parseEventName(propName)) continue;
@@ -189,15 +193,30 @@ function materializeKey(el, vnode, props) {
 	if (vnodeKey !== void 0) {
 		const nextKey = String(vnodeKey);
 		if (el.getAttribute("data-key") !== nextKey) el.setAttribute("data-key", nextKey);
+		const keyKind = typeof vnodeKey;
+		if (el.getAttribute("data-askr-key-kind") !== keyKind) el.setAttribute("data-askr-key-kind", keyKind);
 	}
 }
-function hasMatchingStaticProps(el, props, vnodeType) {
+/** @internal Materialize keyed metadata on a newly created or cloned node. */
+function materializeFreshKey(el, vnode, props) {
+	const rawKey = vnode.key ?? props.key;
+	if (rawKey === null || rawKey === void 0) return;
+	const vnodeKey = typeof rawKey === "symbol" ? String(rawKey) : rawKey;
+	el.setAttribute("data-key", String(vnodeKey));
+	const keyKind = typeof vnodeKey;
+	if (el.getAttribute("data-askr-key-kind") !== keyKind) el.setAttribute("data-askr-key-kind", keyKind);
+}
+function hasMatchingStaticPropsInternal(el, props, vnodeType, ignoreEventProps) {
 	let staticPropCount = 0;
 	for (const key in props) {
 		if (isSkippedProp(key)) continue;
 		const value = props[key];
 		if (value === void 0 || value === null || value === false) return false;
-		if (parseEventName(key) || typeof value === "function") return false;
+		if (parseEventName(key)) {
+			if (ignoreEventProps) continue;
+			return false;
+		}
+		if (typeof value === "function") return false;
 		if (key === "class" || key === "className") {
 			if (readElementClassName(el) !== String(value)) return false;
 			staticPropCount += 1;
@@ -225,7 +244,11 @@ function hasMatchingStaticProps(el, props, vnodeType) {
 	}
 	return el.attributes.length === staticPropCount;
 }
+function hasMatchingStaticProps(el, props, vnodeType) {
+	return hasMatchingStaticPropsInternal(el, props, vnodeType, false);
+}
+function hasMatchingStaticPropsIgnoringEvents(el, props, vnodeType) {
+	return hasMatchingStaticPropsInternal(el, props, vnodeType, true);
+}
 //#endregion
-export { applyClassPropValue, applyFormControlProp, applyScalarPropValue, applyStaticScalarPropsToElement, applyStylePropValue, hasMatchingStaticProps, materializeKey, removeStaleAttributes };
-
-//# sourceMappingURL=attributes.js.map
+export { applyClassPropValue, applyFormControlProp, applyScalarPropValue, applyStaticScalarPropsToElement, applyStylePropValue, hasMatchingStaticProps, hasMatchingStaticPropsIgnoringEvents, materializeFreshKey, materializeKey, removeStaleAttributes };

package/dist/renderer/boundaries.js

@@ -1,87 +1,29 @@
-import { __FOR_BOUNDARY__, _isDOMElement } from "../common/vnode.js";
-import "./types.js";
+import { __FOR_BOUNDARY__ } from "../common/vnode.js";
 import { getRuntimeEnv } from "../common/env.js";
-import { logger } from "../dev/logger.js";
 import { enqueueRuntimeTask } from "../runtime/access.js";
+import { beginLifecycleCommitBatch, discardLifecycleCommitBatch, flushLifecycleCommitBatch } from "../runtime/lifecycle-batch.js";
+import { recordBenchEvent } from "../runtime/for-bench.js";
+import "../runtime/index.js";
 import { teardownNodeSubtree } from "./cleanup.js";
 import "./env.js";
-import { tagNamesEqualIgnoreCase } from "./utils.js";
 import { keyedElements } from "./keyed.js";
-import { recordBenchEvent } from "../runtime/for-bench.js";
-import { clearForDomUpdateState, evaluateForState } from "../runtime/for-internal.js";
-import "../runtime/for.js";
-import { clearCaseDomUpdateState, clearShowDomUpdateState, evaluateCaseState, evaluateShowState } from "../runtime/control.js";
+import { getRangeNodes, insertRangeBefore, rangeContains, removeRange } from "./dom-range.js";
 import { commitForStateBoundaryChildren } from "./for-commit.js";
-import { getParentNamespace } from "./namespaces.js";
+import { configureBoundaryRangeHost } from "./boundary-range-adoption.js";
+import { syncControlBoundaryInMixedParent, syncControlBoundaryScopeDom, syncControlBoundaryScopeNode } from "./boundary-range-sync.js";
+import { clearControlBoundaryDomUpdateState, evaluateControlBoundaryState, getControlBoundaryCommitChildren, getControlBoundaryState, getDirectControlBoundaryVNode } from "./boundary-state.js";
+import { createForBoundary } from "./boundary-materialization.js";
 //#region src/renderer/boundaries.ts
 let boundaryDOMHost = null;
 const controlBoundaryOwners = /* @__PURE__ */ new WeakMap();
 function configureBoundaryDOMHost(host) {
 	boundaryDOMHost = host;
+	configureBoundaryRangeHost(host);
 }
 function getBoundaryDOMHost() {
 	if (!boundaryDOMHost) throw new Error("[askr] Control boundary DOM host is not configured.");
 	return boundaryDOMHost;
 }
-function checkVNodeShapeChanged(dom, vnode) {
-	if (!_isDOMElement(vnode)) return true;
-	if (!(dom instanceof Element)) return true;
-	const vnodeType = vnode.type;
-	if (typeof vnodeType !== "string") return true;
-	return dom.tagName.toLowerCase() !== vnodeType.toLowerCase();
-}
-function materializeChildScopeDom(vnode, parentNamespace) {
-	if (vnode === null || vnode === void 0 || vnode === false) return document.createComment("");
-	const dom = getBoundaryDOMHost().createDOMNode(vnode, parentNamespace);
-	if (!(dom instanceof DocumentFragment)) return dom;
-	const firstChild = dom.firstChild;
-	const secondChild = firstChild?.nextSibling ?? null;
-	if (!firstChild) return document.createComment("");
-	if (secondChild) throw new Error("[askr] Child scopes must render a single DOM root node.");
-	return firstChild;
-}
-function evaluateControlBoundaryState(controlState) {
-	if (controlState.kind === "for") return evaluateForState(controlState);
-	if (controlState.kind === "show") return evaluateShowState(controlState);
-	return evaluateCaseState(controlState);
-}
-function clearControlBoundaryDomUpdateState(controlState) {
-	if (controlState.kind === "for") {
-		clearForDomUpdateState(controlState);
-		return;
-	}
-	if (controlState.kind === "show") {
-		clearShowDomUpdateState(controlState);
-		return;
-	}
-	clearCaseDomUpdateState(controlState);
-}
-function getControlBoundaryState(node) {
-	return node._controlState ?? node._forState ?? null;
-}
-function getDirectControlBoundaryVNode(children) {
-	if (!Array.isArray(children) && _isDOMElement(children) && children.type === __FOR_BOUNDARY__) return children;
-	if (Array.isArray(children) && children.length === 1 && _isDOMElement(children[0]) && children[0].type === __FOR_BOUNDARY__) return children[0];
-	return null;
-}
-function getControlBoundaryCommitChildren(controlState) {
-	if (controlState.kind === "for" && controlState._needsSourceReconcile) return evaluateForState(controlState);
-	if (controlState.kind !== "for") {
-		const activeVNode = controlState.activeScope?.vnode;
-		return activeVNode == null || activeVNode === false ? [] : [activeVNode];
-	}
-	if (controlState.orderedKeys.length === 0) {
-		const fallbackVNode = controlState.fallbackScope?.vnode;
-		return fallbackVNode == null || fallbackVNode === false ? [] : [fallbackVNode];
-	}
-	const childrenVNodes = [];
-	for (let index = 0; index < controlState.orderedKeys.length; index += 1) {
-		const itemKey = controlState.orderedKeys[index];
-		const itemInstance = controlState.items.get(itemKey);
-		childrenVNodes.push(itemInstance?.scope.vnode ?? null);
-	}
-	return childrenVNodes;
-}
 function clearControlBoundaryCommitOwner(parent) {
 	const owner = controlBoundaryOwners.get(parent);
 	if (owner) {
@@ -109,110 +51,30 @@ function registerControlBoundaryCommitOwner(parent, controlState) {
 		enqueueRuntimeTask(() => {
 			controlState._hasPendingBoundaryCommit = false;
 			if (controlBoundaryOwners.get(parent) !== controlState) return;
-			commitForBoundaryChildren(parent, controlState, getControlBoundaryCommitChildren(controlState));
+			const lifecycleBatch = beginLifecycleCommitBatch();
+			try {
+				commitForBoundaryChildren(parent, controlState, getControlBoundaryCommitChildren(controlState));
+				flushLifecycleCommitBatch(lifecycleBatch);
+			} catch (error) {
+				discardLifecycleCommitBatch(lifecycleBatch);
+				throw error;
+			}
 		});
 	};
 }
-/**
-* Create DOM from For/Show/Case control boundaries.
-*
-* DOM order is reconstructed from the current vnode list on every render.
-* Reusing DOM nodes never implies preserving their position; appending an
-* existing node to the fragment expresses reordering per the DOM spec.
-*/
-function createForBoundary(node, props, parentNamespace) {
-	const controlState = getControlBoundaryState(node);
-	if (!controlState) {
-		if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Control boundary missing state");
-		return document.createDocumentFragment();
-	}
-	const childrenVNodes = evaluateControlBoundaryState(controlState);
-	const fragment = document.createDocumentFragment();
-	if (controlState.kind !== "for") {
-		const activeScope = controlState.activeScope;
-		const vnode = childrenVNodes[0];
-		if (activeScope && vnode !== void 0) {
-			const dom = materializeChildScopeDom(vnode, parentNamespace);
-			activeScope.dom = dom ?? void 0;
-			if (dom) fragment.appendChild(dom);
-		}
-		clearControlBoundaryDomUpdateState(controlState);
-		return fragment;
-	}
-	const forState = controlState;
-	if (forState.orderedKeys.length === 0) {
-		const fallbackScope = forState.fallbackScope;
-		const fallbackVNode = childrenVNodes[0];
-		if (fallbackScope && fallbackVNode !== void 0) {
-			const dom = materializeChildScopeDom(fallbackVNode, parentNamespace);
-			fallbackScope.dom = dom ?? void 0;
-			if (dom) fragment.appendChild(dom);
-		}
-		clearControlBoundaryDomUpdateState(controlState);
-		return fragment;
-	}
-	for (let i = 0; i < childrenVNodes.length; i++) {
-		const childVNode = childrenVNodes[i];
-		const itemKey = forState.orderedKeys[i];
-		const itemInstance = itemKey != null ? forState.items.get(itemKey) : null;
-		let dom = null;
-		if (itemInstance && itemInstance.scope.dom) {
-			const cachedDom = itemInstance.scope.dom;
-			if (!checkVNodeShapeChanged(cachedDom, childVNode)) dom = cachedDom;
-		}
-		if (!dom) {
-			dom = materializeChildScopeDom(childVNode, parentNamespace);
-			if (itemInstance) itemInstance.scope.dom = dom ?? void 0;
-		}
-		if (dom) fragment.appendChild(dom);
-	}
-	clearControlBoundaryDomUpdateState(controlState);
-	return fragment;
-}
-function syncControlBoundaryScopeDom(parent, scope, vnode) {
-	let dom = scope.dom ?? null;
-	const parentNamespace = getParentNamespace(parent);
-	const host = getBoundaryDOMHost();
-	if (_isDOMElement(vnode) && typeof vnode.type === "function") {
-		const syncedComponentDom = host.syncComponentElement(dom, vnode, vnode.type, vnode.props ?? {}, parentNamespace);
-		if (syncedComponentDom) {
-			scope.dom = syncedComponentDom ?? void 0;
-			return syncedComponentDom;
-		}
-	}
-	if (!dom) {
-		dom = materializeChildScopeDom(vnode, parentNamespace);
-		scope.dom = dom ?? void 0;
-		return dom;
-	}
-	if (dom.nodeType === 3 && (typeof vnode === "string" || typeof vnode === "number")) {
-		dom.data = String(vnode);
-		return dom;
-	}
-	if (dom.nodeType === 8 && (vnode === null || vnode === void 0 || vnode === false)) return dom;
-	if (dom instanceof Element && _isDOMElement(vnode) && typeof vnode.type === "string" && tagNamesEqualIgnoreCase(dom.tagName, vnode.type)) {
-		host.updateElementFromVnode(dom, vnode, true);
-		return dom;
-	}
-	const nextDom = materializeChildScopeDom(vnode, parentNamespace);
-	if (!nextDom) {
-		if (dom.parentNode === parent) {
-			teardownNodeSubtree(dom);
-			dom.parentNode.removeChild(dom);
-		}
-		scope.dom = void 0;
-		return null;
-	}
-	if (dom.parentNode === parent) parent.replaceChild(nextDom, dom);
-	teardownNodeSubtree(dom);
-	scope.dom = nextDom;
-	return nextDom;
-}
 function commitForBoundaryChildren(parent, controlState, childrenVNodes) {
 	if (controlState.kind !== "for") {
 		const activeScope = controlState.activeScope;
 		const activeVNode = childrenVNodes[0];
-		const nextDom = activeScope && activeVNode !== void 0 ? syncControlBoundaryScopeDom(parent, activeScope, activeVNode) : null;
+		const nextDom = activeScope && activeVNode !== void 0 ? syncControlBoundaryScopeDom(parent, activeScope, activeVNode, parent.firstChild, controlState.lastRemovedRanges.length === 0) : null;
+		for (const removedRange of controlState.lastRemovedRanges) removeRange(removedRange, (node) => {
+			if (!removedRange.single && (node === removedRange.start || node === removedRange.end)) {
+				node.parentNode?.removeChild(node);
+				return;
+			}
+			teardownNodeSubtree(node);
+			node.parentNode?.removeChild(node);
+		});
 		for (let i = 0; i < controlState.lastRemovedNodes.length; i++) {
 			const removedNode = controlState.lastRemovedNodes[i];
 			if (removedNode instanceof Element) teardownNodeSubtree(removedNode);
@@ -222,7 +84,14 @@ function commitForBoundaryChildren(parent, controlState, childrenVNodes) {
 			}
 		}
 		if (nextDom) {
-			if (parent.childNodes.length !== 1 || parent.firstChild !== nextDom || controlState.lastRemovedNodes.length > 0) parent.replaceChildren(nextDom);
+			if (parent.childNodes.length !== (nextDom.single ? 1 : getRangeNodes(nextDom).length + 2) || parent.firstChild !== nextDom.start || controlState.lastRemovedNodes.length > 0 || controlState.lastRemovedRanges.length > 0) {
+				const nodes = nextDom.single ? [nextDom.start] : [
+					nextDom.start,
+					...getRangeNodes(nextDom),
+					nextDom.end
+				];
+				parent.replaceChildren(...nodes);
+			}
 		} else if (parent.firstChild) parent.textContent = "";
 		keyedElements.delete(parent);
 		clearControlBoundaryDomUpdateState(controlState);
@@ -230,7 +99,7 @@ function commitForBoundaryChildren(parent, controlState, childrenVNodes) {
 	}
 	commitForStateBoundaryChildren(parent, controlState, childrenVNodes, {
 		isProduction: () => getRuntimeEnv().NODE_ENV === "production",
-		syncForItemDom: syncControlBoundaryScopeDom,
+		syncForItemDom: syncControlBoundaryScopeNode,
 		tryPatchStableForDirtyItem: (scope) => getBoundaryDOMHost().tryPatchStableForDirtyItem(scope)
 	});
 }
@@ -242,17 +111,26 @@ function trySyncControlBoundaryChild(parent, currentNode, next) {
 	const activeScope = controlState.activeScope;
 	const activeVNode = childrenVNodes[0];
 	const nextDom = activeScope && activeVNode !== void 0 ? syncControlBoundaryScopeDom(parent, activeScope, activeVNode) : null;
+	for (const removedRange of controlState.lastRemovedRanges) removeRange(removedRange, (node) => {
+		if (!removedRange.single && (node === removedRange.start || node === removedRange.end)) {
+			node.parentNode?.removeChild(node);
+			return;
+		}
+		teardownNodeSubtree(node);
+		node.parentNode?.removeChild(node);
+	});
 	for (let i = 0; i < controlState.lastRemovedNodes.length; i++) {
 		const removedNode = controlState.lastRemovedNodes[i];
 		if (removedNode.parentNode !== parent) continue;
 		teardownNodeSubtree(removedNode);
-		if (nextDom && nextDom !== removedNode && !nextDom.parentNode) parent.replaceChild(nextDom, removedNode);
+		if (nextDom && !rangeContains(nextDom, removedNode) && !nextDom.start.parentNode) insertRangeBefore(parent, nextDom, removedNode);
 		else parent.removeChild(removedNode);
 	}
-	if (nextDom && !nextDom.parentNode) if (currentNode?.parentNode === parent) {
+	if (nextDom && nextDom.start.parentNode !== parent) if (currentNode?.parentNode === parent && !rangeContains(nextDom, currentNode)) {
 		teardownNodeSubtree(currentNode);
-		parent.replaceChild(nextDom, currentNode);
-	} else parent.appendChild(nextDom);
+		insertRangeBefore(parent, nextDom, currentNode);
+		currentNode.parentNode?.removeChild(currentNode);
+	} else insertRangeBefore(parent, nextDom);
 	else if (!nextDom && currentNode?.parentNode === parent) {
 		teardownNodeSubtree(currentNode);
 		parent.removeChild(currentNode);
@@ -261,6 +139,4 @@ function trySyncControlBoundaryChild(parent, currentNode, next) {
 	return true;
 }
 //#endregion
-export { clearControlBoundaryCommitOwner, commitForBoundaryChildren, configureBoundaryDOMHost, createForBoundary, evaluateControlBoundaryState, getControlBoundaryState, getDirectControlBoundaryVNode, registerControlBoundaryCommitOwner, syncControlBoundaryScopeDom, trySyncControlBoundaryChild };
-
-//# sourceMappingURL=boundaries.js.map
+export { clearControlBoundaryCommitOwner, commitForBoundaryChildren, configureBoundaryDOMHost, createForBoundary, evaluateControlBoundaryState, getControlBoundaryState, getDirectControlBoundaryVNode, registerControlBoundaryCommitOwner, syncControlBoundaryInMixedParent, syncControlBoundaryScopeDom, trySyncControlBoundaryChild };

package/dist/renderer/boundary-materialization.js

@@ -0,0 +1,72 @@
+import { getRuntimeEnv } from "../common/env.js";
+import { logger } from "../common/logger.js";
+import "./env.js";
+import { appendRange } from "./dom-range.js";
+import { assignScopeRange, checkVNodeShapeChanged, materializeChildScopeRange } from "./boundary-range-adoption.js";
+import { clearControlBoundaryDomUpdateState, evaluateControlBoundaryState, getControlBoundaryState } from "./boundary-state.js";
+//#region src/renderer/boundary-materialization.ts
+/**
+* Create DOM from For/Show/Case control boundaries.
+*
+* DOM order is reconstructed from the current vnode list on every render.
+* Reusing DOM nodes never implies preserving their position; appending an
+* existing node to the fragment expresses reordering per the DOM spec.
+*/
+function createForBoundary(node, props, parentNamespace) {
+	const controlState = getControlBoundaryState(node);
+	if (!controlState) {
+		if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Control boundary missing state");
+		return document.createDocumentFragment();
+	}
+	const childrenVNodes = evaluateControlBoundaryState(controlState);
+	const fragment = document.createDocumentFragment();
+	if (controlState.kind !== "for") {
+		const activeScope = controlState.activeScope;
+		const vnode = childrenVNodes[0];
+		if (activeScope && vnode !== void 0) {
+			const range = materializeChildScopeRange(vnode, parentNamespace, activeScope);
+			assignScopeRange(activeScope, range);
+			activeScope.hydrationPending = false;
+			appendRange(fragment, range);
+		}
+		clearControlBoundaryDomUpdateState(controlState);
+		return fragment;
+	}
+	const forState = controlState;
+	if (forState.orderedKeys.length === 0) {
+		const fallbackScope = forState.fallbackScope;
+		const fallbackVNode = childrenVNodes[0];
+		if (fallbackScope && fallbackVNode !== void 0) {
+			const range = materializeChildScopeRange(fallbackVNode, parentNamespace, fallbackScope);
+			assignScopeRange(fallbackScope, range);
+			fallbackScope.hydrationPending = false;
+			appendRange(fragment, range);
+		}
+		clearControlBoundaryDomUpdateState(controlState);
+		return fragment;
+	}
+	for (let i = 0; i < childrenVNodes.length; i++) {
+		const childVNode = childrenVNodes[i];
+		const itemKey = forState.orderedKeys[i];
+		const itemInstance = itemKey != null ? forState.items.get(itemKey) : null;
+		let range = null;
+		if (itemInstance && itemInstance.scope.range) {
+			const cachedRange = itemInstance.scope.range;
+			const cachedDom = cachedRange.single ? cachedRange.start : null;
+			if (!cachedDom || !checkVNodeShapeChanged(cachedDom, childVNode)) range = cachedRange;
+		}
+		if (!range) {
+			const materializedRange = materializeChildScopeRange(childVNode, parentNamespace, itemInstance?.scope);
+			if (itemInstance) {
+				assignScopeRange(itemInstance.scope, materializedRange);
+				itemInstance.scope.hydrationPending = false;
+			}
+			range = materializedRange;
+		}
+		appendRange(fragment, range);
+	}
+	clearControlBoundaryDomUpdateState(controlState);
+	return fragment;
+}
+//#endregion
+export { createForBoundary };

package/dist/renderer/boundary-range-adoption.js

@@ -0,0 +1,76 @@
+import { _isDOMElement } from "../common/vnode.js";
+import "./types.js";
+import { Fragment } from "../common/jsx.js";
+import { enterDomCommitScope, restoreDomCommitScope } from "../runtime/component-scope.js";
+import "../runtime/index.js";
+import { createDetachedRange, createEmptyRange, createSingleNodeRange, findRangeEnd, getRangeNodes, isRangeStart } from "./dom-range.js";
+import { getParentNamespace } from "./namespaces.js";
+import "../jsx/index.js";
+//#region src/renderer/boundary-range-adoption.ts
+let boundaryRangeHost = null;
+function configureBoundaryRangeHost(host) {
+	boundaryRangeHost = host;
+}
+function getBoundaryRangeHost() {
+	if (!boundaryRangeHost) throw new Error("[askr] Control boundary DOM host is not configured.");
+	return boundaryRangeHost;
+}
+function assignScopeRange(scope, range) {
+	scope.range = range;
+	scope.dom = range.single ? range.start : void 0;
+}
+function checkVNodeShapeChanged(dom, vnode) {
+	if (!_isDOMElement(vnode) || !(dom instanceof Element)) return true;
+	if (typeof vnode.type !== "string") return true;
+	return dom.tagName.toLowerCase() !== vnode.type.toLowerCase();
+}
+function adoptHydratedRange(parent, scope, before, vnode) {
+	if (!scope.hydrationPending || !before || !isRangeStart(before)) return null;
+	const end = findRangeEnd(before);
+	if (!end || end.parentNode !== parent) return null;
+	const range = {
+		start: before,
+		end,
+		single: false
+	};
+	const contentNodes = getRangeNodes(range);
+	const expectedChildren = _isDOMElement(vnode) && vnode.type === Fragment ? vnode.props?.children ?? [] : [vnode];
+	if (contentNodes.length !== expectedChildren.length) return null;
+	for (let index = 0; index < expectedChildren.length; index += 1) {
+		const expected = expectedChildren[index];
+		const actual = contentNodes[index];
+		if (_isDOMElement(expected) && typeof expected.type === "string" && (!(actual instanceof Element) || actual.tagName.toLowerCase() !== expected.type.toLowerCase())) return null;
+	}
+	assignScopeRange(scope, range);
+	scope.hydrationPending = false;
+	return range;
+}
+function getScopeRange(scope) {
+	if (scope.range) return scope.range;
+	if (!scope.dom) return null;
+	const range = {
+		start: scope.dom,
+		end: scope.dom,
+		single: true
+	};
+	scope.range = range;
+	return range;
+}
+function materializeChildScopeRange(vnode, parentNamespace, scope, scopeAlreadyActive = false) {
+	const previousInstance = scope && !scopeAlreadyActive ? enterDomCommitScope(scope.componentInstance) : null;
+	let dom;
+	try {
+		const host = getBoundaryRangeHost();
+		dom = scope?.blueprintOwner && _isDOMElement(vnode) && typeof vnode.type === "string" ? host.createResultNodeWithBlueprint(scope.blueprintOwner, vnode, parentNamespace) : host.createDOMNode(vnode, parentNamespace);
+	} finally {
+		if (scope && !scopeAlreadyActive) restoreDomCommitScope(previousInstance);
+	}
+	if (!dom) return createEmptyRange(document, scope).range;
+	if (!(dom instanceof DocumentFragment)) return createSingleNodeRange(dom, scope);
+	return createDetachedRange(dom, scope).range;
+}
+function getBoundaryParentNamespace(parent) {
+	return getParentNamespace(parent);
+}
+//#endregion
+export { adoptHydratedRange, assignScopeRange, checkVNodeShapeChanged, configureBoundaryRangeHost, getBoundaryParentNamespace, getBoundaryRangeHost, getScopeRange, materializeChildScopeRange };