@craft-ts/component 0.7.0-beta.13

package/src/lib/render/interpreter.js

@@ -0,0 +1,3588 @@
+import { CRAFT_SERVICE_PROVIDER_BRAND, CRAFT_DOM_EVENT_HOOK, CRAFT_NODE_DIRECTIVE, CRAFT_NODE_EFFECT_FACTORY, CRAFT_FIELD_EXCEPTION_BOUNDARY, CRAFT_FIELD_EXCEPTION_SOURCE, CRAFT_TEMPORAL_RUNTIME, COMPONENT_REGISTER, craftEffect, craftLazy, createBrowserDomAdapter, registerCraftSyncTemplateFlush, executeYieldable, HOST_TAG_LIST, executeTemplateTrace, isCraftException, isCraftGenShortCircuit, isCraftNotSettled, ɵwithSettledReadObserver, isGeneratorFunction, isCraftField, isGenerator, markYieldableValue, markYieldableMethod, isYieldableValue, isYieldableMethod, isYieldableReactiveValue, DEEP_YIELDABLE, provideHostName, rawReactiveFacade, rawReactiveValue, toYieldable, yieldableInvocation, ɵfallbackComponentRegister, ɵregisterCraftTarget, ɵcraftInjectorFromHost, fieldExceptionVisibilityMatches, YIELDABLE_VALUE, RealCraftTemporalRuntime, CRAFT_HYDRATION_ID, childCraftRenderIdentity, createCraftRenderIdentity, CRAFT_SSR_POLICY, CRAFT_MATCH, } from '@craft-ts/core';
+import { executeCraftComponentFactory } from '../factory-runtime';
+import { computed, createEnvironmentInjector, ElementRef, EnvironmentInjector, Injector, runInInjectionContext, signal, untracked, } from '../host-runtime';
+import { CRAFT_COMPONENT, CRAFT_DIRECTIVE, CONTENT_DECLARATION_CONTEXT, } from '../types';
+import { cssVarStyles } from '../css-vars';
+import { normalizeChildren, mergeHostProps, withCraftRenderContext, CRAFT_NODE_DIRECTIVES, } from './vnode';
+import { CraftUnhandledPendingError, resolvePendingBlockHandler, } from '../pending-block';
+import { CraftUnhandledExceptionError, resolveCatchBlockHandler, } from '../block';
+import { EACH_SCHEDULER, createEachScheduler, } from '../each-scheduling';
+import { executeCraftComponentFactoryAsync } from '../factory-runtime';
+import { CRAFT_STYLE_REGISTRY, ɵfallbackCraftStyleRegistry, } from './style-registry';
+import { scopeCss, scopeIdFor, validateStyleScope } from './style-scope';
+import { CRAFT_LOCATOR_CONTENT_NAMES, directCraftContentNames, findCraftTemplateLocator, } from '../locator';
+import { HydrationMismatchError } from './hydration';
+import { setNodeHydrationKey } from './hydration-metadata';
+let templateGeneratorDepth = 0;
+function childContext(context, overrides = {}) {
+    return { ...context, ...overrides };
+}
+function childNodeContext(context, node, index) {
+    const segments = node.kind === 'component'
+        ? [node.component[CRAFT_COMPONENT].name, index]
+        : node.kind === 'each'
+            ? [`each:${node.sourceName ?? index}`]
+            : node.kind === 'if'
+                ? [`if:${node.conditionName}`]
+                : [index];
+    return childContext(context, {
+        identity: childCraftRenderIdentity(context.identity, ...segments),
+    });
+}
+function lexicalContext(context) {
+    return context.declarationContext ?? context;
+}
+function preserveContentDeclarationContext(value, context) {
+    if (typeof value !== 'function')
+        return value;
+    if (value[CONTENT_DECLARATION_CONTEXT] !== undefined) {
+        return value;
+    }
+    const wrapped = (...args) => value(...args);
+    Object.defineProperty(wrapped, CONTENT_DECLARATION_CONTEXT, {
+        value: context,
+        enumerable: false,
+        configurable: false,
+        writable: false,
+    });
+    return wrapped;
+}
+function renderChildrenCallback(context, callback, args = [], kind = 'callback', name) {
+    const phase = tracePhase(context);
+    return executeTemplateTrace(context.injector, traceContext(context, kind, phase, name ?? callback.name), () => invokeChildrenCallback(context, callback, args));
+}
+function invokeChildrenCallback(context, callback, args) {
+    return runInInjectionContext(context.injector, () => withCraftRenderContext(context, () => callback(...args)));
+}
+function renderBlockChildren(context, name, callback, args = []) {
+    return executeTemplateTrace(context.injector, traceContext(context, 'block', tracePhase(context), name), () => invokeChildrenCallback(context, callback, args));
+}
+function renderDeferChildren(context, name, callback, args = []) {
+    return executeTemplateTrace(context.injector, traceContext(context, 'defer', tracePhase(context), name), () => invokeChildrenCallback(context, callback, args));
+}
+function tracePhase(context) {
+    return (context.traceState?.renderCount ?? 0) <= 1
+        ? 'initialRender'
+        : 'update';
+}
+function traceContext(context, kind, phase, name) {
+    return {
+        kind,
+        phase,
+        ...(context.componentName ? { componentName: context.componentName } : {}),
+        ...(name ? { name } : {}),
+        ...(context.directiveNames && context.directiveNames.length > 0
+            ? { directiveNames: context.directiveNames }
+            : {}),
+        renderCount: context.traceState?.renderCount ?? 0,
+    };
+}
+function traceComponentLifecycle(injector, phase, componentName, renderCount) {
+    executeTemplateTrace(injector, {
+        kind: 'component',
+        phase,
+        componentName,
+        renderCount,
+    }, () => []);
+}
+function eagerlyResolveBrandedProviders(providers, injector, branded = false) {
+    const overrides = [];
+    const trackers = [];
+    for (const provider of providers) {
+        if (Array.isArray(provider)) {
+            const result = eagerlyResolveBrandedProviders(provider, injector, branded || CRAFT_SERVICE_PROVIDER_BRAND in provider);
+            overrides.push(...result.overrides);
+            trackers.push(...result.trackers);
+            if (result.exception) {
+                return { exception: result.exception, overrides, trackers };
+            }
+            continue;
+        }
+        if (!branded || typeof provider !== 'object' || provider === null) {
+            continue;
+        }
+        const token = Reflect.get(provider, 'provide');
+        const useFactory = Reflect.get(provider, 'useFactory');
+        if (token !== undefined && branded && typeof useFactory === 'function') {
+            // Resolve Craft providers through a computed so signals read by their
+            // factories remain dependencies of the component render effect.
+            const resolved = computed(() => runInInjectionContext(injector, useFactory));
+            trackers.push(resolved);
+            const value = resolved();
+            if (isCraftException(value)) {
+                return { exception: value, overrides, trackers };
+            }
+            overrides.push({ provide: token, useValue: value });
+        }
+    }
+    return { overrides, trackers };
+}
+function findResourceException(value, seen = new Set()) {
+    if (typeof value !== 'object' || value === null || seen.has(value)) {
+        return undefined;
+    }
+    seen.add(value);
+    const candidate = value;
+    if (typeof candidate.exceptions === 'function') {
+        const exceptions = (isYieldableReactiveValue(candidate.exceptions)
+            ? rawReactiveValue(candidate.exceptions)()
+            : candidate.exceptions());
+        const exception = exceptions.list?.find(isCraftException);
+        if (exception)
+            return exception;
+    }
+    if (Array.isArray(value)) {
+        for (const child of value) {
+            const exception = findResourceException(child, seen);
+            if (exception)
+                return exception;
+        }
+        return undefined;
+    }
+    for (const child of Object.values(value)) {
+        const exception = findResourceException(child, seen);
+        if (exception)
+            return exception;
+    }
+    return undefined;
+}
+function scopeTokens(parent, own) {
+    return [parent, own].filter(Boolean).join(' ');
+}
+function styleValues(styles) {
+    return typeof styles === 'string' ? [styles] : (styles ?? []);
+}
+function acquireStyles(context, owners, ownerScope) {
+    if (context.serverStyles) {
+        return owners.flatMap((owner, index) => {
+            const css = styleValues(owner.styles);
+            if (!css.length)
+                return [];
+            const scope = scopeIdFor(owner.definition ?? {}, owner.name);
+            const dev = typeof ngDevMode === 'undefined' || ngDevMode;
+            if (dev)
+                validateStyleScope(scope, css.join('\n'));
+            return [
+                context.serverStyles.acquire(`craft:${ownerScope}:${scope}`, scopeCss(ownerScope, css.join('\n')), index),
+            ];
+        });
+    }
+    if (!context.styleRoot || !context.styles)
+        return [];
+    const registry = context.styles;
+    const releases = [];
+    owners.forEach((owner, index) => {
+        const css = styleValues(owner.styles);
+        if (!css.length)
+            return;
+        const scope = scopeIdFor(owner.definition ?? {}, owner.name);
+        const dev = typeof ngDevMode === 'undefined' || ngDevMode;
+        if (dev)
+            validateStyleScope(scope, css.join('\n'));
+        releases.push(registry.acquire(context.styleRoot, `craft:${ownerScope}:${scope}`, scopeCss(ownerScope, css.join('\n')), index));
+    });
+    return releases;
+}
+function contentScopeId(ownerScope, slotName) {
+    return `${ownerScope}::content::${slotName}`;
+}
+function acquireContentStyle(context, slotName, stylePolicy) {
+    if (stylePolicy !== 'allow-container-styles' ||
+        !slotName ||
+        !context.ownerScope ||
+        !context.contentStyles?.[slotName] ||
+        (!context.serverStyles && (!context.styleRoot || !context.styles))) {
+        return { release: () => undefined };
+    }
+    const scope = contentScopeId(context.ownerScope, slotName);
+    const css = scopeCss(scope, context.contentStyles[slotName], {
+        rootAttribute: 'data-craft-content',
+        limitSelector: '[data-craft-root]',
+    });
+    const release = context.serverStyles
+        ? context.serverStyles.acquire(`craft:content:${scope}`, css, 1000)
+        : context.styles.acquire(context.styleRoot, `craft:content:${scope}`, css, 1000);
+    return { scope, release };
+}
+function activeSsrRoute(context) {
+    const match = context.injector.get(CRAFT_MATCH, null);
+    try {
+        return match?.()?.route?.path;
+    }
+    catch {
+        return undefined;
+    }
+}
+function createRenderEffect(context, name, effectFn) {
+    // One token per binding: a binding that suspends holds it until it next runs
+    // to completion. The effect stays subscribed across the suspension — the
+    // settled read registered its source's `status` before throwing — so the
+    // boundary is released without any polling.
+    const token = {};
+    // A binding that short-circuited must tell its boundary when it recovers —
+    // but only that binding, so a sibling still in exception keeps its fallback.
+    let shortCircuited = false;
+    const ref = createEffectInInjector(context.injector, name, () => {
+        try {
+            // A settled read reports its source while it evaluates — that is how the
+            // boundary learns about a source that is refetching rather than
+            // suspending, since a refetch throws nothing.
+            ɵwithSettledReadObserver(context.settledReadObserver, effectFn);
+        }
+        catch (error) {
+            if (isCraftNotSettled(error)) {
+                if (!context.pendingBoundary) {
+                    if (context.ssr) {
+                        const routePolicy = context.injector.get(CRAFT_SSR_POLICY, null);
+                        if (routePolicy) {
+                            context.ssr.suspend(token, error.source, routePolicy.mode, {
+                                route: activeSsrRoute(context),
+                                timeoutMs: routePolicy.timeoutMs,
+                            });
+                            return;
+                        }
+                        context.ssr.unhandled(error.source, activeSsrRoute(context));
+                    }
+                    throw new CraftUnhandledPendingError(error.source);
+                }
+                context.pendingBoundary.suspend(token, error.source);
+                return;
+            }
+            if (!isCraftGenShortCircuit(error))
+                throw error;
+            // A settled read whose source carries a business exception: route it to
+            // the nearest catchBlock, exactly like a component initialization one.
+            context.pendingBoundary?.resume(token);
+            if (!context.exceptionBoundary?.(error.exception, token)) {
+                throw new CraftUnhandledExceptionError(error.exception);
+            }
+            shortCircuited = true;
+            return;
+        }
+        context.ssr?.resume(token);
+        context.pendingBoundary?.resume(token);
+        if (shortCircuited) {
+            shortCircuited = false;
+            context.exceptionBoundaryResolved?.(token);
+        }
+    });
+    return {
+        destroy: () => {
+            context.ssr?.resume(token);
+            context.pendingBoundary?.resume(token);
+            if (shortCircuited)
+                context.exceptionBoundaryResolved?.(token);
+            ref.destroy();
+        },
+    };
+}
+function createEffectInInjector(injector, name, effectFn) {
+    return untracked(() => runInInjectionContext(injector, () => craftEffect(name, effectFn, { manualCleanup: true })));
+}
+function executeTemplateCallback(callback, args, context) {
+    const isGeneratorCallback = isGeneratorFunction(callback);
+    if (isGeneratorCallback)
+        templateGeneratorDepth++;
+    try {
+        return executeYieldable(callback, args, context.injector);
+    }
+    finally {
+        if (isGeneratorCallback)
+            templateGeneratorDepth--;
+    }
+}
+function resolveTemplateValue(value, context) {
+    return typeof value === 'function'
+        ? executeTemplateCallback(value, [], context)
+        : value;
+}
+function resolveTemplateContext(context, renderContext) {
+    if (typeof context === 'function') {
+        return resolveTemplateValue(context, renderContext);
+    }
+    if (context === null ||
+        typeof context !== 'object' ||
+        Array.isArray(context)) {
+        return context;
+    }
+    return Object.fromEntries(Object.entries(context).map(([key, value]) => [
+        key,
+        typeof value === 'function'
+            ? resolveTemplateValue(value, renderContext)
+            : value,
+    ]));
+}
+function resolveProjectionValue(value, renderContext) {
+    let current = value;
+    for (let depth = 0; depth < 3 && typeof current === 'function'; depth++) {
+        current = resolveTemplateValue(current, renderContext);
+    }
+    return current;
+}
+function projectYieldableTemplateContext(value, seen = new WeakMap()) {
+    // Field trees are dynamic proxies: copying their enumerable members would
+    // discard lazily-created child fields such as `form.email`.
+    if (isCraftField(value))
+        return value;
+    if (isYieldableValue(value)) {
+        const projected = (...args) => {
+            const result = Reflect.apply(value, undefined, args);
+            if (templateGeneratorDepth === 0)
+                return result;
+            return toYieldable(() => result)();
+        };
+        const namedProjected = markYieldableValue(projected, value[YIELDABLE_VALUE]);
+        if (typeof value === 'function' &&
+            (Object.keys(value).length > 0 || DEEP_YIELDABLE in value)) {
+            return new Proxy(namedProjected, {
+                get(_target, property) {
+                    return projectYieldableTemplateContext(Reflect.get(value, property), seen);
+                },
+            });
+        }
+        return namedProjected;
+    }
+    if (typeof value === 'function') {
+        if (isYieldableMethod(value)) {
+            return (...args) => {
+                const result = Reflect.apply(value, undefined, args);
+                if (templateGeneratorDepth === 0)
+                    return result;
+                return toYieldable(() => result)();
+            };
+        }
+        // State and resource refs are callable objects with exposed insertions
+        // (for example `counter.disabled`). Keep the callable ref intact while
+        // projecting its nested yieldable members into the template context.
+        if (Object.keys(value).length === 0)
+            return value;
+        if (seen.has(value))
+            return seen.get(value);
+        const projected = new Proxy(value, {
+            get(target, property, receiver) {
+                return projectYieldableTemplateContext(Reflect.get(target, property, receiver), seen);
+            },
+        });
+        seen.set(value, projected);
+        return projected;
+    }
+    if (typeof value !== 'object' || value === null)
+        return value;
+    // Craft nodes carry runtime objects such as RenderContext and the DOM adapter
+    // through their declaration context. Copying them as plain objects would
+    // strip prototype methods from those runtime services before projection.
+    if ('kind' in value &&
+        typeof value.kind === 'string') {
+        return value;
+    }
+    if (seen.has(value))
+        return seen.get(value);
+    if (Array.isArray(value)) {
+        const result = [];
+        seen.set(value, result);
+        for (const item of value) {
+            result.push(projectYieldableTemplateContext(item, seen));
+        }
+        return result;
+    }
+    const result = {};
+    seen.set(value, result);
+    for (const [key, child] of Object.entries(value)) {
+        result[key] = projectYieldableTemplateContext(child, seen);
+    }
+    return result;
+}
+class CraftNodeDirectiveMount {
+    inputs;
+    environmentInjector;
+    cleanup;
+    registrationRelease;
+    constructor(descriptor, element, context) {
+        this.inputs = signal(descriptor.inputs);
+        const definition = descriptor.directive[CRAFT_NODE_DIRECTIVE];
+        this.environmentInjector = createEnvironmentInjector([
+            { provide: ElementRef, useValue: new ElementRef(element) },
+            {
+                provide: CRAFT_NODE_EFFECT_FACTORY,
+                deps: [Injector],
+                useFactory: (injector) => (name, effectFn) => createEffectInInjector(injector, `node-directive-${name}`, effectFn),
+            },
+            ...(context.fieldExceptionBoundary
+                ? [
+                    {
+                        provide: CRAFT_FIELD_EXCEPTION_BOUNDARY,
+                        useValue: context.fieldExceptionBoundary,
+                    },
+                ]
+                : []),
+        ], context.injector.get(EnvironmentInjector), `CraftNodeDirective(${definition.name})`);
+        const inputs = this.inputs;
+        const nodeContext = {
+            element,
+            injector: this.environmentInjector,
+            renderer: context.renderer,
+            get props() {
+                return inputs();
+            },
+        };
+        this.registrationRelease = ɵregisterCraftTarget(this.environmentInjector, descriptor.directive, nodeContext, allocateCraftHostName(this.environmentInjector, 'directive', definition.name), false);
+        const cleanup = untracked(() => runInInjectionContext(this.environmentInjector, () => definition.mount(nodeContext)));
+        this.cleanup = typeof cleanup === 'function' ? cleanup : undefined;
+    }
+    update(descriptor) {
+        this.inputs.set(descriptor.inputs);
+    }
+    destroy() {
+        this.registrationRelease();
+        this.cleanup?.();
+        this.environmentInjector.destroy();
+    }
+}
+function sameCraftDirectives(left, right) {
+    return (left.length === right.length &&
+        left.every((directive, index) => directive === right[index]));
+}
+function sameCraftNodeDirectives(left, right) {
+    return (left.length === right.length &&
+        left.every((descriptor, index) => descriptor.directive === right[index]?.directive));
+}
+function insertBefore(renderer, parent, node, before) {
+    renderer.insertBefore(parent, node, before);
+}
+function removeNode(renderer, node) {
+    const parent = node.parentNode;
+    if (parent) {
+        renderer.removeChild(parent, node);
+    }
+}
+function isElementNode(node) {
+    return (typeof node === 'object' &&
+        node !== null &&
+        node.nodeType === 1);
+}
+function mountComment(parent, value, before, context) {
+    if (context.mode === 'hydrate' && context.hydration) {
+        try {
+            return context.hydration.claimBoundary(context.identity.hydrationKey, value);
+        }
+        catch (error) {
+            if (!(error instanceof HydrationMismatchError))
+                throw error;
+            context.hydration.recordMismatch(error);
+        }
+    }
+    const comment = context.renderer.createComment(context.emitHydrationKeys
+        ? `${value}|hk:${context.identity.hydrationKey}`
+        : value);
+    insertBefore(context.renderer, parent, comment, before);
+    return comment;
+}
+function createElementForRender(tag, parent, before, context) {
+    if (context.mode === 'hydrate' && context.hydration) {
+        try {
+            return {
+                element: context.hydration.claimElement(context.identity.hydrationKey, tag),
+                context,
+            };
+        }
+        catch (error) {
+            if (!(error instanceof HydrationMismatchError))
+                throw error;
+            context.hydration.recordMismatch(error);
+            const actual = error.actualNode;
+            const replacementBefore = actual?.parentNode === parent ? actual.nextSibling : before;
+            if (actual?.parentNode)
+                removeNode(context.renderer, actual);
+            const createContext = childContext(context, {
+                mode: 'create',
+                hydration: undefined,
+            });
+            const element = createContext.renderer.createElement(tag);
+            if (createContext.emitHydrationKeys) {
+                createContext.renderer.setAttribute(element, 'data-craft-hk', createContext.identity.hydrationKey);
+            }
+            insertBefore(createContext.renderer, parent, element, replacementBefore);
+            return { element, context: createContext };
+        }
+    }
+    const element = context.renderer.createElement(tag);
+    if (context.emitHydrationKeys) {
+        context.renderer.setAttribute(element, 'data-craft-hk', context.identity.hydrationKey);
+    }
+    insertBefore(context.renderer, parent, element, before);
+    return { element, context };
+}
+function createTextForRender(value, parent, before, context, compare) {
+    if (context.mode === 'hydrate' && context.hydration) {
+        try {
+            return {
+                text: context.hydration.claimText(context.identity.hydrationKey, compare ? value : undefined),
+                context,
+            };
+        }
+        catch (error) {
+            if (!(error instanceof HydrationMismatchError))
+                throw error;
+            context.hydration.recordMismatch(error);
+            const actual = error.actualNode;
+            const replacementBefore = actual?.parentNode === parent ? actual.nextSibling : before;
+            if (actual?.parentNode)
+                removeNode(context.renderer, actual);
+            const createContext = childContext(context, {
+                mode: 'create',
+                hydration: undefined,
+            });
+            const text = createContext.renderer.createText(value);
+            if (createContext.emitHydrationKeys) {
+                setNodeHydrationKey(text, createContext.identity.hydrationKey);
+            }
+            insertBefore(createContext.renderer, parent, text, replacementBefore);
+            return { text, context: createContext };
+        }
+    }
+    const text = context.renderer.createText(value);
+    if (context.emitHydrationKeys) {
+        setNodeHydrationKey(text, context.identity.hydrationKey);
+    }
+    insertBefore(context.renderer, parent, text, before);
+    return { text, context };
+}
+function patchRenderedChildren(parent, rendered, children, before, context) {
+    const nextNodes = normalizeChildren(children);
+    const sharedLength = Math.min(rendered.length, nextNodes.length);
+    for (let index = 0; index < sharedLength; index += 1) {
+        const current = rendered[index];
+        const next = nextNodes[index];
+        if (!current.patch(next)) {
+            const replacement = mountNode(next, parent, current.firstNode(), childNodeContext(context, next, index));
+            current.destroy();
+            rendered[index] = replacement;
+        }
+    }
+    while (rendered.length > nextNodes.length) {
+        rendered.pop()?.destroy();
+    }
+    for (let index = rendered.length; index < nextNodes.length; index += 1) {
+        rendered.push(mountNode(nextNodes[index], parent, before, childNodeContext(context, nextNodes[index], index)));
+    }
+    return rendered;
+}
+class TextRenderedNode {
+    kind = 'text';
+    node;
+    value;
+    renderer;
+    constructor(node, value, renderer) {
+        this.node = node;
+        this.value = value;
+        this.renderer = renderer;
+    }
+    firstNode() {
+        return this.node;
+    }
+    lastNode() {
+        return this.node;
+    }
+    patch(node) {
+        if (node.kind !== 'text') {
+            return false;
+        }
+        if (node.value !== this.value) {
+            this.renderer.setValue(this.node, node.value);
+            this.value = node.value;
+        }
+        return true;
+    }
+    destroy() {
+        removeNode(this.renderer, this.node);
+    }
+}
+class ReactiveTextRenderedNode {
+    kind = 'reactive-text';
+    binding;
+    effectRef;
+    value = '';
+    node;
+    context;
+    constructor(node, binding, context) {
+        this.node = node;
+        this.context = context;
+        this.binding = binding;
+        this.effectRef = this.createEffect();
+    }
+    firstNode() {
+        return this.node;
+    }
+    lastNode() {
+        return this.node;
+    }
+    patch(node) {
+        if (node.kind !== 'reactive-text') {
+            return false;
+        }
+        if (node.binding !== this.binding) {
+            this.effectRef.destroy();
+            this.binding = node.binding;
+            this.effectRef = this.createEffect();
+        }
+        return true;
+    }
+    destroy() {
+        this.effectRef.destroy();
+        removeNode(this.context.renderer, this.node);
+    }
+    createEffect() {
+        return createRenderEffect(this.context, 'text-binding', () => {
+            const resolved = executeTemplateCallback(this.binding, [], this.context);
+            const next = resolved === null || resolved === undefined || resolved === false
+                ? ''
+                : String(resolved);
+            if (next !== this.value) {
+                this.context.renderer.setValue(this.node, next);
+                this.value = next;
+            }
+        });
+    }
+}
+function renderCraftDirectiveNode(node, context) {
+    let template = (_componentContext) => [node.node];
+    for (const directive of node.directives) {
+        template = directive[CRAFT_DIRECTIVE].template(template);
+    }
+    return renderChildrenCallback(context, template, [context.componentContext], 'callback', 'directive');
+}
+class CraftDirectiveRenderedNode {
+    kind = 'directive';
+    view;
+    descriptor;
+    effectRef;
+    styleReleases;
+    registrationReleases;
+    node;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.context = context;
+        this.descriptor = signal(node);
+        const owners = node.directives.map((directive) => ({
+            name: directive[CRAFT_DIRECTIVE].name,
+            styles: [
+                ...styleValues(directive[CRAFT_DIRECTIVE].meta.styles),
+                ...styleValues(directive[CRAFT_DIRECTIVE].meta.stylesUrl),
+            ],
+            definition: directive[CRAFT_DIRECTIVE],
+        }));
+        this.styleReleases = acquireStyles(context, owners, context.ownerScope ?? '');
+        this.registrationReleases = node.directives.map((directive) => ɵregisterCraftTarget(context.injector, directive, context.componentContext, allocateCraftHostName(context.injector, 'directive', directive[CRAFT_DIRECTIVE].name), false));
+        this.view = createFragment(parent, before, context, [], 'craft-directive');
+        this.effectRef = createRenderEffect(context, 'craft-directive', () => {
+            this.node = this.descriptor();
+            this.view.patchChildren(renderCraftDirectiveNode(this.node, context));
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'directive' ||
+            !sameCraftDirectives(this.node.directives, node.directives)) {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    destroy() {
+        this.registrationReleases.forEach((release) => release());
+        this.effectRef.destroy();
+        this.view.destroy();
+        this.styleReleases.forEach((release) => release());
+    }
+}
+const EVENT_NAMES = new Set([
+    'abort',
+    'blur',
+    'change',
+    'click',
+    'contextmenu',
+    'dblclick',
+    'error',
+    'focus',
+    'input',
+    'keydown',
+    'keypress',
+    'keyup',
+    'load',
+    'mousedown',
+    'mouseenter',
+    'mouseleave',
+    'mousemove',
+    'mouseout',
+    'mouseover',
+    'mouseup',
+    'pointerdown',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointerup',
+    'reset',
+    'scroll',
+    'submit',
+    'touchend',
+    'touchmove',
+    'touchstart',
+]);
+const PROPERTY_NAMES = new Set([
+    'checked',
+    'disabled',
+    'multiple',
+    'selected',
+    'value',
+]);
+function eventNameFor(key, value) {
+    if (typeof value !== 'function') {
+        return undefined;
+    }
+    if (EVENT_NAMES.has(key)) {
+        return key;
+    }
+    if (/^on[A-Z]/.test(key)) {
+        return `${key[2].toLowerCase()}${key.slice(3)}`;
+    }
+    return undefined;
+}
+function interactionName(eventName, tag, localName, componentName) {
+    return [componentName, tag, localName, eventName]
+        .filter((part) => Boolean(part))
+        .join(':');
+}
+function executeDomEventHooks(hooks, interaction, action) {
+    let current = action;
+    for (let index = hooks.length - 1; index >= 0; index -= 1) {
+        const hook = hooks[index];
+        const next = current;
+        current = () => hook(interaction, next);
+    }
+    return current();
+}
+const HOST_PROPERTY_NAMES = new Set([
+    'accessKey',
+    'autocapitalize',
+    'autofocus',
+    'class',
+    'contentEditable',
+    'dir',
+    'draggable',
+    'hidden',
+    'id',
+    'inert',
+    'lang',
+    'nonce',
+    'slot',
+    'spellcheck',
+    'style',
+    'tabIndex',
+    'title',
+    'translate',
+    'attrs',
+    'directives',
+]);
+function isHostProperty(key) {
+    return (key === 'cssVars' ||
+        HOST_PROPERTY_NAMES.has(key) ||
+        key.startsWith('data-') ||
+        key.startsWith('aria-') ||
+        EVENT_NAMES.has(key) ||
+        (/^on[A-Z]/.test(key) &&
+            EVENT_NAMES.has(`${key[2].toLowerCase()}${key.slice(3)}`)));
+}
+function hostPropsFromComponentProps(props) {
+    const hostProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'cssVars' && isHostProperty(key)));
+    const vars = cssVarStyles(props['cssVars']);
+    return Object.keys(vars).length
+        ? mergeHostProps({ style: vars }, hostProps)
+        : hostProps;
+}
+function className(value, context) {
+    if (typeof value === 'function') {
+        return className(resolveTemplateValue(value, context), context);
+    }
+    if (Array.isArray(value)) {
+        return value
+            .flatMap((item) => className(item, context))
+            .filter(Boolean)
+            .join(' ');
+    }
+    if (typeof value === 'object' && value !== null) {
+        return Object.entries(value)
+            .filter(([, enabled]) => enabled)
+            .map(([name]) => name)
+            .join(' ');
+    }
+    return value == null ? '' : String(value);
+}
+function containsRenderBinding(value, seen = new Set()) {
+    if (typeof value === 'function')
+        return true;
+    if (typeof value !== 'object' || value === null || seen.has(value)) {
+        return false;
+    }
+    seen.add(value);
+    return Object.values(value).some((child) => containsRenderBinding(child, seen));
+}
+function resolveStyleBindingValue(value, context) {
+    const resolved = resolveTemplateValue(value, context);
+    if (typeof resolved !== 'object' || resolved === null)
+        return resolved;
+    return Object.fromEntries(Object.entries(resolved).map(([key, child]) => [
+        key,
+        resolveTemplateValue(child, context),
+    ]));
+}
+function sameStyleValue(left, right) {
+    if (Object.is(left, right))
+        return true;
+    if (typeof left !== 'object' ||
+        left === null ||
+        typeof right !== 'object' ||
+        right === null) {
+        return false;
+    }
+    const leftEntries = Object.entries(left);
+    const rightEntries = Object.entries(right);
+    const rightRecord = right;
+    return (leftEntries.length === rightEntries.length &&
+        leftEntries.every(([key, value]) => Object.is(value, rightRecord[key])));
+}
+function setStyleValue(_renderer, element, key, value, context) {
+    value = resolveTemplateValue(value, context);
+    const style = element
+        .style;
+    if (value === null || value === undefined || value === false) {
+        if (key.startsWith('--')) {
+            style.removeProperty(key);
+        }
+        else {
+            style[key] = '';
+        }
+    }
+    else if (key.startsWith('--')) {
+        style.setProperty(key, String(value));
+    }
+    else {
+        style[key] = String(value);
+    }
+}
+function applyStyles(renderer, element, previous, next, context) {
+    previous = resolveTemplateValue(previous, context);
+    next = resolveTemplateValue(next, context);
+    if (typeof previous === 'object' && previous !== null) {
+        for (const key of Object.keys(previous)) {
+            if (typeof next !== 'object' || next === null || !(key in next)) {
+                setStyleValue(renderer, element, key, null, context);
+            }
+        }
+    }
+    else if (typeof previous === 'string' && previous !== next) {
+        renderer.removeAttribute(element, 'style');
+    }
+    if (typeof next === 'string') {
+        renderer.setAttribute(element, 'style', next);
+    }
+    else if (typeof next === 'object' && next !== null) {
+        for (const [key, value] of Object.entries(next)) {
+            setStyleValue(renderer, element, key, value, context);
+        }
+    }
+    else {
+        renderer.removeAttribute(element, 'style');
+    }
+}
+function flattenAttributes(props) {
+    const attributes = new Map();
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'attrs' && typeof value === 'object' && value !== null) {
+            for (const [attribute, attributeValue] of Object.entries(value)) {
+                attributes.set(attribute, attributeValue);
+            }
+        }
+        else if (key !== 'class' &&
+            key !== 'style' &&
+            key !== 'directives' &&
+            key !== 'labelledBy' &&
+            key !== 'onClose' &&
+            !eventNameFor(key, value)) {
+            attributes.set(key, value);
+        }
+    }
+    return attributes;
+}
+function applyAttribute(renderer, element, key, value, context) {
+    value = resolveTemplateValue(value, context);
+    if (key.startsWith('data-craft-')) {
+        const dev = typeof ngDevMode === 'undefined' || ngDevMode;
+        if (dev) {
+            throw new Error('data-craft-* attributes are reserved for the Craft renderer.');
+        }
+    }
+    if (key === 'htmlFor') {
+        renderer.setProperty(element, key, value ?? '');
+        if (value === null || value === undefined || value === false) {
+            renderer.removeAttribute(element, 'for');
+        }
+        return;
+    }
+    if (PROPERTY_NAMES.has(key)) {
+        renderer.setProperty(element, key, value ?? false);
+        if (value === null || value === undefined || value === false) {
+            renderer.removeAttribute(element, key);
+        }
+        return;
+    }
+    if (value === null || value === undefined) {
+        renderer.removeAttribute(element, key);
+    }
+    else if (key.startsWith('aria-') && typeof value === 'boolean') {
+        renderer.setAttribute(element, key, value ? 'true' : 'false');
+    }
+    else if (value === false) {
+        renderer.removeAttribute(element, key);
+    }
+    else {
+        renderer.setAttribute(element, key, value === true ? '' : String(value));
+    }
+}
+class ElementRenderedNode {
+    kind = 'element';
+    children = [];
+    props = {};
+    listeners = new Map();
+    bindings = new Map();
+    craftNodeDirectiveTypes = [];
+    craftNodeDirectiveMounts = [];
+    localName;
+    dialogCleanup;
+    node;
+    tag;
+    context;
+    constructor(node, tag, context, initial) {
+        this.node = node;
+        this.tag = tag;
+        this.context = context;
+        this.patchProperties(initial);
+        this.installDialog(initial);
+        const nested = this.tag === 'dialog'
+            ? childContext(context, {
+                rootScope: undefined,
+                contentScope: undefined,
+                headingLevel: 1,
+            })
+            : childContext(context, {
+                rootScope: undefined,
+                contentScope: undefined,
+            });
+        this.children = patchRenderedChildren(this.node, this.children, initial.children, null, nested);
+        this.reapplySelectValue(initial);
+    }
+    /**
+     * A `<select>` only accepts a `value` that matches one of its `<option>`s,
+     * and props are applied before children are mounted — so the initial
+     * assignment lands on an empty element, is dropped, and the browser falls
+     * back to the first option. The control then disagrees with the state it is
+     * bound to, silently.
+     *
+     * Re-assert it now that the options exist. Later updates arrive through the
+     * binding, by which point there is nothing to correct.
+     */
+    reapplySelectValue(node) {
+        if (this.tag !== 'select') {
+            return;
+        }
+        const value = flattenAttributes(node.props).get('value');
+        if (value === null || value === undefined) {
+            return;
+        }
+        const resolved = typeof value === 'function'
+            ? untracked(() => resolveTemplateValue(value, this.context))
+            : value;
+        applyAttribute(this.context.renderer, this.node, 'value', resolved, this.context);
+    }
+    firstNode() {
+        return this.node;
+    }
+    lastNode() {
+        return this.node;
+    }
+    patch(node) {
+        if (node.kind !== 'element' ||
+            node.tag !== this.tag ||
+            node.localName !== this.localName) {
+            return false;
+        }
+        this.patchProperties(node);
+        this.installDialog(node);
+        this.children = patchRenderedChildren(this.node, this.children, node.children, null, childContext(this.context, {
+            rootScope: undefined,
+            contentScope: undefined,
+        }));
+        return true;
+    }
+    patchProperties(nextNode) {
+        const next = nextNode.props;
+        const renderer = this.context.renderer;
+        const previousAttributes = flattenAttributes(this.props);
+        const nextAttributes = flattenAttributes(next);
+        for (const key of previousAttributes.keys()) {
+            if (!nextAttributes.has(key)) {
+                this.destroyBinding(`attribute:${key}`);
+                applyAttribute(renderer, this.node, key, null, this.context);
+            }
+        }
+        for (const [key, value] of nextAttributes) {
+            if (typeof value === 'function') {
+                this.updateBinding(`attribute:${key}`, value, () => resolveTemplateValue(value, this.context), (resolved) => applyAttribute(renderer, this.node, key, resolved, this.context));
+            }
+            else {
+                this.destroyBinding(`attribute:${key}`);
+            }
+            if (typeof value !== 'function' &&
+                (!Object.is(previousAttributes.get(key), value) ||
+                    typeof previousAttributes.get(key) === 'function')) {
+                applyAttribute(renderer, this.node, key, value, this.context);
+            }
+        }
+        if (containsRenderBinding(next['class'])) {
+            this.updateBinding('class', next['class'], () => className(next['class'], this.context), (value) => {
+                if (value) {
+                    renderer.setAttribute(this.node, 'class', String(value));
+                }
+                else {
+                    renderer.removeAttribute(this.node, 'class');
+                }
+            });
+        }
+        else {
+            this.destroyBinding('class');
+        }
+        if (!containsRenderBinding(next['class']) &&
+            (!Object.is(this.props['class'], next['class']) ||
+                containsRenderBinding(this.props['class']))) {
+            const value = className(next['class'], this.context);
+            if (value) {
+                renderer.setAttribute(this.node, 'class', value);
+            }
+            else {
+                renderer.removeAttribute(this.node, 'class');
+            }
+        }
+        if (containsRenderBinding(next['style'])) {
+            this.updateBinding('style', next['style'], () => resolveStyleBindingValue(next['style'], this.context), (value) => {
+                renderer.removeAttribute(this.node, 'style');
+                applyStyles(renderer, this.node, undefined, value, this.context);
+            }, sameStyleValue);
+        }
+        else {
+            this.destroyBinding('style');
+        }
+        if (!containsRenderBinding(next['style']) &&
+            (!Object.is(this.props['style'], next['style']) ||
+                containsRenderBinding(this.props['style']))) {
+            if (containsRenderBinding(this.props['style'])) {
+                renderer.removeAttribute(this.node, 'style');
+            }
+            applyStyles(renderer, this.node, containsRenderBinding(this.props['style'])
+                ? undefined
+                : this.props['style'], next['style'], this.context);
+        }
+        const nextEvents = new Map();
+        for (const [key, value] of Object.entries(next)) {
+            const eventName = eventNameFor(key, value);
+            if (eventName) {
+                nextEvents.set(eventName, value);
+            }
+        }
+        for (const [eventName, dispose] of this.listeners) {
+            if (!nextEvents.has(eventName)) {
+                dispose();
+                this.listeners.delete(eventName);
+            }
+        }
+        for (const [eventName] of nextEvents) {
+            if (!this.listeners.has(eventName)) {
+                this.listeners.set(eventName, renderer.listen(this.node, eventName, (event) => {
+                    const listener = Object.entries(this.props).find(([key, value]) => eventNameFor(key, value) === eventName)?.[1];
+                    if (!listener) {
+                        return undefined;
+                    }
+                    const interaction = {
+                        event,
+                        eventName,
+                        element: this.node,
+                        elementTag: this.tag,
+                        elementName: this.localName,
+                        componentName: this.context.componentName,
+                        interactionName: interactionName(eventName, this.tag, this.localName, this.context.componentName),
+                    };
+                    const hooks = this.context.injector.get(CRAFT_DOM_EVENT_HOOK);
+                    runInInjectionContext(this.context.injector, () => executeDomEventHooks(hooks, interaction, () => executeTemplateCallback(listener, [event], this.context)));
+                    return undefined;
+                }));
+            }
+        }
+        const craftNodeDirectives = nextNode[CRAFT_NODE_DIRECTIVES] ?? [];
+        if (!sameCraftNodeDirectives(this.craftNodeDirectiveTypes, craftNodeDirectives)) {
+            this.craftNodeDirectiveMounts.forEach((mount) => mount.destroy());
+            this.craftNodeDirectiveMounts = craftNodeDirectives.map((descriptor) => new CraftNodeDirectiveMount(descriptor, this.node, this.context));
+        }
+        else {
+            this.craftNodeDirectiveMounts.forEach((mount, index) => mount.update(craftNodeDirectives[index]));
+        }
+        this.craftNodeDirectiveTypes = craftNodeDirectives;
+        if (this.localName !== nextNode.localName) {
+            if (nextNode.localName === undefined) {
+                renderer.removeAttribute(this.node, 'data-craft-name');
+            }
+            else {
+                renderer.setAttribute(this.node, 'data-craft-name', nextNode.localName);
+            }
+            this.localName = nextNode.localName;
+        }
+        const contentNames = directCraftContentNames(nextNode.children);
+        if (contentNames.length > 0) {
+            this.node[CRAFT_LOCATOR_CONTENT_NAMES] = contentNames;
+        }
+        else {
+            delete this.node[CRAFT_LOCATOR_CONTENT_NAMES];
+        }
+        this.props = next;
+    }
+    updateBinding(key, source, evaluate, apply, equals = Object.is) {
+        const current = this.bindings.get(key);
+        if (current?.source === source)
+            return;
+        current?.effectRef.destroy();
+        let initialized = false;
+        let previous;
+        const effectRef = createRenderEffect(this.context, `element-${key}-binding`, () => {
+            const value = evaluate();
+            if (!initialized || !equals(previous, value)) {
+                apply(value);
+                previous = value;
+                initialized = true;
+            }
+        });
+        this.bindings.set(key, { source, effectRef });
+    }
+    destroyBinding(key) {
+        this.bindings.get(key)?.effectRef.destroy();
+        this.bindings.delete(key);
+    }
+    installDialog(nextNode) {
+        if (this.tag !== 'dialog')
+            return;
+        const dialog = this.node;
+        const renderer = this.context.renderer;
+        if (!dialog.getAttribute('role')) {
+            renderer.setAttribute(dialog, 'role', 'dialog');
+        }
+        if (!dialog.getAttribute('aria-modal')) {
+            renderer.setAttribute(dialog, 'aria-modal', 'true');
+        }
+        const labelledBy = nextNode.props['labelledBy'];
+        const label = nextNode.props['label'] ?? nextNode.props['aria-label'];
+        if (typeof labelledBy === 'string' && labelledBy) {
+            renderer.setAttribute(dialog, 'aria-labelledby', labelledBy);
+        }
+        else if (typeof label === 'string' && label) {
+            renderer.setAttribute(dialog, 'aria-label', label);
+        }
+        const onClose = nextNode.props['onClose'];
+        this.dialogCleanup?.();
+        const cancel = renderer.listen(dialog, 'cancel', (event) => {
+            event.preventDefault();
+            if (typeof onClose === 'function')
+                onClose(event);
+            if (typeof dialog.close === 'function')
+                dialog.close();
+        });
+        const close = renderer.listen(dialog, 'close', (event) => {
+            if (typeof onClose === 'function')
+                onClose(event);
+        });
+        this.dialogCleanup = () => {
+            cancel();
+            close();
+        };
+        const open = nextNode.props['open'];
+        if (open && typeof dialog.showModal === 'function' && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (open === false &&
+            typeof dialog.close === 'function' &&
+            dialog.open) {
+            dialog.close();
+        }
+    }
+    destroy() {
+        this.dialogCleanup?.();
+        this.bindings.forEach(({ effectRef }) => effectRef.destroy());
+        this.bindings.clear();
+        this.listeners.forEach((dispose) => dispose());
+        this.listeners.clear();
+        this.craftNodeDirectiveMounts.forEach((mount) => mount.destroy());
+        this.craftNodeDirectiveMounts = [];
+        this.children.forEach((child) => child.destroy());
+        removeNode(this.context.renderer, this.node);
+    }
+}
+class FragmentRenderedNode {
+    kind = 'fragment';
+    children = [];
+    /**
+     * Where this fragment currently lives. A boundary can detach a range into a
+     * holder fragment to hide it without destroying it, and the range keeps being
+     * reconciled while detached — so every insertion has to follow the markers
+     * rather than the parent captured at construction time.
+     */
+    get liveParent() {
+        return this.start.parentNode ?? this.parent;
+    }
+    parent;
+    start;
+    end;
+    context;
+    constructor(parent, start, end, context, initialChildren) {
+        this.parent = parent;
+        this.start = start;
+        this.end = end;
+        this.context = context;
+        this.children = patchRenderedChildren(parent, this.children, initialChildren, end, context);
+    }
+    firstNode() {
+        return this.start;
+    }
+    lastNode() {
+        return this.end;
+    }
+    patch(_node) {
+        return false;
+    }
+    patchChildren(children) {
+        this.children = patchRenderedChildren(this.liveParent, this.children, children, this.end, this.context);
+    }
+    hasChildren() {
+        return this.children.length > 0;
+    }
+    appendChildren(children) {
+        const nextNodes = normalizeChildren(children);
+        nextNodes.forEach((child) => {
+            this.children.push(mountNode(child, this.liveParent, this.end, this.context));
+        });
+    }
+    prependChildren(children) {
+        const nextNodes = normalizeChildren(children);
+        const before = this.children[0]?.firstNode() ?? this.end;
+        const mounted = [];
+        for (let index = nextNodes.length - 1; index >= 0; index -= 1) {
+            mounted.unshift(mountNode(nextNodes[index], this.liveParent, before, this.context));
+        }
+        this.children.unshift(...mounted);
+    }
+    updateContext(context) {
+        this.context = context;
+    }
+    moveBefore(before) {
+        let current = this.start;
+        const nodes = [];
+        while (current) {
+            nodes.push(current);
+            if (current === this.end) {
+                break;
+            }
+            current = current.nextSibling;
+        }
+        nodes.forEach((node) => insertBefore(this.context.renderer, this.liveParent, node, before));
+    }
+    destroy() {
+        this.children.forEach((child) => child.destroy());
+        removeNode(this.context.renderer, this.start);
+        removeNode(this.context.renderer, this.end);
+    }
+}
+class ProjectionRenderedNode {
+    kind = 'projection';
+    view;
+    styleRelease;
+    node;
+    declarationContext;
+    projectionContext;
+    descriptor;
+    effectRef;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.descriptor = signal(node);
+        this.declarationContext =
+            node.declarationContext ??
+                lexicalContext(context);
+        const contentStyle = acquireContentStyle(context, node.slotName, node.stylePolicy);
+        this.styleRelease = contentStyle.release;
+        this.projectionContext = childContext(this.declarationContext, {
+            contentScope: contentStyle.scope,
+        });
+        this.view = createFragment(parent, before, this.projectionContext, [], 'craft-projection');
+        this.effectRef = createRenderEffect(this.projectionContext, 'projection', () => {
+            this.node = this.descriptor();
+            this.view.patchChildren(this.children());
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'projection' ||
+            node.declarationContext !== this.node.declarationContext) {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    children() {
+        return executeTemplateTrace(this.projectionContext.injector, traceContext(this.projectionContext, 'projection', tracePhase(this.projectionContext), this.node.slotName), () => runInInjectionContext(this.declarationContext.injector, () => withCraftRenderContext(this.declarationContext, () => resolveProjectionValue(this.node.render(), this.projectionContext))));
+    }
+    destroy() {
+        this.effectRef.destroy();
+        this.view.destroy();
+        this.styleRelease();
+    }
+}
+class TemplateRenderedNode {
+    kind = 'template';
+    view;
+    node;
+    declarationContext;
+    descriptor;
+    effectRef;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.descriptor = signal(node);
+        this.declarationContext =
+            node.declarationContext ??
+                lexicalContext(context);
+        this.view = createFragment(parent, before, this.declarationContext, [], 'craft-template');
+        this.effectRef = createRenderEffect(this.declarationContext, 'template', () => {
+            this.node = this.descriptor();
+            this.view.patchChildren(this.children());
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'template' || node.template !== this.node.template) {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    children() {
+        return renderChildrenCallback(this.declarationContext, this.node.template, [
+            resolveTemplateContext(this.node.context, this.declarationContext),
+        ]);
+    }
+    destroy() {
+        this.effectRef.destroy();
+        this.view.destroy();
+    }
+}
+function createFragment(parent, before, context, children, label) {
+    const start = mountComment(parent, `${label}:start`, before, context);
+    const end = mountComment(parent, `${label}:end`, before, context);
+    return new FragmentRenderedNode(parent, start, end, context, children);
+}
+class EachRenderedNode {
+    kind = 'each';
+    entries = new Map();
+    ordered = [];
+    emptyView;
+    descriptor;
+    effectRef;
+    node;
+    parent;
+    start;
+    end;
+    context;
+    scheduler;
+    ownsScheduler = false;
+    schedulePolicy;
+    schedulerConfigured = false;
+    pendingTasks = new Set();
+    reconcileVersion = 0;
+    constructor(node, parent, start, end, context) {
+        this.node = node;
+        this.parent = parent;
+        this.start = start;
+        this.end = end;
+        this.context = context;
+        this.scheduler = createEachScheduler({
+            enabled: false,
+            strategy: 'sync',
+            frameBudgetMs: 4,
+        });
+        this.configureScheduler(node.schedule);
+        this.descriptor = signal(node);
+        this.effectRef = createRenderEffect(context, 'each-block', () => {
+            const previousItemTemplate = this.node.itemTemplate;
+            this.node = this.descriptor();
+            this.configureScheduler(this.node.schedule);
+            this.reconcile(this.node.itemTemplate !== previousItemTemplate);
+        });
+    }
+    firstNode() {
+        return this.start;
+    }
+    lastNode() {
+        return this.end;
+    }
+    patch(node) {
+        if (node.kind !== 'each') {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    reconcile(itemTemplateChanged = false) {
+        const items = resolveTemplateValue(this.node.source, this.context);
+        const collection = items ?? [];
+        const keys = collection.map((item, index) => this.node.track(item, index));
+        const seenKeys = new Set();
+        keys.forEach((key) => {
+            if (seenKeys.has(key)) {
+                throw new Error(`each() received the duplicate key "${String(key)}".`);
+            }
+            seenKeys.add(key);
+        });
+        this.reconcileVersion += 1;
+        this.cancelPendingTasks();
+        if (collection.length === 0) {
+            this.entries.forEach((entry) => {
+                entry.renderEffect?.destroy();
+                entry.view.destroy();
+            });
+            this.entries.clear();
+            this.ordered = [];
+            if (this.node.empty) {
+                const emptyContext = childContext(this.context, {
+                    identity: childCraftRenderIdentity(this.context.identity, 'empty'),
+                });
+                if (this.emptyView) {
+                    this.emptyView.patchChildren(renderBlockChildren(emptyContext, 'empty', this.node.empty));
+                }
+                else {
+                    this.emptyView = createFragment(this.parent, this.end, emptyContext, renderBlockChildren(emptyContext, 'empty', this.node.empty), 'craft-empty');
+                }
+            }
+            else {
+                this.emptyView?.destroy();
+                this.emptyView = undefined;
+            }
+            return;
+        }
+        this.emptyView?.destroy();
+        this.emptyView = undefined;
+        const previous = this.entries;
+        const next = new Map();
+        const nextOrdered = [];
+        const entriesToRender = [];
+        collection.forEach((item, index) => {
+            const key = keys[index];
+            let entry = previous.get(key);
+            if (entry) {
+                if (itemTemplateChanged ||
+                    !Object.is(entry.item, item) ||
+                    entry.index !== index ||
+                    !entry.rendered) {
+                    entry.item = item;
+                    entry.index = index;
+                    entriesToRender.push(entry);
+                }
+            }
+            else {
+                const traceState = { renderCount: 0 };
+                const entryContext = childContext(this.context, {
+                    identity: childCraftRenderIdentity(this.context.identity, `item:${String(key)}`),
+                });
+                entry = {
+                    key,
+                    item,
+                    index,
+                    traceState,
+                    rendered: false,
+                    view: createFragment(this.parent, this.end, entryContext, [], `craft-each:${String(key)}`),
+                };
+                entriesToRender.push(entry);
+            }
+            next.set(key, entry);
+            nextOrdered.push(entry.view);
+        });
+        previous.forEach((entry, key) => {
+            if (!next.has(key)) {
+                entry.renderEffect?.destroy();
+                entry.view.destroy();
+            }
+        });
+        let before = this.end;
+        for (let index = nextOrdered.length - 1; index >= 0; index -= 1) {
+            const entry = nextOrdered[index];
+            if (entry.lastNode().nextSibling !== before) {
+                entry.moveBefore(before);
+            }
+            before = entry.firstNode();
+        }
+        this.entries = next;
+        this.ordered = nextOrdered;
+        entriesToRender.forEach((entry) => this.scheduleEntryRender(entry));
+    }
+    configureScheduler(policy) {
+        if (this.schedulerConfigured && this.schedulePolicy === policy)
+            return;
+        if (this.ownsScheduler)
+            this.scheduler.destroy?.();
+        this.schedulePolicy = policy;
+        this.schedulerConfigured = true;
+        this.cancelPendingTasks();
+        const injected = this.context.injector.get(EACH_SCHEDULER, null);
+        if (injected) {
+            this.scheduler = injected;
+            this.ownsScheduler = false;
+            return;
+        }
+        this.scheduler = createEachScheduler(policy ?? { enabled: false, strategy: 'sync', frameBudgetMs: 4 });
+        this.ownsScheduler = true;
+    }
+    scheduleEntryRender(entry) {
+        const version = this.reconcileVersion;
+        const scheduled = {
+            completed: false,
+            handle: undefined,
+        };
+        const handle = this.scheduler.schedule(() => {
+            scheduled.completed = true;
+            if (scheduled.handle)
+                this.pendingTasks.delete(scheduled.handle);
+            if (version !== this.reconcileVersion || !this.entries.has(entry.key)) {
+                return;
+            }
+            entry.renderEffect?.destroy();
+            entry.renderEffect = createRenderEffect(this.context, 'each-item', () => entry.view.patchChildren(this.renderItem(entry.traceState, entry.item, entry.index, entry.key)));
+            entry.rendered = true;
+        });
+        scheduled.handle = handle;
+        if (!scheduled.completed)
+            this.pendingTasks.add(handle);
+    }
+    cancelPendingTasks() {
+        this.pendingTasks.forEach((handle) => handle.cancel());
+        this.pendingTasks.clear();
+    }
+    renderItem(traceState, item, index, key) {
+        traceState.renderCount += 1;
+        return renderBlockChildren(childContext(this.context, {
+            traceState,
+            identity: childCraftRenderIdentity(this.context.identity, `item:${String(key)}`),
+        }), 'each', this.node.itemTemplate, [
+            function* () {
+                return item;
+            },
+            index,
+        ]);
+    }
+    destroy() {
+        this.effectRef.destroy();
+        this.reconcileVersion += 1;
+        this.cancelPendingTasks();
+        if (this.ownsScheduler)
+            this.scheduler.destroy?.();
+        this.entries.forEach((entry) => {
+            entry.renderEffect?.destroy();
+            entry.view.destroy();
+        });
+        this.emptyView?.destroy();
+        removeNode(this.context.renderer, this.start);
+        removeNode(this.context.renderer, this.end);
+    }
+}
+class IfBlockRenderedNode {
+    kind = 'if';
+    view;
+    active;
+    descriptor;
+    effectRef;
+    node;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.context = context;
+        this.descriptor = signal(node);
+        this.view = createFragment(parent, before, context, [], `craft-if:${node.conditionName}`);
+        this.effectRef = createRenderEffect(context, 'if-block', () => {
+            this.node = this.descriptor();
+            this.active = this.isTrue();
+            this.view.patchChildren(this.children());
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'if' || node.conditionName !== this.node.conditionName) {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    isTrue() {
+        return Boolean(resolveTemplateValue(this.node.condition, this.context));
+    }
+    children() {
+        return this.active
+            ? renderBlockChildren(this.context, this.node.conditionName, this.node.whenTrue)
+            : this.node.whenFalse
+                ? renderBlockChildren(this.context, this.node.conditionName, this.node.whenFalse)
+                : [];
+    }
+    destroy() {
+        this.effectRef.destroy();
+        this.view.destroy();
+    }
+}
+class MatchBlockRenderedNode {
+    kind = 'match-block';
+    view;
+    handledExceptionCode;
+    descriptor;
+    effectRef;
+    node;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.context = context;
+        this.descriptor = signal(node);
+        this.view = createFragment(parent, before, context, [], 'craft-match-block');
+        this.effectRef = createRenderEffect(context, 'match-block', () => {
+            this.node = this.descriptor();
+            this.view.patchChildren(this.children());
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'match-block' || node.key !== this.node.key) {
+            return false;
+        }
+        this.descriptor.set(node);
+        return true;
+    }
+    children() {
+        if (this.handledExceptionCode) {
+            this.context.handledResourceExceptionCodes?.delete(this.handledExceptionCode);
+            this.handledExceptionCode = undefined;
+        }
+        const exception = resolveTemplateValue(this.node.source, this.context);
+        if (!exception)
+            return [];
+        const code = exception[this.node.key];
+        // Resource exception buckets use an empty object when no exception is
+        // present. Do not turn that implementation detail into an exception with
+        // an `undefined` discriminator during a later component rerender.
+        if (code === undefined || code === null)
+            return [];
+        const handler = this.node.handlers[String(code)];
+        if (!handler) {
+            throw new CraftUnhandledExceptionError(exception);
+        }
+        this.handledExceptionCode = String(code);
+        this.context.handledResourceExceptionCodes?.add(this.handledExceptionCode);
+        return executeTemplateTrace(this.context.injector, traceContext(this.context, 'block', tracePhase(this.context), String(this.node.key)), () => handler(exception));
+    }
+    destroy() {
+        this.effectRef.destroy();
+        if (this.handledExceptionCode) {
+            this.context.handledResourceExceptionCodes?.delete(this.handledExceptionCode);
+        }
+        this.view.destroy();
+    }
+}
+/**
+ * Detaches a mounted DOM range into a holder fragment, keeping every node (and
+ * therefore every binding) alive. Both boundaries hide their subtree this way:
+ * destroying it would take with it the bindings that report recovery.
+ *
+ * The nodes go into a real `DocumentFragment` rather than a plain array so that
+ * a NESTED boundary can still insert relative to its own markers while an outer
+ * boundary holds them detached — the markers keep a parent to insert into.
+ */
+function detachRange(renderer, first, last) {
+    const holder = renderer.createFragment();
+    let current = first;
+    const nodes = [];
+    while (current) {
+        nodes.push(current);
+        if (current === last)
+            break;
+        current = current.nextSibling;
+    }
+    nodes.forEach((node) => {
+        removeNode(renderer, node);
+        renderer.appendChild(holder, node);
+    });
+    return holder;
+}
+/** Re-inserts a detached range before `anchor`, in whatever parent it now has. */
+function reattachRange(renderer, holder, anchor, fallbackParent) {
+    const parent = anchor.parentNode ?? fallbackParent;
+    while (holder.firstChild) {
+        const node = holder.firstChild;
+        removeNode(renderer, node);
+        insertBefore(renderer, parent, node, anchor);
+    }
+}
+/** Stands in for reporters that do not identify themselves (component renders). */
+const ANONYMOUS_EXCEPTION_REPORTER = {};
+class CatchBlockRenderedNode {
+    kind = 'catch-block';
+    start;
+    end;
+    sourceView;
+    fallbackView;
+    handling = false;
+    fallbackVisible = false;
+    fallbackPosition;
+    detached;
+    /** Reporters still failing. The fallback stays up until this empties. */
+    failing = new Set();
+    node;
+    parent;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.parent = parent;
+        this.context = context;
+        this.fallbackPosition = node.position;
+        this.start = mountComment(parent, 'craft-catch-block:start', before, context);
+        this.end = mountComment(parent, 'craft-catch-block:end', before, context);
+        // The fallback renders in the OUTER context: an exception thrown by a
+        // fallback belongs to the next boundary up, never to this one.
+        const createFallback = () => createFragment(parent, this.end, this.context, [], 'craft-catch-fallback');
+        const createSource = () => createFragment(parent, this.end, this.boundaryContext(), [], 'craft-catch-source');
+        if (this.fallbackPosition === 'before') {
+            this.fallbackView = createFallback();
+            this.sourceView = createSource();
+        }
+        else {
+            this.sourceView = createSource();
+            this.fallbackView = createFallback();
+        }
+        try {
+            this.sourceView.patchChildren([this.node.source]);
+        }
+        catch (error) {
+            if (!isCraftGenShortCircuit(error))
+                throw error;
+            this.handle(error.exception);
+        }
+    }
+    firstNode() {
+        return this.start;
+    }
+    lastNode() {
+        return this.end;
+    }
+    patch(node) {
+        if (node.kind !== 'catch-block' || node.position !== this.node.position) {
+            return false;
+        }
+        this.node = node;
+        try {
+            this.sourceView.patchChildren([node.source]);
+            if (this.detached) {
+                // A re-render re-materialises the source range: hide it again.
+                this.detached = undefined;
+                this.hideSource();
+            }
+        }
+        catch (error) {
+            if (!isCraftGenShortCircuit(error))
+                throw error;
+            this.handle(error.exception);
+        }
+        return true;
+    }
+    boundaryContext() {
+        return childContext(this.context, {
+            exceptionBoundary: (exception, token) => this.handle(exception, token),
+            exceptionBoundaryResolved: (token) => this.resolved(token),
+        });
+    }
+    handle(exception, token) {
+        if (this.handling) {
+            return (this.context.exceptionBoundary?.(exception, token) ??
+                this.unhandled(exception));
+        }
+        const handler = this.node.handlers[exception._tag];
+        if (!handler) {
+            return (this.context.exceptionBoundary?.(exception, token) ??
+                this.unhandled(exception));
+        }
+        this.failing.add(token ?? ANONYMOUS_EXCEPTION_REPORTER);
+        this.handling = true;
+        this.fallbackVisible = true;
+        try {
+            const resolved = resolveCatchBlockHandler(handler, exception, true, this.node.position);
+            this.applyPosition(resolved.position);
+            this.fallbackView.patchChildren(hasLiveRegion(resolved.children)
+                ? resolved.children
+                : a11yElement('div', { role: 'alert' }, resolved.children));
+            if (resolved.showSource) {
+                this.restoreSource();
+            }
+            else {
+                this.hideSource();
+            }
+        }
+        finally {
+            this.handling = false;
+        }
+        return true;
+    }
+    resolved(token) {
+        this.failing.delete(token ?? ANONYMOUS_EXCEPTION_REPORTER);
+        if (this.handling || !this.fallbackVisible || this.failing.size > 0)
+            return;
+        this.fallbackVisible = false;
+        this.applyPosition(this.node.position);
+        this.fallbackView.patchChildren([]);
+        this.restoreSource();
+    }
+    applyPosition(position) {
+        if (position === this.fallbackPosition)
+            return;
+        this.fallbackPosition = position;
+        this.fallbackView.moveBefore(position === 'before' ? this.sourceFirstNode() : this.end);
+    }
+    sourceFirstNode() {
+        return this.detached ? this.end : this.sourceView.firstNode();
+    }
+    /**
+     * A hidden source is detached from the DOM but stays mounted. Destroying it
+     * would take its bindings with it — and those bindings are the only channel
+     * that reports the exception is gone, so the fallback could never be removed.
+     */
+    hideSource() {
+        if (this.detached)
+            return;
+        this.detached = detachRange(this.context.renderer, this.sourceView.firstNode(), this.sourceView.lastNode());
+    }
+    restoreSource() {
+        if (!this.detached)
+            return;
+        const anchor = this.fallbackPosition === 'before'
+            ? this.end
+            : this.fallbackView.firstNode();
+        reattachRange(this.context.renderer, this.detached, anchor, this.parent);
+        this.detached = undefined;
+    }
+    unhandled(exception) {
+        throw new CraftUnhandledExceptionError(exception);
+    }
+    destroy() {
+        this.restoreSource();
+        this.fallbackView.destroy();
+        this.sourceView.destroy();
+        removeNode(this.context.renderer, this.start);
+        removeNode(this.context.renderer, this.end);
+    }
+}
+const fieldExceptionAccessibility = new WeakMap();
+let nextFieldExceptionBoundaryId = 0;
+function componentFieldExceptionSources(value, seen = new WeakSet(), depth = 0) {
+    if ((typeof value !== 'object' || value === null) &&
+        typeof value !== 'function') {
+        return [];
+    }
+    const objectValue = value;
+    if (seen.has(objectValue))
+        return [];
+    seen.add(objectValue);
+    const source = value[CRAFT_FIELD_EXCEPTION_SOURCE];
+    if (source) {
+        return [rawReactiveFacade(source)];
+    }
+    const sources = [];
+    if (depth >= 4)
+        return sources;
+    for (const key of Object.keys(value)) {
+        sources.push(...componentFieldExceptionSources(value[key], seen, depth + 1));
+    }
+    return sources;
+}
+function fieldExceptionHandler(handlers, path, code) {
+    const grouped = handlers[path];
+    if (typeof grouped === 'object' && grouped !== null) {
+        return grouped[code];
+    }
+    const local = handlers[code];
+    return typeof local === 'function' ? local : undefined;
+}
+function fieldExceptionValidatorName(source, exception) {
+    const branded = exception.__brand;
+    if (typeof branded === 'string')
+        return branded;
+    const byValidator = source.exceptions().byValidator;
+    return (Object.entries(byValidator).find(([, value]) => value === exception)?.[0] ??
+        'unknown');
+}
+function fieldExceptionMessageNode(id, children) {
+    return {
+        kind: 'element',
+        tag: 'div',
+        props: {
+            id,
+            role: 'alert',
+            'data-field-exception': '',
+        },
+        children,
+    };
+}
+function a11yElement(tag, props, children = []) {
+    return { kind: 'element', tag, props, children };
+}
+function firstElementChild(value) {
+    const list = Array.isArray(value) ? value : [value];
+    for (const child of list) {
+        if (child &&
+            typeof child === 'object' &&
+            'kind' in child &&
+            child.kind === 'element') {
+            return child;
+        }
+    }
+    return undefined;
+}
+function hasLiveRegion(children) {
+    const element = firstElementChild(children);
+    if (!element)
+        return false;
+    const role = element.props['role'];
+    const live = element.props['aria-live'];
+    return (role === 'alert' ||
+        role === 'status' ||
+        live === 'polite' ||
+        live === 'assertive');
+}
+/**
+ * The `pendingBlock` boundary.
+ *
+ * Layout is fixed at construction — a fallback fragment and a source fragment,
+ * ordered by `position` — so showing or hiding the fallback never reconciles
+ * the source subtree.
+ *
+ * While at least one descendant binding holds a pending token, the fallback is
+ * rendered and the source's DOM range is detached (its nodes are kept, not
+ * destroyed). Keeping the subtree alive is what makes resumption work at all:
+ * the suspended bindings stay subscribed to their source's `status`, so they
+ * re-run — and release their token — the moment the data arrives.
+ */
+class PendingBlockRenderedNode {
+    kind = 'pending-block';
+    start;
+    end;
+    sourceView;
+    fallbackView;
+    position;
+    /** Held tokens, by the binding that suspended, in suspension order. */
+    held = new Map();
+    /** Sources seen below this boundary, by name — the reload watch reads them. */
+    watched = new Map();
+    reloadWatch;
+    reloadingSource;
+    detached;
+    /** Depth of an in-flight render into the source range. */
+    rendering = 0;
+    /** A fallback render asked for while the source range was mid-render. */
+    renderDeferred = false;
+    node;
+    parent;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.parent = parent;
+        this.context = context;
+        this.position = node.position;
+        if (context.ssr &&
+            node.ssr === 'client' &&
+            !node.handlers &&
+            !node.fallback) {
+            throw new Error('pendingBlock({ ssr: "client" }) requires an explicit fallback or shell.');
+        }
+        this.start = mountComment(parent, 'craft-pending:start', before, context);
+        this.end = mountComment(parent, 'craft-pending:end', before, context);
+        // The fallback renders in the OUTER context: a fallback that suspends in
+        // turn belongs to the next boundary up, never to this one.
+        const createFallback = () => createFragment(parent, this.end, this.context, [], 'craft-pending-fallback');
+        const createSource = () => createFragment(parent, this.end, this.boundaryContext(), [], 'craft-pending-source');
+        // Both ranges are staked out EMPTY first. A binding below this boundary
+        // suspends on its very first run, synchronously, from inside the source
+        // range's own construction — so both views have to exist (and the range has
+        // to be complete) before that first run happens.
+        if (this.position === 'before') {
+            this.fallbackView = createFallback();
+            this.sourceView = createSource();
+        }
+        else {
+            this.sourceView = createSource();
+            this.fallbackView = createFallback();
+        }
+        this.renderSource([node.source]);
+    }
+    /**
+     * Fills the source range, deferring any fallback render that a synchronous
+     * suspension asks for until the range is whole again. Rendering the fallback
+     * mid-pass would detach the range out from under the insertion that is still
+     * walking it.
+     */
+    renderSource(children) {
+        this.rendering += 1;
+        try {
+            this.sourceView.patchChildren(children);
+        }
+        finally {
+            this.rendering -= 1;
+        }
+        if (this.rendering === 0 && this.renderDeferred) {
+            this.renderDeferred = false;
+            this.renderFallback();
+        }
+    }
+    firstNode() {
+        return this.start;
+    }
+    lastNode() {
+        return this.end;
+    }
+    patch(node) {
+        if (node.kind !== 'pending-block') {
+            return false;
+        }
+        const next = node;
+        if (next.position !== this.position) {
+            return false;
+        }
+        this.node = next;
+        // A re-render re-materialises the source range: hide it again.
+        if (this.held.size > 0)
+            this.detached = undefined;
+        this.renderSource([next.source]);
+        if (this.held.size > 0)
+            this.showFallback();
+        return true;
+    }
+    destroy() {
+        this.reloadWatch?.destroy();
+        this.restoreSource();
+        this.fallbackView.destroy();
+        this.sourceView.destroy();
+        removeNode(this.context.renderer, this.start);
+        removeNode(this.context.renderer, this.end);
+    }
+    boundaryContext() {
+        return childContext(this.context, {
+            pendingBoundary: {
+                suspend: (token, source) => this.suspend(token, source),
+                resume: (token) => this.resume(token),
+            },
+            settledReadObserver: (notice) => this.watch(notice),
+        });
+    }
+    /**
+     * Records a source read below this boundary. A refetch throws nothing, so the
+     * boundary cannot learn about it from the suspension channel: it watches the
+     * source's own status instead, on its own effect, which keeps working even
+     * when the binding that first reported it never re-runs.
+     */
+    watch(notice) {
+        if (!this.handles(notice.source)) {
+            this.context.settledReadObserver?.(notice);
+            return;
+        }
+        if (this.watched.has(notice.source))
+            return;
+        this.watched.set(notice.source, notice);
+        this.reloadWatch?.destroy();
+        this.reloadWatch = createEffectInInjector(this.context.injector, 'pending-reload-watch', () => this.onReloadStateChange());
+    }
+    onReloadStateChange() {
+        let reloading;
+        for (const [source, notice] of this.watched) {
+            const status = notice.status();
+            // Refetching with something already on screen — the settled read returns
+            // the stale value, so the subtree stays visible.
+            if (notice.value() !== undefined &&
+                (status === 'loading' || status === 'reloading')) {
+                reloading = source;
+                break;
+            }
+        }
+        if (reloading === this.reloadingSource)
+            return;
+        this.reloadingSource = reloading;
+        // A suspension outranks a reload: it already owns the fallback slot.
+        if (this.held.size === 0)
+            this.requestFallbackRender();
+    }
+    suspend(token, source) {
+        if (this.handles(source)) {
+            const routePolicy = this.context.injector.get(CRAFT_SSR_POLICY, null);
+            this.context.ssr?.suspend(token, source, this.node.ssr ?? routePolicy?.mode, {
+                route: activeSsrRoute(this.context),
+                timeoutMs: routePolicy?.timeoutMs,
+            });
+            const wasIdle = this.held.size === 0;
+            this.held.set(token, source);
+            if (wasIdle)
+                this.showFallback();
+            return;
+        }
+        // Not ours to handle (an `.exhaustive` boundary that does not list this
+        // source): delegate outwards.
+        if (!this.context.pendingBoundary) {
+            if (this.context.ssr) {
+                this.context.ssr.unhandled(source, activeSsrRoute(this.context));
+            }
+            throw new CraftUnhandledPendingError(source);
+        }
+        this.context.pendingBoundary.suspend(token, source);
+    }
+    resume(token) {
+        if (!this.held.delete(token)) {
+            this.context.pendingBoundary?.resume(token);
+            return;
+        }
+        this.context.ssr?.resume(token);
+        if (this.held.size === 0)
+            this.hideFallback();
+    }
+    /** The catch-all form handles every source; `.exhaustive` only what it lists. */
+    handles(source) {
+        return !this.node.handlers || source in this.node.handlers;
+    }
+    fallbackChildren() {
+        const handlers = this.node.handlers;
+        const suspended = this.held.size > 0;
+        // Several listed sources may be pending at once — the first to suspend wins.
+        const [firstSuspended] = this.held.values();
+        const source = suspended ? firstSuspended : this.reloadingSource;
+        if (!source)
+            return [];
+        if (!handlers) {
+            return this.announceFallback(suspended
+                ? (this.node.fallback?.() ?? [])
+                : (this.node.reloading?.() ?? []), true);
+        }
+        const handler = handlers[source];
+        const inner = handler
+            ? resolvePendingBlockHandler(handler, suspended ? 'pending' : 'reloading')
+            : [];
+        return this.announceFallback(inner, true);
+    }
+    announceFallback(children, busy) {
+        if (!children || (Array.isArray(children) && children.length === 0)) {
+            return [];
+        }
+        return a11yElement('span', {
+            'aria-live': 'polite',
+            'aria-atomic': 'true',
+            'aria-busy': busy ? 'true' : 'false',
+        }, children);
+    }
+    /** Renders whatever the current state calls for: a suspension, a reload, or nothing. */
+    renderFallback() {
+        if (this.held.size > 0) {
+            this.detachSource();
+        }
+        else {
+            // A reload keeps the stale subtree on screen next to the indicator.
+            this.restoreSource();
+        }
+        this.fallbackView.patchChildren(this.fallbackChildren());
+    }
+    showFallback() {
+        this.requestFallbackRender();
+    }
+    hideFallback() {
+        this.requestFallbackRender();
+    }
+    requestFallbackRender() {
+        if (this.rendering > 0) {
+            this.renderDeferred = true;
+            return;
+        }
+        this.renderFallback();
+    }
+    focused;
+    detachSource() {
+        if (this.detached)
+            return;
+        const documentRef = this.parent.ownerDocument;
+        const active = documentRef?.activeElement ?? null;
+        if (active && this.sourceContains(active)) {
+            this.focused = active;
+        }
+        this.detached = detachRange(this.context.renderer, this.sourceView.firstNode(), this.sourceView.lastNode());
+    }
+    sourceContains(node) {
+        let current = this.sourceView.firstNode();
+        const end = this.sourceView.lastNode();
+        while (current) {
+            if (current === node)
+                return true;
+            if (isElementNode(current) && current.contains(node))
+                return true;
+            if (current === end)
+                break;
+            current = current.nextSibling;
+        }
+        return false;
+    }
+    restoreSource() {
+        if (!this.detached)
+            return;
+        // Back before the marker that follows the source range, so the original
+        // order (fallback / source) is preserved.
+        const anchor = this.position === 'before' ? this.end : this.fallbackView.firstNode();
+        reattachRange(this.context.renderer, this.detached, anchor, this.parent);
+        this.detached = undefined;
+        if (this.focused &&
+            'focus' in this.focused &&
+            typeof this.focused.focus === 'function') {
+            this.focused.focus();
+        }
+        this.focused = undefined;
+    }
+}
+class FieldExceptionBlockRenderedNode {
+    kind = 'field-exception-block';
+    boundaryId = nextFieldExceptionBoundaryId++;
+    descriptor;
+    sourcesVersion = signal(0);
+    sources = new Set();
+    componentSourceCleanups;
+    view;
+    effectRef;
+    node;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.context = context;
+        this.descriptor = signal(node);
+        this.view = createFragment(parent, before, this.boundaryContext(), [node.source], 'craft-field-exception-block');
+        this.componentSourceCleanups = componentFieldExceptionSources(context.componentContext).map((source) => this.register(source));
+        this.effectRef = createRenderEffect(context, 'field-exception-block', () => {
+            this.node = this.descriptor();
+            this.sourcesVersion();
+            const fallbacks = this.renderFallbacks();
+            this.view.patchChildren(this.node.options.position === 'before'
+                ? [fallbacks, this.node.source]
+                : [this.node.source, fallbacks]);
+        });
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'field-exception-block')
+            return false;
+        this.descriptor.set(node);
+        return true;
+    }
+    boundaryContext() {
+        return childContext(this.context, {
+            fieldExceptionBoundary: {
+                register: (source, element) => this.register(source, element),
+            },
+        });
+    }
+    register(source, element) {
+        const rawSource = rawReactiveFacade(source);
+        const unregisterParent = this.context.fieldExceptionBoundary?.register(rawSource, element);
+        const registered = {
+            source: rawSource,
+            element,
+            messageIds: new Map(),
+        };
+        if (element) {
+            this.accessibilityState(element).registrations.add(this.boundaryId);
+        }
+        this.sources.add(registered);
+        untracked(() => this.sourcesVersion.update((value) => value + 1));
+        return () => {
+            this.releaseAccessibility(registered);
+            this.sources.delete(registered);
+            untracked(() => this.sourcesVersion.update((value) => value + 1));
+            unregisterParent?.();
+        };
+    }
+    orderedSources() {
+        const ordered = [...this.sources].sort((left, right) => {
+            if (!left.element)
+                return 1;
+            if (!right.element)
+                return -1;
+            if (left.element === right.element)
+                return 0;
+            const relation = left.element.compareDocumentPosition(right.element);
+            return relation & 4 /* Node.DOCUMENT_POSITION_FOLLOWING */ ? -1 : 1;
+        });
+        const seen = new Set();
+        return ordered.filter(({ source }) => {
+            if (seen.has(source))
+                return false;
+            seen.add(source);
+            return true;
+        });
+    }
+    activeExceptions(source) {
+        const visibility = this.node.options.visibility ?? 'visibleExceptions';
+        if (visibility === 'visibleExceptions') {
+            if (this.node.options.mode === 'first') {
+                const first = source.visibleFirstLeftFailedValidation();
+                if (first && this.handles(source, first))
+                    return [first];
+                return source
+                    .visibleExceptions()
+                    .list.filter((exception) => this.handles(source, exception))
+                    .slice(0, 1);
+            }
+            return source.visibleExceptions().list;
+        }
+        if (!fieldExceptionVisibilityMatches(visibility, {
+            field: source.field,
+            hasAttemptedSubmit: source.hasAttemptedSubmit,
+        })) {
+            return [];
+        }
+        if (this.node.options.mode === 'first') {
+            const first = source.firstLeftFailedValidation();
+            if (first && this.handles(source, first))
+                return [first];
+            return source
+                .exceptions()
+                .list.filter((exception) => this.handles(source, exception))
+                .slice(0, 1);
+        }
+        return source.exceptions().list;
+    }
+    handles(source, exception) {
+        return Boolean(fieldExceptionHandler(this.node.handlers, source.path, exception._tag));
+    }
+    renderFallbacks() {
+        const children = [];
+        for (const registered of this.orderedSources()) {
+            const { source } = registered;
+            const activeMessageIds = [];
+            const exceptions = this.activeExceptions(source);
+            exceptions.forEach((exception, index) => {
+                const handler = fieldExceptionHandler(this.node.handlers, source.path, exception._tag);
+                if (!handler)
+                    return;
+                const validatorName = fieldExceptionValidatorName(source, exception);
+                const messageKey = `${validatorName}:${exception._tag}:${index}`;
+                let id = registered.messageIds.get(messageKey);
+                if (!id) {
+                    id = `craft-field-exception-${this.boundaryId}-${registered.messageIds.size}`;
+                    registered.messageIds.set(messageKey, id);
+                }
+                activeMessageIds.push(id);
+                children.push(fieldExceptionMessageNode(id, handler({
+                    field: source.field,
+                    path: source.path,
+                    runtimePath: source.runtimePath,
+                    validatorName,
+                    exception,
+                })));
+            });
+            this.applyAccessibility(registered, activeMessageIds);
+        }
+        return children;
+    }
+    applyAccessibility(registered, messageIds) {
+        if (!registered.element)
+            return;
+        if (messageIds.length) {
+            this.accessibilityState(registered.element).messagesByBoundary.set(this.boundaryId, messageIds);
+        }
+        else {
+            this.accessibilityState(registered.element).messagesByBoundary.delete(this.boundaryId);
+        }
+        this.reconcileAccessibility(registered.element);
+    }
+    accessibilityState(element) {
+        const existing = fieldExceptionAccessibility.get(element);
+        if (existing)
+            return existing;
+        const created = {
+            originalAriaInvalid: element.getAttribute('aria-invalid'),
+            originalAriaDescribedBy: element.getAttribute('aria-describedby'),
+            registrations: new Set(),
+            messagesByBoundary: new Map(),
+        };
+        fieldExceptionAccessibility.set(element, created);
+        return created;
+    }
+    reconcileAccessibility(element) {
+        const state = this.accessibilityState(element);
+        const renderer = this.context.renderer;
+        const messageIds = [...state.messagesByBoundary.values()].flat();
+        if (messageIds.length) {
+            renderer.setAttribute(element, 'aria-invalid', 'true');
+        }
+        else {
+            if (state.originalAriaInvalid === null) {
+                renderer.removeAttribute(element, 'aria-invalid');
+            }
+            else {
+                renderer.setAttribute(element, 'aria-invalid', state.originalAriaInvalid);
+            }
+        }
+        const describedBy = [
+            ...(state.originalAriaDescribedBy?.split(/\s+/).filter(Boolean) ?? []),
+            ...messageIds,
+        ];
+        if (describedBy.length) {
+            renderer.setAttribute(element, 'aria-describedby', [...new Set(describedBy)].join(' '));
+        }
+        else {
+            renderer.removeAttribute(element, 'aria-describedby');
+        }
+    }
+    releaseAccessibility(registered) {
+        if (!registered.element)
+            return;
+        const state = this.accessibilityState(registered.element);
+        state.messagesByBoundary.delete(this.boundaryId);
+        state.registrations.delete(this.boundaryId);
+        this.reconcileAccessibility(registered.element);
+        if (!state.registrations.size) {
+            fieldExceptionAccessibility.delete(registered.element);
+        }
+    }
+    destroy() {
+        this.effectRef.destroy();
+        this.componentSourceCleanups.forEach((cleanup) => cleanup());
+        this.view.destroy();
+        this.sources.forEach((source) => this.releaseAccessibility(source));
+        this.sources.clear();
+    }
+}
+function componentHostName(injector, name) {
+    const tags = injector.get(HOST_TAG_LIST, []);
+    const current = tags[tags.length - 1];
+    if (current?.startsWith('component:')) {
+        return current;
+    }
+    return allocateCraftHostName(injector, 'component', name);
+}
+function allocateCraftHostName(injector, kind, name) {
+    const register = injector.get(COMPONENT_REGISTER, null) ?? ɵfallbackComponentRegister;
+    return `${kind}:${name}#${register.next()}`;
+}
+class ComponentRenderedNode {
+    kind = 'component';
+    environmentInjector;
+    propKeys;
+    propSources;
+    hostPropsSource;
+    view;
+    effectRef;
+    composedTemplateEffect;
+    componentExceptionEffect;
+    syncTemplateFlushRelease;
+    componentFallbackVisible = false;
+    componentFallbackException;
+    styleReleases;
+    providerTrackers = [];
+    templateOnly;
+    traceState;
+    componentRenderContext;
+    traceCreated = false;
+    factoryContext;
+    latestTemplate = [];
+    registrationReleases = [];
+    hostBindings;
+    component;
+    context;
+    constructor(component, props, parent, before, context, hostTarget, templateContext, additionalProviders = [], declarationContext) {
+        this.component = component;
+        this.context = context;
+        this.templateOnly = templateContext !== undefined;
+        const definition = component[CRAFT_COMPONENT];
+        const composition = definition.composition;
+        const ownScope = scopeIdFor(definition.scopeDefinition, definition.name);
+        this.traceState = { renderCount: 0 };
+        this.styleReleases = acquireStyles(context, definition.styleOwners, ownScope);
+        const componentRenderContext = childContext(context, {
+            ownerScope: ownScope,
+            rootScope: scopeTokens(context.rootScope, ownScope),
+            componentName: definition.name,
+            contentStyles: definition.meta.contentStyles,
+            contentScope: undefined,
+            declarationContext: declarationContext ?? context,
+            directiveNames: definition.styleOwners
+                .slice(1)
+                .map((owner) => owner.name),
+            traceState: this.traceState,
+        });
+        this.componentRenderContext = componentRenderContext;
+        this.hostBindings = hostTarget
+            ? new HostPropertyBindings(hostTarget, context)
+            : undefined;
+        const componentElement = hostTarget ?? (isElementNode(parent) ? parent : parent.parentElement);
+        // Angular's runtime accepts any Injector as the R3Injector parent even
+        // though the public helper narrows the type to EnvironmentInjector. Keep
+        // the immediate parent here: unwrapping it through
+        // `get(EnvironmentInjector)` would skip route-scoped providers such as
+        // ActivatedRoute and ChildrenOutletContexts.
+        const parentInjector = context.injector;
+        if (!composition) {
+            this.environmentInjector = createEnvironmentInjector([
+                ...provideHostName(`component:${definition.name}`),
+                {
+                    provide: CRAFT_HYDRATION_ID,
+                    useValue: componentRenderContext.identity,
+                },
+                ...(definition.meta.providers ?? []),
+                {
+                    provide: ElementRef,
+                    useValue: new ElementRef(componentElement),
+                },
+                ...additionalProviders,
+            ], parentInjector, 'CraftComponent');
+            this.traceCreated = true;
+            traceComponentLifecycle(this.environmentInjector, 'create', definition.name, this.traceState.renderCount);
+        }
+        this.propKeys = this.templateOnly
+            ? []
+            : Object.keys(props).filter((key) => !isHostProperty(key));
+        this.propSources = this.propKeys.map((key) => signal(props[key]));
+        this.hostPropsSource = signal(hostPropsFromComponentProps(props));
+        const inputShells = this.propSources.map((source) => {
+            const input = markYieldableMethod((...callbackArgs) => {
+                const current = source();
+                if (callbackArgs.length > 0 && typeof current === 'function') {
+                    return current(...callbackArgs);
+                }
+                const value = typeof current === 'function'
+                    ? current()
+                    : current;
+                return isGenerator(value)
+                    ? value
+                    : yieldableInvocation(value);
+            });
+            // Content inputs are object-shaped at the call site but component
+            // factories receive callable input shells. Expose object properties on
+            // the shell so the factory can use `content.header` without eagerly
+            // evaluating a slot.
+            return new Proxy(input, {
+                get(target, property, receiver) {
+                    const current = source();
+                    if (typeof current === 'object' &&
+                        current !== null &&
+                        property in current) {
+                        return Reflect.get(current, property);
+                    }
+                    return Reflect.get(target, property, receiver);
+                },
+                has(target, property) {
+                    const current = source();
+                    return ((typeof current === 'object' &&
+                        current !== null &&
+                        property in current) ||
+                        property in target);
+                },
+                ownKeys(target) {
+                    const current = source();
+                    return [
+                        ...new Set([
+                            ...Reflect.ownKeys(target),
+                            ...(typeof current === 'object' && current !== null
+                                ? Reflect.ownKeys(current)
+                                : []),
+                        ]),
+                    ];
+                },
+                getOwnPropertyDescriptor(target, property) {
+                    const current = source();
+                    if (typeof current === 'object' &&
+                        current !== null &&
+                        property in current) {
+                        return {
+                            configurable: true,
+                            enumerable: true,
+                            value: Reflect.get(current, property),
+                        };
+                    }
+                    return Reflect.getOwnPropertyDescriptor(target, property);
+                },
+            });
+        });
+        // A one-argument logic factory may model its complete input as one typed
+        // object. The callable shell keeps the historical Input<T> invocation
+        // while exposing the object's properties for the contract-based API.
+        const args = !this.templateOnly && definition.factory.length === 1
+            ? [
+                new Proxy(((...callbackArgs) => inputShells[0](...callbackArgs)), {
+                    get: (target, property, receiver) => {
+                        const index = this.propKeys.indexOf(String(property));
+                        if (index !== -1) {
+                            return preserveContentDeclarationContext(this.propSources[index](), declarationContext ?? context);
+                        }
+                        return Reflect.get(target, property, receiver);
+                    },
+                    has: (target, property) => this.propKeys.includes(String(property)) ||
+                        Reflect.has(target, property),
+                    ownKeys: (target) => [
+                        ...new Set([...Reflect.ownKeys(target), ...this.propKeys]),
+                    ],
+                    getOwnPropertyDescriptor: (target, property) => {
+                        const index = this.propKeys.indexOf(String(property));
+                        return index === -1
+                            ? Reflect.getOwnPropertyDescriptor(target, property)
+                            : {
+                                configurable: true,
+                                enumerable: true,
+                                value: preserveContentDeclarationContext(this.propSources[index](), declarationContext ?? context),
+                            };
+                    },
+                }),
+            ]
+            : inputShells;
+        const factoryContext = composition
+            ? undefined
+            : this.templateOnly
+                ? templateContext?.value
+                : untracked(() => executeCraftComponentFactory(definition.factory, args, this.environmentInjector));
+        if (!composition &&
+            !this.templateOnly &&
+            typeof factoryContext === 'object' &&
+            factoryContext !== null &&
+            'then' in factoryContext) {
+            throw new Error('Async component factories are not renderable directly. Move asynchronous work behind defer().');
+        }
+        this.factoryContext = factoryContext;
+        if (!composition) {
+            this.registerRuntimeTargets(definition, factoryContext, this.environmentInjector);
+        }
+        this.view = createFragment(parent, before, childContext(componentRenderContext, {
+            injector: composition ? parentInjector : this.environmentInjector,
+            componentContext: factoryContext,
+        }), composition ? [] : [], 'craft-component');
+        this.effectRef = untracked(() => runInInjectionContext(composition ? parentInjector : this.environmentInjector, () => craftEffect('component-render', composition
+            ? (onCleanup) => {
+                // Composition providers and public inputs are the only
+                // dependencies that should recreate the component scope.
+                // Template signals (for example a query status) are tracked
+                // by the dedicated template effect created by
+                // refreshComposedComponent().
+                this.propSources.forEach((source) => source());
+                this.hostPropsSource();
+                untracked(() => this.refreshComposedComponent(definition, args, componentElement, parentInjector, additionalProviders, hostTarget, context, componentRenderContext, onCleanup));
+                this.providerTrackers.forEach((tracker) => tracker());
+            }
+            : () => {
+                try {
+                    const callSiteHostProps = this.hostPropsSource();
+                    const hostProps = mergeHostProps(definition.meta.host ?? {}, callSiteHostProps);
+                    const renderContext = childContext(componentRenderContext, {
+                        injector: this.environmentInjector,
+                        componentContext: this.factoryContext,
+                    });
+                    this.traceState.renderCount += 1;
+                    this.latestTemplate = executeTemplateTrace(renderContext.injector, traceContext(renderContext, 'component', this.traceState.renderCount === 1
+                        ? 'initialRender'
+                        : 'update', definition.name), () => withCraftRenderContext(renderContext, () => definition.template(projectYieldableTemplateContext(this.factoryContext), callSiteHostProps)));
+                    this.view.patchChildren(this.latestTemplate);
+                    this.hostBindings?.patch(hostProps);
+                    context.exceptionBoundaryResolved?.();
+                }
+                catch (error) {
+                    if (isCraftGenShortCircuit(error) &&
+                        context.exceptionBoundary?.(error.exception)) {
+                        this.view.patchChildren([]);
+                        return;
+                    }
+                    if (isCraftGenShortCircuit(error)) {
+                        throw new CraftUnhandledExceptionError(error.exception);
+                    }
+                    throw error;
+                }
+            })));
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    refreshComposedComponent(definition, args, componentElement, parentInjector, additionalProviders, hostTarget, context, componentRenderContext, onCleanup) {
+        const composition = definition.composition;
+        if (!composition) {
+            return;
+        }
+        this.view.patchChildren([]);
+        this.environmentInjector = createEnvironmentInjector([
+            ...provideHostName(`component:${definition.name}`),
+            {
+                provide: CRAFT_HYDRATION_ID,
+                useValue: componentRenderContext.identity,
+            },
+            ...(definition.meta.providers ?? []),
+            ...(composition.providers ?? []),
+            {
+                provide: ElementRef,
+                useValue: new ElementRef(componentElement),
+            },
+            ...additionalProviders,
+        ], parentInjector, 'CraftComponent');
+        if (!this.traceCreated) {
+            this.traceCreated = true;
+            traceComponentLifecycle(this.environmentInjector, 'create', definition.name, this.traceState.renderCount);
+        }
+        const environmentInjector = this.environmentInjector;
+        let renderInjector = environmentInjector;
+        onCleanup(() => {
+            this.registrationReleases.forEach((release) => release());
+            this.registrationReleases = [];
+            this.composedTemplateEffect?.destroy();
+            this.composedTemplateEffect = undefined;
+            this.syncTemplateFlushRelease?.();
+            this.syncTemplateFlushRelease = undefined;
+            this.componentExceptionEffect?.destroy();
+            this.componentExceptionEffect = undefined;
+            this.componentFallbackVisible = false;
+            this.componentFallbackException = undefined;
+            this.view.patchChildren([]);
+            renderInjector.destroy();
+            if (renderInjector !== environmentInjector) {
+                environmentInjector.destroy();
+            }
+            this.providerTrackers = [];
+            if (this.environmentInjector === renderInjector) {
+                this.environmentInjector = undefined;
+                this.factoryContext = undefined;
+            }
+        });
+        let factoryContext;
+        let renderContext;
+        const handledResourceExceptionCodes = new Set();
+        const componentBoundary = composition.catchBlockPosition
+            ? (exception) => {
+                if (!composition.catchHandlers?.[exception._tag]) {
+                    return context.exceptionBoundary?.(exception) ?? false;
+                }
+                this.renderComposedException(definition, exception, renderInjector, renderContext, context, hostTarget);
+                return true;
+            }
+            : undefined;
+        renderContext = childContext(componentRenderContext, {
+            injector: environmentInjector,
+            handledResourceExceptionCodes,
+            ...(componentBoundary
+                ? {
+                    exceptionBoundary: componentBoundary,
+                }
+                : {}),
+        });
+        try {
+            const providerResolution = eagerlyResolveBrandedProviders(composition.providers ?? [], environmentInjector);
+            this.providerTrackers = providerResolution.trackers;
+            if (providerResolution.exception) {
+                renderContext = childContext(componentRenderContext, {
+                    injector: environmentInjector,
+                });
+                this.view.updateContext(renderContext);
+                this.renderComposedException(definition, providerResolution.exception, environmentInjector, renderContext, context, hostTarget);
+                return;
+            }
+            if (providerResolution.overrides.length > 0) {
+                renderInjector = createEnvironmentInjector([...providerResolution.overrides], environmentInjector, 'CraftComponentProviders');
+                this.environmentInjector = renderInjector;
+            }
+            renderContext = childContext(componentRenderContext, {
+                injector: renderInjector,
+                handledResourceExceptionCodes,
+            });
+            this.view.updateContext(renderContext);
+            factoryContext = untracked(() => executeCraftComponentFactory(definition.factory, args, renderInjector));
+            if (typeof factoryContext === 'object' &&
+                factoryContext !== null &&
+                'then' in factoryContext) {
+                throw new Error('Async component factories are not renderable directly. Move asynchronous work behind defer().');
+            }
+            this.registerRuntimeTargets(definition, factoryContext, renderInjector);
+        }
+        catch (error) {
+            if (!isCraftGenShortCircuit(error)) {
+                throw error;
+            }
+            if (this.context.exceptionBoundary?.(error.exception)) {
+                return;
+            }
+            this.renderComposedException(definition, error.exception, renderInjector, renderContext, context, hostTarget);
+            return;
+        }
+        if (isCraftException(factoryContext)) {
+            this.renderComposedException(definition, factoryContext, renderInjector, renderContext, context, hostTarget);
+            return;
+        }
+        this.composedTemplateEffect = untracked(() => runInInjectionContext(renderInjector, () => craftEffect('component-template', () => {
+            this.renderComposedTemplate(definition, factoryContext, renderInjector, renderContext, context, hostTarget);
+            if (composition.catchBlockPosition &&
+                !this.componentExceptionEffect) {
+                this.installComponentExceptionEffect(definition, factoryContext, renderInjector, renderContext, context, hostTarget);
+            }
+        })));
+        this.syncTemplateFlushRelease?.();
+        this.syncTemplateFlushRelease = registerCraftSyncTemplateFlush(() => {
+            this.renderComposedTemplate(definition, factoryContext, renderInjector, renderContext, context, hostTarget);
+        });
+    }
+    installComponentExceptionEffect(definition, factoryContext, renderInjector, renderContext, context, hostTarget) {
+        this.componentExceptionEffect = untracked(() => runInInjectionContext(renderInjector, () => craftEffect('component-catch-block-resource-exceptions', () => {
+            const exception = findResourceException(factoryContext);
+            if (exception) {
+                if (renderContext.handledResourceExceptionCodes?.has(exception._tag)) {
+                    if (this.componentFallbackVisible) {
+                        this.componentFallbackVisible = false;
+                        this.componentFallbackException = undefined;
+                        untracked(() => this.renderComposedTemplate(definition, factoryContext, renderInjector, renderContext, context, hostTarget));
+                    }
+                    return;
+                }
+                if (this.componentFallbackVisible &&
+                    this.componentFallbackException === exception) {
+                    return;
+                }
+                this.componentFallbackVisible = true;
+                this.componentFallbackException = exception;
+                untracked(() => this.renderComposedException(definition, exception, renderInjector, renderContext, context, hostTarget, true));
+            }
+            else if (this.componentFallbackVisible) {
+                this.componentFallbackVisible = false;
+                this.componentFallbackException = undefined;
+                untracked(() => this.renderComposedTemplate(definition, factoryContext, renderInjector, renderContext, context, hostTarget));
+            }
+        }, { manualCleanup: true })));
+    }
+    registerRuntimeTargets(definition, factoryContext, injector) {
+        this.registrationReleases.forEach((release) => release());
+        this.registrationReleases = [
+            ɵregisterCraftTarget(injector, this.component, factoryContext, componentHostName(injector, definition.name)),
+            ...definition.styleOwners.flatMap((owner) => owner.registrationTarget === undefined
+                ? []
+                : [
+                    ɵregisterCraftTarget(injector, owner.registrationTarget, factoryContext, allocateCraftHostName(injector, 'directive', owner.name)),
+                ]),
+        ];
+    }
+    renderComposedTemplate(definition, factoryContext, renderInjector, renderContext, context, hostTarget) {
+        if (this.componentFallbackVisible)
+            return;
+        try {
+            this.traceState.renderCount += 1;
+            const rendered = this.composedTemplateChildren(definition, factoryContext, renderContext);
+            const children = this.withComponentFieldExceptionBlock(definition, rendered.children);
+            this.latestTemplate = children;
+            this.view.patchChildren(children);
+            this.hostBindings?.patch(rendered.hostProps);
+        }
+        catch (error) {
+            if (!isCraftGenShortCircuit(error))
+                throw error;
+            if (renderContext.exceptionBoundary?.(error.exception))
+                return;
+            this.renderComposedException(definition, error.exception, renderInjector, renderContext, context, hostTarget);
+            return;
+        }
+        renderContext.exceptionBoundaryResolved?.();
+    }
+    composedTemplateChildren(definition, factoryContext, renderContext) {
+        this.factoryContext = factoryContext;
+        this.view.updateContext(childContext(renderContext, { componentContext: factoryContext }));
+        const callSiteHostProps = this.hostPropsSource();
+        const hostProps = mergeHostProps(definition.meta.host ?? {}, callSiteHostProps);
+        return {
+            children: executeTemplateTrace(renderContext.injector, traceContext(renderContext, 'component', this.traceState.renderCount === 1 ? 'initialRender' : 'update', definition.name), () => withCraftRenderContext(renderContext, () => definition.template(projectYieldableTemplateContext(factoryContext), callSiteHostProps))),
+            hostProps,
+        };
+    }
+    withComponentFieldExceptionBlock(definition, children) {
+        const handlers = definition.composition?.fieldExceptionHandlers;
+        const options = definition.composition?.fieldExceptionOptions;
+        if (!handlers || !options)
+            return children;
+        return {
+            kind: 'field-exception-block',
+            source: children,
+            handlers,
+            options,
+        };
+    }
+    renderComposedException(definition, exception, environmentInjector, renderContext, context, hostTarget, preserveFactoryContext = false) {
+        const blockHandler = definition.composition?.catchHandlers?.[exception._tag];
+        const tagHandler = definition.composition?.catchTagHandlers?.[exception._tag];
+        if (!blockHandler && !tagHandler) {
+            if (this.context.exceptionBoundary?.(exception)) {
+                return;
+            }
+            throw new CraftUnhandledExceptionError(exception);
+        }
+        if (!preserveFactoryContext) {
+            this.factoryContext = undefined;
+        }
+        this.view.updateContext(renderContext);
+        const hostProps = mergeHostProps(definition.meta.host ?? {}, this.hostPropsSource());
+        if (tagHandler) {
+            try {
+                executeCraftComponentFactory(function* () {
+                    return yield* tagHandler(exception);
+                }, [], environmentInjector);
+            }
+            catch (error) {
+                if (!isCraftGenShortCircuit(error))
+                    throw error;
+                if (context.exceptionBoundary?.(error.exception))
+                    return;
+                throw new CraftUnhandledExceptionError(error.exception);
+            }
+            this.view.patchChildren([]);
+        }
+        else {
+            const resolved = runInInjectionContext(environmentInjector, () => resolveCatchBlockHandler(blockHandler, exception, false, definition.composition?.catchBlockPosition ?? 'after'));
+            if (preserveFactoryContext && resolved.showSource) {
+                try {
+                    const source = untracked(() => this.composedTemplateChildren(definition, this.factoryContext, renderContext));
+                    const children = resolved.position === 'before'
+                        ? [
+                            resolved.children,
+                            this.withComponentFieldExceptionBlock(definition, source.children),
+                        ]
+                        : [
+                            this.withComponentFieldExceptionBlock(definition, source.children),
+                            resolved.children,
+                        ];
+                    this.view.patchChildren(children);
+                    this.hostBindings?.patch(source.hostProps);
+                }
+                catch (error) {
+                    if (!isCraftGenShortCircuit(error))
+                        throw error;
+                    this.view.patchChildren(resolved.children);
+                }
+            }
+            else {
+                this.view.patchChildren(resolved.children);
+            }
+        }
+        this.hostBindings?.patch(hostProps);
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'component' ||
+            node.component !== this.component ||
+            (node.injector !== undefined && node.injector !== this.context.injector)) {
+            return false;
+        }
+        const props = node.props;
+        this.propKeys.forEach((key, index) => {
+            this.propSources[index].set(props[key]);
+        });
+        this.hostPropsSource.set(hostPropsFromComponentProps(props));
+        return true;
+    }
+    updateProps(props) {
+        if (this.templateOnly) {
+            return;
+        }
+        this.patch({
+            kind: 'component',
+            component: this.component,
+            props,
+        });
+    }
+    updateContext(context) {
+        if (!this.templateOnly) {
+            throw new Error('Cannot update the context of a logic-backed component.');
+        }
+        this.factoryContext = context;
+        const definition = this.component[CRAFT_COMPONENT];
+        const callSiteHostProps = this.hostPropsSource();
+        const hostProps = mergeHostProps(definition.meta.host ?? {}, callSiteHostProps);
+        this.traceState.renderCount += 1;
+        this.latestTemplate = executeTemplateTrace(this.environmentInjector ?? this.context.injector, traceContext(this.componentRenderContext, 'component', this.traceState.renderCount === 1 ? 'initialRender' : 'update', definition.name), () => definition.template(projectYieldableTemplateContext(context), callSiteHostProps));
+        this.view.patchChildren(this.latestTemplate);
+        this.hostBindings?.patch(hostProps);
+    }
+    locator(host, tag, criteria) {
+        return findCraftTemplateLocator(host, this.latestTemplate, tag, criteria);
+    }
+    destroy() {
+        if (this.traceCreated) {
+            traceComponentLifecycle(this.environmentInjector ?? this.context.injector, 'destroy', this.componentRenderContext.componentName ?? 'unknown', this.traceState.renderCount);
+            this.traceCreated = false;
+        }
+        this.effectRef.destroy();
+        this.hostBindings?.destroy();
+        this.view.destroy();
+        this.styleReleases.forEach((release) => release());
+        this.environmentInjector?.destroy();
+    }
+}
+class DeferRenderedNode {
+    kind = 'defer';
+    view;
+    state = 'placeholder';
+    destroyed = false;
+    triggerCleanup;
+    triggerTimer;
+    loadedValue;
+    loadError;
+    node;
+    parent;
+    context;
+    constructor(node, parent, before, context) {
+        this.node = node;
+        this.parent = parent;
+        this.context = context;
+        this.view = createFragment(parent, before, context, node.placeholder
+            ? renderDeferChildren(context, 'placeholder', node.placeholder)
+            : [], 'craft-defer');
+        this.installTrigger();
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'defer' || node.loader !== this.node.loader) {
+            return false;
+        }
+        this.node = node;
+        if (this.state === 'loaded') {
+            this.view.patchChildren(renderDeferChildren(this.context, 'resolve', this.node.resolve, [
+                this.loadedValue,
+            ]));
+        }
+        else if (this.state === 'error') {
+            this.view.patchChildren(this.node.error
+                ? renderDeferChildren(this.context, 'error', this.node.error, [
+                    this.loadError,
+                ])
+                : []);
+        }
+        else if (this.state === 'loading') {
+            this.view.patchChildren(this.node.loading
+                ? renderDeferChildren(this.context, 'loading', this.node.loading)
+                : this.node.placeholder
+                    ? renderDeferChildren(this.context, 'placeholder', this.node.placeholder)
+                    : []);
+        }
+        else {
+            this.view.patchChildren(this.node.placeholder
+                ? renderDeferChildren(this.context, 'placeholder', this.node.placeholder)
+                : []);
+        }
+        return true;
+    }
+    installTrigger() {
+        if (this.node.trigger === 'immediate') {
+            this.startLoad();
+            return;
+        }
+        if (this.node.trigger === 'idle') {
+            const windowRef = this.parent.ownerDocument?.defaultView;
+            const idleWindow = windowRef;
+            if (idleWindow?.requestIdleCallback) {
+                const handle = idleWindow.requestIdleCallback(() => this.startLoad());
+                this.triggerCleanup = () => idleWindow.cancelIdleCallback?.(handle);
+            }
+            else {
+                this.triggerTimer = this.context.injector
+                    .get(CRAFT_TEMPORAL_RUNTIME, new RealCraftTemporalRuntime())
+                    .schedule(() => this.startLoad(), 0, {
+                    kind: 'defer-trigger',
+                    owner: this.context.componentName,
+                });
+                this.triggerCleanup = () => this.triggerTimer?.cancel();
+            }
+            return;
+        }
+        if (this.node.trigger === 'viewport' &&
+            typeof IntersectionObserver !== 'undefined') {
+            const target = this.firstElementInView();
+            if (target) {
+                const observer = new IntersectionObserver((entries) => {
+                    if (entries.some((entry) => entry.isIntersecting)) {
+                        observer.disconnect();
+                        this.startLoad();
+                    }
+                });
+                observer.observe(target);
+                this.triggerCleanup = () => observer.disconnect();
+                return;
+            }
+        }
+        if (this.node.trigger === 'interaction') {
+            const target = this.firstElementInView() ?? this.parent;
+            const start = (event) => {
+                if (event && event.type === 'keydown') {
+                    const key = event.key;
+                    if (key !== 'Enter' && key !== ' ')
+                        return;
+                    event.preventDefault();
+                }
+                this.startLoad();
+            };
+            if (isElementNode(target)) {
+                const tag = target.tagName.toLowerCase();
+                const interactive = tag === 'button' ||
+                    tag === 'a' ||
+                    tag === 'input' ||
+                    tag === 'select' ||
+                    tag === 'textarea';
+                if (!interactive) {
+                    if (!target.hasAttribute('tabindex')) {
+                        this.context.renderer.setAttribute(target, 'tabindex', '0');
+                    }
+                    if (!target.getAttribute('role')) {
+                        this.context.renderer.setAttribute(target, 'role', 'button');
+                    }
+                }
+            }
+            const clickCleanup = this.context.renderer.listen(target, 'click', start);
+            const keyCleanup = this.context.renderer.listen(target, 'keydown', start);
+            this.triggerCleanup = () => {
+                clickCleanup();
+                keyCleanup();
+            };
+            return;
+        }
+        this.triggerTimer = this.context.injector
+            .get(CRAFT_TEMPORAL_RUNTIME, new RealCraftTemporalRuntime())
+            .schedule(() => this.startLoad(), 0, {
+            kind: 'defer-trigger',
+            owner: this.context.componentName,
+        });
+        this.triggerCleanup = () => this.triggerTimer?.cancel();
+    }
+    firstElementInView() {
+        let current = this.view.firstNode().nextSibling;
+        while (current && current !== this.view.lastNode()) {
+            if (current.nodeType === 1) {
+                return current;
+            }
+            current = current.nextSibling;
+        }
+        return undefined;
+    }
+    setBusy(busy) {
+        const target = this.firstElementInView();
+        if (!target)
+            return;
+        if (busy) {
+            this.context.renderer.setAttribute(target, 'aria-busy', 'true');
+        }
+        else {
+            this.context.renderer.removeAttribute(target, 'aria-busy');
+        }
+    }
+    startLoad() {
+        if (this.state !== 'placeholder' || this.destroyed) {
+            return;
+        }
+        this.state = 'loading';
+        this.triggerCleanup?.();
+        this.triggerCleanup = undefined;
+        this.setBusy(true);
+        this.view.patchChildren(this.node.loading
+            ? renderDeferChildren(this.context, 'loading', this.node.loading)
+            : this.node.placeholder
+                ? renderDeferChildren(this.context, 'placeholder', this.node.placeholder)
+                : []);
+        const loader = this.node.loader;
+        executeCraftComponentFactoryAsync(function* () {
+            return yield* craftLazy(loader);
+        }, [], this.context.injector)
+            .then((settled) => {
+            if (this.destroyed) {
+                return;
+            }
+            if (settled.kind === 'shortCircuit') {
+                this.state = 'error';
+                this.loadError = settled.exception;
+                this.view.patchChildren(this.node.error
+                    ? renderDeferChildren(this.context, 'error', this.node.error, [
+                        settled.exception,
+                    ])
+                    : []);
+                this.setBusy(false);
+                return;
+            }
+            this.state = 'loaded';
+            this.loadedValue = settled.value;
+            this.view.patchChildren(renderDeferChildren(this.context, 'resolve', this.node.resolve, [
+                settled.value,
+            ]));
+            this.setBusy(false);
+        })
+            .catch((error) => {
+            if (!this.destroyed) {
+                this.state = 'error';
+                this.loadError = error;
+                this.view.patchChildren(this.node.error
+                    ? renderDeferChildren(this.context, 'error', this.node.error, [
+                        error,
+                    ])
+                    : []);
+                this.setBusy(false);
+            }
+        });
+    }
+    destroy() {
+        this.destroyed = true;
+        this.triggerCleanup?.();
+        this.view.destroy();
+    }
+}
+class HeadingSectionRenderedNode {
+    kind = 'heading-section';
+    view;
+    constructor(node, parent, before, context) {
+        const level = node.reset ? 1 : Math.min(6, (context.headingLevel ?? 1) + 1);
+        this.view = createFragment(parent, before, childContext(context, { headingLevel: level }), node.children, 'craft-heading-section');
+    }
+    firstNode() {
+        return this.view.firstNode();
+    }
+    lastNode() {
+        return this.view.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'heading-section')
+            return false;
+        this.view.patchChildren(node.children);
+        return true;
+    }
+    destroy() {
+        this.view.destroy();
+    }
+}
+class HeadingRenderedNode {
+    kind = 'heading';
+    elementView;
+    tag;
+    constructor(node, parent, before, context) {
+        const level = Math.min(6, Math.max(1, context.headingLevel ?? 1));
+        this.tag = `h${level}`;
+        const created = createElementForRender(this.tag, parent, before, context);
+        this.elementView = new ElementRenderedNode(created.element, this.tag, created.context, {
+            kind: 'element',
+            tag: this.tag,
+            props: node.props,
+            children: node.children,
+        });
+    }
+    firstNode() {
+        return this.elementView.firstNode();
+    }
+    lastNode() {
+        return this.elementView.lastNode();
+    }
+    patch(node) {
+        if (node.kind !== 'heading')
+            return false;
+        return this.elementView.patch({
+            kind: 'element',
+            tag: this.tag,
+            props: node.props,
+            children: node.children,
+        });
+    }
+    destroy() {
+        this.elementView.destroy();
+    }
+}
+function mountNode(node, parent, before, context) {
+    switch (node.kind) {
+        case 'text': {
+            const created = createTextForRender(node.value, parent, before, context, true);
+            return new TextRenderedNode(created.text, node.value, created.context.renderer);
+        }
+        case 'reactive-text': {
+            const created = createTextForRender('', parent, before, context, false);
+            return new ReactiveTextRenderedNode(created.text, node.binding, created.context);
+        }
+        case 'element': {
+            const created = createElementForRender(node.tag, parent, before, context);
+            if (created.context.rootScope) {
+                created.context.renderer.setAttribute(created.element, 'data-craft-root', created.context.rootScope);
+            }
+            if (created.context.contentScope) {
+                created.context.renderer.setAttribute(created.element, 'data-craft-content', created.context.contentScope);
+            }
+            return new ElementRenderedNode(created.element, node.tag, created.context, node);
+        }
+        case 'component':
+            return new ComponentRenderedNode(node.component, node.props, parent, before, node.injector
+                ? childContext(context, { injector: node.injector })
+                : context, undefined, undefined, [], node.declarationContext);
+        case 'directive':
+            return new CraftDirectiveRenderedNode(node, parent, before, context);
+        case 'each': {
+            const start = mountComment(parent, 'craft-each:start', before, context);
+            const end = mountComment(parent, 'craft-each:end', before, context);
+            return new EachRenderedNode(node, parent, start, end, context);
+        }
+        case 'if': {
+            return new IfBlockRenderedNode(node, parent, before, context);
+        }
+        case 'heading': {
+            return new HeadingRenderedNode(node, parent, before, context);
+        }
+        case 'heading-section': {
+            return new HeadingSectionRenderedNode(node, parent, before, context);
+        }
+        case 'pending-block': {
+            return new PendingBlockRenderedNode(node, parent, before, context);
+        }
+        case 'catch-block': {
+            return new CatchBlockRenderedNode(node, parent, before, context);
+        }
+        case 'field-exception-block': {
+            return new FieldExceptionBlockRenderedNode(node, parent, before, context);
+        }
+        case 'match-block': {
+            return new MatchBlockRenderedNode(node, parent, before, context);
+        }
+        case 'defer':
+            return new DeferRenderedNode(node, parent, before, context);
+        case 'projection':
+            return new ProjectionRenderedNode(node, parent, before, context);
+        case 'template':
+            return new TemplateRenderedNode(node, parent, before, context);
+    }
+}
+class HostPropertyBindings {
+    props = {};
+    bindings = new Map();
+    host;
+    context;
+    constructor(host, context) {
+        this.host = host;
+        this.context = context;
+    }
+    patch(next) {
+        const renderer = this.context.renderer;
+        const previousAttributes = flattenAttributes(this.props);
+        const nextAttributes = flattenAttributes(next);
+        for (const key of previousAttributes.keys()) {
+            if (!nextAttributes.has(key)) {
+                this.destroyBinding(`attribute:${key}`);
+                applyAttribute(renderer, this.host, key, null, this.context);
+            }
+        }
+        for (const [key, value] of nextAttributes) {
+            if (typeof value === 'function') {
+                this.updateBinding(`attribute:${key}`, value, () => resolveTemplateValue(value, this.context), (resolved) => applyAttribute(renderer, this.host, key, resolved, this.context));
+            }
+            else {
+                this.destroyBinding(`attribute:${key}`);
+                if (!Object.is(previousAttributes.get(key), value) ||
+                    typeof previousAttributes.get(key) === 'function') {
+                    applyAttribute(renderer, this.host, key, value, this.context);
+                }
+            }
+        }
+        if (containsRenderBinding(next['class'])) {
+            this.updateBinding('class', next['class'], () => className(next['class'], this.context), (value) => {
+                if (value) {
+                    renderer.setAttribute(this.host, 'class', String(value));
+                }
+                else {
+                    renderer.removeAttribute(this.host, 'class');
+                }
+            });
+        }
+        else {
+            this.destroyBinding('class');
+            if (!Object.is(this.props['class'], next['class']) ||
+                containsRenderBinding(this.props['class'])) {
+                const value = className(next['class'], this.context);
+                if (value) {
+                    renderer.setAttribute(this.host, 'class', value);
+                }
+                else {
+                    renderer.removeAttribute(this.host, 'class');
+                }
+            }
+        }
+        if (containsRenderBinding(next['style'])) {
+            this.updateBinding('style', next['style'], () => resolveStyleBindingValue(next['style'], this.context), (value) => {
+                renderer.removeAttribute(this.host, 'style');
+                applyStyles(renderer, this.host, undefined, value, this.context);
+            }, sameStyleValue);
+        }
+        else {
+            this.destroyBinding('style');
+            if (!Object.is(this.props['style'], next['style']) ||
+                containsRenderBinding(this.props['style'])) {
+                if (containsRenderBinding(this.props['style'])) {
+                    renderer.removeAttribute(this.host, 'style');
+                }
+                applyStyles(renderer, this.host, containsRenderBinding(this.props['style'])
+                    ? undefined
+                    : this.props['style'], next['style'], this.context);
+            }
+        }
+        this.props = next;
+    }
+    destroy() {
+        this.bindings.forEach(({ effectRef }) => effectRef.destroy());
+        this.bindings.clear();
+    }
+    updateBinding(key, source, evaluate, apply, equals = Object.is) {
+        const current = this.bindings.get(key);
+        if (current?.source === source)
+            return;
+        current?.effectRef.destroy();
+        let initialized = false;
+        let previous;
+        const effectRef = createRenderEffect(this.context, `host-${key}-binding`, () => {
+            const value = evaluate();
+            if (!initialized || !equals(previous, value)) {
+                apply(value);
+                previous = value;
+                initialized = true;
+            }
+        });
+        this.bindings.set(key, { source, effectRef });
+    }
+    destroyBinding(key) {
+        this.bindings.get(key)?.effectRef.destroy();
+        this.bindings.delete(key);
+    }
+}
+export function mountInterpretedComponent(component, host, injector, props) {
+    const craftInjector = ɵcraftInjectorFromHost(injector);
+    const renderer = createBrowserDomAdapter(host.ownerDocument);
+    const rootNode = host.getRootNode();
+    const styleRoot = (typeof Document !== 'undefined' && rootNode instanceof Document) ||
+        (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot)
+        ? rootNode
+        : (host.ownerDocument ?? document);
+    const styles = craftInjector.get(CRAFT_STYLE_REGISTRY, ɵfallbackCraftStyleRegistry);
+    return mountInterpretedComponentWithOptions(component, host, craftInjector, props, { renderer, styleRoot, styles });
+}
+export function mountInterpretedComponentWithOptions(component, host, injector, props, options) {
+    const craftInjector = ɵcraftInjectorFromHost(injector);
+    const identity = options.identity ??
+        createCraftRenderIdentity([component[CRAFT_COMPONENT].name, 0]);
+    let instance;
+    try {
+        instance = new ComponentRenderedNode(component, props, host, null, {
+            renderer: options.renderer,
+            injector: craftInjector,
+            mode: options.mode ?? 'create',
+            identity,
+            hydration: options.hydration,
+            emitHydrationKeys: options.emitHydrationKeys,
+            styleRoot: options.styleRoot,
+            styles: options.styles,
+            ssr: options.ssr,
+            serverStyles: options.serverStyles,
+        }, host);
+    }
+    catch (error) {
+        if (isCraftGenShortCircuit(error)) {
+            throw new CraftUnhandledExceptionError(error.exception);
+        }
+        throw error;
+    }
+    return {
+        updateProps(nextProps) {
+            instance.updateProps(nextProps);
+        },
+        destroy() {
+            instance.destroy();
+        },
+    };
+}
+export function mountInterpretedComponentTemplate(component, host, injector, context, additionalProviders = []) {
+    const craftInjector = ɵcraftInjectorFromHost(injector);
+    const renderer = createBrowserDomAdapter(host.ownerDocument);
+    const rootNode = host.getRootNode();
+    const styleRoot = (typeof Document !== 'undefined' && rootNode instanceof Document) ||
+        (typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot)
+        ? rootNode
+        : (host.ownerDocument ?? document);
+    const styles = craftInjector.get(CRAFT_STYLE_REGISTRY, ɵfallbackCraftStyleRegistry);
+    let instance;
+    try {
+        instance = new ComponentRenderedNode(component, {}, host, null, {
+            renderer,
+            injector: craftInjector,
+            styleRoot,
+            styles,
+            mode: 'create',
+            identity: createCraftRenderIdentity([
+                component[CRAFT_COMPONENT].name,
+                0,
+            ]),
+        }, host, { value: context }, additionalProviders);
+    }
+    catch (error) {
+        if (isCraftGenShortCircuit(error)) {
+            throw new CraftUnhandledExceptionError(error.exception);
+        }
+        throw error;
+    }
+    return {
+        updateContext(nextContext) {
+            instance.updateContext(nextContext);
+        },
+        locator(tag, criteria) {
+            return instance.locator(host, tag, criteria);
+        },
+        destroy() {
+            instance.destroy();
+        },
+    };
+}
+//# sourceMappingURL=interpreter.js.map