@ccheever/exact-renderer 0.1.0

package/src/dom-shim.ts

@@ -0,0 +1,1736 @@
+/**
+ * Exact DOM Shim
+ *
+ * RFC 0043 introduces a compatibility layer for DOM-targeting frameworks such
+ * as Svelte. The shim exposes a small DOM-like surface that translates tree
+ * mutations, prop writes, and event listeners into Exact's shared host-ops.
+ *
+ * This is intentionally not a full DOM implementation. It implements the
+ * subset of APIs that imperative UI runtimes typically use while rendering:
+ * - element/text/comment/document/fragment creation
+ * - append/insert/remove/reparent operations
+ * - attribute, classList, and style writes
+ * - event listener registration via EventTarget
+ * - per-root lifecycle (`destroy` / `reset`)
+ */
+
+import {
+  getWindowViewportForRoot,
+  subscribeToRootWindowState,
+  type Unsubscribe,
+} from '@exact/core';
+import {
+  Event,
+  EventTarget,
+  FocusEvent,
+  KeyboardEvent,
+  type AddEventListenerOptions,
+  type EventListenerOptions,
+  type EventListenerOrEventListenerObject,
+} from '@exact/runtime-js';
+
+import {
+  NodeKind,
+  appendChild as hostAppendChild,
+  commitBatch,
+  createInstance,
+  createRoot,
+  createTextInstance,
+  defaultTagConfig,
+  destroyRoot,
+  detachChild as hostDetachChild,
+  getTagConfig,
+  insertBefore as hostInsertBefore,
+  nodeAppendChild as hostTreeAppendChild,
+  nodeInsertBefore as hostTreeInsertBefore,
+  nodeRemoveChild as hostTreeRemoveChild,
+  processEventProps,
+  removeChild as hostRemoveChild,
+  syncRootWindowState,
+  updateInstanceProps,
+  updateTextContent,
+  type ElementNode,
+  type RootNode,
+  type TextNode,
+} from './host-ops.js';
+import { DirtyFlags } from './nodes/node.js';
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+const PRESS_EVENT_TYPES = new Set(['click', 'pointerdown', 'pointerup']);
+const CANCELABLE_EVENTS = new Set(['click', 'pointerdown', 'pointerup', 'keydown', 'keyup']);
+const TAG_DEFAULTS: Record<string, Record<string, unknown>> = {
+  textarea: { multiline: true },
+};
+const ATTR_TO_PROP: Record<string, Record<string, string>> = {
+  textarea: { rows: 'numberOfLines' },
+};
+
+type ExactRenderableNode = ExactElement | ExactText;
+type ExactChildNode = ExactElement | ExactText | ExactComment;
+type ExactInsertableNode = ExactChildNode | ExactDocumentFragment;
+type ExactParentNode = ExactElement | ExactRootBodyElement | ExactDocumentFragment;
+type ExactAppendableNode = ExactInsertableNode | string;
+
+function kebabToCamel(value: string): string {
+  return value.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase());
+}
+
+function camelToKebab(value: string): string {
+  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+function normalizeStylePropertyName(value: string): string {
+  return value.includes('-') ? kebabToCamel(value) : value;
+}
+
+function parseCssText(input: string): Record<string, unknown> {
+  const bag: Record<string, unknown> = {};
+
+  for (const segment of input.split(';')) {
+    const trimmed = segment.trim();
+    if (!trimmed) {
+      continue;
+    }
+
+    const separatorIndex = trimmed.indexOf(':');
+    if (separatorIndex === -1) {
+      continue;
+    }
+
+    const propertyName = normalizeStylePropertyName(
+      trimmed.slice(0, separatorIndex).trim(),
+    );
+    const propertyValue = trimmed.slice(separatorIndex + 1).trim();
+    if (!propertyName) {
+      continue;
+    }
+
+    bag[propertyName] = propertyValue;
+  }
+
+  return bag;
+}
+
+function cloneProps(props: Record<string, unknown>): Record<string, unknown> {
+  return {
+    ...props,
+    style:
+      props.style && typeof props.style === 'object'
+        ? { ...(props.style as Record<string, unknown>) }
+        : props.style,
+  };
+}
+
+function isRenderableNode(node: ExactInsertableNode): node is ExactRenderableNode {
+  return node instanceof ExactElement || node instanceof ExactText;
+}
+
+function isElementNode(node: ExactChildNode): node is ExactElement {
+  return node instanceof ExactElement;
+}
+
+function isCommentNode(node: ExactInsertableNode): node is ExactComment {
+  return node instanceof ExactComment;
+}
+
+function isCreatedNode(node: ElementNode | TextNode): boolean {
+  return (node.dirtyFlags & DirtyFlags.Created) !== 0;
+}
+
+function readViewport(rootId: number): { width: number; height: number } {
+  const snapshot = getWindowViewportForRoot(rootId);
+  return {
+    width: snapshot.width,
+    height: snapshot.height,
+  };
+}
+
+export abstract class ExactNodeBase extends EventTarget {
+  readonly ownerDocument: ExactDocument;
+  readonly __state: ExactDOMState;
+  readonly __rootId: number;
+  __parent: ExactParentNode | ExactDocumentElement | null = null;
+
+  constructor(state: ExactDOMState, ownerDocument: ExactDocument) {
+    super();
+    this.__state = state;
+    this.ownerDocument = ownerDocument;
+    this.__rootId = state.rootId;
+  }
+
+  abstract readonly nodeType: number;
+  abstract readonly nodeName: string;
+
+  get parentNode(): ExactParentNode | ExactDocumentElement | null {
+    return this.__parent;
+  }
+
+  get childNodes(): ExactChildNode[] {
+    return [];
+  }
+
+  get firstChild(): ExactChildNode | null {
+    return this.childNodes[0] ?? null;
+  }
+
+  get lastChild(): ExactChildNode | null {
+    const { childNodes } = this;
+    return childNodes[childNodes.length - 1] ?? null;
+  }
+
+  get nextSibling(): ExactChildNode | null {
+    const parent = this.__parent;
+    if (!parent || !(parent instanceof ExactContainerNodeBase)) {
+      return null;
+    }
+
+    const index = parent.__children.indexOf(this as unknown as ExactChildNode);
+    return index >= 0 ? parent.__children[index + 1] ?? null : null;
+  }
+
+  get previousSibling(): ExactChildNode | null {
+    const parent = this.__parent;
+    if (!parent || !(parent instanceof ExactContainerNodeBase)) {
+      return null;
+    }
+
+    const index = parent.__children.indexOf(this as unknown as ExactChildNode);
+    return index > 0 ? parent.__children[index - 1] ?? null : null;
+  }
+
+  remove(): void {
+    const parent = this.__parent;
+    if (parent instanceof ExactContainerNodeBase) {
+      parent.removeChild(this as unknown as ExactChildNode);
+    }
+  }
+
+  before(...nodes: ExactAppendableNode[]): void {
+    const parent = this.__parent;
+    if (!(parent instanceof ExactContainerNodeBase)) {
+      return;
+    }
+
+    for (const node of nodes) {
+      parent.insertBefore(
+        normalizeAppendableNode(this.ownerDocument, node),
+        this as unknown as ExactChildNode,
+      );
+    }
+  }
+
+  after(...nodes: ExactAppendableNode[]): void {
+    const parent = this.__parent;
+    if (!(parent instanceof ExactContainerNodeBase)) {
+      return;
+    }
+
+    let anchor = this.nextSibling;
+    for (const node of nodes) {
+      const normalized = normalizeAppendableNode(this.ownerDocument, node);
+      parent.insertBefore(normalized, anchor);
+    }
+  }
+
+  getRootNode(): ExactDocument {
+    return this.ownerDocument;
+  }
+
+  get isConnected(): boolean {
+    let current: ExactNodeBase | ExactDocumentElement | null = this;
+
+    while (current) {
+      if (current instanceof ExactRootBodyElement) {
+        return !current.__state.destroyed;
+      }
+      current = current.parentNode;
+    }
+
+    return false;
+  }
+
+  cloneNode(_deep: boolean = false): ExactNodeBase {
+    throw new Error('[ExactDOM] cloneNode() is not implemented for this node type.');
+  }
+
+  get textContent(): string {
+    return '';
+  }
+
+  set textContent(_value: string) {
+    // Overridden by renderable/text container subclasses.
+  }
+}
+
+export abstract class ExactContainerNodeBase extends ExactNodeBase {
+  __children: ExactChildNode[] = [];
+
+  append(...nodes: ExactAppendableNode[]): void {
+    for (const node of nodes) {
+      this.appendChild(normalizeAppendableNode(this.ownerDocument, node));
+    }
+  }
+
+  appendChild<T extends ExactInsertableNode>(child: T): T {
+    return insertNodeIntoParent(this as unknown as ExactParentNode, child, null) as T;
+  }
+
+  insertBefore<T extends ExactInsertableNode>(
+    child: T,
+    beforeChild: ExactChildNode | null,
+  ): T {
+    return insertNodeIntoParent(this as unknown as ExactParentNode, child, beforeChild) as T;
+  }
+
+  removeChild<T extends ExactChildNode>(child: T): T {
+    return removeNodeFromParent(this as unknown as ExactParentNode, child) as T;
+  }
+
+  get childNodes(): ExactChildNode[] {
+    return this.__children.slice();
+  }
+
+  get children(): ExactElement[] {
+    return this.__children.filter(isElementNode);
+  }
+
+  get firstChild(): ExactChildNode | null {
+    return this.__children[0] ?? null;
+  }
+
+  get lastChild(): ExactChildNode | null {
+    return this.__children[this.__children.length - 1] ?? null;
+  }
+
+  get textContent(): string {
+    return this.__children.map((child) => child.textContent).join('');
+  }
+
+  set textContent(value: string) {
+    for (const child of this.__children.slice()) {
+      this.removeChild(child);
+    }
+
+    if (value.length > 0) {
+      this.appendChild(this.ownerDocument.createTextNode(value));
+    }
+  }
+
+  abstract __getHostParent(): ElementNode | RootNode | null;
+
+  querySelector(selector: string): ExactElement | null {
+    return querySelectorInChildren(this.__children, selector);
+  }
+}
+
+class ExactClassList {
+  readonly __element: ExactElement;
+  readonly __tokens = new Set<string>();
+
+  constructor(element: ExactElement, initialClassName: string) {
+    this.__element = element;
+    this.__replaceFromString(initialClassName);
+  }
+
+  add(...tokens: string[]): void {
+    for (const token of tokens) {
+      if (token) {
+        this.__tokens.add(token);
+      }
+    }
+    this.__syncToElement();
+  }
+
+  remove(...tokens: string[]): void {
+    for (const token of tokens) {
+      this.__tokens.delete(token);
+    }
+    this.__syncToElement();
+  }
+
+  toggle(token: string, force?: boolean): boolean {
+    if (force === true) {
+      this.__tokens.add(token);
+      this.__syncToElement();
+      return true;
+    }
+    if (force === false) {
+      this.__tokens.delete(token);
+      this.__syncToElement();
+      return false;
+    }
+
+    if (this.__tokens.has(token)) {
+      this.__tokens.delete(token);
+      this.__syncToElement();
+      return false;
+    }
+
+    this.__tokens.add(token);
+    this.__syncToElement();
+    return true;
+  }
+
+  contains(token: string): boolean {
+    return this.__tokens.has(token);
+  }
+
+  toString(): string {
+    return Array.from(this.__tokens).join(' ');
+  }
+
+  __replaceFromString(className: string): void {
+    this.__tokens.clear();
+    for (const token of className.split(/\s+/)) {
+      if (token) {
+        this.__tokens.add(token);
+      }
+    }
+  }
+
+  __syncToElement(): void {
+    const className = this.toString();
+    if (className.length > 0) {
+      this.__element.__props.className = className;
+    } else {
+      delete this.__element.__props.className;
+    }
+    this.__element.__syncOriginalPropsIfNeeded();
+    this.__element.__markDirty();
+  }
+}
+
+class ExactStyleDeclarationCore {
+  readonly __element: ExactElement;
+  __bag: Record<string, unknown>;
+
+  constructor(element: ExactElement, initialStyle: Record<string, unknown> | undefined) {
+    this.__element = element;
+    this.__bag = initialStyle ? { ...initialStyle } : {};
+  }
+
+  get cssText(): string {
+    return Object.entries(this.__bag)
+      .map(([key, value]) => `${camelToKebab(key)}: ${String(value)}`)
+      .join('; ');
+  }
+
+  set cssText(value: string) {
+    this.__bag = parseCssText(value);
+    this.__syncToElement();
+  }
+
+  setProperty(name: string, value: string): void {
+    this.__set(normalizeStylePropertyName(name), value);
+  }
+
+  removeProperty(name: string): string {
+    const normalized = normalizeStylePropertyName(name);
+    const previous = this.__bag[normalized];
+    delete this.__bag[normalized];
+    this.__syncToElement();
+    return previous == null ? '' : String(previous);
+  }
+
+  getPropertyValue(name: string): string {
+    const normalized = normalizeStylePropertyName(name);
+    const value = this.__bag[normalized];
+    return value == null ? '' : String(value);
+  }
+
+  __set(name: string, value: unknown): void {
+    if (value === '' || value === null || value === undefined) {
+      delete this.__bag[name];
+    } else {
+      this.__bag[name] = value;
+    }
+    this.__syncToElement();
+  }
+
+  __snapshot(): Record<string, unknown> {
+    return { ...this.__bag };
+  }
+
+  __syncToElement(): void {
+    this.__element.__props.style = this.__snapshot();
+    this.__element.__syncOriginalPropsIfNeeded();
+    this.__element.__markDirty();
+  }
+}
+
+function createStyleDeclaration(
+  element: ExactElement,
+  initialStyle: Record<string, unknown> | undefined,
+): ExactStyleDeclarationCore {
+  const core = new ExactStyleDeclarationCore(element, initialStyle);
+
+  return new Proxy(core, {
+    get(target, prop, receiver) {
+      if (typeof prop === 'string') {
+        if (prop in target) {
+          return Reflect.get(target, prop, receiver);
+        }
+        return target.getPropertyValue(prop);
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+    set(target, prop, value, receiver) {
+      if (typeof prop === 'string' && !(prop in target)) {
+        target.__set(normalizeStylePropertyName(prop), value);
+        return true;
+      }
+      return Reflect.set(target, prop, value, receiver);
+    },
+  });
+}
+
+export class ExactElement extends ExactContainerNodeBase {
+  readonly nodeType = 1;
+  readonly namespaceURI: string | null;
+  readonly tagName: string;
+  readonly nodeName: string;
+  __tagNameLower: string;
+  __node: ElementNode;
+  __tagConfig = defaultTagConfig;
+  __props: Record<string, unknown>;
+  __lastCommittedProps: Record<string, unknown>;
+  readonly classList: ExactClassList;
+  readonly style: ExactStyleDeclarationCore;
+  readonly __eventTypes = new Set<string>();
+  readonly __eventPropNames = new Map<string, string>();
+  readonly __eventCallbacks = new Map<string, Function>();
+
+  constructor(
+    state: ExactDOMState,
+    ownerDocument: ExactDocument,
+    tagName: string,
+    initialProps: Record<string, unknown>,
+    namespaceURI: string | null = null,
+  ) {
+    super(state, ownerDocument);
+    this.namespaceURI = namespaceURI;
+    this.__tagNameLower = tagName.toLowerCase();
+    this.tagName = this.__tagNameLower.toUpperCase();
+    this.nodeName = this.tagName;
+    this.__node = createInstance(tagName, initialProps);
+    this.__tagConfig = getTagConfig(tagName) ?? defaultTagConfig;
+    this.__props = cloneProps(initialProps);
+    this.__lastCommittedProps = cloneProps(initialProps);
+    this.classList = new ExactClassList(
+      this,
+      typeof this.__props.className === 'string' ? this.__props.className : '',
+    );
+    this.style = createStyleDeclaration(
+      this,
+      this.__props.style as Record<string, unknown> | undefined,
+    );
+
+    state.__registerWrapper(this.__node.id, this);
+  }
+
+  __getHostParent(): ElementNode | RootNode | null {
+    return this.__node;
+  }
+
+  get childNodes(): ExactChildNode[] {
+    return super.childNodes;
+  }
+
+  get firstChild(): ExactChildNode | null {
+    return super.firstChild;
+  }
+
+  get lastChild(): ExactChildNode | null {
+    return super.lastChild;
+  }
+
+  get className(): string {
+    return typeof this.__props.className === 'string' ? this.__props.className : '';
+  }
+
+  set className(value: string) {
+    this.classList.__replaceFromString(value);
+    this.classList.__syncToElement();
+  }
+
+  get id(): string {
+    return typeof this.__props.id === 'string' ? this.__props.id : '';
+  }
+
+  set id(value: string) {
+    this.setExactProp('id', value);
+  }
+
+  get textContent(): string {
+    return super.textContent;
+  }
+
+  set textContent(value: string) {
+    super.textContent = value;
+  }
+
+  get inert(): boolean {
+    return this.__props.inert === true;
+  }
+
+  set inert(value: boolean) {
+    this.setExactProp('inert', value);
+  }
+
+  get disabled(): boolean {
+    return this.__props.disabled === true;
+  }
+
+  set disabled(value: boolean) {
+    this.setExactProp('disabled', value);
+  }
+
+  get hidden(): boolean {
+    return this.__props.hidden === true;
+  }
+
+  set hidden(value: boolean) {
+    this.setExactProp('hidden', value);
+  }
+
+  get tabIndex(): number {
+    return typeof this.__props.tabIndex === 'number' ? this.__props.tabIndex : -1;
+  }
+
+  set tabIndex(value: number) {
+    this.setExactProp('tabIndex', value);
+  }
+
+  get value(): string {
+    return typeof this.__props.value === 'string' ? this.__props.value : '';
+  }
+
+  set value(value: string) {
+    this.setExactProp('value', value);
+  }
+
+  get checked(): boolean {
+    return this.__props.value === true;
+  }
+
+  set checked(value: boolean) {
+    this.setExactProp('value', value);
+  }
+
+  get readOnly(): boolean {
+    return this.__props.readOnly === true;
+  }
+
+  set readOnly(value: boolean) {
+    this.setExactProp('readOnly', value);
+  }
+
+  cloneNode(deep: boolean = false): ExactElement {
+    const clone = new ExactElement(
+      this.__state,
+      this.ownerDocument,
+      this.__tagNameLower,
+      cloneProps(this.__props),
+      this.namespaceURI,
+    );
+
+    if (deep) {
+      for (const child of this.__children) {
+        clone.appendChild(child.cloneNode(true) as ExactInsertableNode);
+      }
+    }
+
+    return clone;
+  }
+
+  setAttribute(name: string, value: string): void {
+    if (this.__state.destroyed) {
+      return;
+    }
+
+    const attrName = name === 'className' ? 'class' : name;
+
+    if (attrName === 'type' && this.__tagNameLower === 'input') {
+      this.__props.type = value;
+      this.__syncOriginalPropsIfNeeded();
+      if (value === 'checkbox' || value === 'radio') {
+        this.__recreateBackingNode('toggle');
+      } else if (this.__tagConfig.canonicalType === 'toggle') {
+        this.__recreateBackingNode('input');
+      }
+      return;
+    }
+
+    switch (attrName) {
+      case 'class':
+        this.className = value;
+        return;
+      case 'style':
+        this.style.cssText = value;
+        return;
+      case 'href':
+        if (__DEV__ && this.__tagNameLower === 'a') {
+          console.warn('[ExactDOM] <a href> is rendered as a pressable container; href is ignored.');
+        }
+        return;
+      default:
+        break;
+    }
+
+    const remapped = ATTR_TO_PROP[this.__tagNameLower]?.[attrName];
+    if (remapped) {
+      const numericValue = Number(value);
+      this.__props[remapped] = Number.isFinite(numericValue) ? numericValue : value;
+    } else {
+      this.__props[attrName] = value;
+    }
+
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  getAttribute(name: string): string | null {
+    const attrName = name === 'className' ? 'class' : name;
+    if (attrName === 'class') {
+      return this.className || null;
+    }
+    if (attrName === 'style') {
+      return this.style.cssText || null;
+    }
+    const remapped = ATTR_TO_PROP[this.__tagNameLower]?.[attrName];
+    const value = this.__props[remapped ?? attrName];
+    return value == null ? null : String(value);
+  }
+
+  hasAttribute(name: string): boolean {
+    return this.getAttribute(name) !== null;
+  }
+
+  removeAttribute(name: string): void {
+    if (this.__state.destroyed) {
+      return;
+    }
+
+    const attrName = name === 'className' ? 'class' : name;
+
+    if (attrName === 'type' && this.__tagNameLower === 'input') {
+      delete this.__props.type;
+      this.__syncOriginalPropsIfNeeded();
+      if (this.__tagConfig.canonicalType === 'toggle') {
+        this.__recreateBackingNode('input');
+      }
+      return;
+    }
+
+    if (attrName === 'class') {
+      this.className = '';
+      return;
+    }
+    if (attrName === 'style') {
+      this.style.cssText = '';
+      return;
+    }
+
+    const remapped = ATTR_TO_PROP[this.__tagNameLower]?.[attrName];
+    delete this.__props[remapped ?? attrName];
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  setAttributeNS(_namespaceURI: string | null, name: string, value: string): void {
+    this.setAttribute(name, value);
+  }
+
+  toggleAttribute(name: string, force?: boolean): boolean {
+    const shouldAdd = force ?? !this.hasAttribute(name);
+    if (shouldAdd) {
+      this.setAttribute(name, '');
+      return true;
+    }
+
+    this.removeAttribute(name);
+    return false;
+  }
+
+  setExactProp(name: string, value: unknown): void {
+    if (this.__state.destroyed) {
+      return;
+    }
+    this.__props[name] = value;
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  removeExactProp(name: string): void {
+    if (this.__state.destroyed) {
+      return;
+    }
+    delete this.__props[name];
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject | null,
+    options?: AddEventListenerOptions | boolean,
+  ): void {
+    super.addEventListener(type, callback, options);
+
+    if (!callback) {
+      return;
+    }
+
+    const propName = this.__resolveEventProp(type);
+    if (!propName) {
+      if (__DEV__) {
+        console.warn(`[ExactDOM] Unsupported event type "${type}"`);
+      }
+      return;
+    }
+
+    if (PRESS_EVENT_TYPES.has(type) && !this.__tagConfig.supportsPressEvents) {
+      this.__node.pressOverride = true;
+    }
+
+    this.__eventTypes.add(type);
+    this.__eventPropNames.set(type, propName);
+    this.__props[propName] = this.__getOrCreateEventCallback(type);
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject | null,
+    options?: EventListenerOptions | boolean,
+  ): void {
+    super.removeEventListener(type, callback, options);
+
+    const previousPropName = this.__eventPropNames.get(type);
+    if (!previousPropName) {
+      return;
+    }
+
+    if (this.hasListeners(type)) {
+      return;
+    }
+
+    delete this.__props[previousPropName];
+    this.__eventPropNames.delete(type);
+    this.__eventCallbacks.delete(type);
+    this.__eventTypes.delete(type);
+
+    if (
+      this.__node.pressOverride === true &&
+      !this.__tagConfig.supportsPressEvents &&
+      !Array.from(PRESS_EVENT_TYPES).some((eventType) => this.hasListeners(eventType))
+    ) {
+      this.__node.pressOverride = undefined;
+    }
+
+    this.__syncOriginalPropsIfNeeded();
+    this.__markDirty();
+  }
+
+  __syncOriginalPropsIfNeeded(): void {
+    if (!isCreatedNode(this.__node)) {
+      return;
+    }
+    this.__node.originalProps = cloneProps(this.__props);
+  }
+
+  __markDirty(): void {
+    this.__state.__markDirty(this);
+  }
+
+  __prepareForCommit(): void {
+    // The style proxy mutates its own bag in-place. Snapshot it immediately
+    // before diffing so host-ops sees one coherent style object per commit.
+    this.__props.style = this.style.__snapshot();
+  }
+
+  __getOrCreateEventCallback(domType: string): Function {
+    const existing = this.__eventCallbacks.get(domType);
+    if (existing) {
+      return existing;
+    }
+
+    const callback = (payload: unknown) => {
+      this.__syncNativeValue(domType, payload);
+      const event = this.__wrapPayload(domType, payload);
+      const nativePreventDefault = (event as Event & {
+        __nativePreventDefault?: (() => void) | undefined;
+      }).__nativePreventDefault;
+
+      if (nativePreventDefault) {
+        const originalPreventDefault = event.preventDefault.bind(event);
+        event.preventDefault = () => {
+          originalPreventDefault();
+          if (event.defaultPrevented) {
+            nativePreventDefault();
+          }
+        };
+      }
+
+      this.dispatchEvent(event);
+    };
+
+    this.__eventCallbacks.set(domType, callback);
+    return callback;
+  }
+
+  __resolveEventProp(type: string): string | null {
+    switch (type) {
+      case 'click':
+        return 'onPress';
+      case 'pointerdown':
+        return 'onPressIn';
+      case 'pointerup':
+        return 'onPressOut';
+      case 'focus':
+        return 'onFocus';
+      case 'blur':
+        return 'onBlur';
+      case 'focusin':
+        return 'onFocusIn';
+      case 'focusout':
+        return 'onFocusOut';
+      case 'keydown':
+        return 'onKeyDown';
+      case 'keyup':
+        return 'onKeyUp';
+      case 'change':
+        return this.__tagConfig.canonicalType === 'toggle' ? 'onValueChange' : 'onChange';
+      case 'input':
+        return 'onChangeText';
+      default:
+        return null;
+    }
+  }
+
+  __syncEventPropsFromListeners(): void {
+    for (const propName of this.__eventPropNames.values()) {
+      delete this.__props[propName];
+    }
+    this.__eventPropNames.clear();
+    this.__eventCallbacks.clear();
+
+    for (const eventType of this.__eventTypes) {
+      if (!this.hasListeners(eventType)) {
+        continue;
+      }
+
+      const propName = this.__resolveEventProp(eventType);
+      if (!propName) {
+        continue;
+      }
+
+      this.__eventPropNames.set(eventType, propName);
+      this.__props[propName] = this.__getOrCreateEventCallback(eventType);
+    }
+
+    this.__syncOriginalPropsIfNeeded();
+  }
+
+  __syncNativeValue(domType: string, payload: unknown): void {
+    switch (domType) {
+      case 'input':
+        if (typeof payload === 'string') {
+          this.__props.value = payload;
+        }
+        break;
+      case 'change':
+        if (this.__tagConfig.canonicalType === 'toggle') {
+          if (typeof payload === 'boolean') {
+            this.__props.value = payload;
+          } else if (typeof payload === 'object' && payload !== null) {
+            const value = (payload as { nativeEvent?: { value?: unknown } }).nativeEvent?.value;
+            if (typeof value === 'boolean') {
+              this.__props.value = value;
+            }
+          }
+        } else if (typeof payload === 'object' && payload !== null) {
+          const text =
+            (payload as { nativeEvent?: { text?: unknown }; text?: unknown }).nativeEvent?.text ??
+            (payload as { nativeEvent?: { text?: unknown }; text?: unknown }).text;
+          if (typeof text === 'string') {
+            this.__props.value = text;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  __wrapPayload(domType: string, payload: unknown): Event {
+    switch (domType) {
+      case 'keydown':
+      case 'keyup': {
+        const nativeEvent =
+          (payload as {
+            nativeEvent?: {
+              key?: unknown;
+              code?: unknown;
+              altKey?: unknown;
+              ctrlKey?: unknown;
+              metaKey?: unknown;
+              shiftKey?: unknown;
+              repeat?: unknown;
+            };
+            preventDefault?: unknown;
+          } | null)?.nativeEvent ?? {};
+
+        const event = new KeyboardEvent(domType, {
+          key: typeof nativeEvent.key === 'string' ? nativeEvent.key : '',
+          code: typeof nativeEvent.code === 'string' ? nativeEvent.code : '',
+          altKey: nativeEvent.altKey === true,
+          ctrlKey: nativeEvent.ctrlKey === true,
+          metaKey: nativeEvent.metaKey === true,
+          shiftKey: nativeEvent.shiftKey === true,
+          repeat: nativeEvent.repeat === true,
+          cancelable: true,
+          bubbles: false,
+        }) as KeyboardEvent & {
+          __nativePreventDefault?: (() => void) | undefined;
+        };
+
+        event.__nativePreventDefault =
+          typeof (payload as { preventDefault?: unknown } | null)?.preventDefault === 'function'
+            ? (payload as { preventDefault: () => void }).preventDefault
+            : undefined;
+        return event;
+      }
+      case 'focus':
+      case 'blur':
+      case 'focusin':
+      case 'focusout': {
+        const relatedTargetId =
+          (payload as {
+            nativeEvent?: { relatedTarget?: unknown };
+            relatedTarget?: unknown;
+          } | null)?.nativeEvent?.relatedTarget ??
+          (payload as {
+            nativeEvent?: { relatedTarget?: unknown };
+            relatedTarget?: unknown;
+          } | null)?.relatedTarget;
+
+        return new FocusEvent(domType, {
+          relatedTarget:
+            typeof relatedTargetId === 'number'
+              ? ((this.__state.__getWrapperById(relatedTargetId) as unknown as globalThis.EventTarget | null) ?? null)
+              : null,
+          cancelable: false,
+          bubbles: false,
+        });
+      }
+      case 'click':
+      case 'pointerdown':
+      case 'pointerup':
+        return new Event(domType, {
+          cancelable: true,
+          bubbles: false,
+        });
+      case 'input': {
+        const event = new Event(domType, {
+          cancelable: false,
+          bubbles: false,
+        }) as Event & { nativeEvent?: unknown };
+        event.nativeEvent = {
+          value: typeof payload === 'string' ? payload : '',
+        };
+        return event;
+      }
+      case 'change': {
+        const event = new Event(domType, {
+          cancelable: false,
+          bubbles: false,
+        }) as Event & { nativeEvent?: unknown };
+        if (this.__tagConfig.canonicalType === 'toggle') {
+          event.nativeEvent = {
+            value:
+              typeof payload === 'boolean'
+                ? payload
+                : (
+                    payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null
+                  )?.nativeEvent?.value ??
+                  (
+                    payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null
+                  )?.value ??
+                  false,
+          };
+        } else {
+          event.nativeEvent = payload;
+        }
+        return event;
+      }
+      default: {
+        const event = new Event(domType, {
+          cancelable: CANCELABLE_EVENTS.has(domType),
+          bubbles: false,
+        }) as Event & { nativeEvent?: unknown };
+        event.nativeEvent = payload;
+        return event;
+      }
+    }
+  }
+
+  __recreateBackingNode(newTag: string): void {
+    const parent = this.__parent instanceof ExactContainerNodeBase ? this.__parent : null;
+    const currentIndex = parent ? parent.__children.indexOf(this) : -1;
+    const nextRenderableSibling =
+      parent && currentIndex !== -1
+        ? findFirstRenderableFromIndex(parent.__children, currentIndex + 1)
+        : null;
+    const wasAttached = parent ? isParentAttachedToHost(parent) : false;
+    const oldNode = this.__node;
+
+    if (wasAttached && parent) {
+      const hostParent = parent.__getHostParent();
+      if (hostParent) {
+        hostRemoveChild(hostParent, oldNode);
+        this.__state.__noteCommitNeeded();
+      }
+    }
+
+    // Event prop names are tag-aware (`change` maps to `onChange` for text
+    // inputs but `onValueChange` for toggles). Rebuild the prop bag against the
+    // new tag config *before* creating the new host node so the initial
+    // CreateView payload is encoded with the correct handlers.
+    this.__tagConfig = getTagConfig(newTag) ?? defaultTagConfig;
+    this.__syncEventPropsFromListeners();
+
+    this.__state.__unregisterWrapper(oldNode.id);
+    this.__node = createInstance(newTag, cloneProps(this.__props));
+    this.__state.__registerWrapper(this.__node.id, this);
+
+    if (wasAttached && parent) {
+      const hostParent = parent.__getHostParent();
+      if (hostParent) {
+        if (nextRenderableSibling) {
+          hostInsertBefore(hostParent, this.__node, nextRenderableSibling.__node);
+        } else {
+          hostAppendChild(hostParent, this.__node);
+        }
+        this.__state.__noteCommitNeeded();
+      }
+    }
+
+    this.__lastCommittedProps = cloneProps(this.__props);
+    this.__state.__clearDirty(this);
+  }
+}
+
+export class ExactText extends ExactNodeBase {
+  readonly nodeType = 3;
+  readonly nodeName = '#text';
+  readonly __node: TextNode;
+  __pendingText: string | null = null;
+
+  constructor(state: ExactDOMState, ownerDocument: ExactDocument, value: string) {
+    super(state, ownerDocument);
+    this.__node = createTextInstance(value);
+    state.__registerWrapper(this.__node.id, this);
+  }
+
+  get data(): string {
+    return this.__node.text;
+  }
+
+  set data(value: string) {
+    this.__node.text = value;
+
+    if (this.__node.parent === null) {
+      this.__pendingText = isCreatedNode(this.__node) ? null : value;
+      return;
+    }
+
+    updateTextContent(this.__node, value);
+    this.__state.__noteCommitNeeded();
+  }
+
+  get textContent(): string {
+    return this.__pendingText ?? this.__node.text;
+  }
+
+  set textContent(value: string) {
+    this.data = value;
+  }
+
+  get nodeValue(): string {
+    return this.textContent;
+  }
+
+  set nodeValue(value: string) {
+    this.data = value;
+  }
+
+  cloneNode(): ExactText {
+    return new ExactText(this.__state, this.ownerDocument, this.textContent);
+  }
+
+  __flushPendingText(): void {
+    if (this.__pendingText === null || this.__node.parent === null) {
+      return;
+    }
+    updateTextContent(this.__node, this.__pendingText);
+    this.__pendingText = null;
+    this.__state.__noteCommitNeeded();
+  }
+}
+
+export class ExactComment extends ExactNodeBase {
+  readonly nodeType = 8;
+  readonly nodeName = '#comment';
+  data: string;
+
+  constructor(state: ExactDOMState, ownerDocument: ExactDocument, value: string) {
+    super(state, ownerDocument);
+    this.data = value;
+  }
+
+  get textContent(): string {
+    return this.data;
+  }
+
+  set textContent(value: string) {
+    this.data = value;
+  }
+
+  get nodeValue(): string {
+    return this.data;
+  }
+
+  set nodeValue(value: string) {
+    this.data = value;
+  }
+
+  cloneNode(): ExactComment {
+    return new ExactComment(this.__state, this.ownerDocument, this.data);
+  }
+}
+
+export class ExactDocumentFragment extends ExactContainerNodeBase {
+  readonly nodeType = 11;
+  readonly nodeName = '#document-fragment';
+
+  __getHostParent(): ElementNode | RootNode | null {
+    return null;
+  }
+
+  cloneNode(deep: boolean = false): ExactDocumentFragment {
+    const clone = new ExactDocumentFragment(this.__state, this.ownerDocument);
+    if (deep) {
+      for (const child of this.__children) {
+        clone.appendChild(child.cloneNode(true) as ExactInsertableNode);
+      }
+    }
+    return clone;
+  }
+}
+
+export class ExactRootBodyElement extends ExactContainerNodeBase {
+  readonly nodeType = 1;
+  readonly tagName = 'BODY';
+  readonly nodeName = 'BODY';
+
+  __getHostParent(): ElementNode | RootNode | null {
+    return this.__state.root;
+  }
+}
+
+export class ExactDocumentElement extends ExactNodeBase {
+  readonly nodeType = 1;
+  readonly tagName = 'HTML';
+  readonly nodeName = 'HTML';
+  get childNodes(): ExactChildNode[] {
+    return [this.ownerDocument.body as unknown as ExactChildNode];
+  }
+
+  get firstChild(): ExactChildNode | null {
+    return this.ownerDocument.body as unknown as ExactChildNode;
+  }
+
+  get lastChild(): ExactChildNode | null {
+    return this.ownerDocument.body as unknown as ExactChildNode;
+  }
+
+  get textContent(): string {
+    return this.ownerDocument.body.textContent;
+  }
+}
+
+export class ExactWindow extends EventTarget {
+  readonly __state: ExactDOMState;
+  readonly navigator = {
+    userAgent: 'ExactDOM/1.0',
+  };
+  readonly document: ExactDocument;
+
+  constructor(state: ExactDOMState, document: ExactDocument) {
+    super();
+    this.__state = state;
+    this.document = document;
+  }
+
+  get innerWidth(): number {
+    return readViewport(this.__state.rootId).width;
+  }
+
+  get innerHeight(): number {
+    return readViewport(this.__state.rootId).height;
+  }
+
+  requestAnimationFrame(callback: FrameRequestCallback): number {
+    if (typeof globalThis.requestAnimationFrame === 'function') {
+      return globalThis.requestAnimationFrame(callback);
+    }
+    return globalThis.setTimeout(() => callback(Date.now()), 16) as unknown as number;
+  }
+
+  cancelAnimationFrame(handle: number): void {
+    if (typeof globalThis.cancelAnimationFrame === 'function') {
+      globalThis.cancelAnimationFrame(handle);
+      return;
+    }
+    globalThis.clearTimeout(handle);
+  }
+
+  getComputedStyle(): { getPropertyValue: (name: string) => string } {
+    if (__DEV__) {
+      console.warn('[ExactDOM] getComputedStyle() is a stub in the DOM shim.');
+    }
+    return {
+      getPropertyValue: () => '',
+    };
+  }
+
+  __dispatchResize(): void {
+    this.dispatchEvent(new Event('resize'));
+  }
+}
+
+export class ExactDocument extends EventTarget {
+  readonly __state: ExactDOMState;
+  readonly body: ExactRootBodyElement;
+  readonly head: ExactDocumentFragment;
+  readonly documentElement: ExactDocumentElement;
+  defaultView: ExactWindow | null = null;
+
+  constructor(state: ExactDOMState) {
+    super();
+    this.__state = state;
+    this.body = new ExactRootBodyElement(state, this);
+    this.head = new ExactDocumentFragment(state, this);
+    this.documentElement = new ExactDocumentElement(state, this);
+    this.body.__parent = this.documentElement;
+  }
+
+  createElement(tagName: string): ExactElement {
+    const defaultProps = TAG_DEFAULTS[tagName.toLowerCase()] ?? {};
+    return new ExactElement(this.__state, this, tagName, cloneProps(defaultProps));
+  }
+
+  createElementNS(namespaceURI: string | null, tagName: string): ExactElement {
+    // SVG support in the shim is intentionally shallow, but DOM-targeting
+    // frameworks still expect `createElementNS` to exist. We keep the element
+    // creation path unified so tag-map resolution, defaults, and dirty
+    // tracking behave exactly the same as `createElement`.
+    const defaultProps = TAG_DEFAULTS[tagName.toLowerCase()] ?? {};
+    return new ExactElement(
+      this.__state,
+      this,
+      tagName,
+      cloneProps(defaultProps),
+      namespaceURI,
+    );
+  }
+
+  createTextNode(value: string): ExactText {
+    return new ExactText(this.__state, this, value);
+  }
+
+  createComment(value: string): ExactComment {
+    return new ExactComment(this.__state, this, value);
+  }
+
+  createDocumentFragment(): ExactDocumentFragment {
+    return new ExactDocumentFragment(this.__state, this);
+  }
+
+  importNode<T extends ExactChildNode | ExactDocumentFragment>(node: T, deep: boolean = false): T {
+    return node.cloneNode(deep) as T;
+  }
+
+  querySelector(selector: string): ExactElement | null {
+    return this.head.querySelector(selector) ?? this.body.querySelector(selector);
+  }
+}
+
+class ExactDOMState {
+  readonly rootId: number;
+  readonly root: RootNode;
+  readonly wrappers = new Map<number, ExactRenderableNode>();
+  readonly dirtyElements = new Set<ExactElement>();
+  document!: ExactDocument;
+  window!: ExactWindow;
+  destroyed = false;
+  flushScheduled = false;
+  needsCommit = false;
+  pendingRootSync = false;
+  pendingResize = false;
+  lastViewport: { width: number; height: number };
+  unsubscribeWindowState: Unsubscribe | null = null;
+
+  constructor(rootId: number) {
+    this.rootId = rootId;
+    this.root = createRoot(rootId, 'dom-shim');
+    this.lastViewport = readViewport(rootId);
+  }
+
+  __registerWrapper(id: number, wrapper: ExactRenderableNode): void {
+    this.wrappers.set(id, wrapper);
+  }
+
+  __unregisterWrapper(id: number): void {
+    this.wrappers.delete(id);
+  }
+
+  __getWrapperById(id: number): ExactRenderableNode | null {
+    return this.wrappers.get(id) ?? null;
+  }
+
+  __markDirty(element: ExactElement): void {
+    this.dirtyElements.add(element);
+    this.needsCommit = true;
+    this.__scheduleFlush();
+  }
+
+  __clearDirty(element: ExactElement): void {
+    this.dirtyElements.delete(element);
+  }
+
+  __noteCommitNeeded(): void {
+    this.needsCommit = true;
+    this.__scheduleFlush();
+  }
+
+  __scheduleRootSync(resizeChanged: boolean): void {
+    this.pendingRootSync = true;
+    this.pendingResize ||= resizeChanged;
+    this.__scheduleFlush();
+  }
+
+  __scheduleFlush(): void {
+    if (this.destroyed || this.flushScheduled) {
+      return;
+    }
+
+    this.flushScheduled = true;
+    queueMicrotask(() => {
+      this.flushScheduled = false;
+      this.__flush();
+    });
+  }
+
+  __flush(): void {
+    if (this.destroyed) {
+      return;
+    }
+
+    const stillDirty = new Set<ExactElement>();
+
+    for (const element of this.dirtyElements) {
+      if (this.destroyed) {
+        return;
+      }
+
+      if (element.__node.parent === null) {
+        stillDirty.add(element);
+        continue;
+      }
+
+      element.__prepareForCommit();
+      updateInstanceProps(
+        element.__node,
+        element.__lastCommittedProps,
+        element.__props,
+      );
+      element.__lastCommittedProps = cloneProps(element.__props);
+    }
+
+    this.dirtyElements.clear();
+    for (const element of stillDirty) {
+      this.dirtyElements.add(element);
+    }
+
+    if (this.pendingRootSync) {
+      this.pendingRootSync = false;
+      syncRootWindowState(this.root);
+      this.needsCommit = false;
+    } else if (this.needsCommit) {
+      this.needsCommit = false;
+      commitBatch(this.root);
+    }
+
+    if (this.pendingResize) {
+      this.pendingResize = false;
+      this.window.__dispatchResize();
+    }
+  }
+
+  destroy(): void {
+    if (this.destroyed) {
+      return;
+    }
+
+    this.destroyed = true;
+    this.unsubscribeWindowState?.();
+    this.unsubscribeWindowState = null;
+    this.dirtyElements.clear();
+    this.wrappers.clear();
+    this.document.body.__children = [];
+    destroyRoot(this.rootId);
+  }
+}
+
+function findFirstRenderableFromIndex(
+  nodes: ExactChildNode[],
+  startIndex: number,
+): ExactRenderableNode | null {
+  for (let index = startIndex; index < nodes.length; index += 1) {
+    const child = nodes[index];
+    if (child && isRenderableNode(child)) {
+      return child;
+    }
+  }
+  return null;
+}
+
+function normalizeAppendableNode(
+  ownerDocument: ExactDocument,
+  node: ExactAppendableNode,
+): ExactInsertableNode {
+  return typeof node === 'string' ? ownerDocument.createTextNode(node) : node;
+}
+
+function querySelectorInChildren(
+  children: ExactChildNode[],
+  selector: string,
+): ExactElement | null {
+  const isIdSelector = selector.startsWith('#');
+  const id = isIdSelector ? selector.slice(1) : null;
+  const tag = isIdSelector ? null : selector.toUpperCase();
+
+  for (const child of children) {
+    if (child instanceof ExactElement) {
+      if (id !== null && child.id === id) {
+        return child;
+      }
+      if (tag !== null && child.tagName === tag) {
+        return child;
+      }
+
+      const nested = querySelectorInChildren(child.__children, selector);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
+function isParentAttachedToHost(parent: ExactParentNode): boolean {
+  if (parent instanceof ExactRootBodyElement) {
+    return !parent.__state.destroyed;
+  }
+  if (parent instanceof ExactDocumentFragment) {
+    return false;
+  }
+  return parent.__node.parent !== null;
+}
+
+function ensureSameRoot(parent: ExactParentNode, child: ExactInsertableNode): void {
+  if (child.__rootId !== parent.__rootId) {
+    throw new Error('[ExactDOM] Cannot move a node between different DOM roots.');
+  }
+}
+
+function removeNodeFromParent(parent: ExactParentNode, child: ExactChildNode): ExactChildNode {
+  const index = parent.__children.indexOf(child);
+  if (index === -1) {
+    throw new Error('[ExactDOM] removeChild: node is not a child of this parent.');
+  }
+
+  parent.__children.splice(index, 1);
+  child.__parent = null;
+
+  if (isRenderableNode(child) && isParentAttachedToHost(parent)) {
+    const hostParent = parent.__getHostParent();
+    if (hostParent) {
+      hostDetachChild(hostParent, child.__node);
+      parent.__state.__noteCommitNeeded();
+    }
+  } else if (isRenderableNode(child) && parent instanceof ExactElement) {
+    // Detached DOM trees still need their backing Exact-node structure kept in
+    // sync so a later first attachment can encode the full subtree correctly.
+    hostTreeRemoveChild(parent.__node, child.__node);
+  }
+
+  return child;
+}
+
+function primeCreatedElementSubtree(element: ExactElement): void {
+  // Created detached nodes keep `originalProps` synchronized as props change so
+  // the eventual CreateView payload sees the latest values. Event bindings,
+  // however, live on `instance.events`, so we prime them explicitly right
+  // before the first host attachment of the subtree.
+  element.__prepareForCommit();
+  element.__node.originalProps = cloneProps(element.__props);
+  processEventProps(element.__node, element.__props, element.__tagConfig);
+
+  for (const child of element.__children) {
+    if (child instanceof ExactElement && isCreatedNode(child.__node)) {
+      primeCreatedElementSubtree(child);
+    }
+  }
+}
+
+function finalizeCreatedElementSubtree(
+  state: ExactDOMState,
+  element: ExactElement,
+): void {
+  // The subtree was just emitted via `encodeCreatedSubtree`, so its current
+  // props now represent the committed baseline. Clear the dirty bookkeeping to
+  // avoid an immediate duplicate diff on the next microtask.
+  element.__lastCommittedProps = cloneProps(element.__props);
+  state.__clearDirty(element);
+
+  for (const child of element.__children) {
+    if (child instanceof ExactElement && !isCreatedNode(child.__node)) {
+      finalizeCreatedElementSubtree(state, child);
+    }
+  }
+}
+
+function insertNodeIntoParent(
+  parent: ExactParentNode,
+  child: ExactInsertableNode,
+  beforeChild: ExactChildNode | null,
+): ExactInsertableNode {
+  if (parent.__state.destroyed) {
+    return child;
+  }
+
+  if (child instanceof ExactDocumentFragment) {
+    const children = child.__children.slice();
+    for (const fragmentChild of children) {
+      insertNodeIntoParent(parent, fragmentChild, beforeChild);
+    }
+    child.__children = [];
+    return child;
+  }
+
+  ensureSameRoot(parent, child);
+
+  if (beforeChild && beforeChild.__parent !== parent) {
+    throw new Error('[ExactDOM] insertBefore: reference node is not a child of this parent.');
+  }
+
+  if (child === beforeChild) {
+    return child;
+  }
+
+  if (child.__parent instanceof ExactContainerNodeBase) {
+    removeNodeFromParent(child.__parent, child);
+  }
+
+  const insertionIndex =
+    beforeChild == null ? parent.__children.length : parent.__children.indexOf(beforeChild);
+  parent.__children.splice(insertionIndex, 0, child);
+  child.__parent = parent;
+
+  if (isRenderableNode(child) && isParentAttachedToHost(parent)) {
+    const wasCreatedElement = child instanceof ExactElement && isCreatedNode(child.__node);
+    const hostParent = parent.__getHostParent();
+    if (hostParent) {
+      if (wasCreatedElement) {
+        primeCreatedElementSubtree(child);
+      }
+
+      const renderableAnchor = findFirstRenderableFromIndex(
+        parent.__children,
+        insertionIndex + 1,
+      );
+      if (renderableAnchor) {
+        hostInsertBefore(hostParent, child.__node, renderableAnchor.__node);
+      } else {
+        hostAppendChild(hostParent, child.__node);
+      }
+
+      if (child instanceof ExactText) {
+        child.__flushPendingText();
+      } else if (wasCreatedElement) {
+        finalizeCreatedElementSubtree(parent.__state, child);
+      }
+
+      parent.__state.__noteCommitNeeded();
+    }
+  } else if (isRenderableNode(child) && parent instanceof ExactElement) {
+    // Keep the detached backing tree structurally accurate even before the
+    // subtree is attached to a real Exact root. Svelte, in particular, builds
+    // and clones DOM subtrees off-screen and expects that later first
+    // attachment will preserve those descendants.
+    const renderableAnchor = findFirstRenderableFromIndex(parent.__children, insertionIndex + 1);
+    if (renderableAnchor) {
+      hostTreeInsertBefore(parent.__node, child.__node, renderableAnchor.__node);
+    } else {
+      hostTreeAppendChild(parent.__node, child.__node);
+    }
+  }
+
+  return child;
+}
+
+export interface ExactDOMHandle {
+  readonly rootId: number;
+  readonly document: ExactDocument;
+  readonly window: ExactWindow;
+  destroy(): void;
+  reset(): ExactDOMHandle;
+}
+
+export function createExactDOM(options: { rootId?: number } = {}): ExactDOMHandle {
+  const rootId = options.rootId ?? 0;
+  const state = new ExactDOMState(rootId);
+  const document = new ExactDocument(state);
+  const window = new ExactWindow(state, document);
+  document.defaultView = window;
+  state.document = document;
+  state.window = window;
+
+  state.unsubscribeWindowState = subscribeToRootWindowState(rootId, () => {
+    const nextViewport = readViewport(rootId);
+    const resizeChanged =
+      nextViewport.width !== state.lastViewport.width ||
+      nextViewport.height !== state.lastViewport.height;
+    state.lastViewport = nextViewport;
+    state.__scheduleRootSync(resizeChanged);
+  });
+
+  return {
+    rootId,
+    document,
+    window,
+    destroy(): void {
+      state.destroy();
+    },
+    reset(): ExactDOMHandle {
+      state.destroy();
+      return createExactDOM({ rootId });
+    },
+  };
+}