binja 0.7.0 → 0.7.1

package/dist/debug/index.js

@@ -1,667 +1,275 @@
 // @bun
-// 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,
-      queries: [],
-      queryStats: {
-        count: 0,
-        totalDuration: 0,
-        slowCount: 0,
-        n1Count: 0,
-        queryCounts: new Map
-      },
-      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);
-  }
-  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;
-  }
-  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 getDebugCollector() {
-  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",
-  height: 300,
-  width: 400,
-  open: false,
-  dark: true
-};
-function generateDebugPanel(data, options = {}) {
-  const opts = { ...DEFAULT_OPTIONS, ...options };
-  const id = `binja-dbg-${Date.now()}`;
-  const c = opts.dark ? darkTheme : lightTheme;
-  return `
+class E{data;constructor(){this.data={startTime:performance.now(),templateChain:[],mode:"runtime",isAsync:!1,contextKeys:[],contextSnapshot:{},filtersUsed:new Map,testsUsed:new Map,cacheHits:0,cacheMisses:0,queries:[],queryStats:{count:0,totalDuration:0,slowCount:0,n1Count:0,queryCounts:new Map},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(J,K,X){if(this.data.templateChain.push({name:J,type:K,parent:X}),K==="root")this.data.rootTemplate=J}setMode(J){this.data.mode=J}setAsync(J){this.data.isAsync=J}captureContext(J){this.data.contextKeys=Object.keys(J);for(let[K,X]of Object.entries(J))this.data.contextSnapshot[K]=this.captureValue(X)}captureValue(J,K=0){let X=this.getType(J),Z=this.getPreview(J),Y=this.isExpandable(J),$={type:X,preview:Z,value:J,expandable:Y};if(Y&&K<3){if($.children={},Array.isArray(J))J.forEach((j,U)=>{$.children[String(U)]=this.captureValue(j,K+1)});else if(typeof J==="object"&&J!==null)for(let[j,U]of Object.entries(J))$.children[j]=this.captureValue(U,K+1)}return $}isExpandable(J){if(J===null||J===void 0)return!1;if(Array.isArray(J))return J.length>0;if(typeof J==="object")return Object.keys(J).length>0;return!1}getType(J){if(J===null)return"null";if(J===void 0)return"undefined";if(Array.isArray(J))return`Array(${J.length})`;if(J instanceof Date)return"Date";if(typeof J==="object")return"Object";return typeof J}getPreview(J,K=50){if(J===null)return"null";if(J===void 0)return"undefined";if(typeof J==="string")return J.length>K?`"${J.slice(0,K)}..."`:`"${J}"`;if(typeof J==="number"||typeof J==="boolean")return String(J);if(Array.isArray(J)){if(J.length===0)return"[]";if(J.length<=3)return`[${J.map((Z)=>this.getPreview(Z,15)).join(", ")}]`;return`[${this.getPreview(J[0],15)}, ... +${J.length-1}]`}if(J instanceof Date)return J.toISOString();if(typeof J==="object"){let X=Object.keys(J);if(X.length===0)return"{}";if(X.length<=2)return`{ ${X.join(", ")} }`;return`{ ${X.slice(0,2).join(", ")}, ... +${X.length-2} }`}if(typeof J==="function")return"function()";return String(J)}recordFilter(J){this.data.filtersUsed.set(J,(this.data.filtersUsed.get(J)||0)+1)}recordTest(J){this.data.testsUsed.set(J,(this.data.testsUsed.get(J)||0)+1)}recordCacheHit(){this.data.cacheHits++}recordCacheMiss(){this.data.cacheMisses++}addWarning(J){this.data.warnings.push(J)}recordQuery(J){let K=this.normalizeQuery(J.sql),X=this.data.queryStats.queryCounts.get(K)||0;this.data.queryStats.queryCounts.set(K,X+1);let Z=X>=2,Y={...J,timestamp:performance.now(),isN1:Z};if(this.data.queries.push(Y),this.data.queryStats.count++,this.data.queryStats.totalDuration+=J.duration,J.duration>100)this.data.queryStats.slowCount++;if(Z&&X===2)this.data.queryStats.n1Count++,this.addWarning(`N+1 query detected: ${K.slice(0,50)}...`)}normalizeQuery(J){return J.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}getSummary(){return{totalTime:this.data.totalTime||0,templateCount:this.data.templateChain.length,filterCount:this.data.filtersUsed.size,mode:this.data.mode}}}var M=null;function R(){return M=new E,M}function z(){return M}function I(){if(M){let J=M.getData();return M=null,J}return null}var F={position:"bottom",height:300,width:400,open:!1,dark:!0};function O(J,K={}){let X={...F,...K},Z=`binja-dbg-${Date.now()}`,Y=X.dark?L:N;return`
 <!-- Binja Debug Panel -->
-<div id="${id}" class="binja-devtools" data-position="${opts.position}" data-open="${opts.open}">
-<style>${generateStyles(id, c, opts)}</style>
-${generateHTML(id, data, c, opts)}
-<script>${generateScript(id, data, opts)}</script>
+<div id="${Z}" class="binja-devtools" data-position="${X.position}" data-open="${X.open}">
+<style>${T(Z,Y,X)}</style>
+${P(Z,J,Y,X)}
+<script>${x(Z,J,X)}</script>
 </div>
 <!-- /Binja Debug Panel -->
-`;
-}
-var darkTheme = {
-  bg: "#1e1e1e",
-  bgPanel: "#252526",
-  bgHover: "#2a2d2e",
-  bgActive: "#37373d",
-  border: "#3c3c3c",
-  text: "#cccccc",
-  textSecondary: "#969696",
-  textMuted: "#6e6e6e",
-  accent: "#0078d4",
-  accentHover: "#1c86d8",
-  success: "#4ec9b0",
-  warning: "#dcdcaa",
-  error: "#f14c4c",
-  info: "#75beff",
-  string: "#ce9178",
-  number: "#b5cea8",
-  keyword: "#569cd6"
-};
-var lightTheme = {
-  bg: "#f3f3f3",
-  bgPanel: "#ffffff",
-  bgHover: "#e8e8e8",
-  bgActive: "#d4d4d4",
-  border: "#d4d4d4",
-  text: "#1e1e1e",
-  textSecondary: "#616161",
-  textMuted: "#a0a0a0",
-  accent: "#0078d4",
-  accentHover: "#106ebe",
-  success: "#16825d",
-  warning: "#bf8803",
-  error: "#cd3131",
-  info: "#0078d4",
-  string: "#a31515",
-  number: "#098658",
-  keyword: "#0000ff"
-};
-function generateStyles(id, c, opts) {
-  return `
-#${id} { --bg: ${c.bg}; --bg-panel: ${c.bgPanel}; --bg-hover: ${c.bgHover}; --bg-active: ${c.bgActive}; --border: ${c.border}; --text: ${c.text}; --text-secondary: ${c.textSecondary}; --text-muted: ${c.textMuted}; --accent: ${c.accent}; --success: ${c.success}; --warning: ${c.warning}; --error: ${c.error}; --string: ${c.string}; --number: ${c.number}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 12px; line-height: 1.4; color: var(--text); }
-#${id} * { box-sizing: border-box; margin: 0; padding: 0; }
+`}var L={bg:"#1e1e1e",bgPanel:"#252526",bgHover:"#2a2d2e",bgActive:"#37373d",border:"#3c3c3c",text:"#cccccc",textSecondary:"#969696",textMuted:"#6e6e6e",accent:"#0078d4",accentHover:"#1c86d8",success:"#4ec9b0",warning:"#dcdcaa",error:"#f14c4c",info:"#75beff",string:"#ce9178",number:"#b5cea8",keyword:"#569cd6"},N={bg:"#f3f3f3",bgPanel:"#ffffff",bgHover:"#e8e8e8",bgActive:"#d4d4d4",border:"#d4d4d4",text:"#1e1e1e",textSecondary:"#616161",textMuted:"#a0a0a0",accent:"#0078d4",accentHover:"#106ebe",success:"#16825d",warning:"#bf8803",error:"#cd3131",info:"#0078d4",string:"#a31515",number:"#098658",keyword:"#0000ff"};function T(J,K,X){return`
+#${J} { --bg: ${K.bg}; --bg-panel: ${K.bgPanel}; --bg-hover: ${K.bgHover}; --bg-active: ${K.bgActive}; --border: ${K.border}; --text: ${K.text}; --text-secondary: ${K.textSecondary}; --text-muted: ${K.textMuted}; --accent: ${K.accent}; --success: ${K.success}; --warning: ${K.warning}; --error: ${K.error}; --string: ${K.string}; --number: ${K.number}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 12px; line-height: 1.4; color: var(--text); }
+#${J} * { box-sizing: border-box; margin: 0; padding: 0; }
 
 /* Toggle Button */
-#${id} .devtools-toggle { position: fixed; bottom: 10px; right: 10px; z-index: 2147483646; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.15s; }
-#${id} .devtools-toggle:hover { background: var(--bg-hover); border-color: var(--accent); }
-#${id} .devtools-toggle svg { width: 14px; height: 14px; color: var(--accent); }
-#${id} .devtools-toggle .badge { padding: 2px 6px; background: var(--accent); color: #fff; border-radius: 3px; font-size: 10px; }
-#${id}[data-open="true"] .devtools-toggle { display: none; }
+#${J} .devtools-toggle { position: fixed; bottom: 10px; right: 10px; z-index: 2147483646; display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.15s; }
+#${J} .devtools-toggle:hover { background: var(--bg-hover); border-color: var(--accent); }
+#${J} .devtools-toggle svg { width: 14px; height: 14px; color: var(--accent); }
+#${J} .devtools-toggle .badge { padding: 2px 6px; background: var(--accent); color: #fff; border-radius: 3px; font-size: 10px; }
+#${J}[data-open="true"] .devtools-toggle { display: none; }
 
 /* Panel Container */
-#${id} .devtools-panel { display: none; position: fixed; z-index: 2147483647; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.3); }
-#${id}[data-open="true"] .devtools-panel { display: flex; flex-direction: column; }
-#${id}[data-position="bottom"] .devtools-panel { left: 0; right: 0; bottom: 0; height: ${opts.height}px; border-left: none; border-right: none; border-bottom: none; }
-#${id}[data-position="right"] .devtools-panel { top: 0; right: 0; bottom: 0; width: ${opts.width}px; border-top: none; border-right: none; border-bottom: none; }
-#${id}[data-position="popup"] .devtools-panel { bottom: 50px; right: 20px; width: 700px; height: 500px; border-radius: 8px; }
+#${J} .devtools-panel { display: none; position: fixed; z-index: 2147483647; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.3); }
+#${J}[data-open="true"] .devtools-panel { display: flex; flex-direction: column; }
+#${J}[data-position="bottom"] .devtools-panel { left: 0; right: 0; bottom: 0; height: ${X.height}px; border-left: none; border-right: none; border-bottom: none; }
+#${J}[data-position="right"] .devtools-panel { top: 0; right: 0; bottom: 0; width: ${X.width}px; border-top: none; border-right: none; border-bottom: none; }
+#${J}[data-position="popup"] .devtools-panel { bottom: 50px; right: 20px; width: 700px; height: 500px; border-radius: 8px; }
 
 /* Resize Handle */
-#${id} .devtools-resize { position: absolute; background: transparent; }
-#${id}[data-position="bottom"] .devtools-resize { top: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; }
-#${id}[data-position="right"] .devtools-resize { top: 0; left: 0; bottom: 0; width: 4px; cursor: ew-resize; }
-#${id} .devtools-resize:hover { background: var(--accent); }
+#${J} .devtools-resize { position: absolute; background: transparent; }
+#${J}[data-position="bottom"] .devtools-resize { top: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; }
+#${J}[data-position="right"] .devtools-resize { top: 0; left: 0; bottom: 0; width: 4px; cursor: ew-resize; }
+#${J} .devtools-resize:hover { background: var(--accent); }
 
 /* Toolbar */
-#${id} .devtools-toolbar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
-#${id} .devtools-tabs { display: flex; height: 100%; }
-#${id} .devtools-tab { display: flex; align-items: center; gap: 4px; padding: 0 12px; border: none; background: none; color: var(--text-secondary); font-size: 11px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.1s; }
-#${id} .devtools-tab:hover { color: var(--text); background: var(--bg-hover); }
-#${id} .devtools-tab.active { color: var(--text); border-bottom-color: var(--accent); }
-#${id} .devtools-tab svg { width: 12px; height: 12px; opacity: 0.7; }
-#${id} .devtools-tab .count { margin-left: 4px; padding: 1px 5px; background: var(--bg-active); border-radius: 8px; font-size: 10px; }
-#${id} .devtools-tab .count.warn { background: rgba(241,76,76,0.2); color: var(--error); }
-#${id} .devtools-actions { display: flex; align-items: center; gap: 4px; }
-#${id} .devtools-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 3px; }
-#${id} .devtools-btn:hover { background: var(--bg-hover); color: var(--text); }
-#${id} .devtools-btn svg { width: 14px; height: 14px; }
+#${J} .devtools-toolbar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; }
+#${J} .devtools-tabs { display: flex; height: 100%; }
+#${J} .devtools-tab { display: flex; align-items: center; gap: 4px; padding: 0 12px; border: none; background: none; color: var(--text-secondary); font-size: 11px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.1s; }
+#${J} .devtools-tab:hover { color: var(--text); background: var(--bg-hover); }
+#${J} .devtools-tab.active { color: var(--text); border-bottom-color: var(--accent); }
+#${J} .devtools-tab svg { width: 12px; height: 12px; opacity: 0.7; }
+#${J} .devtools-tab .count { margin-left: 4px; padding: 1px 5px; background: var(--bg-active); border-radius: 8px; font-size: 10px; }
+#${J} .devtools-tab .count.warn { background: rgba(241,76,76,0.2); color: var(--error); }
+#${J} .devtools-actions { display: flex; align-items: center; gap: 4px; }
+#${J} .devtools-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 3px; }
+#${J} .devtools-btn:hover { background: var(--bg-hover); color: var(--text); }
+#${J} .devtools-btn svg { width: 14px; height: 14px; }
 
 /* Content Area */
-#${id} .devtools-content { flex: 1; overflow: hidden; }
-#${id} .devtools-pane { display: none; height: 100%; overflow: auto; padding: 8px; }
-#${id} .devtools-pane.active { display: block; }
+#${J} .devtools-content { flex: 1; overflow: hidden; }
+#${J} .devtools-pane { display: none; height: 100%; overflow: auto; padding: 8px; }
+#${J} .devtools-pane.active { display: block; }
 
 /* Performance Tab */
-#${id} .perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
-#${id} .perf-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px; text-align: center; }
-#${id} .perf-card-value { font-size: 20px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; color: var(--success); }
-#${id} .perf-card-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; }
-#${id} .perf-breakdown { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
-#${id} .perf-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
-#${id} .perf-row:last-child { border-bottom: none; }
-#${id} .perf-row-label { flex: 1; font-size: 11px; color: var(--text-secondary); }
-#${id} .perf-row-value { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; min-width: 60px; text-align: right; }
-#${id} .perf-row-bar { flex: 2; height: 4px; background: var(--bg-active); border-radius: 2px; margin: 0 12px; overflow: hidden; }
-#${id} .perf-row-fill { height: 100%; border-radius: 2px; }
-#${id} .perf-row-fill.lexer { background: ${c.info}; }
-#${id} .perf-row-fill.parser { background: ${c.warning}; }
-#${id} .perf-row-fill.render { background: ${c.success}; }
+#${J} .perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
+#${J} .perf-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px; text-align: center; }
+#${J} .perf-card-value { font-size: 20px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; color: var(--success); }
+#${J} .perf-card-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; }
+#${J} .perf-breakdown { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+#${J} .perf-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+#${J} .perf-row:last-child { border-bottom: none; }
+#${J} .perf-row-label { flex: 1; font-size: 11px; color: var(--text-secondary); }
+#${J} .perf-row-value { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; min-width: 60px; text-align: right; }
+#${J} .perf-row-bar { flex: 2; height: 4px; background: var(--bg-active); border-radius: 2px; margin: 0 12px; overflow: hidden; }
+#${J} .perf-row-fill { height: 100%; border-radius: 2px; }
+#${J} .perf-row-fill.lexer { background: ${K.info}; }
+#${J} .perf-row-fill.parser { background: ${K.warning}; }
+#${J} .perf-row-fill.render { background: ${K.success}; }
 
 /* Context Tab - Tree View */
-#${id} .tree { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 11px; }
-#${id} .tree-item { }
-#${id} .tree-row { display: flex; align-items: center; padding: 2px 4px; cursor: default; border-radius: 2px; }
-#${id} .tree-row:hover { background: var(--bg-hover); }
-#${id} .tree-row.expandable { cursor: pointer; }
-#${id} .tree-arrow { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.1s; flex-shrink: 0; }
-#${id} .tree-item.open > .tree-row .tree-arrow { transform: rotate(90deg); }
-#${id} .tree-key { color: var(--keyword); margin-right: 4px; }
-#${id} .tree-colon { color: var(--text-muted); margin-right: 6px; }
-#${id} .tree-value { color: var(--text); }
-#${id} .tree-value.string { color: var(--string); }
-#${id} .tree-value.number { color: var(--number); }
-#${id} .tree-value.null { color: var(--text-muted); font-style: italic; }
-#${id} .tree-type { color: var(--text-muted); margin-left: 6px; font-size: 10px; }
-#${id} .tree-children { display: none; padding-left: 16px; }
-#${id} .tree-item.open > .tree-children { display: block; }
+#${J} .tree { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 11px; }
+#${J} .tree-item { }
+#${J} .tree-row { display: flex; align-items: center; padding: 2px 4px; cursor: default; border-radius: 2px; }
+#${J} .tree-row:hover { background: var(--bg-hover); }
+#${J} .tree-row.expandable { cursor: pointer; }
+#${J} .tree-arrow { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.1s; flex-shrink: 0; }
+#${J} .tree-item.open > .tree-row .tree-arrow { transform: rotate(90deg); }
+#${J} .tree-key { color: var(--keyword); margin-right: 4px; }
+#${J} .tree-colon { color: var(--text-muted); margin-right: 6px; }
+#${J} .tree-value { color: var(--text); }
+#${J} .tree-value.string { color: var(--string); }
+#${J} .tree-value.number { color: var(--number); }
+#${J} .tree-value.null { color: var(--text-muted); font-style: italic; }
+#${J} .tree-type { color: var(--text-muted); margin-left: 6px; font-size: 10px; }
+#${J} .tree-children { display: none; padding-left: 16px; }
+#${J} .tree-item.open > .tree-children { display: block; }
 
 /* Templates Tab */
-#${id} .template-list { display: flex; flex-direction: column; gap: 4px; }
-#${id} .template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
-#${id} .template-icon { width: 14px; height: 14px; color: var(--text-muted); }
-#${id} .template-name { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
-#${id} .template-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 500; }
-#${id} .template-badge.root { background: rgba(0,120,212,0.15); color: var(--accent); }
-#${id} .template-badge.extends { background: rgba(156,86,246,0.15); color: #9c56f6; }
-#${id} .template-badge.include { background: rgba(78,201,176,0.15); color: var(--success); }
+#${J} .template-list { display: flex; flex-direction: column; gap: 4px; }
+#${J} .template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
+#${J} .template-icon { width: 14px; height: 14px; color: var(--text-muted); }
+#${J} .template-name { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
+#${J} .template-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 500; }
+#${J} .template-badge.root { background: rgba(0,120,212,0.15); color: var(--accent); }
+#${J} .template-badge.extends { background: rgba(156,86,246,0.15); color: #9c56f6; }
+#${J} .template-badge.include { background: rgba(78,201,176,0.15); color: var(--success); }
 
 /* Queries Tab */
-#${id} .queries-stats { display: flex; gap: 16px; padding: 8px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; }
-#${id} .queries-stat { text-align: center; }
-#${id} .queries-stat-value { font-size: 16px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .queries-stat-value.warn { color: var(--warning); }
-#${id} .queries-stat-value.error { color: var(--error); }
-#${id} .queries-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
-#${id} .query-list { display: flex; flex-direction: column; gap: 4px; }
-#${id} .query-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
-#${id} .query-item.n1 { border-left: 3px solid var(--error); }
-#${id} .query-item.slow { border-left: 3px solid var(--warning); }
-#${id} .query-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
-#${id} .query-sql { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
-#${id} .query-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
-#${id} .query-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; }
-#${id} .query-badge.n1 { background: rgba(241,76,76,0.15); color: var(--error); }
-#${id} .query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: var(--bg-active); color: var(--text-muted); text-transform: uppercase; }
-#${id} .query-time { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; color: var(--text-secondary); }
-#${id} .query-time.slow { color: var(--warning); }
-#${id} .query-rows { font-size: 10px; color: var(--text-muted); }
+#${J} .queries-stats { display: flex; gap: 16px; padding: 8px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; }
+#${J} .queries-stat { text-align: center; }
+#${J} .queries-stat-value { font-size: 16px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
+#${J} .queries-stat-value.warn { color: var(--warning); }
+#${J} .queries-stat-value.error { color: var(--error); }
+#${J} .queries-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
+#${J} .query-list { display: flex; flex-direction: column; gap: 4px; }
+#${J} .query-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
+#${J} .query-item.n1 { border-left: 3px solid var(--error); }
+#${J} .query-item.slow { border-left: 3px solid var(--warning); }
+#${J} .query-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
+#${J} .query-sql { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
+#${J} .query-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+#${J} .query-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; }
+#${J} .query-badge.n1 { background: rgba(241,76,76,0.15); color: var(--error); }
+#${J} .query-source { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: var(--bg-active); color: var(--text-muted); text-transform: uppercase; }
+#${J} .query-time { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; color: var(--text-secondary); }
+#${J} .query-time.slow { color: var(--warning); }
+#${J} .query-rows { font-size: 10px; color: var(--text-muted); }
 
 /* Filters Tab */
-#${id} .filter-grid { display: flex; flex-wrap: wrap; gap: 6px; }
-#${id} .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
-#${id} .filter-count { color: var(--accent); font-weight: 600; font-size: 10px; }
+#${J} .filter-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+#${J} .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; }
+#${J} .filter-count { color: var(--accent); font-weight: 600; font-size: 10px; }
 
 /* Cache Tab */
-#${id} .cache-stats { display: flex; gap: 20px; }
-#${id} .cache-stat { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 16px; text-align: center; }
-#${id} .cache-value { font-size: 32px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
-#${id} .cache-value.hit { color: var(--success); }
-#${id} .cache-value.miss { color: var(--error); }
-#${id} .cache-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+#${J} .cache-stats { display: flex; gap: 20px; }
+#${J} .cache-stat { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 16px; text-align: center; }
+#${J} .cache-value { font-size: 32px; font-weight: 600; font-family: 'SF Mono', Monaco, monospace; }
+#${J} .cache-value.hit { color: var(--success); }
+#${J} .cache-value.miss { color: var(--error); }
+#${J} .cache-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
 
 /* Warnings Tab */
-#${id} .warning-list { display: flex; flex-direction: column; gap: 6px; }
-#${id} .warning-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(241,76,76,0.08); border: 1px solid rgba(241,76,76,0.2); border-radius: 4px; }
-#${id} .warning-icon { color: var(--error); flex-shrink: 0; width: 14px; height: 14px; }
-#${id} .warning-text { font-size: 11px; color: var(--text); }
+#${J} .warning-list { display: flex; flex-direction: column; gap: 6px; }
+#${J} .warning-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(241,76,76,0.08); border: 1px solid rgba(241,76,76,0.2); border-radius: 4px; }
+#${J} .warning-icon { color: var(--error); flex-shrink: 0; width: 14px; height: 14px; }
+#${J} .warning-text { font-size: 11px; color: var(--text); }
 
 /* Empty State */
-#${id} .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 12px; }
-#${id} .empty-state svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.5; }
-`;
-}
-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>`,
-  minimize: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>`,
-  dock: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 15h18"/></svg>`,
-  dockRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg>`,
-  popup: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v6h6"/></svg>`,
-  arrow: `<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>`,
-  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>`,
-  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>`,
-  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>`,
-  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>`,
-  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>`
-};
-function generateHTML(id, data, c, opts) {
-  const time = (data.totalTime || 0).toFixed(1);
-  const queryCount = data.queries?.length || 0;
-  const hasWarnings = data.warnings.length > 0 || data.queryStats?.n1Count > 0;
-  const tabs = [
-    { id: "perf", icon: icons.perf, label: "Performance", count: `${time}ms` },
-    { id: "context", icon: icons.context, label: "Context", count: Object.keys(data.contextSnapshot).length || null },
-    { id: "templates", icon: icons.template, label: "Templates", count: data.templateChain.length || null },
-    { id: "filters", icon: icons.filter, label: "Filters", count: data.filtersUsed.size || null },
-    { id: "queries", icon: icons.database, label: "Queries", count: queryCount || null, warn: data.queryStats?.n1Count > 0 },
-    { id: "cache", icon: icons.cache, label: "Cache", count: data.cacheHits + data.cacheMisses || null },
-    { id: "warnings", icon: icons.warning, label: "Warnings", count: data.warnings.length || null, warn: hasWarnings }
-  ];
-  const tabsHtml = tabs.map((t, i) => {
-    const countHtml = t.count !== null ? `<span class="count${t.warn ? " warn" : ""}">${t.count}</span>` : "";
-    return `<button class="devtools-tab${i === 0 ? " active" : ""}" data-tab="${t.id}">${t.icon}${t.label}${countHtml}</button>`;
-  }).join("");
-  return `
-<button class="devtools-toggle" onclick="document.getElementById('${id}').dataset.open='true'">
-  ${icons.logo}
+#${J} .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 12px; }
+#${J} .empty-state svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.5; }
+`}var V={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>',minimize:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>',dock:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 15h18"/></svg>',dockRight:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg>',popup:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v6h6"/></svg>',arrow:'<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>',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>',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>',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>',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>',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>'};function P(J,K,X,Z){let Y=(K.totalTime||0).toFixed(1),$=K.queries?.length||0,j=K.warnings.length>0||K.queryStats?.n1Count>0,_=[{id:"perf",icon:V.perf,label:"Performance",count:`${Y}ms`},{id:"context",icon:V.context,label:"Context",count:Object.keys(K.contextSnapshot).length||null},{id:"templates",icon:V.template,label:"Templates",count:K.templateChain.length||null},{id:"filters",icon:V.filter,label:"Filters",count:K.filtersUsed.size||null},{id:"queries",icon:V.database,label:"Queries",count:$||null,warn:K.queryStats?.n1Count>0},{id:"cache",icon:V.cache,label:"Cache",count:K.cacheHits+K.cacheMisses||null},{id:"warnings",icon:V.warning,label:"Warnings",count:K.warnings.length||null,warn:j}].map((G,A)=>{let Q=G.count!==null?`<span class="count${G.warn?" warn":""}">${G.count}</span>`:"";return`<button class="devtools-tab${A===0?" active":""}" data-tab="${G.id}">${G.icon}${G.label}${Q}</button>`}).join("");return`
+<button class="devtools-toggle" onclick="document.getElementById('${J}').dataset.open='true'">
+  ${V.logo}
   <span>Binja</span>
-  <span class="badge">${time}ms</span>
+  <span class="badge">${Y}ms</span>
 </button>
 
 <div class="devtools-panel">
   <div class="devtools-resize"></div>
   <div class="devtools-toolbar">
-    <div class="devtools-tabs">${tabsHtml}</div>
+    <div class="devtools-tabs">${_}</div>
     <div class="devtools-actions">
-      <button class="devtools-btn" title="Dock to bottom" data-dock="bottom">${icons.dock}</button>
-      <button class="devtools-btn" title="Dock to right" data-dock="right">${icons.dockRight}</button>
-      <button class="devtools-btn" title="Popup" data-dock="popup">${icons.popup}</button>
-      <button class="devtools-btn" title="Close" onclick="document.getElementById('${id}').dataset.open='false'">${icons.close}</button>
+      <button class="devtools-btn" title="Dock to bottom" data-dock="bottom">${V.dock}</button>
+      <button class="devtools-btn" title="Dock to right" data-dock="right">${V.dockRight}</button>
+      <button class="devtools-btn" title="Popup" data-dock="popup">${V.popup}</button>
+      <button class="devtools-btn" title="Close" onclick="document.getElementById('${J}').dataset.open='false'">${V.close}</button>
     </div>
   </div>
   <div class="devtools-content">
-    ${generatePerfPane(data)}
-    ${generateContextPane(data)}
-    ${generateTemplatesPane(data)}
-    ${generateFiltersPane(data)}
-    ${generateQueriesPane(data)}
-    ${generateCachePane(data)}
-    ${generateWarningsPane(data)}
+    ${S(K)}
+    ${w(K)}
+    ${k(K)}
+    ${D(K)}
+    ${h(K)}
+    ${C(K)}
+    ${b(K)}
   </div>
-</div>`;
-}
-function generatePerfPane(data) {
-  const total = data.totalTime || 0.01;
-  const lexer = data.lexerTime || 0;
-  const parser = data.parserTime || 0;
-  const render = data.renderTime || 0;
-  const mode = data.mode === "aot" ? "AOT" : "Runtime";
-  return `
+</div>`}function S(J){let K=J.totalTime||0.01,X=J.lexerTime||0,Z=J.parserTime||0,Y=J.renderTime||0,$=J.mode==="aot"?"AOT":"Runtime";return`
 <div class="devtools-pane active" data-pane="perf">
   <div class="perf-grid">
     <div class="perf-card">
-      <div class="perf-card-value">${total.toFixed(2)}ms</div>
+      <div class="perf-card-value">${K.toFixed(2)}ms</div>
       <div class="perf-card-label">Total Time</div>
     </div>
     <div class="perf-card">
-      <div class="perf-card-value" style="color:var(--accent)">${mode}</div>
+      <div class="perf-card-value" style="color:var(--accent)">${$}</div>
       <div class="perf-card-label">Mode</div>
     </div>
     <div class="perf-card">
-      <div class="perf-card-value">${data.templateChain.length}</div>
+      <div class="perf-card-value">${J.templateChain.length}</div>
       <div class="perf-card-label">Templates</div>
     </div>
     <div class="perf-card">
-      <div class="perf-card-value">${data.queries?.length || 0}</div>
+      <div class="perf-card-value">${J.queries?.length||0}</div>
       <div class="perf-card-label">Queries</div>
     </div>
   </div>
   <div class="perf-breakdown">
     <div class="perf-row">
       <span class="perf-row-label">Lexer</span>
-      <div class="perf-row-bar"><div class="perf-row-fill lexer" style="width:${lexer / total * 100}%"></div></div>
-      <span class="perf-row-value">${lexer.toFixed(2)}ms</span>
+      <div class="perf-row-bar"><div class="perf-row-fill lexer" style="width:${X/K*100}%"></div></div>
+      <span class="perf-row-value">${X.toFixed(2)}ms</span>
     </div>
     <div class="perf-row">
       <span class="perf-row-label">Parser</span>
-      <div class="perf-row-bar"><div class="perf-row-fill parser" style="width:${parser / total * 100}%"></div></div>
-      <span class="perf-row-value">${parser.toFixed(2)}ms</span>
+      <div class="perf-row-bar"><div class="perf-row-fill parser" style="width:${Z/K*100}%"></div></div>
+      <span class="perf-row-value">${Z.toFixed(2)}ms</span>
     </div>
     <div class="perf-row">
       <span class="perf-row-label">Render</span>
-      <div class="perf-row-bar"><div class="perf-row-fill render" style="width:${render / total * 100}%"></div></div>
-      <span class="perf-row-value">${render.toFixed(2)}ms</span>
+      <div class="perf-row-bar"><div class="perf-row-fill render" style="width:${Y/K*100}%"></div></div>
+      <span class="perf-row-value">${Y.toFixed(2)}ms</span>
     </div>
   </div>
-</div>`;
-}
-function generateContextPane(data) {
-  const keys = Object.keys(data.contextSnapshot);
-  if (keys.length === 0) {
-    return `<div class="devtools-pane" data-pane="context"><div class="empty-state">${icons.context}<span>No context variables</span></div></div>`;
-  }
-  const items = keys.map((key) => renderTreeItem(key, data.contextSnapshot[key])).join("");
-  return `<div class="devtools-pane" data-pane="context"><div class="tree">${items}</div></div>`;
-}
-function renderTreeItem(key, ctx) {
-  const hasChildren = ctx.expandable && ctx.children && Object.keys(ctx.children).length > 0;
-  const arrowHtml = hasChildren ? `<span class="tree-arrow">${icons.arrow}</span>` : '<span class="tree-arrow" style="visibility:hidden">${icons.arrow}</span>';
-  const expandableClass = hasChildren ? "expandable" : "";
-  const valueClass = getValueClass(ctx.type);
-  let childrenHtml = "";
-  if (hasChildren && ctx.children) {
-    childrenHtml = `<div class="tree-children">${Object.entries(ctx.children).map(([k, v]) => renderTreeItem(k, v)).join("")}</div>`;
-  }
-  return `
+</div>`}function w(J){let K=Object.keys(J.contextSnapshot);if(K.length===0)return`<div class="devtools-pane" data-pane="context"><div class="empty-state">${V.context}<span>No context variables</span></div></div>`;return`<div class="devtools-pane" data-pane="context"><div class="tree">${K.map((Z)=>W(Z,J.contextSnapshot[Z])).join("")}</div></div>`}function W(J,K){let X=K.expandable&&K.children&&Object.keys(K.children).length>0,Z=X?`<span class="tree-arrow">${V.arrow}</span>`:'<span class="tree-arrow" style="visibility:hidden">${icons.arrow}</span>',Y=X?"expandable":"",$=H(K.type),j="";if(X&&K.children)j=`<div class="tree-children">${Object.entries(K.children).map(([U,_])=>W(U,_)).join("")}</div>`;return`
 <div class="tree-item">
-  <div class="tree-row ${expandableClass}">
-    ${arrowHtml}
-    <span class="tree-key">${escapeHtml(key)}</span>
+  <div class="tree-row ${Y}">
+    ${Z}
+    <span class="tree-key">${B(J)}</span>
     <span class="tree-colon">:</span>
-    <span class="tree-value ${valueClass}">${escapeHtml(ctx.preview)}</span>
-    <span class="tree-type">${ctx.type}</span>
+    <span class="tree-value ${$}">${B(K.preview)}</span>
+    <span class="tree-type">${K.type}</span>
   </div>
-  ${childrenHtml}
-</div>`;
-}
-function getValueClass(type) {
-  if (type === "string")
-    return "string";
-  if (type === "number" || type === "integer" || type === "float")
-    return "number";
-  if (type === "null" || type === "undefined")
-    return "null";
-  return "";
-}
-function generateTemplatesPane(data) {
-  if (data.templateChain.length === 0) {
-    return `<div class="devtools-pane" data-pane="templates"><div class="empty-state">${icons.template}<span>No templates loaded</span></div></div>`;
-  }
-  const items = data.templateChain.map((t) => `
+  ${j}
+</div>`}function H(J){if(J==="string")return"string";if(J==="number"||J==="integer"||J==="float")return"number";if(J==="null"||J==="undefined")return"null";return""}function k(J){if(J.templateChain.length===0)return`<div class="devtools-pane" data-pane="templates"><div class="empty-state">${V.template}<span>No templates loaded</span></div></div>`;return`<div class="devtools-pane" data-pane="templates"><div class="template-list">${J.templateChain.map((X)=>`
     <div class="template-item">
-      <span class="template-icon">${icons.template}</span>
-      <span class="template-name">${escapeHtml(t.name)}</span>
-      <span class="template-badge ${t.type}">${t.type}</span>
+      <span class="template-icon">${V.template}</span>
+      <span class="template-name">${B(X.name)}</span>
+      <span class="template-badge ${X.type}">${X.type}</span>
     </div>
-  `).join("");
-  return `<div class="devtools-pane" data-pane="templates"><div class="template-list">${items}</div></div>`;
-}
-function generateFiltersPane(data) {
-  const filters = Array.from(data.filtersUsed.entries());
-  if (filters.length === 0) {
-    return `<div class="devtools-pane" data-pane="filters"><div class="empty-state">${icons.filter}<span>No filters used</span></div></div>`;
-  }
-  const items = filters.map(([name, count]) => `
-    <span class="filter-chip">${escapeHtml(name)}<span class="filter-count">\xD7${count}</span></span>
-  `).join("");
-  return `<div class="devtools-pane" data-pane="filters"><div class="filter-grid">${items}</div></div>`;
-}
-function generateQueriesPane(data) {
-  if (!data.queries || data.queries.length === 0) {
-    return `<div class="devtools-pane" data-pane="queries"><div class="empty-state">${icons.database}<span>No queries recorded</span></div></div>`;
-  }
-  const stats = data.queryStats;
-  const statsHtml = `
+  `).join("")}</div></div>`}function D(J){let K=Array.from(J.filtersUsed.entries());if(K.length===0)return`<div class="devtools-pane" data-pane="filters"><div class="empty-state">${V.filter}<span>No filters used</span></div></div>`;return`<div class="devtools-pane" data-pane="filters"><div class="filter-grid">${K.map(([Z,Y])=>`
+    <span class="filter-chip">${B(Z)}<span class="filter-count">\xD7${Y}</span></span>
+  `).join("")}</div></div>`}function h(J){if(!J.queries||J.queries.length===0)return`<div class="devtools-pane" data-pane="queries"><div class="empty-state">${V.database}<span>No queries recorded</span></div></div>`;let K=J.queryStats,X=`
     <div class="queries-stats">
       <div class="queries-stat">
-        <div class="queries-stat-value">${stats.count}</div>
+        <div class="queries-stat-value">${K.count}</div>
         <div class="queries-stat-label">Queries</div>
       </div>
       <div class="queries-stat">
-        <div class="queries-stat-value">${stats.totalDuration.toFixed(1)}ms</div>
+        <div class="queries-stat-value">${K.totalDuration.toFixed(1)}ms</div>
         <div class="queries-stat-label">Total</div>
       </div>
       <div class="queries-stat">
-        <div class="queries-stat-value ${stats.slowCount > 0 ? "warn" : ""}">${stats.slowCount}</div>
+        <div class="queries-stat-value ${K.slowCount>0?"warn":""}">${K.slowCount}</div>
         <div class="queries-stat-label">Slow</div>
       </div>
       <div class="queries-stat">
-        <div class="queries-stat-value ${stats.n1Count > 0 ? "error" : ""}">${stats.n1Count}</div>
+        <div class="queries-stat-value ${K.n1Count>0?"error":""}">${K.n1Count}</div>
         <div class="queries-stat-label">N+1</div>
       </div>
-    </div>`;
-  const queries = data.queries.map((q) => {
-    const isSlow = q.duration > 100;
-    const classes = ["query-item", q.isN1 ? "n1" : "", isSlow ? "slow" : ""].filter(Boolean).join(" ");
-    const badge = q.isN1 ? '<span class="query-badge n1">N+1</span>' : "";
-    const source = q.source ? `<span class="query-source">${escapeHtml(q.source)}</span>` : "";
-    const rows = q.rows !== undefined ? `<span class="query-rows">${q.rows} rows</span>` : "";
-    return `
-    <div class="${classes}">
+    </div>`,Z=J.queries.map((Y)=>{let $=Y.duration>100,j=["query-item",Y.isN1?"n1":"",$?"slow":""].filter(Boolean).join(" "),U=Y.isN1?'<span class="query-badge n1">N+1</span>':"",_=Y.source?`<span class="query-source">${B(Y.source)}</span>`:"",G=Y.rows!==void 0?`<span class="query-rows">${Y.rows} rows</span>`:"";return`
+    <div class="${j}">
       <div class="query-header">
-        <span class="query-sql" title="${escapeHtml(q.sql)}">${escapeHtml(q.sql)}</span>
+        <span class="query-sql" title="${B(Y.sql)}">${B(Y.sql)}</span>
         <div class="query-meta">
-          ${badge}${source}${rows}
-          <span class="query-time ${isSlow ? "slow" : ""}">${q.duration.toFixed(1)}ms</span>
+          ${U}${_}${G}
+          <span class="query-time ${$?"slow":""}">${Y.duration.toFixed(1)}ms</span>
         </div>
       </div>
-    </div>`;
-  }).join("");
-  return `<div class="devtools-pane" data-pane="queries">${statsHtml}<div class="query-list">${queries}</div></div>`;
-}
-function generateCachePane(data) {
-  const total = data.cacheHits + data.cacheMisses;
-  if (total === 0) {
-    return `<div class="devtools-pane" data-pane="cache"><div class="empty-state">${icons.cache}<span>No cache activity</span></div></div>`;
-  }
-  const hitRate = (data.cacheHits / total * 100).toFixed(0);
-  return `
+    </div>`}).join("");return`<div class="devtools-pane" data-pane="queries">${X}<div class="query-list">${Z}</div></div>`}function C(J){let K=J.cacheHits+J.cacheMisses;if(K===0)return`<div class="devtools-pane" data-pane="cache"><div class="empty-state">${V.cache}<span>No cache activity</span></div></div>`;let X=(J.cacheHits/K*100).toFixed(0);return`
 <div class="devtools-pane" data-pane="cache">
   <div class="cache-stats">
     <div class="cache-stat">
-      <div class="cache-value hit">${data.cacheHits}</div>
+      <div class="cache-value hit">${J.cacheHits}</div>
       <div class="cache-label">Cache Hits</div>
     </div>
     <div class="cache-stat">
-      <div class="cache-value miss">${data.cacheMisses}</div>
+      <div class="cache-value miss">${J.cacheMisses}</div>
       <div class="cache-label">Cache Misses</div>
     </div>
     <div class="cache-stat">
-      <div class="cache-value">${hitRate}%</div>
+      <div class="cache-value">${X}%</div>
       <div class="cache-label">Hit Rate</div>
     </div>
   </div>
-</div>`;
-}
-function generateWarningsPane(data) {
-  if (data.warnings.length === 0) {
-    return `<div class="devtools-pane" data-pane="warnings"><div class="empty-state">${icons.warning}<span>No warnings</span></div></div>`;
-  }
-  const items = data.warnings.map((w) => `
+</div>`}function b(J){if(J.warnings.length===0)return`<div class="devtools-pane" data-pane="warnings"><div class="empty-state">${V.warning}<span>No warnings</span></div></div>`;return`<div class="devtools-pane" data-pane="warnings"><div class="warning-list">${J.warnings.map((X)=>`
     <div class="warning-item">
-      <span class="warning-icon">${icons.warning}</span>
-      <span class="warning-text">${escapeHtml(w)}</span>
+      <span class="warning-icon">${V.warning}</span>
+      <span class="warning-text">${B(X)}</span>
     </div>
-  `).join("");
-  return `<div class="devtools-pane" data-pane="warnings"><div class="warning-list">${items}</div></div>`;
-}
-function generateScript(id, data, opts) {
-  return `
+  `).join("")}</div></div>`}function x(J,K,X){return`
 (function() {
-  var root = document.getElementById('${id}');
+  var root = document.getElementById('${J}');
   if (!root) return;
 
   // Tab switching
@@ -726,273 +334,4 @@ function generateScript(id, data, opts) {
       document.body.style.cursor = '';
     });
   }
-})();`;
-}
-function escapeHtml(str) {
-  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-// src/debug/integrations.ts
-function recordQuery(query) {
-  const collector = getDebugCollector();
-  if (collector) {
-    collector.recordQuery(query);
-  }
-}
-function createPrismaMiddleware() {
-  return async (params, next) => {
-    const collector = getDebugCollector();
-    const start = performance.now();
-    const result = await next(params);
-    const duration = performance.now() - start;
-    if (collector) {
-      const sql = `${params.action} ${params.model}`;
-      collector.recordQuery({
-        sql,
-        params: params.args ? [JSON.stringify(params.args)] : undefined,
-        duration,
-        rows: Array.isArray(result) ? result.length : result ? 1 : 0,
-        source: "prisma"
-      });
-    }
-    return result;
-  };
-}
-function setupPrismaLogging(prisma) {
-  prisma.$on("query", (e) => {
-    const collector = getDebugCollector();
-    if (collector) {
-      collector.recordQuery({
-        sql: e.query,
-        params: e.params ? JSON.parse(e.params) : undefined,
-        duration: e.duration,
-        source: "prisma"
-      });
-    }
-  });
-}
-function createDrizzleLogger() {
-  return {
-    logQuery(query, params) {
-      const collector = getDebugCollector();
-      if (collector) {
-        collector.recordQuery({
-          sql: query,
-          params,
-          duration: 0,
-          source: "drizzle"
-        });
-      }
-    }
-  };
-}
-async function wrapDrizzleQuery(query, sql) {
-  const collector = getDebugCollector();
-  const start = performance.now();
-  const result = await query;
-  const duration = performance.now() - start;
-  if (collector) {
-    collector.recordQuery({
-      sql: sql || "Drizzle Query",
-      duration,
-      rows: Array.isArray(result) ? result.length : result ? 1 : 0,
-      source: "drizzle"
-    });
-  }
-  return result;
-}
-function wrapBunSQL(db) {
-  const handler = {
-    get(target, prop) {
-      const value = target[prop];
-      if (typeof value === "function") {
-        if (prop === "query" || prop === "run" || prop === "prepare") {
-          return function(...args) {
-            const collector = getDebugCollector();
-            const sql = typeof args[0] === "string" ? args[0] : "SQL Query";
-            const start = performance.now();
-            const result = value.apply(target, args);
-            if (result && typeof result.all === "function") {
-              return wrapPreparedStatement(result, sql);
-            }
-            const duration = performance.now() - start;
-            if (collector) {
-              collector.recordQuery({
-                sql,
-                params: args.slice(1),
-                duration,
-                rows: Array.isArray(result) ? result.length : undefined,
-                source: "bun:sqlite"
-              });
-            }
-            return result;
-          };
-        }
-      }
-      return value;
-    }
-  };
-  return new Proxy(db, handler);
-}
-function wrapPreparedStatement(stmt, sql) {
-  const handler = {
-    get(target, prop) {
-      const value = target[prop];
-      if (typeof value === "function" && (prop === "all" || prop === "get" || prop === "run")) {
-        return function(...args) {
-          const collector = getDebugCollector();
-          const start = performance.now();
-          const result = value.apply(target, args);
-          const duration = performance.now() - start;
-          if (collector) {
-            collector.recordQuery({
-              sql,
-              params: args,
-              duration,
-              rows: Array.isArray(result) ? result.length : result ? 1 : 0,
-              source: "bun:sqlite"
-            });
-          }
-          return result;
-        };
-      }
-      return value;
-    }
-  };
-  return new Proxy(stmt, handler);
-}
-async function wrapQuery(sql, queryFn, source = "sql") {
-  const collector = getDebugCollector();
-  const start = performance.now();
-  const result = await queryFn();
-  const duration = performance.now() - start;
-  if (collector) {
-    collector.recordQuery({
-      sql,
-      duration,
-      rows: Array.isArray(result) ? result.length : result ? 1 : 0,
-      source
-    });
-  }
-  return result;
-}
-function createQueryWrapper(source) {
-  return (sql, queryFn) => {
-    return wrapQuery(sql, queryFn, source);
-  };
-}
-
-// 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();
-      };
-    }
-  };
-}
-export {
-  wrapQuery,
-  wrapDrizzleQuery,
-  wrapBunSQL,
-  startDebugCollection,
-  setupPrismaLogging,
-  renderWithDebug,
-  renderStringWithDebug,
-  recordQuery,
-  getDebugCollector,
-  generateDebugPanel,
-  endDebugCollection,
-  debugMiddleware,
-  createQueryWrapper,
-  createPrismaMiddleware,
-  createDrizzleLogger,
-  createDebugRenderer,
-  DebugCollector
-};
+})();`}function B(J){return String(J).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function q(J){let K=z();if(K)K.recordQuery(J)}function g(){return async(J,K)=>{let X=z(),Z=performance.now(),Y=await K(J),$=performance.now()-Z;if(X){let j=`${J.action} ${J.model}`;X.recordQuery({sql:j,params:J.args?[JSON.stringify(J.args)]:void 0,duration:$,rows:Array.isArray(Y)?Y.length:Y?1:0,source:"prisma"})}return Y}}function y(J){J.$on("query",(K)=>{let X=z();if(X)X.recordQuery({sql:K.query,params:K.params?JSON.parse(K.params):void 0,duration:K.duration,source:"prisma"})})}function m(){return{logQuery(J,K){let X=z();if(X)X.recordQuery({sql:J,params:K,duration:0,source:"drizzle"})}}}async function v(J,K){let X=z(),Z=performance.now(),Y=await J,$=performance.now()-Z;if(X)X.recordQuery({sql:K||"Drizzle Query",duration:$,rows:Array.isArray(Y)?Y.length:Y?1:0,source:"drizzle"});return Y}function p(J){return new Proxy(J,{get(X,Z){let Y=X[Z];if(typeof Y==="function"){if(Z==="query"||Z==="run"||Z==="prepare")return function(...$){let j=z(),U=typeof $[0]==="string"?$[0]:"SQL Query",_=performance.now(),G=Y.apply(X,$);if(G&&typeof G.all==="function")return n(G,U);let A=performance.now()-_;if(j)j.recordQuery({sql:U,params:$.slice(1),duration:A,rows:Array.isArray(G)?G.length:void 0,source:"bun:sqlite"});return G}}return Y}})}function n(J,K){return new Proxy(J,{get(Z,Y){let $=Z[Y];if(typeof $==="function"&&(Y==="all"||Y==="get"||Y==="run"))return function(...j){let U=z(),_=performance.now(),G=$.apply(Z,j),A=performance.now()-_;if(U)U.recordQuery({sql:K,params:j,duration:A,rows:Array.isArray(G)?G.length:G?1:0,source:"bun:sqlite"});return G};return $}})}async function f(J,K,X="sql"){let Z=z(),Y=performance.now(),$=await K(),j=performance.now()-Y;if(Z)Z.recordQuery({sql:J,duration:j,rows:Array.isArray($)?$.length:$?1:0,source:X});return $}function u(J){return(K,X)=>{return f(K,X,J)}}async function s(J,K,X={},Z={}){let Y=R();Y.captureContext(X),Y.addTemplate(K,"root"),Y.setMode("runtime"),Y.startRender();let $=await J.render(K,X);Y.endRender();let j=I();if(Z.htmlOnly!==!1){if(!($.includes("<html")||$.includes("<body")||$.includes("<!DOCTYPE")))return $}let U=O(j,Z.panel);if($.includes("</body>"))return $.replace("</body>",`${U}</body>`);return $+U}async function c(J,K,X={},Z={}){let Y=R();Y.captureContext(X),Y.setMode("runtime"),Y.startRender();let $=await J.renderString(K,X);Y.endRender();let j=I();if(Z.htmlOnly!==!1){if(!($.includes("<html")||$.includes("<body")))return $}let U=O(j,Z.panel);if($.includes("</body>"))return $.replace("</body>",`${U}</body>`);return $+U}function JJ(J,K={}){return{async render(X,Z={}){return s(J,X,Z,K)},async renderString(X,Z={}){return c(J,X,Z,K)}}}function KJ(J,K={}){return{hono(){return async(X,Z)=>{if(await Z(),!(X.res.headers.get("content-type")||"").includes("text/html"))return;let $=await X.res.text(),j=R();j.captureContext({}),j.setMode("runtime"),j.endRender();let U=I(),_=O(U,K.panel),G=$.includes("</body>")?$.replace("</body>",`${_}</body>`):$+_;X.res=new Response(G,{status:X.res.status,headers:X.res.headers})}},express(){return(X,Z,Y)=>{let $=Z.send.bind(Z);Z.send=(j)=>{if(!(Z.get("Content-Type")||"").includes("text/html")||typeof j!=="string")return $(j);let _=R();_.captureContext({}),_.setMode("runtime"),_.endRender();let G=I(),A=O(G,K.panel),Q=j.includes("</body>")?j.replace("</body>",`${A}</body>`):j+A;return $(Q)},Y()}}}}export{f as wrapQuery,v as wrapDrizzleQuery,p as wrapBunSQL,R as startDebugCollection,y as setupPrismaLogging,s as renderWithDebug,c as renderStringWithDebug,q as recordQuery,z as getDebugCollector,O as generateDebugPanel,I as endDebugCollection,KJ as debugMiddleware,u as createQueryWrapper,g as createPrismaMiddleware,m as createDrizzleLogger,JJ as createDebugRenderer,E as DebugCollector};