@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.81

package/generated/internal/utils/index.js

@@ -1,18 +1,25 @@
 // import * as _intl from './intl'
-import cash from './cash';
+// import cash from './cash'
 export { default as add } from './add';
+export { default as $ } from './cash';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
+export { default as devFlags } from './dev-flags';
+export { default as ensurePlaceholder } from './ensure-placeholder';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';
 export { default as onoff } from './onoff';
+export { default as renderLabel } from './render-label';
+export { default as renderLabelIcon } from './render-label-icon';
+export { default as renderLabelTitle } from './render-label-title';
 export { default as set } from './set';
 export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export const $ = cash;
+// export const $: typeof cash = cash

package/generated/internal/utils/is-inside.d.ts

@@ -0,0 +1 @@
+export default function (x: number, y: number, rect: DOMRect): boolean;

package/generated/internal/utils/is-inside.js

@@ -0,0 +1,4 @@
+export default function (x, y, rect) {
+    const { left, right, top, bottom } = rect;
+    return x >= left && x <= right && y >= top && y <= bottom;
+}

package/generated/internal/utils/list-active.js

@@ -1,28 +1,83 @@
-function onClick(event) {
-    const el = event.target.closest('button,summary');
+const touchList = new WeakMap();
+function onDown({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
+    touchList.set(el, setTimeout(() => {
+        if (!touchList.has(el))
+            return;
+        el.classList.add('active');
+    }, 70));
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+    el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
+}
+function onOver({ target, buttons }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    if (0 === buttons)
+        return;
     el.classList.add('active');
-    el.addEventListener('pointerleave', onCancel);
+    el.removeEventListener('pointerover', onOver);
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
-function onCancel(event) {
-    const el = event.target.closest('button,summary');
+function onLeave({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
-    self.requestAnimationFrame(() => {
-        el.removeEventListener('pointerleave', onCancel);
+    el.addEventListener('pointerover', onOver, { once: true, passive: true });
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onCancel({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    const el = target.closest('button,summary');
+    if (!el)
+        return;
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.removeEventListener('pointerover', onOver);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onScroll({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    for (const el of target.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');
-    });
+        if (touchList.has(el))
+            clearTimeout(touchList.get(el));
+        touchList.delete(el);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('pointerover', onOver);
+    }
 }
-const makePointerDownHandler = (target) => {
-    return onClick;
+const makePointerdownHandler = (target) => {
+    return onDown;
 }, makePointerCancelHandler = (target) => {
     return onCancel;
 };
 export default function (t) {
-    const onListener = makePointerDownHandler(t), offListener = makePointerCancelHandler(t);
+    const downListener = makePointerdownHandler(t), offListener = makePointerCancelHandler(t);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
         { types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
     ];
 }

package/generated/internal/utils/render-label-icon.d.ts

@@ -0,0 +1,2 @@
+import type { LabelView } from '../../components';
+export default function (label: LabelView, systemImage: string | null): void;

package/generated/internal/utils/render-label-icon.js

@@ -0,0 +1,19 @@
+import $ from './cash';
+export default function (label, systemImage) {
+    const img = label.querySelector(':scope>[slot=icon]');
+    // image ??= this.appendChild($(`<i slot="icon" style="line-height: 1.05"></i>`, '>1'))
+    // image.setAttribute('class', `ph ph-${newValue}`)
+    if (systemImage) {
+        if (!img) {
+            // const newImg = $(`<i slot="icon" style="line-height: 1.05" class="ph ph-${systemImage}"></i>`, '>1')
+            const newImg = $(`<image-view slot="icon"></image-view>`, '>1');
+            newImg.setAttribute('system-name', systemImage);
+            // DOM manipulation last
+            label.appendChild(newImg);
+        }
+        else if (systemImage !== img.getAttribute('system-name'))
+            img.setAttribute('system-name', systemImage);
+    }
+    else
+        img?.remove();
+}

package/generated/internal/utils/render-label-title.d.ts

@@ -0,0 +1,2 @@
+import type { LabelView } from '../../components';
+export default function (label: LabelView, textContent: string | null): void;

package/generated/internal/utils/render-label-title.js

@@ -0,0 +1,16 @@
+import $ from './cash';
+export default function (label, textContent) {
+    const span = label.querySelector(':scope>:not([slot])');
+    if (textContent) {
+        if (!span) {
+            // const newSpan = $(`<span></span>`, '>1')
+            // newSpan.textContent = title
+            // DOM manipulation last
+            label.appendChild(Object.assign($(`<span></span>`, '>1'), { textContent }));
+        }
+        else if (textContent !== span.textContent)
+            span.textContent = textContent;
+    }
+    else
+        span?.remove();
+}

package/generated/internal/utils/render-label.d.ts

@@ -0,0 +1 @@
+export default function (selector: string, template: string, container?: Element, title?: string | null, systemImage?: string | null): void;

package/generated/internal/utils/render-label.js

@@ -0,0 +1,19 @@
+import $ from './cash';
+import renderLabelIcon from './render-label-icon';
+import renderLabelTitle from './render-label-title';
+export default function (selector, template, container, title, systemImage) {
+    const existing = container?.querySelector(selector);
+    if (existing) {
+        for (const { name, value } of $(template, '>1').attributes)
+            if (!existing.hasAttribute(name))
+                existing.setAttribute(name, value);
+        renderLabelIcon(existing, systemImage ?? null);
+        renderLabelTitle(existing, title ?? null);
+    }
+    else {
+        const newLabel = $(template, '>1');
+        renderLabelIcon(newLabel, systemImage ?? null);
+        renderLabelTitle(newLabel, title ?? null);
+        container?.appendChild(newLabel);
+    }
+}

package/generated/internal/utils/touch-glass.js

@@ -1,19 +1,19 @@
-const makePointerDownHandler = (target, targetCallback, checkCallback) => {
+const makePointerdownHandler = (target, targetCallback, checkCallback) => {
     return function (evt) {
         // if (event.pointerType !== 'touch')  return
         if (!checkCallback(evt))
             return;
         targetCallback(target).toggleAttribute('touch-glass', true);
     };
-}, makePointerCancelHandler = (target, targetCallback) => {
+}, makePointercancelHandler = (target, targetCallback) => {
     return function (evt) {
         targetCallback(target).toggleAttribute('touch-glass', false);
     };
 };
 export default function (t, targetCallback, checkCallback) {
-    const onListener = makePointerDownHandler(t, targetCallback, checkCallback), offListener = makePointerCancelHandler(t, targetCallback);
+    const downListener = makePointerdownHandler(t, targetCallback, checkCallback), cancelListener = makePointercancelHandler(t, targetCallback);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
-        { types: 'pointerup pointercancel pointerleave', listener: offListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: cancelListener, addOptions: { passive: true } },
     ];
 }

package/generated/namespace-browser/base.d.ts

@@ -3,34 +3,43 @@ export declare abstract class DialogBase extends HTMLDialogElement {
     static polyfillConnectedCallback(el: HTMLDialogElement): void;
     static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
+}
+export declare abstract class InputBase extends HTMLInputElement {
+    static polyfillExtends: "input";
+    static polyfillConnectedCallback(el: HTMLInputElement): void;
+    static polyfillDisconnectedCallback(el: HTMLInputElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
 }
 export declare abstract class ButtonBase extends HTMLButtonElement {
     static polyfillExtends: "button";
     static polyfillConnectedCallback(el: HTMLButtonElement): void;
     static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class DetailsBase extends HTMLDetailsElement {
     static polyfillExtends: "details";
     static polyfillConnectedCallback(el: HTMLDetailsElement): void;
     static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare abstract class FormBase extends HTMLFormElement {
     static polyfillExtends: "form";
     static polyfillConnectedCallback(el: HTMLFormElement): void;
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;
     static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/namespace-browser/base.js

@@ -3,6 +3,15 @@ export class DialogBase extends HTMLDialogElement {
     static polyfillConnectedCallback(el) { }
     static polyfillDisconnectedCallback(el) { }
     static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -11,6 +20,12 @@ export class DialogBase extends HTMLDialogElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class InputBase extends HTMLInputElement {
+    static polyfillExtends = 'input';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -20,12 +35,6 @@ export class DialogBase extends HTMLDialogElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class ButtonBase extends HTMLButtonElement {
-    static polyfillExtends = 'button';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -34,6 +43,12 @@ export class ButtonBase extends HTMLButtonElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -43,12 +58,6 @@ export class ButtonBase extends HTMLButtonElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class DetailsBase extends HTMLDetailsElement {
-    static polyfillExtends = 'details';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -57,6 +66,12 @@ export class DetailsBase extends HTMLDetailsElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -66,12 +81,6 @@ export class DetailsBase extends HTMLDetailsElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class FormBase extends HTMLFormElement {
-    static polyfillExtends = 'form';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -80,6 +89,12 @@ export class FormBase extends HTMLFormElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -89,4 +104,12 @@ export class FormBase extends HTMLFormElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
 }

package/generated/namespace-browser/event.d.ts

@@ -0,0 +1,10 @@
+export interface TypedEventTargetMethods<M> {
+    addEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | AddEventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    };
+    removeEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | EventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    };
+}

package/generated/namespace-browser/event.js

@@ -0,0 +1 @@
+export {};

package/generated/snapshot/index.d.ts

@@ -1,6 +1,8 @@
 export declare class Snapshot {
     #private;
-    static readonly waitReady: Promise<[unknown, void]>;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
+    static readonly waitReady: Promise<[void, void]>;
     static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
     static get config(): Record<string, string> | undefined;
     static setOwnConfig(): Promise<void>;

package/generated/snapshot/index.js

@@ -1,8 +1,15 @@
+import { devFlags, onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
     static waitReady = Promise.all([
-        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', () => r(), { once: true })),
         (async () => {
             if (!this.#readyCalled)
                 await this.setOwnConfig();
@@ -32,6 +39,22 @@ export class Snapshot {
         catch {
             console.error('could-not-parse-config');
         }
-        console.debug(this.#config);
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
+        if (devFlags.debug)
+            console.debug(this.#config);
     }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        if (devFlags.debug)
+            console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
 }

package/generated/tpl/html.d.ts

@@ -0,0 +1,5 @@
+export interface TemplateResult {
+    strings: TemplateStringsArray;
+    values: unknown[];
+}
+export default function (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult;

package/generated/tpl/html.js

@@ -0,0 +1,3 @@
+export default function (strings, ...values) {
+    return { strings, values };
+}

package/generated/tpl/index.d.ts

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/index.js

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/render.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateResult } from './html';
+export default function (result: TemplateResult, container: Element | ShadowRoot): void;

package/generated/tpl/render.js

@@ -0,0 +1,132 @@
+// --- Template preparation (runs ONCE per unique template literal) -----
+const MARKER = '\uD83D\uDD25PART\uD83D\uDD25'; // unlikely-collision sentinel
+const templateCache = new WeakMap();
+function prepare(strings) {
+    let cached = templateCache.get(strings);
+    if (cached)
+        return cached;
+    const partDescriptors = [];
+    let htmlStr = '';
+    strings.forEach((chunk, i) => {
+        htmlStr += chunk;
+        if (i < strings.length - 1) {
+            // Is this interpolation inside an attribute value?
+            // e.g. `...aria-checked="${...}"` — chunk ends with `attr="` or `attr='` or `attr=`
+            const attrMatch = /([a-zA-Z0-9_-]+)=(["']?)$/.exec(chunk);
+            if (attrMatch) {
+                partDescriptors.push({ type: 'attr', name: attrMatch[1] });
+                htmlStr += MARKER; // becomes the attribute's value
+            }
+            else {
+                partDescriptors.push({ type: 'child' });
+                // start/end comment pair — gives us a stable region to patch later,
+                // and room to grow into list/array rendering without a redesign
+                htmlStr += `<!--${MARKER}-->`;
+            }
+        }
+    });
+    const element = document.createElement('template');
+    element.innerHTML = htmlStr;
+    cached = { element, partDescriptors };
+    templateCache.set(strings, cached);
+    return cached;
+}
+const instanceCache = new WeakMap();
+function createInstance(prepared) {
+    const fragment = prepared.element.content.cloneNode(true);
+    const parts = [];
+    // Walk the clone once, in the same order `prepare()` emitted markers,
+    // and bind each descriptor to a real node.
+    const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+    let descriptorIndex = 0;
+    const descriptors = prepared.partDescriptors;
+    let node;
+    while ((node = walker.nextNode())) {
+        if (descriptorIndex >= descriptors.length)
+            break;
+        if (node.nodeType === Node.COMMENT_NODE && node.data === MARKER) {
+            parts.push({ type: 'child', anchor: node, nodes: [], committed: undefined });
+            descriptorIndex++;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            for (const attr of Array.from(el.attributes)) {
+                if (attr.value === MARKER) {
+                    const desc = descriptors[descriptorIndex];
+                    if (desc.type === 'attr') {
+                        parts.push({ type: 'attr', el, name: desc.name, committed: undefined });
+                        descriptorIndex++;
+                    }
+                }
+            }
+        }
+    }
+    return { fragment, parts };
+}
+// --- Committing values into parts (the only thing that runs per update) -
+function isTemplateResult(v) {
+    return !!v && typeof v === 'object' && 'strings' in v && 'values' in v;
+}
+function toNode(value) {
+    if (value instanceof Node)
+        return value;
+    if (isTemplateResult(value)) {
+        const { fragment, parts } = createInstance(prepare(value.strings));
+        parts.forEach((part, i) => {
+            const v = value.values[i];
+            part.type === 'child' ? commitChild(part, v) : commitAttr(part, v);
+        });
+        return fragment;
+    }
+    return document.createTextNode(String(value));
+}
+function commitChild(part, value) {
+    if (value === part.committed)
+        return; // dirty-check, skip untouched parts
+    for (const n of part.nodes)
+        n.remove();
+    const nodes = [];
+    for (const item of Array.isArray(value) ? value : [value]) {
+        if (item === null || item === undefined || item === false)
+            continue;
+        const node = toNode(item);
+        const inserted = node instanceof DocumentFragment ? Array.from(node.childNodes) : [node];
+        part.anchor.before(node);
+        nodes.push(...inserted);
+    }
+    part.nodes = nodes;
+    part.committed = value;
+}
+function commitAttr(part, value) {
+    if (value === part.committed)
+        return;
+    if (value === null || value === undefined || value === false) {
+        part.el.removeAttribute(part.name);
+    }
+    else {
+        part.el.setAttribute(part.name, String(value));
+    }
+    part.committed = value;
+}
+// --- Public render() ----------------------------------------------------
+export default function (result, container) {
+    const prepared = prepare(result.strings);
+    let instance = instanceCache.get(container);
+    if (!instance || instance.strings !== result.strings) {
+        // first render, OR the template shape changed entirely — full (re)build
+        container.textContent = '';
+        const { fragment, parts } = createInstance(prepared);
+        container.append(fragment);
+        instance = { strings: result.strings, fragmentRoot: fragment, parts };
+        instanceCache.set(container, instance);
+    }
+    // same template shape as last time → patch existing DOM nodes only,
+    // no innerHTML, no re-clone, no focus/scroll loss
+    instance.parts.forEach((part, i) => {
+        const value = result.values[i];
+        if (part.type === 'child')
+            commitChild(part, value);
+        else
+            commitAttr(part, value);
+    });
+}