binja 0.5.2 → 0.6.0

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) => {
@@ -2943,6 +3134,7 @@ class Runtime {
   tests;
   blocks = new Map;
   parentTemplate = null;
+  source;
   constructor(options = {}) {
     this.options = {
       autoescape: options.autoescape ?? true,
@@ -3679,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) {
@@ -4117,6 +4318,9 @@ class Runtime {
   addGlobal(name, value) {
     this.options.globals[name] = value;
   }
+  setSource(source) {
+    this.source = source;
+  }
 }
 
 // src/compiler/index.ts
@@ -4877,6 +5081,14 @@ class DebugCollector {
       testsUsed: new Map,
       cacheHits: 0,
       cacheMisses: 0,
+      queries: [],
+      queryStats: {
+        count: 0,
+        totalDuration: 0,
+        slowCount: 0,
+        n1Count: 0,
+        queryCounts: new Map
+      },
       warnings: []
     };
   }
@@ -5017,6 +5229,33 @@ class DebugCollector {
   addWarning(message) {
     this.data.warnings.push(message);
   }
+  recordQuery(query) {
+    const normalizedSql = this.normalizeQuery(query.sql);
+    const currentCount = this.data.queryStats.queryCounts.get(normalizedSql) || 0;
+    this.data.queryStats.queryCounts.set(normalizedSql, currentCount + 1);
+    const isN1 = currentCount >= 2;
+    const queryInfo = {
+      ...query,
+      timestamp: performance.now(),
+      isN1
+    };
+    this.data.queries.push(queryInfo);
+    this.data.queryStats.count++;
+    this.data.queryStats.totalDuration += query.duration;
+    if (query.duration > 100) {
+      this.data.queryStats.slowCount++;
+    }
+    if (isN1 && currentCount === 2) {
+      this.data.queryStats.n1Count++;
+      this.addWarning(`N+1 query detected: ${normalizedSql.slice(0, 50)}...`);
+    }
+  }
+  normalizeQuery(sql) {
+    return sql.replace(/\s+/g, " ").replace(/= \?/g, "= ?").replace(/= \$\d+/g, "= ?").replace(/= '\w+'/g, "= '?'").replace(/= \d+/g, "= ?").replace(/IN \([^)]+\)/gi, "IN (?)").trim();
+  }
+  getQueryStats() {
+    return this.data.queryStats;
+  }
   getData() {
     return this.data;
   }
@@ -5053,13 +5292,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 -->
@@ -5097,84 +5336,103 @@ 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; }
+#${id} .dbg-queries { display: flex; flex-direction: column; gap: 8px; }
+#${id} .dbg-query { background: ${c2.bg}; border-radius: 6px; overflow: hidden; }
+#${id} .dbg-query.n1 { border-left: 3px solid ${c2.error}; }
+#${id} .dbg-query.slow { border-left: 3px solid ${c2.warning}; }
+#${id} .dbg-query-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; gap: 8px; }
+#${id} .dbg-query-sql { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; color: ${c2.text}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#${id} .dbg-query-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+#${id} .dbg-query-time { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: ${c2.bgTertiary}; }
+#${id} .dbg-query-time.slow { background: rgba(234,179,8,0.15); color: ${c2.warning}; }
+#${id} .dbg-query-rows { font-size: 10px; color: ${c2.textMuted}; }
+#${id} .dbg-query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: rgba(59,130,246,0.1); color: ${c2.accent}; text-transform: uppercase; }
+#${id} .dbg-query-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; }
+#${id} .dbg-query-badge.n1 { background: rgba(239,68,68,0.15); color: ${c2.error}; }
+#${id} .dbg-query-stats { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px; background: ${c2.bg}; border-radius: 6px; }
+#${id} .dbg-query-stat { flex: 1; text-align: center; }
+#${id} .dbg-query-stat-num { font-size: 18px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; color: ${c2.text}; }
+#${id} .dbg-query-stat-num.warning { color: ${c2.warning}; }
+#${id} .dbg-query-stat-num.error { color: ${c2.error}; }
+#${id} .dbg-query-stat-label { font-size: 10px; color: ${c2.textMuted}; margin-top: 2px; }
 `;
 }
 function getPosition(pos) {
@@ -5199,9 +5457,10 @@ var icons = {
   filter: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
   cache: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1010 10H12V2z"/><path d="M12 2a10 10 0 00-8.66 15"/></svg>`,
   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>`
+  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>`,
+  database: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></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'">
@@ -5210,7 +5469,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 `
@@ -5228,6 +5487,7 @@ function generatePanel(id, data, c, opts) {
     ${generateTemplatesSection(data)}
     ${generateContextSection(data)}
     ${generateFiltersSection(data)}
+    ${generateQueriesSection(data)}
     ${generateCacheSection(data)}
     ${generateWarningsSection(data)}
   </div>
@@ -5391,6 +5651,70 @@ function generateWarningsSection(data) {
   </div>
 </div>`;
 }
+function generateQueriesSection(data) {
+  if (data.queries.length === 0)
+    return "";
+  const stats = data.queryStats;
+  const hasIssues = stats.slowCount > 0 || stats.n1Count > 0;
+  const statsHtml = `
+    <div class="dbg-query-stats">
+      <div class="dbg-query-stat">
+        <div class="dbg-query-stat-num">${stats.count}</div>
+        <div class="dbg-query-stat-label">Queries</div>
+      </div>
+      <div class="dbg-query-stat">
+        <div class="dbg-query-stat-num">${stats.totalDuration.toFixed(1)}ms</div>
+        <div class="dbg-query-stat-label">Total Time</div>
+      </div>
+      <div class="dbg-query-stat">
+        <div class="dbg-query-stat-num ${stats.slowCount > 0 ? "warning" : ""}">${stats.slowCount}</div>
+        <div class="dbg-query-stat-label">Slow (&gt;100ms)</div>
+      </div>
+      <div class="dbg-query-stat">
+        <div class="dbg-query-stat-num ${stats.n1Count > 0 ? "error" : ""}">${stats.n1Count}</div>
+        <div class="dbg-query-stat-label">N+1</div>
+      </div>
+    </div>`;
+  const queries = data.queries.map((q) => {
+    const isSlow = q.duration > 100;
+    const classes = [
+      "dbg-query",
+      q.isN1 ? "n1" : "",
+      isSlow ? "slow" : ""
+    ].filter(Boolean).join(" ");
+    const badges = [];
+    if (q.isN1) {
+      badges.push('<span class="dbg-query-badge n1">N+1</span>');
+    }
+    const rowsText = q.rows !== undefined ? `<span class="dbg-query-rows">${q.rows} rows</span>` : "";
+    const sourceText = q.source ? `<span class="dbg-query-source">${escapeHtml(q.source)}</span>` : "";
+    return `
+    <div class="${classes}">
+      <div class="dbg-query-header">
+        <span class="dbg-query-sql" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>
+        <div class="dbg-query-meta">
+          ${badges.join("")}
+          ${sourceText}
+          ${rowsText}
+          <span class="dbg-query-time ${isSlow ? "slow" : ""}">${q.duration.toFixed(1)}ms</span>
+        </div>
+      </div>
+    </div>`;
+  }).join("");
+  const metaColor = hasIssues ? 'style="color:#ef4444"' : "";
+  return `
+<div class="dbg-section ${hasIssues ? "open" : ""}">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.database} Queries</span>
+    <span class="dbg-section-meta" ${metaColor}>${stats.count} (${stats.totalDuration.toFixed(1)}ms)</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    ${statsHtml}
+    <div class="dbg-queries">${queries}</div>
+  </div>
+</div>`;
+}
 function generateScript(id) {
   return `
 (function(){
@@ -5484,12 +5808,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");
@@ -5497,9 +5821,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
         });
       };
     },
@@ -5620,7 +5944,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) {
@@ -5741,7 +6065,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);
 }
@@ -5764,7 +6088,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();
     }
   };
@@ -5796,7 +6120,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();
     }
   };
@@ -5812,7 +6136,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);
 }
@@ -5832,6 +6156,9 @@ export {
   builtinTests,
   builtinFilters,
   TokenType,
+  TemplateSyntaxError,
+  TemplateRuntimeError,
+  TemplateError,
   Template,
   Runtime,
   Parser,