@nisli/core 0.56.0 → 0.57.1

package/dist/bundler/template.js

@@ -0,0 +1,922 @@
+import {
+  signal,
+  isSignal,
+  effect,
+  computed,
+  untrack
+} from "./signal.js";
+import { isRef } from "./ref.js";
+import { auditTemplate, captureCallsite } from "./template-audit.js";
+const canMoveWithin = (parent) => typeof parent.moveBefore === "function";
+function untracked(fn) {
+  let result;
+  untrack(() => {
+    result = fn();
+  });
+  return result;
+}
+function raw(value) {
+  return { __raw: true, value };
+}
+function isRawHtml(value) {
+  return typeof value === "object" && value !== null && "__raw" in value && value.__raw === true && typeof value.value === "string";
+}
+function sanitized(value) {
+  return { __sanitize: true, value };
+}
+function isSanitizedHtml(value) {
+  return typeof value === "object" && value !== null && "__sanitize" in value && value.__sanitize === true && typeof value.value === "string";
+}
+let sanitizerFallback = null;
+function setSanitizerFallback(fn) {
+  sanitizerFallback = fn;
+}
+const nativeSetHtml = (el2, html2) => {
+  el2.setHTML(html2);
+};
+function sanitizerFor(el2) {
+  const platform = typeof Element === "function" ? Element.prototype.setHTML : void 0;
+  return typeof platform === "function" && el2.setHTML === platform ? nativeSetHtml : sanitizerFallback;
+}
+function isTrustedHtml(value) {
+  const tt = globalThis.trustedTypes;
+  return tt !== void 0 && tt.isHTML(value);
+}
+function nisliError(code, message) {
+  return new Error(`[nisli] ${code}: ${message}`);
+}
+const templateCache = /* @__PURE__ */ new WeakMap();
+let parseCount = 0;
+function __templateParseCount() {
+  return parseCount;
+}
+function parseTemplate(strings, valueCount) {
+  let template = templateCache.get(strings);
+  if (template) return template;
+  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 < valueCount) {
+      const needsQuotes = inTag && !quoteChar && /=\s*$/.test(s);
+      htmlStr += needsQuotes ? `"${createMarker(i)}"` : createMarker(i);
+    }
+  }
+  parseCount++;
+  template = document.createElement("template");
+  template.innerHTML = htmlStr;
+  templateCache.set(strings, template);
+  if (process.env.NODE_ENV !== "production") auditTemplate(strings, template);
+  return template;
+}
+const MARKER_PREFIX = "<!--bk-";
+const MARKER_SUFFIX = "-->";
+const ATTR_MARKER = "bk-";
+function createMarker(index) {
+  return `${MARKER_PREFIX}${index}${MARKER_SUFFIX}`;
+}
+function html(strings, ...values) {
+  const bindings = [];
+  const disposers = [];
+  if (process.env.NODE_ENV !== "production") captureCallsite(strings);
+  let mounted = false;
+  return {
+    __templateResult: true,
+    mount(host) {
+      if (mounted && values.length > 0) {
+        throw nisliError(
+          "N105",
+          `mount() on an already-mounted TemplateResult with ${values.length} value binding(s) \u2014 dispose() it first or create a fresh template per mount. Template starts: ${JSON.stringify((strings[0] ?? "").slice(0, 60))}`
+        );
+      }
+      mounted = true;
+      const template = parseTemplate(strings, values.length);
+      const fragment = template.content.cloneNode(true);
+      const afterMount = [];
+      processNode(fragment, values, bindings, disposers, afterMount);
+      host.appendChild(fragment);
+      for (const sync of afterMount) sync();
+    },
+    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;
+      mounted = false;
+    }
+  };
+}
+function processNode(node, values, bindings, disposers, afterMount) {
+  let afterChildren;
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el2 = node;
+    afterChildren = processAttributes(el2, values, bindings, disposers, afterMount);
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    const comment = node;
+    const text = comment.textContent || "";
+    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;
+    }
+  }
+  const children = [...node.childNodes];
+  for (const child of children) {
+    processNode(child, values, bindings, disposers, afterMount);
+  }
+  if (afterChildren) for (const bind of afterChildren) bind();
+}
+function processAttributes(el2, values, bindings, disposers, afterMount) {
+  const attrsToRemove = [];
+  let afterChildren;
+  for (const attr of [...el2.attributes]) {
+    const name = attr.name;
+    const attrValue = attr.value;
+    if (name.startsWith("@")) {
+      const eventParts = name.slice(1).split(".");
+      const eventName = eventParts[0] ?? "";
+      const modifiers = eventParts.slice(1);
+      const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+      if (markerMatch) {
+        const index = Number(markerMatch[1]);
+        const handler = values[index];
+        if (typeof handler === "function") {
+          bindEvent(el2, eventName, handler, modifiers, bindings);
+        }
+      }
+      attrsToRemove.push(name);
+      continue;
+    }
+    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(el2, className, value, bindings, disposers);
+      }
+      attrsToRemove.push(name);
+      continue;
+    }
+    if (name === "html:inner") {
+      const markerMatch = attrValue.match(/<!--bk-(\d+)-->/);
+      if (markerMatch) {
+        const index = Number(markerMatch[1]);
+        const value = values[index];
+        bindInnerHtml(el2, value, bindings, disposers);
+      }
+      attrsToRemove.push(name);
+      continue;
+    }
+    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 = el2;
+          disposers.push(() => {
+            value.current = null;
+          });
+        }
+      }
+      attrsToRemove.push(name);
+      continue;
+    }
+    if (attrValue.includes(MARKER_PREFIX)) {
+      const markers = [...attrValue.matchAll(/<!--bk-(\d+)-->/g)];
+      if (markers.length) {
+        const first = markers[0];
+        let value;
+        if (markers.length === 1 && first && attrValue === first[0]) {
+          value = values[Number(first[1])];
+        } else {
+          const resolve = () => attrValue.replace(/<!--bk-(\d+)-->/g, (_, i) => {
+            const v = values[Number(i)];
+            const raw2 = isSignal(v) ? v.value : v;
+            return raw2 == null || raw2 === false ? "" : String(raw2);
+          });
+          const hasSignals = markers.some((m) => isSignal(values[Number(m[1])]));
+          value = hasSignals ? computed(resolve) : resolve();
+        }
+        if (nativeFormProperty(el2, name)) {
+          (afterChildren ??= []).push(() => bindAttribute(el2, name, value, bindings, disposers, afterMount));
+        } else {
+          bindAttribute(el2, name, value, bindings, disposers, afterMount);
+        }
+      }
+      continue;
+    }
+  }
+  for (const name of attrsToRemove) {
+    el2.removeAttribute(name);
+  }
+  return afterChildren;
+}
+function mountFactoryResult(factory) {
+  const el2 = document.createElement(factory.tagName);
+  const localDisposers = [];
+  for (const [key, raw2] of Object.entries(factory.props)) {
+    if (isSignal(raw2)) {
+      const sig = raw2;
+      const unsub = sig.subscribe((newVal) => {
+        el2._setProp?.(key, newVal);
+      });
+      localDisposers.push(unsub);
+    } else {
+      el2._setProp?.(key, raw2);
+    }
+  }
+  if (factory.hostAttrs?.class != null) {
+    const classVal = factory.hostAttrs.class;
+    if (isSignal(classVal)) {
+      const sig = classVal;
+      let prevClasses = [];
+      const applyClasses = (raw2) => {
+        const next = raw2 ? raw2.split(/\s+/).filter(Boolean) : [];
+        for (const cls of prevClasses) {
+          if (!next.includes(cls)) el2.classList.remove(cls);
+        }
+        for (const cls of next) {
+          if (!prevClasses.includes(cls)) el2.classList.add(cls);
+        }
+        prevClasses = next;
+      };
+      const unsub = sig.subscribe(applyClasses);
+      localDisposers.push(unsub);
+    } else if (typeof classVal === "string" && classVal) {
+      for (const cls of classVal.split(/\s+/).filter(Boolean)) {
+        el2.classList.add(cls);
+      }
+    }
+  }
+  return {
+    element: el2,
+    dispose() {
+      for (const dispose of localDisposers.splice(0)) {
+        try {
+          dispose();
+        } catch (_) {
+        }
+      }
+    }
+  };
+}
+function replaceMarkerWithBinding(comment, value, bindings, disposers) {
+  const parent = comment.parentNode;
+  if (!parent) return;
+  if (isSignal(value)) {
+    const startMarker = document.createComment("slot-start");
+    const endMarker = document.createComment("slot-end");
+    parent.replaceChild(endMarker, comment);
+    parent.insertBefore(startMarker, endMarker);
+    let currentResults = [];
+    let currentNodes = [];
+    let currentFactoryDisposers = [];
+    let currentText = null;
+    const NOT_RENDERED = /* @__PURE__ */ Symbol("not-rendered");
+    let lastValue = NOT_RENDERED;
+    const dispose = effect(() => {
+      const newValue = value.value;
+      const liveParent = endMarker.parentNode;
+      if (!liveParent) return;
+      if (newValue === lastValue) return;
+      lastValue = newValue;
+      const isTemplate = Boolean(
+        newValue && typeof newValue === "object" && "__templateResult" in newValue
+      );
+      const isFactory = Boolean(
+        newValue && typeof newValue === "object" && "__type" in newValue && newValue.__type === "factory"
+      );
+      const isPrimitive = newValue != null && newValue !== false && !Array.isArray(newValue) && !isTemplate && !isFactory;
+      if (isPrimitive && currentText) {
+        currentText.data = String(newValue);
+        return;
+      }
+      for (const r of currentResults) {
+        try {
+          r.dispose();
+        } catch (_) {
+        }
+      }
+      for (const dispose2 of currentFactoryDisposers) {
+        try {
+          dispose2();
+        } catch (_) {
+        }
+      }
+      for (const node of currentNodes) {
+        node.parentNode?.removeChild(node);
+      }
+      currentNodes = [];
+      currentResults = [];
+      currentFactoryDisposers = [];
+      currentText = null;
+      if (newValue == null) {
+      } else if (Array.isArray(newValue)) {
+        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 mounted = mountFactoryResult(item);
+            currentNodes.push(mounted.element);
+            currentFactoryDisposers.push(mounted.dispose);
+            liveParent.insertBefore(mounted.element, endMarker);
+          } else if (item != null && item !== false) {
+            const textNode = document.createTextNode(String(item));
+            currentNodes.push(textNode);
+            liveParent.insertBefore(textNode, endMarker);
+          }
+        }
+      } else if (isTemplate) {
+        const tpl = newValue;
+        const wrapper = document.createDocumentFragment();
+        tpl.mount(wrapper);
+        currentNodes = [...wrapper.childNodes];
+        currentResults.push(tpl);
+        liveParent.insertBefore(wrapper, endMarker);
+      } else if (isFactory) {
+        const mounted = mountFactoryResult(newValue);
+        currentNodes.push(mounted.element);
+        currentFactoryDisposers.push(mounted.dispose);
+        liveParent.insertBefore(mounted.element, endMarker);
+      } else if (newValue !== false) {
+        currentText = document.createTextNode(String(newValue));
+        currentNodes.push(currentText);
+        liveParent.insertBefore(currentText, endMarker);
+      }
+    });
+    disposers.push(dispose);
+    disposers.push(() => {
+      for (const r of currentResults.splice(0)) {
+        try {
+          r.dispose();
+        } catch (_) {
+        }
+      }
+      for (const factoryDispose of currentFactoryDisposers.splice(0)) {
+        try {
+          factoryDispose();
+        } catch (_) {
+        }
+      }
+      currentNodes = [];
+      currentText = null;
+    });
+  } else if (value && typeof value === "object" && "__templateResult" in value) {
+    const result = value;
+    const startMarker = document.createComment("tpl-start");
+    const endMarker = document.createComment("tpl-end");
+    parent.replaceChild(endMarker, comment);
+    parent.insertBefore(startMarker, endMarker);
+    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") {
+    const mounted = mountFactoryResult(value);
+    parent.replaceChild(mounted.element, comment);
+    disposers.push(mounted.dispose);
+  } else if (Array.isArray(value)) {
+    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 if (item && typeof item === "object" && "__type" in item && item.__type === "factory") {
+        const mounted = mountFactoryResult(item);
+        parent.insertBefore(mounted.element, endMarker);
+        disposers.push(mounted.dispose);
+      } else {
+        const textNode = document.createTextNode(String(item));
+        parent.insertBefore(textNode, endMarker);
+      }
+    }
+  } else if (value == null || value === false) {
+    parent.removeChild(comment);
+  } else {
+    const textNode = document.createTextNode(String(value));
+    parent.replaceChild(textNode, comment);
+  }
+}
+function bindAttribute(el2, name, value, bindings, disposers, afterMount) {
+  if (name === "class") {
+    bindClassAttribute(el2, value, bindings, disposers);
+    return;
+  }
+  const isHtmlAttr = name === "id" || name === "style" || name === "slot" || name === "title" || name === "role" || name === "tabindex" || name === "name" || name.startsWith("data-") || name.startsWith("aria-");
+  const hasPropSetter = !isHtmlAttr && typeof el2._setProp === "function";
+  if (hasPropSetter) {
+    if (isSignal(value)) {
+      const binding = { type: "attribute", element: el2, name };
+      bindings.push(binding);
+      const dispose = effect(() => {
+        el2._setProp(name, value.value);
+      });
+      binding.dispose = dispose;
+      disposers.push(dispose);
+    } else {
+      el2._setProp(name, value);
+    }
+    return;
+  }
+  bindPlainAttribute(el2, name, value, bindings, disposers, afterMount);
+}
+function bindPlainAttribute(el2, name, value, bindings, disposers, afterMount) {
+  const property = nativeFormProperty(el2, name);
+  let current;
+  const apply = (v) => {
+    current = v;
+    if (v == null || v === false) {
+      el2.removeAttribute(name);
+    } else {
+      el2.setAttribute(name, v === true ? "" : String(v));
+    }
+    if (property) syncFormProperty(el2, property, v);
+  };
+  if (isSignal(value)) {
+    const binding = { type: "attribute", element: el2, name };
+    bindings.push(binding);
+    const dispose = effect(() => apply(value.value));
+    binding.dispose = dispose;
+    disposers.push(dispose);
+  } else {
+    apply(value);
+  }
+  if (property === "value" && el2.localName === "select") {
+    let active = true;
+    const sync = () => {
+      if (active) syncFormProperty(el2, "value", current);
+    };
+    const observer = new MutationObserver(sync);
+    observer.observe(el2, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["value", "selected"]
+    });
+    disposers.push(() => {
+      active = false;
+      observer.disconnect();
+    });
+    afterMount.push(sync);
+    queueMicrotask(sync);
+  }
+}
+function nativeFormProperty(el2, name) {
+  const attribute = name.toLowerCase();
+  if (attribute !== "value" && attribute !== "checked" && attribute !== "selected") return;
+  if (el2.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
+  const tag = el2.localName;
+  if (attribute === "value" && (tag === "input" || tag === "textarea" || tag === "select")) return attribute;
+  if (attribute === "checked" && tag === "input") return attribute;
+  if (attribute === "selected" && tag === "option") return attribute;
+}
+function syncFormProperty(el2, property, value) {
+  if (property === "value") {
+    const control = el2;
+    const next = value == null || typeof value === "boolean" ? "" : String(value);
+    if (el2.localName === "input" && el2.type === "file" && next !== "") return;
+    if (el2.localName === "select" || control.value !== next) control.value = next;
+  } else {
+    const control = el2;
+    const next = value != null && value !== false;
+    if (control[property] !== next) control[property] = next;
+  }
+}
+function bindClassAttribute(el2, value, bindings, disposers) {
+  let initialized = false;
+  let prevClasses = [];
+  const applyClasses = (raw2) => {
+    if (!initialized) {
+      el2.setAttribute("class", "");
+      initialized = true;
+    }
+    const str = raw2 == null || raw2 === false ? "" : String(raw2);
+    const next = str.split(/\s+/).filter(Boolean);
+    for (const cls of prevClasses) {
+      if (!next.includes(cls)) {
+        el2.classList.remove(cls);
+      }
+    }
+    for (const cls of next) {
+      if (!prevClasses.includes(cls)) {
+        el2.classList.add(cls);
+      }
+    }
+    prevClasses = next;
+  };
+  if (isSignal(value)) {
+    const binding = { type: "attribute", element: el2, name: "class" };
+    bindings.push(binding);
+    const dispose = effect(() => {
+      applyClasses(value.value);
+    });
+    binding.dispose = dispose;
+    disposers.push(dispose);
+  } else {
+    applyClasses(value);
+  }
+}
+function bindClass(el2, className, value, bindings, disposers) {
+  if (isSignal(value)) {
+    const binding = { type: "class", element: el2, className };
+    bindings.push(binding);
+    const dispose = effect(() => {
+      const v = value.value;
+      el2.classList.toggle(className, !!v);
+    });
+    binding.dispose = dispose;
+    disposers.push(dispose);
+  } else {
+    el2.classList.toggle(className, !!value);
+  }
+}
+function bindInnerHtml(el2, value, bindings, disposers) {
+  const resolveHtml = (v) => {
+    if (v == null) return "";
+    if (isRawHtml(v)) {
+      if (isSanitizedHtml(v)) {
+        throw nisliError(
+          "N106",
+          `html:inner rejects a value branded both raw() and sanitized() \u2014 the trust decision is ambiguous. Pick one brand.`
+        );
+      }
+      return v.value;
+    }
+    if (isSanitizedHtml(v)) {
+      if (sanitizerFor(el2) === null) {
+        throw nisliError(
+          "N107",
+          `html:inner cannot render sanitized() markup: this engine has no native Element.setHTML() and no fallback is registered. Wire one at startup \u2014 setSanitizerFallback((el, html) => { el.innerHTML = DOMPurify.sanitize(html) }) \u2014 nisli ships no sanitizer and will not fall back to innerHTML.`
+        );
+      }
+      return v;
+    }
+    if (isTrustedHtml(v)) return v;
+    throw nisliError(
+      "N106",
+      `html:inner rejects unbranded values (got ${typeof v}). Wrap trusted markup in raw(html), untrusted markup in sanitized(html) \u2014 and never wrap user-generated input in raw().`
+    );
+  };
+  const writeHtml = (v) => {
+    const resolved = resolveHtml(v);
+    if (isSanitizedHtml(resolved)) {
+      sanitizerFor(el2)?.(el2, resolved.value);
+      return;
+    }
+    el2.innerHTML = resolved;
+  };
+  if (isSignal(value)) {
+    untracked(() => resolveHtml(value.value));
+    const binding = { type: "innerHtml", element: el2 };
+    bindings.push(binding);
+    const dispose = effect(() => {
+      writeHtml(value.value);
+    });
+    binding.dispose = dispose;
+    disposers.push(dispose);
+  } else {
+    writeHtml(value);
+  }
+}
+function bindEvent(el2, eventName, handler, modifiers, bindings) {
+  let safeHandler;
+  let composed = handler;
+  if (modifiers.includes("stop")) {
+    const inner = composed;
+    composed = (e) => {
+      e.stopPropagation();
+      inner(e);
+    };
+  }
+  if (modifiers.includes("prevent")) {
+    const inner = composed;
+    composed = (e) => {
+      e.preventDefault();
+      inner(e);
+    };
+  }
+  if (modifiers.includes("once")) {
+    const inner = composed;
+    composed = (e) => {
+      el2.removeEventListener(eventName, safeHandler);
+      inner(e);
+    };
+  }
+  for (const mod of modifiers) {
+    if (["enter", "escape", "space", "tab"].includes(mod)) {
+      const keyMap = {
+        enter: "Enter",
+        escape: "Escape",
+        space: " ",
+        tab: "Tab"
+      };
+      const inner = composed;
+      composed = (e) => {
+        if (e.key === keyMap[mod]) {
+          inner(e);
+        }
+      };
+    }
+  }
+  safeHandler = (e) => {
+    try {
+      untrack(() => composed(e));
+    } catch (err) {
+      console.error(`Event handler error for '${eventName}':`, err);
+    }
+  };
+  el2.addEventListener(eventName, safeHandler);
+  bindings.push({
+    type: "event",
+    element: el2,
+    eventName,
+    handler: safeHandler,
+    modifiers,
+    dispose: () => el2.removeEventListener(eventName, safeHandler)
+  });
+}
+const EACH_BRAND = /* @__PURE__ */ Symbol.for("backlog.each");
+function asTemplateResult(result) {
+  if (result && typeof result === "object" && "__templateResult" in result) {
+    return result;
+  }
+  if (result && typeof result === "object" && result.__type === "factory") {
+    let mounted = null;
+    return {
+      __templateResult: true,
+      mount(host) {
+        mounted = mountFactoryResult(result);
+        host.appendChild(mounted.element);
+      },
+      dispose() {
+        mounted?.dispose();
+        mounted?.element.remove();
+        mounted = null;
+      }
+    };
+  }
+  throw new TypeError(
+    `each(): template callback must return a TemplateResult or a component factory result, got ${result === null ? "null" : typeof result}`
+  );
+}
+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;
+    const keyedItems = [];
+    const keyIndices = /* @__PURE__ */ new Map();
+    for (let i = 0; i < newItems.length; i++) {
+      const item = newItems[i];
+      if (item === void 0) continue;
+      const key = keyFn(item, i);
+      const previousIndex = keyIndices.get(key);
+      if (previousIndex !== void 0) {
+        const formattedKey = typeof key === "string" ? JSON.stringify(key) : String(key);
+        console.error(
+          `each() requires unique keys. Duplicate key ${formattedKey} found at indices ${previousIndex} and ${i}; reconciliation skipped.`
+        );
+        return;
+      }
+      keyIndices.set(key, i);
+      keyedItems.push({ item, index: i, key });
+    }
+    const oldMap = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      oldMap.set(entry.key, entry);
+    }
+    const newEntries = [];
+    const newKeys = /* @__PURE__ */ new Set();
+    for (const { item, index, key } of keyedItems) {
+      newKeys.add(key);
+      const existing = oldMap.get(key);
+      if (existing) {
+        existing.itemSignal.value = item;
+        existing.indexSignal.value = index;
+        newEntries.push(existing);
+      } else {
+        const itemSignal = signal(item);
+        const indexSignal = signal(index);
+        const wrapper = document.createElement("each-item");
+        wrapper.style.display = "contents";
+        const templateResult = asTemplateResult(templateFn(itemSignal, indexSignal));
+        templateResult.mount(wrapper);
+        newEntries.push({ key, itemSignal, indexSignal, templateResult, wrapper });
+      }
+    }
+    for (const entry of entries) {
+      if (!newKeys.has(entry.key)) {
+        entry.templateResult.dispose();
+        entry.wrapper.parentNode?.removeChild(entry.wrapper);
+      }
+    }
+    const atomic = canMoveWithin(parent);
+    let focusedIndex = -1;
+    if (!atomic) {
+      const root = parent.getRootNode();
+      let active = "activeElement" in root ? root.activeElement : null;
+      while (active && active.parentNode !== parent) active = active.parentElement;
+      if (active) focusedIndex = newEntries.findIndex((entry) => entry.wrapper === active);
+    }
+    if (focusedIndex !== -1) {
+      let next = newEntries[focusedIndex].wrapper;
+      for (let i = focusedIndex - 1; i >= 0; i--) {
+        const wrapper = newEntries[i].wrapper;
+        if (wrapper.nextSibling !== next) parent.insertBefore(wrapper, next);
+        next = wrapper;
+      }
+    }
+    let cursor = focusedIndex === -1 ? startMarker : newEntries[focusedIndex].wrapper;
+    for (let i = focusedIndex + 1; i < newEntries.length; i++) {
+      const entry = newEntries[i];
+      const nextSibling = cursor.nextSibling;
+      if (nextSibling !== entry.wrapper) {
+        if (entry.wrapper.parentNode === parent && atomic) {
+          parent.moveBefore(entry.wrapper, nextSibling);
+        } else {
+          parent.insertBefore(entry.wrapper, nextSibling);
+        }
+      }
+      cursor = entry.wrapper;
+    }
+    entries = newEntries;
+  }
+}
+function when(condition, template, elseTemplate) {
+  const resolveBranch = (branch) => {
+    if (branch === void 0) return null;
+    if (typeof branch === "function") return untracked(branch);
+    return branch;
+  };
+  if (isSignal(condition)) {
+    let lastGate;
+    let lastResult = null;
+    return computed(() => {
+      const gate = !!condition.value;
+      if (gate === lastGate) return lastResult;
+      const next = gate ? resolveBranch(template) : resolveBranch(elseTemplate);
+      lastGate = gate;
+      lastResult = next;
+      return next;
+    });
+  }
+  return condition ? resolveBranch(template) : resolveBranch(elseTemplate);
+}
+function el(tag, props = {}, children) {
+  let node = null;
+  const bindings = [];
+  const disposers = [];
+  return {
+    __templateResult: true,
+    mount(host) {
+      const element = document.createElement(tag);
+      node = element;
+      let afterChildren;
+      const afterMount = [];
+      for (const [key, val] of Object.entries(props)) {
+        const formProperty = nativeFormProperty(element, key);
+        if (val === void 0 && !formProperty) continue;
+        if (key === "ref") {
+          if (isRef(val)) {
+            val.current = element;
+            disposers.push(() => {
+              val.current = null;
+            });
+          }
+          continue;
+        }
+        if (key === "on") {
+          for (const [event, handler] of Object.entries(val)) {
+            bindEvent(element, event, handler, [], bindings);
+          }
+          continue;
+        }
+        if (key === "class") {
+          bindClassAttribute(element, val, bindings, disposers);
+          continue;
+        }
+        if (formProperty) {
+          (afterChildren ??= []).push(() => bindPlainAttribute(element, key, val, bindings, disposers, afterMount));
+        } else {
+          bindPlainAttribute(element, key, val, bindings, disposers, afterMount);
+        }
+      }
+      const flat = [];
+      flattenChildren(children, flat);
+      for (const child of flat) {
+        const anchor = document.createComment("");
+        element.appendChild(anchor);
+        replaceMarkerWithBinding(anchor, child, bindings, disposers);
+      }
+      if (afterChildren) for (const bind of afterChildren) bind();
+      host.appendChild(element);
+      for (const sync of afterMount) sync();
+    },
+    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;
+      node?.parentNode?.removeChild(node);
+      node = null;
+    }
+  };
+}
+function flattenChildren(children, out) {
+  if (children === void 0) return;
+  if (Array.isArray(children)) {
+    for (const c of children) flattenChildren(c, out);
+  } else {
+    out.push(children);
+  }
+}
+export {
+  __templateParseCount,
+  each,
+  el,
+  html,
+  raw,
+  sanitized,
+  setSanitizerFallback,
+  when
+};
+//# sourceMappingURL=template.js.map