@nbt-dev/devtools 0.0.1 → 0.0.4

package/dist/index.js

@@ -26,6 +26,24 @@ function wsBaseFrom(apiBaseUrl) {
 import React2, { useEffect } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Ctx = React2.createContext(null);
+var STORAGE_KEY = "nimbit-devtools:v1";
+var DEFAULT_FILTER = {
+  info: true,
+  warn: true,
+  error: true,
+  plain: true
+};
+function loadPersisted() {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return typeof parsed === "object" && parsed ? parsed : {};
+  } catch {
+    return {};
+  }
+}
 var DevToolsProvider = ({ children, defaultActiveTab }) => {
   const [open, setOpen] = React2.useState(false);
   const [dock, setDock] = React2.useState("bottom");
@@ -36,7 +54,87 @@ var DevToolsProvider = ({ children, defaultActiveTab }) => {
   const [maximized, setMaximized] = React2.useState(false);
   const [dataCart, setDataCart] = React2.useState(null);
   const [dataEntity, setDataEntity] = React2.useState(null);
+  const [view, setView] = React2.useState("table");
+  const [graphCarts, setGraphCarts] = React2.useState(null);
+  const [hiddenEntities, setHiddenEntities] = React2.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [graphLeftW, setGraphLeftW] = React2.useState(176);
+  const [graphRightW, setGraphRightW] = React2.useState(440);
+  const [consoleFilter, setConsoleFilter] = React2.useState(DEFAULT_FILTER);
+  const [consolePaused, setConsolePaused] = React2.useState(false);
+  const [sourcesCart, setSourcesCart] = React2.useState(null);
+  const [sourcesFile, setSourcesFile] = React2.useState(null);
+  const [sourcesTreeW, setSourcesTreeW] = React2.useState(200);
+  const [hydrated, setHydrated] = React2.useState(false);
   const toggle = React2.useCallback(() => setOpen((o) => !o), []);
+  useEffect(() => {
+    const saved = loadPersisted();
+    if (saved.open != null) setOpen(saved.open);
+    if (saved.dock != null) setDock(saved.dock);
+    if (saved.activeTab != null) setActiveTab(saved.activeTab);
+    if (saved.size != null) setSize(saved.size);
+    if (saved.maximized != null) setMaximized(saved.maximized);
+    if (saved.dataCart != null) setDataCart(saved.dataCart);
+    if (saved.dataEntity != null) setDataEntity(saved.dataEntity);
+    if (saved.view != null) setView(saved.view);
+    if (saved.graphCarts != null) setGraphCarts(new Set(saved.graphCarts));
+    if (saved.hiddenEntities != null)
+      setHiddenEntities(new Set(saved.hiddenEntities));
+    if (saved.graphLeftW != null) setGraphLeftW(saved.graphLeftW);
+    if (saved.graphRightW != null) setGraphRightW(saved.graphRightW);
+    if (saved.consoleFilter != null) setConsoleFilter(saved.consoleFilter);
+    if (saved.consolePaused != null) setConsolePaused(saved.consolePaused);
+    if (saved.sourcesCart != null) setSourcesCart(saved.sourcesCart);
+    if (saved.sourcesFile != null) setSourcesFile(saved.sourcesFile);
+    if (saved.sourcesTreeW != null) setSourcesTreeW(saved.sourcesTreeW);
+    setHydrated(true);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined" || !hydrated) return;
+    const snapshot = {
+      open,
+      dock,
+      activeTab,
+      size,
+      maximized,
+      dataCart,
+      dataEntity,
+      view,
+      graphCarts: graphCarts ? [...graphCarts] : null,
+      hiddenEntities: [...hiddenEntities],
+      graphLeftW,
+      graphRightW,
+      consoleFilter,
+      consolePaused,
+      sourcesCart,
+      sourcesFile,
+      sourcesTreeW
+    };
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+    } catch {
+    }
+  }, [
+    hydrated,
+    open,
+    dock,
+    activeTab,
+    size,
+    maximized,
+    dataCart,
+    dataEntity,
+    view,
+    graphCarts,
+    hiddenEntities,
+    graphLeftW,
+    graphRightW,
+    consoleFilter,
+    consolePaused,
+    sourcesCart,
+    sourcesFile,
+    sourcesTreeW
+  ]);
   const value = React2.useMemo(
     () => ({
       open,
@@ -53,15 +151,64 @@ var DevToolsProvider = ({ children, defaultActiveTab }) => {
       dataCart,
       setDataCart,
       dataEntity,
-      setDataEntity
+      setDataEntity,
+      view,
+      setView,
+      graphCarts,
+      setGraphCarts,
+      hiddenEntities,
+      setHiddenEntities,
+      graphLeftW,
+      setGraphLeftW,
+      graphRightW,
+      setGraphRightW,
+      consoleFilter,
+      setConsoleFilter,
+      consolePaused,
+      setConsolePaused,
+      sourcesCart,
+      setSourcesCart,
+      sourcesFile,
+      setSourcesFile,
+      sourcesTreeW,
+      setSourcesTreeW
     }),
-    [open, toggle, dock, activeTab, size, maximized, dataCart, dataEntity]
+    [
+      open,
+      toggle,
+      dock,
+      activeTab,
+      size,
+      maximized,
+      dataCart,
+      dataEntity,
+      view,
+      graphCarts,
+      hiddenEntities,
+      graphLeftW,
+      graphRightW,
+      consoleFilter,
+      consolePaused,
+      sourcesCart,
+      sourcesFile,
+      sourcesTreeW
+    ]
   );
   useEffect(() => {
-    const listen = () => toggle();
-    window.addEventListener("devtools-toggle", listen);
-    return () => window.removeEventListener("devtools-toggle", listen);
-  }, [open, toggle]);
+    const onKey = (e) => {
+      if (e.ctrlKey && (e.key === "F12" || e.code === "F12")) {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    const onEvent = () => toggle();
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("devtools-toggle", onEvent);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("devtools-toggle", onEvent);
+    };
+  }, [toggle]);
   return /* @__PURE__ */ jsx2(Ctx.Provider, { value, children });
 };
 function useDevTools() {
@@ -71,8 +218,9 @@ function useDevTools() {
 }
 
 // src/components/devtools/dev-tools.tsx
-import React8 from "react";
-import { Maximize2, Minimize2, PanelBottom, PanelRight, X } from "lucide-react";
+import React12 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Maximize2, Minimize2, PanelBottom, PanelRight, X as X2 } from "lucide-react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -125,14 +273,13 @@ var LEVEL_BADGE = {
 };
 var ConsoleTab = () => {
   const { apiBaseUrl } = useDevToolsConfig();
+  const {
+    consoleFilter: filter,
+    setConsoleFilter: setFilter,
+    consolePaused: paused,
+    setConsolePaused: setPaused
+  } = useDevTools();
   const [entries, setEntries] = React3.useState([]);
-  const [paused, setPaused] = React3.useState(false);
-  const [filter, setFilter] = React3.useState({
-    info: true,
-    warn: true,
-    error: true,
-    plain: true
-  });
   const [expanded, setExpanded] = React3.useState({});
   const scrollerRef = React3.useRef(null);
   const stickToBottomRef = React3.useRef(true);
@@ -193,7 +340,7 @@ var ConsoleTab = () => {
       if (reconnectTimer) clearTimeout(reconnectTimer);
       if (socket) socket.close();
     };
-  }, []);
+  }, [apiBaseUrl]);
   const handleScroll = React3.useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -407,8 +554,8 @@ var NetworkTab = () => {
 var network_tab_default = NetworkTab;
 
 // src/components/devtools/data-tab.tsx
-import React7 from "react";
-import { Network, Table2 } from "lucide-react";
+import React8 from "react";
+import { Network, Table2, X } from "lucide-react";
 
 // src/hooks/use-cartridge-info.ts
 import { useEffect as useEffect2, useState } from "react";
@@ -438,6 +585,8 @@ function useLiveBulkRegistry() {
   useEffect2(() => {
     const ac = new AbortController();
     let cancelled = false;
+    setLoading(true);
+    setError(null);
     (async () => {
       try {
         const r = await fetch(`${apiBaseUrl}/_console/contracts`, {
@@ -460,7 +609,7 @@ function useLiveBulkRegistry() {
       cancelled = true;
       ac.abort();
     };
-  }, []);
+  }, [apiBaseUrl]);
   const carts = Object.keys(registry).sort();
   return { registry, carts, loading, error };
 }
@@ -481,8 +630,6 @@ var FRAME_DATA_END = 3;
 var FRAME_DELTA_INS = 4;
 var FRAME_DELTA_UPD = 5;
 var FRAME_DELTA_DEL = 6;
-var FRAME_SEARCH_RESULT = 7;
-var FRAME_SEARCH_END = 8;
 var FRAME_ERROR = 255;
 var TYPE_U8 = 1;
 var TYPE_U16 = 2;
@@ -543,27 +690,39 @@ var BulkDataStore = class {
     this._fullRows = [];
     this._fullTotalRows = 0;
     this._idColIndex = -1;
+    this._query = "";
   }
   applySchema(schema) {
     this.columns = schema.columns;
     this.totalRows = schema.totalRows;
     this.rows = [];
+    this._fullRows = [];
+    this._fullTotalRows = schema.totalRows;
+    this.searchActive = false;
+    this._query = "";
     this._idColIndex = schema.columns.findIndex((c) => c.name === "id");
   }
   appendChunk(chunk) {
-    for (let i = 0; i < chunk.length; i++) this.rows.push(chunk[i]);
+    for (let i = 0; i < chunk.length; i++) {
+      const row = chunk[i];
+      this._fullRows.push(row);
+      if (!this.searchActive) this.rows.push(row);
+    }
   }
   applyDelta(delta) {
-    const target = this.searchActive ? this._fullRows : this.rows;
+    const target = this._fullRows;
     if (delta.op === FRAME_DELTA_INS && delta.rowData) {
       target.push(delta.rowData);
-      if (this.searchActive) this._fullTotalRows++;
-      else this.totalRows++;
+      this._fullTotalRows++;
+      this.totalRows++;
+      if (!this.searchActive) this.rows = this._fullRows;
+      else this._applySearch();
       return;
     }
     if (delta.op === FRAME_DELTA_UPD && delta.rowData) {
       const idx = this._findRowById(target, delta.rowData);
       if (idx >= 0) target[idx] = delta.rowData;
+      if (this.searchActive) this._applySearch();
       return;
     }
     if (delta.op === FRAME_DELTA_DEL && delta.id !== void 0) {
@@ -571,29 +730,30 @@ var BulkDataStore = class {
       const idx = this._findRowByIdStr(target, idStr);
       if (idx >= 0) {
         target.splice(idx, 1);
-        if (this.searchActive) this._fullTotalRows--;
-        else this.totalRows--;
+        this._fullTotalRows--;
+        this.totalRows--;
+        if (!this.searchActive) this.rows = this._fullRows;
+        else this._applySearch();
       }
       return;
     }
   }
-  enterSearch(schema) {
-    if (!this.searchActive) {
-      this._fullRows = this.rows;
-      this._fullTotalRows = this.totalRows;
+  search(query) {
+    const q = query.trim().toLowerCase();
+    if (!q) {
+      this.exitSearch();
+      return;
     }
     this.searchActive = true;
-    this.columns = schema.columns;
-    this.totalRows = schema.totalRows;
-    this.rows = [];
+    this._query = q;
+    this._applySearch();
   }
   exitSearch() {
     if (!this.searchActive) return;
     this.rows = this._fullRows;
     this.totalRows = this._fullTotalRows;
-    this._fullRows = [];
-    this._fullTotalRows = 0;
     this.searchActive = false;
+    this._query = "";
   }
   getRowCount() {
     return this.rows.length;
@@ -613,6 +773,12 @@ var BulkDataStore = class {
     }
     return -1;
   }
+  _applySearch() {
+    this.rows = this._fullRows.filter(
+      (row) => row.some((value) => value.toLowerCase().includes(this._query))
+    );
+    this.totalRows = this.rows.length;
+  }
 };
 
 // src/components/devtools/data-browser/bulk-decoder.ts
@@ -702,8 +868,8 @@ function parseDataChunk(buf, columns) {
   let offset = 0;
   const frameType = view.getUint8(offset);
   offset += 1;
-  if (frameType !== FRAME_DATA && frameType !== FRAME_SEARCH_RESULT) {
-    throw new Error(`Expected DATA/SEARCH_RESULT frame, got 0x${frameType.toString(16)}`);
+  if (frameType !== FRAME_DATA) {
+    throw new Error(`Expected DATA frame, got 0x${frameType.toString(16)}`);
   }
   offset += SID_BYTES;
   const rowCount = view.getUint16(offset, true);
@@ -749,18 +915,9 @@ function parseError(buf) {
   const bytes = new Uint8Array(buf, HEAD + 2, len);
   return textDecoder.decode(bytes);
 }
-function encodeSchemaCmd(sid, cart, entity) {
-  return JSON.stringify({ cmd: "schema", sid, cart, entity });
-}
 function encodeStreamCmd(sid, cart, entity, opts) {
   return JSON.stringify({ cmd: "sub", sid, cart, entity, ...opts });
 }
-function encodeSearchCmd(sid, query) {
-  return JSON.stringify({ cmd: "search", sid, q: query });
-}
-function encodeClearSearchCmd(sid) {
-  return JSON.stringify({ cmd: "clear_search", sid });
-}
 
 // src/hooks/use-bulk-stream.ts
 var BulkStreamContext = createContext(null);
@@ -777,7 +934,7 @@ var _wsTokenCache = null;
 var WS_TOKEN_TTL_MS = 6e4;
 async function fetchWsToken(signal, apiBaseUrl) {
   const now = Date.now();
-  if (_wsTokenCache && now - _wsTokenCache.at < WS_TOKEN_TTL_MS) {
+  if (_wsTokenCache?.apiBaseUrl === apiBaseUrl && now - _wsTokenCache.at < WS_TOKEN_TTL_MS) {
     return _wsTokenCache.token;
   }
   const r = await fetch(`${apiBaseUrl}/api/auth/session/current`, {
@@ -790,7 +947,7 @@ async function fetchWsToken(signal, apiBaseUrl) {
   const j = await r.json();
   const token = j.session?.token;
   if (!token) return null;
-  _wsTokenCache = { token, at: now };
+  _wsTokenCache = { apiBaseUrl, token, at: now };
   return token;
 }
 function invalidateWsToken() {
@@ -838,7 +995,6 @@ function BulkStreamProvider({ registry, children }) {
       streaming: false,
       error: null,
       streamRequested: false,
-      searchStreaming: false,
       onRender: null,
       listeners: /* @__PURE__ */ new Set()
     };
@@ -861,8 +1017,7 @@ function BulkStreamProvider({ registry, children }) {
     switch (ft) {
       case FRAME_SCHEMA: {
         const schema = parseSchema(buf);
-        if (view.searchStreaming) store.enterSearch(schema);
-        else store.applySchema(schema);
+        store.applySchema(schema);
         view.columns = schema.columns;
         view.totalRows = schema.totalRows;
         view.loadedRows = 0;
@@ -870,8 +1025,7 @@ function BulkStreamProvider({ registry, children }) {
         notify(view);
         break;
       }
-      case FRAME_DATA:
-      case FRAME_SEARCH_RESULT: {
+      case FRAME_DATA: {
         const rows = parseDataChunk(buf, store.columns);
         store.appendChunk(rows);
         view.loadedRows = store.getRowCount();
@@ -882,11 +1036,6 @@ function BulkStreamProvider({ registry, children }) {
         view.streaming = false;
         notify(view);
         break;
-      case FRAME_SEARCH_END:
-        view.searchStreaming = false;
-        view.streaming = false;
-        notify(view);
-        break;
       case FRAME_DELTA_INS:
       case FRAME_DELTA_UPD:
       case FRAME_DELTA_DEL: {
@@ -910,6 +1059,12 @@ function BulkStreamProvider({ registry, children }) {
     let cancelled = false;
     let opened = false;
     let ws = null;
+    sendQueueRef.current = [];
+    sidCounterRef.current = 1;
+    viewsBySidRef.current.clear();
+    viewsByKeyRef.current.clear();
+    preloadedRef.current = false;
+    setConnected(false);
     setError(null);
     (async () => {
       let token = null;
@@ -959,7 +1114,7 @@ function BulkStreamProvider({ registry, children }) {
         if (wsRef.current === ws) wsRef.current = null;
       }
     };
-  }, []);
+  }, [apiBaseUrl]);
   useEffect3(() => {
     if (!connected) return;
     if (preloadedRef.current) return;
@@ -969,28 +1124,21 @@ function BulkStreamProvider({ registry, children }) {
     for (const cart of keys) {
       for (const ent of registry[cart] ?? []) {
         const view = getView(cart, ent.name);
-        sendCmd(encodeSchemaCmd(view.sid, view.cart, view.entity));
+        ensureStreamed(view);
       }
     }
   }, [connected, registry]);
   const search = (view, query) => {
-    if (!query) {
-      view.store.exitSearch();
-      view.totalRows = view.store.totalRows;
-      view.loadedRows = view.store.getRowCount();
-      sendCmd(encodeClearSearchCmd(view.sid));
-      notify(view);
-      view.onRender?.();
-      return;
-    }
-    view.searchStreaming = true;
-    sendCmd(encodeSearchCmd(view.sid, query));
+    view.store.search(query);
+    view.totalRows = view.store.totalRows;
+    view.loadedRows = view.store.getRowCount();
+    notify(view);
+    view.onRender?.();
   };
   const clearSearch = (view) => {
     view.store.exitSearch();
     view.totalRows = view.store.totalRows;
     view.loadedRows = view.store.getRowCount();
-    sendCmd(encodeClearSearchCmd(view.sid));
     notify(view);
     view.onRender?.();
   };
@@ -1057,11 +1205,210 @@ function useBulkSubscription(cart, entity) {
 }
 
 // src/components/devtools/data-browser/data-table.tsx
+import React6 from "react";
+
+// src/components/devtools/data-browser/value-popover.tsx
 import React5 from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var WIDTH = 420;
+var INT_TYPES = /* @__PURE__ */ new Set([
+  TYPE_U8,
+  TYPE_U16,
+  TYPE_U32,
+  TYPE_U64,
+  TYPE_S8,
+  TYPE_S16,
+  TYPE_S32,
+  TYPE_S64
+]);
+var FLOAT_TYPES = /* @__PURE__ */ new Set([TYPE_FLOAT32, TYPE_FLOAT64]);
+function position(rect) {
+  const margin = 12;
+  const left = Math.max(
+    margin,
+    Math.min(rect.left, window.innerWidth - WIDTH - margin)
+  );
+  const roomBelow = window.innerHeight - rect.bottom;
+  const top = roomBelow >= 180 ? rect.bottom + 6 : Math.max(margin, rect.top - 188);
+  return { left, top, width: WIDTH };
+}
+function coerce(draft, colType) {
+  if (colType === TYPE_BOOL) return { value: draft === "true" };
+  if (INT_TYPES.has(colType)) {
+    const n = Number(draft);
+    if (!Number.isInteger(n)) return { error: "Expected an integer" };
+    return { value: n };
+  }
+  if (FLOAT_TYPES.has(colType)) {
+    const n = Number(draft);
+    if (!Number.isFinite(n)) return { error: "Expected a number" };
+    return { value: n };
+  }
+  return { value: draft };
+}
+var ValuePopover = ({
+  data,
+  onClose
+}) => {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const [copied, setCopied] = React5.useState(false);
+  const [draft, setDraft] = React5.useState(data.value);
+  const [saving, setSaving] = React5.useState(false);
+  const [error, setError] = React5.useState(null);
+  React5.useEffect(() => {
+    setDraft(data.value);
+    setError(null);
+  }, [data.value, data.r, data.c]);
+  React5.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(data.value);
+      setCopied(true);
+    } catch {
+    }
+  };
+  const save = async () => {
+    const result = coerce(draft, data.colType);
+    if ("error" in result) {
+      setError(result.error);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const r = await fetch(
+        `${apiBaseUrl}/api/${data.cart}/${data.entity.toLowerCase()}/${encodeURIComponent(data.rowId)}`,
+        {
+          method: "PUT",
+          credentials: "include",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ [data.colName]: result.value })
+        }
+      );
+      if (!r.ok) {
+        setError(await r.text() || `HTTP ${r.status}`);
+        setSaving(false);
+        return;
+      }
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setSaving(false);
+    }
+  };
+  const isBool = data.colType === TYPE_BOOL;
+  const isNumeric = INT_TYPES.has(data.colType) || FLOAT_TYPES.has(data.colType);
+  return createPortal(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx5("div", { className: "fixed inset-0 z-[60]", onClick: onClose }),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: cn(
+            "nimbit-devtools dark fixed z-[61] rounded-md border border-border bg-popover p-3",
+            "text-[12px] text-popover-foreground shadow-lg"
+          ),
+          style: position(data.rect),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx5("div", { className: "truncate font-medium text-foreground", children: data.colName }),
+                /* @__PURE__ */ jsxs2("div", { className: "text-[11px] text-muted-foreground", children: [
+                  "Row ",
+                  data.r + 1
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: copy,
+                    className: cn(
+                      "rounded border border-border px-2 py-1 text-[11px] leading-none",
+                      "hover:bg-accent hover:text-accent-foreground"
+                    ),
+                    children: copied ? "Copied" : "Copy"
+                  }
+                ),
+                data.editable ? /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: save,
+                    disabled: saving,
+                    className: cn(
+                      "rounded border border-border bg-primary/90 px-2 py-1 text-[11px] leading-none text-primary-foreground",
+                      "hover:bg-primary disabled:opacity-50"
+                    ),
+                    children: saving ? "Saving\u2026" : "Save"
+                  }
+                ) : null
+              ] })
+            ] }),
+            data.editable ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+              isBool ? /* @__PURE__ */ jsxs2(
+                "select",
+                {
+                  value: draft,
+                  disabled: saving,
+                  onChange: (e) => setDraft(e.target.value),
+                  className: "w-full rounded-sm border border-border bg-background px-2 py-1 text-[12px] outline-none focus:border-accent-foreground/30",
+                  children: [
+                    /* @__PURE__ */ jsx5("option", { value: "true", children: "true" }),
+                    /* @__PURE__ */ jsx5("option", { value: "false", children: "false" })
+                  ]
+                }
+              ) : isNumeric ? /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "number",
+                  value: draft,
+                  disabled: saving,
+                  autoFocus: true,
+                  onChange: (e) => setDraft(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") void save();
+                  },
+                  className: "w-full rounded-sm border border-border bg-background px-2 py-1 font-mono text-[12px] outline-none focus:border-accent-foreground/30"
+                }
+              ) : /* @__PURE__ */ jsx5(
+                "textarea",
+                {
+                  value: draft,
+                  disabled: saving,
+                  autoFocus: true,
+                  onChange: (e) => setDraft(e.target.value),
+                  className: "max-h-48 min-h-[3rem] w-full resize-y overflow-auto rounded-sm border border-border bg-background p-2 font-mono text-[11px] leading-5 outline-none focus:border-accent-foreground/30"
+                }
+              ),
+              error ? /* @__PURE__ */ jsx5("div", { className: "mt-2 break-words text-[11px] text-red-400", children: error }) : null
+            ] }) : /* @__PURE__ */ jsx5("div", { className: "max-h-48 overflow-auto rounded-sm bg-muted/40 p-2 font-mono text-[11px] leading-5 whitespace-pre-wrap break-words", children: data.value.length > 0 ? data.value : /* @__PURE__ */ jsx5("span", { className: "font-sans italic text-muted-foreground", children: "(empty)" }) })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var value_popover_default = ValuePopover;
+
+// src/components/devtools/data-browser/data-table.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var ROW_H = 22;
 var OVERSCAN = 6;
 var MIN_COL_W = 80;
+var GUTTER_W = 32;
+var READONLY_FIELDS = /* @__PURE__ */ new Set(["id", "createdAt", "updatedAt"]);
+var READONLY_TYPES = /* @__PURE__ */ new Set([TYPE_DATETIME, TYPE_DOCUMENT]);
 function colWidth(name) {
   if (name === "id") return 220;
   if (name === "createdAt" || name === "updatedAt") return 180;
@@ -1071,16 +1418,18 @@ function colWidth(name) {
 }
 var DataTable = ({ cart, entity, searchFields, onSelectRow }) => {
   const stream = useBulkSubscription(cart, entity);
-  const scrollerRef = React5.useRef(null);
-  const [scrollTop, setScrollTop] = React5.useState(0);
-  const [viewportH, setViewportH] = React5.useState(0);
-  const [query, setQuery] = React5.useState("");
-  const [tick, setTick] = React5.useState(0);
-  React5.useEffect(() => {
+  const scrollerRef = React6.useRef(null);
+  const [scrollTop, setScrollTop] = React6.useState(0);
+  const [viewportH, setViewportH] = React6.useState(0);
+  const [query, setQuery] = React6.useState("");
+  const [selected, setSelected] = React6.useState(null);
+  const [popover, setPopover] = React6.useState(null);
+  const [tick, setTick] = React6.useState(0);
+  React6.useEffect(() => {
     stream.setOnRender(() => setTick((n) => n + 1));
     return () => stream.setOnRender(null);
   }, [stream]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const el = scrollerRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => setViewportH(el.clientHeight));
@@ -1110,10 +1459,42 @@ var DataTable = ({ cart, entity, searchFields, onSelectRow }) => {
     onSelectRow(out);
   };
   const searchDisabled = searchFields.length === 0;
-  const totalColW = columns.reduce((s, c) => s + colWidth(c.name), 0);
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col bg-background", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex h-7 shrink-0 items-center gap-2 border-b border-border px-2", children: [
-      /* @__PURE__ */ jsx5(
+  const totalColW = GUTTER_W + columns.reduce((s, c) => s + colWidth(c.name), 0);
+  const idColIndex = columns.findIndex((c) => c.name === "id");
+  const scrollRowIntoView = (r) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const top = r * ROW_H;
+    if (top < el.scrollTop) el.scrollTop = top;
+    else if (top + ROW_H > el.scrollTop + el.clientHeight)
+      el.scrollTop = top + ROW_H - el.clientHeight;
+  };
+  const onKeyDown = (e) => {
+    if (rows.length === 0 || columns.length === 0) return;
+    if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
+      if (!selected) return;
+      const v = rows[selected.r]?.[selected.c] ?? "";
+      void navigator.clipboard?.writeText(v);
+      e.preventDefault();
+      return;
+    }
+    const cur = selected ?? { r: start, c: 0 };
+    let { r, c } = cur;
+    if (e.key === "ArrowUp") r--;
+    else if (e.key === "ArrowDown") r++;
+    else if (e.key === "ArrowLeft") c--;
+    else if (e.key === "ArrowRight") c++;
+    else return;
+    e.preventDefault();
+    r = Math.max(0, Math.min(rows.length - 1, r));
+    c = Math.max(0, Math.min(columns.length - 1, c));
+    setSelected({ r, c });
+    setPopover(null);
+    scrollRowIntoView(r);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "flex h-full flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex h-7 shrink-0 items-center gap-2 border-b border-border px-2", children: [
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "text",
@@ -1129,7 +1510,7 @@ var DataTable = ({ cart, entity, searchFields, onSelectRow }) => {
           )
         }
       ),
-      /* @__PURE__ */ jsx5("div", { className: "shrink-0 text-[11px] text-muted-foreground tabular-nums", children: stream.error ? /* @__PURE__ */ jsx5("span", { className: "text-red-400", children: stream.error }) : !stream.connected ? /* @__PURE__ */ jsx5("span", { children: "connecting\u2026" }) : /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx6("div", { className: "shrink-0 text-[11px] text-muted-foreground tabular-nums", children: stream.error ? /* @__PURE__ */ jsx6("span", { className: "text-red-400", children: stream.error }) : !stream.connected ? /* @__PURE__ */ jsx6("span", { children: "connecting\u2026" }) : /* @__PURE__ */ jsxs3("span", { children: [
         stream.loadedRows.toLocaleString(),
         " / ",
         stream.totalRows.toLocaleString(),
@@ -1137,75 +1518,129 @@ var DataTable = ({ cart, entity, searchFields, onSelectRow }) => {
         stream.streaming ? " \xB7 streaming" : ""
       ] }) })
     ] }),
-    columns.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex flex-1 items-center justify-center text-[12px] text-muted-foreground", children: stream.error ? stream.error : "Waiting for schema\u2026" }) : /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx5("div", { className: "overflow-hidden border-b border-border bg-muted/30", children: /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: "flex h-6 select-none text-[11px] uppercase tracking-wider text-muted-foreground",
-          style: {
-            width: totalColW,
-            transform: `translateX(${-(scrollerRef.current?.scrollLeft ?? 0)}px)`
-          },
-          children: columns.map((c) => /* @__PURE__ */ jsx5(
+    columns.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex flex-1 items-center justify-center text-[12px] text-muted-foreground", children: stream.error ? stream.error : "Waiting for schema\u2026" }) : /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: scrollerRef,
+        tabIndex: 0,
+        onKeyDown,
+        onScroll: (e) => {
+          setScrollTop(e.target.scrollTop);
+          if (popover) setPopover(null);
+        },
+        className: "group/table relative min-h-0 flex-1 overflow-auto font-mono outline-none",
+        children: /* @__PURE__ */ jsxs3("div", { style: { width: totalColW }, children: [
+          /* @__PURE__ */ jsxs3(
             "div",
             {
-              style: { width: colWidth(c.name) },
-              className: "flex items-center overflow-hidden border-r border-border px-2",
-              children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: c.name })
-            },
-            c.name
-          ))
-        }
-      ) }),
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          ref: scrollerRef,
-          onScroll: (e) => {
-            setScrollTop(e.target.scrollTop);
-            setTick((n) => n + 1);
-          },
-          className: "relative min-h-0 flex-1 overflow-auto font-mono",
-          children: /* @__PURE__ */ jsx5("div", { style: { height: totalH, width: totalColW, position: "relative" }, children: rows.slice(start, end).map((row, i) => {
+              className: "sticky top-0 z-10 flex h-6 select-none border-b border-border bg-background text-[11px] uppercase tracking-wider text-muted-foreground",
+              style: { width: totalColW },
+              children: [
+                /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: { width: GUTTER_W },
+                    className: "shrink-0 border-r border-border"
+                  }
+                ),
+                columns.map((c) => /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: { width: colWidth(c.name) },
+                    className: "flex items-center overflow-hidden border-r border-border px-2",
+                    children: /* @__PURE__ */ jsx6("span", { className: "truncate", children: c.name })
+                  },
+                  c.name
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { style: { height: totalH, width: totalColW, position: "relative" }, children: rows.slice(start, end).map((row, i) => {
             const rowIdx = start + i;
-            return /* @__PURE__ */ jsx5(
+            return /* @__PURE__ */ jsxs3(
               "div",
               {
-                onClick: () => handleRowClick(rowIdx),
                 style: {
                   top: rowIdx * ROW_H,
                   height: ROW_H,
                   width: totalColW
                 },
                 className: cn(
-                  "absolute left-0 flex cursor-pointer text-[12px] leading-none",
-                  rowIdx % 2 === 0 ? "bg-background" : "bg-muted/20",
-                  "hover:bg-accent hover:text-accent-foreground"
+                  "absolute left-0 flex text-[12px] leading-none",
+                  rowIdx % 2 === 0 ? "bg-background" : "bg-muted/20"
                 ),
-                children: columns.map((c, ci) => /* @__PURE__ */ jsx5(
-                  "div",
-                  {
-                    style: { width: colWidth(c.name) },
-                    className: "flex items-center overflow-hidden border-r border-border/60 px-2",
-                    title: row[ci],
-                    children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: row[ci] })
-                  },
-                  c.name
-                ))
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      title: "Open row detail",
+                      onClick: () => handleRowClick(rowIdx),
+                      style: { width: GUTTER_W },
+                      className: cn(
+                        "flex shrink-0 items-center justify-center border-r border-border/60",
+                        "cursor-pointer text-[10px] tabular-nums text-muted-foreground/60",
+                        "hover:bg-accent hover:text-accent-foreground"
+                      ),
+                      children: rowIdx + 1
+                    }
+                  ),
+                  columns.map((c, ci) => {
+                    const isSel = selected?.r === rowIdx && selected?.c === ci;
+                    return /* @__PURE__ */ jsx6(
+                      "div",
+                      {
+                        "data-selected": isSel,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setSelected({ r: rowIdx, c: ci });
+                          setPopover(null);
+                        },
+                        onDoubleClick: (e) => {
+                          e.stopPropagation();
+                          setSelected({ r: rowIdx, c: ci });
+                          const editable = idColIndex >= 0 && !READONLY_FIELDS.has(c.name) && !READONLY_TYPES.has(c.type);
+                          setPopover({
+                            r: rowIdx,
+                            c: ci,
+                            colName: c.name,
+                            value: row[ci] ?? "",
+                            rect: e.currentTarget.getBoundingClientRect(),
+                            cart,
+                            entity,
+                            rowId: idColIndex >= 0 ? row[idColIndex] ?? "" : "",
+                            colType: c.type,
+                            editable
+                          });
+                        },
+                        style: { width: colWidth(c.name) },
+                        className: cn(
+                          "flex cursor-pointer items-center overflow-hidden border-r border-border/60 px-2",
+                          "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+                          "data-[selected=true]:[box-shadow:inset_0_0_0_1px_#60a5fa]"
+                        ),
+                        title: row[ci],
+                        children: /* @__PURE__ */ jsx6("span", { className: "truncate", children: row[ci] })
+                      },
+                      c.name
+                    );
+                  })
+                ]
               },
               rowIdx
             );
           }) })
-        }
-      )
-    ] }),
-    tick < 0 && /* @__PURE__ */ jsx5("span", {})
+        ] })
+      }
+    ),
+    popover ? /* @__PURE__ */ jsx6(value_popover_default, { data: popover, onClose: () => setPopover(null) }) : null,
+    tick < 0 && /* @__PURE__ */ jsx6("span", {})
   ] });
 };
 var data_table_default = DataTable;
 
 // src/components/devtools/entity-graph/diagram-tab.tsx
-import React6 from "react";
+import React7 from "react";
 import {
   Background,
   BackgroundVariant,
@@ -1216,18 +1651,17 @@ import {
   useNodesInitialized,
   useReactFlow
 } from "@xyflow/react";
-import { Database as Database2, Eye, EyeOff, GitBranch, Rows3 } from "lucide-react";
 
 // src/components/devtools/entity-graph/entity-node.tsx
 import { Handle, Position } from "@xyflow/react";
 import { Database, FileText, KeyRound, Link2 } from "lucide-react";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function EntityNode({ data, selected }) {
   const node = data;
   const highlight = node.highlight;
   const highlightedFields = new Set(highlight?.fields ?? []);
   const hiddenHandleClass = "!h-1 !w-1 !border-0 !bg-transparent !opacity-0";
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: [
@@ -1237,21 +1671,20 @@ function EntityNode({ data, selected }) {
         selected && !highlight?.focused ? "ring-2 ring-zinc-100/10" : ""
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "rounded-t-xl border-b border-zinc-700 bg-zinc-800 px-3 py-2", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx6(Database, { className: "h-3.5 w-3.5 shrink-0 text-zinc-400" }),
-            /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-none text-zinc-50", children: node.entity }),
-            /* @__PURE__ */ jsx6("span", { className: "shrink-0 rounded bg-zinc-700 px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-zinc-200", children: node.fieldCount })
+        /* @__PURE__ */ jsxs4("div", { className: "rounded-t-xl border-b border-zinc-700 bg-zinc-800 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx7(Database, { className: "h-3.5 w-3.5 shrink-0 text-zinc-400" }),
+            /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-none text-zinc-50", children: node.entity })
           ] }),
-          /* @__PURE__ */ jsx6("div", { className: "mt-1 truncate text-[10px] text-zinc-500", children: node.cartridge })
+          /* @__PURE__ */ jsx7("div", { className: "mt-1 truncate text-[10px] text-zinc-500", children: node.cartridge })
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "bg-zinc-900 py-1", children: node.fields.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-[10px] text-zinc-500", children: "No fields" }) : node.fields.map((field) => {
+        /* @__PURE__ */ jsx7("div", { className: "bg-zinc-900 py-1", children: node.fields.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 text-[10px] text-zinc-500", children: "No fields" }) : node.fields.map((field) => {
           const type = `${field.type}${field.array ? "[]" : ""}${field.optional ? "?" : ""}`;
           const isId = field.displayName.toLowerCase() === "id";
           const isRelation = field.kind === "relation";
           const isDocument = field.kind === "document";
           const fieldHighlighted = highlightedFields.has(field.displayName);
-          return /* @__PURE__ */ jsxs3(
+          return /* @__PURE__ */ jsxs4(
             "div",
             {
               className: [
@@ -1259,8 +1692,8 @@ function EntityNode({ data, selected }) {
                 fieldHighlighted ? "bg-blue-500/15 text-blue-200" : ""
               ].join(" "),
               children: [
-                isId ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-                  /* @__PURE__ */ jsx6(
+                isId ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx7(
                     Handle,
                     {
                       id: `target-${field.displayName}-left`,
@@ -1270,7 +1703,7 @@ function EntityNode({ data, selected }) {
                       style: { top: "50%" }
                     }
                   ),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx7(
                     Handle,
                     {
                       id: `target-${field.displayName}-right`,
@@ -1281,8 +1714,8 @@ function EntityNode({ data, selected }) {
                     }
                   )
                 ] }) : null,
-                isRelation ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-                  /* @__PURE__ */ jsx6(
+                isRelation ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx7(
                     Handle,
                     {
                       id: `source-${field.displayName}-left`,
@@ -1292,7 +1725,7 @@ function EntityNode({ data, selected }) {
                       style: { top: "50%" }
                     }
                   ),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx7(
                     Handle,
                     {
                       id: `source-${field.displayName}-right`,
@@ -1303,24 +1736,24 @@ function EntityNode({ data, selected }) {
                     }
                   )
                 ] }) : null,
-                /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                  isId ? /* @__PURE__ */ jsx6(KeyRound, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
-                  isRelation ? /* @__PURE__ */ jsx6(Link2, { className: ["h-3 w-3 shrink-0", fieldHighlighted ? "text-blue-300" : "text-blue-400"].join(" ") }) : null,
-                  isDocument ? /* @__PURE__ */ jsx6(FileText, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
-                  /* @__PURE__ */ jsx6("span", { className: "truncate", children: field.displayName })
+                /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                  isId ? /* @__PURE__ */ jsx7(KeyRound, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
+                  isRelation ? /* @__PURE__ */ jsx7(Link2, { className: ["h-3 w-3 shrink-0", fieldHighlighted ? "text-blue-300" : "text-blue-400"].join(" ") }) : null,
+                  isDocument ? /* @__PURE__ */ jsx7(FileText, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
+                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: field.displayName })
                 ] }),
-                /* @__PURE__ */ jsx6("span", { className: "max-w-[96px] truncate text-right text-zinc-500", children: type })
+                /* @__PURE__ */ jsx7("span", { className: "max-w-[96px] truncate text-right text-zinc-500", children: type })
               ]
             },
             `${field.name}:${field.displayName}`
           );
         }) }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 rounded-b-xl border-t border-zinc-700 bg-zinc-800 px-3 py-1.5 text-[10px] text-zinc-500", children: [
-          /* @__PURE__ */ jsxs3("span", { className: "tabular-nums", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2 rounded-b-xl border-t border-zinc-700 bg-zinc-800 px-3 py-1.5 text-[10px] text-zinc-500", children: [
+          /* @__PURE__ */ jsxs4("span", { className: "tabular-nums", children: [
             node.rowCount.toLocaleString(),
             " rows"
           ] }),
-          /* @__PURE__ */ jsxs3("span", { className: "tabular-nums", children: [
+          /* @__PURE__ */ jsxs4("span", { className: "tabular-nums", children: [
             node.relationCount,
             " rel \xB7 ",
             node.scalarCount,
@@ -1469,7 +1902,7 @@ function layoutNodes(nodes, edges) {
   let maxY = 0;
   if (connected.length > 0) {
     const g = new dagre.graphlib.Graph();
-    g.setGraph({ rankdir: "LR", ranksep: 130, nodesep: 36, marginx: 40, marginy: 40 });
+    g.setGraph({ rankdir: "LR", ranksep: 160, nodesep: 48, marginx: 40, marginy: 40 });
     g.setDefaultEdgeLabel(() => ({}));
     for (const node of connected) {
       g.setNode(node.id, { width: NODE_WIDTH, height: nodeHeight(node) });
@@ -1581,7 +2014,6 @@ function buildEntityGraphModel(cartridges) {
     }
   }
   recomputeNodeCounts(nodes);
-  layoutNodes(nodes, edges);
   return {
     nodes,
     edges,
@@ -1589,9 +2021,10 @@ function buildEntityGraphModel(cartridges) {
   };
 }
 function filterEntityGraphModel(model, visibleIds) {
-  const nodes = model.nodes.filter((node) => visibleIds.has(node.id));
+  const nodes = model.nodes.filter((node) => visibleIds.has(node.id)).map((node) => ({ ...node, position: { ...node.position } }));
   const ids = new Set(nodes.map((node) => node.id));
   const edges = model.edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target));
+  layoutNodes(nodes, edges);
   return {
     nodes,
     edges,
@@ -1600,28 +2033,27 @@ function filterEntityGraphModel(model, visibleIds) {
 }
 
 // src/components/devtools/entity-graph/diagram-tab.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var API_BASE = typeof NIMBIT_API_ENDPOINT !== "undefined" && NIMBIT_API_ENDPOINT || "";
-var STORAGE_KEY = "nimbit:inspector:entity-graph:hidden-carts";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var nodeTypes = { entity: EntityNode };
 var FitOnReady = ({ fitKey }) => {
   const initialized = useNodesInitialized();
   const { fitView } = useReactFlow();
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (initialized) fitView({ padding: 0.25, duration: 200 });
   }, [initialized, fitKey, fitView]);
   return null;
 };
 function useContracts() {
-  const [contracts, setContracts] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(true);
-  const [error, setError] = React6.useState(null);
-  React6.useEffect(() => {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const [contracts, setContracts] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(true);
+  const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
     const ac = new AbortController();
     let cancelled = false;
     (async () => {
       try {
-        const r = await fetch(`${API_BASE}/_console/contracts`, {
+        const r = await fetch(`${apiBaseUrl}/_console/contracts`, {
           signal: ac.signal,
           credentials: "include"
         });
@@ -1640,7 +2072,7 @@ function useContracts() {
       cancelled = true;
       ac.abort();
     };
-  }, []);
+  }, [apiBaseUrl]);
   return { contracts, loading, error };
 }
 function registryFromContracts(contracts) {
@@ -1656,58 +2088,40 @@ function registryFromContracts(contracts) {
   }
   return reg;
 }
-var DiagramView = () => {
+var DiagramView = ({ visibleIds, onSelectNode }) => {
   const { contracts, loading, error } = useContracts();
-  const graph = React6.useMemo(
+  const graph = React7.useMemo(
     () => buildEntityGraphModel(cartsFromContracts(contracts)),
     [contracts]
   );
-  const registry = React6.useMemo(() => registryFromContracts(contracts), [contracts]);
+  const registry = React7.useMemo(() => registryFromContracts(contracts), [contracts]);
   if (graph.nodes.length === 0) {
     let msg = "No installed cartridges with entities.";
     if (loading) msg = "Loading entity graph\u2026";
     else if (error) msg = `Failed to load contracts: ${error}`;
-    return /* @__PURE__ */ jsx7("div", { className: "p-3 text-[12px] text-muted-foreground", children: msg });
+    return /* @__PURE__ */ jsx8("div", { className: "p-3 text-[12px] text-muted-foreground", children: msg });
   }
-  return /* @__PURE__ */ jsx7(DiagramInner, { graph, registry });
-};
-var DiagramInner = ({
-  graph,
-  registry
-}) => {
-  const rowCounts = useBulkRowCounts(registry);
-  const [hiddenCarts, setHiddenCarts] = React6.useState(() => {
-    if (typeof window === "undefined") return /* @__PURE__ */ new Set();
-    try {
-      const raw = window.localStorage.getItem(STORAGE_KEY);
-      const saved = raw ? JSON.parse(raw) : [];
-      return new Set(Array.isArray(saved) ? saved.filter((n) => typeof n === "string") : []);
-    } catch {
-      return /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsx8(
+    DiagramInner,
+    {
+      graph,
+      registry,
+      visibleIds,
+      onSelectNode
     }
-  });
-  const [focusedNodeId, setFocusedNodeId] = React6.useState(null);
-  React6.useEffect(() => {
-    if (typeof window === "undefined") return;
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...hiddenCarts]));
-  }, [hiddenCarts]);
-  const cartGroups = React6.useMemo(() => {
-    const counts = /* @__PURE__ */ new Map();
-    for (const node of graph.nodes) counts.set(node.cartridge, (counts.get(node.cartridge) ?? 0) + 1);
-    return [...counts.entries()].map(([name, total]) => ({ name, total })).sort((a, b) => a.name.localeCompare(b.name));
-  }, [graph.nodes]);
-  const visibleIds = React6.useMemo(
-    () => new Set(graph.nodes.filter((n) => !hiddenCarts.has(n.cartridge)).map((n) => n.id)),
-    [graph.nodes, hiddenCarts]
   );
-  const visibleGraph = React6.useMemo(
+};
+var DiagramInner = ({ graph, registry, visibleIds, onSelectNode }) => {
+  const rowCounts = useBulkRowCounts(registry);
+  const [focusedNodeId, setFocusedNodeId] = React7.useState(null);
+  const visibleGraph = React7.useMemo(
     () => filterEntityGraphModel(graph, visibleIds),
     [graph, visibleIds]
   );
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (focusedNodeId && !visibleIds.has(focusedNodeId)) setFocusedNodeId(null);
   }, [focusedNodeId, visibleIds]);
-  const focusedConnections = React6.useMemo(() => {
+  const focusedConnections = React7.useMemo(() => {
     if (!focusedNodeId) {
       return {
         connectedIds: /* @__PURE__ */ new Set(),
@@ -1733,11 +2147,7 @@ var DiagramInner = ({
     }
     return { connectedIds, edgeIds, fieldsByNode };
   }, [focusedNodeId, visibleGraph.edges]);
-  const liveRows = React6.useMemo(
-    () => visibleGraph.nodes.reduce((sum, n) => sum + (rowCounts[n.id] ?? 0), 0),
-    [visibleGraph.nodes, rowCounts]
-  );
-  const nodes = React6.useMemo(
+  const nodes = React7.useMemo(
     () => visibleGraph.nodes.map((node) => ({
       id: node.id,
       type: "entity",
@@ -1755,7 +2165,7 @@ var DiagramInner = ({
     })),
     [focusedConnections, focusedNodeId, visibleGraph.nodes, rowCounts]
   );
-  const edges = React6.useMemo(() => {
+  const edges = React7.useMemo(() => {
     const nodeById = new Map(visibleGraph.nodes.map((node) => [node.id, node]));
     const laneCounts = /* @__PURE__ */ new Map();
     return visibleGraph.edges.map((edge) => {
@@ -1787,95 +2197,54 @@ var DiagramInner = ({
       };
     });
   }, [focusedConnections.edgeIds, focusedNodeId, visibleGraph.edges, visibleGraph.nodes]);
-  const toggleCart = React6.useCallback((name) => {
-    setHiddenCarts((prev) => {
-      const next = new Set(prev);
-      if (next.has(name)) next.delete(name);
-      else next.add(name);
-      return next;
-    });
-  }, []);
-  const onNodeClick = React6.useCallback((_, node) => {
-    const data = node.data;
-    const nodeId = entityGraphId(data.cartridge, data.entity);
-    setFocusedNodeId((prev) => prev === nodeId ? null : nodeId);
-  }, []);
-  const clearFocusedNode = React6.useCallback(() => setFocusedNodeId(null), []);
-  return /* @__PURE__ */ jsxs4("div", { className: "flex h-full min-h-0 w-full flex-col", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex h-7 shrink-0 items-center gap-3 border-b border-border bg-background px-2 text-[11px] text-muted-foreground select-none", children: [
-      /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-foreground", children: [
-        /* @__PURE__ */ jsx7(GitBranch, { className: "h-3.5 w-3.5" }),
-        "Entity Graph"
-      ] }),
-      /* @__PURE__ */ jsxs4("span", { className: "ml-auto inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7(Database2, { className: "h-3 w-3" }),
-        visibleGraph.totals.entities,
-        " entities"
-      ] }),
-      /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7(GitBranch, { className: "h-3 w-3" }),
-        visibleGraph.totals.relationships,
-        " relationships"
-      ] }),
-      /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx7(Rows3, { className: "h-3 w-3" }),
-        liveRows.toLocaleString(),
-        " rows"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "relative min-h-0 flex-1 bg-zinc-950", children: [
-      cartGroups.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "pointer-events-none absolute left-2 top-2 z-10 max-h-[calc(100%-1rem)]", children: /* @__PURE__ */ jsx7("div", { className: "pointer-events-auto flex max-h-full flex-col gap-0.5 overflow-y-auto rounded-md border border-zinc-700 bg-zinc-900/95 p-1 shadow-sm backdrop-blur", children: cartGroups.map((g) => {
-        const hidden = hiddenCarts.has(g.name);
-        return /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            type: "button",
-            onClick: () => toggleCart(g.name),
-            className: cn(
-              "flex items-center gap-2 rounded px-2 py-1 text-left font-mono text-[11px] hover:bg-zinc-800",
-              hidden ? "text-zinc-500" : "text-zinc-100"
-            ),
-            title: hidden ? `Show ${g.name}` : `Hide ${g.name}`,
-            children: [
-              hidden ? /* @__PURE__ */ jsx7(EyeOff, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx7(Eye, { className: "h-3.5 w-3.5 shrink-0 text-orange-400" }),
-              /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: g.name }),
-              /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-[10px] tabular-nums text-zinc-500", children: g.total })
-            ]
-          },
-          g.name
-        );
-      }) }) }) : null,
-      nodes.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex h-full items-center justify-center text-[12px] text-zinc-500", children: "No entities are visible." }) : /* @__PURE__ */ jsx7(ReactFlowProvider, { children: /* @__PURE__ */ jsxs4(
-        ReactFlow,
-        {
-          colorMode: "dark",
-          nodes,
-          edges,
-          nodeTypes,
-          fitView: true,
-          fitViewOptions: { padding: 0.2 },
-          minZoom: 0.1,
-          maxZoom: 1.6,
-          nodesDraggable: false,
-          nodesConnectable: false,
-          elementsSelectable: true,
-          panOnDrag: true,
-          panOnScroll: true,
-          zoomOnScroll: false,
-          zoomOnPinch: true,
-          selectionOnDrag: false,
-          onNodeClick,
-          onPaneClick: clearFocusedNode,
-          proOptions: { hideAttribution: true },
-          children: [
-            /* @__PURE__ */ jsx7(FitOnReady, { fitKey: [...visibleIds].sort().join("|") }),
-            /* @__PURE__ */ jsx7(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1, color: "#3f3f46" }),
-            /* @__PURE__ */ jsx7(Controls, { showInteractive: false })
-          ]
-        }
-      ) })
-    ] })
-  ] });
+  const onNodeClick = React7.useCallback(
+    (_, node) => {
+      const data = node.data;
+      const nodeId = entityGraphId(data.cartridge, data.entity);
+      setFocusedNodeId((prev) => prev === nodeId ? null : nodeId);
+      onSelectNode?.(data.cartridge, data.entity);
+    },
+    [onSelectNode]
+  );
+  const onNodeContextMenu = React7.useCallback(
+    (e, node) => {
+      e.preventDefault();
+      const data = node.data;
+      setFocusedNodeId(entityGraphId(data.cartridge, data.entity));
+      onSelectNode?.(data.cartridge, data.entity);
+    },
+    [onSelectNode]
+  );
+  const clearFocusedNode = React7.useCallback(() => setFocusedNodeId(null), []);
+  return /* @__PURE__ */ jsx8("div", { className: "flex h-full min-h-0 w-full flex-col", children: /* @__PURE__ */ jsx8("div", { className: "relative min-h-0 flex-1 bg-zinc-950", children: nodes.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "flex h-full items-center justify-center text-[12px] text-zinc-500", children: "No entities are visible." }) : /* @__PURE__ */ jsx8(ReactFlowProvider, { children: /* @__PURE__ */ jsxs5(
+    ReactFlow,
+    {
+      colorMode: "dark",
+      nodes,
+      edges,
+      nodeTypes,
+      fitView: true,
+      fitViewOptions: { padding: 0.2 },
+      minZoom: 0.1,
+      maxZoom: 1.6,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      panOnDrag: true,
+      zoomOnScroll: true,
+      zoomOnPinch: true,
+      selectionOnDrag: false,
+      onNodeClick,
+      onNodeContextMenu,
+      onPaneClick: clearFocusedNode,
+      proOptions: { hideAttribution: true },
+      children: [
+        /* @__PURE__ */ jsx8(FitOnReady, { fitKey: [...visibleIds].sort().join("|") }),
+        /* @__PURE__ */ jsx8(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1, color: "#3f3f46" }),
+        /* @__PURE__ */ jsx8(Controls, { showInteractive: false })
+      ]
+    }
+  ) }) }) });
 };
 
 // src/components/ui/sheet.tsx
@@ -1884,7 +2253,7 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 // src/components/ui/button.tsx
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -1922,7 +2291,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Comp,
     {
       "data-slot": "button",
@@ -1936,20 +2305,20 @@ function Button({
 
 // src/components/ui/sheet.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx9(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx10(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -1968,9 +2337,9 @@ function SheetContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(SheetPortal, { children: [
-    /* @__PURE__ */ jsx9(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(SheetPortal, { children: [
+    /* @__PURE__ */ jsx10(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs6(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
@@ -1982,18 +2351,18 @@ function SheetContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx9(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs5(
+          showCloseButton && /* @__PURE__ */ jsx10(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs6(
             Button,
             {
               variant: "ghost",
               className: "absolute top-3 right-3",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   XIcon,
                   {}
                 ),
-                /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -2003,7 +2372,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "sheet-header",
@@ -2016,7 +2385,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -2032,7 +2401,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -2043,16 +2412,63 @@ function SheetDescription({
 }
 
 // src/components/devtools/data-tab.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DataTab = () => {
-  const { dataCart, setDataCart, dataEntity, setDataEntity } = useDevTools();
-  const [detail, setDetail] = React7.useState(null);
-  const [view, setView] = React7.useState("table");
+  const {
+    dataCart,
+    setDataCart,
+    dataEntity,
+    setDataEntity,
+    view,
+    setView,
+    graphCarts,
+    setGraphCarts,
+    hiddenEntities,
+    setHiddenEntities,
+    graphLeftW,
+    setGraphLeftW,
+    graphRightW,
+    setGraphRightW
+  } = useDevTools();
+  const leftRef = React8.useRef(null);
+  const rightRef = React8.useRef(null);
+  const [detail, setDetail] = React8.useState(null);
+  const [graphSel, setGraphSel] = React8.useState(null);
   const { registry, carts, loading, error } = useLiveBulkRegistry();
+  const selectedCarts = graphCarts ?? new Set(carts);
+  const toggleGraphCart = (cart) => {
+    setGraphCarts((prev) => {
+      const next = new Set(prev ?? carts);
+      if (next.has(cart)) next.delete(cart);
+      else next.add(cart);
+      return next;
+    });
+  };
+  const toggleEntity = (id) => {
+    setHiddenEntities((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const visibleIds = React8.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const cart of carts) {
+      if (!selectedCarts.has(cart)) continue;
+      for (const e of registry[cart] ?? [])
+        if (!hiddenEntities.has(`${cart}:${e.name}`)) ids.add(`${cart}:${e.name}`);
+    }
+    return ids;
+  }, [carts, registry, graphCarts, hiddenEntities]);
+  React8.useEffect(() => {
+    if (graphSel && !visibleIds.has(`${graphSel.cart}:${graphSel.entity}`))
+      setGraphSel(null);
+  }, [graphSel, visibleIds]);
   const activeCart = dataCart && registry[dataCart] ? dataCart : carts[0] ?? null;
   const entities = activeCart ? registry[activeCart] ?? [] : [];
   const activeEntity = entities.find((e) => e.name === dataEntity) ?? entities[0] ?? null;
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (activeCart && activeCart !== dataCart) setDataCart(activeCart);
     if (activeEntity && activeEntity.name !== dataEntity) setDataEntity(activeEntity.name);
   }, [activeCart, activeEntity, dataCart, dataEntity, setDataCart, setDataEntity]);
@@ -2060,60 +2476,100 @@ var DataTab = () => {
     let msg = "No installed cartridges with entities.";
     if (loading) msg = "Loading cartridges\u2026";
     else if (error) msg = `Failed to load cartridges: ${error}`;
-    return /* @__PURE__ */ jsx10("div", { className: "p-3 text-[12px] text-muted-foreground", children: msg });
+    return /* @__PURE__ */ jsx11("div", { className: "p-3 text-[12px] text-muted-foreground", children: msg });
   }
-  return /* @__PURE__ */ jsx10(BulkStreamProvider, { registry, children: /* @__PURE__ */ jsxs6("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex h-7 shrink-0 items-center gap-1 overflow-x-auto border-b border-border bg-background px-1 select-none", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-0.5 pr-1", children: [
-        /* @__PURE__ */ jsx10(ViewBtn, { active: view === "table", onClick: () => setView("table"), label: "Table", children: /* @__PURE__ */ jsx10(Table2, { className: "size-3" }) }),
-        /* @__PURE__ */ jsx10(ViewBtn, { active: view === "diagram", onClick: () => setView("diagram"), label: "Graph", children: /* @__PURE__ */ jsx10(Network, { className: "size-3" }) })
+  return /* @__PURE__ */ jsx11(BulkStreamProvider, { registry, children: /* @__PURE__ */ jsxs7("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex h-7 shrink-0 items-center gap-1 overflow-x-auto border-b border-border bg-background px-1 select-none", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-0.5 pr-1", children: [
+        /* @__PURE__ */ jsx11(ViewBtn, { active: view === "table", onClick: () => setView("table"), label: "Table", children: /* @__PURE__ */ jsx11(Table2, { className: "size-3" }) }),
+        /* @__PURE__ */ jsx11(ViewBtn, { active: view === "diagram", onClick: () => setView("diagram"), label: "Graph", children: /* @__PURE__ */ jsx11(Network, { className: "size-3" }) })
       ] }),
-      view === "table" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx10("div", { className: "h-4 w-px shrink-0 bg-border" }),
-        carts.map((cart) => {
-          const isActive = cart === activeCart;
-          return /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              "data-active": isActive,
-              onClick: () => {
-                setDataCart(cart);
-                const first = registry[cart]?.[0];
-                setDataEntity(first ? first.name : null);
-              },
-              className: cn(
-                "h-5 shrink-0 rounded-full px-2.5 text-[11px] leading-none outline-none transition-colors",
-                "border border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-                "data-[active=true]:border-border data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
-              ),
-              children: cart
-            },
-            cart
-          );
-        })
-      ] }) : null
-    ] }),
-    view === "diagram" ? /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx10(DiagramView, {}) }) : /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1", children: [
-      /* @__PURE__ */ jsx10("div", { className: "flex w-44 shrink-0 flex-col overflow-y-auto border-r border-border bg-muted/10 py-1", children: entities.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "px-2 py-1 text-[11px] text-muted-foreground", children: "No entities" }) : entities.map((e) => {
-        const isActive = e.name === activeEntity?.name;
-        return /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("div", { className: "h-4 w-px shrink-0 bg-border" }),
+      carts.map((cart) => {
+        const isActive = view === "table" ? cart === activeCart : selectedCarts.has(cart);
+        return /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
             "data-active": isActive,
-            onClick: () => setDataEntity(e.name),
+            onClick: () => {
+              if (view === "table") {
+                setDataCart(cart);
+                const first = registry[cart]?.[0];
+                setDataEntity(first ? first.name : null);
+              } else {
+                toggleGraphCart(cart);
+              }
+            },
             className: cn(
-              "h-6 shrink-0 text-left px-2 text-[12px] leading-none outline-none transition-colors",
-              "text-foreground hover:bg-accent hover:text-accent-foreground",
-              "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+              "h-5 shrink-0 rounded-full px-2.5 text-[11px] leading-none outline-none transition-colors",
+              "border border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+              "data-[active=true]:border-border data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
             ),
-            children: e.name
+            children: cart
           },
-          e.name
+          cart
         );
-      }) }),
-      /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1", children: activeEntity ? /* @__PURE__ */ jsx10(
+      })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          ref: leftRef,
+          style: { width: graphLeftW },
+          className: "relative shrink-0 border-r border-border bg-muted/10",
+          children: [
+            /* @__PURE__ */ jsx11(ResizeHandle, { edge: "right", targetRef: leftRef, min: 120, max: 480, onCommit: setGraphLeftW }),
+            /* @__PURE__ */ jsx11("div", { className: "flex h-full flex-col overflow-y-auto py-1", children: view === "table" ? entities.length === 0 ? /* @__PURE__ */ jsx11("div", { className: "px-2 py-1 text-[11px] text-muted-foreground", children: "No entities" }) : entities.map((e) => {
+              const isActive = e.name === activeEntity?.name;
+              return /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  "data-active": isActive,
+                  onClick: () => setDataEntity(e.name),
+                  className: cn(
+                    "h-6 shrink-0 text-left px-2 text-[12px] leading-none outline-none transition-colors",
+                    "text-foreground hover:bg-accent hover:text-accent-foreground",
+                    "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+                  ),
+                  children: e.name
+                },
+                e.name
+              );
+            }) : carts.filter((c) => selectedCarts.has(c)).length === 0 ? /* @__PURE__ */ jsx11("div", { className: "px-2 py-1 text-[11px] text-muted-foreground", children: "No cartridges selected" }) : carts.filter((c) => selectedCarts.has(c)).map((cart) => /* @__PURE__ */ jsxs7("div", { className: "mb-1", children: [
+              /* @__PURE__ */ jsx11("div", { className: "px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground/60", children: cart }),
+              (registry[cart] ?? []).map((e) => {
+                const id = `${cart}:${e.name}`;
+                const on = !hiddenEntities.has(id);
+                return /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    "data-active": on,
+                    onClick: () => toggleEntity(id),
+                    title: on ? `Hide ${e.name}` : `Show ${e.name}`,
+                    className: cn(
+                      "h-6 w-full shrink-0 text-left px-2 text-[12px] leading-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground",
+                      on ? "text-foreground" : "text-muted-foreground/40 line-through"
+                    ),
+                    children: e.name
+                  },
+                  id
+                );
+              })
+            ] }, cart)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "min-h-0 min-w-0 flex-1", children: view === "diagram" ? /* @__PURE__ */ jsx11(
+        DiagramView,
+        {
+          visibleIds,
+          onSelectNode: (cart, entity) => setGraphSel({ cart, entity })
+        }
+      ) : activeEntity ? /* @__PURE__ */ jsx11(
         data_table_default,
         {
           cart: activeCart,
@@ -2122,26 +2578,125 @@ var DataTab = () => {
           onSelectRow: (row) => setDetail(row)
         },
         `${activeCart}:${activeEntity.name}`
-      ) : /* @__PURE__ */ jsx10("div", { className: "p-3 text-[12px] text-muted-foreground", children: "Pick an entity." }) })
+      ) : /* @__PURE__ */ jsx11("div", { className: "p-3 text-[12px] text-muted-foreground", children: "Pick an entity." }) }),
+      view === "diagram" && graphSel ? /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          ref: rightRef,
+          style: { width: graphRightW },
+          className: "relative flex shrink-0 flex-col border-l border-border bg-background",
+          children: [
+            /* @__PURE__ */ jsx11(ResizeHandle, { edge: "left", targetRef: rightRef, min: 280, max: 900, onCommit: setGraphRightW }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex h-7 shrink-0 items-center gap-1 border-b border-border bg-muted/10 px-2 select-none", children: [
+              /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1 truncate text-[12px]", children: [
+                /* @__PURE__ */ jsxs7("span", { className: "text-muted-foreground", children: [
+                  graphSel.cart,
+                  "."
+                ] }),
+                graphSel.entity
+              ] }),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  title: "Close",
+                  onClick: () => setGraphSel(null),
+                  className: "grid size-5 shrink-0 place-items-center rounded-md text-foreground outline-none hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsx11(X, { className: "size-3.5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx11(
+              data_table_default,
+              {
+                cart: graphSel.cart,
+                entity: graphSel.entity,
+                searchFields: (registry[graphSel.cart] ?? []).find((e) => e.name === graphSel.entity)?.searchFields ?? [],
+                onSelectRow: (row) => setDetail(row)
+              },
+              `${graphSel.cart}:${graphSel.entity}`
+            ) })
+          ]
+        }
+      ) : null
     ] }),
-    /* @__PURE__ */ jsx10(Sheet, { open: !!detail, onOpenChange: (o) => !o && setDetail(null), children: /* @__PURE__ */ jsxs6(SheetContent, { side: "right", className: "w-[480px] sm:max-w-[480px]", children: [
-      /* @__PURE__ */ jsxs6(SheetHeader, { children: [
-        /* @__PURE__ */ jsxs6(SheetTitle, { className: "text-[13px]", children: [
+    /* @__PURE__ */ jsx11(Sheet, { open: !!detail, onOpenChange: (o) => !o && setDetail(null), children: /* @__PURE__ */ jsxs7(SheetContent, { side: "right", className: "w-[480px] sm:max-w-[480px]", children: [
+      /* @__PURE__ */ jsxs7(SheetHeader, { children: [
+        /* @__PURE__ */ jsxs7(SheetTitle, { className: "text-[13px]", children: [
           activeCart,
           ".",
           activeEntity?.name,
-          detail?.id ? /* @__PURE__ */ jsx10("span", { className: "ml-2 font-mono text-[11px] text-muted-foreground", children: detail.id }) : null
+          detail?.id ? /* @__PURE__ */ jsx11("span", { className: "ml-2 font-mono text-[11px] text-muted-foreground", children: detail.id }) : null
         ] }),
-        /* @__PURE__ */ jsx10(SheetDescription, { className: "text-[11px]", children: "Row detail" })
+        /* @__PURE__ */ jsx11(SheetDescription, { className: "text-[11px]", children: "Row detail" })
       ] }),
-      /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1 overflow-auto px-4 pb-4", children: detail ? /* @__PURE__ */ jsx10("table", { className: "w-full text-[12px]", children: /* @__PURE__ */ jsx10("tbody", { children: Object.entries(detail).map(([k, v]) => /* @__PURE__ */ jsxs6("tr", { className: "border-b border-border/40 align-top", children: [
-        /* @__PURE__ */ jsx10("td", { className: "w-32 py-1 pr-2 font-mono text-[11px] text-muted-foreground", children: k }),
-        /* @__PURE__ */ jsx10("td", { className: "break-all py-1 font-mono", children: v || /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground/60", children: "\u2205" }) })
+      /* @__PURE__ */ jsx11("div", { className: "min-h-0 flex-1 overflow-auto px-4 pb-4", children: detail ? /* @__PURE__ */ jsx11("table", { className: "w-full text-[12px]", children: /* @__PURE__ */ jsx11("tbody", { children: Object.entries(detail).map(([k, v]) => /* @__PURE__ */ jsxs7("tr", { className: "border-b border-border/40 align-top", children: [
+        /* @__PURE__ */ jsx11("td", { className: "w-32 py-1 pr-2 font-mono text-[11px] text-muted-foreground", children: k }),
+        /* @__PURE__ */ jsx11("td", { className: "break-all py-1 font-mono", children: v || /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground/60", children: "\u2205" }) })
       ] }, k)) }) }) : null })
     ] }) })
   ] }) });
 };
-var ViewBtn = ({ active, onClick, label, children }) => /* @__PURE__ */ jsxs6(
+var ResizeHandle = ({ edge, targetRef, min, max, onCommit }) => {
+  const onPointerDown = (e) => {
+    e.preventDefault();
+    const el = targetRef.current;
+    if (!el) return;
+    const handle = e.currentTarget;
+    handle.setPointerCapture(e.pointerId);
+    const startX = e.clientX;
+    const startW = el.offsetWidth;
+    let last = startW;
+    let raf = 0;
+    let pending = null;
+    const flush = () => {
+      raf = 0;
+      if (pending == null) return;
+      last = pending;
+      el.style.width = `${pending}px`;
+      pending = null;
+    };
+    const onMove = (ev) => {
+      ev.preventDefault();
+      const dx = ev.clientX - startX;
+      const delta = edge === "left" ? -dx : dx;
+      pending = Math.max(min, Math.min(max, startW + delta));
+      if (!raf) raf = requestAnimationFrame(flush);
+    };
+    const onUp = () => {
+      if (raf) cancelAnimationFrame(raf);
+      flush();
+      onCommit(last);
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onUp);
+      handle.removeEventListener("pointercancel", onUp);
+      try {
+        handle.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "ew-resize";
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onUp);
+    handle.addEventListener("pointercancel", onUp);
+  };
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      onPointerDown,
+      style: { touchAction: "none" },
+      className: cn(
+        "absolute top-0 bottom-0 z-20 w-1.5 cursor-ew-resize bg-transparent hover:bg-accent/40",
+        edge === "left" ? "-left-px" : "-right-px"
+      )
+    }
+  );
+};
+var ViewBtn = ({ active, onClick, label, children }) => /* @__PURE__ */ jsxs7(
   "button",
   {
     type: "button",
@@ -2162,22 +2717,1112 @@ var ViewBtn = ({ active, onClick, label, children }) => /* @__PURE__ */ jsxs6(
 var data_tab_default = DataTab;
 
 // src/components/devtools/settings-tab.tsx
-import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
 var SettingsTab = () => {
-  return /* @__PURE__ */ jsx11(Fragment3, {});
+  return /* @__PURE__ */ jsx12(Fragment3, {});
 };
 var settings_tab_default = SettingsTab;
 
+// src/components/devtools/sources/sources-tab.tsx
+import React11 from "react";
+import { Play as Play2, Save } from "lucide-react";
+
+// src/components/devtools/sources/use-dev-files.ts
+import { useCallback, useEffect as useEffect4, useState as useState3 } from "react";
+function useDevMode() {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const [status, setStatus] = useState3(null);
+  useEffect4(() => {
+    let cancelled = false;
+    fetch(`${apiBaseUrl}/_console/dev/status`, { credentials: "include" }).then((r) => r.ok ? r.json() : null).then((s) => {
+      if (!cancelled) setStatus(s && s.dev ? s : null);
+    }).catch(() => {
+      if (!cancelled) setStatus(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl]);
+  return status;
+}
+async function jsonOrThrow(r) {
+  const body = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(body?.error ?? `HTTP ${r.status}`);
+  return body;
+}
+function useDevFilesApi() {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const listCarts = useCallback(
+    async () => (await jsonOrThrow(await fetch(`${apiBaseUrl}/_console/dev/carts`, { credentials: "include" }))).carts ?? [],
+    [apiBaseUrl]
+  );
+  const readFile = useCallback(
+    async (cart, path) => jsonOrThrow(
+      await fetch(
+        `${apiBaseUrl}/_console/dev/file?cart=${encodeURIComponent(cart)}&path=${encodeURIComponent(path)}`,
+        { credentials: "include" }
+      )
+    ),
+    [apiBaseUrl]
+  );
+  const writeFile = useCallback(
+    async (cart, path, content) => jsonOrThrow(
+      await fetch(`${apiBaseUrl}/_console/dev/file`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ cart, path, content })
+      })
+    ),
+    [apiBaseUrl]
+  );
+  const applyCart = useCallback(
+    async (cart) => jsonOrThrow(
+      await fetch(`${apiBaseUrl}/_console/dev/apply`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ cart })
+      })
+    ),
+    [apiBaseUrl]
+  );
+  const scaffoldCart = useCallback(
+    async (name) => jsonOrThrow(
+      await fetch(`${apiBaseUrl}/_console/dev/scaffold`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ name })
+      })
+    ),
+    [apiBaseUrl]
+  );
+  return { listCarts, readFile, writeFile, applyCart, scaffoldCart };
+}
+
+// src/components/devtools/sources/file-tree.tsx
+import React9 from "react";
+import { Lock, Plus, FilePlus2 } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var FileTree = ({
+  carts,
+  selected,
+  dirtyKeys,
+  onSelect,
+  onNewCart,
+  onNewMigration
+}) => {
+  const [creating, setCreating] = React9.useState(false);
+  const [newName, setNewName] = React9.useState("");
+  const submitNew = () => {
+    const name = newName.trim();
+    if (/^[a-z][a-z0-9_]*$/.test(name)) {
+      onNewCart(name);
+      setNewName("");
+      setCreating(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex h-6 shrink-0 items-center justify-between border-b border-border px-2", children: [
+      /* @__PURE__ */ jsx13("span", { className: "text-[11px] font-medium text-muted-foreground", children: "Cartridges" }),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          title: "New cartridge",
+          onClick: () => setCreating((v) => !v),
+          className: "rounded p-0.5 hover:bg-accent",
+          children: /* @__PURE__ */ jsx13(Plus, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    creating && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 border-b border-border p-1", children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          autoFocus: true,
+          value: newName,
+          onChange: (e) => setNewName(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") submitNew();
+            if (e.key === "Escape") setCreating(false);
+          },
+          placeholder: "cart_name",
+          className: "h-5 w-full rounded border border-border bg-background px-1 text-[11px] outline-none"
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          onClick: submitNew,
+          disabled: !/^[a-z][a-z0-9_]*$/.test(newName.trim()),
+          className: "rounded px-1 text-[11px] hover:bg-accent disabled:opacity-40",
+          children: "Create"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "min-h-0 flex-1 overflow-y-auto py-1", children: carts.map((cart) => /* @__PURE__ */ jsxs8("div", { className: "mb-1", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
+        /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-1 text-[11px] font-medium", children: [
+          cart.name,
+          !cart.writable && /* @__PURE__ */ jsx13(
+            Lock,
+            {
+              className: "size-3 text-muted-foreground",
+              "aria-label": cart.reason ?? "read-only"
+            }
+          )
+        ] }),
+        cart.writable && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            title: "New migration",
+            onClick: () => onNewMigration(cart.name),
+            className: "rounded p-0.5 text-muted-foreground hover:bg-accent",
+            children: /* @__PURE__ */ jsx13(FilePlus2, { className: "size-3" })
+          }
+        )
+      ] }),
+      cart.files.map((path) => {
+        const key = `${cart.name}:${path}`;
+        const isSel = selected?.cart === cart.name && selected?.path === path;
+        return /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect({ cart: cart.name, path }),
+            "data-active": isSel,
+            className: cn(
+              "flex w-full items-center gap-1 truncate py-0.5 pl-4 pr-2 text-left text-[11px]",
+              "hover:bg-accent data-[active=true]:bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "truncate", children: path }),
+              dirtyKeys.has(key) && /* @__PURE__ */ jsx13("span", { className: "size-1.5 shrink-0 rounded-full bg-amber-400", title: "unsaved" })
+            ]
+          },
+          path
+        );
+      })
+    ] }, cart.name)) })
+  ] });
+};
+
+// src/components/devtools/sources/nbt-editor.tsx
+import React10 from "react";
+import { EditorState } from "@codemirror/state";
+import {
+  EditorView as EditorView2,
+  keymap as keymap2,
+  lineNumbers,
+  drawSelection,
+  highlightActiveLine
+} from "@codemirror/view";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab
+} from "@codemirror/commands";
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching
+} from "@codemirror/language";
+import { lintGutter } from "@codemirror/lint";
+import { searchKeymap } from "@codemirror/search";
+import { completionKeymap, closeBrackets } from "@codemirror/autocomplete";
+
+// src/components/devtools/sources/nbt-language.ts
+import {
+  StreamLanguage,
+  LanguageSupport,
+  indentUnit
+} from "@codemirror/language";
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "entity",
+  "enum",
+  "struct",
+  "const",
+  "export",
+  "extends",
+  "fn",
+  "on",
+  "action",
+  "activity",
+  "task",
+  "variant",
+  "workflow",
+  "command",
+  "middleware",
+  "schedule",
+  "every",
+  "jai",
+  "migration",
+  "test",
+  "mock",
+  "assert",
+  "cartridge",
+  "service",
+  "component",
+  "app",
+  "route",
+  "layout",
+  "import",
+  "from",
+  "if",
+  "elif",
+  "else",
+  "while",
+  "for",
+  "in",
+  "return",
+  "break",
+  "continue",
+  "delete",
+  "defer",
+  "print",
+  "sleep",
+  "fail"
+]);
+var TYPES = /* @__PURE__ */ new Set([
+  "string",
+  "bool",
+  "ulid",
+  "document",
+  "dict",
+  "blob",
+  "DateTime",
+  "u8",
+  "u16",
+  "u32",
+  "u64",
+  "s8",
+  "s16",
+  "s32",
+  "s64",
+  "int",
+  "integer",
+  "float",
+  "float64",
+  "f32",
+  "f64",
+  "double",
+  "time",
+  "bytes",
+  "any",
+  "name",
+  "ref"
+]);
+function eatSingleLineString(stream, quote) {
+  while (!stream.eol()) {
+    if (stream.next() === quote) break;
+  }
+  return "string";
+}
+var nbtParser = {
+  name: "nbt",
+  startState: () => ({ tripleString: false }),
+  token(stream, state) {
+    if (state.tripleString) {
+      while (!stream.eol()) {
+        if (stream.match('"""')) {
+          state.tripleString = false;
+          return "string";
+        }
+        stream.next();
+      }
+      return "string";
+    }
+    if (stream.eatSpace()) return null;
+    const ch = stream.peek();
+    if (ch == null) return null;
+    if (ch === "#") {
+      stream.skipToEnd();
+      return "comment";
+    }
+    if (stream.match('"""')) {
+      state.tripleString = true;
+      while (!stream.eol()) {
+        if (stream.match('"""')) {
+          state.tripleString = false;
+          return "string";
+        }
+        stream.next();
+      }
+      return "string";
+    }
+    if (ch === '"') {
+      stream.next();
+      return eatSingleLineString(stream, '"');
+    }
+    if (ch === "'") {
+      const before = stream.string.charAt(stream.pos - 1);
+      if (!/[A-Za-z0-9_]/.test(before)) {
+        stream.next();
+        return eatSingleLineString(stream, "'");
+      }
+      stream.next();
+      return null;
+    }
+    if (ch === "f" && stream.string.charAt(stream.pos + 1) === '"') {
+      stream.next();
+      stream.next();
+      return eatSingleLineString(stream, '"');
+    }
+    if (ch === "@") {
+      stream.next();
+      stream.eat("@");
+      stream.eatWhile(/[A-Za-z0-9_]/);
+      return "meta";
+    }
+    if (/\d/.test(ch)) {
+      stream.match(/^\d+(\.\d+)?/);
+      return "number";
+    }
+    if (/[A-Za-z_]/.test(ch)) {
+      stream.eatWhile(/[A-Za-z0-9_]/);
+      const word = stream.current();
+      if (word === "true" || word === "false") return "atom";
+      if (KEYWORDS.has(word)) return "keyword";
+      if (TYPES.has(word)) return "typeName";
+      if (/^[A-Z]/.test(word)) return "typeName";
+      return "variableName";
+    }
+    if (/[+\-*/=<>!&|?.,:;]/.test(ch)) {
+      stream.next();
+      stream.eatWhile(/[+\-*/=<>!&|.]/);
+      return "operator";
+    }
+    stream.next();
+    return null;
+  },
+  languageData: {
+    commentTokens: { line: "#" }
+  }
+};
+var nbtLanguage = StreamLanguage.define(nbtParser);
+function nbtLanguageSupport() {
+  return new LanguageSupport(nbtLanguage, [indentUnit.of("  ")]);
+}
+
+// src/components/devtools/sources/lsp-extensions.ts
+import {
+  ViewPlugin,
+  hoverTooltip,
+  keymap
+} from "@codemirror/view";
+import {
+  autocompletion
+} from "@codemirror/autocomplete";
+import { setDiagnostics } from "@codemirror/lint";
+function toLspPos(doc, offset) {
+  const line = doc.lineAt(offset);
+  return { line: line.number - 1, character: offset - line.from };
+}
+function fromLspPos(doc, pos) {
+  const lineNo = Math.min(Math.max(pos.line + 1, 1), doc.lines);
+  const line = doc.line(lineNo);
+  return Math.min(line.from + Math.max(pos.character, 0), line.to);
+}
+function toCmDiagnostics(doc, diags) {
+  return diags.map((d) => {
+    const from = fromLspPos(doc, d.range.start);
+    let to = fromLspPos(doc, d.range.end);
+    if (to <= from) to = Math.min(from + 1, doc.length);
+    const severity = d.severity === 2 ? "warning" : d.severity === 3 || d.severity === 4 ? "info" : "error";
+    return { from, to, severity, message: d.message, source: d.source ?? "nbt" };
+  });
+}
+function completionType(kind) {
+  switch (kind) {
+    case 3:
+      return "function";
+    case 5:
+      return "property";
+    case 13:
+      return "enum";
+    case 14:
+      return "keyword";
+    case 22:
+      return "class";
+    default:
+      return "variable";
+  }
+}
+function lspExtensions(client, uri, onGotoDefinition) {
+  const syncPlugin = ViewPlugin.fromClass(
+    class {
+      constructor(view) {
+        this.view = view;
+        this.timer = null;
+        client.didOpen(uri, view.state.doc.toString());
+        this.unsubscribe = client.onDiagnostics(uri, (diags) => {
+          const cm = toCmDiagnostics(this.view.state.doc, diags);
+          this.view.dispatch(setDiagnostics(this.view.state, cm));
+        });
+      }
+      update(u) {
+        if (!u.docChanged) return;
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.timer = null;
+          client.didChange(uri, this.view.state.doc.toString());
+        }, 200);
+      }
+      destroy() {
+        if (this.timer) {
+          clearTimeout(this.timer);
+          client.didChange(uri, this.view.state.doc.toString());
+        }
+        this.unsubscribe();
+      }
+    }
+  );
+  const completionSource = async (ctx) => {
+    const word = ctx.matchBefore(/\w*/);
+    if (!word) return null;
+    if (word.from === word.to && !ctx.explicit) {
+      const before = ctx.state.doc.sliceString(Math.max(0, ctx.pos - 1), ctx.pos);
+      if (before !== "." && before !== ":" && before !== '"') return null;
+    }
+    client.didChange(uri, ctx.state.doc.toString());
+    let result;
+    try {
+      result = await client.completion(uri, toLspPos(ctx.state.doc, ctx.pos));
+    } catch {
+      return null;
+    }
+    const items = Array.isArray(result) ? result : result?.items ?? [];
+    if (items.length === 0) return null;
+    return {
+      from: word.from,
+      options: items.map((it) => ({
+        label: it.label,
+        type: completionType(it.kind),
+        detail: it.detail
+      }))
+    };
+  };
+  const hover = hoverTooltip(async (view, pos) => {
+    let result;
+    try {
+      result = await client.hover(uri, toLspPos(view.state.doc, pos));
+    } catch {
+      return null;
+    }
+    const value = result?.contents?.value;
+    if (!value) return null;
+    return {
+      pos,
+      create: () => {
+        const dom = document.createElement("pre");
+        dom.className = "nbt-hover-tooltip";
+        dom.style.cssText = "margin:0;padding:6px 8px;max-width:480px;white-space:pre-wrap;font-size:11px;";
+        dom.textContent = value.replace(/```\w*\n?/g, "");
+        return { dom };
+      }
+    };
+  });
+  const gotoDef = keymap.of([
+    {
+      key: "F12",
+      run: (view) => {
+        const pos = toLspPos(view.state.doc, view.state.selection.main.head);
+        client.definition(uri, pos).then((result) => {
+          const loc = Array.isArray(result) ? result[0] ?? null : result;
+          if (!loc?.uri) return;
+          if (loc.uri === uri) {
+            const off = fromLspPos(view.state.doc, loc.range.start);
+            view.dispatch({
+              selection: { anchor: off },
+              scrollIntoView: true
+            });
+          } else {
+            onGotoDefinition?.(loc.uri, loc.range.start.line);
+          }
+        }).catch(() => {
+        });
+        return true;
+      }
+    }
+  ]);
+  return [
+    syncPlugin,
+    autocompletion({ override: [completionSource] }),
+    hover,
+    gotoDef
+  ];
+}
+
+// src/components/devtools/sources/nbt-editor.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var nbtTheme = EditorView2.theme(
+  {
+    "&": {
+      height: "100%",
+      fontSize: "12px",
+      backgroundColor: "var(--background)",
+      color: "var(--foreground)"
+    },
+    ".cm-content": { fontFamily: "ui-monospace, monospace" },
+    ".cm-gutters": {
+      backgroundColor: "var(--background)",
+      color: "var(--muted-foreground)",
+      borderRight: "1px solid var(--border)"
+    },
+    ".cm-activeLine": { backgroundColor: "color-mix(in srgb, var(--accent) 35%, transparent)" },
+    "&.cm-focused": { outline: "none" },
+    ".cm-tooltip": {
+      backgroundColor: "var(--popover)",
+      color: "var(--popover-foreground)",
+      border: "1px solid var(--border)"
+    }
+  },
+  { dark: true }
+);
+var NbtEditor = ({
+  uri,
+  value,
+  readOnly = false,
+  lsp,
+  onChange,
+  onSave,
+  onGotoDefinition
+}) => {
+  const hostRef = React10.useRef(null);
+  const viewRef = React10.useRef(null);
+  const onChangeRef = React10.useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSaveRef = React10.useRef(onSave);
+  onSaveRef.current = onSave;
+  const onGotoRef = React10.useRef(onGotoDefinition);
+  onGotoRef.current = onGotoDefinition;
+  React10.useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const extensions = [
+      lineNumbers(),
+      history(),
+      drawSelection(),
+      highlightActiveLine(),
+      bracketMatching(),
+      closeBrackets(),
+      lintGutter(),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      nbtLanguageSupport(),
+      nbtTheme,
+      keymap2.of([
+        {
+          key: "Mod-s",
+          run: (view2) => {
+            onSaveRef.current?.(view2.state.doc.toString());
+            return true;
+          }
+        },
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        ...completionKeymap,
+        indentWithTab
+      ]),
+      EditorView2.updateListener.of((u) => {
+        if (u.docChanged) onChangeRef.current?.(u.state.doc.toString());
+      }),
+      EditorState.readOnly.of(readOnly)
+    ];
+    if (lsp && !readOnly) {
+      extensions.push(
+        lspExtensions(lsp, uri, (defUri, line) => onGotoRef.current?.(defUri, line))
+      );
+    }
+    const view = new EditorView2({
+      state: EditorState.create({ doc: value, extensions }),
+      parent: host
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [uri, readOnly, lsp]);
+  return /* @__PURE__ */ jsx14("div", { ref: hostRef, className: "h-full min-h-0 overflow-hidden" });
+};
+
+// src/components/devtools/sources/lsp-client.ts
+var NbtLspClient = class {
+  constructor(url) {
+    this.rootUri = null;
+    this.ws = null;
+    this.nextId = 1;
+    this.pending = /* @__PURE__ */ new Map();
+    this.diagHandlers = /* @__PURE__ */ new Map();
+    // Open buffers, kept for replay across reconnects.
+    this.docs = /* @__PURE__ */ new Map();
+    this.ready = false;
+    this.queue = [];
+    this.closed = false;
+    this.retryMs = 500;
+    this.url = url;
+    this.connect();
+  }
+  dispose() {
+    this.closed = true;
+    this.ws?.close();
+    this.pending.forEach((p) => p.reject(new Error("lsp client disposed")));
+    this.pending.clear();
+  }
+  connect() {
+    if (this.closed) return;
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = () => {
+      this.retryMs = 500;
+      if (this.rootUri) this.sendInitialize(this.rootUri);
+    };
+    ws.onmessage = (ev) => {
+      if (typeof ev.data !== "string") return;
+      this.onMessage(ev.data);
+    };
+    ws.onclose = () => {
+      this.ready = false;
+      this.ws = null;
+      for (const p of this.pending.values())
+        p.reject(new Error("lsp connection closed"));
+      this.pending.clear();
+      if (!this.closed) {
+        setTimeout(() => this.connect(), this.retryMs);
+        this.retryMs = Math.min(this.retryMs * 2, 1e4);
+      }
+    };
+  }
+  // Called once by the host with file://<projectRoot>; also re-sent after every
+  // reconnect, followed by didOpen replays for tracked buffers.
+  initialize(rootUri) {
+    this.rootUri = rootUri;
+    if (this.ws?.readyState === WebSocket.OPEN) this.sendInitialize(rootUri);
+  }
+  sendInitialize(rootUri) {
+    const id = this.nextId++;
+    this.pending.set(id, {
+      resolve: () => {
+        this.sendRaw({ jsonrpc: "2.0", method: "initialized", params: {} });
+        this.ready = true;
+        for (const [uri, d] of this.docs) {
+          this.sendRaw({
+            jsonrpc: "2.0",
+            method: "textDocument/didOpen",
+            params: {
+              textDocument: {
+                uri,
+                languageId: "nbt",
+                version: d.version,
+                text: d.text
+              }
+            }
+          });
+        }
+        const q = this.queue;
+        this.queue = [];
+        for (const m of q) this.ws?.send(m);
+      },
+      reject: () => {
+      }
+    });
+    this.ws?.send(
+      JSON.stringify({
+        jsonrpc: "2.0",
+        id,
+        method: "initialize",
+        params: { rootUri }
+      })
+    );
+  }
+  sendRaw(msg) {
+    const s = JSON.stringify(msg);
+    if (this.ready && this.ws?.readyState === WebSocket.OPEN) this.ws.send(s);
+    else this.queue.push(s);
+  }
+  onMessage(data) {
+    let msg;
+    try {
+      msg = JSON.parse(data);
+    } catch {
+      return;
+    }
+    if (msg.id != null && (msg.result !== void 0 || msg.error)) {
+      const p = this.pending.get(msg.id);
+      if (!p) return;
+      this.pending.delete(msg.id);
+      if (msg.error) p.reject(new Error(msg.error.message ?? "lsp error"));
+      else p.resolve(msg.result);
+      return;
+    }
+    if (msg.method === "textDocument/publishDiagnostics") {
+      const uri = msg.params?.uri;
+      const handler = this.diagHandlers.get(uri);
+      if (handler) handler(msg.params?.diagnostics ?? []);
+    }
+  }
+  request(method, params) {
+    const id = this.nextId++;
+    const p = new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+    });
+    this.sendRaw({ jsonrpc: "2.0", id, method, params });
+    return p;
+  }
+  onDiagnostics(uri, handler) {
+    this.diagHandlers.set(uri, handler);
+    return () => {
+      if (this.diagHandlers.get(uri) === handler) this.diagHandlers.delete(uri);
+    };
+  }
+  didOpen(uri, text) {
+    const existing = this.docs.get(uri);
+    if (existing) {
+      this.didChange(uri, text);
+      return;
+    }
+    this.docs.set(uri, { text, version: 1 });
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, languageId: "nbt", version: 1, text } }
+    });
+  }
+  didChange(uri, text) {
+    const d = this.docs.get(uri);
+    if (!d) return this.didOpen(uri, text);
+    if (d.text === text) return;
+    d.text = text;
+    d.version += 1;
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didChange",
+      params: {
+        textDocument: { uri, version: d.version },
+        contentChanges: [{ text }]
+      }
+    });
+  }
+  didClose(uri) {
+    if (!this.docs.delete(uri)) return;
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didClose",
+      params: { textDocument: { uri } }
+    });
+  }
+  completion(uri, pos) {
+    return this.request("textDocument/completion", {
+      textDocument: { uri },
+      position: pos
+    });
+  }
+  hover(uri, pos) {
+    return this.request("textDocument/hover", {
+      textDocument: { uri },
+      position: pos
+    });
+  }
+  definition(uri, pos) {
+    return this.request("textDocument/definition", {
+      textDocument: { uri },
+      position: pos
+    });
+  }
+};
+
+// src/components/devtools/sources/sources-tab.tsx
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var bufKey = (s) => `${s.cart}:${s.path}`;
+function migrationStamp() {
+  const d = /* @__PURE__ */ new Date();
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
+}
+var SourcesTab = () => {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const status = useDevMode();
+  const api = useDevFilesApi();
+  const { sourcesCart, setSourcesCart, sourcesFile, setSourcesFile, sourcesTreeW, setSourcesTreeW } = useDevTools();
+  const [carts, setCarts] = React11.useState([]);
+  const [buffers, setBuffers] = React11.useState(/* @__PURE__ */ new Map());
+  const [statusMsg, setStatusMsg] = React11.useState("");
+  const [diags, setDiags] = React11.useState([]);
+  const [applying, setApplying] = React11.useState(false);
+  const selected = sourcesCart && sourcesFile ? { cart: sourcesCart, path: sourcesFile } : null;
+  const lspRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (!status?.dev) return;
+    const client = new NbtLspClient(`${wsBaseFrom(apiBaseUrl)}/_console/dev/lsp`);
+    client.initialize(`file://${status.projectRoot}`);
+    lspRef.current = client;
+    return () => {
+      client.dispose();
+      lspRef.current = null;
+    };
+  }, [status?.dev, status?.projectRoot, apiBaseUrl]);
+  const refreshCarts = React11.useCallback(() => {
+    api.listCarts().then(setCarts).catch((e) => setStatusMsg(String(e.message ?? e)));
+  }, [api]);
+  React11.useEffect(() => {
+    if (status?.dev) refreshCarts();
+  }, [status?.dev, refreshCarts]);
+  const cartOf = React11.useCallback(
+    (name) => carts.find((c) => c.name === name),
+    [carts]
+  );
+  const openFile = React11.useCallback(
+    (sel) => {
+      setSourcesCart(sel.cart);
+      setSourcesFile(sel.path);
+      setDiags([]);
+      setStatusMsg("");
+      const key = bufKey(sel);
+      if (buffers.has(key)) return;
+      api.readFile(sel.cart, sel.path).then(({ content, writable }) => {
+        setBuffers((prev) => {
+          if (prev.has(key)) return prev;
+          const next = new Map(prev);
+          next.set(key, { saved: content, current: content, writable });
+          return next;
+        });
+      }).catch((e) => setStatusMsg(String(e.message ?? e)));
+    },
+    [api, buffers, setSourcesCart, setSourcesFile]
+  );
+  React11.useEffect(() => {
+    if (selected && carts.length > 0 && !buffers.has(bufKey(selected))) openFile(selected);
+  }, [carts]);
+  const buf = selected ? buffers.get(bufKey(selected)) : void 0;
+  const dirtyKeys = React11.useMemo(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const [k, b] of buffers) if (b.current !== b.saved) s.add(k);
+    return s;
+  }, [buffers]);
+  React11.useEffect(() => {
+    if (dirtyKeys.size === 0) return;
+    const onBeforeUnload = (e) => e.preventDefault();
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [dirtyKeys.size]);
+  const onChange = React11.useCallback(
+    (text) => {
+      if (!selected) return;
+      const key = bufKey(selected);
+      setBuffers((prev) => {
+        const b = prev.get(key);
+        if (!b || b.current === text) return prev;
+        const next = new Map(prev);
+        next.set(key, { ...b, current: text });
+        return next;
+      });
+    },
+    [selected]
+  );
+  const onSave = React11.useCallback(
+    (text) => {
+      if (!selected) return;
+      const key = bufKey(selected);
+      api.writeFile(selected.cart, selected.path, text).then((r) => {
+        setDiags(r.diagnostics);
+        setStatusMsg(
+          r.ok ? `saved ${selected.path}` : `saved ${selected.path} \u2014 ${r.diagnostics.length} problem(s)`
+        );
+        setBuffers((prev) => {
+          const b = prev.get(key);
+          if (!b) return prev;
+          const next = new Map(prev);
+          next.set(key, { ...b, saved: text, current: text });
+          return next;
+        });
+        refreshCarts();
+      }).catch((e) => setStatusMsg(`save failed: ${e.message ?? e}`));
+    },
+    [api, selected, refreshCarts]
+  );
+  const onApply = React11.useCallback(() => {
+    if (!selected) return;
+    setApplying(true);
+    setStatusMsg(`applying ${selected.cart}\u2026`);
+    api.applyCart(selected.cart).then(() => setStatusMsg(`applied ${selected.cart} \u2014 pending migrations ran, cart re-registered`)).catch((e) => setStatusMsg(`apply failed: ${e.message ?? e}`)).finally(() => setApplying(false));
+  }, [api, selected]);
+  const onNewCart = React11.useCallback(
+    (name) => {
+      setStatusMsg(`creating ${name}\u2026`);
+      api.scaffoldCart(name).then(() => {
+        setStatusMsg(`created ${name}`);
+        refreshCarts();
+        openFile({ cart: name, path: "schema.nbt" });
+      }).catch((e) => setStatusMsg(`scaffold failed: ${e.message ?? e}`));
+    },
+    [api, refreshCarts, openFile]
+  );
+  const onNewMigration = React11.useCallback(
+    (cart2) => {
+      const path = `migrations/${migrationStamp()}_change/migration.nbt`;
+      const key = `${cart2}:${path}`;
+      setBuffers((prev) => {
+        const next = new Map(prev);
+        next.set(key, {
+          saved: "",
+          current: "migration change {\n  \n}\n",
+          writable: true
+        });
+        return next;
+      });
+      setSourcesCart(cart2);
+      setSourcesFile(path);
+    },
+    [setSourcesCart, setSourcesFile]
+  );
+  const onGotoDefinition = React11.useCallback(
+    (uri, _line) => {
+      const path = uri.replace(/^file:\/\//, "");
+      let best = null;
+      for (const c of carts) {
+        if (!c.sourceDir) continue;
+        const prefix = `${c.sourceDir}/`;
+        if (path.startsWith(prefix) && (!best || prefix.length > best.cart.length)) {
+          best = { cart: c.name, rel: path.slice(prefix.length) };
+        }
+      }
+      if (best) openFile({ cart: best.cart, path: best.rel });
+    },
+    [carts, openFile]
+  );
+  const startTreeResize = React11.useCallback(
+    (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = sourcesTreeW;
+      const handle = e.currentTarget;
+      handle.setPointerCapture(e.pointerId);
+      const onMove = (ev) => setSourcesTreeW(Math.max(120, Math.min(480, startW + (ev.clientX - startX))));
+      const onUp = () => {
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", onUp);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+    },
+    [sourcesTreeW, setSourcesTreeW]
+  );
+  if (!status?.dev) {
+    return /* @__PURE__ */ jsx15("div", { className: "flex h-full items-center justify-center text-[12px] text-muted-foreground", children: "Sources requires the console to run in dev mode (`console up --dev`)." });
+  }
+  const cart = selected ? cartOf(selected.cart) : void 0;
+  const editorUri = selected && cart?.sourceDir ? `file://${cart.sourceDir}/${selected.path}` : selected ? `file://${status.projectRoot}/.readonly/${selected.cart}/${selected.path}` : "";
+  const isDirty = selected ? dirtyKeys.has(bufKey(selected)) : false;
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsx15("div", { style: { width: sourcesTreeW }, className: "shrink-0 border-r border-border", children: /* @__PURE__ */ jsx15(
+        FileTree,
+        {
+          carts,
+          selected,
+          dirtyKeys,
+          onSelect: openFile,
+          onNewCart,
+          onNewMigration
+        }
+      ) }),
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          onPointerDown: startTreeResize,
+          style: { touchAction: "none" },
+          className: "w-1 shrink-0 cursor-ew-resize bg-transparent hover:bg-accent/40"
+        }
+      ),
+      /* @__PURE__ */ jsx15("div", { className: "min-h-0 min-w-0 flex-1", children: selected && buf ? /* @__PURE__ */ jsx15(
+        NbtEditor,
+        {
+          uri: editorUri,
+          value: buf.current,
+          readOnly: !buf.writable,
+          lsp: lspRef.current,
+          onChange,
+          onSave,
+          onGotoDefinition
+        },
+        bufKey(selected)
+      ) : /* @__PURE__ */ jsx15("div", { className: "flex h-full items-center justify-center text-[12px] text-muted-foreground", children: "Select a file \u2014 or create a cartridge with the + button." }) })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex h-6 shrink-0 items-center gap-2 border-t border-border px-2 text-[11px]", children: [
+      selected && buf?.writable && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: () => buf && onSave(buf.current),
+            className: cn(
+              "flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent",
+              isDirty && "text-amber-400"
+            ),
+            title: "Save (Ctrl+S) \u2014 mirrors to your local project folder",
+            children: [
+              /* @__PURE__ */ jsx15(Save, { className: "size-3" }),
+              " Save"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: onApply,
+            disabled: applying || isDirty,
+            className: "flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent disabled:opacity-40",
+            title: isDirty ? "Save first" : "Re-install this cart from disk (runs your pending migrations)",
+            children: [
+              /* @__PURE__ */ jsx15(Play2, { className: "size-3" }),
+              " Apply"
+            ]
+          }
+        )
+      ] }),
+      selected && !buf?.writable && /* @__PURE__ */ jsxs9("span", { className: "text-muted-foreground", children: [
+        "read-only (",
+        cart?.reason ?? "no source mapping",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: statusMsg }),
+      diags.length > 0 && /* @__PURE__ */ jsxs9("span", { className: "shrink-0 text-red-400", title: diags.map((d) => `${d.line}:${d.col} ${d.message}`).join("\n"), children: [
+        diags.length,
+        " problem",
+        diags.length > 1 ? "s" : ""
+      ] })
+    ] })
+  ] });
+};
+var sources_tab_default = SourcesTab;
+
 // src/components/devtools/dev-tools.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var MIN_H = 120;
 var MIN_W = 240;
-var DEV_TOOLS_TABS = [
-  { id: "console", title: "Console", render: () => /* @__PURE__ */ jsx12(console_tab_default, {}) },
-  { id: "network", title: "Network", render: () => /* @__PURE__ */ jsx12(network_tab_default, {}) },
-  { id: "data", title: "Data", render: () => /* @__PURE__ */ jsx12(data_tab_default, {}) },
-  { id: "settings", title: "Settings", render: () => /* @__PURE__ */ jsx12(settings_tab_default, {}) }
+var EDGE = 8;
+var BASE_TABS = [
+  { id: "console", title: "Console", render: () => /* @__PURE__ */ jsx16(console_tab_default, {}) },
+  { id: "network", title: "Network", render: () => /* @__PURE__ */ jsx16(network_tab_default, {}) },
+  { id: "data", title: "Data", render: () => /* @__PURE__ */ jsx16(data_tab_default, {}) }
 ];
+var SOURCES_TAB = {
+  id: "sources",
+  title: "Sources",
+  render: () => /* @__PURE__ */ jsx16(sources_tab_default, {})
+};
+var SETTINGS_TAB = {
+  id: "settings",
+  title: "Settings",
+  render: () => /* @__PURE__ */ jsx16(settings_tab_default, {})
+};
 var DevTools = () => {
   const {
     open,
@@ -2191,21 +3836,66 @@ var DevTools = () => {
     maximized,
     setMaximized
   } = useDevTools();
-  const panelRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const panelRef = React12.useRef(null);
+  const hasOpenedRef = React12.useRef(false);
+  const devMode = useDevMode();
+  const tabs = React12.useMemo(
+    () => devMode?.dev ? [...BASE_TABS, SOURCES_TAB, SETTINGS_TAB] : [...BASE_TABS, SETTINGS_TAB],
+    [devMode?.dev]
+  );
+  const [vp, setVp] = React12.useState(
+    () => typeof window === "undefined" ? { w: 0, h: 0 } : { w: window.innerWidth, h: window.innerHeight }
+  );
+  React12.useEffect(() => {
+    const onResize = () => setVp({ w: window.innerWidth, h: window.innerHeight });
+    window.addEventListener("resize", onResize);
+    window.visualViewport?.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.visualViewport?.removeEventListener("resize", onResize);
+    };
+  }, []);
+  React12.useEffect(() => {
     if (activeTab) return;
-    if (DEV_TOOLS_TABS.length > 0) setActiveTab(DEV_TOOLS_TABS[0].id);
-  }, [activeTab, setActiveTab]);
-  const startResize = React8.useCallback(
+    if (tabs.length > 0) setActiveTab(tabs[0].id);
+  }, [activeTab, setActiveTab, tabs]);
+  React12.useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const onWheel = (e) => {
+      let node = e.target;
+      while (node && node !== panel) {
+        const s = getComputedStyle(node);
+        const vertical = Math.abs(e.deltaY) >= Math.abs(e.deltaX);
+        if (vertical) {
+          const scrollable = (s.overflowY === "auto" || s.overflowY === "scroll") && node.scrollHeight > node.clientHeight;
+          if (scrollable) {
+            const atTop = node.scrollTop <= 0;
+            const atBottom = node.scrollTop + node.clientHeight >= node.scrollHeight - 1;
+            if (!(e.deltaY < 0 && atTop || e.deltaY > 0 && atBottom)) return;
+          }
+        } else {
+          const scrollable = (s.overflowX === "auto" || s.overflowX === "scroll") && node.scrollWidth > node.clientWidth;
+          if (scrollable) {
+            const atLeft = node.scrollLeft <= 0;
+            const atRight = node.scrollLeft + node.clientWidth >= node.scrollWidth - 1;
+            if (!(e.deltaX < 0 && atLeft || e.deltaX > 0 && atRight)) return;
+          }
+        }
+        node = node.parentElement;
+      }
+      e.preventDefault();
+    };
+    panel.addEventListener("wheel", onWheel, { passive: false });
+    return () => panel.removeEventListener("wheel", onWheel);
+  }, [open]);
+  const startResize = React12.useCallback(
     (e) => {
       e.preventDefault();
       const panel = panelRef.current;
       if (!panel) return;
-      const parent = panel.parentElement;
-      if (!parent) return;
       const handle = e.currentTarget;
       handle.setPointerCapture(e.pointerId);
-      const parentRect = parent.getBoundingClientRect();
       const startX = e.clientX;
       const startY = e.clientY;
       const startH = panel.offsetHeight;
@@ -2229,13 +3919,13 @@ var DevTools = () => {
           const dy = startY - ev.clientY;
           pendingNext = Math.max(
             MIN_H,
-            Math.min(parentRect.height - 24, startH + dy)
+            Math.min(window.innerHeight - 24, startH + dy)
           );
         } else {
           const dx = startX - ev.clientX;
           pendingNext = Math.max(
             MIN_W,
-            Math.min(parentRect.width - 24, startW + dx)
+            Math.min(window.innerWidth - 24, startW + dx)
           );
         }
         if (!rafId) rafId = requestAnimationFrame(flush);
@@ -2264,81 +3954,93 @@ var DevTools = () => {
     },
     [dock, setSize]
   );
-  if (!open) return null;
-  const active = DEV_TOOLS_TABS.find((t) => t.id === activeTab) ?? DEV_TOOLS_TABS[0];
+  if (open) hasOpenedRef.current = true;
+  if (!hasOpenedRef.current) return null;
+  const active = tabs.find((t) => t.id === activeTab) ?? tabs[0];
   const positionClass = maximized ? "inset-0" : dock === "bottom" ? "inset-x-0 bottom-0" : "inset-y-0 right-0";
-  const sizeStyle = maximized ? {} : dock === "bottom" ? { height: size.h } : { width: size.w };
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      ref: panelRef,
-      style: sizeStyle,
-      className: cn(
-        "nimbit-devtools dark absolute z-40 flex flex-col border-border bg-background text-foreground text-[12px] shadow-lg",
-        positionClass,
-        dock === "bottom" ? "border-t" : "border-l"
-      ),
-      onMouseDown: (e) => e.stopPropagation(),
-      children: [
-        !maximized && /* @__PURE__ */ jsx12(
-          "div",
-          {
-            onPointerDown: startResize,
-            style: { touchAction: "none" },
-            className: cn(
-              "absolute z-10 bg-transparent hover:bg-accent/40",
-              dock === "bottom" ? "left-0 right-0 -top-px h-1.5 cursor-ns-resize" : "top-0 bottom-0 -left-px w-1.5 cursor-ew-resize"
-            )
-          }
+  const sizeStyle = maximized ? {} : dock === "bottom" ? { height: Math.max(MIN_H, Math.min(size.h, vp.h - EDGE)) } : { width: Math.max(MIN_W, Math.min(size.w, vp.w - EDGE)) };
+  return createPortal2(
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref: panelRef,
+        style: sizeStyle,
+        className: cn(
+          "nimbit-devtools dark fixed z-50 flex flex-col border-border bg-background text-foreground text-[12px] shadow-lg",
+          positionClass,
+          dock === "bottom" ? "border-t" : "border-l",
+          !open && "hidden"
         ),
-        /* @__PURE__ */ jsxs7("div", { className: "flex h-7 shrink-0 items-center border-b border-border bg-background pl-1 pr-1 select-none", children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", children: DEV_TOOLS_TABS.map((tab) => {
-            const isActive = tab.id === active?.id;
-            return /* @__PURE__ */ jsx12(
-              "button",
-              {
-                type: "button",
-                "data-active": isActive,
-                onClick: () => setActiveTab(tab.id),
-                className: cn(
-                  "h-5 shrink-0 rounded-md px-2 text-[12px] leading-none outline-none transition-colors",
-                  "text-foreground hover:bg-accent hover:text-accent-foreground",
-                  "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
-                ),
-                children: /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1", children: [
-                  tab.icon,
-                  tab.title
-                ] })
-              },
-              tab.id
-            );
-          }) }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-0.5 pl-2", children: [
-            /* @__PURE__ */ jsx12(
-              IconBtn,
-              {
-                label: dock === "bottom" ? "Dock right" : "Dock bottom",
-                onClick: () => setDock(dock === "bottom" ? "right" : "bottom"),
-                children: dock === "bottom" ? /* @__PURE__ */ jsx12(PanelRight, { className: "size-3.5" }) : /* @__PURE__ */ jsx12(PanelBottom, { className: "size-3.5" })
-              }
-            ),
-            /* @__PURE__ */ jsx12(
-              IconBtn,
-              {
-                label: maximized ? "Restore" : "Maximize",
-                onClick: () => setMaximized(!maximized),
-                children: maximized ? /* @__PURE__ */ jsx12(Minimize2, { className: "size-3.5" }) : /* @__PURE__ */ jsx12(Maximize2, { className: "size-3.5" })
-              }
-            ),
-            /* @__PURE__ */ jsx12(IconBtn, { label: "Close", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx12(X, { className: "size-3.5" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 overflow-auto", children: active ? active.render() : null })
-      ]
-    }
+        onMouseDown: (e) => e.stopPropagation(),
+        children: [
+          !maximized && /* @__PURE__ */ jsx16(
+            "div",
+            {
+              onPointerDown: startResize,
+              style: { touchAction: "none" },
+              className: cn(
+                "absolute z-10 bg-transparent hover:bg-accent/40",
+                dock === "bottom" ? "left-0 right-0 -top-px h-1.5 cursor-ns-resize" : "top-0 bottom-0 -left-px w-1.5 cursor-ew-resize"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs10("div", { className: "flex h-7 shrink-0 items-center border-b border-border bg-background pl-1 pr-1 select-none", children: [
+            /* @__PURE__ */ jsx16("div", { className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", children: tabs.map((tab) => {
+              const isActive = tab.id === active?.id;
+              return /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  "data-active": isActive,
+                  onClick: () => setActiveTab(tab.id),
+                  className: cn(
+                    "h-5 shrink-0 rounded-md px-2 text-[12px] leading-none outline-none transition-colors",
+                    "text-foreground hover:bg-accent hover:text-accent-foreground",
+                    "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+                  ),
+                  children: /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-1", children: [
+                    tab.icon,
+                    tab.title
+                  ] })
+                },
+                tab.id
+              );
+            }) }),
+            /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center gap-0.5 pl-2", children: [
+              /* @__PURE__ */ jsx16(
+                IconBtn,
+                {
+                  label: dock === "bottom" ? "Dock right" : "Dock bottom",
+                  onClick: () => setDock(dock === "bottom" ? "right" : "bottom"),
+                  children: dock === "bottom" ? /* @__PURE__ */ jsx16(PanelRight, { className: "size-3.5" }) : /* @__PURE__ */ jsx16(PanelBottom, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                IconBtn,
+                {
+                  label: maximized ? "Restore" : "Maximize",
+                  onClick: () => setMaximized(!maximized),
+                  children: maximized ? /* @__PURE__ */ jsx16(Minimize2, { className: "size-3.5" }) : /* @__PURE__ */ jsx16(Maximize2, { className: "size-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx16(IconBtn, { label: "Close", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx16(X2, { className: "size-3.5" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: cn("h-full w-full", tab.id !== active?.id && "hidden"),
+              children: tab.render()
+            },
+            tab.id
+          )) })
+        ]
+      }
+    ),
+    document.body
   );
 };
-var IconBtn = ({ label, className, children, ...rest }) => /* @__PURE__ */ jsx12(
+var IconBtn = ({ label, className, children, ...rest }) => /* @__PURE__ */ jsx16(
   "button",
   {
     type: "button",
@@ -2355,11 +4057,11 @@ var IconBtn = ({ label, className, children, ...rest }) => /* @__PURE__ */ jsx12
 var dev_tools_default = DevTools;
 
 // src/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var NimbitDevTools = ({
   apiBaseUrl = "",
   defaultActiveTab
-}) => /* @__PURE__ */ jsx13(DevToolsConfigProvider, { apiBaseUrl, children: /* @__PURE__ */ jsx13(DevToolsProvider, { defaultActiveTab, children: /* @__PURE__ */ jsx13(dev_tools_default, {}) }) });
+}) => /* @__PURE__ */ jsx17(DevToolsConfigProvider, { apiBaseUrl, children: /* @__PURE__ */ jsx17(DevToolsProvider, { defaultActiveTab, children: /* @__PURE__ */ jsx17(dev_tools_default, {}) }) });
 var index_default = NimbitDevTools;
 function toggleDevTools() {
   window.dispatchEvent(new CustomEvent("devtools-toggle"));
@@ -2368,8 +4070,10 @@ export {
   dev_tools_default as DevTools,
   DevToolsConfigProvider,
   DevToolsProvider,
+  NbtEditor,
   NimbitDevTools,
   index_default as default,
+  nbtLanguageSupport,
   toggleDevTools,
   useDevTools,
   useDevToolsConfig