@nisli/core 0.43.0

package/dist/template.js

@@ -0,0 +1,753 @@
+/**
+ * template.ts — Tagged template engine with targeted DOM binding
+ *
+ * The html tagged template literal parses HTML with expression slots,
+ * creates bindings for signals, and produces a TemplateResult that
+ * can be mounted into the DOM with surgical updates.
+ *
+ * Two phases:
+ * 1. First render: parse template, clone, create bindings, mount
+ * 2. Updates: signal changes trigger individual binding updates (O(1))
+ */
+import { signal, isSignal, effect, computed, } from './signal.js';
+import { isRef } from './ref.js';
+// ── Template cache ──────────────────────────────────────────────────
+/**
+ * Cache parsed templates by their static string parts.
+ * Since tagged templates always produce the same static strings array
+ * reference per call site, we use WeakMap for efficient caching.
+ */
+const templateCache = new WeakMap();
+// ── Marker for expression slots ─────────────────────────────────────
+const MARKER_PREFIX = '<!--bk-';
+const MARKER_SUFFIX = '-->';
+const ATTR_MARKER = 'bk-';
+/**
+ * Generate a unique marker for each expression slot.
+ * We use HTML comments as markers in text positions and
+ * special attribute prefixes for attribute positions.
+ */
+function createMarker(index) {
+    return `${MARKER_PREFIX}${index}${MARKER_SUFFIX}`;
+}
+// ── html tagged template ────────────────────────────────────────────
+/**
+ * Tagged template literal for creating reactive DOM templates.
+ *
+ * ```ts
+ * const name = signal('World');
+ * const greeting = html`<h1>Hello, ${name}!</h1>`;
+ * ```
+ *
+ * Signals in expression slots are detected automatically and
+ * create fine-grained bindings. When the signal changes, only
+ * the specific text node or attribute updates — no diffing needed.
+ */
+export function html(strings, ...values) {
+    const bindings = [];
+    const disposers = [];
+    return {
+        __templateResult: true,
+        mount(host) {
+            // Build the HTML string with markers.
+            // Track HTML parsing state to auto-quote markers in unquoted
+            // attribute positions where the > in --> would close the tag.
+            // See ADR 0069.
+            let htmlStr = '';
+            let inTag = false;
+            let quoteChar = null;
+            for (let i = 0; i < strings.length; i++) {
+                const s = strings[i] ?? '';
+                for (let c = 0; c < s.length; c++) {
+                    const ch = s.charAt(c);
+                    if (quoteChar) {
+                        if (ch === quoteChar)
+                            quoteChar = null;
+                    }
+                    else if (inTag) {
+                        if (ch === '>')
+                            inTag = false;
+                        else if (ch === '"' || ch === "'")
+                            quoteChar = ch;
+                    }
+                    else {
+                        if (ch === '<')
+                            inTag = true;
+                    }
+                }
+                htmlStr += s;
+                if (i < values.length) {
+                    const needsQuotes = inTag && !quoteChar && /=\s*$/.test(s);
+                    htmlStr += needsQuotes ? `"${createMarker(i)}"` : createMarker(i);
+                }
+            }
+            // Parse the HTML
+            const template = document.createElement('template');
+            template.innerHTML = htmlStr;
+            const fragment = template.content.cloneNode(true);
+            // Walk the DOM tree and replace markers with bindings
+            processNode(fragment, values, bindings, disposers);
+            // Mount into host
+            host.appendChild(fragment);
+        },
+        dispose() {
+            for (const d of disposers) {
+                try {
+                    d();
+                }
+                catch (_) { }
+            }
+            disposers.length = 0;
+            for (const b of bindings) {
+                if ('dispose' in b && b.dispose) {
+                    try {
+                        b.dispose();
+                    }
+                    catch (_) { }
+                }
+            }
+            bindings.length = 0;
+        },
+    };
+}
+// ── DOM walking and binding creation ────────────────────────────────
+function processNode(node, values, bindings, disposers) {
+    // Process element attributes
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        processAttributes(el, values, bindings, disposers);
+    }
+    // Process text nodes and comments (markers)
+    if (node.nodeType === Node.COMMENT_NODE) {
+        const comment = node;
+        const text = comment.textContent || '';
+        // Check if this is one of our markers
+        if (text.startsWith('bk-') && !isNaN(Number(text.slice(3)))) {
+            const index = Number(text.slice(3));
+            const value = values[index];
+            replaceMarkerWithBinding(comment, value, bindings, disposers);
+            return; // Don't recurse into replaced content
+        }
+    }
+    // Process child nodes (make a copy since we may mutate)
+    const children = [...node.childNodes];
+    for (const child of children) {
+        processNode(child, values, bindings, disposers);
+    }
+}
+function processAttributes(el, values, bindings, disposers) {
+    // We need to find attributes that contain markers
+    const attrsToRemove = [];
+    for (const attr of [...el.attributes]) {
+        const name = attr.name;
+        const attrValue = attr.value;
+        // Check for @event bindings
+        if (name.startsWith('@')) {
+            const eventParts = name.slice(1).split('.');
+            const eventName = eventParts[0] ?? '';
+            const modifiers = eventParts.slice(1);
+            // The value should be a marker containing the handler
+            const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+            if (markerMatch) {
+                const index = Number(markerMatch[1]);
+                const handler = values[index];
+                if (typeof handler === 'function') {
+                    bindEvent(el, eventName, handler, modifiers, bindings);
+                    disposers.push(() => el.removeEventListener(eventName, handler));
+                }
+            }
+            attrsToRemove.push(name);
+            continue;
+        }
+        // Check for class:name bindings
+        if (name.startsWith('class:')) {
+            const className = name.slice(6);
+            const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+            if (markerMatch) {
+                const index = Number(markerMatch[1]);
+                const value = values[index];
+                bindClass(el, className, value, bindings, disposers);
+            }
+            attrsToRemove.push(name);
+            continue;
+        }
+        // Check for html:inner binding (trusted HTML rendering)
+        if (name === 'html:inner') {
+            const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+            if (markerMatch) {
+                const index = Number(markerMatch[1]);
+                const value = values[index];
+                bindInnerHtml(el, value, bindings, disposers);
+            }
+            attrsToRemove.push(name);
+            continue;
+        }
+        // Check for ref binding: ref="${myRef}"
+        if (name === 'ref' && attrValue.includes(MARKER_PREFIX)) {
+            const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+            if (markerMatch) {
+                const index = Number(markerMatch[1]);
+                const value = values[index];
+                if (isRef(value)) {
+                    value.current = el;
+                    disposers.push(() => { value.current = null; });
+                }
+            }
+            attrsToRemove.push(name);
+            continue;
+        }
+        // Check for regular attribute bindings with markers
+        if (attrValue.includes(MARKER_PREFIX)) {
+            const markers = [...attrValue.matchAll(/<!--bk-(\d+)-->/g)];
+            if (markers.length) {
+                const first = markers[0];
+                // Single expression = entire value: preserve raw type and signal
+                if (markers.length === 1 && first && attrValue === first[0]) {
+                    bindAttribute(el, name, values[Number(first[1])], bindings, disposers);
+                }
+                else {
+                    // Mixed static + dynamic: resolve markers into string
+                    const resolve = () => attrValue.replace(/<!--bk-(\d+)-->/g, (_, i) => {
+                        const v = values[Number(i)];
+                        const raw = isSignal(v) ? v.value : v;
+                        return raw == null || raw === false ? '' : String(raw);
+                    });
+                    const hasSignals = markers.some(m => isSignal(values[Number(m[1])]));
+                    bindAttribute(el, name, hasSignals ? computed(resolve) : resolve(), bindings, disposers);
+                }
+            }
+            continue;
+        }
+    }
+    for (const name of attrsToRemove) {
+        el.removeAttribute(name);
+    }
+}
+/**
+ * Mount a factory result (from component() factory functions) into a DOM element.
+ * Handles prop forwarding (with signal subscriptions) and host-level class attrs.
+ */
+function mountFactoryResult(factory, disposers) {
+    const el = document.createElement(factory.tagName);
+    for (const [key, raw] of Object.entries(factory.props)) {
+        if (isSignal(raw)) {
+            const sig = raw;
+            el._setProp?.(key, sig.value);
+            const unsub = sig.subscribe((newVal) => {
+                el._setProp?.(key, newVal);
+            });
+            disposers.push(unsub);
+        }
+        else {
+            el._setProp?.(key, raw);
+        }
+    }
+    if (factory.hostAttrs?.class != null) {
+        const classVal = factory.hostAttrs.class;
+        if (isSignal(classVal)) {
+            const sig = classVal;
+            let prevClasses = [];
+            const applyClasses = (raw) => {
+                const next = raw ? raw.split(/\s+/).filter(Boolean) : [];
+                for (const cls of prevClasses) {
+                    if (!next.includes(cls))
+                        el.classList.remove(cls);
+                }
+                for (const cls of next) {
+                    if (!prevClasses.includes(cls))
+                        el.classList.add(cls);
+                }
+                prevClasses = next;
+            };
+            applyClasses(sig.value);
+            const unsub = sig.subscribe(applyClasses);
+            disposers.push(unsub);
+        }
+        else if (typeof classVal === 'string' && classVal) {
+            for (const cls of classVal.split(/\s+/).filter(Boolean)) {
+                el.classList.add(cls);
+            }
+        }
+    }
+    return el;
+}
+function replaceMarkerWithBinding(comment, value, bindings, disposers) {
+    const parent = comment.parentNode;
+    if (!parent)
+        return;
+    if (isSignal(value)) {
+        const signalValue = value.value;
+        // Check if the signal holds a TemplateResult, factory, null, undefined, or array
+        // (e.g., from reactive when(), computed(() => items.map(renderFn)), or factory results)
+        const isReactiveSlot = signalValue === null || signalValue === undefined
+            || (signalValue && typeof signalValue === 'object' && '__templateResult' in signalValue)
+            || (signalValue && typeof signalValue === 'object' && '__type' in signalValue)
+            || Array.isArray(signalValue);
+        if (isReactiveSlot) {
+            // Reactive template slot — mount/unmount templates as signal changes
+            const startMarker = document.createComment('slot-start');
+            const endMarker = document.createComment('slot-end');
+            parent.replaceChild(endMarker, comment);
+            parent.insertBefore(startMarker, endMarker);
+            let currentResults = [];
+            let currentNodes = [];
+            const dispose = effect(() => {
+                const newValue = value.value;
+                // Use endMarker.parentNode — the captured `parent` may be a
+                // DocumentFragment that was already appended to the real DOM,
+                // leaving the markers reparented under the actual DOM element.
+                const liveParent = endMarker.parentNode;
+                if (!liveParent)
+                    return;
+                // Remove previous content
+                for (const r of currentResults) {
+                    try {
+                        r.dispose();
+                    }
+                    catch (_) { }
+                }
+                for (const node of currentNodes) {
+                    node.parentNode?.removeChild(node);
+                }
+                currentNodes = [];
+                currentResults = [];
+                if (newValue == null) {
+                    // null/undefined — nothing to mount
+                }
+                else if (Array.isArray(newValue)) {
+                    // Array of TemplateResults (or mixed content)
+                    for (const item of newValue) {
+                        if (item && typeof item === 'object' && '__templateResult' in item) {
+                            const tpl = item;
+                            const wrapper = document.createDocumentFragment();
+                            tpl.mount(wrapper);
+                            const nodes = [...wrapper.childNodes];
+                            currentNodes.push(...nodes);
+                            currentResults.push(tpl);
+                            liveParent.insertBefore(wrapper, endMarker);
+                        }
+                        else if (item && typeof item === 'object' && '__type' in item && item.__type === 'factory') {
+                            const el = mountFactoryResult(item, disposers);
+                            currentNodes.push(el);
+                            liveParent.insertBefore(el, endMarker);
+                        }
+                        else if (item != null && item !== false) {
+                            const textNode = document.createTextNode(String(item));
+                            currentNodes.push(textNode);
+                            liveParent.insertBefore(textNode, endMarker);
+                        }
+                    }
+                }
+                else if (typeof newValue === 'object' && '__templateResult' in newValue) {
+                    // Single TemplateResult
+                    const tpl = newValue;
+                    const wrapper = document.createDocumentFragment();
+                    tpl.mount(wrapper);
+                    currentNodes = [...wrapper.childNodes];
+                    currentResults.push(tpl);
+                    liveParent.insertBefore(wrapper, endMarker);
+                }
+                else if (typeof newValue === 'object' && '__type' in newValue && newValue.__type === 'factory') {
+                    // Factory result — create child element
+                    const el = mountFactoryResult(newValue, disposers);
+                    currentNodes.push(el);
+                    liveParent.insertBefore(el, endMarker);
+                }
+            });
+            disposers.push(dispose);
+        }
+        else {
+            // Primitive signal — create a reactive text node
+            const textNode = document.createTextNode(String(signalValue));
+            parent.replaceChild(textNode, comment);
+            const binding = { type: 'text', node: textNode };
+            bindings.push(binding);
+            const dispose = effect(() => {
+                textNode.data = String(value.value);
+            });
+            binding.dispose = dispose;
+            disposers.push(dispose);
+        }
+    }
+    else if (value && typeof value === 'object' && '__templateResult' in value) {
+        // Nested template result — mount it
+        const result = value;
+        const startMarker = document.createComment('tpl-start');
+        const endMarker = document.createComment('tpl-end');
+        parent.replaceChild(endMarker, comment);
+        parent.insertBefore(startMarker, endMarker);
+        // Create a wrapper element to mount into
+        const wrapper = document.createDocumentFragment();
+        result.mount(wrapper);
+        parent.insertBefore(wrapper, endMarker);
+        disposers.push(() => result.dispose());
+    }
+    else if (value && typeof value === 'object' && '__type' in value && value.__type === 'factory') {
+        // Factory result — create child element
+        const el = mountFactoryResult(value, disposers);
+        parent.replaceChild(el, comment);
+    }
+    else if (Array.isArray(value)) {
+        // Array of template results
+        const startMarker = document.createComment('list-start');
+        const endMarker = document.createComment('list-end');
+        parent.replaceChild(endMarker, comment);
+        parent.insertBefore(startMarker, endMarker);
+        for (const item of value) {
+            if (item && typeof item === 'object' && '__templateResult' in item) {
+                const wrapper = document.createDocumentFragment();
+                item.mount(wrapper);
+                parent.insertBefore(wrapper, endMarker);
+                disposers.push(() => item.dispose());
+            }
+            else {
+                const textNode = document.createTextNode(String(item));
+                parent.insertBefore(textNode, endMarker);
+            }
+        }
+    }
+    else if (value == null || value === false) {
+        // null, undefined, false — render nothing
+        parent.removeChild(comment);
+    }
+    else {
+        // Primitive value — render as text
+        const textNode = document.createTextNode(String(value));
+        parent.replaceChild(textNode, comment);
+    }
+}
+function bindAttribute(el, name, value, bindings, disposers) {
+    // class attribute gets special handling to avoid conflicts with
+    // class:name directives (see bindClassAttribute for details).
+    if (name === 'class') {
+        bindClassAttribute(el, value, bindings, disposers);
+        return;
+    }
+    // Auto-resolution: framework components get _setProp for custom props
+    // (preserves types). Standard HTML attributes (id, style, data-*,
+    // aria-*) always use setAttribute even on framework components.
+    const isHtmlAttr = name === 'id' || name === 'style'
+        || name === 'slot' || name.startsWith('data-') || name.startsWith('aria-');
+    const hasPropSetter = !isHtmlAttr && typeof el._setProp === 'function';
+    if (hasPropSetter) {
+        if (isSignal(value)) {
+            const binding = { type: 'attribute', element: el, name };
+            bindings.push(binding);
+            const dispose = effect(() => {
+                el._setProp(name, value.value);
+            });
+            binding.dispose = dispose;
+            disposers.push(dispose);
+        }
+        else {
+            el._setProp(name, value);
+        }
+        return;
+    }
+    if (isSignal(value)) {
+        const binding = { type: 'attribute', element: el, name };
+        bindings.push(binding);
+        const dispose = effect(() => {
+            const v = value.value;
+            if (v == null || v === false) {
+                el.removeAttribute(name);
+            }
+            else if (v === true) {
+                el.setAttribute(name, '');
+            }
+            else {
+                el.setAttribute(name, String(v));
+            }
+        });
+        binding.dispose = dispose;
+        disposers.push(dispose);
+    }
+    else {
+        if (value == null || value === false) {
+            el.removeAttribute(name);
+        }
+        else if (value === true) {
+            el.setAttribute(name, '');
+        }
+        else {
+            el.setAttribute(name, String(value));
+        }
+    }
+}
+/**
+ * Bind a reactive class attribute using classList.add/remove instead of
+ * setAttribute('class', ...). This prevents the class attribute binding
+ * from overwriting classes toggled by class:name directives.
+ *
+ * The problem: setAttribute('class', 'foo bar') replaces ALL classes,
+ * wiping out any classes added by classList.toggle() from class:name
+ * bindings. By tracking which classes "belong" to the class attribute
+ * and using classList operations, we only manage our own classes.
+ */
+function bindClassAttribute(el, value, bindings, disposers) {
+    // On first call, we must clear the parser-set class attribute which
+    // contains raw marker text (e.g. "badge status-<!--bk-0-->").
+    // We snapshot any non-marker classes set by the parser before clearing.
+    let initialized = false;
+    let prevClasses = [];
+    const applyClasses = (raw) => {
+        if (!initialized) {
+            // Clear the parser's class attribute (contains marker text)
+            el.setAttribute('class', '');
+            initialized = true;
+        }
+        const str = raw == null || raw === false ? '' : String(raw);
+        const next = str.split(/\s+/).filter(Boolean);
+        // Remove classes no longer in the attribute value
+        for (const cls of prevClasses) {
+            if (!next.includes(cls)) {
+                el.classList.remove(cls);
+            }
+        }
+        // Add new classes
+        for (const cls of next) {
+            if (!prevClasses.includes(cls)) {
+                el.classList.add(cls);
+            }
+        }
+        prevClasses = next;
+    };
+    if (isSignal(value)) {
+        const binding = { type: 'attribute', element: el, name: 'class' };
+        bindings.push(binding);
+        const dispose = effect(() => {
+            applyClasses(value.value);
+        });
+        binding.dispose = dispose;
+        disposers.push(dispose);
+    }
+    else {
+        applyClasses(value);
+    }
+}
+function bindClass(el, className, value, bindings, disposers) {
+    if (isSignal(value)) {
+        const binding = { type: 'class', element: el, className };
+        bindings.push(binding);
+        const dispose = effect(() => {
+            const v = value.value;
+            el.classList.toggle(className, !!v);
+        });
+        binding.dispose = dispose;
+        disposers.push(dispose);
+    }
+    else {
+        el.classList.toggle(className, !!value);
+    }
+}
+/**
+ * Bind trusted HTML content to an element's innerHTML.
+ *
+ * WARNING: This is for trusted content only (e.g., highlighted search results
+ * from @orama/highlight, diff2html output). NEVER use with user-generated input.
+ *
+ * Supports both static strings and reactive Signal<string> values.
+ * When the signal changes, innerHTML is updated reactively.
+ *
+ * Usage in templates:
+ *   html`<span html:inner="${highlightedHtml}"></span>`
+ */
+function bindInnerHtml(el, value, bindings, disposers) {
+    if (isSignal(value)) {
+        const binding = { type: 'innerHtml', element: el };
+        bindings.push(binding);
+        const dispose = effect(() => {
+            const v = value.value;
+            el.innerHTML = v == null ? '' : String(v);
+        });
+        binding.dispose = dispose;
+        disposers.push(dispose);
+    }
+    else {
+        el.innerHTML = value == null ? '' : String(value);
+    }
+}
+function bindEvent(el, eventName, handler, modifiers, bindings) {
+    let wrappedHandler = handler;
+    // Apply modifiers
+    if (modifiers.includes('stop')) {
+        const original = wrappedHandler;
+        wrappedHandler = (e) => {
+            e.stopPropagation();
+            original(e);
+        };
+    }
+    if (modifiers.includes('prevent')) {
+        const original = wrappedHandler;
+        wrappedHandler = (e) => {
+            e.preventDefault();
+            original(e);
+        };
+    }
+    if (modifiers.includes('once')) {
+        const original = wrappedHandler;
+        wrappedHandler = (e) => {
+            el.removeEventListener(eventName, wrappedHandler);
+            original(e);
+        };
+    }
+    // Keyboard modifiers
+    for (const mod of modifiers) {
+        if (['enter', 'escape', 'space', 'tab'].includes(mod)) {
+            const keyMap = {
+                enter: 'Enter',
+                escape: 'Escape',
+                space: ' ',
+                tab: 'Tab',
+            };
+            const original = wrappedHandler;
+            wrappedHandler = (e) => {
+                if (e.key === keyMap[mod]) {
+                    original(e);
+                }
+            };
+        }
+    }
+    // Wrap in try/catch for error containment
+    const safeHandler = (e) => {
+        try {
+            wrappedHandler(e);
+        }
+        catch (err) {
+            console.error(`Event handler error for '${eventName}':`, err);
+        }
+    };
+    el.addEventListener(eventName, safeHandler);
+    bindings.push({
+        type: 'event',
+        element: el,
+        eventName,
+        handler: safeHandler,
+        modifiers,
+    });
+}
+/**
+ * Conditional rendering helper.
+ * Shows the template when condition is truthy.
+ *
+ * Supports both static and reactive (signal) conditions.
+ * For signal conditions, returns a computed that reactively switches
+ * between the template and null.
+ *
+ * The template argument can be a TemplateResult or a lazy callback
+ * `() => TemplateResult` to avoid evaluating expensive branches.
+ */
+// ── each() reactive list rendering ──────────────────────────────────
+/** Brand for each result detection */
+const EACH_BRAND = Symbol.for('backlog.each');
+/**
+ * Reactive list rendering with keyed reconciliation.
+ *
+ * Renders a list of items from a signal, tracking each item by key.
+ * When the array changes, only affected DOM nodes are added, removed,
+ * or reordered — existing items update in-place via their signals.
+ *
+ * ```ts
+ * const tasks = signal([{ id: '1', title: 'A' }, { id: '2', title: 'B' }]);
+ * html`<ul>${each(tasks, t => t.id, (task, index) =>
+ *   html`<li>${computed(() => task.value.title)}</li>`
+ * )}</ul>`
+ * ```
+ */
+export function each(items, keyFn, templateFn) {
+    let startMarker;
+    let endMarker;
+    let entries = [];
+    let effectDispose = null;
+    return {
+        __templateResult: true,
+        mount(host) {
+            startMarker = document.createComment('each-start');
+            endMarker = document.createComment('each-end');
+            host.appendChild(startMarker);
+            host.appendChild(endMarker);
+            effectDispose = effect(() => {
+                const newItems = items.value;
+                reconcile(newItems);
+            });
+        },
+        dispose() {
+            if (effectDispose) {
+                effectDispose();
+                effectDispose = null;
+            }
+            for (const entry of entries) {
+                entry.templateResult.dispose();
+            }
+            entries = [];
+        },
+    };
+    function reconcile(newItems) {
+        const parent = endMarker.parentNode;
+        if (!parent)
+            return;
+        // Build old key → entry map
+        const oldMap = new Map();
+        for (const entry of entries) {
+            oldMap.set(entry.key, entry);
+        }
+        // Build new entries list
+        const newEntries = [];
+        const newKeys = new Set();
+        for (let i = 0; i < newItems.length; i++) {
+            const item = newItems[i];
+            if (item === undefined)
+                continue;
+            const key = keyFn(item, i);
+            newKeys.add(key);
+            const existing = oldMap.get(key);
+            if (existing) {
+                // Reuse — update signals in place
+                existing.itemSignal.value = item;
+                existing.indexSignal.value = i;
+                newEntries.push(existing);
+            }
+            else {
+                // Create new entry with a stable wrapper element.
+                // Using display:contents so the wrapper is invisible to layout —
+                // inner reactive content can freely swap DOM nodes without
+                // invalidating the each() reconciler's node tracking.
+                const itemSignal = signal(item);
+                const indexSignal = signal(i);
+                const wrapper = document.createElement('each-item');
+                wrapper.style.display = 'contents';
+                const templateResult = templateFn(itemSignal, indexSignal);
+                templateResult.mount(wrapper);
+                newEntries.push({ key, itemSignal, indexSignal, templateResult, wrapper });
+            }
+        }
+        // Remove entries whose key is gone
+        for (const entry of entries) {
+            if (!newKeys.has(entry.key)) {
+                entry.templateResult.dispose();
+                entry.wrapper.parentNode?.removeChild(entry.wrapper);
+            }
+        }
+        // Reorder DOM nodes to match new order.
+        // Each entry has exactly one stable wrapper element, so positioning
+        // is simple and immune to inner reactive content swaps.
+        let cursor = startMarker;
+        for (const entry of newEntries) {
+            const nextSibling = cursor.nextSibling;
+            if (nextSibling !== entry.wrapper) {
+                parent.insertBefore(entry.wrapper, nextSibling);
+            }
+            cursor = entry.wrapper;
+        }
+        entries = newEntries;
+    }
+}
+export function when(condition, template) {
+    const resolveTemplate = () => typeof template === 'function' ? template() : template;
+    if (isSignal(condition)) {
+        // Reactive: return a computed that re-evaluates when the signal changes
+        return computed(() => condition.value ? resolveTemplate() : null);
+    }
+    return condition ? resolveTemplate() : null;
+}
+//# sourceMappingURL=template.js.map