binja 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,4 +1,6 @@
 // @bun
+var __require = import.meta.require;
+
 // src/lexer/tokens.ts
 var TokenType;
 ((TokenType2) => {
@@ -95,6 +97,14 @@ class Lexer {
       const wsControl = this.peek() === "-";
       if (wsControl)
         this.advance();
+      const savedPos = this.state.pos;
+      this.skipWhitespace();
+      if (this.checkWord("raw") || this.checkWord("verbatim")) {
+        const tagName = this.checkWord("raw") ? "raw" : "verbatim";
+        this.scanRawBlock(tagName, wsControl);
+        return;
+      }
+      this.state.pos = savedPos;
       this.addToken("BLOCK_START" /* BLOCK_START */, this.blockStart + (wsControl ? "-" : ""));
       this.scanExpression(this.blockEnd, "BLOCK_END" /* BLOCK_END */);
       return;
@@ -105,6 +115,73 @@ class Lexer {
     }
     this.scanText();
   }
+  checkWord(word) {
+    const start = this.state.pos;
+    for (let i = 0;i < word.length; i++) {
+      if (this.state.source[start + i]?.toLowerCase() !== word[i]) {
+        return false;
+      }
+    }
+    const nextChar = this.state.source[start + word.length];
+    return !nextChar || !this.isAlphaNumeric(nextChar);
+  }
+  scanRawBlock(tagName, wsControl) {
+    const startLine = this.state.line;
+    const startColumn = this.state.column;
+    for (let i = 0;i < tagName.length; i++) {
+      this.advance();
+    }
+    this.skipWhitespace();
+    if (this.peek() === "-")
+      this.advance();
+    if (!this.match(this.blockEnd)) {
+      throw new Error(`Expected ${this.blockEnd} after ${tagName} at line ${this.state.line}`);
+    }
+    const endTag = `end${tagName}`;
+    const contentStart = this.state.pos;
+    while (!this.isAtEnd()) {
+      if (this.check(this.blockStart)) {
+        const savedPos = this.state.pos;
+        const savedLine = this.state.line;
+        const savedColumn = this.state.column;
+        this.match(this.blockStart);
+        if (this.peek() === "-")
+          this.advance();
+        this.skipWhitespace();
+        if (this.checkWord(endTag)) {
+          const content = this.state.source.slice(contentStart, savedPos);
+          if (content.length > 0) {
+            this.state.tokens.push({
+              type: "TEXT" /* TEXT */,
+              value: content,
+              line: startLine,
+              column: startColumn
+            });
+          }
+          for (let i = 0;i < endTag.length; i++) {
+            this.advance();
+          }
+          this.skipWhitespace();
+          if (this.peek() === "-")
+            this.advance();
+          if (!this.match(this.blockEnd)) {
+            throw new Error(`Expected ${this.blockEnd} after ${endTag} at line ${this.state.line}`);
+          }
+          return;
+        }
+        this.state.pos = savedPos;
+        this.state.line = savedLine;
+        this.state.column = savedColumn;
+      }
+      if (this.peek() === `
+`) {
+        this.state.line++;
+        this.state.column = 0;
+      }
+      this.advance();
+    }
+    throw new Error(`Unclosed ${tagName} block starting at line ${startLine}`);
+  }
   scanText() {
     const start = this.state.pos;
     const startLine = this.state.line;
@@ -1704,6 +1781,263 @@ var groupby = (value, attribute) => {
     list
   }));
 };
+var wordwrap = (value, width = 79, breakLongWords = true, wrapString = `
+`) => {
+  const str = String(value);
+  if (str.length <= width)
+    return str;
+  const words = str.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (currentLine.length + word.length + 1 <= width) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      if (currentLine)
+        lines.push(currentLine);
+      if (breakLongWords && word.length > width) {
+        let remaining = word;
+        while (remaining.length > width) {
+          lines.push(remaining.slice(0, width));
+          remaining = remaining.slice(width);
+        }
+        currentLine = remaining;
+      } else {
+        currentLine = word;
+      }
+    }
+  }
+  if (currentLine)
+    lines.push(currentLine);
+  return lines.join(wrapString);
+};
+var indent = (value, width = 4, first2 = false, blank = false) => {
+  const str = String(value);
+  const indentStr = typeof width === "string" ? width : " ".repeat(Number(width));
+  const lines = str.split(`
+`);
+  return lines.map((line, i) => {
+    if (i === 0 && !first2)
+      return line;
+    if (!blank && line.trim() === "")
+      return line;
+    return indentStr + line;
+  }).join(`
+`);
+};
+var replace = (value, old, newStr, count) => {
+  const str = String(value);
+  if (count === undefined) {
+    return str.replaceAll(String(old), String(newStr));
+  }
+  let result = str;
+  let remaining = Number(count);
+  while (remaining > 0 && result.includes(String(old))) {
+    result = result.replace(String(old), String(newStr));
+    remaining--;
+  }
+  return result;
+};
+var format = (value, ...args) => {
+  let str = String(value);
+  args.forEach((arg, i) => {
+    str = str.replace(/%s/, String(arg));
+    str = str.replace(new RegExp(`%${i + 1}`, "g"), String(arg));
+  });
+  return str;
+};
+var string = (value) => String(value);
+var list = (value) => {
+  if (Array.isArray(value))
+    return value;
+  if (typeof value === "string")
+    return value.split("");
+  if (value && typeof value[Symbol.iterator] === "function")
+    return [...value];
+  if (typeof value === "object" && value !== null)
+    return Object.values(value);
+  return [value];
+};
+var map = (value, attribute) => {
+  if (!Array.isArray(value))
+    return [];
+  if (typeof attribute === "string") {
+    return value.map((item) => item?.[attribute]);
+  }
+  return value;
+};
+var select = (value, attribute) => {
+  if (!Array.isArray(value))
+    return [];
+  if (attribute === undefined) {
+    return value.filter((item) => !!item);
+  }
+  return value.filter((item) => !!item?.[attribute]);
+};
+var reject = (value, attribute) => {
+  if (!Array.isArray(value))
+    return [];
+  if (attribute === undefined) {
+    return value.filter((item) => !item);
+  }
+  return value.filter((item) => !item?.[attribute]);
+};
+var selectattr = (value, attribute, test, testValue) => {
+  if (!Array.isArray(value))
+    return [];
+  return value.filter((item) => {
+    const attrValue = item?.[attribute];
+    if (test === undefined)
+      return !!attrValue;
+    if (test === "eq" || test === "equalto")
+      return attrValue === testValue;
+    if (test === "ne")
+      return attrValue !== testValue;
+    if (test === "gt")
+      return attrValue > testValue;
+    if (test === "lt")
+      return attrValue < testValue;
+    if (test === "ge" || test === "gte")
+      return attrValue >= testValue;
+    if (test === "le" || test === "lte")
+      return attrValue <= testValue;
+    if (test === "in")
+      return testValue?.includes?.(attrValue);
+    if (test === "defined")
+      return attrValue !== undefined;
+    if (test === "undefined")
+      return attrValue === undefined;
+    if (test === "none")
+      return attrValue === null;
+    if (test === "true")
+      return attrValue === true;
+    if (test === "false")
+      return attrValue === false;
+    return !!attrValue;
+  });
+};
+var rejectattr = (value, attribute, test, testValue) => {
+  if (!Array.isArray(value))
+    return [];
+  const selected = selectattr(value, attribute, test, testValue);
+  return value.filter((item) => !selected.includes(item));
+};
+var attr = (value, name) => {
+  if (value == null)
+    return;
+  return value[name];
+};
+var max = (value, attribute, defaultValue) => {
+  if (!Array.isArray(value) || value.length === 0)
+    return defaultValue;
+  if (attribute) {
+    return value.reduce((max2, item) => item[attribute] > max2[attribute] ? item : max2);
+  }
+  return Math.max(...value);
+};
+var min = (value, attribute, defaultValue) => {
+  if (!Array.isArray(value) || value.length === 0)
+    return defaultValue;
+  if (attribute) {
+    return value.reduce((min2, item) => item[attribute] < min2[attribute] ? item : min2);
+  }
+  return Math.min(...value);
+};
+var sum = (value, attribute, start = 0) => {
+  if (!Array.isArray(value))
+    return start;
+  return value.reduce((total, item) => {
+    const val = attribute ? item[attribute] : item;
+    return total + (Number(val) || 0);
+  }, Number(start));
+};
+var pprint = (value) => {
+  try {
+    const result = JSON.stringify(value, null, 2);
+    const safeString = new String(result);
+    safeString.__safe__ = true;
+    return safeString;
+  } catch {
+    return String(value);
+  }
+};
+var forceescape = (value) => {
+  const escaped = Bun.escapeHTML(String(value));
+  const safeString = new String(escaped);
+  safeString.__safe__ = true;
+  return safeString;
+};
+var PHONE_MAP = {
+  a: "2",
+  b: "2",
+  c: "2",
+  d: "3",
+  e: "3",
+  f: "3",
+  g: "4",
+  h: "4",
+  i: "4",
+  j: "5",
+  k: "5",
+  l: "5",
+  m: "6",
+  n: "6",
+  o: "6",
+  p: "7",
+  q: "7",
+  r: "7",
+  s: "7",
+  t: "8",
+  u: "8",
+  v: "8",
+  w: "9",
+  x: "9",
+  y: "9",
+  z: "9"
+};
+var phone2numeric = (value) => {
+  return String(value).toLowerCase().split("").map((char) => PHONE_MAP[char] ?? char).join("");
+};
+var linenumbers = (value) => {
+  const lines = String(value).split(`
+`);
+  const width = String(lines.length).length;
+  return lines.map((line, i) => `${String(i + 1).padStart(width, " ")}. ${line}`).join(`
+`);
+};
+var unordered_list = (value) => {
+  if (!Array.isArray(value))
+    return String(value);
+  const renderList = (items, depth = 0) => {
+    const indent2 = "  ".repeat(depth);
+    let html2 = "";
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      if (Array.isArray(item)) {
+        html2 += `
+${indent2}<ul>
+${renderList(item, depth + 1)}${indent2}</ul>
+`;
+      } else {
+        html2 += `${indent2}<li>${item}`;
+        if (i + 1 < items.length && Array.isArray(items[i + 1])) {
+          html2 += `
+${indent2}<ul>
+${renderList(items[i + 1], depth + 1)}${indent2}</ul>
+${indent2}`;
+          i++;
+        }
+        html2 += `</li>
+`;
+      }
+    }
+    return html2;
+  };
+  const html = renderList(value);
+  const safeString = new String(html);
+  safeString.__safe__ = true;
+  return safeString;
+};
 var builtinFilters = {
   upper,
   lower,
@@ -1762,7 +2096,27 @@ var builtinFilters = {
   tojson: json,
   random,
   batch,
-  groupby
+  groupby,
+  wordwrap,
+  indent,
+  replace,
+  format,
+  string,
+  list,
+  map,
+  select,
+  reject,
+  selectattr,
+  rejectattr,
+  attr,
+  max,
+  min,
+  sum,
+  pprint,
+  forceescape,
+  phone2numeric,
+  linenumbers,
+  unordered_list
 };
 
 // src/tests/index.ts
@@ -1808,7 +2162,7 @@ var none = (value) => {
 var boolean = (value) => {
   return typeof value === "boolean";
 };
-var string = (value) => {
+var string2 = (value) => {
   return typeof value === "string";
 };
 var mapping = (value) => {
@@ -1898,7 +2252,7 @@ var builtinTests = {
   undefined: undefined2,
   none,
   boolean,
-  string,
+  string: string2,
   mapping,
   iterable,
   sequence,
@@ -2638,6 +2992,7 @@ class Compiler {
   indent = 0;
   varCounter = 0;
   loopStack = [];
+  localVars = [];
   constructor(options = {}) {
     this.options = {
       functionName: options.functionName ?? "render",
@@ -2646,6 +3001,24 @@ class Compiler {
       autoescape: options.autoescape ?? true
     };
   }
+  pushScope() {
+    this.localVars.push(new Set);
+  }
+  popScope() {
+    this.localVars.pop();
+  }
+  addLocalVar(name) {
+    if (this.localVars.length > 0) {
+      this.localVars[this.localVars.length - 1].add(name);
+    }
+  }
+  isLocalVar(name) {
+    for (let i = this.localVars.length - 1;i >= 0; i--) {
+      if (this.localVars[i].has(name))
+        return true;
+    }
+    return false;
+  }
   compile(ast) {
     const body = this.compileNodes(ast.body);
     const nl = this.options.minify ? "" : `
@@ -2773,12 +3146,15 @@ class Compiler {
   }
   compileWith(node) {
     let code = `  {${this.nl()}`;
+    this.pushScope();
     for (const { target, value } of node.assignments) {
       const valueExpr = this.compileExpr(value);
       code += `    const ${target} = ${valueExpr};${this.nl()}`;
+      this.addLocalVar(target);
     }
     code += this.compileNodes(node.body);
     code += `  }${this.nl()}`;
+    this.popScope();
     return code;
   }
   compileExpr(node) {
@@ -2820,6 +3196,9 @@ class Compiler {
       return "null";
     if (node.name === "forloop" || node.name === "loop")
       return node.name;
+    if (this.isLocalVar(node.name)) {
+      return node.name;
+    }
     return `__ctx.${node.name}`;
   }
   compileLiteral(node) {
@@ -2995,6 +3374,956 @@ class Compiler {
   }
 }
 
+// src/compiler/flattener.ts
+function flattenTemplate(ast, options) {
+  const flattener = new TemplateFlattener(options);
+  return flattener.flatten(ast);
+}
+function canFlatten(ast) {
+  const checker = new StaticChecker;
+  return checker.check(ast);
+}
+
+class TemplateFlattener {
+  loader;
+  maxDepth;
+  blocks = new Map;
+  depth = 0;
+  constructor(options) {
+    this.loader = options.loader;
+    this.maxDepth = options.maxDepth ?? 10;
+  }
+  flatten(ast) {
+    this.blocks.clear();
+    this.depth = 0;
+    return this.processTemplate(ast);
+  }
+  processTemplate(ast, isChild = true) {
+    if (this.depth > this.maxDepth) {
+      throw new Error(`Maximum template inheritance depth (${this.maxDepth}) exceeded`);
+    }
+    this.collectBlocks(ast.body, isChild);
+    const extendsNode = this.findExtends(ast.body);
+    if (extendsNode) {
+      const parentName = this.getStaticTemplateName(extendsNode.template);
+      const parentSource = this.loader.load(parentName);
+      const parentAst = this.loader.parse(parentSource);
+      this.depth++;
+      const flattenedParent = this.processTemplate(parentAst, false);
+      this.depth--;
+      return {
+        type: "Template",
+        body: this.replaceBlocks(flattenedParent.body),
+        line: ast.line,
+        column: ast.column
+      };
+    }
+    return {
+      type: "Template",
+      body: this.processNodes(ast.body),
+      line: ast.line,
+      column: ast.column
+    };
+  }
+  collectBlocks(nodes2, override = true) {
+    for (const node of nodes2) {
+      if (node.type === "Block") {
+        const block = node;
+        if (override || !this.blocks.has(block.name)) {
+          this.blocks.set(block.name, block);
+        }
+      }
+      this.collectBlocksFromNode(node, override);
+    }
+  }
+  collectBlocksFromNode(node, override = true) {
+    switch (node.type) {
+      case "If": {
+        const ifNode = node;
+        this.collectBlocks(ifNode.body, override);
+        for (const elif of ifNode.elifs) {
+          this.collectBlocks(elif.body, override);
+        }
+        this.collectBlocks(ifNode.else_, override);
+        break;
+      }
+      case "For": {
+        const forNode = node;
+        this.collectBlocks(forNode.body, override);
+        this.collectBlocks(forNode.else_, override);
+        break;
+      }
+      case "With": {
+        const withNode = node;
+        this.collectBlocks(withNode.body, override);
+        break;
+      }
+      case "Block": {
+        const blockNode = node;
+        this.collectBlocks(blockNode.body, override);
+        break;
+      }
+    }
+  }
+  findExtends(nodes2) {
+    for (const node of nodes2) {
+      if (node.type === "Extends") {
+        return node;
+      }
+    }
+    return null;
+  }
+  processNodes(nodes2) {
+    const result = [];
+    for (const node of nodes2) {
+      if (node.type === "Extends") {
+        continue;
+      }
+      if (node.type === "Include") {
+        const includeNode = node;
+        const inlined = this.inlineInclude(includeNode);
+        result.push(...inlined);
+        continue;
+      }
+      if (node.type === "Block") {
+        const block = node;
+        const childBlock = this.blocks.get(block.name);
+        if (childBlock && childBlock !== block) {
+          result.push(...this.processNodes(childBlock.body));
+        } else {
+          result.push(...this.processNodes(block.body));
+        }
+        continue;
+      }
+      const processed = this.processNode(node);
+      if (processed) {
+        result.push(processed);
+      }
+    }
+    return result;
+  }
+  processNode(node) {
+    switch (node.type) {
+      case "If": {
+        const ifNode = node;
+        return {
+          ...ifNode,
+          body: this.processNodes(ifNode.body),
+          elifs: ifNode.elifs.map((elif) => ({
+            test: elif.test,
+            body: this.processNodes(elif.body)
+          })),
+          else_: this.processNodes(ifNode.else_)
+        };
+      }
+      case "For": {
+        const forNode = node;
+        return {
+          ...forNode,
+          body: this.processNodes(forNode.body),
+          else_: this.processNodes(forNode.else_)
+        };
+      }
+      case "With": {
+        const withNode = node;
+        return {
+          ...withNode,
+          body: this.processNodes(withNode.body)
+        };
+      }
+      default:
+        return node;
+    }
+  }
+  replaceBlocks(nodes2) {
+    return this.processNodes(nodes2);
+  }
+  inlineInclude(node) {
+    const templateName = this.getStaticTemplateName(node.template);
+    try {
+      const source = this.loader.load(templateName);
+      const ast = this.loader.parse(source);
+      this.depth++;
+      const flattened = this.processTemplate(ast);
+      this.depth--;
+      if (node.context && Object.keys(node.context).length > 0) {
+        const withNode = {
+          type: "With",
+          assignments: Object.entries(node.context).map(([target, value]) => ({
+            target,
+            value
+          })),
+          body: flattened.body,
+          line: node.line,
+          column: node.column
+        };
+        return [withNode];
+      }
+      return flattened.body;
+    } catch (error) {
+      if (node.ignoreMissing) {
+        return [];
+      }
+      throw error;
+    }
+  }
+  getStaticTemplateName(expr) {
+    if (expr.type === "Literal") {
+      const literal = expr;
+      if (typeof literal.value === "string") {
+        return literal.value;
+      }
+    }
+    throw new Error(`AOT compilation requires static template names. ` + `Found dynamic expression at line ${expr.line}. ` + `Use Environment.render() for dynamic template names.`);
+  }
+}
+
+class StaticChecker {
+  check(ast) {
+    return this.checkNodes(ast.body);
+  }
+  checkNodes(nodes2) {
+    for (const node of nodes2) {
+      const result = this.checkNode(node);
+      if (!result.canFlatten) {
+        return result;
+      }
+    }
+    return { canFlatten: true };
+  }
+  checkNode(node) {
+    switch (node.type) {
+      case "Extends": {
+        const extendsNode = node;
+        if (!this.isStaticName(extendsNode.template)) {
+          return {
+            canFlatten: false,
+            reason: `Dynamic extends at line ${node.line} - use static string literal`
+          };
+        }
+        break;
+      }
+      case "Include": {
+        const includeNode = node;
+        if (!this.isStaticName(includeNode.template)) {
+          return {
+            canFlatten: false,
+            reason: `Dynamic include at line ${node.line} - use static string literal`
+          };
+        }
+        break;
+      }
+      case "If": {
+        const ifNode = node;
+        let result = this.checkNodes(ifNode.body);
+        if (!result.canFlatten)
+          return result;
+        for (const elif of ifNode.elifs) {
+          result = this.checkNodes(elif.body);
+          if (!result.canFlatten)
+            return result;
+        }
+        result = this.checkNodes(ifNode.else_);
+        if (!result.canFlatten)
+          return result;
+        break;
+      }
+      case "For": {
+        const forNode = node;
+        let result = this.checkNodes(forNode.body);
+        if (!result.canFlatten)
+          return result;
+        result = this.checkNodes(forNode.else_);
+        if (!result.canFlatten)
+          return result;
+        break;
+      }
+      case "With": {
+        const withNode = node;
+        const result = this.checkNodes(withNode.body);
+        if (!result.canFlatten)
+          return result;
+        break;
+      }
+      case "Block": {
+        const blockNode = node;
+        const result = this.checkNodes(blockNode.body);
+        if (!result.canFlatten)
+          return result;
+        break;
+      }
+    }
+    return { canFlatten: true };
+  }
+  isStaticName(expr) {
+    return expr.type === "Literal" && typeof expr.value === "string";
+  }
+}
+
+// src/debug/collector.ts
+class DebugCollector {
+  data;
+  constructor() {
+    this.data = {
+      startTime: performance.now(),
+      templateChain: [],
+      mode: "runtime",
+      isAsync: false,
+      contextKeys: [],
+      contextSnapshot: {},
+      filtersUsed: new Map,
+      testsUsed: new Map,
+      cacheHits: 0,
+      cacheMisses: 0,
+      warnings: []
+    };
+  }
+  startLexer() {
+    this.data._lexerStart = performance.now();
+  }
+  endLexer() {
+    if (this.data._lexerStart) {
+      this.data.lexerTime = performance.now() - this.data._lexerStart;
+    }
+  }
+  startParser() {
+    this.data._parserStart = performance.now();
+  }
+  endParser() {
+    if (this.data._parserStart) {
+      this.data.parserTime = performance.now() - this.data._parserStart;
+    }
+  }
+  startRender() {
+    this.data._renderStart = performance.now();
+  }
+  endRender() {
+    if (this.data._renderStart) {
+      this.data.renderTime = performance.now() - this.data._renderStart;
+    }
+    this.data.endTime = performance.now();
+    this.data.totalTime = this.data.endTime - this.data.startTime;
+  }
+  addTemplate(name, type, parent) {
+    this.data.templateChain.push({ name, type, parent });
+    if (type === "root") {
+      this.data.rootTemplate = name;
+    }
+  }
+  setMode(mode) {
+    this.data.mode = mode;
+  }
+  setAsync(isAsync) {
+    this.data.isAsync = isAsync;
+  }
+  captureContext(context) {
+    this.data.contextKeys = Object.keys(context);
+    for (const [key, value] of Object.entries(context)) {
+      this.data.contextSnapshot[key] = this.captureValue(value);
+    }
+  }
+  captureValue(value, depth = 0) {
+    const type = this.getType(value);
+    const preview = this.getPreview(value);
+    const expandable = this.isExpandable(value);
+    const result = { type, preview, value, expandable };
+    if (expandable && depth < 3) {
+      result.children = {};
+      if (Array.isArray(value)) {
+        value.forEach((item, i) => {
+          result.children[String(i)] = this.captureValue(item, depth + 1);
+        });
+      } else if (typeof value === "object" && value !== null) {
+        for (const [k, v] of Object.entries(value)) {
+          result.children[k] = this.captureValue(v, depth + 1);
+        }
+      }
+    }
+    return result;
+  }
+  isExpandable(value) {
+    if (value === null || value === undefined)
+      return false;
+    if (Array.isArray(value))
+      return value.length > 0;
+    if (typeof value === "object")
+      return Object.keys(value).length > 0;
+    return false;
+  }
+  getType(value) {
+    if (value === null)
+      return "null";
+    if (value === undefined)
+      return "undefined";
+    if (Array.isArray(value))
+      return `Array(${value.length})`;
+    if (value instanceof Date)
+      return "Date";
+    if (typeof value === "object")
+      return "Object";
+    return typeof value;
+  }
+  getPreview(value, maxLen = 50) {
+    if (value === null)
+      return "null";
+    if (value === undefined)
+      return "undefined";
+    if (typeof value === "string") {
+      return value.length > maxLen ? `"${value.slice(0, maxLen)}..."` : `"${value}"`;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0)
+        return "[]";
+      if (value.length <= 3) {
+        const items = value.map((v) => this.getPreview(v, 15)).join(", ");
+        return `[${items}]`;
+      }
+      return `[${this.getPreview(value[0], 15)}, ... +${value.length - 1}]`;
+    }
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+    if (typeof value === "object") {
+      const keys = Object.keys(value);
+      if (keys.length === 0)
+        return "{}";
+      if (keys.length <= 2) {
+        return `{ ${keys.join(", ")} }`;
+      }
+      return `{ ${keys.slice(0, 2).join(", ")}, ... +${keys.length - 2} }`;
+    }
+    if (typeof value === "function") {
+      return "function()";
+    }
+    return String(value);
+  }
+  recordFilter(name) {
+    this.data.filtersUsed.set(name, (this.data.filtersUsed.get(name) || 0) + 1);
+  }
+  recordTest(name) {
+    this.data.testsUsed.set(name, (this.data.testsUsed.get(name) || 0) + 1);
+  }
+  recordCacheHit() {
+    this.data.cacheHits++;
+  }
+  recordCacheMiss() {
+    this.data.cacheMisses++;
+  }
+  addWarning(message) {
+    this.data.warnings.push(message);
+  }
+  getData() {
+    return this.data;
+  }
+  getSummary() {
+    return {
+      totalTime: this.data.totalTime || 0,
+      templateCount: this.data.templateChain.length,
+      filterCount: this.data.filtersUsed.size,
+      mode: this.data.mode
+    };
+  }
+}
+var currentCollector = null;
+function startDebugCollection() {
+  currentCollector = new DebugCollector;
+  return currentCollector;
+}
+function endDebugCollection() {
+  if (currentCollector) {
+    const data = currentCollector.getData();
+    currentCollector = null;
+    return data;
+  }
+  return null;
+}
+
+// src/debug/panel.ts
+var DEFAULT_OPTIONS = {
+  position: "bottom-right",
+  collapsed: true,
+  dark: true,
+  width: 420
+};
+function generateDebugPanel(data, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const id = `binja-debug-${Date.now()}`;
+  const colors = 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)}
+<script>${generateScript(id)}</script>
+</div>
+<!-- /Binja Debug Panel -->
+`;
+}
+var darkTheme = {
+  bg: "#0f0f0f",
+  bgSecondary: "#1a1a1a",
+  bgTertiary: "#242424",
+  border: "#2a2a2a",
+  borderLight: "#333",
+  text: "#e5e5e5",
+  textSecondary: "#a0a0a0",
+  textMuted: "#666",
+  accent: "#3b82f6",
+  accentHover: "#2563eb",
+  success: "#22c55e",
+  warning: "#eab308",
+  error: "#ef4444",
+  info: "#06b6d4"
+};
+var lightTheme = {
+  bg: "#ffffff",
+  bgSecondary: "#f8f9fa",
+  bgTertiary: "#f1f3f4",
+  border: "#e5e7eb",
+  borderLight: "#d1d5db",
+  text: "#111827",
+  textSecondary: "#4b5563",
+  textMuted: "#9ca3af",
+  accent: "#2563eb",
+  accentHover: "#1d4ed8",
+  success: "#16a34a",
+  warning: "#ca8a04",
+  error: "#dc2626",
+  info: "#0891b2"
+};
+function generateStyles(id, c, 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 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-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-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-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: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-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.open .dbg-section-content { display: block; }
+#${id} .dbg-section .dbg-chevron { transition: transform 0.2s; color: ${c.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: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-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-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-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.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-ctx-grid { display: flex; flex-direction: column; gap: 4px; }
+#${id} .dbg-ctx-item { background: ${c.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-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-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-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-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-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-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; }
+`;
+}
+function getPosition(pos) {
+  switch (pos) {
+    case "bottom-left":
+      return "bottom: 16px; left: 16px;";
+    case "top-right":
+      return "top: 16px; right: 16px;";
+    case "top-left":
+      return "top: 16px; left: 16px;";
+    default:
+      return "bottom: 16px; right: 16px;";
+  }
+}
+var icons = {
+  logo: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`,
+  close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>`,
+  chevron: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
+  perf: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>`,
+  template: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>`,
+  context: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>`,
+  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>`
+};
+function generateToggle(id, data, c) {
+  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'">
+  ${icons.logo}
+  <span>Binja</span>
+  <span class="dbg-time">${time2}ms</span>
+</button>`;
+}
+function generatePanel(id, data, c, opts) {
+  const time2 = (data.totalTime || 0).toFixed(2);
+  const mode = data.mode === "aot" ? "AOT" : "Runtime";
+  return `
+<div class="dbg-panel">
+  <div class="dbg-header">
+    <div class="dbg-logo">${icons.logo} Binja Debugger</div>
+    <div class="dbg-meta">
+      <span class="dbg-badge mode">${mode}</span>
+      <span class="dbg-badge time">${time2}ms</span>
+      <button class="dbg-close" onclick="document.querySelector('#${id} .dbg-panel').classList.remove('open');document.querySelector('#${id} .dbg-toggle').style.display='inline-flex'">${icons.close}</button>
+    </div>
+  </div>
+  <div class="dbg-body">
+    ${generatePerfSection(data)}
+    ${generateTemplatesSection(data)}
+    ${generateContextSection(data)}
+    ${generateFiltersSection(data)}
+    ${generateCacheSection(data)}
+    ${generateWarningsSection(data)}
+  </div>
+</div>`;
+}
+function generatePerfSection(data) {
+  const total = data.totalTime || 0.01;
+  const lexer = data.lexerTime || 0;
+  const parser = data.parserTime || 0;
+  const render = data.renderTime || 0;
+  return `
+<div class="dbg-section open">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.perf} Performance</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-row">
+      <span class="dbg-label">Lexer</span>
+      <span class="dbg-value">${lexer.toFixed(2)}ms</span>
+    </div>
+    <div class="dbg-bar"><div class="dbg-bar-fill lexer" style="width:${lexer / total * 100}%"></div></div>
+    <div class="dbg-row">
+      <span class="dbg-label">Parser</span>
+      <span class="dbg-value">${parser.toFixed(2)}ms</span>
+    </div>
+    <div class="dbg-bar"><div class="dbg-bar-fill parser" style="width:${parser / total * 100}%"></div></div>
+    <div class="dbg-row">
+      <span class="dbg-label">Render</span>
+      <span class="dbg-value">${render.toFixed(2)}ms</span>
+    </div>
+    <div class="dbg-bar"><div class="dbg-bar-fill render" style="width:${render / total * 100}%"></div></div>
+    <div class="dbg-row" style="margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1)">
+      <span class="dbg-label" style="font-weight:600">Total</span>
+      <span class="dbg-value" style="font-weight:600">${total.toFixed(2)}ms</span>
+    </div>
+  </div>
+</div>`;
+}
+function generateTemplatesSection(data) {
+  if (data.templateChain.length === 0)
+    return "";
+  const templates = data.templateChain.map((t) => `
+    <div class="dbg-template">
+      ${icons.file}
+      <span class="dbg-template-name">${t.name}</span>
+      <span class="dbg-template-tag ${t.type}">${t.type}</span>
+    </div>
+  `).join("");
+  return `
+<div class="dbg-section">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.template} Templates</span>
+    <span class="dbg-section-meta">${data.templateChain.length}</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-templates">${templates}</div>
+  </div>
+</div>`;
+}
+function generateContextSection(data) {
+  const keys = Object.keys(data.contextSnapshot);
+  if (keys.length === 0)
+    return "";
+  const items = keys.map((key) => renderContextValue(key, data.contextSnapshot[key])).join("");
+  return `
+<div class="dbg-section">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.context} Context</span>
+    <span class="dbg-section-meta">${keys.length} vars</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-ctx-grid">${items}</div>
+  </div>
+</div>`;
+}
+function renderContextValue(key, ctx) {
+  const arrow = ctx.expandable ? `<svg class="dbg-ctx-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>` : "";
+  const expandableClass = ctx.expandable ? "expandable" : "";
+  const onClick = ctx.expandable ? `onclick="this.parentElement.classList.toggle('open')"` : "";
+  let children = "";
+  if (ctx.expandable && ctx.children) {
+    const childItems = Object.entries(ctx.children).map(([k, v]) => renderContextValue(k, v)).join("");
+    children = `<div class="dbg-ctx-children">${childItems}</div>`;
+  }
+  return `
+  <div class="dbg-ctx-item">
+    <div class="dbg-ctx-row ${expandableClass}" ${onClick}>
+      <div class="dbg-ctx-key">
+        ${arrow}
+        <span class="dbg-ctx-name">${escapeHtml(key)}</span>
+        <span class="dbg-ctx-type">${ctx.type}</span>
+      </div>
+      <span class="dbg-ctx-preview">${escapeHtml(ctx.preview)}</span>
+    </div>
+    ${children}
+  </div>`;
+}
+function generateFiltersSection(data) {
+  const filters = Array.from(data.filtersUsed.entries());
+  if (filters.length === 0)
+    return "";
+  const items = filters.map(([name, count]) => `<span class="dbg-filter">${name}<span class="dbg-filter-count">\xD7${count}</span></span>`).join("");
+  return `
+<div class="dbg-section">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.filter} Filters</span>
+    <span class="dbg-section-meta">${filters.length}</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-filters">${items}</div>
+  </div>
+</div>`;
+}
+function generateCacheSection(data) {
+  const total = data.cacheHits + data.cacheMisses;
+  if (total === 0)
+    return "";
+  return `
+<div class="dbg-section">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.cache} Cache</span>
+    <span class="dbg-section-meta">${(data.cacheHits / total * 100).toFixed(0)}% hit</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-cache">
+      <div class="dbg-cache-stat">
+        <div class="dbg-cache-num hit">${data.cacheHits}</div>
+        <div class="dbg-cache-label">Cache Hits</div>
+      </div>
+      <div class="dbg-cache-stat">
+        <div class="dbg-cache-num miss">${data.cacheMisses}</div>
+        <div class="dbg-cache-label">Cache Misses</div>
+      </div>
+    </div>
+  </div>
+</div>`;
+}
+function generateWarningsSection(data) {
+  if (data.warnings.length === 0)
+    return "";
+  const items = data.warnings.map((w) => `
+    <div class="dbg-warning">
+      ${icons.warning}
+      <span class="dbg-warning-text">${escapeHtml(w)}</span>
+    </div>
+  `).join("");
+  return `
+<div class="dbg-section open">
+  <div class="dbg-section-header" onclick="this.parentElement.classList.toggle('open')">
+    <span class="dbg-section-title">${icons.warning} Warnings</span>
+    <span class="dbg-section-meta" style="color:#eab308">${data.warnings.length}</span>
+    <span class="dbg-chevron">${icons.chevron}</span>
+  </div>
+  <div class="dbg-section-content">
+    <div class="dbg-warnings">${items}</div>
+  </div>
+</div>`;
+}
+function generateScript(id) {
+  return `
+(function(){
+  var panel = document.getElementById('${id}');
+  if (!panel) return;
+  var header = panel.querySelector('.dbg-header');
+  if (!header) return;
+  var isDrag = false, startX, startY, startL, startT;
+  header.style.cursor = 'grab';
+  header.onmousedown = function(e) {
+    if (e.target.closest('.dbg-close')) return;
+    isDrag = true;
+    header.style.cursor = 'grabbing';
+    startX = e.clientX;
+    startY = e.clientY;
+    var r = panel.getBoundingClientRect();
+    startL = r.left;
+    startT = r.top;
+    panel.style.right = 'auto';
+    panel.style.bottom = 'auto';
+    panel.style.left = startL + 'px';
+    panel.style.top = startT + 'px';
+  };
+  document.onmousemove = function(e) {
+    if (!isDrag) return;
+    panel.style.left = (startL + e.clientX - startX) + 'px';
+    panel.style.top = (startT + e.clientY - startY) + 'px';
+  };
+  document.onmouseup = function() {
+    isDrag = false;
+    header.style.cursor = 'grab';
+  };
+})();`;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/debug/index.ts
+async function renderWithDebug(env, templateName, context = {}, options = {}) {
+  const collector = startDebugCollection();
+  collector.captureContext(context);
+  collector.addTemplate(templateName, "root");
+  collector.setMode("runtime");
+  collector.startRender();
+  const html = await env.render(templateName, context);
+  collector.endRender();
+  const data = endDebugCollection();
+  if (options.htmlOnly !== false) {
+    const isHtml = html.includes("<html") || html.includes("<body") || html.includes("<!DOCTYPE");
+    if (!isHtml) {
+      return html;
+    }
+  }
+  const panel = generateDebugPanel(data, options.panel);
+  if (html.includes("</body>")) {
+    return html.replace("</body>", `${panel}</body>`);
+  }
+  return html + panel;
+}
+async function renderStringWithDebug(env, source, context = {}, options = {}) {
+  const collector = startDebugCollection();
+  collector.captureContext(context);
+  collector.setMode("runtime");
+  collector.startRender();
+  const html = await env.renderString(source, context);
+  collector.endRender();
+  const data = endDebugCollection();
+  if (options.htmlOnly !== false) {
+    const isHtml = html.includes("<html") || html.includes("<body");
+    if (!isHtml) {
+      return html;
+    }
+  }
+  const panel = generateDebugPanel(data, options.panel);
+  if (html.includes("</body>")) {
+    return html.replace("</body>", `${panel}</body>`);
+  }
+  return html + panel;
+}
+function createDebugRenderer(env, options = {}) {
+  return {
+    async render(templateName, context = {}) {
+      return renderWithDebug(env, templateName, context, options);
+    },
+    async renderString(source, context = {}) {
+      return renderStringWithDebug(env, source, context, options);
+    }
+  };
+}
+function debugMiddleware(env, options = {}) {
+  return {
+    hono() {
+      return async (c, next) => {
+        await next();
+        const contentType = c.res.headers.get("content-type") || "";
+        if (!contentType.includes("text/html"))
+          return;
+        const body = await c.res.text();
+        const collector = startDebugCollection();
+        collector.captureContext({});
+        collector.setMode("runtime");
+        collector.endRender();
+        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
+        });
+      };
+    },
+    express() {
+      return (req, res, next) => {
+        const originalSend = res.send.bind(res);
+        res.send = (body) => {
+          const contentType = res.get("Content-Type") || "";
+          if (!contentType.includes("text/html") || typeof body !== "string") {
+            return originalSend(body);
+          }
+          const collector = startDebugCollection();
+          collector.captureContext({});
+          collector.setMode("runtime");
+          collector.endRender();
+          const data = endDebugCollection();
+          const panel = generateDebugPanel(data, options.panel);
+          const newBody = body.includes("</body>") ? body.replace("</body>", `${panel}</body>`) : body + panel;
+          return originalSend(newBody);
+        };
+        next();
+      };
+    }
+  };
+}
+
 // src/index.ts
 import * as path from "path";
 var URL_PARAM_REGEX = /<[^>]+>|:[a-zA-Z_]+|\(\?P<[^>]+>\[[^\]]+\]\)/g;
@@ -3013,7 +4342,9 @@ class Environment {
       urlResolver: options.urlResolver ?? this.defaultUrlResolver.bind(this),
       staticResolver: options.staticResolver ?? this.defaultStaticResolver.bind(this),
       cache: options.cache ?? true,
-      extensions: options.extensions ?? [".html", ".jinja", ".jinja2", ""]
+      extensions: options.extensions ?? [".html", ".jinja", ".jinja2", ""],
+      debug: options.debug ?? false,
+      debugOptions: options.debugOptions ?? {}
     };
     this.runtime = new Runtime({
       autoescape: this.options.autoescape,
@@ -3025,13 +4356,60 @@ class Environment {
     });
   }
   async render(templateName, context = {}) {
+    if (this.options.debug) {
+      return this.renderWithDebug(templateName, context);
+    }
     const ast = await this.loadTemplate(templateName);
     return this.runtime.render(ast, context);
   }
   async renderString(source, context = {}) {
+    if (this.options.debug) {
+      return this.renderStringWithDebug(source, context);
+    }
     const ast = this.compile(source);
     return this.runtime.render(ast, context);
   }
+  async renderWithDebug(templateName, context) {
+    const collector = startDebugCollection();
+    collector.captureContext(context);
+    collector.addTemplate(templateName, "root");
+    collector.setMode("runtime");
+    collector.startRender();
+    const ast = await this.loadTemplate(templateName);
+    let html = this.runtime.render(ast, context);
+    if (html && typeof html.then === "function") {
+      html = await html;
+    }
+    collector.endRender();
+    const data = endDebugCollection();
+    return this.injectDebugPanel(String(html || ""), data);
+  }
+  async renderStringWithDebug(source, context) {
+    const collector = startDebugCollection();
+    collector.captureContext(context);
+    collector.setMode("runtime");
+    collector.startRender();
+    const ast = this.compile(source);
+    let html = this.runtime.render(ast, context);
+    if (html && typeof html.then === "function") {
+      html = await html;
+    }
+    collector.endRender();
+    const data = endDebugCollection();
+    return this.injectDebugPanel(String(html || ""), data);
+  }
+  injectDebugPanel(html, data) {
+    if (!html || typeof html !== "string")
+      return html || "";
+    const isHtml = html.includes("<html") || html.includes("<body") || html.includes("<!DOCTYPE");
+    if (!isHtml)
+      return html;
+    const panel = generateDebugPanel(data, this.options.debugOptions);
+    if (html.includes("</body>")) {
+      return html.replace("</body>", `${panel}</body>`);
+    }
+    return html + panel;
+  }
   compile(source) {
     const lexer = new Lexer(source);
     const tokens = lexer.tokenize();
@@ -3135,6 +4513,70 @@ function compile(source, options = {}) {
   const ast = parser.parse();
   return compileToFunction(ast, options);
 }
+async function compileWithInheritance(templateName, options) {
+  const extensions = options.extensions ?? [".html", ".jinja", ".jinja2", ""];
+  const templatesDir = path.resolve(options.templates);
+  const loader = {
+    load(name) {
+      const basePath = path.resolve(templatesDir, name);
+      for (const ext of extensions) {
+        const fullPath = basePath + ext;
+        const file = Bun.file(fullPath);
+        const fs = __require("fs");
+        if (fs.existsSync(fullPath)) {
+          return fs.readFileSync(fullPath, "utf-8");
+        }
+      }
+      throw new Error(`Template not found: ${name}`);
+    },
+    parse(source2) {
+      const lexer = new Lexer(source2);
+      const tokens = lexer.tokenize();
+      const parser = new Parser(tokens);
+      return parser.parse();
+    }
+  };
+  const source = loader.load(templateName);
+  const ast = loader.parse(source);
+  const check = canFlatten(ast);
+  if (!check.canFlatten) {
+    throw new Error(`Cannot compile template with AOT: ${check.reason}
+` + `Use Environment.render() for dynamic template names.`);
+  }
+  const flattenedAst = flattenTemplate(ast, { loader });
+  return compileToFunction(flattenedAst, options);
+}
+async function compileWithInheritanceToCode(templateName, options) {
+  const extensions = options.extensions ?? [".html", ".jinja", ".jinja2", ""];
+  const templatesDir = path.resolve(options.templates);
+  const fs = __require("fs");
+  const loader = {
+    load(name) {
+      const basePath = path.resolve(templatesDir, name);
+      for (const ext of extensions) {
+        const fullPath = basePath + ext;
+        if (fs.existsSync(fullPath)) {
+          return fs.readFileSync(fullPath, "utf-8");
+        }
+      }
+      throw new Error(`Template not found: ${name}`);
+    },
+    parse(source2) {
+      const lexer = new Lexer(source2);
+      const tokens = lexer.tokenize();
+      const parser = new Parser(tokens);
+      return parser.parse();
+    }
+  };
+  const source = loader.load(templateName);
+  const ast = loader.parse(source);
+  const check = canFlatten(ast);
+  if (!check.canFlatten) {
+    throw new Error(`Cannot compile template with AOT: ${check.reason}`);
+  }
+  const flattenedAst = flattenTemplate(ast, { loader });
+  return compileToString(flattenedAst, options);
+}
 function compileToCode(source, options = {}) {
   const lexer = new Lexer(source);
   const tokens = lexer.tokenize();
@@ -3143,9 +4585,18 @@ function compileToCode(source, options = {}) {
   return compileToString(ast, options);
 }
 export {
+  renderWithDebug,
+  renderStringWithDebug,
   render,
+  generateDebugPanel,
+  flattenTemplate,
+  debugMiddleware,
+  createDebugRenderer,
+  compileWithInheritanceToCode,
+  compileWithInheritance,
   compileToCode,
   compile,
+  canFlatten,
   builtinTests,
   builtinFilters,
   TokenType,