@fluixi/compiler 1.0.0-alpha.100

package/dist/lower/template.cjs

@@ -0,0 +1,1354 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lower/template.ts
+var template_exports = {};
+__export(template_exports, {
+  lowerTemplate: () => lowerTemplate
+});
+module.exports = __toCommonJS(template_exports);
+var import_template_parser = require("@fluixi/template-parser");
+
+// src/resolve/load-directive.ts
+var EAGER = { kind: "eager" };
+var DEFAULT_INTERACTION_EVENTS = ["pointerdown", "focusin", "keydown"];
+var STRATEGIES = /* @__PURE__ */ new Set(["eager", "idle", "visible", "interaction", "media", "never"]);
+var LoadDirectiveError = class extends Error {
+};
+function parseLoadDirective(name, value) {
+  const strategy = name.slice("load:".length);
+  if (!STRATEGIES.has(strategy)) {
+    throw new LoadDirectiveError(
+      `Unknown load strategy 'load:${strategy}'. Expected one of ${[...STRATEGIES].join(", ")}.`
+    );
+  }
+  switch (strategy) {
+    case "eager":
+      return EAGER;
+    case "idle":
+      return { kind: "idle" };
+    case "never":
+      return { kind: "never" };
+    case "visible":
+      return value ? { kind: "visible", rootMargin: value } : { kind: "visible" };
+    case "interaction":
+      return {
+        kind: "interaction",
+        events: value ? splitEvents(value) : [...DEFAULT_INTERACTION_EVENTS]
+      };
+    case "media":
+      if (!value) {
+        throw new LoadDirectiveError(
+          `'load:media' needs a query, e.g. load:media="(min-width: 1024px)".`
+        );
+      }
+      return { kind: "media", query: value };
+    default:
+      throw new LoadDirectiveError(`Unhandled load strategy '${strategy}'.`);
+  }
+}
+function splitEvents(value) {
+  const events = value.split(/[\s,]+/).map((e) => e.trim()).filter(Boolean);
+  if (events.length === 0) {
+    throw new LoadDirectiveError(`'load:interaction' was given no event names.`);
+  }
+  return events;
+}
+
+// src/codegen/serialize-static.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var HTML_NAME = {
+  className: "class",
+  htmlFor: "for"
+};
+var PROPERTY_ONLY = /* @__PURE__ */ new Set([
+  "innerHTML",
+  "outerHTML",
+  "innerText",
+  "textContent",
+  "value",
+  "checked",
+  "selected",
+  "muted",
+  "defaultValue",
+  "defaultChecked",
+  "children",
+  "ref"
+]);
+var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+function isRawTextElement(tag) {
+  return RAW_TEXT_ELEMENTS.has(tag);
+}
+function htmlAttrName(name) {
+  return HTML_NAME[name] ?? name;
+}
+function isPlainLiteralAttr(prop) {
+  if (prop.kind !== "attr") return false;
+  if (prop.expr !== void 0) return false;
+  if (prop.name.includes(":")) return false;
+  return !PROPERTY_ONLY.has(prop.name);
+}
+function isSerializable(node) {
+  if (!node.static) return false;
+  if (isRawTextElement(node.tag)) return false;
+  for (const prop of node.props) {
+    if (!isPlainLiteralAttr(prop)) return false;
+  }
+  for (const child of node.children) {
+    if (child.kind === "text") continue;
+    if (child.kind === "element" && isSerializable(child)) continue;
+    return false;
+  }
+  return true;
+}
+function serializeStatic(node) {
+  const attrs = node.props.map(serializeProp).filter(Boolean).join("");
+  const open = `<${node.tag}${attrs}>`;
+  if (VOID_ELEMENTS.has(node.tag)) return open;
+  return `${open}${node.children.map(serializeChild).join("")}</${node.tag}>`;
+}
+function serializeChild(child) {
+  if (child.kind === "text") return escapeText(child.value);
+  if (child.kind !== "element") throw new Error(`serializeStatic: unexpected ${child.kind}`);
+  return serializeStatic(child);
+}
+function serializeProp(prop) {
+  const name = HTML_NAME[prop.name] ?? prop.name;
+  const value = prop.literal;
+  if (value === true || value === void 0) return ` ${name}`;
+  if (value === false || value === null) return "";
+  return ` ${name}="${escapeAttr(String(value))}"`;
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function templatePositions(root) {
+  const pos = [];
+  let file;
+  const walk = (el) => {
+    file ??= el.at?.file;
+    pos.push(el.at?.line ?? 0, el.at?.column ?? 0);
+    for (const child of el.children) if (child.kind === "element") walk(child);
+  };
+  walk(root);
+  return file && pos.some((n) => n !== 0) ? { file, pos } : void 0;
+}
+
+// src/codegen/partial-template.ts
+var HOLE_START = "<!--fx-->";
+var HOLE_END = "<!--fx/-->";
+function isHole(node) {
+  return node.kind === "expr" || node.kind === "component" || node.kind === "control";
+}
+function isTemplateChild(node) {
+  return node.kind === "text" || node.kind === "element" && isTemplateElement(node);
+}
+function isTemplateElement(node) {
+  if (node.svg) return false;
+  if (isRawTextElement(node.tag)) return false;
+  if (!node.props.every((p) => isPlainLiteralAttr(p))) return false;
+  return node.children.every((c) => isTemplateChild(c) || isHole(c));
+}
+function containsHole(node) {
+  if (isHole(node)) return true;
+  const children = node.children;
+  return children ? children.some(containsHole) : false;
+}
+function addressable(el) {
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
+    if (child.kind === "text") {
+      if (child.value === "") return false;
+      if (el.children[i + 1]?.kind === "text") return false;
+    }
+  }
+  return el.children.every((c) => c.kind !== "element" || addressable(c));
+}
+function planPartialTemplate(root) {
+  if (!isTemplateElement(root)) return null;
+  if (!addressable(root)) return null;
+  if (!root.children.some(containsHole)) return null;
+  const steps = [];
+  const holes = [];
+  let refCount = 0;
+  const declare = (expr) => {
+    const ref = `_n$${refCount++}`;
+    steps.push({ ref, expr });
+    return ref;
+  };
+  walk(root, "_el$");
+  return { html: serializeWithMarkers(root), tag: root.tag, steps, holes };
+  function walk(el, elementRef) {
+    let last = -1;
+    el.children.forEach((child, i) => {
+      if (containsHole(child)) last = i;
+    });
+    let previous = null;
+    for (let i = 0; i <= last; i++) {
+      const child = el.children[i];
+      const expr = previous ? `${previous}.nextSibling` : `${elementRef}.firstChild`;
+      if (isHole(child)) {
+        const startRef = declare(expr);
+        const endRef = declare(`holeEnd(${startRef})`);
+        holes.push({ parentRef: elementRef, startRef, endRef, node: child });
+        previous = endRef;
+        continue;
+      }
+      const ref = declare(expr);
+      if (child.kind === "element" && containsHole(child)) walk(child, ref);
+      previous = ref;
+    }
+  }
+}
+function serializeWithMarkers(el) {
+  return serializeStatic(withSentinels(el)).split(SENTINEL).join(HOLE_START + HOLE_END);
+}
+function withSentinels(el) {
+  return {
+    ...el,
+    children: el.children.map(
+      (child) => isHole(child) ? { kind: "text", value: SENTINEL } : child.kind === "element" ? withSentinels(child) : child
+    )
+  };
+}
+var SENTINEL = "\0fx-hole\0";
+
+// src/codegen/contract.ts
+var RUNTIME_CONTRACT_V1 = {
+  version: 1,
+  module: "@fluixi/dom",
+  symbols: [
+    "createNativeElement",
+    "insert",
+    "spread",
+    "setAttribute",
+    "delegateEvents",
+    "createComponent",
+    "createMemo",
+    "untrack",
+    "Show",
+    "For",
+    "Index",
+    "Switch",
+    "Match",
+    "Dynamic",
+    "ErrorBoundary"
+  ]
+};
+var RUNTIME_CONTRACT_V2 = {
+  version: 2,
+  module: "@fluixi/dom",
+  symbols: [...RUNTIME_CONTRACT_V1.symbols, "template", "cloneTemplate", "walk"]
+};
+
+// src/analyze/intrinsics.ts
+var REACTIVE_MODULE = "@fluixi/reactive/signal";
+var INTRINSICS = {
+  $signal: { export: "signal", module: REACTIVE_MODULE, returns: "signal-handle" },
+  $memo: { export: "memo", module: REACTIVE_MODULE, returns: "memo-handle" },
+  $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
+  $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
+  $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+  $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
+  // No short runtime form for these yet, so the intrinsic stands for the `create*`
+  // name. Still worth having: no import to write, and when a shorter form is
+  // designed, the change is this line rather than a compiler pass.
+  $selector: { export: "createSelector", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  $deferred: { export: "createDeferred", module: REACTIVE_MODULE, returns: "memo-accessor" },
+  // Not value constructors, but the compiler has to know them: they change what a read
+  // does. `untrack` suppresses dependency collection, which is exactly the kind of thing
+  // dependency analysis must not guess at.
+  $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
+  $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+  // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+  // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+  $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+  $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+  $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+  $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+  $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+  $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+  // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+  // handle as far as reads go: the same accessor with `set` on it.
+  $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+  $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
+  // An environment variable, public or server-only; the browser build refuses a secret.
+  $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
+};
+var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
+
+// src/transform/source-locations.ts
+var SOURCE_MARKER = "__fx_source";
+var HOLE_MARKER = "__fx_hole";
+var markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
+var PROPS_MARKER = "__fx_props";
+var markProps = (object, at) => `(globalThis.${PROPS_MARKER} ?? ((p) => p))(${object},${JSON.stringify(at)})`;
+
+// src/analyze/paren.ts
+function skipQuoted(src, start) {
+  const quote = src[start];
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === quote) return i + 1;
+    else if (c === "\n") return -1;
+  }
+  return -1;
+}
+function skipTemplate(src, start) {
+  let i = start + 1;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "\\") {
+      i += 2;
+    } else if (c === "`") {
+      return i + 1;
+    } else if (c === "$" && src[i + 1] === "{") {
+      let depth = 1;
+      i += 2;
+      while (i < src.length && depth > 0) {
+        const k = src[i];
+        if (k === "\\") i += 2;
+        else if (k === "`") {
+          const end = skipTemplate(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else if (k === '"' || k === "'") {
+          const end = skipQuoted(src, i);
+          if (end < 0) return -1;
+          i = end;
+        } else {
+          if (k === "{") depth++;
+          else if (k === "}") depth--;
+          i++;
+        }
+      }
+    } else {
+      i++;
+    }
+  }
+  return -1;
+}
+function skipRegex(src, start) {
+  let inClass = false;
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+    if (c === "\\") i++;
+    else if (c === "[") inClass = true;
+    else if (c === "]") inClass = false;
+    else if (c === "\n") return -1;
+    else if (c === "/" && !inClass) {
+      let end = i + 1;
+      while (end < src.length && /[a-z]/i.test(src[end])) end++;
+      return end;
+    }
+  }
+  return -1;
+}
+function divides(prev) {
+  return prev !== "" && /[A-Za-z0-9_$)\]]/.test(prev);
+}
+function topLevelComma(src) {
+  let depth = 0;
+  let prev = "";
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      const end = skipQuoted(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "`") {
+      const end = skipTemplate(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = c;
+    } else if (c === "/" && src[i + 1] === "/") {
+      return null;
+    } else if (c === "/" && src[i + 1] === "*") {
+      const end = src.indexOf("*/", i + 2);
+      if (end < 0) return null;
+      i = end + 2;
+    } else if (c === "/" && !divides(prev)) {
+      const end = skipRegex(src, i);
+      if (end < 0) return null;
+      i = end;
+      prev = "/";
+    } else {
+      if (c === "(" || c === "[" || c === "{") depth++;
+      else if (c === ")" || c === "]" || c === "}") {
+        depth--;
+        if (depth < 0) return null;
+      } else if (c === "," && depth === 0) return true;
+      if (!/\s/.test(c)) prev = c;
+      i++;
+    }
+  }
+  return depth === 0 ? false : null;
+}
+function paren(code, position) {
+  const src = code.trim();
+  if (src === "") return `(${code})`;
+  if (position === "arrowBody" && src[0] === "{") return `(${code})`;
+  return topLevelComma(src) === false ? code : `(${code})`;
+}
+
+// src/codegen/backends/imperative.ts
+var CONTROL_COMPONENT = {
+  show: "Show",
+  for: "For",
+  index: "Index",
+  switch: "Switch",
+  match: "Match",
+  dynamic: "Dynamic",
+  errorBoundary: "ErrorBoundary",
+  suspense: "Suspense"
+};
+function isIdent(name) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
+}
+function propKey(name) {
+  return isIdent(name) ? name : JSON.stringify(name);
+}
+function propValue(p) {
+  if (p.expr !== void 0) {
+    if (p.name === "ref" && p.at)
+      return markHole(paren(p.expr, "value"), p.at.line, p.at.column, p.expr);
+    if (!p.reactive) return paren(p.expr, "value");
+    const accessor = `() => ${paren(p.expr, "arrowBody")}`;
+    return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
+  }
+  return JSON.stringify(p.literal ?? true);
+}
+function componentPropValue(p) {
+  if (p.expr !== void 0) return paren(p.expr, "value");
+  return JSON.stringify(p.literal ?? true);
+}
+function emitProps(props, childrenExpr, used) {
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const entries = normal.map((p) => `${propKey(p.name)}: ${propValue(p)}`);
+  if (childrenExpr != null) entries.push(`children: ${childrenExpr}`);
+  const obj = `{ ${entries.join(", ")} }`;
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    return `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  return obj;
+}
+function markBind(code, at) {
+  return at ? markHole(code, at.line, at.column) : code;
+}
+function emitChildren(children, used, templates) {
+  if (children.length === 1) return emitNode(children[0], used, templates);
+  let deferred = false;
+  const items = children.map((child) => {
+    const code = emitNode(child, used, templates);
+    if (child.kind === "element" && deferred) {
+      used.add("deferElement");
+      return `deferElement(() => ${paren(code, "arrowBody")})`;
+    }
+    if (child.kind === "component" || child.kind === "control" || child.kind === "expr" && child.reactive) deferred = true;
+    return code;
+  });
+  return `[${items.join(", ")}]`;
+}
+function emitComponent(name, props, children, used, templates, at) {
+  used.add("createMemo");
+  used.add("createComponent");
+  const spreads = props.filter((p) => p.kind === "spread");
+  const normal = props.filter((p) => p.kind !== "spread");
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
+  if (children.length > 0) {
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
+  }
+  if (spreads.length > 0) {
+    used.add("mergeProps");
+    obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
+  }
+  const propAt = {};
+  for (const p of normal) if (p.at) propAt[p.name] = [p.at.line, p.at.column];
+  if (Object.keys(propAt).length) obj = markProps(obj, propAt);
+  const mark = at ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), ` : "";
+  return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, "value")})`;
+}
+function staticAttrAssignment(el, prop) {
+  const name = htmlAttrName(prop.name);
+  const value = prop.literal;
+  if (value === true || value === void 0) return `${el}.setAttribute(${JSON.stringify(name)}, "");`;
+  if (value === false || value === null) return "";
+  return `${el}.setAttribute(${JSON.stringify(name)}, ${JSON.stringify(String(value))});`;
+}
+var partial = false;
+function emitNode(node, used, templates) {
+  switch (node.kind) {
+    case "text":
+      return JSON.stringify(node.value);
+    case "expr": {
+      if (!node.reactive) return paren(node.code, "value");
+      const accessor = `() => ${paren(node.code, "arrowBody")}`;
+      return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
+    }
+    case "fragment":
+      if (node.children.length === 0) return "null";
+      return emitChildren(node.children, used, templates);
+    case "component":
+      return markBind(emitComponent(node.name, node.props, node.children, used, templates, node.at), node.bindAt ?? node.at);
+    case "control": {
+      const name = CONTROL_COMPONENT[node.control] ?? node.control;
+      used.add(name);
+      return markBind(emitComponent(name, node.props, node.children, used, templates), node.bindAt);
+    }
+    case "element": {
+      if (templates && node.static && !node.svg && isSerializable(node)) {
+        used.add("templateNode");
+        const id = `_tmpl$${templates.length}`;
+        templates.push({ id, html: serializeStatic(node), tag: node.tag, svg: false });
+        const at = templatePositions(node);
+        return at ? `templateNode(${id}, ${JSON.stringify(node.tag)}, false, false, ${JSON.stringify(at)})` : `templateNode(${id}, ${JSON.stringify(node.tag)})`;
+      }
+      if (templates && partial) {
+        const plan = planPartialTemplate(node);
+        if (plan) {
+          used.add("templateNode");
+          used.add("insert");
+          used.add("holeEnd");
+          used.add("holeContent");
+          used.add("holeScope");
+          const id = `_tmpl$${templates.length}`;
+          templates.push({ id, html: plan.html, tag: plan.tag, svg: false });
+          const at = templatePositions(node);
+          const lines = [
+            `const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true${at ? `, false, ${JSON.stringify(at)}` : ""});`
+          ];
+          for (const step of plan.steps) lines.push(`const ${step.ref} = ${step.expr};`);
+          for (const hole of plan.holes) {
+            lines.push(
+              `insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ${paren(emitNode(hole.node, used, templates), "arrowBody")}), ${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`
+            );
+          }
+          lines.push("return _el$;");
+          return `(() => { ${lines.join(" ")} })()`;
+        }
+      }
+      used.add("createNativeElement");
+      const tag = JSON.stringify(node.tag);
+      const el = "_el$";
+      const parts = [];
+      const createArgs = node.at ? `${tag}, ${node.svg}, ${JSON.stringify(node.at)}` : node.svg ? `${tag}, true` : tag;
+      parts.push(`const ${el} = createNativeElement(${createArgs});`);
+      if (node.props.length > 0) {
+        if (!node.svg && node.props.every(isPlainLiteralAttr)) {
+          for (const p of node.props) parts.push(staticAttrAssignment(el, p));
+        } else {
+          used.add("spread");
+          const svgFlag = node.svg ? ", isSVG: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
+          parts.push(
+            `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
+          );
+        }
+      }
+      for (const child of node.children) {
+        used.add("insert");
+        const childCode = emitNode(child, used, templates);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+      }
+      parts.push(`return ${el};`);
+      return `(() => { ${parts.join(" ")} })()`;
+    }
+  }
+}
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
+function inlineTemplates(code, templates) {
+  if (!templates || templates.length === 0) return code;
+  const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));
+  return code.replace(/_tmpl\$\d+/g, (id) => byId.get(id) ?? id);
+}
+var imperativeBackend = {
+  name: "imperative",
+  contract: RUNTIME_CONTRACT_V1,
+  emit(node, options) {
+    const used = /* @__PURE__ */ new Set();
+    const templates = options?.templateClone !== false ? [] : void 0;
+    partial = options?.partialTemplates === true;
+    const code = emitNode(node, used, templates);
+    return { code, imports: Array.from(used), templates };
+  }
+};
+
+// src/lower/text.ts
+function cleanTemplateText(value) {
+  const lines = value.split(/\r\n|\n|\r/);
+  let lastNonEmpty = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (/[^ \t]/.test(lines[i])) lastNonEmpty = i;
+  }
+  let out = "";
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i].replace(/\t/g, " ");
+    if (i !== 0) line = line.replace(/^ +/, "");
+    if (i !== lines.length - 1) line = line.replace(/ +$/, "");
+    if (!line) continue;
+    if (i !== lastNonEmpty) line += " ";
+    out += line;
+  }
+  return out;
+}
+
+// src/lower/entities.ts
+var NAMED = {
+  quot: 34,
+  amp: 38,
+  apos: 39,
+  lt: 60,
+  gt: 62,
+  nbsp: 160,
+  iexcl: 161,
+  cent: 162,
+  pound: 163,
+  curren: 164,
+  yen: 165,
+  brvbar: 166,
+  sect: 167,
+  uml: 168,
+  copy: 169,
+  ordf: 170,
+  laquo: 171,
+  not: 172,
+  shy: 173,
+  reg: 174,
+  macr: 175,
+  deg: 176,
+  plusmn: 177,
+  sup2: 178,
+  sup3: 179,
+  acute: 180,
+  micro: 181,
+  para: 182,
+  middot: 183,
+  cedil: 184,
+  sup1: 185,
+  ordm: 186,
+  raquo: 187,
+  frac14: 188,
+  frac12: 189,
+  frac34: 190,
+  iquest: 191,
+  Agrave: 192,
+  Aacute: 193,
+  Acirc: 194,
+  Atilde: 195,
+  Auml: 196,
+  Aring: 197,
+  AElig: 198,
+  Ccedil: 199,
+  Egrave: 200,
+  Eacute: 201,
+  Ecirc: 202,
+  Euml: 203,
+  Igrave: 204,
+  Iacute: 205,
+  Icirc: 206,
+  Iuml: 207,
+  ETH: 208,
+  Ntilde: 209,
+  Ograve: 210,
+  Oacute: 211,
+  Ocirc: 212,
+  Otilde: 213,
+  Ouml: 214,
+  times: 215,
+  Oslash: 216,
+  Ugrave: 217,
+  Uacute: 218,
+  Ucirc: 219,
+  Uuml: 220,
+  Yacute: 221,
+  THORN: 222,
+  szlig: 223,
+  agrave: 224,
+  aacute: 225,
+  acirc: 226,
+  atilde: 227,
+  auml: 228,
+  aring: 229,
+  aelig: 230,
+  ccedil: 231,
+  egrave: 232,
+  eacute: 233,
+  ecirc: 234,
+  euml: 235,
+  igrave: 236,
+  iacute: 237,
+  icirc: 238,
+  iuml: 239,
+  eth: 240,
+  ntilde: 241,
+  ograve: 242,
+  oacute: 243,
+  ocirc: 244,
+  otilde: 245,
+  ouml: 246,
+  divide: 247,
+  oslash: 248,
+  ugrave: 249,
+  uacute: 250,
+  ucirc: 251,
+  uuml: 252,
+  yacute: 253,
+  thorn: 254,
+  yuml: 255,
+  OElig: 338,
+  oelig: 339,
+  Scaron: 352,
+  scaron: 353,
+  Yuml: 376,
+  fnof: 402,
+  circ: 710,
+  tilde: 732,
+  Alpha: 913,
+  Beta: 914,
+  Gamma: 915,
+  Delta: 916,
+  Epsilon: 917,
+  Zeta: 918,
+  Eta: 919,
+  Theta: 920,
+  Iota: 921,
+  Kappa: 922,
+  Lambda: 923,
+  Mu: 924,
+  Nu: 925,
+  Xi: 926,
+  Omicron: 927,
+  Pi: 928,
+  Rho: 929,
+  Sigma: 931,
+  Tau: 932,
+  Upsilon: 933,
+  Phi: 934,
+  Chi: 935,
+  Psi: 936,
+  Omega: 937,
+  alpha: 945,
+  beta: 946,
+  gamma: 947,
+  delta: 948,
+  epsilon: 949,
+  zeta: 950,
+  eta: 951,
+  theta: 952,
+  iota: 953,
+  kappa: 954,
+  lambda: 955,
+  mu: 956,
+  nu: 957,
+  xi: 958,
+  omicron: 959,
+  pi: 960,
+  rho: 961,
+  sigmaf: 962,
+  sigma: 963,
+  tau: 964,
+  upsilon: 965,
+  phi: 966,
+  chi: 967,
+  psi: 968,
+  omega: 969,
+  thetasym: 977,
+  upsih: 978,
+  piv: 982,
+  ensp: 8194,
+  emsp: 8195,
+  thinsp: 8201,
+  zwnj: 8204,
+  zwj: 8205,
+  lrm: 8206,
+  rlm: 8207,
+  ndash: 8211,
+  mdash: 8212,
+  lsquo: 8216,
+  rsquo: 8217,
+  sbquo: 8218,
+  ldquo: 8220,
+  rdquo: 8221,
+  bdquo: 8222,
+  dagger: 8224,
+  Dagger: 8225,
+  bull: 8226,
+  hellip: 8230,
+  permil: 8240,
+  prime: 8242,
+  Prime: 8243,
+  lsaquo: 8249,
+  rsaquo: 8250,
+  oline: 8254,
+  frasl: 8260,
+  euro: 8364,
+  image: 8465,
+  weierp: 8472,
+  real: 8476,
+  trade: 8482,
+  alefsym: 8501,
+  larr: 8592,
+  uarr: 8593,
+  rarr: 8594,
+  darr: 8595,
+  harr: 8596,
+  crarr: 8629,
+  lArr: 8656,
+  uArr: 8657,
+  rArr: 8658,
+  dArr: 8659,
+  hArr: 8660,
+  forall: 8704,
+  part: 8706,
+  exist: 8707,
+  empty: 8709,
+  nabla: 8711,
+  isin: 8712,
+  notin: 8713,
+  ni: 8715,
+  prod: 8719,
+  sum: 8721,
+  minus: 8722,
+  lowast: 8727,
+  radic: 8730,
+  prop: 8733,
+  infin: 8734,
+  ang: 8736,
+  and: 8743,
+  or: 8744,
+  cap: 8745,
+  cup: 8746,
+  int: 8747,
+  there4: 8756,
+  sim: 8764,
+  cong: 8773,
+  asymp: 8776,
+  ne: 8800,
+  equiv: 8801,
+  le: 8804,
+  ge: 8805,
+  sub: 8834,
+  sup: 8835,
+  nsub: 8836,
+  sube: 8838,
+  supe: 8839,
+  oplus: 8853,
+  otimes: 8855,
+  perp: 8869,
+  sdot: 8901,
+  lceil: 8968,
+  rceil: 8969,
+  lfloor: 8970,
+  rfloor: 8971,
+  lang: 9001,
+  rang: 9002,
+  loz: 9674,
+  spades: 9824,
+  clubs: 9827,
+  hearts: 9829,
+  diams: 9830
+};
+var REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+function decodeEntities(value) {
+  if (!value.includes("&")) return value;
+  return value.replace(REFERENCE, (match, hex, dec, name) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : Object.prototype.hasOwnProperty.call(NAMED, name) ? NAMED[name] : void 0;
+    return code !== void 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+  });
+}
+
+// src/lower/template.ts
+var DELEGATED = /* @__PURE__ */ new Set([
+  "click",
+  "dblclick",
+  "input",
+  "change",
+  "submit",
+  "focus",
+  "blur",
+  "keydown",
+  "keyup",
+  "keypress",
+  "mousedown",
+  "mouseup"
+]);
+function escapeTemplate(s) {
+  return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+var CONTAINER = "container";
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+var Lowerer = class {
+  constructor(holes, used, sourceFile, positionAt) {
+    this.holes = holes;
+    this.used = used;
+    this.sourceFile = sourceFile;
+    this.positionAt = positionAt;
+  }
+  /**
+   * Where a tag is written, for the mark a component node carries.
+   *
+   * The parser reports offsets, and they are offsets into the file: the pieces it was given
+   * carry the positions the front-end recorded. Only built when the host asked for source
+   * locations, which is the only time either of these is set.
+   */
+  tagAt(node) {
+    const start = node.loc?.start;
+    if (!this.sourceFile || !this.positionAt || start == null) return void 0;
+    const { line, column } = this.positionAt(start);
+    return { file: this.sourceFile, line, column };
+  }
+  hole(i) {
+    return this.holes[i] ?? { code: "undefined", reactive: false };
+  }
+  /** Emit a nested IR subtree to code (for `Show` fallback / `For` children). */
+  emit(node) {
+    const { code, imports, templates } = imperativeBackend.emit(node, {});
+    for (const s of imports) this.used.add(s);
+    return inlineTemplates(code, templates);
+  }
+  // --- content ------------------------------------------------------------
+  lowerRoot(children) {
+    const nodes = this.lowerChildren(children);
+    if (nodes.length === 1) return nodes[0];
+    return { kind: "fragment", children: nodes };
+  }
+  /** Lower a sibling list, handling text-drop and if/else/each restructuring. */
+  lowerChildren(children) {
+    const out = [];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.kind === "Element" || child.kind === "Component") {
+        const ifDir = child.attributes.find((a) => a.kind === "IfDirective");
+        if (ifDir && ifDir.kind === "IfDirective") {
+          let elseIdx = i + 1;
+          if (elseIdx < children.length && this.isBlankText(children[elseIdx])) elseIdx++;
+          const elseNode = children[elseIdx];
+          const hasElse = elseNode && (elseNode.kind === "Element" || elseNode.kind === "Component") && elseNode.attributes.some((a) => a.kind === "ElseDirective");
+          out.push(this.lowerIf(child, ifDir.hole, hasElse ? elseNode : null));
+          if (hasElse) i = elseIdx;
+          continue;
+        }
+      }
+      const node = this.lowerNode(child);
+      if (node) out.push(node);
+    }
+    return out;
+  }
+  isBlankText(n) {
+    return n.kind === "Text" && !n.raw && cleanTemplateText(n.value) === "";
+  }
+  lowerNode(node) {
+    switch (node.kind) {
+      case "Text": {
+        if (node.raw) return { kind: "text", value: node.value };
+        const cleaned = decodeEntities(cleanTemplateText(node.value));
+        return cleaned ? { kind: "text", value: cleaned } : null;
+      }
+      case "Comment":
+        return null;
+      // dropped, like JSX comments
+      case "Expression": {
+        const h = this.hole(node.hole);
+        return { kind: "expr", code: h.code, reactive: h.reactive, ...h.at ? { at: h.at } : {} };
+      }
+      case "Fragment":
+        return { kind: "fragment", children: this.lowerChildren(node.children) };
+      case "Element":
+        return this.lowerElement(node);
+      case "Component":
+        return this.lowerComponent(node);
+      default:
+        return null;
+    }
+  }
+  lowerElement(el) {
+    const isAttr = el.attributes.find((a) => a.kind === "Attribute" && a.name === "is");
+    if (el.tag === "component" && isAttr && isAttr.value && isAttr.value.kind === "hole") {
+      const rest = el.attributes.filter((a) => a !== isAttr);
+      const node = this.lowerComponent({ ...el, kind: "Component", tag: "Dynamic", tagHole: null, attributes: rest });
+      node.props.unshift({ name: "component", kind: "attr", expr: `() => ${paren(this.hole(isAttr.value.hole).code, "arrowBody")}` });
+      return node;
+    }
+    const each = this.lowerEach(el);
+    const children = each ? [each] : this.lowerChildren(el.children);
+    if (el.tag === CONTAINER) return children.length === 1 ? children[0] : { kind: "fragment", children };
+    const at = this.tagAt(el);
+    return {
+      kind: "element",
+      tag: el.tag,
+      svg: el.namespace === "svg",
+      props: this.lowerAttributes(el.attributes, true),
+      children,
+      static: false,
+      ...at ? { at } : {}
+    };
+  }
+  lowerComponent(el) {
+    const name = el.tagHole != null ? this.hole(el.tagHole).code : el.tag;
+    const props = this.lowerAttributes(el.attributes);
+    const { slots, rest } = this.partitionSlots(el.children);
+    for (const [slotName, nodes] of slots) {
+      const ir = nodes.length === 1 ? nodes[0] : { kind: "fragment", children: nodes };
+      const slotProp = {
+        name: slotName,
+        kind: "attr",
+        expr: this.emit(ir),
+        jsxElement: true
+      };
+      const clash = props.findIndex((p) => p.name === slotName);
+      if (clash >= 0) props[clash] = slotProp;
+      else props.push(slotProp);
+    }
+    const loadAttr = el.attributes.find((a) => a.kind === "LoadDirective");
+    const load = loadAttr ? parseLoadDirective(`load:${loadAttr.strategy}`, loadAttr.modifier) : void 0;
+    const bindAt = props.find((p) => p.at && p.reactive)?.at;
+    const at = this.tagAt(el);
+    return {
+      kind: "component",
+      name,
+      props,
+      children: this.lowerChildren(rest),
+      ...at ? { at } : {},
+      ...bindAt ? { bindAt } : {},
+      ...load ? { load } : {}
+    };
+  }
+  /** Split a component's children into named slots (`slot="x"`) and the rest. */
+  partitionSlots(children) {
+    const slots = /* @__PURE__ */ new Map();
+    const rest = [];
+    for (const child of children) {
+      if (child.kind === "Element" || child.kind === "Component") {
+        const slot = child.attributes.find(
+          (a) => a.kind === "Attribute" && a.name === "slot"
+        );
+        if (slot && slot.value && slot.value.kind === "static") {
+          const stripped = { ...child, attributes: child.attributes.filter((a) => a !== slot) };
+          const ir = stripped.kind === "Element" ? this.lowerElement(stripped) : this.lowerComponent(stripped);
+          const bucket = slots.get(slot.value.value) ?? [];
+          bucket.push(ir);
+          slots.set(slot.value.value, bucket);
+          continue;
+        }
+      }
+      rest.push(child);
+    }
+    return { slots, rest };
+  }
+  // --- control-flow sugar -------------------------------------------------
+  /** `<el if=${cond}>…</el>` (+ optional `<el else>`) → `<Show when fallback>`. */
+  lowerIf(el, condHole, elseEl) {
+    const cond = this.hole(condHole);
+    const props = [
+      { name: "when", kind: "attr", expr: cond.code, reactive: cond.reactive, ...cond.at ? { at: cond.at } : {} }
+    ];
+    if (elseEl) {
+      const elseIR = this.stripAndLower(elseEl, (a) => a.kind === "ElseDirective");
+      props.push({ name: "fallback", kind: "attr", expr: this.emit(elseIR), jsxElement: true });
+    }
+    const child = this.stripAndLower(el, (a) => a.kind === "IfDirective");
+    const at = this.tagAt(el);
+    return { kind: "component", name: "Show", props, children: [child], ...at ? { at } : {}, ...cond.at ? { bindAt: cond.at } : {} };
+  }
+  /**
+   * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+   * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+   * it is. Null when the element has no `each`.
+   */
+  lowerEach(el) {
+    const eachDir = el.attributes.find((a) => a.kind === "EachDirective");
+    if (!eachDir || eachDir.kind !== "EachDirective") return null;
+    const each = this.hole(eachDir.hole);
+    const props = [{ name: "each", kind: "attr", expr: each.code, reactive: each.reactive, ...each.at ? { at: each.at } : {} }];
+    if (eachDir.key) {
+      const by = "static" in eachDir.key ? `(item) => item[${JSON.stringify(eachDir.key.static)}]` : this.hole(eachDir.key.hole).code;
+      props.push({ name: "by", kind: "attr", expr: by });
+    }
+    const arrow = this.itemArrow(el);
+    let childrenCode;
+    if (arrow) {
+      const body = arrow.bodyReactive ? `() => ${paren(arrow.body, "arrowBody")}` : paren(arrow.body, "arrowBody");
+      childrenCode = `(${arrow.params.join(", ")}) => ${body}`;
+    } else {
+      const content = this.lowerChildren(el.children);
+      const ir = content.length === 1 ? content[0] : { kind: "fragment", children: content };
+      childrenCode = `() => ${paren(this.emit(ir), "arrowBody")}`;
+    }
+    const children = [{ kind: "expr", code: childrenCode, reactive: false }];
+    const at = this.tagAt(el);
+    return { kind: "component", name: "For", props, children, ...at ? { at } : {}, ...each.at ? { bindAt: each.at } : {} };
+  }
+  /** The single `${item => expr}` child arrow, if that's the element's content. */
+  itemArrow(el) {
+    const kids = el.children.filter((c) => !this.isBlankText(c));
+    if (kids.length !== 1 || kids[0].kind !== "Expression") return null;
+    return this.hole(kids[0].hole).arrow ?? null;
+  }
+  /** Lower an element to IR, dropping the directive attribute matched by `drop`. */
+  stripAndLower(el, drop) {
+    const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
+    return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
+  }
+  // --- attributes ---------------------------------------------------------
+  /**
+   * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+   * A component gets the object as before, rebuilt whole when any value moves.
+   */
+  lowerAttributes(attrs, element = false) {
+    let anyReactive = false;
+    const entry = (name, h) => {
+      anyReactive ||= h.reactive;
+      if (!element || !h.reactive) return `${JSON.stringify(name)}: ${h.code}`;
+      const accessor = `() => ${paren(h.code, "arrowBody")}`;
+      return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+    };
+    const props = [];
+    const classEntries = [];
+    let classAt;
+    const styleEntries = [];
+    let styleAt;
+    const usePairs = [];
+    for (const a of attrs) {
+      switch (a.kind) {
+        case "IfDirective":
+        case "EachDirective":
+        case "ElseDirective":
+          break;
+        // handled as control-flow at the parent level
+        case "Attribute":
+          props.push(this.plainAttr(a));
+          break;
+        case "PropertyBinding":
+          props.push({
+            name: a.name,
+            kind: "prop",
+            expr: this.hole(a.hole).code,
+            reactive: this.hole(a.hole).reactive,
+            ...this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}
+          });
+          break;
+        case "EventBinding":
+          props.push(this.eventProp(a));
+          break;
+        case "RefBinding":
+          props.push({
+            name: "ref",
+            kind: "ref",
+            expr: this.hole(a.hole).code,
+            reactive: this.hole(a.hole).reactive,
+            // Which variable ends up holding the element, and where it was written.
+            ...this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}
+          });
+          break;
+        case "Spread":
+          props.push({ name: "", kind: "spread", expr: this.hole(a.hole).code });
+          break;
+        case "ClassDirective": {
+          const h = this.hole(a.hole);
+          classEntries.push(entry(a.name, h));
+          classAt ??= h.at;
+          break;
+        }
+        case "StyleDirective": {
+          const h = this.hole(a.hole);
+          styleEntries.push(entry(a.name, h));
+          styleAt ??= h.at;
+          break;
+        }
+        case "BindDirective":
+          props.push(...this.bindProps(a.name, this.hole(a.hole)));
+          break;
+        case "UseDirective": {
+          const dir = a.name ?? (a.hole != null ? this.hole(a.hole).code : null);
+          if (!dir) break;
+          usePairs.push(a.name != null && a.hole != null ? `[${dir}, () => ${paren(this.hole(a.hole).code, "arrowBody")}]` : `[${dir}]`);
+          break;
+        }
+      }
+    }
+    if (classEntries.length > 0) {
+      props.push({
+        name: "classList",
+        kind: "attr",
+        expr: `{ ${classEntries.join(", ")} }`,
+        reactive: !element && anyReactive,
+        ...classAt ? { at: classAt } : {}
+      });
+    }
+    if (styleEntries.length > 0) {
+      const entries = `{ ${styleEntries.join(", ")} }`;
+      const base = props.findIndex((p) => p.name === "style");
+      if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: !element && anyReactive, ...styleAt ? { at: styleAt } : {} });
+      else {
+        const prop = props[base];
+        const value = prop.expr === void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+        props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+      }
+    }
+    if (usePairs.length > 0) {
+      props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
+    }
+    return props;
+  }
+  /**
+   * Lower an event binding. Plain `@click`/`onClick` (no modifiers) stays a
+   * DELEGATED handler (unchanged, byte-identical with JSX). `on:click` or any
+   * modifier (`.capture`/`.once`/`.passive`/`.prevent`/`.stop`/`.self`) emits a
+   * NATIVE `on:name` prop the runtime attaches via addEventListener.
+   */
+  eventProp(a) {
+    const dom = a.name.toLowerCase();
+    const handler = this.hole(a.hole).code;
+    const native = a.syntax === "colon" || a.modifiers.length > 0;
+    if (!native) {
+      return {
+        name: "on" + capitalize(a.name),
+        kind: "event",
+        event: { name: dom, delegated: DELEGATED.has(dom) },
+        expr: handler
+      };
+    }
+    const wrapped = this.wrapHandler(handler, a.modifiers);
+    const options = this.eventOptions(a.modifiers);
+    const value = options ? `[${wrapped}, ${options}]` : wrapped;
+    return { name: "on:" + dom, kind: "attr", expr: value };
+  }
+  /** Wrap a handler for `.prevent`/`.stop`/`.self` (no wrap when none apply). */
+  wrapHandler(handler, mods) {
+    const guard = mods.includes("self") ? "if (e.target !== e.currentTarget) return; " : "";
+    const pre = [];
+    if (mods.includes("prevent")) pre.push("e.preventDefault();");
+    if (mods.includes("stop")) pre.push("e.stopPropagation();");
+    if (!guard && pre.length === 0) return handler;
+    return `(e) => { ${guard}${pre.join(" ")} return (${handler})(e); }`;
+  }
+  /** addEventListener options object from `.capture`/`.once`/`.passive`, or null. */
+  eventOptions(mods) {
+    const opts = [];
+    if (mods.includes("capture")) opts.push("capture: true");
+    if (mods.includes("once")) opts.push("once: true");
+    if (mods.includes("passive")) opts.push("passive: true");
+    return opts.length ? `{ ${opts.join(", ")} }` : null;
+  }
+  /** `bind:value=${sig}` → `value={read()}` + `onInput={e => write(e…value)}`. */
+  bindProps(prop, h) {
+    const sigCode = h.code;
+    const checked = prop === "checked";
+    const evt = checked ? "change" : "input";
+    const accessor = checked ? "checked" : "value";
+    this.used.add("bindPair");
+    const sig = `bindPair(${sigCode})`;
+    return [
+      {
+        name: prop,
+        kind: "attr",
+        expr: `${sig}[0]()`,
+        reactive: true,
+        directive: `bind:${prop}`,
+        ...h.at ? { at: h.at } : {}
+      },
+      {
+        name: "on" + capitalize(evt),
+        kind: "event",
+        event: { name: evt, delegated: DELEGATED.has(evt) },
+        // delegated handler: `target` is the bound element (currentTarget is the root)
+        expr: `(e) => ${sig}[1](e.target.${accessor})`
+      }
+    ];
+  }
+  /** A plain attribute (incl. lit `?bool`, mixed values), old `mkProp` behavior. */
+  plainAttr(a) {
+    const v = a.value;
+    let name = a.name;
+    if (a.name === "class") {
+      name = v && v.kind === "hole" && this.hole(v.hole).object ? "classList" : "className";
+    } else if (a.name === "html") {
+      name = "innerHTML";
+    }
+    const kind = "attr";
+    const base = { name, kind };
+    if (v == null) {
+      base.literal = true;
+      return base;
+    }
+    if (v.kind === "static") {
+      base.literal = decodeEntities(v.value);
+      return base;
+    }
+    if (v.kind === "hole") {
+      const h = this.hole(v.hole);
+      base.expr = h.code;
+      base.reactive = h.reactive;
+      if (h.at) base.at = h.at;
+      return base;
+    }
+    let reactive = false;
+    let at;
+    const body = v.parts.map((p) => {
+      if ("text" in p) return escapeTemplate(decodeEntities(p.text));
+      const h = this.hole(p.hole);
+      reactive = reactive || h.reactive;
+      at ??= h.at;
+      return "${" + h.code + "}";
+    }).join("");
+    base.expr = "`" + body + "`";
+    base.reactive = reactive;
+    if (at) base.at = at;
+    return base;
+  }
+};
+function lowerTemplate(pieces, holes, used, opts = {}) {
+  const { root } = (0, import_template_parser.parseTemplate)(pieces, { svg: opts.svg });
+  return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
+}