@fluixi/template-parser 0.1.0-alpha.4 → 1.0.0-alpha.100

package/dist/parser.mjs

@@ -1 +1,809 @@
-function N(e){let t=(i,n)=>{i.parent=n;let r=B(i);for(let s of r)t(s,i)};return t(e,null),e}function B(e){switch(e.kind){case"Root":case"Element":case"Component":case"Fragment":return e.children;default:return[]}}var m=class{constructor(t){this.pieces=t;this.pi=0;this.oi=0;this.normalize()}normalize(){for(;this.pi<this.pieces.length;){let t=this.pieces[this.pi];if(t.kind==="static"&&this.oi>=t.text.length){this.pi++,this.oi=0;continue}break}}eof(){return this.pi>=this.pieces.length}pos(){if(this.eof()){let i=this.pieces[this.pieces.length-1];return i?i.kind==="static"?i.start+i.text.length:i.end:0}let t=this.pieces[this.pi];return t.kind==="static"?t.start+this.oi:t.start}atHole(){return!this.eof()&&this.pieces[this.pi].kind==="hole"}holeFollows(){if(this.eof())return!1;let t=this.pieces[this.pi];if(t.kind!=="static"||this.oi+1<t.text.length)return!1;let i=this.pieces[this.pi+1];return i!==void 0&&i.kind==="hole"}takeHole(){let t=this.pieces[this.pi];if(t.kind!=="hole")throw new Error("takeHole called off a hole");return this.pi++,this.oi=0,this.normalize(),{index:t.index,loc:{start:t.start,end:t.end}}}peek(t=0){if(this.eof())return"";let i=this.pieces[this.pi];return i.kind!=="static"?"":i.text[this.oi+t]??""}startsWith(t){if(this.eof())return!1;let i=this.pieces[this.pi];return i.kind!=="static"?!1:i.text.startsWith(t,this.oi)}advance(){if(this.eof())return"";let t=this.pieces[this.pi];if(t.kind!=="static")return"";let i=t.text[this.oi++]??"";return this.normalize(),i}readWhile(t){let i="";for(;!this.eof()&&!this.atHole();){let n=this.peek();if(n===""||!t(n))break;i+=n,this.oi++}return this.normalize(),i}skipWhitespace(){this.readWhile(t=>/\s/.test(t))}span(t){return{start:t,end:this.pos()}}};var b=new Set(["capture","once","passive","prevent","stop","self"]);function p(e,t){return e.value&&e.value.kind==="hole"?e.value.hole:(e.report("invalid-binding",`${t} requires an expression value: ${e.name}=\${…}`),-1)}var x=(e,t)=>({kind:"Attribute",name:t?e.name.slice(1):e.name,value:e.value,boolean:t,loc:e.loc}),g=[{id:"event",match:e=>e[0]==="@"||e.startsWith("on:")||/^on[A-Z]/.test(e),build:e=>{let t,i;e.name[0]==="@"?(t="at",i=e.name.slice(1)):e.name.startsWith("on:")?(t="colon",i=e.name.slice(3)):(t="on",i=e.name.slice(2));let[n,...r]=i.split("."),s=n.toLowerCase();for(let o of r)b.has(o)||e.report("invalid-directive",`Unknown event modifier ".${o}" — expected one of ${[...b].join(", ")}`);return{kind:"EventBinding",name:s,syntax:t,modifiers:r,hole:p(e,"event binding"),loc:e.loc}}},{id:"bind",elementOnly:!0,match:e=>e.startsWith("bind:"),build:e=>({kind:"BindDirective",name:e.name.slice(5),hole:p(e,"two-way binding"),loc:e.loc})},{id:"class-directive",elementOnly:!0,match:e=>e.startsWith("class:"),build:e=>({kind:"ClassDirective",name:e.name.slice(6),hole:p(e,"class directive"),loc:e.loc})},{id:"style-directive",elementOnly:!0,match:e=>e.startsWith("style:"),build:e=>({kind:"StyleDirective",name:e.name.slice(6),hole:p(e,"style directive"),loc:e.loc})},{id:"load",match:e=>e.startsWith("load:"),build:e=>({kind:"LoadDirective",strategy:e.name.slice(5),modifier:e.value&&e.value.kind==="static"?e.value.value:null,loc:e.loc})},{id:"use",match:e=>e==="use"||e.startsWith("use:"),build:e=>({kind:"UseDirective",name:e.name.startsWith("use:")?e.name.slice(4):null,hole:e.value&&e.value.kind==="hole"?e.value.hole:null,loc:e.loc})},{id:"if",elementOnly:!0,match:e=>e==="if",build:e=>({kind:"IfDirective",hole:p(e,"if directive"),loc:e.loc})},{id:"each",elementOnly:!0,match:e=>e==="each",build:e=>({kind:"EachDirective",hole:p(e,"each directive"),key:null,loc:e.loc})},{id:"else",elementOnly:!0,match:e=>e==="else",build:e=>(e.value!==null&&e.report("invalid-directive","`else` takes no value"),{kind:"ElseDirective",loc:e.loc})},{id:"ref",match:e=>e==="ref",build:e=>({kind:"RefBinding",hole:p(e,"ref binding"),loc:e.loc})},{id:"property",match:e=>e[0]===".",build:e=>({kind:"PropertyBinding",name:e.name.slice(1),hole:p(e,"property binding"),loc:e.loc})},{id:"boolean",match:e=>e[0]==="?",build:e=>x(e,!0)}];function y(e,t=g,i={component:!1}){for(let n of t)if(!(n.elementOnly&&i.component)&&n.match(e.name))return n.build(e);return x(e,!1)}var D=new Set(["svg","path","circle","rect","line","polygon","polyline","ellipse","g","defs","clipPath","text"]),E=new Set(["script","style","textarea","title"]),S=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);function C(e){return e.length>0&&(e[0]!==e[0].toLowerCase()||e.includes("."))}var R=new Set(["a","button","input","select","textarea","summary","details","option","label"]),W=new Set(["keydown","keyup","keypress"]);function u(e,t){return e.attributes.find(i=>"name"in i&&i.name===t)}function w(e){return e.attributes.some(t=>t.kind==="Spread")}function f(e,t){let i=u(e,t);if(!i||i.kind!=="Attribute"||!i.value)return;let n=i.value;return n.kind==="static"?n.value:void 0}function L(e){let t=f(e,"role");return t==="presentation"||t==="none"?!0:f(e,"aria-hidden")==="true"}function T(e,t){return e.attributes.some(i=>i.kind==="EventBinding"&&t(i.name))}function A(e){let t=[],i=(r,s,o)=>{t.push({code:s,message:o,severity:"warning",loc:r.loc})},n=r=>{for(let s of r){s.kind==="Element"&&H(s,i);let o="children"in s?s.children:void 0;o&&n(o)}};return n(e.children),t}function H(e,t){if(w(e))return;let i=e.tag.toLowerCase();i==="img"&&!u(e,"alt")&&!L(e)&&t(e,"a11y-img-alt",'An `img` needs an `alt`. Use `alt=""` when the image is decorative.'),i==="a"&&!u(e,"href")&&!u(e,"role")&&t(e,"a11y-anchor-href","An `a` without `href` is not a link. Use a `button` for an action."),i==="iframe"&&!u(e,"title")&&t(e,"a11y-iframe-title","An `iframe` needs a `title` describing its content.");let n=f(e,"tabindex")??f(e,"tabIndex");n!==void 0&&Number(n)>0&&t(e,"a11y-positive-tabindex","A positive `tabindex` reorders tab navigation for the entire page. Use `0`, or restructure the markup."),!R.has(i)&&T(e,r=>r==="click")&&!u(e,"role")&&!T(e,r=>W.has(r))&&t(e,"a11y-click-without-keyboard",`A click handler on \`${i}\` is unreachable by keyboard. Use a \`button\`, or add a \`role\` and a key handler.`)}var P=/[A-Za-z0-9\-_:@.?]/,k=class{constructor(t,i){this.diagnostics=[];this.r=new m(t),this.svg=i.svg??!1,this.directives=i.directives??g,this.accessibility=i.accessibility??!0}parse(){let t=this.r.pos(),i=[];for(;!this.r.eof()&&(i.push(...this.parseChildren()),!this.r.eof());){let r=this.r.pos();this.consumeCloseTag(),this.report("stray-close-tag","error","Close tag without a matching open tag",this.r.span(r))}let n={kind:"Root",children:i,loc:this.r.span(t)};return N(n),this.validateTree(n),this.accessibility&&this.diagnostics.push(...A(n)),{root:n,diagnostics:this.diagnostics}}validateTree(t){let i=n=>{let r=null;for(let s of n)s.kind==="Text"&&/^\s*$/.test(s.value)||(s.kind==="Element"||s.kind==="Component"?(s.attributes.some(l=>l.kind==="ElseDirective")&&(r!=null&&(r.kind==="Element"||r.kind==="Component")&&r.attributes.some(a=>a.kind==="IfDirective")||this.report("else-without-if","error","`else` must immediately follow an element with `if`",s.loc)),r=s):r=null,"children"in s&&s.children&&i(s.children))};i(t.children)}parseChildren(){let t=[];for(;!this.r.eof()&&!this.r.startsWith("</");){if(this.r.startsWith("<!--")){t.push(this.parseComment());continue}if(this.isFragmentStart()){t.push(this.parseFragment());continue}if(this.isDynamicTagStart()){t.push(this.parseDynamicComponent());continue}if(this.isTagStart()){t.push(this.parseElement());continue}if(this.r.atHole()){let n=this.r.takeHole(),r={kind:"Expression",hole:n.index,loc:n.loc};t.push(r);continue}let i=this.readText();i&&t.push(i)}return t}isTagStart(){return this.r.peek()==="<"&&/[A-Za-z]/.test(this.r.peek(1))}isFragmentStart(){return this.r.peek()==="<"&&this.r.peek(1)===">"}isDynamicTagStart(){return this.r.peek()==="<"&&this.r.holeFollows()}parseDynamicComponent(){let t=this.r.pos();this.r.advance();let i=this.r.takeHole().index,n=this.parseAttributes(!0);this.r.skipWhitespace();let r=!1,s=[];return this.r.startsWith("/>")?(this.r.advance(),this.r.advance(),r=!0):(this.r.peek()===">"&&this.r.advance(),s=this.parseChildren(),this.r.startsWith("</")?(this.r.advance(),this.r.advance(),this.r.atHole()?this.r.takeHole():this.readName(),this.r.skipWhitespace(),this.r.peek()===">"&&this.r.advance()):this.report("unclosed-tag","error","Unclosed dynamic component",this.r.span(t))),{kind:"Component",tag:"",tagHole:i,attributes:n,children:s,selfClosing:r,loc:this.r.span(t)}}readText(){let t=this.r.pos(),i="";for(;!this.r.eof()&&!this.r.atHole()&&!(this.r.startsWith("</")||this.r.startsWith("<!--")||this.isTagStart()||this.isFragmentStart()||this.isDynamicTagStart());)i+=this.r.advance();return i?{kind:"Text",value:i,raw:!1,loc:this.r.span(t)}:null}parseComment(){let t=this.r.pos();this.r.advance(),this.r.advance(),this.r.advance(),this.r.advance();let i="";for(;!this.r.eof()&&!this.r.startsWith("-->");){if(this.r.atHole()){this.r.takeHole(),i+="\0";continue}i+=this.r.advance()}return this.r.startsWith("-->")?(this.r.advance(),this.r.advance(),this.r.advance()):this.report("unclosed-comment","warning","Unterminated comment",this.r.span(t)),{kind:"Comment",value:i,loc:this.r.span(t)}}parseFragment(){let t=this.r.pos();this.r.advance(),this.r.advance();let i=this.parseChildren();if(this.r.startsWith("</")){let n=this.consumeCloseTag();n&&this.report("mismatched-close-tag","error",`Expected </> to close fragment, got </${n}>`,this.r.span(t))}else this.report("unclosed-tag","error","Unterminated fragment",this.r.span(t));return{kind:"Fragment",children:i,loc:this.r.span(t)}}parseElement(){let t=this.r.pos();this.r.advance();let i=this.readName(),n=C(i),r=this.parseAttributes(n);this.foldEachKey(r,t),this.r.skipWhitespace();let s=i.toLowerCase(),o=!n&&E.has(s),l=!n&&S.has(s),a=!1,c=[];if(this.r.startsWith("/>"))this.r.advance(),this.r.advance(),a=!0;else if(this.r.peek()===">"&&this.r.advance(),!l)if(c=o?this.parseRawText(i):this.parseChildren(),this.r.startsWith("</")){let v=this.consumeCloseTag();v&&v!==i&&this.report("mismatched-close-tag","error",`Expected </${i}>, got </${v}>`,this.r.span(t))}else this.report("unclosed-tag","error",`Unclosed <${i}>`,this.r.span(t));let h=this.r.span(t);if(n)return{kind:"Component",tag:i,tagHole:null,attributes:r,children:c,selfClosing:a,loc:h};let d=this.svg||D.has(i)?"svg":"html";return{kind:"Element",tag:i,namespace:d,attributes:r,children:c,selfClosing:a,rawText:o,loc:h}}parseRawText(t){let i=[],n="</"+t.toLowerCase(),r="",s=this.r.pos(),o=()=>{r&&i.push({kind:"Text",value:r,raw:!0,loc:this.r.span(s)}),r=""};for(;!this.r.eof()&&!this.startsWithCloseFor(n);){if(this.r.atHole()){o();let l=this.r.takeHole();i.push({kind:"Expression",hole:l.index,loc:l.loc}),s=this.r.pos();continue}r||(s=this.r.pos()),r+=this.r.advance()}return o(),i}startsWithCloseFor(t){let i=0;for(;i<t.length;){let n=this.r.peek(i);if(n===""||n.toLowerCase()!==t[i])return!1;i++}return!0}parseAttributes(t){let i=[];for(;!this.r.eof()&&(this.r.skipWhitespace(),!(this.r.peek()===">"||this.r.startsWith("/>")));){if(this.r.atHole()){let a=this.r.takeHole();i.push({kind:"Spread",hole:a.index,loc:a.loc});continue}if(this.r.startsWith("...")){let a=this.r.pos();if(this.r.advance(),this.r.advance(),this.r.advance(),this.r.atHole()){let c=this.r.takeHole();i.push({kind:"Spread",hole:c.index,loc:this.r.span(a)})}else this.report("invalid-binding","error","Spread `...` must be followed by ${…}",this.r.span(a));continue}let n=this.r.pos(),r=this.readName();if(!r){this.r.advance();continue}let s=this.r.span(n);this.r.skipWhitespace();let o=null;this.r.peek()==="="&&(this.r.advance(),this.r.skipWhitespace(),o=this.parseAttrValue());let l={name:r,nameLoc:s,value:o,loc:this.r.span(n),report:(a,c)=>this.report(a,"error",c,this.r.span(n))};i.push(y(l,this.directives,{component:t}))}return i}parseAttrValue(){if(this.r.atHole())return{kind:"hole",hole:this.r.takeHole().index};let t=this.r.peek();return t==='"'||t==="'"?this.classifyParts(this.readQuotedParts(t)):{kind:"static",value:this.r.readWhile(n=>!/[\s>]/.test(n))}}readQuotedParts(t){this.r.advance();let i=[],n="";for(;!this.r.eof()&&this.r.peek()!==t;){if(this.r.atHole()){n&&(i.push({text:n}),n=""),i.push({hole:this.r.takeHole().index});continue}let r=this.r.advance();if(r==="")break;n+=r}return n&&i.push({text:n}),this.r.peek()===t&&this.r.advance(),i}classifyParts(t){let i=t.filter(n=>"hole"in n);return i.length===0?{kind:"static",value:t.map(n=>"text"in n?n.text:"").join("")}:t.length===1?{kind:"hole",hole:i[0].hole}:{kind:"mixed",parts:t}}foldEachKey(t,i){let n=null,r=0,s=0,o=0,l=0;for(let d of t)d.kind==="EachDirective"?(n=d,s++):d.kind==="IfDirective"?r++:d.kind==="ElseDirective"?o++:d.kind==="RefBinding"&&l++;let a=this.r.span(i);s>1&&this.report("duplicate-directive","error","Multiple `each` directives on one element",a),r>1&&this.report("duplicate-directive","error","Multiple `if` directives on one element",a),l>1&&this.report("duplicate-directive","error","Multiple `ref` bindings on one element",a),r>0&&s>0&&this.report("unsupported-combination","error","`if` and `each` cannot both apply to one element — wrap one in another element",a),r>0&&o>0&&this.report("invalid-directive","error","`if` and `else` cannot be on the same element",a);let c=t.findIndex(d=>d.kind==="Attribute"&&d.name==="key");if(!n){c!==-1&&this.report("invalid-directive","error","`key` requires an `each` directive on the same element",a);return}if(c===-1)return;let h=t[c];h.kind==="Attribute"&&h.value&&(h.value.kind==="static"?n.key={static:h.value.value}:h.value.kind==="hole"&&(n.key={hole:h.value.hole})),t.splice(c,1)}readName(){return this.r.readWhile(t=>P.test(t))}consumeCloseTag(){this.r.advance(),this.r.advance();let t=this.readName();return this.r.skipWhitespace(),this.r.peek()===">"&&this.r.advance(),t}report(t,i,n,r){this.diagnostics.push({code:t,severity:i,message:n,loc:r})}};function G(e,t={}){return new k(e,t).parse()}export{G as parseTemplate};
+// src/ast.ts
+function setParents(root) {
+  const visit = (node, parent) => {
+    node.parent = parent;
+    const kids = childrenOf(node);
+    for (const child of kids) visit(child, node);
+  };
+  visit(root, null);
+  return root;
+}
+function childrenOf(node) {
+  switch (node.kind) {
+    case "Root":
+    case "Element":
+    case "Component":
+    case "Fragment":
+      return node.children;
+    default:
+      return [];
+  }
+}
+
+// src/reader.ts
+var Reader = class {
+  // offset within the current static piece
+  constructor(pieces) {
+    this.pieces = pieces;
+    this.pi = 0;
+    // current piece index
+    this.oi = 0;
+    this.normalize();
+  }
+  /** Skip fully-consumed static pieces so `current()` is live text or a hole. */
+  normalize() {
+    while (this.pi < this.pieces.length) {
+      const p = this.pieces[this.pi];
+      if (p.kind === "static" && this.oi >= p.text.length) {
+        this.pi++;
+        this.oi = 0;
+        continue;
+      }
+      break;
+    }
+  }
+  eof() {
+    return this.pi >= this.pieces.length;
+  }
+  /** Absolute source offset of the cursor. */
+  pos() {
+    if (this.eof()) {
+      const last = this.pieces[this.pieces.length - 1];
+      return last ? last.kind === "static" ? last.start + last.text.length : last.end : 0;
+    }
+    const p = this.pieces[this.pi];
+    return p.kind === "static" ? p.start + this.oi : p.start;
+  }
+  /** True when the cursor sits exactly on a hole marker. */
+  atHole() {
+    return !this.eof() && this.pieces[this.pi].kind === "hole";
+  }
+  /** True when advancing one char would land on a hole (e.g. the `<` in `<${Tag}`). */
+  holeFollows() {
+    if (this.eof()) return false;
+    const p = this.pieces[this.pi];
+    if (p.kind !== "static") return false;
+    if (this.oi + 1 < p.text.length) return false;
+    const next = this.pieces[this.pi + 1];
+    return next !== void 0 && next.kind === "hole";
+  }
+  /** Consume the hole at the cursor. Caller must have checked {@link atHole}. */
+  takeHole() {
+    const p = this.pieces[this.pi];
+    if (p.kind !== "hole") throw new Error("takeHole called off a hole");
+    this.pi++;
+    this.oi = 0;
+    this.normalize();
+    return { index: p.index, loc: { start: p.start, end: p.end } };
+  }
+  /** Char `k` ahead within the current static segment, or '' at a boundary/hole. */
+  peek(k = 0) {
+    if (this.eof()) return "";
+    const p = this.pieces[this.pi];
+    if (p.kind !== "static") return "";
+    return p.text[this.oi + k] ?? "";
+  }
+  /** Whether the current static segment starts with `s` at the cursor. */
+  startsWith(s) {
+    if (this.eof()) return false;
+    const p = this.pieces[this.pi];
+    if (p.kind !== "static") return false;
+    return p.text.startsWith(s, this.oi);
+  }
+  /** Advance one character inside the current static segment. */
+  advance() {
+    if (this.eof()) return "";
+    const p = this.pieces[this.pi];
+    if (p.kind !== "static") return "";
+    const ch = p.text[this.oi++] ?? "";
+    this.normalize();
+    return ch;
+  }
+  /** Advance while `pred` holds and we stay inside one static segment. */
+  readWhile(pred) {
+    let out = "";
+    while (!this.eof() && !this.atHole()) {
+      const ch = this.peek();
+      if (ch === "" || !pred(ch)) break;
+      out += ch;
+      this.oi++;
+    }
+    this.normalize();
+    return out;
+  }
+  skipWhitespace() {
+    this.readWhile((ch) => /\s/.test(ch));
+  }
+  span(start) {
+    return { start, end: this.pos() };
+  }
+};
+
+// src/directives.ts
+var EVENT_MODIFIERS = /* @__PURE__ */ new Set(["capture", "once", "passive", "prevent", "stop", "self"]);
+function requireHole(raw, what) {
+  if (raw.value && raw.value.kind === "hole") return raw.value.hole;
+  raw.report("invalid-binding", `${what} requires an expression value: ${raw.name}=\${…}`);
+  return -1;
+}
+var attribute = (raw, boolean) => ({
+  kind: "Attribute",
+  name: boolean ? raw.name.slice(1) : raw.name,
+  value: raw.value,
+  boolean,
+  loc: raw.loc
+});
+var CORE_DIRECTIVES = [
+  // Events: `@click=${h}`, `on:click=${h}` (native), `onClick=${h}`, each with
+  // optional dotted modifiers (`@click.capture.once`, `on:input.passive`).
+  {
+    id: "event",
+    match: (n) => n[0] === "@" || n.startsWith("on:") || /^on[A-Z]/.test(n),
+    build: (raw) => {
+      let syntax;
+      let rest;
+      if (raw.name[0] === "@") {
+        syntax = "at";
+        rest = raw.name.slice(1);
+      } else if (raw.name.startsWith("on:")) {
+        syntax = "colon";
+        rest = raw.name.slice(3);
+      } else {
+        syntax = "on";
+        rest = raw.name.slice(2);
+      }
+      const [raw_name, ...modifiers] = rest.split(".");
+      const name = raw_name.toLowerCase();
+      for (const m of modifiers) {
+        if (!EVENT_MODIFIERS.has(m)) {
+          raw.report("invalid-directive", `Unknown event modifier ".${m}" — expected one of ${[...EVENT_MODIFIERS].join(", ")}`);
+        }
+      }
+      return {
+        kind: "EventBinding",
+        name,
+        syntax,
+        modifiers,
+        hole: requireHole(raw, "event binding"),
+        loc: raw.loc
+      };
+    }
+  },
+  // Two-way binding: `bind:value=${signal}`.
+  {
+    id: "bind",
+    elementOnly: true,
+    match: (n) => n.startsWith("bind:"),
+    build: (raw) => ({
+      kind: "BindDirective",
+      name: raw.name.slice("bind:".length),
+      hole: requireHole(raw, "two-way binding"),
+      loc: raw.loc
+    })
+  },
+  // Dynamic class toggle: `class:active=${flag}`.
+  {
+    id: "class-directive",
+    elementOnly: true,
+    match: (n) => n.startsWith("class:"),
+    build: (raw) => ({
+      kind: "ClassDirective",
+      name: raw.name.slice("class:".length),
+      hole: requireHole(raw, "class directive"),
+      loc: raw.loc
+    })
+  },
+  // Dynamic style: `style:color=${c}`.
+  {
+    id: "style-directive",
+    elementOnly: true,
+    match: (n) => n.startsWith("style:"),
+    build: (raw) => ({
+      kind: "StyleDirective",
+      name: raw.name.slice("style:".length),
+      hole: requireHole(raw, "style directive"),
+      loc: raw.loc
+    })
+  },
+  // Load strategy: `load:visible[="200px"]`. Components only, an intrinsic element
+  // has no module to defer.
+  {
+    id: "load",
+    match: (n) => n.startsWith("load:"),
+    build: (raw) => ({
+      kind: "LoadDirective",
+      strategy: raw.name.slice("load:".length),
+      modifier: raw.value && raw.value.kind === "static" ? raw.value.value : null,
+      loc: raw.loc
+    })
+  },
+  // Custom directive: `use=${d}` or `use:tooltip[=${opts}]`.
+  {
+    id: "use",
+    match: (n) => n === "use" || n.startsWith("use:"),
+    build: (raw) => {
+      const named = raw.name.startsWith("use:");
+      return {
+        kind: "UseDirective",
+        name: named ? raw.name.slice("use:".length) : null,
+        hole: raw.value && raw.value.kind === "hole" ? raw.value.hole : null,
+        loc: raw.loc
+      };
+    }
+  },
+  // Conditional rendering: `if=${cond}`.
+  {
+    id: "if",
+    elementOnly: true,
+    match: (n) => n === "if",
+    build: (raw) => ({
+      kind: "IfDirective",
+      hole: requireHole(raw, "if directive"),
+      loc: raw.loc
+    })
+  },
+  // Loop rendering: `each=${items}` (a sibling `key` folds in at parse time).
+  {
+    id: "each",
+    elementOnly: true,
+    match: (n) => n === "each",
+    build: (raw) => ({
+      kind: "EachDirective",
+      hole: requireHole(raw, "each directive"),
+      key: null,
+      loc: raw.loc
+    })
+  },
+  // `else` (valueless).
+  {
+    id: "else",
+    elementOnly: true,
+    match: (n) => n === "else",
+    build: (raw) => {
+      if (raw.value !== null) raw.report("invalid-directive", "`else` takes no value");
+      return { kind: "ElseDirective", loc: raw.loc };
+    }
+  },
+  // Ref binding: `ref=${el}`.
+  {
+    id: "ref",
+    match: (n) => n === "ref",
+    build: (raw) => ({
+      kind: "RefBinding",
+      hole: requireHole(raw, "ref binding"),
+      loc: raw.loc
+    })
+  },
+  // Property binding: `.currentTime=${t}`.
+  {
+    id: "property",
+    match: (n) => n[0] === ".",
+    build: (raw) => ({
+      kind: "PropertyBinding",
+      name: raw.name.slice(1),
+      hole: requireHole(raw, "property binding"),
+      loc: raw.loc
+    })
+  },
+  // Boolean attribute (lit `?disabled`): a plain attribute flagged boolean.
+  {
+    id: "boolean",
+    match: (n) => n[0] === "?",
+    build: (raw) => attribute(raw, true)
+  }
+];
+function resolveAttribute(raw, directives = CORE_DIRECTIVES, ctx = { component: false }) {
+  for (const d of directives) {
+    if (d.elementOnly && ctx.component) continue;
+    if (d.match(raw.name)) return d.build(raw);
+  }
+  return attribute(raw, false);
+}
+
+// src/tags.ts
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polygon",
+  "polyline",
+  "ellipse",
+  "g",
+  "defs",
+  "clipPath",
+  "text"
+]);
+var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function isComponentTag(tag) {
+  return tag.length > 0 && (tag[0] !== tag[0].toLowerCase() || tag.includes("."));
+}
+
+// src/a11y.ts
+var INTERACTIVE = /* @__PURE__ */ new Set([
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "details",
+  "option",
+  "label"
+]);
+var KEY_EVENTS = /* @__PURE__ */ new Set(["keydown", "keyup", "keypress"]);
+function attributeNamed(node, name) {
+  return node.attributes.find((a) => "name" in a && a.name === name);
+}
+function hasSpread(node) {
+  return node.attributes.some((a) => a.kind === "Spread");
+}
+function staticValue(node, name) {
+  const attribute2 = attributeNamed(node, name);
+  if (!attribute2 || attribute2.kind !== "Attribute" || !attribute2.value) return void 0;
+  const value = attribute2.value;
+  return value.kind === "static" ? value.value : void 0;
+}
+function isPresentational(node) {
+  const role = staticValue(node, "role");
+  if (role === "presentation" || role === "none") return true;
+  return staticValue(node, "aria-hidden") === "true";
+}
+function hasEvent(node, predicate) {
+  return node.attributes.some((a) => a.kind === "EventBinding" && predicate(a.name));
+}
+function checkAccessibility(root) {
+  const out = [];
+  const report = (node, code, message) => {
+    out.push({ code, message, severity: "warning", loc: node.loc });
+  };
+  const visit = (nodes) => {
+    for (const node of nodes) {
+      if (node.kind === "Element") check(node, report);
+      const children = "children" in node ? node.children : void 0;
+      if (children) visit(children);
+    }
+  };
+  visit(root.children);
+  return out;
+}
+function check(node, report) {
+  if (hasSpread(node)) return;
+  const tag = node.tag.toLowerCase();
+  if (tag === "img" && !attributeNamed(node, "alt") && !isPresentational(node)) {
+    report(node, "a11y-img-alt", 'An `img` needs an `alt`. Use `alt=""` when the image is decorative.');
+  }
+  if (tag === "a" && !attributeNamed(node, "href") && !attributeNamed(node, "role")) {
+    report(node, "a11y-anchor-href", "An `a` without `href` is not a link. Use a `button` for an action.");
+  }
+  if (tag === "iframe" && !attributeNamed(node, "title")) {
+    report(node, "a11y-iframe-title", "An `iframe` needs a `title` describing its content.");
+  }
+  const tabindex = staticValue(node, "tabindex") ?? staticValue(node, "tabIndex");
+  if (tabindex !== void 0 && Number(tabindex) > 0) {
+    report(
+      node,
+      "a11y-positive-tabindex",
+      "A positive `tabindex` reorders tab navigation for the entire page. Use `0`, or restructure the markup."
+    );
+  }
+  if (!INTERACTIVE.has(tag) && hasEvent(node, (name) => name === "click") && !attributeNamed(node, "role") && !hasEvent(node, (name) => KEY_EVENTS.has(name))) {
+    report(
+      node,
+      "a11y-click-without-keyboard",
+      `A click handler on \`${tag}\` is unreachable by keyboard. Use a \`button\`, or add a \`role\` and a key handler.`
+    );
+  }
+}
+
+// src/parser.ts
+var NAME_CHAR = /[A-Za-z0-9\-_:@.?]/;
+var Parser = class {
+  constructor(pieces, opts) {
+    this.diagnostics = [];
+    this.r = new Reader(pieces);
+    this.svg = opts.svg ?? false;
+    this.directives = opts.directives ?? CORE_DIRECTIVES;
+    this.accessibility = opts.accessibility ?? true;
+  }
+  parse() {
+    const start = this.r.pos();
+    const children = [];
+    while (!this.r.eof()) {
+      children.push(...this.parseChildren());
+      if (this.r.eof()) break;
+      const s = this.r.pos();
+      this.consumeCloseTag();
+      this.report("stray-close-tag", "error", "Close tag without a matching open tag", this.r.span(s));
+    }
+    const root = { kind: "Root", children, loc: this.r.span(start) };
+    setParents(root);
+    this.validateTree(root);
+    if (this.accessibility) {
+      this.diagnostics.push(...checkAccessibility(root));
+    }
+    return { root, diagnostics: this.diagnostics };
+  }
+  /** Cross-node validation that needs the built tree (sibling relationships). */
+  validateTree(root) {
+    const visit = (nodes) => {
+      let prevBranch = null;
+      for (const node of nodes) {
+        if (node.kind === "Text" && /^\s*$/.test(node.value)) continue;
+        if (node.kind === "Element" || node.kind === "Component") {
+          const hasElse = node.attributes.some((a) => a.kind === "ElseDirective");
+          if (hasElse) {
+            const prevHasIf = prevBranch != null && (prevBranch.kind === "Element" || prevBranch.kind === "Component") && prevBranch.attributes.some((a) => a.kind === "IfDirective");
+            if (!prevHasIf) {
+              this.report("else-without-if", "error", "`else` must immediately follow an element with `if`", node.loc);
+            }
+          }
+          prevBranch = node;
+        } else {
+          prevBranch = null;
+        }
+        if ("children" in node && node.children) visit(node.children);
+      }
+    };
+    visit(root.children);
+  }
+  // --- content ------------------------------------------------------------
+  /** Parse sibling nodes until EOF or a `</` close the caller must consume. */
+  parseChildren() {
+    const out = [];
+    while (!this.r.eof()) {
+      if (this.r.startsWith("</")) break;
+      if (this.r.startsWith("<!--")) {
+        out.push(this.parseComment());
+        continue;
+      }
+      if (this.isFragmentStart()) {
+        out.push(this.parseFragment());
+        continue;
+      }
+      if (this.isDynamicTagStart()) {
+        out.push(this.parseDynamicComponent());
+        continue;
+      }
+      if (this.isTagStart()) {
+        out.push(this.parseElement());
+        continue;
+      }
+      if (this.r.atHole()) {
+        const h = this.r.takeHole();
+        const node = { kind: "Expression", hole: h.index, loc: h.loc };
+        out.push(node);
+        continue;
+      }
+      const text = this.readText();
+      if (text) out.push(text);
+    }
+    return out;
+  }
+  isTagStart() {
+    return this.r.peek() === "<" && /[A-Za-z]/.test(this.r.peek(1));
+  }
+  isFragmentStart() {
+    return this.r.peek() === "<" && this.r.peek(1) === ">";
+  }
+  /** `<${Comp} …>`: a component whose tag is an interpolated expression. */
+  isDynamicTagStart() {
+    return this.r.peek() === "<" && this.r.holeFollows();
+  }
+  /** Parse `<${Comp} …/>` or `<${Comp} …>…</${Comp}>` into a dynamic ComponentNode. */
+  parseDynamicComponent() {
+    const start = this.r.pos();
+    this.r.advance();
+    const tagHole = this.r.takeHole().index;
+    const attributes = this.parseAttributes(true);
+    this.r.skipWhitespace();
+    let selfClosing = false;
+    let children = [];
+    if (this.r.startsWith("/>")) {
+      this.r.advance();
+      this.r.advance();
+      selfClosing = true;
+    } else {
+      if (this.r.peek() === ">") this.r.advance();
+      children = this.parseChildren();
+      if (this.r.startsWith("</")) {
+        this.r.advance();
+        this.r.advance();
+        if (this.r.atHole()) this.r.takeHole();
+        else this.readName();
+        this.r.skipWhitespace();
+        if (this.r.peek() === ">") this.r.advance();
+      } else {
+        this.report("unclosed-tag", "error", "Unclosed dynamic component", this.r.span(start));
+      }
+    }
+    return { kind: "Component", tag: "", tagHole, attributes, children, selfClosing, loc: this.r.span(start) };
+  }
+  /** A raw text run (preserved verbatim; whitespace is normalized at lowering). */
+  readText() {
+    const start = this.r.pos();
+    let value = "";
+    while (!this.r.eof() && !this.r.atHole()) {
+      if (this.r.startsWith("</") || this.r.startsWith("<!--") || this.isTagStart() || this.isFragmentStart() || this.isDynamicTagStart()) break;
+      value += this.r.advance();
+    }
+    if (!value) return null;
+    return { kind: "Text", value, raw: false, loc: this.r.span(start) };
+  }
+  parseComment() {
+    const start = this.r.pos();
+    this.r.advance();
+    this.r.advance();
+    this.r.advance();
+    this.r.advance();
+    let value = "";
+    while (!this.r.eof() && !this.r.startsWith("-->")) {
+      if (this.r.atHole()) {
+        this.r.takeHole();
+        value += "\0";
+        continue;
+      }
+      value += this.r.advance();
+    }
+    if (this.r.startsWith("-->")) {
+      this.r.advance();
+      this.r.advance();
+      this.r.advance();
+    } else {
+      this.report("unclosed-comment", "warning", "Unterminated comment", this.r.span(start));
+    }
+    return { kind: "Comment", value, loc: this.r.span(start) };
+  }
+  parseFragment() {
+    const start = this.r.pos();
+    this.r.advance();
+    this.r.advance();
+    const children = this.parseChildren();
+    if (this.r.startsWith("</")) {
+      const name = this.consumeCloseTag();
+      if (name) this.report("mismatched-close-tag", "error", `Expected </> to close fragment, got </${name}>`, this.r.span(start));
+    } else {
+      this.report("unclosed-tag", "error", "Unterminated fragment", this.r.span(start));
+    }
+    return { kind: "Fragment", children, loc: this.r.span(start) };
+  }
+  parseElement() {
+    const start = this.r.pos();
+    this.r.advance();
+    const tag = this.readName();
+    const component = isComponentTag(tag);
+    const attributes = this.parseAttributes(component);
+    this.foldEachKey(attributes, start);
+    this.r.skipWhitespace();
+    const lower = tag.toLowerCase();
+    const rawText = !component && RAW_TEXT_ELEMENTS.has(lower);
+    const isVoid = !component && VOID_ELEMENTS.has(lower);
+    let selfClosing = false;
+    let children = [];
+    if (this.r.startsWith("/>")) {
+      this.r.advance();
+      this.r.advance();
+      selfClosing = true;
+    } else {
+      if (this.r.peek() === ">") this.r.advance();
+      if (!isVoid) {
+        children = rawText ? this.parseRawText(tag) : this.parseChildren();
+        if (this.r.startsWith("</")) {
+          const name = this.consumeCloseTag();
+          if (name && name !== tag) {
+            this.report("mismatched-close-tag", "error", `Expected </${tag}>, got </${name}>`, this.r.span(start));
+          }
+        } else {
+          this.report("unclosed-tag", "error", `Unclosed <${tag}>`, this.r.span(start));
+        }
+      }
+    }
+    const loc = this.r.span(start);
+    if (component) {
+      return { kind: "Component", tag, tagHole: null, attributes, children, selfClosing, loc };
+    }
+    const namespace = this.svg || SVG_TAGS.has(tag) ? "svg" : "html";
+    return { kind: "Element", tag, namespace, attributes, children, selfClosing, rawText, loc };
+  }
+  /** Read a raw-text element body: only holes break the text run. */
+  parseRawText(tag) {
+    const out = [];
+    const close = "</" + tag.toLowerCase();
+    let text = "";
+    let start = this.r.pos();
+    const flush = () => {
+      if (text) out.push({ kind: "Text", value: text, raw: true, loc: this.r.span(start) });
+      text = "";
+    };
+    while (!this.r.eof()) {
+      if (this.startsWithCloseFor(close)) break;
+      if (this.r.atHole()) {
+        flush();
+        const h = this.r.takeHole();
+        out.push({ kind: "Expression", hole: h.index, loc: h.loc });
+        start = this.r.pos();
+        continue;
+      }
+      if (!text) start = this.r.pos();
+      text += this.r.advance();
+    }
+    flush();
+    return out;
+  }
+  startsWithCloseFor(close) {
+    let i = 0;
+    while (i < close.length) {
+      const ch = this.r.peek(i);
+      if (ch === "" || ch.toLowerCase() !== close[i]) return false;
+      i++;
+    }
+    return true;
+  }
+  // --- attributes ---------------------------------------------------------
+  parseAttributes(component) {
+    const props = [];
+    while (!this.r.eof()) {
+      this.r.skipWhitespace();
+      if (this.r.peek() === ">" || this.r.startsWith("/>")) break;
+      if (this.r.atHole()) {
+        const h = this.r.takeHole();
+        props.push({ kind: "Spread", hole: h.index, loc: h.loc });
+        continue;
+      }
+      if (this.r.startsWith("...")) {
+        const s = this.r.pos();
+        this.r.advance();
+        this.r.advance();
+        this.r.advance();
+        if (this.r.atHole()) {
+          const h = this.r.takeHole();
+          props.push({ kind: "Spread", hole: h.index, loc: this.r.span(s) });
+        } else {
+          this.report("invalid-binding", "error", "Spread `...` must be followed by ${…}", this.r.span(s));
+        }
+        continue;
+      }
+      const nameStart = this.r.pos();
+      const name = this.readName();
+      if (!name) {
+        this.r.advance();
+        continue;
+      }
+      const nameLoc = this.r.span(nameStart);
+      this.r.skipWhitespace();
+      let value = null;
+      if (this.r.peek() === "=") {
+        this.r.advance();
+        this.r.skipWhitespace();
+        value = this.parseAttrValue();
+      }
+      const raw = {
+        name,
+        nameLoc,
+        value,
+        loc: this.r.span(nameStart),
+        report: (code, message) => this.report(code, "error", message, this.r.span(nameStart))
+      };
+      props.push(resolveAttribute(raw, this.directives, { component }));
+    }
+    return props;
+  }
+  parseAttrValue() {
+    if (this.r.atHole()) {
+      const h = this.r.takeHole();
+      return { kind: "hole", hole: h.index };
+    }
+    const quote = this.r.peek();
+    if (quote === '"' || quote === "'") {
+      return this.classifyParts(this.readQuotedParts(quote));
+    }
+    const value = this.r.readWhile((ch) => !/[\s>]/.test(ch));
+    return { kind: "static", value };
+  }
+  readQuotedParts(quote) {
+    this.r.advance();
+    const parts = [];
+    let text = "";
+    while (!this.r.eof() && this.r.peek() !== quote) {
+      if (this.r.atHole()) {
+        if (text) {
+          parts.push({ text });
+          text = "";
+        }
+        parts.push({ hole: this.r.takeHole().index });
+        continue;
+      }
+      const ch = this.r.advance();
+      if (ch === "") break;
+      text += ch;
+    }
+    if (text) parts.push({ text });
+    if (this.r.peek() === quote) this.r.advance();
+    return parts;
+  }
+  classifyParts(parts) {
+    const holes = parts.filter((p) => "hole" in p);
+    if (holes.length === 0) {
+      return { kind: "static", value: parts.map((p) => "text" in p ? p.text : "").join("") };
+    }
+    if (parts.length === 1) return { kind: "hole", hole: holes[0].hole };
+    return { kind: "mixed", parts };
+  }
+  /** Fold `key` into `each`, and validate an element's directive combination. */
+  foldEachKey(attrs, elLoc) {
+    let each = null;
+    let ifCount = 0;
+    let eachCount = 0;
+    let elseCount = 0;
+    let refCount = 0;
+    for (const a of attrs) {
+      if (a.kind === "EachDirective") {
+        each = a;
+        eachCount++;
+      } else if (a.kind === "IfDirective") ifCount++;
+      else if (a.kind === "ElseDirective") elseCount++;
+      else if (a.kind === "RefBinding") refCount++;
+    }
+    const span = this.r.span(elLoc);
+    if (eachCount > 1) this.report("duplicate-directive", "error", "Multiple `each` directives on one element", span);
+    if (ifCount > 1) this.report("duplicate-directive", "error", "Multiple `if` directives on one element", span);
+    if (refCount > 1) this.report("duplicate-directive", "error", "Multiple `ref` bindings on one element", span);
+    if (ifCount > 0 && eachCount > 0) {
+      this.report("unsupported-combination", "error", "`if` and `each` cannot both apply to one element — wrap one in another element", span);
+    }
+    if (ifCount > 0 && elseCount > 0) {
+      this.report("invalid-directive", "error", "`if` and `else` cannot be on the same element", span);
+    }
+    const keyIdx = attrs.findIndex((a) => a.kind === "Attribute" && a.name === "key");
+    if (!each) {
+      if (keyIdx !== -1) this.report("invalid-directive", "error", "`key` requires an `each` directive on the same element", span);
+      return;
+    }
+    if (keyIdx === -1) return;
+    const key = attrs[keyIdx];
+    if (key.kind === "Attribute" && key.value) {
+      if (key.value.kind === "static") each.key = { static: key.value.value };
+      else if (key.value.kind === "hole") each.key = { hole: key.value.hole };
+    }
+    attrs.splice(keyIdx, 1);
+  }
+  // --- low level ----------------------------------------------------------
+  readName() {
+    return this.r.readWhile((ch) => NAME_CHAR.test(ch));
+  }
+  /** Consume `</name>` (or `</>`), returning the close-tag name (may be ''). */
+  consumeCloseTag() {
+    this.r.advance();
+    this.r.advance();
+    const name = this.readName();
+    this.r.skipWhitespace();
+    if (this.r.peek() === ">") this.r.advance();
+    return name;
+  }
+  report(code, severity, message, loc) {
+    this.diagnostics.push({ code, severity, message, loc });
+  }
+};
+function parseTemplate(pieces, opts = {}) {
+  return new Parser(pieces, opts).parse();
+}
+export {
+  parseTemplate
+};