binja 0.5.1 → 0.5.3

package/dist/index.js

@@ -153,6 +153,159 @@ function tokenizeNative(source) {
   return tokens;
 }
 
+// src/errors/index.ts
+var colors = {
+  red: "\x1B[31m",
+  yellow: "\x1B[33m",
+  cyan: "\x1B[36m",
+  gray: "\x1B[90m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  reset: "\x1B[0m"
+};
+var useColors = process.stdout?.isTTY !== false;
+function c(color, text) {
+  return useColors ? `${colors[color]}${text}${colors.reset}` : text;
+}
+
+class TemplateError extends Error {
+  line;
+  column;
+  source;
+  templateName;
+  suggestion;
+  availableOptions;
+  constructor(message, options) {
+    const formatted = formatError("TemplateError", message, options);
+    super(formatted);
+    this.name = "TemplateError";
+    this.line = options.line;
+    this.column = options.column;
+    this.source = options.source;
+    this.templateName = options.templateName;
+    this.suggestion = options.suggestion;
+    this.availableOptions = options.availableOptions;
+  }
+}
+
+class TemplateSyntaxError extends Error {
+  line;
+  column;
+  source;
+  templateName;
+  suggestion;
+  constructor(message, options) {
+    const formatted = formatError("TemplateSyntaxError", message, options);
+    super(formatted);
+    this.name = "TemplateSyntaxError";
+    this.line = options.line;
+    this.column = options.column;
+    this.source = options.source;
+    this.templateName = options.templateName;
+    this.suggestion = options.suggestion;
+  }
+}
+
+class TemplateRuntimeError extends Error {
+  line;
+  column;
+  source;
+  templateName;
+  suggestion;
+  availableOptions;
+  constructor(message, options) {
+    const formatted = formatError("TemplateRuntimeError", message, options);
+    super(formatted);
+    this.name = "TemplateRuntimeError";
+    this.line = options.line;
+    this.column = options.column;
+    this.source = options.source;
+    this.templateName = options.templateName;
+    this.suggestion = options.suggestion;
+    this.availableOptions = options.availableOptions;
+  }
+}
+function formatError(type, message, options) {
+  const parts = [];
+  const location = options.templateName ? `${options.templateName}:${options.line}:${options.column}` : `line ${options.line}, column ${options.column}`;
+  parts.push(`${c("red", c("bold", type))}: ${message} at ${c("cyan", location)}`);
+  if (options.source) {
+    parts.push("");
+    parts.push(generateSnippet(options.source, options.line, options.column));
+  }
+  if (options.suggestion) {
+    parts.push("");
+    parts.push(`${c("yellow", "Did you mean")}: ${c("cyan", options.suggestion)}?`);
+  }
+  if (options.availableOptions && options.availableOptions.length > 0) {
+    parts.push("");
+    const truncated = options.availableOptions.slice(0, 8);
+    const more = options.availableOptions.length > 8 ? ` ${c("gray", `... and ${options.availableOptions.length - 8} more`)}` : "";
+    parts.push(`${c("gray", "Available")}: ${truncated.join(", ")}${more}`);
+  }
+  return parts.join(`
+`);
+}
+function generateSnippet(source, errorLine, errorColumn) {
+  const lines = source.split(`
+`);
+  const parts = [];
+  const startLine = Math.max(1, errorLine - 2);
+  const endLine = Math.min(lines.length, errorLine + 1);
+  const gutterWidth = String(endLine).length;
+  for (let i = startLine;i <= endLine; i++) {
+    const lineContent = lines[i - 1] || "";
+    const lineNum = String(i).padStart(gutterWidth, " ");
+    const isErrorLine = i === errorLine;
+    if (isErrorLine) {
+      parts.push(`${c("red", " \u2192")} ${c("gray", lineNum)} ${c("dim", "\u2502")} ${lineContent}`);
+      const caretPadding = " ".repeat(gutterWidth + 4 + Math.max(0, errorColumn - 1));
+      const caret = c("red", "^");
+      parts.push(`${caretPadding}${caret}`);
+    } else {
+      parts.push(`  ${c("gray", lineNum)} ${c("dim", "\u2502")} ${c("gray", lineContent)}`);
+    }
+  }
+  return parts.join(`
+`);
+}
+function findSimilar(input, candidates, maxDistance = 3) {
+  let bestMatch = null;
+  let bestDistance = maxDistance + 1;
+  const inputLower = input.toLowerCase();
+  for (const candidate of candidates) {
+    const distance = levenshteinDistance(inputLower, candidate.toLowerCase());
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestMatch = candidate;
+    }
+  }
+  return bestDistance <= maxDistance ? bestMatch : null;
+}
+function levenshteinDistance(a, b) {
+  if (a.length === 0)
+    return b.length;
+  if (b.length === 0)
+    return a.length;
+  const matrix = [];
+  for (let i = 0;i <= b.length; i++) {
+    matrix[i] = [i];
+  }
+  for (let j = 0;j <= a.length; j++) {
+    matrix[0][j] = j;
+  }
+  for (let i = 1;i <= b.length; i++) {
+    for (let j = 1;j <= a.length; j++) {
+      if (b[i - 1] === a[j - 1]) {
+        matrix[i][j] = matrix[i - 1][j - 1];
+      } else {
+        matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1);
+      }
+    }
+  }
+  return matrix[b.length][a.length];
+}
+
 // src/lexer/index.ts
 class Lexer {
   state;
@@ -240,7 +393,11 @@ class Lexer {
     if (this.peek() === "-")
       this.advance();
     if (!this.match(this.blockEnd)) {
-      throw new Error(`Expected ${this.blockEnd} after ${tagName} at line ${this.state.line}`);
+      throw new TemplateSyntaxError(`Expected '${this.blockEnd}' after '${tagName}'`, {
+        line: this.state.line,
+        column: this.state.column,
+        source: this.state.source
+      });
     }
     const endTag = `end${tagName}`;
     const contentStart = this.state.pos;
@@ -270,7 +427,11 @@ class Lexer {
           if (this.peek() === "-")
             this.advance();
           if (!this.match(this.blockEnd)) {
-            throw new Error(`Expected ${this.blockEnd} after ${endTag} at line ${this.state.line}`);
+            throw new TemplateSyntaxError(`Expected '${this.blockEnd}' after '${endTag}'`, {
+              line: this.state.line,
+              column: this.state.column,
+              source: this.state.source
+            });
           }
           return;
         }
@@ -285,7 +446,12 @@ class Lexer {
       }
       this.advance();
     }
-    throw new Error(`Unclosed ${tagName} block starting at line ${startLine}`);
+    throw new TemplateSyntaxError(`Unclosed '${tagName}' block`, {
+      line: startLine,
+      column: startColumn,
+      source: this.state.source,
+      suggestion: `Add {% end${tagName} %} to close the block`
+    });
   }
   scanText() {
     const start = this.state.pos;
@@ -325,22 +491,27 @@ class Lexer {
       }
       this.scanExpressionToken();
     }
-    throw new Error(`Unclosed template tag at line ${this.state.line}`);
+    throw new TemplateSyntaxError(`Unclosed template tag`, {
+      line: this.state.line,
+      column: this.state.column,
+      source: this.state.source,
+      suggestion: `Add closing delimiter '${endDelimiter}'`
+    });
   }
   scanExpressionToken() {
     this.skipWhitespace();
     if (this.isAtEnd())
       return;
-    const c = this.peek();
-    if (c === '"' || c === "'") {
-      this.scanString(c);
+    const c2 = this.peek();
+    if (c2 === '"' || c2 === "'") {
+      this.scanString(c2);
       return;
     }
-    if (this.isDigit(c)) {
+    if (this.isDigit(c2)) {
       this.scanNumber();
       return;
     }
-    if (this.isAlpha(c) || c === "_") {
+    if (this.isAlpha(c2) || c2 === "_") {
       this.scanIdentifier();
       return;
     }
@@ -361,7 +532,12 @@ class Lexer {
       this.advance();
     }
     if (this.isAtEnd()) {
-      throw new Error(`Unterminated string at line ${this.state.line}`);
+      throw new TemplateSyntaxError(`Unterminated string literal`, {
+        line: this.state.line,
+        column: this.state.column,
+        source: this.state.source,
+        suggestion: `Add closing quote '${quote}'`
+      });
     }
     const value = this.state.source.slice(start, this.state.pos);
     this.advance();
@@ -391,55 +567,55 @@ class Lexer {
     this.addToken(type, value);
   }
   scanOperator() {
-    const c = this.advance();
-    switch (c) {
+    const c2 = this.advance();
+    switch (c2) {
       case ".":
-        this.addToken("DOT" /* DOT */, c);
+        this.addToken("DOT" /* DOT */, c2);
         break;
       case ",":
-        this.addToken("COMMA" /* COMMA */, c);
+        this.addToken("COMMA" /* COMMA */, c2);
         break;
       case ":":
-        this.addToken("COLON" /* COLON */, c);
+        this.addToken("COLON" /* COLON */, c2);
         break;
       case "|":
-        this.addToken("PIPE" /* PIPE */, c);
+        this.addToken("PIPE" /* PIPE */, c2);
         break;
       case "(":
-        this.addToken("LPAREN" /* LPAREN */, c);
+        this.addToken("LPAREN" /* LPAREN */, c2);
         break;
       case ")":
-        this.addToken("RPAREN" /* RPAREN */, c);
+        this.addToken("RPAREN" /* RPAREN */, c2);
         break;
       case "[":
-        this.addToken("LBRACKET" /* LBRACKET */, c);
+        this.addToken("LBRACKET" /* LBRACKET */, c2);
         break;
       case "]":
-        this.addToken("RBRACKET" /* RBRACKET */, c);
+        this.addToken("RBRACKET" /* RBRACKET */, c2);
         break;
       case "{":
-        this.addToken("LBRACE" /* LBRACE */, c);
+        this.addToken("LBRACE" /* LBRACE */, c2);
         break;
       case "}":
-        this.addToken("RBRACE" /* RBRACE */, c);
+        this.addToken("RBRACE" /* RBRACE */, c2);
         break;
       case "+":
-        this.addToken("ADD" /* ADD */, c);
+        this.addToken("ADD" /* ADD */, c2);
         break;
       case "-":
-        this.addToken("SUB" /* SUB */, c);
+        this.addToken("SUB" /* SUB */, c2);
         break;
       case "*":
-        this.addToken("MUL" /* MUL */, c);
+        this.addToken("MUL" /* MUL */, c2);
         break;
       case "/":
-        this.addToken("DIV" /* DIV */, c);
+        this.addToken("DIV" /* DIV */, c2);
         break;
       case "%":
-        this.addToken("MOD" /* MOD */, c);
+        this.addToken("MOD" /* MOD */, c2);
         break;
       case "~":
-        this.addToken("TILDE" /* TILDE */, c);
+        this.addToken("TILDE" /* TILDE */, c2);
         break;
       case "=":
         if (this.match("=")) {
@@ -452,7 +628,12 @@ class Lexer {
         if (this.match("=")) {
           this.addToken("NE" /* NE */, "!=");
         } else {
-          throw new Error(`Unexpected character '!' at line ${this.state.line}`);
+          throw new TemplateSyntaxError(`Unexpected character '!'`, {
+            line: this.state.line,
+            column: this.state.column - 1,
+            source: this.state.source,
+            suggestion: `Use '!=' for not-equal comparison or 'not' for negation`
+          });
         }
         break;
       case "<":
@@ -470,8 +651,12 @@ class Lexer {
         }
         break;
       default:
-        if (!this.isWhitespace(c)) {
-          throw new Error(`Unexpected character '${c}' at line ${this.state.line}`);
+        if (!this.isWhitespace(c2)) {
+          throw new TemplateSyntaxError(`Unexpected character '${c2}'`, {
+            line: this.state.line,
+            column: this.state.column - 1,
+            source: this.state.source
+          });
         }
     }
   }
@@ -502,10 +687,10 @@ class Lexer {
     return this.state.source[this.state.pos + 1];
   }
   advance() {
-    const c = this.state.source[this.state.pos];
+    const c2 = this.state.source[this.state.pos];
     this.state.pos++;
     this.state.column++;
-    return c;
+    return c2;
   }
   match(expected, offset = 0) {
     const source = this.state.source;
@@ -545,20 +730,20 @@ class Lexer {
       this.advance();
     }
   }
-  isWhitespace(c) {
-    return c === " " || c === "\t" || c === `
-` || c === "\r";
+  isWhitespace(c2) {
+    return c2 === " " || c2 === "\t" || c2 === `
+` || c2 === "\r";
   }
-  isDigit(c) {
-    const code = c.charCodeAt(0);
+  isDigit(c2) {
+    const code = c2.charCodeAt(0);
     return code >= 48 && code <= 57;
   }
-  isAlpha(c) {
-    const code = c.charCodeAt(0);
+  isAlpha(c2) {
+    const code = c2.charCodeAt(0);
     return code >= 97 && code <= 122 || code >= 65 && code <= 90;
   }
-  isAlphaNumeric(c) {
-    const code = c.charCodeAt(0);
+  isAlphaNumeric(c2) {
+    const code = c2.charCodeAt(0);
     return code >= 48 && code <= 57 || code >= 97 && code <= 122 || code >= 65 && code <= 90;
   }
   addToken(type, value) {
@@ -575,8 +760,10 @@ class Lexer {
 class Parser {
   tokens;
   current = 0;
-  constructor(tokens) {
+  source;
+  constructor(tokens, source) {
     this.tokens = tokens;
+    this.source = source;
   }
   parse() {
     const body = [];
@@ -1668,7 +1855,11 @@ class Parser {
   }
   error(message) {
     const token = this.peek();
-    return new Error(`Parse error at line ${token.line}, column ${token.column}: ${message}`);
+    return new TemplateSyntaxError(message, {
+      line: token.line,
+      column: token.column,
+      source: this.source
+    });
   }
 }
 
@@ -1830,7 +2021,7 @@ var capfirst = (value) => {
   const str = String(value);
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
-var title = (value) => String(value).replace(TITLE_REGEX, (c) => c.toUpperCase());
+var title = (value) => String(value).replace(TITLE_REGEX, (c2) => c2.toUpperCase());
 var trim = (value) => String(value).trim();
 var striptags = (value) => String(value).replace(STRIPTAGS_REGEX, "");
 var escape = (value) => {
@@ -1983,9 +2174,18 @@ var sort = (value, reverse2 = false) => {
   return reverse2 ? sorted.reverse() : sorted;
 };
 var unique = (value) => {
-  if (Array.isArray(value))
-    return [...new Set(value)];
-  return value;
+  if (!Array.isArray(value))
+    return value;
+  const seen = new Set;
+  const result = [];
+  for (let i = 0;i < value.length; i++) {
+    const v = value[i];
+    if (!seen.has(v)) {
+      seen.add(v);
+      result.push(v);
+    }
+  }
+  return result;
 };
 var make_list = (value) => {
   if (Array.isArray(value))
@@ -2358,7 +2558,12 @@ var max = (value, attribute, defaultValue) => {
     }
     return maxItem;
   }
-  return Math.max(...value);
+  let maxVal = value[0];
+  for (let i = 1;i < value.length; i++) {
+    if (value[i] > maxVal)
+      maxVal = value[i];
+  }
+  return maxVal;
 };
 var min = (value, attribute, defaultValue) => {
   if (!Array.isArray(value) || value.length === 0)
@@ -2372,7 +2577,12 @@ var min = (value, attribute, defaultValue) => {
     }
     return minItem;
   }
-  return Math.min(...value);
+  let minVal = value[0];
+  for (let i = 1;i < value.length; i++) {
+    if (value[i] < minVal)
+      minVal = value[i];
+  }
+  return minVal;
 };
 var sum = (value, attribute, start = 0) => {
   if (!Array.isArray(value))
@@ -2662,7 +2872,7 @@ var xmlattr = (value, autospace = true) => {
     if (val === true) {
       attrs.push(key);
     } else if (val !== false && val != null) {
-      const escaped = String(val).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      const escaped = Bun.escapeHTML(String(val));
       attrs.push(`${key}="${escaped}"`);
     }
   }
@@ -2924,6 +3134,7 @@ class Runtime {
   tests;
   blocks = new Map;
   parentTemplate = null;
+  source;
   constructor(options = {}) {
     this.options = {
       autoescape: options.autoescape ?? true,
@@ -3242,9 +3453,12 @@ class Runtime {
   }
   cycleState = new Map;
   renderCycleSync(node, ctx) {
-    const key = node.values.map((v) => JSON.stringify(v)).join(",");
+    const key = `cycle_${node.line}_${node.column}`;
     const currentIndex = this.cycleState.get(key) ?? 0;
-    const values = node.values.map((v) => this.eval(v, ctx));
+    const values = [];
+    for (let i = 0;i < node.values.length; i++) {
+      values.push(this.eval(node.values[i], ctx));
+    }
     const value = values[currentIndex % values.length];
     this.cycleState.set(key, currentIndex + 1);
     if (node.asVar) {
@@ -3276,12 +3490,16 @@ class Runtime {
     const key = `ifchanged_${node.line}_${node.column}`;
     let currentValue;
     if (node.values.length > 0) {
-      currentValue = node.values.map((v) => this.eval(v, ctx));
+      const values = [];
+      for (let i = 0;i < node.values.length; i++) {
+        values.push(this.eval(node.values[i], ctx));
+      }
+      currentValue = values;
     } else {
       currentValue = this.renderNodesSync(node.body, ctx);
     }
     const lastValue = this.ifchangedState.get(key);
-    const changed = JSON.stringify(currentValue) !== JSON.stringify(lastValue);
+    const changed = !this.deepEqual(currentValue, lastValue);
     this.ifchangedState.set(key, currentValue);
     if (changed) {
       if (node.values.length > 0) {
@@ -3653,8 +3871,17 @@ class Runtime {
     }
     const kwargs = this.evalObjectSync(node.kwargs, ctx);
     const filter = this.filters[node.filter];
-    if (!filter)
-      throw new Error(`Unknown filter: ${node.filter}`);
+    if (!filter) {
+      const available = Object.keys(this.filters);
+      const suggestion = findSimilar(node.filter, available);
+      throw new TemplateRuntimeError(`Unknown filter '${node.filter}'`, {
+        line: node.line,
+        column: node.column,
+        source: this.source,
+        suggestion: suggestion || undefined,
+        availableOptions: available.slice(0, 15)
+      });
+    }
     return filter(value, ...args, ...Object.values(kwargs));
   }
   evalBinaryOp(node, ctx) {
@@ -4028,6 +4255,28 @@ class Runtime {
     }
     return true;
   }
+  deepEqual(a, b) {
+    if (a === b)
+      return true;
+    if (a == null || b == null)
+      return a === b;
+    const typeA = typeof a;
+    const typeB = typeof b;
+    if (typeA !== typeB)
+      return false;
+    if (typeA !== "object")
+      return false;
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length)
+        return false;
+      for (let i = 0;i < a.length; i++) {
+        if (!this.deepEqual(a[i], b[i]))
+          return false;
+      }
+      return true;
+    }
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
   isIn(needle, haystack) {
     if (Array.isArray(haystack))
       return haystack.includes(needle);
@@ -4069,6 +4318,9 @@ class Runtime {
   addGlobal(name, value) {
     this.options.globals[name] = value;
   }
+  setSource(source) {
+    this.source = source;
+  }
 }
 
 // src/compiler/index.ts
@@ -5005,13 +5257,13 @@ var DEFAULT_OPTIONS = {
 function generateDebugPanel(data, options = {}) {
   const opts = { ...DEFAULT_OPTIONS, ...options };
   const id = `binja-debug-${Date.now()}`;
-  const colors = opts.dark ? darkTheme : lightTheme;
+  const colors2 = opts.dark ? darkTheme : lightTheme;
   return `
 <!-- Binja Debug Panel -->
 <div id="${id}" class="binja-debugger" data-theme="${opts.dark ? "dark" : "light"}">
-<style>${generateStyles(id, colors, opts)}</style>
-${generateToggle(id, data, colors)}
-${generatePanel(id, data, colors, opts)}
+<style>${generateStyles(id, colors2, opts)}</style>
+${generateToggle(id, data, colors2)}
+${generatePanel(id, data, colors2, opts)}
 <script>${generateScript(id)}</script>
 </div>
 <!-- /Binja Debug Panel -->
@@ -5049,84 +5301,84 @@ var lightTheme = {
   error: "#dc2626",
   info: "#0891b2"
 };
-function generateStyles(id, c, opts) {
+function generateStyles(id, c2, opts) {
   const pos = getPosition(opts.position);
   return `
 #${id} { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 13px; line-height: 1.5; position: fixed; ${pos} z-index: 2147483647; }
 #${id} * { box-sizing: border-box; margin: 0; padding: 0; }
-#${id} .dbg-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: ${c.bg}; border: 1px solid ${c.border}; border-radius: 8px; color: ${c.text}; cursor: pointer; font-size: 12px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s ease; }
-#${id} .dbg-toggle:hover { border-color: ${c.accent}; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+#${id} .dbg-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: ${c2.bg}; border: 1px solid ${c2.border}; border-radius: 8px; color: ${c2.text}; cursor: pointer; font-size: 12px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s ease; }
+#${id} .dbg-toggle:hover { border-color: ${c2.accent}; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
 #${id} .dbg-toggle svg { width: 16px; height: 16px; }
-#${id} .dbg-toggle .dbg-time { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; padding: 2px 8px; background: ${c.bgTertiary}; border-radius: 4px; color: ${c.success}; }
-#${id} .dbg-panel { display: none; width: ${opts.width}px; max-height: 85vh; background: ${c.bg}; border: 1px solid ${c.border}; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.24); overflow: hidden; margin-top: 8px; }
+#${id} .dbg-toggle .dbg-time { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; padding: 2px 8px; background: ${c2.bgTertiary}; border-radius: 4px; color: ${c2.success}; }
+#${id} .dbg-panel { display: none; width: ${opts.width}px; max-height: 85vh; background: ${c2.bg}; border: 1px solid ${c2.border}; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.24); overflow: hidden; margin-top: 8px; }
 #${id} .dbg-panel.open { display: block; }
-#${id} .dbg-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: ${c.bgSecondary}; border-bottom: 1px solid ${c.border}; }
-#${id} .dbg-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: ${c.text}; }
-#${id} .dbg-logo svg { width: 20px; height: 20px; color: ${c.accent}; }
+#${id} .dbg-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: ${c2.bgSecondary}; border-bottom: 1px solid ${c2.border}; }
+#${id} .dbg-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: ${c2.text}; }
+#${id} .dbg-logo svg { width: 20px; height: 20px; color: ${c2.accent}; }
 #${id} .dbg-meta { display: flex; align-items: center; gap: 12px; }
 #${id} .dbg-badge { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 500; }
-#${id} .dbg-badge.time { background: rgba(34,197,94,0.1); color: ${c.success}; }
-#${id} .dbg-badge.mode { background: rgba(59,130,246,0.1); color: ${c.accent}; }
-#${id} .dbg-close { background: none; border: none; color: ${c.textMuted}; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
-#${id} .dbg-close:hover { background: ${c.bgTertiary}; color: ${c.text}; }
+#${id} .dbg-badge.time { background: rgba(34,197,94,0.1); color: ${c2.success}; }
+#${id} .dbg-badge.mode { background: rgba(59,130,246,0.1); color: ${c2.accent}; }
+#${id} .dbg-close { background: none; border: none; color: ${c2.textMuted}; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; }
+#${id} .dbg-close:hover { background: ${c2.bgTertiary}; color: ${c2.text}; }
 #${id} .dbg-close svg { width: 18px; height: 18px; }
 #${id} .dbg-body { max-height: calc(85vh - 52px); overflow-y: auto; }
-#${id} .dbg-section { border-bottom: 1px solid ${c.border}; }
+#${id} .dbg-section { border-bottom: 1px solid ${c2.border}; }
 #${id} .dbg-section:last-child { border-bottom: none; }
 #${id} .dbg-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; user-select: none; transition: background 0.15s; }
-#${id} .dbg-section-header:hover { background: ${c.bgSecondary}; }
-#${id} .dbg-section-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: ${c.textSecondary}; }
+#${id} .dbg-section-header:hover { background: ${c2.bgSecondary}; }
+#${id} .dbg-section-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: ${c2.textSecondary}; }
 #${id} .dbg-section-title svg { width: 14px; height: 14px; opacity: 0.7; }
-#${id} .dbg-section-meta { font-size: 11px; color: ${c.textMuted}; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .dbg-section-content { display: none; padding: 12px 16px; background: ${c.bgSecondary}; }
+#${id} .dbg-section-meta { font-size: 11px; color: ${c2.textMuted}; font-family: 'SF Mono', Monaco, monospace; }
+#${id} .dbg-section-content { display: none; padding: 12px 16px; background: ${c2.bgSecondary}; }
 #${id} .dbg-section.open .dbg-section-content { display: block; }
-#${id} .dbg-section .dbg-chevron { transition: transform 0.2s; color: ${c.textMuted}; }
+#${id} .dbg-section .dbg-chevron { transition: transform 0.2s; color: ${c2.textMuted}; }
 #${id} .dbg-section.open .dbg-chevron { transform: rotate(90deg); }
-#${id} .dbg-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid ${c.border}; }
+#${id} .dbg-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid ${c2.border}; }
 #${id} .dbg-row:last-child { border-bottom: none; }
-#${id} .dbg-label { color: ${c.textSecondary}; font-size: 12px; }
-#${id} .dbg-value { color: ${c.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; text-align: right; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#${id} .dbg-bar { height: 3px; background: ${c.bgTertiary}; border-radius: 2px; margin-top: 4px; overflow: hidden; }
+#${id} .dbg-label { color: ${c2.textSecondary}; font-size: 12px; }
+#${id} .dbg-value { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; text-align: right; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#${id} .dbg-bar { height: 3px; background: ${c2.bgTertiary}; border-radius: 2px; margin-top: 4px; overflow: hidden; }
 #${id} .dbg-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
-#${id} .dbg-bar-fill.lexer { background: ${c.info}; }
-#${id} .dbg-bar-fill.parser { background: ${c.warning}; }
-#${id} .dbg-bar-fill.render { background: ${c.success}; }
+#${id} .dbg-bar-fill.lexer { background: ${c2.info}; }
+#${id} .dbg-bar-fill.parser { background: ${c2.warning}; }
+#${id} .dbg-bar-fill.render { background: ${c2.success}; }
 #${id} .dbg-templates { display: flex; flex-direction: column; gap: 6px; }
-#${id} .dbg-template { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: ${c.bg}; border-radius: 6px; font-size: 12px; }
-#${id} .dbg-template-icon { width: 16px; height: 16px; color: ${c.textMuted}; flex-shrink: 0; }
-#${id} .dbg-template-name { color: ${c.text}; font-family: 'SF Mono', Monaco, monospace; }
+#${id} .dbg-template { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: ${c2.bg}; border-radius: 6px; font-size: 12px; }
+#${id} .dbg-template-icon { width: 16px; height: 16px; color: ${c2.textMuted}; flex-shrink: 0; }
+#${id} .dbg-template-name { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; }
 #${id} .dbg-template-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 500; text-transform: uppercase; }
-#${id} .dbg-template-tag.root { background: rgba(59,130,246,0.15); color: ${c.accent}; }
+#${id} .dbg-template-tag.root { background: rgba(59,130,246,0.15); color: ${c2.accent}; }
 #${id} .dbg-template-tag.extends { background: rgba(168,85,247,0.15); color: #a855f7; }
-#${id} .dbg-template-tag.include { background: rgba(34,197,94,0.15); color: ${c.success}; }
+#${id} .dbg-template-tag.include { background: rgba(34,197,94,0.15); color: ${c2.success}; }
 #${id} .dbg-ctx-grid { display: flex; flex-direction: column; gap: 4px; }
-#${id} .dbg-ctx-item { background: ${c.bg}; border-radius: 6px; overflow: hidden; }
+#${id} .dbg-ctx-item { background: ${c2.bg}; border-radius: 6px; overflow: hidden; }
 #${id} .dbg-ctx-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: default; }
 #${id} .dbg-ctx-row.expandable { cursor: pointer; }
-#${id} .dbg-ctx-row.expandable:hover { background: ${c.bgTertiary}; }
+#${id} .dbg-ctx-row.expandable:hover { background: ${c2.bgTertiary}; }
 #${id} .dbg-ctx-key { display: flex; align-items: center; gap: 6px; }
-#${id} .dbg-ctx-arrow { width: 12px; height: 12px; color: ${c.textMuted}; transition: transform 0.15s; flex-shrink: 0; }
+#${id} .dbg-ctx-arrow { width: 12px; height: 12px; color: ${c2.textMuted}; transition: transform 0.15s; flex-shrink: 0; }
 #${id} .dbg-ctx-item.open > .dbg-ctx-row .dbg-ctx-arrow { transform: rotate(90deg); }
-#${id} .dbg-ctx-name { color: ${c.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
-#${id} .dbg-ctx-type { font-size: 10px; color: ${c.accent}; background: rgba(59,130,246,0.1); padding: 1px 5px; border-radius: 3px; }
-#${id} .dbg-ctx-preview { color: ${c.textSecondary}; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-#${id} .dbg-ctx-children { display: none; padding-left: 16px; border-left: 1px solid ${c.border}; margin-left: 10px; }
+#${id} .dbg-ctx-name { color: ${c2.text}; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
+#${id} .dbg-ctx-type { font-size: 10px; color: ${c2.accent}; background: rgba(59,130,246,0.1); padding: 1px 5px; border-radius: 3px; }
+#${id} .dbg-ctx-preview { color: ${c2.textSecondary}; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#${id} .dbg-ctx-children { display: none; padding-left: 16px; border-left: 1px solid ${c2.border}; margin-left: 10px; }
 #${id} .dbg-ctx-item.open > .dbg-ctx-children { display: block; }
 #${id} .dbg-ctx-children .dbg-ctx-item { background: transparent; }
 #${id} .dbg-ctx-children .dbg-ctx-row { padding: 4px 8px; }
 #${id} .dbg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
-#${id} .dbg-filter { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: ${c.bg}; border-radius: 5px; font-size: 12px; font-family: 'SF Mono', Monaco, monospace; color: ${c.text}; }
-#${id} .dbg-filter-count { font-size: 10px; color: ${c.accent}; font-weight: 600; }
+#${id} .dbg-filter { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: ${c2.bg}; border-radius: 5px; font-size: 12px; font-family: 'SF Mono', Monaco, monospace; color: ${c2.text}; }
+#${id} .dbg-filter-count { font-size: 10px; color: ${c2.accent}; font-weight: 600; }
 #${id} .dbg-cache { display: flex; gap: 16px; }
-#${id} .dbg-cache-stat { flex: 1; padding: 12px; background: ${c.bg}; border-radius: 6px; text-align: center; }
+#${id} .dbg-cache-stat { flex: 1; padding: 12px; background: ${c2.bg}; border-radius: 6px; text-align: center; }
 #${id} .dbg-cache-num { font-size: 24px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .dbg-cache-num.hit { color: ${c.success}; }
-#${id} .dbg-cache-num.miss { color: ${c.error}; }
-#${id} .dbg-cache-label { font-size: 11px; color: ${c.textMuted}; margin-top: 4px; }
+#${id} .dbg-cache-num.hit { color: ${c2.success}; }
+#${id} .dbg-cache-num.miss { color: ${c2.error}; }
+#${id} .dbg-cache-label { font-size: 11px; color: ${c2.textMuted}; margin-top: 4px; }
 #${id} .dbg-warnings { display: flex; flex-direction: column; gap: 6px; }
-#${id} .dbg-warning { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(234,179,8,0.1); border-radius: 6px; border-left: 3px solid ${c.warning}; }
-#${id} .dbg-warning-icon { color: ${c.warning}; flex-shrink: 0; margin-top: 1px; }
-#${id} .dbg-warning-text { color: ${c.text}; font-size: 12px; }
+#${id} .dbg-warning { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(234,179,8,0.1); border-radius: 6px; border-left: 3px solid ${c2.warning}; }
+#${id} .dbg-warning-icon { color: ${c2.warning}; flex-shrink: 0; margin-top: 1px; }
+#${id} .dbg-warning-text { color: ${c2.text}; font-size: 12px; }
 `;
 }
 function getPosition(pos) {
@@ -5153,7 +5405,7 @@ var icons = {
   warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
   file: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/></svg>`
 };
-function generateToggle(id, data, c) {
+function generateToggle(id, data, c2) {
   const time2 = (data.totalTime || 0).toFixed(1);
   return `
 <button class="dbg-toggle" onclick="document.querySelector('#${id} .dbg-panel').classList.add('open');this.style.display='none'">
@@ -5162,7 +5414,7 @@ function generateToggle(id, data, c) {
   <span class="dbg-time">${time2}ms</span>
 </button>`;
 }
-function generatePanel(id, data, c, opts) {
+function generatePanel(id, data, c2, opts) {
   const time2 = (data.totalTime || 0).toFixed(2);
   const mode = data.mode === "aot" ? "AOT" : "Runtime";
   return `
@@ -5436,12 +5688,12 @@ function createDebugRenderer(env, options = {}) {
 function debugMiddleware(env, options = {}) {
   return {
     hono() {
-      return async (c, next) => {
+      return async (c2, next) => {
         await next();
-        const contentType = c.res.headers.get("content-type") || "";
+        const contentType = c2.res.headers.get("content-type") || "";
         if (!contentType.includes("text/html"))
           return;
-        const body = await c.res.text();
+        const body = await c2.res.text();
         const collector = startDebugCollection();
         collector.captureContext({});
         collector.setMode("runtime");
@@ -5449,9 +5701,9 @@ function debugMiddleware(env, options = {}) {
         const data = endDebugCollection();
         const panel = generateDebugPanel(data, options.panel);
         const newBody = body.includes("</body>") ? body.replace("</body>", `${panel}</body>`) : body + panel;
-        c.res = new Response(newBody, {
-          status: c.res.status,
-          headers: c.res.headers
+        c2.res = new Response(newBody, {
+          status: c2.res.status,
+          headers: c2.res.headers
         });
       };
     },
@@ -5572,7 +5824,7 @@ class Environment {
   compile(source) {
     const lexer = new Lexer(source);
     const tokens = lexer.tokenize();
-    const parser = new Parser(tokens);
+    const parser = new Parser(tokens, source);
     return parser.parse();
   }
   async loadTemplate(templateName) {
@@ -5693,7 +5945,7 @@ function Template(source, options = {}) {
 function compile(source, options = {}) {
   const lexer = new Lexer(source);
   const tokens = lexer.tokenize();
-  const parser = new Parser(tokens);
+  const parser = new Parser(tokens, source);
   const ast = parser.parse();
   return compileToFunction(ast, options);
 }
@@ -5716,7 +5968,7 @@ async function compileWithInheritance(templateName, options) {
     parse(source2) {
       const lexer = new Lexer(source2);
       const tokens = lexer.tokenize();
-      const parser = new Parser(tokens);
+      const parser = new Parser(tokens, source2);
       return parser.parse();
     }
   };
@@ -5748,7 +6000,7 @@ async function compileWithInheritanceToCode(templateName, options) {
     parse(source2) {
       const lexer = new Lexer(source2);
       const tokens = lexer.tokenize();
-      const parser = new Parser(tokens);
+      const parser = new Parser(tokens, source2);
       return parser.parse();
     }
   };
@@ -5764,7 +6016,7 @@ async function compileWithInheritanceToCode(templateName, options) {
 function compileToCode(source, options = {}) {
   const lexer = new Lexer(source);
   const tokens = lexer.tokenize();
-  const parser = new Parser(tokens);
+  const parser = new Parser(tokens, source);
   const ast = parser.parse();
   return compileToString(ast, options);
 }
@@ -5784,6 +6036,9 @@ export {
   builtinTests,
   builtinFilters,
   TokenType,
+  TemplateSyntaxError,
+  TemplateRuntimeError,
+  TemplateError,
   Template,
   Runtime,
   Parser,