quickdbd-cli 0.1.14__tar.gz → 0.1.16__tar.gz

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: quickdbd-cli
-Version: 0.1.14
+Version: 0.1.16
 Summary: Compile QuickDBD-syntax schema files into interactive HTML ER diagrams, with no table limit.
 Project-URL: Homepage, https://github.com/MarkPhamm/quickdbd-cli
 Author: Minh (Mark) Pham
@@ -65,6 +65,7 @@ qdbd is not affiliated with QuickDBD. It reads the same text syntax, so schemas
 - **dbt import**: `qdbd import dbt` reads `manifest.json`. Primary keys come from `unique` + `not_null` tests or constraints, relationships from `relationships` tests, and `--infer-fks` fills the gaps from column names.
 - **Readable at 200+ tables**: automatic layout, search, dbt-style selectors (`+orders+1`, `group:marts`, `tag:fact`), shaded regions per file, collapsed views and a minimap.
 - **Review changes in pull requests**: `qdbd diff` reports what a branch changed, the GitHub Action posts it as a PR comment, and `--diff-base` colours the changes in the diagram.
+- **VS Code extension**: highlighting, errors as you type, outline, F12 across files, and the diagram beside the editor, following your cursor ([docs](https://qdbd.dev/vscode/)).
 - **One schema, many outputs**: an HTML page, PNG, SVG, editable draw.io, or a shareable link. Installs with pip: no Node, Graphviz or browser needed.
 
 ## Demo gallery
@@ -135,6 +136,8 @@ qdbd serve schema.txt
 
 Edit in the browser or in your own editor; the diagram reloads on save. Dragged positions are saved to `schema.layout.json`, which you commit next to the schema.
 
+In VS Code (or Cursor), the [extension](https://qdbd.dev/vscode/) does the same inside the editor, with errors as you type and the diagram following your cursor. Install the `.vsix` from the [latest release](https://github.com/MarkPhamm/quickdbd-cli/releases/latest).
+
 #### 4. Build, export and share
 
 ```sh

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/README.md

@@ -37,6 +37,7 @@ qdbd is not affiliated with QuickDBD. It reads the same text syntax, so schemas
 - **dbt import**: `qdbd import dbt` reads `manifest.json`. Primary keys come from `unique` + `not_null` tests or constraints, relationships from `relationships` tests, and `--infer-fks` fills the gaps from column names.
 - **Readable at 200+ tables**: automatic layout, search, dbt-style selectors (`+orders+1`, `group:marts`, `tag:fact`), shaded regions per file, collapsed views and a minimap.
 - **Review changes in pull requests**: `qdbd diff` reports what a branch changed, the GitHub Action posts it as a PR comment, and `--diff-base` colours the changes in the diagram.
+- **VS Code extension**: highlighting, errors as you type, outline, F12 across files, and the diagram beside the editor, following your cursor ([docs](https://qdbd.dev/vscode/)).
 - **One schema, many outputs**: an HTML page, PNG, SVG, editable draw.io, or a shareable link. Installs with pip: no Node, Graphviz or browser needed.
 
 ## Demo gallery
@@ -107,6 +108,8 @@ qdbd serve schema.txt
 
 Edit in the browser or in your own editor; the diagram reloads on save. Dragged positions are saved to `schema.layout.json`, which you commit next to the schema.
 
+In VS Code (or Cursor), the [extension](https://qdbd.dev/vscode/) does the same inside the editor, with errors as you type and the diagram following your cursor. Install the `.vsix` from the [latest release](https://github.com/MarkPhamm/quickdbd-cli/releases/latest).
+
 #### 4. Build, export and share
 
 ```sh

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "quickdbd-cli"
-version = "0.1.14"
+version = "0.1.16"
 description = "Compile QuickDBD-syntax schema files into interactive HTML ER diagrams, with no table limit."
 readme = "README.md"
 license = "Apache-2.0"

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/scripts/release.sh

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 # Build and upload the current version to PyPI using credentials from .env,
-# then tag and create the GitHub release.
+# then tag and create the GitHub release, with the VS Code extension (.vsix) attached.
 # Usage: bump `version` in pyproject.toml and src/quickdbd_cli/__init__.py, commit, then run
 #   PATH="$PWD/.venv/bin:$PATH" scripts/release.sh
 set -euo pipefail
@@ -20,9 +20,16 @@ python3 -c "import build, twine" 2>/dev/null || {
 }
 python3 -m build
 python3 -m twine check dist/*
+
+# The extension is packaged before anything is uploaded, so a Node problem doesn't leave half a release.
+node -e 'process.exit(+process.versions.node.split(".")[0] >= 20 ? 0 : 1)' 2>/dev/null || {
+  echo "error: packaging the VS Code extension needs Node 20+ on PATH" >&2; exit 1; }
+rm -f vscode/*.vsix
+(cd vscode && npm ci --no-audit --no-fund && npm run -s package)
+vsix=$(ls vscode/*.vsix)
 python3 -m twine upload --non-interactive dist/*
 
 git tag -a "v$version" -m "qdbd v$version"
 git push origin "v$version"
-gh release create "v$version" dist/* --title "qdbd v$version" --generate-notes
+gh release create "v$version" dist/* "$vsix" --title "qdbd v$version" --generate-notes
 echo "Released v$version: https://pypi.org/project/quickdbd-cli/$version/"

quickdbd_cli-0.1.16/src/quickdbd_cli/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.1.16"

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/assets/render.js

@@ -63,7 +63,7 @@
   }
 
   function keyIcon(x, cy) {
-    return '<g stroke="' + C.key + '" stroke-width="1.5" fill="none">' +
+    return '<g class="ki" stroke="' + C.key + '" stroke-width="1.5" fill="none">' +
       '<circle cx="' + n(x + 3.5) + '" cy="' + n(cy) + '" r="3"/>' +
       '<path d="M' + n(x + 6.5) + " " + n(cy) + "h7m-2 0v3m-2.5-3v2" + '"/></g>';
   }
@@ -84,7 +84,7 @@
       out.push('<text x="' + (w - st.padX) + '" y="' + n(st.headerH / 2 + 4) + '" text-anchor="end" fill="#fff" font-family="' + FONT +
         '" font-size="10" font-weight="bold">' + (state === "added" ? "NEW" : "CHANGED") + "</text>");
     }
-    out.push('<text x="' + st.padX + '" y="' + n(st.headerH / 2 + st.headerSize * 0.36) + '" fill="' + C.headerText +
+    out.push('<text class="tn" x="' + st.padX + '" y="' + n(st.headerH / 2 + st.headerSize * 0.36) + '" fill="' + C.headerText +
       '" font-family="' + FONT + '" font-size="' + st.headerSize + '">' + esc(t.name) + "</text>");
     if (docMarks && t.doc) {
       out.push(docMark(st.padX, st.headerH / 2 + st.headerSize * 0.36 + 3, t.nameW, "rgba(255,255,255,.7)"));
@@ -92,24 +92,24 @@
     g.cols.forEach(function (c, i) {
       var y = st.headerH + i * st.rowH, cy = y + st.rowH / 2, base = n(cy + st.rowSize * 0.36);
       var weight = c.pk || c.fk ? ' font-weight="bold"' : "";
-      var color = c.pk ? C.pk : c.fk ? C.fk : C.text;
+      var color = c.pk ? C.pk : c.fk ? C.fk : C.text, rn = c.pk ? "rn rpk" : c.fk ? "rn rfk" : "rn";
       out.push('<g class="r" data-c="' + esc(c.id) + '">');
       out.push('<rect class="rb" y="' + y + '" width="' + w + '" height="' + st.rowH + '" fill="' + C.body + '" fill-opacity="0"/>');
       var cstate = t.diff && t.diff.cols && t.diff.cols[c.id];
       if (cstate) out.push('<rect y="' + (y + 3) + '" width="3" height="' + (st.rowH - 6) + '" fill="' + C[cstate] + '"/>');
-      out.push('<text x="' + st.padX + '" y="' + base + '" fill="' + color + '" font-family="' + FONT + '" font-size="' +
+      out.push('<text class="' + rn + '" x="' + st.padX + '" y="' + base + '" fill="' + color + '" font-family="' + FONT + '" font-size="' +
         st.rowSize + '"' + weight + ">" + esc(c.name) + "</text>");
       if (docMarks && c.doc) out.push(docMark(st.padX, cy + st.rowSize * 0.36 + 2.5, c.nameW, color));
       var bx = st.padX + c.nameW + 6;
       c.badges.forEach(function (b) {
         var bh = st.badgeSize + 5;
-        out.push('<rect x="' + n(bx) + '" y="' + n(cy - bh / 2) + '" width="' + n(b.w) + '" height="' + bh + '" rx="3" fill="' + C.badgeBg + '"/>');
-        out.push('<text x="' + n(bx + st.badgePad) + '" y="' + n(cy + st.badgeSize * 0.36) + '" fill="' + C.badgeText +
+        out.push('<rect class="bb" x="' + n(bx) + '" y="' + n(cy - bh / 2) + '" width="' + n(b.w) + '" height="' + bh + '" rx="3" fill="' + C.badgeBg + '"/>');
+        out.push('<text class="bt" x="' + n(bx + st.badgePad) + '" y="' + n(cy + st.badgeSize * 0.36) + '" fill="' + C.badgeText +
           '" font-family="' + FONT + '" font-size="' + st.badgeSize + '">' + esc(b.t) + "</text>");
         bx += b.w + st.badgeGap;
       });
       if (c.pk) out.push(keyIcon(w - st.padX - c.typeW - st.keyW, cy));
-      out.push('<text x="' + (w - st.padX) + '" y="' + base + '" text-anchor="end" fill="' + C.type + '" font-family="' + FONT +
+      out.push('<text class="rt" x="' + (w - st.padX) + '" y="' + base + '" text-anchor="end" fill="' + C.type + '" font-family="' + FONT +
         '" font-size="' + st.rowSize + '">' + esc(c.type) + "</text>");
       out.push("</g>");
     });
@@ -150,7 +150,7 @@
       s.push('<path d="M' + n(x + dir * 11) + " " + n(y) + "L" + n(x) + " " + n(y - 6) + "M" + n(x + dir * 11) + " " + n(y) + "L" + n(x) + " " + n(y + 6) + '"' + st + "/>");
     }
     function circle(o) {
-      s.push('<circle cx="' + n(x + dir * o) + '" cy="' + n(y) + '" r="3.5" fill="' + C.bg + '" stroke="' + C.edge + '" stroke-width="1.2"/>');
+      s.push('<circle class="mc" cx="' + n(x + dir * o) + '" cy="' + n(y) + '" r="3.5" fill="' + C.bg + '" stroke="' + C.edge + '" stroke-width="1.2"/>');
     }
     if (card === "one") { bar(7); }
     else if (card === "many") { crow(); }
@@ -252,7 +252,7 @@
     var x0 = b[0] - pad - edgePad, y0 = b[1] - pad, w = b[2] - b[0] + 2 * (pad + edgePad), h = b[3] - b[1] + 2 * pad;
     var style = opts.fontCss ? "<style>" + opts.fontCss + "</style>" : "";
     return '<svg xmlns="http://www.w3.org/2000/svg" width="' + n(w) + '" height="' + n(h) + '" viewBox="' + n(x0) + " " + n(y0) + " " + n(w) + " " + n(h) + '">' +
-      style + '<rect x="' + n(x0) + '" y="' + n(y0) + '" width="' + n(w) + '" height="' + n(h) + '" fill="' + C.bg + '"/>' +
+      style + '<rect class="bgr" x="' + n(x0) + '" y="' + n(y0) + '" width="' + n(w) + '" height="' + n(h) + '" fill="' + C.bg + '"/>' +
       renderInner(m, pos, mode, { regions: opts.regions }) + "</svg>";
   }
 

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/assets/style.css

@@ -10,10 +10,71 @@
   --sel: #eaf0f8;
   --amber: #f0a020;
   --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
+  --on-ink: #fff;
+  --pick: #fde3b0;
+  --scroll: #cfd4da;
+  --chip-hover: #b8c2d0;
+  --tag-bg: #eef1f5;
+  --tag-ink: #6b7a8c;
+  --tag-pk-bg: #dfe8f6;
+  --tag-fk-bg: #ece6f7;
+  --tag-fk: #6a4fa3;
+  --mini-bg: rgba(255, 255, 255, .94);
+  --tip-bg: #15181c;
+  /* diagram: the same colours render.js writes as SVG attributes (exports keep those) */
+  --t-body: #ffffff;
+  --t-border: #dfe3e8;
+  --t-text: #333333;
+  --t-pk: #2b5797;
+  --t-fk: #222222;
+  --t-type: #9a9a9a;
+  --t-key: #b0b0b0;
+  --t-badge-bg: #eef1f5;
+  --t-badge-ink: #7a8899;
+  --t-edge: #b8bcc2;
+  --row-hl: #dbe6f6;
+  --row-hover: #eef3fa;
 }
-::selection { background: #fde3b0; color: var(--ink); }
+/* Dark theme. viewer.js sets data-theme from the toggle, or from prefers-color-scheme when it's on auto. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #121418;
+  --blue: #7aa7ff;
+  --ink: #e6e8eb;
+  --ink-2: #b4bac3;
+  --muted: #8a929e;
+  --panel: #1b1e23;
+  --line: #2c313a;
+  --hover: #252930;
+  --sel: #23324a;
+  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
+  --on-ink: #121418;
+  --pick: #5a4210;
+  --scroll: #3a404a;
+  --chip-hover: #4a5260;
+  --tag-bg: #2a2f37;
+  --tag-ink: #9aa5b3;
+  --tag-pk-bg: #22324a;
+  --tag-fk-bg: #2f2840;
+  --tag-fk: #b7a2e6;
+  --mini-bg: rgba(27, 30, 35, .94);
+  --tip-bg: #2a2f37;
+  --t-body: #1e2228;
+  --t-border: #333944;
+  --t-text: #d5d9df;
+  --t-pk: #8fb4ff;
+  --t-fk: #eceef1;
+  --t-type: #7d8693;
+  --t-key: #6b7380;
+  --t-badge-bg: #2a2f37;
+  --t-badge-ink: #9aa5b3;
+  --t-edge: #5b6472;
+  --row-hl: #24344d;
+  --row-hover: #23282f;
+}
+::selection { background: var(--pick); color: var(--ink); }
 :focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
-* { scrollbar-width: thin; scrollbar-color: #cfd4da transparent; }
+* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
 * { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
   font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; overflow: hidden; }
@@ -22,13 +83,26 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 #canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
 #canvas.panning { cursor: grabbing; }
 
+/* diagram colours: CSS beats the SVG presentation attributes, so the page can theme them */
+.tb { fill: var(--t-body); stroke: var(--t-border); }
+.rn { fill: var(--t-text); }
+.rn.rpk { fill: var(--t-pk); }
+.rn.rfk { fill: var(--t-fk); }
+.r .dm { stroke: var(--t-text); }
+.rt { fill: var(--t-type); }
+.ki { stroke: var(--t-key); }
+.bb { fill: var(--t-badge-bg); }
+.bt { fill: var(--t-badge-ink); }
+.e path { stroke: var(--t-edge); }
+.e .mc { stroke: var(--t-edge); fill: var(--bg); }
+
 /* states */
 .t, .e { transition: opacity .15s; }
 .focus .t.dim, .focus .e.dim { opacity: .12; }
 .e.hl .ep { stroke: var(--blue); stroke-width: 2.2; }
 .e.hl path, .e.hl circle { stroke: var(--blue); }
-.r.hl .rb { fill: #dbe6f6; fill-opacity: 1; }
-.r:hover .rb { fill: #eef3fa; fill-opacity: 1; }
+.r.hl .rb { fill: var(--row-hl); fill-opacity: 1; }
+.r:hover .rb { fill: var(--row-hover); fill-opacity: 1; }
 .t.flash .tb { stroke: #f0a020; stroke-width: 3; }
 .t { cursor: grab; }
 #canvas.panning .t { cursor: grabbing; }
@@ -39,13 +113,13 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .bar button, .seg button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500;
   cursor: pointer; padding: 5px 9px; border-radius: 6px; transition: background .12s, color .12s; }
 .bar button:hover, .seg button:hover { background: var(--hover); color: var(--ink); }
-.bar button.on { background: var(--ink); color: #fff; }
+.bar button.on { background: var(--ink); color: var(--on-ink); }
 .zoomval { min-width: 46px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
 .seg { display: flex; background: var(--hover); border-radius: 7px; padding: 2px; }
 .seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
 .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
 .bar button svg, .exhead button svg, .details .close svg { display: block; }
-#zin, #zout, #zfit { padding: 5px 6px; }
+#zin, #zout, #zfit, #xtheme { padding: 5px 6px; }
 
 /* explorer (left): search + table tree grouped by file/folder */
 .explorer { position: absolute; top: 14px; left: 16px; width: 270px; max-height: calc(100% - 60px); display: flex;
@@ -62,7 +136,7 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .exfilter { padding: 6px 6px 4px; border-bottom: 1px solid var(--line); }
 .explorer.collapsed .exfilter { display: none; }
 .exfilter input { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font: 12px ui-monospace, Menlo, Consolas, monospace;
-  color: var(--ink); outline: none; }
+  color: var(--ink); background: var(--panel); outline: none; }
 .exfilter input:focus { border-color: var(--ink-2); }
 .exfilter input.bad { border-color: #e57373; }
 .fstat { font-size: 11px; color: var(--muted); padding: 3px 2px 0; min-height: 14px; }
@@ -70,10 +144,10 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .fstat a { color: var(--blue); cursor: pointer; margin-left: 6px; }
 .tagbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px; }
 .tchip { display: inline-flex; align-items: center; gap: 4px; font: 11px/1.6 inherit; padding: 0 7px 0 5px; border: 1px solid var(--line);
-  border-radius: 10px; background: #fff; color: var(--text, #333); cursor: pointer; }
+  border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; }
 .tchip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
 .tchip small { color: var(--muted); }
-.tchip:hover { border-color: #b8c2d0; }
+.tchip:hover { border-color: var(--chip-hover); }
 .tchip.on { border-color: var(--ink-2); background: var(--sel); }
 .tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 6px 1px -13px; vertical-align: middle; }
 .tree.flat .tdot { margin-left: 0; }
@@ -117,10 +191,10 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .details td.cn { font-weight: 600; word-break: break-word; }
 .details td.ct { color: var(--muted); text-align: right; white-space: nowrap; }
 .details .cd { color: var(--ink-2); font-weight: normal; margin-top: 2px; white-space: pre-wrap; }
-.details .tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px; background: #eef1f5;
-  color: #6b7a8c; margin: 0 3px 0 0; font-weight: normal; }
-.details .tag.pk { background: #dfe8f6; color: var(--blue); }
-.details .tag.fk { background: #ece6f7; color: #6a4fa3; }
+.details .tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px; background: var(--tag-bg);
+  color: var(--tag-ink); margin: 0 3px 0 0; font-weight: normal; }
+.details .tag.pk { background: var(--tag-pk-bg); color: var(--blue); }
+.details .tag.fk { background: var(--tag-fk-bg); color: var(--tag-fk); }
 .details ul { list-style: none; margin: 0; padding: 0; }
 .details li { padding: 6px 0; border-top: 1px solid var(--line); }
 .details a { color: var(--blue); text-decoration: none; cursor: pointer; }
@@ -130,19 +204,19 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .details .hidden { color: var(--muted); }
 
 /* minimap (bottom right) */
-.minimap { position: absolute; right: 16px; bottom: 16px; width: 200px; height: 140px; background: rgba(255, 255, 255, .94);
+.minimap { position: absolute; right: 16px; bottom: 16px; width: 200px; height: 140px; background: var(--mini-bg);
   border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; cursor: pointer; }
 .minimap svg { width: 100%; height: 100%; display: block; }
 .minimap .vpr { fill: rgba(43,87,151,.12); stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
 
-.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff;
+.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tip-bg); color: #fff;
   padding: 8px 14px; border-radius: 8px; font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 6; }
 .toast.open { opacity: 1; }
 
 /* path finder (in the details panel) */
 .details .pathbox { display: flex; gap: 6px; margin: 10px 0 4px; }
 .details .pathbox input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit;
-  color: var(--ink); outline: none; }
+  color: var(--ink); background: var(--panel); outline: none; }
 .details .pathbox input:focus { border-color: var(--ink-2); }
 .details .pathres ol { margin: 6px 0 8px 18px; padding: 0; }
 .details .pathres li { border: 0; padding: 2px 0; }
@@ -173,7 +247,7 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .details .state.changed { background: #d48806; }
 
 /* doc-comment tooltip */
-.tip { position: absolute; display: none; max-width: 340px; background: var(--ink); color: #eef0f2; border-radius: 8px;
+.tip { position: absolute; display: none; max-width: 340px; background: var(--tip-bg); color: #eef0f2; border-radius: 8px;
   padding: 8px 10px; font-size: 12px; line-height: 1.45; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.25);
   z-index: 5; }
 .tip.open { display: block; }

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/assets/viewer.js

@@ -240,7 +240,9 @@
     var d = drag;
     drag = null;
     if (!d.moved) {
-      select(d.table && S.focus !== d.table ? d.table : null);
+      // Clicking the selected table toggles it off, unless it was selected quietly: then show its details.
+      if (d.table && d.table === S.focus && !details.classList.contains("open")) showDetails(d.table);
+      else select(d.table && S.focus !== d.table ? d.table : null);
       return;
     }
     if (d.start) {
@@ -287,6 +289,27 @@
   }
   regionBtn.onclick = function () { setRegions(!S.regions); };
 
+  /* Theme: auto (follow the OS) -> dark -> light. A viewer preference, so localStorage, not the URL hash.
+   * The <head> script applies it before paint; exports always use render.js's light colours. */
+  var themeBtn = document.getElementById("xtheme"), darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  function themePref() {
+    try { var t = localStorage.getItem("qdbd-theme"); return t === "light" || t === "dark" ? t : "auto"; } catch (e) { return "auto"; }
+  }
+  function applyTheme() {
+    if (data.embed) return; // the editor sets the theme (qdbd.theme message)
+    var pref = themePref(), t = pref === "auto" ? (darkQuery.matches ? "dark" : "light") : pref;
+    document.documentElement.setAttribute("data-theme", t);
+    themeBtn.title = "Theme: " + pref;
+  }
+  themeBtn.onclick = function () {
+    var next = { auto: "dark", dark: "light", light: "auto" }[themePref()];
+    try { if (next === "auto") localStorage.removeItem("qdbd-theme"); else localStorage.setItem("qdbd-theme", next); } catch (e) { /* private mode */ }
+    applyTheme();
+    showToast("Theme: " + next);
+  };
+  if (darkQuery.addEventListener) darkQuery.addEventListener("change", applyTheme);
+  applyTheme();
+
   function setMode(mode) {
     S.mode = ["full", "keys", "header"].indexOf(mode) >= 0 ? mode : "full";
     document.querySelectorAll("#modes button").forEach(function (o) { o.classList.toggle("on", o.getAttribute("data-mode") === S.mode); });
@@ -295,12 +318,13 @@
   }
 
   /* ------------------------------------------------------------- selection: focus + details */
+  /* opts.center: pan to it. opts.quiet: don't open the details panel (only refresh it if it's already open). */
   function select(id, opts) {
     if ((id || null) !== S.focus) S.path = null;
     S.focus = id && byId[id] ? id : null;
     scheduleHash();
     applyFocus();
-    if (S.focus) showDetails(S.focus);
+    if (S.focus && (!(opts && opts.quiet) || details.classList.contains("open"))) showDetails(S.focus);
     else closeDetails();
     markTree();
     if (S.focus && opts && opts.center) centerOn(S.focus);
@@ -493,7 +517,10 @@
       (t.diff.state === "added" ? "NEW" : "CHANGED") + "</span>" : "") + "</h2>");
     var meta = [];
     if (t.aliases.length) meta.push("as " + Q.esc(t.aliases.join(", ")));
-    if (t.file) meta.push(Q.esc(t.file) + ":" + t.line);
+    if (t.file) {
+      var where = Q.esc(t.file) + ":" + t.line;
+      meta.push(data.embed ? '<a class="reveal" title="Open in the editor">' + where + "</a>" : where);
+    }
     if (meta.length) out.push('<div class="meta">' + meta.join(" &middot; ") + "</div>");
     if (t.tags) {
       out.push('<div class="ttags">' + t.tags.map(function (g) {
@@ -664,6 +691,40 @@
     img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(text);
   };
 
+  /* ------------------------------------------------------------- embed: the VS Code preview (qdbd serve --embed)
+   * The page sits in an iframe inside a webview. It posts qdbd.ready / qdbd.reveal {file, line} to the parent and
+   * takes qdbd.focus {table} and qdbd.theme {theme}. Downloads and the clipboard don't work there, so the
+   * extension's commands replace the export, link and theme buttons. */
+  if (data.embed) {
+    ["xsvg", "xpng", "xdrawio", "xlink", "xtheme"].forEach(function (id) { document.getElementById(id).style.display = "none"; });
+    window.qdbdServe = {
+      saveLayout: function (body) {
+        fetch("layout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      },
+    };
+    var reveal = function (id) {
+      var t = byId[id];
+      if (t && t.file) window.parent.postMessage({ type: "qdbd.reveal", file: t.file, line: t.line }, "*");
+    };
+    svg.addEventListener("dblclick", function (ev) {
+      var g = ev.target.closest(".t");
+      if (g) reveal(g.getAttribute("data-id"));
+    });
+    dbody.addEventListener("click", function (ev) { if (ev.target.closest("a.reveal")) reveal(S.focus); });
+    window.addEventListener("message", function (ev) {
+      var m = ev.data;
+      if (ev.source !== window.parent || !m) return;
+      if (m.type === "qdbd.focus") {
+        var t = S.model.tables.filter(function (x) { return x.name === m.table; })[0];
+        // Follows the editor's cursor: highlight and pan, but don't cover the diagram with the details panel.
+        if (t && t.id !== S.focus && S.shown[t.id]) select(t.id, { center: true, quiet: true });
+      } else if (m.type === "qdbd.theme") {
+        document.documentElement.setAttribute("data-theme", m.theme === "dark" ? "dark" : "light");
+      }
+    });
+    window.parent.postMessage({ type: "qdbd.ready" }, "*");
+  }
+
   /* ------------------------------------------------------------- public API (serve mode) */
   window.qdbdViewer = {
     setData: function (model, positions) {

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/cli.py

@@ -50,13 +50,41 @@ def _github_annotation(d: Diagnostic, level: str) -> str:
     return f"::{level} file={esc_prop(d.path)},line={d.line},title=qdbd::{esc(d.message)}"
 
 
+def _symbols(schema: Schema) -> dict:
+    """Tables, columns and relationships with their source lines, for editor outlines and go-to-definition."""
+    tables = []
+    for t in schema.tables.values():
+        cols = [{"name": c.name, "line": c.line} for c in t.columns.values() if not c.virtual]
+        end = max([t.line + 1] + [c["line"] for c in cols])
+        tables.append(
+            {"name": t.name, "aliases": t.aliases, "file": t.path, "line": t.line, "endLine": end, "columns": cols}
+        )
+
+    def end(e) -> dict:
+        t = schema.tables.get(e.table)
+        c = t.columns.get(e.column) if t else None
+        return {"table": t.name if t else e.table, "column": c.name if c and not c.virtual else None}
+
+    rels = [{"file": r.path, "line": r.line, "a": end(r.a), "b": end(r.b)} for r in schema.relationships]
+    return {"tables": tables, "rels": rels}
+
+
 def cmd_check(args) -> int:
     project = _open(args)
-    schema = project.compile()
+    overrides = None
+    if args.stdin_file:
+        target = Path(args.stdin_file).resolve()
+        if target not in {f.resolve() for f in project.files}:
+            print(f"error: --stdin-file {args.stdin_file} is not one of the schema files", file=sys.stderr)
+            return 2
+        overrides = {target: sys.stdin.read()}
+    schema = project.compile(overrides)
     if args.format == "json":
         ok = not schema.errors and not (args.strict and schema.warnings)
         diags = [dataclasses.asdict(d) for d in schema.diagnostics]
         report = {"ok": ok, "errors": len(schema.errors), "warnings": len(schema.warnings), "diagnostics": diags}
+        if args.symbols:
+            report.update(_symbols(schema))
         print(json.dumps(report, indent=2))
         return 0 if ok else 1
     if args.format == "github":
@@ -344,7 +372,12 @@ def cmd_serve(args) -> int:
     project = _open(args)
     # Without --port, a busy 8765 (e.g. a second `qdbd serve`) moves on to the next free port.
     port, tries = (args.port, 1) if args.port is not None else (8765, 20)
-    return serve(project, port=port, open_browser=not args.no_open, read_only=args.read_only, tries=tries)
+    if args.read_only and args.embed:
+        print("error: --read-only and --embed don't go together", file=sys.stderr)
+        return 2
+    return serve(
+        project, port=port, open_browser=not args.no_open, read_only=args.read_only, tries=tries, embed=args.embed
+    )
 
 
 def build_parser() -> argparse.ArgumentParser:
@@ -375,6 +408,14 @@ def build_parser() -> argparse.ArgumentParser:
         default="text",
         help="github: also emit GitHub Actions annotations (inline on PR lines); json: a machine-readable report",
     )
+    sp.add_argument(
+        "--symbols", action="store_true", help="with --format json: also list tables, columns and relationships"
+    )
+    sp.add_argument(
+        "--stdin-file",
+        metavar="PATH",
+        help="read this schema file's text from stdin instead of disk (an editor's unsaved buffer)",
+    )
     sp.set_defaults(func=cmd_check)
 
     sp = sub.add_parser("build", help="write an interactive HTML diagram")
@@ -477,6 +518,11 @@ def build_parser() -> argparse.ArgumentParser:
         action="store_true",
         help="live view only: no editor, nothing saved; safe to share through a tunnel",
     )
+    sp.add_argument(
+        "--embed",
+        action="store_true",
+        help="for the VS Code extension's preview: no editor pane, dragging saves the layout",
+    )
     sp.set_defaults(func=cmd_serve)
     return p
 

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/html.py

@@ -39,6 +39,7 @@ ICONS = {
     "icon_minus": _icon("M5 12h14"),
     "icon_plus": _icon("M12 5v14M5 12h14"),
     "icon_fit": _icon("M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"),
+    "icon_theme": _icon("M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM12 3v18M12 8h4.5M12 12h6M12 16h4.5"),
 }
 
 
@@ -82,6 +83,8 @@ BODY = """
       <span class="zoomval" id="zoomval">100%</span>
       <button id="zin" title="Zoom in" aria-label="Zoom in">{icon_plus}</button>
       <button id="zfit" title="Fit to screen" aria-label="Fit to screen">{icon_fit}</button>
+      <div class="sep"></div>
+      <button id="xtheme" title="Theme: auto" aria-label="Switch light / dark theme">{icon_theme}</button>
     </div>
     <div class="minimap">
       <svg id="mini" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"></svg>
@@ -111,6 +114,16 @@ FILTER_HELP = (
 )
 
 
+# Runs in <head> so the page paints in the right theme. viewer.js owns the toggle; keep the key in sync.
+# ?theme=dark|light (the VS Code preview passes its theme) wins over the saved choice.
+THEME_JS = (
+    "(function(){var t=(/[?&]theme=(dark|light)/.exec(location.search)||[])[1];"
+    "if(!t)try{t=localStorage.getItem('qdbd-theme');}catch(e){}"
+    "if(t!=='light'&&t!=='dark')t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';"
+    "document.documentElement.setAttribute('data-theme',t);})();"
+)
+
+
 # Read-only live view: refetch the model whenever the server's version changes. Relative URLs, so it
 # also works behind a tunnel or a path prefix.
 LIVE_JS = (
@@ -120,11 +133,18 @@ LIVE_JS = (
 )
 
 
-def render_page(model: dict, positions: dict, title: str, serve: bool = False, live: bool = False) -> str:
+def render_page(
+    model: dict, positions: dict, title: str, serve: bool = False, live: bool = False, embed: bool = False
+) -> str:
     """The self-contained page. ``serve``: editor pane and saved dragging. ``live``: read-only, but reloads
-    when the server's schema changes (``qdbd serve --read-only``)."""
-    data = {"model": model, "positions": positions, "serve": serve, "title": title}
-    if serve:
+    when the server's schema changes (``qdbd serve --read-only``). ``embed``: live reload and saved dragging,
+    no editor pane; talks to the VS Code extension through postMessage (``qdbd serve --embed``)."""
+    data = {"model": model, "positions": positions, "serve": serve or embed, "title": title}
+    if embed:
+        data["embed"] = True
+    if embed:
+        hint = "Drag tables to arrange them (saved). Double-click a table to open it in the editor."
+    elif serve:
         hint = "Drag tables to arrange them (saved). Click a table for details. Esc clears."
     elif live:
         hint = "Live, read-only view: updates when the schema changes. Drag tables to rearrange (not saved)."
@@ -144,13 +164,14 @@ def render_page(model: dict, positions: dict, title: str, serve: bool = False, l
             f'<script src="{CODEMIRROR}/addon/mode/simple.min.js"></script>'
             f"<script>{_asset('editor.js')}</script>"
         )
-    elif live:
+    elif live or embed:
         scripts = f"<script>{LIVE_JS}</script>"
     return (
         '<!doctype html>\n<html lang="en"><head><meta charset="utf-8">'
         '<meta name="viewport" content="width=device-width, initial-scale=1">'
         '<meta name="generator" content="qdbd">'
         f"<title>{_escape(title)}</title>"
+        f"<script>{THEME_JS}</script>"
         # The font CSS lives in its own <style> so the viewer can reuse it for SVG/PNG export
         # instead of embedding the fonts a second time.
         f'<style id="qdbd-font">{font_css()}</style>'

{quickdbd_cli-0.1.14 → quickdbd_cli-0.1.16}/src/quickdbd_cli/project.py

@@ -52,11 +52,16 @@ class Project:
             raise FileNotFoundError("no .txt schema files found in: " + ", ".join(map(str, inputs)))
         return cls(inputs, files, sidecar or layout.default_sidecar(files, inputs))
 
-    def sources(self) -> list[tuple[str, str]]:
-        return [(display_path(f), f.read_text(encoding="utf-8")) for f in self.files]
-
-    def compile(self) -> Schema:
-        return compile_sources(self.sources())
+    def sources(self, overrides: dict[Path, str] | None = None) -> list[tuple[str, str]]:
+        """``overrides``: text to use instead of a file on disk, by resolved path (an editor's unsaved buffer)."""
+        over = {p.resolve(): t for p, t in (overrides or {}).items()}
+        return [
+            (display_path(f), over[f.resolve()] if f.resolve() in over else f.read_text(encoding="utf-8"))
+            for f in self.files
+        ]
+
+    def compile(self, overrides: dict[Path, str] | None = None) -> Schema:
+        return compile_sources(self.sources(overrides))
 
     def build(
         self, schema: Schema, reset: bool = False, select: str | None = None, by_group: bool = False