@microsoft/webui-framework 0.0.17 → 0.0.19

package/dist/template-element.js

@@ -0,0 +1,1392 @@
+import { getTemplate } from './template.js';
+import { hydrationStart, hydrationEnd } from './lifecycle.js';
+import { createRepeatKeyState, seedHydratedRepeatKeys, syncRepeat, dotWalk, } from './element/diff.js';
+import { collectItemMarkers, nextElement, findByOrdinal, MARKER_COND_START, MARKER_COND_END, MARKER_REPEAT_START, } from './element/markers.js';
+import { injectModuleStyle, } from './element/styles.js';
+import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, hasNativeLiveProperty, } from './element/types.js';
+import { templateHasRoot, templateRootForAttribute } from './template-roots.js';
+const DEV = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
+const templateCache = new WeakMap();
+const templateDOMCache = new WeakMap();
+const rootTagCache = new WeakMap();
+const tplOrdinalCache = new WeakMap();
+function getTplOrdinals(tplNode) {
+    let map = tplOrdinalCache.get(tplNode);
+    if (map)
+        return map;
+    map = new Map();
+    let elemOrd = 0;
+    let textOrd = 0;
+    const children = tplNode.childNodes;
+    for (let k = 0; k < children.length; k++) {
+        const type = children[k].nodeType;
+        if (type === 1) {
+            map.set(k, [1, elemOrd]);
+            elemOrd++;
+        }
+        else if (type === 3) {
+            map.set(k, [3, textOrd]);
+            textOrd++;
+        }
+    }
+    tplOrdinalCache.set(tplNode, map);
+    return map;
+}
+const EMPTY_ARR = [];
+const EMPTY_SET = Object.freeze(new Set());
+const WEBUI_SET_STATE_KEY = Symbol.for('microsoft.webui.setStateKey');
+const templateMetaByCtor = new WeakMap();
+function childNodesArray(parent) {
+    const children = parent.childNodes;
+    const len = children.length;
+    const result = new Array(len);
+    for (let i = 0; i < len; i++)
+        result[i] = children[i];
+    return result;
+}
+function getTemplateDom(meta) {
+    let cached = templateDOMCache.get(meta);
+    if (cached)
+        return cached;
+    const div = document.createElement('div');
+    div.innerHTML = meta.h;
+    templateDOMCache.set(meta, div);
+    return div;
+}
+function installTemplateObservedAttributes(ctor, tagName) {
+    const meta = getTemplate(tagName);
+    if (!meta)
+        return;
+    templateMetaByCtor.set(ctor, meta);
+    const attrs = meta.ta ?? EMPTY_ARR;
+    if (attrs.length === 0)
+        return;
+    const existing = ctor.observedAttributes ?? EMPTY_ARR;
+    const merged = new Array(existing.length + attrs.length);
+    let count = 0;
+    for (let i = 0; i < existing.length; i++) {
+        merged[count] = existing[i];
+        count += 1;
+    }
+    for (let attrIndex = 0; attrIndex < attrs.length; attrIndex++) {
+        const attrName = attrs[attrIndex];
+        let found = false;
+        for (let i = 0; i < count; i++) {
+            if (merged[i] === attrName) {
+                found = true;
+                break;
+            }
+        }
+        if (!found) {
+            merged[count] = attrName;
+            count += 1;
+        }
+    }
+    merged.length = count;
+    Object.defineProperty(ctor, 'observedAttributes', {
+        get() {
+            return merged;
+        },
+        configurable: true,
+    });
+}
+function hasAuthoredMember(instance, key) {
+    if (Object.prototype.hasOwnProperty.call(instance, key))
+        return true;
+    let proto = Object.getPrototypeOf(instance);
+    while (proto && proto !== TemplateElement.prototype) {
+        if (Object.prototype.hasOwnProperty.call(proto, key))
+            return true;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return false;
+}
+export class TemplateElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.$root = null;
+        this.$ready = false;
+        this.$hydrated = false;
+        this.$deferredSSR = false;
+        this.$activatingDeferredSSR = false;
+        this.$hasUnknownScopes = false;
+        this.$templateState = null;
+        this.$dirtyPaths = null;
+        this.$pendingFlush = false;
+        this.$preReadyWrites = null;
+        this.$resolver = (p, s) => this.$resolveValue(p, s);
+    }
+    [WEBUI_SET_STATE_KEY](key, value) {
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
+        const owned = this.$setStateKey(key, value);
+        this.$afterExternalStateWrite(owned);
+        if (owned && wasDeferred && !this.$deferredSSR)
+            this.$update(key);
+        return owned;
+    }
+    static define(tagName) {
+        installTemplateObservedAttributes(this, tagName);
+        customElements.define(tagName, this);
+    }
+    connectedCallback() {
+        const tag = this.tagName.toLowerCase();
+        if (this.$deferredSSR) {
+            this.$ready = true;
+            return;
+        }
+        if (this.$hydrated && this.$root) {
+            hydrationStart();
+            this.$ready = true;
+            this.$update();
+            hydrationEnd();
+            return;
+        }
+        const meta = getTemplate(tag);
+        if (!meta) {
+            console.warn(`[WebUI] Template metadata for <${tag}> not found. ` +
+                `Ensure the component is included in the SSR output or registered via __webui.templates.`);
+            return;
+        }
+        this.$meta = meta;
+        this.$mount(meta, false);
+    }
+    $mount(meta, forceSSR) {
+        if (this.$hydrated)
+            return;
+        const hasShadow = !!this.shadowRoot;
+        const wantShadow = hasShadow || !!meta.sd;
+        let root;
+        let isSSR;
+        let clientRoot = null;
+        if (hasShadow) {
+            root = this.shadowRoot;
+            isSSR = true;
+        }
+        else if (this.childNodes.length > 0 && !meta.sd) {
+            root = this;
+            isSSR = true;
+        }
+        else if (wantShadow) {
+            root = this.attachShadow({ mode: 'open' });
+            isSSR = false;
+        }
+        else {
+            root = this;
+            isSSR = false;
+        }
+        if (isSSR && !forceSSR && this.$shouldDeferSSRHydration()) {
+            this.$meta = meta;
+            this.$deferredSSR = true;
+            this.$ready = true;
+            return;
+        }
+        hydrationStart();
+        if (meta.sa)
+            injectModuleStyle(meta.sa, this.shadowRoot);
+        if (isSSR) {
+            if (this.$shouldApplySSRBootstrapState())
+                this.$applySSRState();
+            this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
+        }
+        else {
+            clientRoot = this.$createStagingRoot(meta);
+            this.$root = this.$wire(clientRoot, meta);
+        }
+        this.$meta = meta;
+        this.$hydrated = true;
+        this.$ready = true;
+        this.$syncAuthoredAttributes();
+        if (isSSR && DEV)
+            this.$checkHydrationMismatch();
+        else
+            this.$preReadyWrites = null;
+        if (!isSSR && clientRoot) {
+            this.$updateInstance(this.$root);
+            if (this.$root.repeats.length !== 0 || this.$root.conds.length !== 0) {
+                this.$root.nodes = childNodesArray(clientRoot);
+                this.$replaceInstanceContainer(this.$root, clientRoot, root);
+            }
+            this.$appendStagedChildren(root, clientRoot);
+            this.$root.container = root;
+        }
+        hydrationEnd();
+    }
+    disconnectedCallback() {
+        if (this.$root) {
+            queueMicrotask(() => {
+                if (!this.isConnected)
+                    this.$destroy();
+            });
+        }
+    }
+    $destroy() {
+        if (!this.$root) {
+            this.$deferredSSR = false;
+            this.$ready = false;
+            this.$hasUnknownScopes = false;
+            return;
+        }
+        this.$disposeInstance(this.$root, false);
+        this.$root = null;
+        this.$pathIndex = undefined;
+        this.$wildcardBindings = undefined;
+        this.$dirtyPaths = null;
+        this.$pendingFlush = false;
+        this.$preReadyWrites = null;
+        this.$ready = false;
+        this.$hasUnknownScopes = false;
+    }
+    $clearRepeatBinding(repeat) {
+        repeat.instances.length = 0;
+        repeat.container = null;
+        repeat.start = null;
+        repeat.end = null;
+        const state = repeat.keyState;
+        if (state) {
+            state.keys.length = 0;
+            state.nextKeys.length = 0;
+            state.map.clear();
+        }
+    }
+    $clearInstance(instance) {
+        instance.scope = undefined;
+        instance.parent = undefined;
+        instance.container = null;
+        instance.nodes.length = 0;
+        instance.texts.length = 0;
+        instance.attrs.length = 0;
+        instance.conds.length = 0;
+        instance.repeats.length = 0;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (Object.is(oldValue, newValue))
+            return;
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
+        const property = this.$templateRootForAttribute(name);
+        let changed = false;
+        if (property && this.$usesTemplateState(property)) {
+            changed = this.$setTemplateState(property, newValue);
+        }
+        this.$afterExternalStateWrite(changed);
+        if (changed && property && wasDeferred && !this.$deferredSSR)
+            this.$update(property);
+    }
+    setState(state) {
+        const wasDeferred = this.$deferredSSR;
+        this.$beforeExternalStateWrite();
+        const keys = Object.keys(state);
+        let owned = false;
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            owned = this.$setStateKey(key, state[key]) || owned;
+        }
+        this.$afterExternalStateWrite(owned);
+        if (owned && wasDeferred && !this.$deferredSSR) {
+            for (let i = 0; i < keys.length; i++)
+                this.$update(keys[i]);
+        }
+        this.$flushUpdates();
+    }
+    $observableNames() {
+        return EMPTY_SET;
+    }
+    $beforeExternalStateWrite() {
+    }
+    $afterExternalStateWrite(_applied) {
+    }
+    $shouldDeferSSRHydration() {
+        return false;
+    }
+    $activateDeferredSSR() {
+        if (!this.$deferredSSR || !this.$meta)
+            return;
+        this.$deferredSSR = false;
+        this.$ready = false;
+        this.$preReadyWrites = null;
+        this.$activatingDeferredSSR = true;
+        try {
+            this.$mount(this.$meta, true);
+        }
+        finally {
+            this.$activatingDeferredSSR = false;
+        }
+    }
+    $shouldApplySSRBootstrapState() {
+        return true;
+    }
+    $shouldApplySSRState(_key) {
+        return true;
+    }
+    $syncAuthoredAttributes() {
+    }
+    $shouldApplyTemplateStateFromSSR(_key) {
+        return true;
+    }
+    $setTemplateState(key, value) {
+        const changed = this.$writeTemplateState(key, value);
+        if (changed) {
+            this.$update(key);
+        }
+        return changed;
+    }
+    $writeTemplateState(key, value) {
+        if (!this.$templateState) {
+            this.$templateState = Object.create(null);
+        }
+        if (Object.is(this.$templateState[key], value))
+            return false;
+        this.$templateState[key] = value;
+        return true;
+    }
+    $templateMeta() {
+        if (this.$meta)
+            return this.$meta;
+        const fromCtor = templateMetaByCtor.get(this.constructor);
+        if (fromCtor)
+            return fromCtor;
+        const tagName = this.tagName;
+        return tagName ? getTemplate(tagName.toLowerCase()) : undefined;
+    }
+    $templateRootForAttribute(name) {
+        const meta = this.$templateMeta();
+        return meta ? templateRootForAttribute(meta, name) : undefined;
+    }
+    $usesTemplateState(key) {
+        const meta = this.$templateMeta();
+        return !!meta && templateHasRoot(meta, key) && !hasAuthoredMember(this, key);
+    }
+    $setStateKey(key, value) {
+        if (this.$observableNames().has(key)) {
+            this[key] = value;
+            return true;
+        }
+        if (this.$usesTemplateState(key)) {
+            this.$setTemplateState(key, value);
+            return true;
+        }
+        return false;
+    }
+    $applySSRState() {
+        const state = window.__webui?.state;
+        if (!state || typeof state !== 'object')
+            return;
+        const observableNames = this.$observableNames();
+        const keys = Object.keys(state);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (observableNames.has(key)) {
+                if (!this.$shouldApplySSRState(key))
+                    continue;
+                this[`_${key}`] = state[key];
+            }
+            else if (this.$usesTemplateState(key) && this.$shouldApplyTemplateStateFromSSR(key)) {
+                this.$writeTemplateState(key, state[key]);
+            }
+        }
+    }
+    $update(path) {
+        if (!this.$ready || !this.$root) {
+            if (DEV && path && this.isConnected)
+                this.$recordPreReadyWrite(path);
+            return;
+        }
+        if (!this.$pathIndex)
+            this.$buildPathIndex();
+        if (path && this.$pathIndex) {
+            const entry = this.$pathIndex.get(path);
+            if (entry) {
+                if (!this.$dirtyPaths)
+                    this.$dirtyPaths = new Set();
+                this.$dirtyPaths.add(path);
+                if (!this.$pendingFlush) {
+                    this.$pendingFlush = true;
+                    queueMicrotask(() => this.$flush());
+                }
+                return;
+            }
+        }
+        this.$dirtyPaths = null;
+        this.$updateInstance(this.$root);
+    }
+    $flushUpdates() {
+        if (this.$pendingFlush)
+            this.$flush();
+    }
+    $flush() {
+        if (!this.$ready || !this.$root) {
+            this.$dirtyPaths = null;
+            this.$pendingFlush = false;
+            return;
+        }
+        if (!this.$pathIndex)
+            this.$buildPathIndex();
+        if (!this.$pathIndex)
+            return;
+        while (this.$dirtyPaths && this.$dirtyPaths.size > 0) {
+            const dirty = this.$dirtyPaths;
+            this.$dirtyPaths = null;
+            for (const path of dirty) {
+                if (!this.$pathIndex)
+                    this.$buildPathIndex();
+                const entry = this.$pathIndex?.get(path);
+                if (entry) {
+                    this.$updateBindings(entry.texts, entry.attrs, entry.conds, entry.repeats);
+                }
+            }
+            if (!this.$pathIndex)
+                this.$buildPathIndex();
+            if (this.$wildcardBindings) {
+                const wc = this.$wildcardBindings;
+                this.$updateBindings(wc.texts, wc.attrs, wc.conds, wc.repeats);
+            }
+            if (!this.$pathIndex)
+                this.$buildPathIndex();
+        }
+        this.$pendingFlush = false;
+    }
+    $recordPreReadyWrite(path) {
+        if (!this.$preReadyWrites)
+            this.$preReadyWrites = new Set();
+        this.$preReadyWrites.add(path);
+    }
+    $checkHydrationMismatch() {
+        if (!DEV)
+            return;
+        const writes = this.$preReadyWrites;
+        this.$preReadyWrites = null;
+        if (!writes || writes.size === 0 || !this.$root)
+            return;
+        if (!this.$pathIndex)
+            this.$buildPathIndex();
+        const index = this.$pathIndex;
+        if (!index)
+            return;
+        const ctx = {
+            resolver: this.$resolver,
+            resolveParts: (parts, scope) => this.$resolveParts(parts, scope),
+            resolveValue: (path, scope) => this.$resolveValue(path, scope),
+        };
+        const tag = this.tagName.toLowerCase();
+        void import('./hydration-mismatch.js').then((m) => m.reportHydrationMismatch(tag, writes, index, ctx));
+    }
+    $resolve(root, path, pathStart = 0) {
+        let cur = root;
+        for (let i = 0; i < pathStart; i++) {
+            const child = cur.childNodes[path[i]];
+            if (!child)
+                return null;
+            cur = child;
+        }
+        for (let i = pathStart; i < path.length; i++) {
+            const child = cur.childNodes[path[i]];
+            if (!child)
+                return null;
+            cur = child;
+        }
+        return cur;
+    }
+    $resolveSSR(ssrRoot, tplRoot, path, pathStart = 0) {
+        let ssr = ssrRoot;
+        let tpl = tplRoot;
+        for (let i = 0; i < pathStart; i++) {
+            const tplChild = tpl.childNodes[path[i]];
+            if (!tplChild)
+                return null;
+            tpl = tplChild;
+        }
+        for (let i = pathStart; i < path.length; i++) {
+            const idx = path[i];
+            const tplChild = tpl.childNodes[idx];
+            if (!tplChild)
+                return null;
+            const ordinals = getTplOrdinals(tpl);
+            const entry = ordinals.get(idx);
+            if (!entry)
+                return null;
+            const [nodeType, ordinal] = entry;
+            const child = findByOrdinal(ssr, nodeType, ordinal);
+            if (!child)
+                return null;
+            ssr = child;
+            tpl = tplChild;
+        }
+        return ssr;
+    }
+    $parseTemplate(meta) {
+        let cached = templateCache.get(meta);
+        if (cached)
+            return cached.cloneNode(true);
+        const tpl = document.createElement('template');
+        tpl.innerHTML = meta.h;
+        templateCache.set(meta, tpl.content);
+        return tpl.content.cloneNode(true);
+    }
+    $createStagingRoot(meta) {
+        const wrapper = document.createElement('div');
+        const fragment = this.$parseTemplate(meta);
+        wrapper.appendChild(fragment);
+        customElements.upgrade(wrapper);
+        return wrapper;
+    }
+    $appendStagedChildren(root, stagingRoot) {
+        const first = stagingRoot.firstChild;
+        if (!first)
+            return;
+        if (!first.nextSibling) {
+            root.appendChild(first);
+            return;
+        }
+        const fragment = document.createDocumentFragment();
+        while (stagingRoot.firstChild) {
+            fragment.appendChild(stagingRoot.firstChild);
+        }
+        root.appendChild(fragment);
+    }
+    $replaceInstanceContainer(instance, previous, next) {
+        if (previous === next)
+            return;
+        const stack = [instance];
+        while (stack.length > 0) {
+            const current = stack.pop();
+            if (!current)
+                continue;
+            if (current.container === previous)
+                current.container = next;
+            for (let i = 0; i < current.conds.length; i++) {
+                const child = current.conds[i].instance;
+                if (child)
+                    stack.push(child);
+            }
+            for (let i = 0; i < current.repeats.length; i++) {
+                const repeat = current.repeats[i];
+                if (repeat.container === previous)
+                    repeat.container = next;
+                const children = repeat.instances;
+                for (let j = 0; j < children.length; j++)
+                    stack.push(children[j]);
+            }
+        }
+    }
+    $wire(root, meta, scope) {
+        const instance = {
+            scope, container: root, nodes: childNodesArray(root),
+            texts: [], attrs: [], conds: [], repeats: [],
+        };
+        const textRefs = new Array(meta.tx?.length ?? 0);
+        let textRefCount = 0;
+        if (meta.tx) {
+            for (let i = 0; i < meta.tx.length; i++) {
+                const entry = meta.tx[i];
+                const [slot, parts] = entry;
+                const raw = entry[2] === 1;
+                const [parentPath, beforeIndex] = slot;
+                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
+                    continue;
+                textRefs[textRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, parts, raw };
+                textRefCount += 1;
+            }
+        }
+        const condRefs = new Array(meta.c?.length ?? 0);
+        let condRefCount = 0;
+        if (meta.c) {
+            for (let i = 0; i < meta.c.length; i++) {
+                const [condition, blockIndex, slotMeta] = meta.c[i];
+                const [parentPath, beforeIndex] = slotMeta;
+                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
+                    continue;
+                condRefs[condRefCount] = { parent, ref: parent.childNodes[beforeIndex] || null, condition: condition, blockIndex };
+                condRefCount += 1;
+            }
+        }
+        const repRefs = new Array(meta.r?.length ?? 0);
+        let repRefCount = 0;
+        if (meta.r) {
+            for (let i = 0; i < meta.r.length; i++) {
+                const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
+                const [parentPath, beforeIndex] = slotMeta;
+                const parent = parentPath.length > 0 ? this.$resolve(root, parentPath) : root;
+                if (!parent || (parent.nodeType !== 1 && parent.nodeType !== 11))
+                    continue;
+                repRefs[repRefCount] = {
+                    parent,
+                    ref: parent.childNodes[beforeIndex] || null,
+                    collection,
+                    itemVar,
+                    blockIndex,
+                    keyPath,
+                };
+                repRefCount += 1;
+            }
+        }
+        this.$wireAttrs(instance, meta, scope, (p) => this.$resolve(root, p));
+        this.$finalize(instance, root, meta, (r, p) => this.$resolve(r, p), scope);
+        for (let i = 0; i < textRefCount; i++) {
+            const t = textRefs[i];
+            const anchor = document.createComment('');
+            t.parent.insertBefore(anchor, t.ref);
+            if (t.raw) {
+                const container = document.createElement('span');
+                t.parent.insertBefore(container, anchor);
+                const textNode = document.createTextNode('');
+                instance.texts.push({ node: textNode, parts: t.parts, scope, raw: true, rawParent: container });
+            }
+            else {
+                const textNode = document.createTextNode('');
+                t.parent.insertBefore(textNode, anchor);
+                instance.texts.push({ node: textNode, parts: t.parts, scope });
+            }
+        }
+        for (let i = 0; i < condRefCount; i++) {
+            const c = condRefs[i];
+            const anchor = document.createComment('');
+            c.parent.insertBefore(anchor, c.ref);
+            instance.conds.push({
+                condition: c.condition,
+                blockIndex: c.blockIndex,
+                anchor,
+                scope,
+                owner: instance,
+                instance: null,
+            });
+        }
+        for (let i = 0; i < repRefCount; i++) {
+            const r = repRefs[i];
+            const anchor = document.createComment('');
+            r.parent.insertBefore(anchor, r.ref);
+            const binding = {
+                markerId: i, collection: r.collection, itemVar: r.itemVar, blockIndex: r.blockIndex,
+                container: r.parent, start: anchor, end: null,
+                scope, owner: instance, instances: [],
+            };
+            if (r.keyPath !== undefined) {
+                binding.keyState = createRepeatKeyState(r.keyPath);
+            }
+            instance.repeats.push(binding);
+        }
+        for (let i = 0; i < instance.conds.length; i++)
+            this.$toggleCond(instance.conds[i]);
+        return instance;
+    }
+    $hydrate(ssrRoot, meta, tplDom, scope, pathStart = 0) {
+        const instance = {
+            scope,
+            container: (pathStart > 0 ? ssrRoot.parentNode : ssrRoot),
+            nodes: pathStart > 0 ? [ssrRoot] : childNodesArray(ssrRoot),
+            texts: [], attrs: [], conds: [], repeats: [],
+        };
+        const staleMarkers = [];
+        if (meta.tx) {
+            for (let i = 0; i < meta.tx.length; i++) {
+                const entry = meta.tx[i];
+                const [slot, parts] = entry;
+                const raw = entry[2] === 1;
+                const [parentPath, beforeIndex] = slot;
+                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart);
+                if (!ssrParent)
+                    continue;
+                const tplParent = this.$resolve(tplDom, parentPath, pathStart);
+                if (!tplParent)
+                    continue;
+                if (raw) {
+                    const rawParent = ssrParent;
+                    const textNode = document.createTextNode('');
+                    instance.texts.push({ node: textNode, parts, scope, raw: true, rawParent });
+                }
+                else {
+                    let textNode = this.$findSSRText(ssrParent, tplParent, beforeIndex);
+                    if (!textNode) {
+                        textNode = document.createTextNode('');
+                        const insertRef = this.$findSSRSlotRef(ssrParent, tplParent, beforeIndex);
+                        ssrParent.insertBefore(textNode, insertRef);
+                    }
+                    if (textNode)
+                        instance.texts.push({ node: textNode, parts, scope });
+                }
+            }
+        }
+        this.$wireAttrs(instance, meta, scope, (p) => this.$resolveSSR(ssrRoot, tplDom, p, pathStart));
+        if (meta.c) {
+            let lastCondMarker = null;
+            let lastCondParent = null;
+            for (let i = 0; i < meta.c.length; i++) {
+                const [condition, blockIndex, slotMeta] = meta.c[i];
+                const [parentPath] = slotMeta;
+                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart) ?? ssrRoot;
+                const blockMeta = this.$block(blockIndex);
+                let condInstance = null;
+                if (ssrParent !== lastCondParent) {
+                    lastCondMarker = null;
+                    lastCondParent = ssrParent;
+                }
+                const marker = this.$findMarker(ssrParent, MARKER_COND_START, lastCondMarker);
+                let condAnchor;
+                if (marker) {
+                    condAnchor = marker;
+                }
+                else {
+                    condAnchor = document.createComment('');
+                    const [, beforeIndex] = slotMeta;
+                    const insertRef = ssrParent.childNodes[beforeIndex ?? ssrParent.childNodes.length] ?? null;
+                    ssrParent.insertBefore(condAnchor, insertRef);
+                }
+                if (marker)
+                    lastCondMarker = marker;
+                if (marker && blockMeta) {
+                    condInstance = this.$hydrateCondContent(condAnchor, blockMeta, scope);
+                    if (condInstance)
+                        condInstance.parent = instance;
+                }
+                if (marker) {
+                    const lastNode = condInstance ? condInstance.nodes[condInstance.nodes.length - 1] : condAnchor;
+                    const endMarker = lastNode?.nextSibling;
+                    if (endMarker && endMarker.nodeType === 8 && endMarker.data === MARKER_COND_END) {
+                        staleMarkers.push(endMarker);
+                    }
+                }
+                instance.conds.push({
+                    condition: condition, blockIndex,
+                    anchor: condAnchor,
+                    scope, owner: instance, instance: condInstance,
+                });
+            }
+        }
+        if (meta.r) {
+            let lastRepMarker = null;
+            let lastRepParent = null;
+            for (let i = 0; i < meta.r.length; i++) {
+                const [collection, itemVar, blockIndex, slotMeta, keyPath] = meta.r[i];
+                const [parentPath] = slotMeta;
+                const ssrParent = this.$resolveSSR(ssrRoot, tplDom, parentPath, pathStart) ?? ssrRoot;
+                if (ssrParent !== lastRepParent) {
+                    lastRepMarker = null;
+                    lastRepParent = ssrParent;
+                }
+                const blockMeta = this.$block(blockIndex);
+                const blockTplDom = blockMeta ? getTemplateDom(blockMeta) : null;
+                const rootTag = blockMeta && blockTplDom?.childNodes.length === 1 && blockTplDom.children.length === 1
+                    ? this.$rootTag(blockMeta)
+                    : null;
+                const marker = this.$findMarker(ssrParent, MARKER_REPEAT_START, lastRepMarker);
+                let anchor;
+                if (marker) {
+                    anchor = marker;
+                }
+                else {
+                    anchor = document.createComment('');
+                    const [, beforeIndex] = slotMeta;
+                    const tplParent = this.$resolve(tplDom, parentPath, pathStart);
+                    const staticCount = tplParent ? tplParent.childNodes.length : 0;
+                    const insertRef = ssrParent.childNodes[Math.min(beforeIndex ?? staticCount, ssrParent.childNodes.length)] ?? null;
+                    ssrParent.insertBefore(anchor, insertRef);
+                }
+                lastRepMarker = anchor;
+                const repeatInsts = [];
+                const hasCollectionState = this.$hasStateRoot(collection, scope);
+                const itemsArr = this.$resolveValue(collection, scope);
+                const items = Array.isArray(itemsArr) ? itemsArr : [];
+                const { items: itemMarkers, end: endMarker } = marker
+                    ? collectItemMarkers(anchor)
+                    : { items: [], end: null };
+                if (blockMeta && blockTplDom && anchor.parentNode && itemMarkers.length > 0) {
+                    if (!this.$activatingDeferredSSR
+                        && hasCollectionState
+                        && itemMarkers.length !== items.length) {
+                        console.warn(`[webui] hydration: repeat marker count (${itemMarkers.length}) ≠ data length (${items.length}) for "${collection}"`);
+                    }
+                    for (let j = 0; j < itemMarkers.length; j++) {
+                        const itemValue = items[j];
+                        const known = hasCollectionState && j < items.length;
+                        if (!known)
+                            this.$hasUnknownScopes = true;
+                        const itemScope = {
+                            name: itemVar,
+                            value: itemValue,
+                            parent: scope,
+                            known,
+                        };
+                        if (rootTag) {
+                            const itemEl = nextElement(itemMarkers[j]);
+                            if (itemEl) {
+                                const childInstance = this.$hydrate(itemEl, blockMeta, blockTplDom, itemScope, 1);
+                                childInstance.parent = instance;
+                                repeatInsts.push(childInstance);
+                            }
+                        }
+                        else {
+                            const itemParent = itemMarkers[j].parentNode;
+                            const nextBound = j + 1 < itemMarkers.length ? itemMarkers[j + 1] : endMarker;
+                            const wrapper = document.createElement('div');
+                            let cursor = itemMarkers[j].nextSibling;
+                            while (cursor && cursor !== nextBound) {
+                                const next = cursor.nextSibling;
+                                wrapper.appendChild(cursor);
+                                cursor = next;
+                            }
+                            const inst = this.$hydrate(wrapper, blockMeta, blockTplDom, itemScope);
+                            inst.parent = instance;
+                            inst.nodes = childNodesArray(wrapper);
+                            let afterNode = itemMarkers[j];
+                            for (let nodeIndex = 0; nodeIndex < inst.nodes.length; nodeIndex++) {
+                                const node = inst.nodes[nodeIndex];
+                                itemParent?.insertBefore(node, afterNode.nextSibling);
+                                afterNode = node;
+                            }
+                            if (itemParent) {
+                                this.$replaceInstanceContainer(inst, wrapper, itemParent);
+                            }
+                            repeatInsts.push(inst);
+                        }
+                    }
+                    for (let m = 0; m < itemMarkers.length; m++) {
+                        staleMarkers.push(itemMarkers[m]);
+                    }
+                }
+                if (endMarker)
+                    staleMarkers.push(endMarker);
+                const binding = {
+                    markerId: i, collection, itemVar, blockIndex,
+                    container: (anchor.parentNode ?? ssrRoot),
+                    start: anchor, end: null,
+                    scope, owner: instance, instances: repeatInsts,
+                    synced: hasCollectionState,
+                };
+                if (keyPath !== undefined) {
+                    binding.keyState = createRepeatKeyState(keyPath);
+                    if (hasCollectionState) {
+                        seedHydratedRepeatKeys(binding, items);
+                    }
+                }
+                instance.repeats.push(binding);
+            }
+        }
+        this.$finalize(instance, ssrRoot, meta, (r, p) => this.$resolveSSR(r, tplDom, p, pathStart), scope);
+        for (let i = 0; i < staleMarkers.length; i++) {
+            staleMarkers[i].parentNode?.removeChild(staleMarkers[i]);
+        }
+        this.$compactNodeArray(instance);
+        return instance;
+    }
+    $collectConditionalRange(start) {
+        const nodes = [];
+        let depth = 0;
+        let node = start.nextSibling;
+        while (node) {
+            if (node.nodeType === 8) {
+                const data = node.data;
+                if (data === MARKER_COND_START) {
+                    depth++;
+                }
+                else if (data === MARKER_COND_END) {
+                    if (depth === 0)
+                        break;
+                    depth--;
+                }
+            }
+            nodes.push(node);
+            node = node.nextSibling;
+        }
+        return nodes;
+    }
+    $hasRootStructuralSlot(meta) {
+        if (meta.c) {
+            for (let i = 0; i < meta.c.length; i++) {
+                if (meta.c[i][2][0].length === 0)
+                    return true;
+            }
+        }
+        if (meta.r) {
+            for (let i = 0; i < meta.r.length; i++) {
+                if (meta.r[i][3][0].length === 0)
+                    return true;
+            }
+        }
+        return false;
+    }
+    $hydrateCondContent(condAnchor, blockMeta, scope) {
+        const rootTag = this.$rootTag(blockMeta);
+        const tplDom = getTemplateDom(blockMeta);
+        if (rootTag && tplDom.children.length === 1 && !this.$hasRootStructuralSlot(blockMeta)) {
+            const el = nextElement(condAnchor);
+            if (el) {
+                return this.$hydrate(el, blockMeta, tplDom, scope, 1);
+            }
+            return null;
+        }
+        const condNodes = this.$collectConditionalRange(condAnchor);
+        if (condNodes.length === 0)
+            return null;
+        const wrapper = document.createElement('div');
+        for (let cn = 0; cn < condNodes.length; cn++)
+            wrapper.appendChild(condNodes[cn]);
+        const inst = this.$hydrate(wrapper, blockMeta, tplDom, scope);
+        inst.nodes = childNodesArray(wrapper);
+        let afterNode = condAnchor;
+        for (let cn = 0; cn < inst.nodes.length; cn++) {
+            condAnchor.parentNode?.insertBefore(inst.nodes[cn], afterNode.nextSibling);
+            afterNode = inst.nodes[cn];
+        }
+        const container = condAnchor.parentNode;
+        if (container)
+            this.$replaceInstanceContainer(inst, wrapper, container);
+        return inst;
+    }
+    $findMarker(parent, data, after) {
+        let child = after ? after.nextSibling : parent.firstChild;
+        while (child) {
+            if (child.nodeType === 8 && child.data === data) {
+                return child;
+            }
+            child = child.nextSibling;
+        }
+        return null;
+    }
+    $findSSRText(ssrParent, tplParent, beforeIndex) {
+        const ordinals = getTplOrdinals(tplParent);
+        let textOrd = 0;
+        for (let k = 0; k < beforeIndex; k++) {
+            const entry = ordinals.get(k);
+            if (entry && entry[0] === 3)
+                textOrd++;
+        }
+        const found = findByOrdinal(ssrParent, 3, textOrd);
+        if (found)
+            return found;
+        let child = ssrParent.firstChild;
+        while (child) {
+            if (child.nodeType === 3 && child.data && child.data.trim()) {
+                return child;
+            }
+            child = child.nextSibling;
+        }
+        return null;
+    }
+    $findSSRSlotRef(ssrParent, tplParent, beforeIndex) {
+        const ordinals = getTplOrdinals(tplParent);
+        const children = tplParent.childNodes;
+        for (let i = beforeIndex; i < children.length; i++) {
+            const entry = ordinals.get(i);
+            if (!entry)
+                continue;
+            return findByOrdinal(ssrParent, entry[0], entry[1]);
+        }
+        return null;
+    }
+    $rootTag(meta) {
+        let cached = rootTagCache.get(meta);
+        if (cached !== undefined)
+            return cached;
+        const h = meta.h;
+        if (!h || h.charCodeAt(0) !== 60) {
+            rootTagCache.set(meta, null);
+            return null;
+        }
+        let end = 1;
+        while (end < h.length) {
+            const c = h.charCodeAt(end);
+            if (c === 32 || c === 62 || c === 47)
+                break;
+            end++;
+        }
+        const tag = h.slice(1, end).toLowerCase();
+        rootTagCache.set(meta, tag);
+        return tag;
+    }
+    $wireAttrs(instance, meta, scope, resolve) {
+        if (!meta.a || !meta.ag)
+            return;
+        for (let g = 0; g < meta.ag.length; g++) {
+            const [targetPath, start, count] = meta.ag[g];
+            const el = resolve(targetPath);
+            if (!el || el.nodeType !== 1)
+                continue;
+            for (let j = 0; j < count; j++) {
+                const entry = meta.a[start + j];
+                if (entry)
+                    instance.attrs.push(this.$makeAttr(el, entry, scope));
+            }
+        }
+    }
+    $finalize(_instance, _root, _meta, _resolver, _scope) { }
+    $makeAttr(el, entry, scope) {
+        const name = entry[0];
+        const kind = entry[1];
+        if (kind === ATTR_KIND_BOOLEAN)
+            return { element: el, name, kind, condition: entry[2], scope };
+        if (kind === ATTR_KIND_TEMPLATE)
+            return { element: el, name, kind, parts: entry[2], scope };
+        return { element: el, name, kind: kind, path: entry[2] || '', scope };
+    }
+    $buildPathIndex() {
+        if (!this.$root)
+            return;
+        const observableNames = this.$observableNames();
+        const index = new Map();
+        const ensure = (key) => {
+            let e = index.get(key);
+            if (!e) {
+                e = { texts: [], attrs: [], conds: [], repeats: [] };
+                index.set(key, e);
+            }
+            return e;
+        };
+        const keyFor = (path) => {
+            const dot = path.indexOf('.');
+            const root = dot > -1 ? path.slice(0, dot) : path;
+            return observableNames.has(root) || this.$usesTemplateState(root) ? root : '*';
+        };
+        const isLocalPath = (path, scope) => {
+            const dot = path.indexOf('.');
+            const root = dot > -1 ? path.slice(0, dot) : path;
+            let current = scope;
+            while (current) {
+                if (current.name === root)
+                    return true;
+                current = current.parent;
+            }
+            return false;
+        };
+        const visit = (instance) => {
+            for (const t of instance.texts) {
+                if (t.parts) {
+                    for (const p of t.parts) {
+                        if (typeof p !== 'string' && !isLocalPath(p[0], t.scope)) {
+                            ensure(keyFor(p[0])).texts.push(t);
+                        }
+                    }
+                }
+                else if (t.path && !isLocalPath(t.path, t.scope)) {
+                    ensure(keyFor(t.path)).texts.push(t);
+                }
+            }
+            for (const a of instance.attrs) {
+                if (a.path && !isLocalPath(a.path, a.scope)) {
+                    ensure(keyFor(a.path)).attrs.push(a);
+                }
+                if (a.parts) {
+                    for (const p of a.parts) {
+                        if (typeof p !== 'string' && !isLocalPath(p[0], a.scope)) {
+                            ensure(keyFor(p[0])).attrs.push(a);
+                        }
+                    }
+                }
+                if (a.condition) {
+                    for (const p of a.condition[1]) {
+                        if (!isLocalPath(p, a.scope))
+                            ensure(keyFor(p)).attrs.push(a);
+                    }
+                }
+            }
+            for (const c of instance.conds) {
+                for (const p of c.condition[1]) {
+                    if (!isLocalPath(p, c.scope))
+                        ensure(keyFor(p)).conds.push(c);
+                }
+                if (c.instance)
+                    visit(c.instance);
+            }
+            for (const rep of instance.repeats) {
+                if (!isLocalPath(rep.collection, rep.scope)) {
+                    ensure(keyFor(rep.collection)).repeats.push(rep);
+                }
+                for (let i = 0; i < rep.instances.length; i++) {
+                    visit(rep.instances[i]);
+                }
+            }
+        };
+        visit(this.$root);
+        const wc = index.get('*');
+        if (wc) {
+            index.delete('*');
+            this.$wildcardBindings = wc;
+        }
+        else {
+            this.$wildcardBindings = null;
+        }
+        this.$pathIndex = index;
+    }
+    $updateBindings(texts, attrs, conds, repeats) {
+        const gated = this.$hasUnknownScopes;
+        for (let i = 0; i < texts.length; i++) {
+            const binding = texts[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$patchText(binding);
+        }
+        for (let i = 0; i < attrs.length; i++) {
+            const binding = attrs[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$patchAttr(binding);
+        }
+        for (let i = 0; i < conds.length; i++) {
+            const binding = conds[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                this.$toggleCond(binding);
+        }
+        for (let i = 0; i < repeats.length; i++) {
+            const binding = repeats[i];
+            if (!gated || !binding.scope || this.$scopeIsKnown(binding.scope))
+                syncRepeat(this, binding);
+        }
+    }
+    $scopeIsKnown(scope) {
+        let frame = scope;
+        while (frame) {
+            if (frame.known === false)
+                return false;
+            frame = frame.parent;
+        }
+        return true;
+    }
+    $updateInstance(instance) {
+        this.$updateBindings(instance.texts, instance.attrs, instance.conds, instance.repeats);
+    }
+    $patchText(b) {
+        let val;
+        if (b.parts) {
+            val = this.$resolveParts(b.parts, b.scope);
+        }
+        else if (b.path) {
+            const raw = this.$resolveValue(b.path, b.scope);
+            val = raw == null ? '' : String(raw);
+        }
+        else {
+            return;
+        }
+        if (b.raw && b.rawParent) {
+            if (b.rawParent.innerHTML !== val)
+                b.rawParent.innerHTML = val;
+        }
+        else {
+            if (b.node.data !== val)
+                b.node.data = val;
+        }
+    }
+    $patchAttr(b) {
+        const el = b.element;
+        switch (b.kind) {
+            case ATTR_KIND_COMPLEX: {
+                const v = this.$resolveValue(b.path, b.scope);
+                const target = el;
+                const setStateKey = target[WEBUI_SET_STATE_KEY];
+                if (typeof setStateKey === 'function') {
+                    if (setStateKey.call(el, b.name, v)) {
+                        const flush = target['$flushUpdates'];
+                        if (typeof flush === 'function')
+                            flush.call(el);
+                        break;
+                    }
+                }
+                target[b.name] = v;
+                break;
+            }
+            case ATTR_KIND_BOOLEAN: {
+                const show = b.condition[0](this.$resolver, b.scope);
+                if (show)
+                    el.setAttribute(b.name, '');
+                else
+                    el.removeAttribute(b.name);
+                if ((b.name === 'checked' || b.name === 'selected' || b.name === 'disabled')
+                    && hasNativeLiveProperty(el, b.name)) {
+                    el[b.name] = show;
+                }
+                break;
+            }
+            case ATTR_KIND_TEMPLATE: {
+                const v = this.$resolveParts(b.parts, b.scope);
+                if (el.getAttribute(b.name) !== v)
+                    el.setAttribute(b.name, v);
+                break;
+            }
+            default: {
+                const v = this.$resolveValue(b.path, b.scope);
+                const s = v == null ? '' : String(v);
+                if ((b.name === 'checked' || b.name === 'selected')
+                    && hasNativeLiveProperty(el, b.name)) {
+                    el[b.name] = !!v && v !== 'false' && v !== '0';
+                }
+                else if (b.name === 'value' && hasNativeLiveProperty(el, b.name)) {
+                    const target = el;
+                    if (target.value !== s)
+                        target.value = s;
+                }
+                else {
+                    if (el.getAttribute(b.name) !== s)
+                        el.setAttribute(b.name, s);
+                }
+                break;
+            }
+        }
+    }
+    $toggleCond(c) {
+        const show = c.condition[0](this.$resolver, c.scope);
+        if (show) {
+            let created = false;
+            const container = c.anchor.parentNode;
+            if (!c.instance) {
+                c.instance = this.$createBlockInstance(c.blockIndex, c.scope, c.owner, container ?? undefined);
+                created = c.instance !== null;
+            }
+            else {
+                this.$updateInstance(c.instance);
+            }
+            if (c.instance && container) {
+                this.$insertInstanceAfter(c.anchor, container, c.instance);
+                if (created)
+                    this.$changeStructure();
+            }
+        }
+        else if (c.instance) {
+            this.$removeInstance(c.instance);
+            c.instance = null;
+            this.$changeStructure(c.owner);
+        }
+    }
+    $resolveValue(path, scope) {
+        let frame = scope;
+        while (frame) {
+            if (path === frame.name)
+                return frame.value;
+            if (path.length > frame.name.length && path.charCodeAt(frame.name.length) === 46 && path.startsWith(frame.name)) {
+                return dotWalk(frame.value, path, frame.name.length + 1);
+            }
+            frame = frame.parent;
+        }
+        const dot = path.indexOf('.');
+        if (dot === -1)
+            return this.$resolveComponentRoot(path);
+        return dotWalk(this.$resolveComponentRoot(path.substring(0, dot)), path, dot + 1);
+    }
+    $hasStateRoot(path, scope) {
+        let frame = scope;
+        while (frame) {
+            if (path === frame.name
+                || (path.length > frame.name.length
+                    && path.charCodeAt(frame.name.length) === 46
+                    && path.startsWith(frame.name))) {
+                return frame.value !== undefined;
+            }
+            frame = frame.parent;
+        }
+        const dot = path.indexOf('.');
+        const root = dot === -1 ? path : path.substring(0, dot);
+        return hasAuthoredMember(this, root)
+            || (this.$templateState !== null
+                && Object.prototype.hasOwnProperty.call(this.$templateState, root));
+    }
+    $resolveComponentRoot(root) {
+        const instance = this;
+        if (this.$templateState &&
+            Object.prototype.hasOwnProperty.call(this.$templateState, root) &&
+            !hasAuthoredMember(this, root)) {
+            return this.$templateState[root];
+        }
+        return instance[root];
+    }
+    $resolveParts(parts, scope) {
+        let result = '';
+        for (let i = 0; i < parts.length; i++) {
+            const p = parts[i];
+            if (typeof p === 'string') {
+                result += p;
+                continue;
+            }
+            const v = this.$resolveValue(p[0], scope);
+            result += v == null ? '' : String(v);
+        }
+        return result;
+    }
+    $block(blockIndex) {
+        return this.$meta?.b?.[blockIndex];
+    }
+    $createBlockInstance(blockIndex, scope, parent, container) {
+        const bm = this.$block(blockIndex);
+        if (!bm)
+            return null;
+        const wrapper = this.$createStagingRoot(bm);
+        const inst = this.$wire(wrapper, bm, scope);
+        inst.parent = parent;
+        inst.nodes = childNodesArray(wrapper);
+        this.$updateInstance(inst);
+        if (inst.repeats.length !== 0 || inst.conds.length !== 0) {
+            inst.nodes = childNodesArray(wrapper);
+            this.$replaceInstanceContainer(inst, wrapper, container ?? null);
+        }
+        else if (container) {
+            inst.container = container;
+        }
+        return inst;
+    }
+    $removeInstance(instance) {
+        this.$disposeInstance(instance, true);
+    }
+    $disposeInstance(root, removeNodes) {
+        const stack = [root];
+        while (stack.length > 0) {
+            const instance = stack.pop();
+            if (!instance)
+                continue;
+            const cleanups = instance.cleanups;
+            if (cleanups) {
+                for (const cleanup of cleanups)
+                    cleanup();
+                cleanups.length = 0;
+            }
+            if (removeNodes) {
+                for (const node of instance.nodes)
+                    node.parentNode?.removeChild(node);
+            }
+            for (const binding of instance.conds) {
+                if (binding.instance)
+                    stack.push(binding.instance);
+                binding.instance = null;
+            }
+            for (const repeat of instance.repeats) {
+                for (const child of repeat.instances)
+                    stack.push(child);
+                this.$clearRepeatBinding(repeat);
+            }
+            this.$clearInstance(instance);
+        }
+    }
+    $compactNodeArray(instance) {
+        const container = instance.container;
+        if (!container)
+            return;
+        const nodes = instance.nodes;
+        let write = 0;
+        for (let read = 0; read < nodes.length; read++) {
+            const node = nodes[read];
+            if (node.parentNode === container) {
+                nodes[write] = node;
+                write++;
+            }
+        }
+        nodes.length = write;
+    }
+    $changeStructure(removedFrom) {
+        if (removedFrom) {
+            let current = removedFrom;
+            while (current) {
+                this.$compactNodeArray(current);
+                current = current.parent;
+            }
+        }
+        this.$pathIndex = undefined;
+        this.$wildcardBindings = undefined;
+    }
+    $insertInstanceAfter(cursor, container, instance) {
+        this.$replaceInstanceContainer(instance, instance.container, container);
+        const nodes = instance.nodes;
+        if (nodes.length === 0)
+            return cursor;
+        const ref = cursor ? cursor.nextSibling : container.firstChild;
+        if (nodes[0] === ref)
+            return nodes[nodes.length - 1];
+        for (let i = 0; i < nodes.length; i++)
+            container.insertBefore(nodes[i], ref);
+        return nodes[nodes.length - 1];
+    }
+}