quickdbd-cli 0.1.12__tar.gz → 0.1.13__tar.gz

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: quickdbd-cli
-Version: 0.1.12
+Version: 0.1.13
 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
@@ -244,6 +244,10 @@ You edit the text; the diagram is generated from it. Table positions are the one
 - [Schema Diffs](https://qdbd.dev/diffs/), the [GitHub Action](https://qdbd.dev/github-action/) and the [CLI reference](https://qdbd.dev/cli/)
 - [Development](https://qdbd.dev/development/): working on qdbd itself, releasing, and adding a demo
 
+## About the author
+
+qdbd is built and maintained by **Minh (Mark) Pham** ([@MarkPhamm](https://github.com/MarkPhamm)). Issues, ideas and pull requests are welcome on [GitHub](https://github.com/MarkPhamm/quickdbd-cli/issues).
+
 ## License
 
 Apache-2.0. Bundled third-party files (ELK, Inter) and the sources of the demo schemas are listed in [NOTICE](https://github.com/MarkPhamm/quickdbd-cli/blob/main/NOTICE).

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/README.md

@@ -216,6 +216,10 @@ You edit the text; the diagram is generated from it. Table positions are the one
 - [Schema Diffs](https://qdbd.dev/diffs/), the [GitHub Action](https://qdbd.dev/github-action/) and the [CLI reference](https://qdbd.dev/cli/)
 - [Development](https://qdbd.dev/development/): working on qdbd itself, releasing, and adding a demo
 
+## About the author
+
+qdbd is built and maintained by **Minh (Mark) Pham** ([@MarkPhamm](https://github.com/MarkPhamm)). Issues, ideas and pull requests are welcome on [GitHub](https://github.com/MarkPhamm/quickdbd-cli/issues).
+
 ## License
 
 Apache-2.0. Bundled third-party files (ELK, Inter) and the sources of the demo schemas are listed in [NOTICE](https://github.com/MarkPhamm/quickdbd-cli/blob/main/NOTICE).

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "quickdbd-cli"
-version = "0.1.12"
+version = "0.1.13"
 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.12 → quickdbd_cli-0.1.13}/scripts/build_gallery.py

@@ -37,8 +37,8 @@ KINDS = ("source", "dbt", "of")
 
 # Added to every demo page: a way back to the gallery, as the first item of the viewer's toolbar.
 BACK_LINK = (
-    '<a href="../" style="color:var(--blue);background:#fff;padding:5px 10px;border-radius:6px;text-decoration:none;'
-    'font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.12)">&larr; All demos</a><div class="sep"></div>'
+    '<a href="../" style="color:var(--blue);padding:5px 9px;border-radius:6px;text-decoration:none;'
+    'font-weight:500">&larr; All demos</a><div class="sep"></div>'
 )
 
 

quickdbd_cli-0.1.13/src/quickdbd_cli/__init__.py

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

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/src/quickdbd_cli/assets/style.css

@@ -1,11 +1,19 @@
 :root {
-  --bg: #f4f5f4;
+  --bg: #f5f6f7;
   --blue: #2b5797;
-  --ink: #333;
-  --muted: #8a8f96;
+  --ink: #15181c;
+  --ink-2: #4a515b;
+  --muted: #6b7280;
   --panel: #ffffff;
-  --line: #dfe3e8;
+  --line: #e4e7eb;
+  --hover: #f1f3f5;
+  --sel: #eaf0f8;
+  --amber: #f0a020;
+  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
 }
+::selection { background: #fde3b0; color: var(--ink); }
+:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
+* { scrollbar-width: thin; scrollbar-color: #cfd4da 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; }
@@ -26,32 +34,36 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 #canvas.panning .t { cursor: grabbing; }
 
 /* toolbar (top right, like QuickDBD's zoom controls) */
-.bar { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; align-items: center; }
-.bar button, .seg button { border: 0; background: transparent; color: #555; font: inherit; cursor: pointer;
-  padding: 6px 9px; border-radius: 4px; }
-.bar button:hover, .seg button:hover { background: #e4e7ea; }
-.bar button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
-.zoomval { min-width: 48px; text-align: center; color: #666; font-variant-numeric: tabular-nums; }
-.seg { display: flex; background: #e9ecee; border-radius: 6px; padding: 2px; }
-.seg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
-.sep { width: 1px; height: 20px; background: #d5d9dd; margin: 0 4px; }
+.bar { position: absolute; top: 14px; right: 16px; display: flex; gap: 2px; align-items: center; padding: 4px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 4; }
+.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; }
+.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; }
 
 /* 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;
-  flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px;
-  box-shadow: 0 4px 14px rgba(0,0,0,.06); z-index: 3; }
+  flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: var(--shadow); z-index: 3; }
 .exhead { display: flex; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
 .explorer.collapsed .exhead { border-bottom: 0; }
-.exhead button { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: #666; padding: 4px 6px; border-radius: 4px; }
-.exhead button:hover { background: #eef1f4; }
-.exhead input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 5px; font: inherit;
-  background: #f4f5f6; outline: none; }
-.exhead input:focus { border-color: var(--blue); background: #fff; }
+.exhead button { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: var(--muted); padding: 4px 7px; border-radius: 6px; }
+.exhead button:hover { background: var(--hover); color: var(--ink); }
+.exhead input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; font: inherit;
+  background: var(--hover); color: var(--ink); outline: none; }
+.exhead input::placeholder, .exfilter input::placeholder, .details .pathbox input::placeholder { color: var(--muted); }
+.exhead input:focus { border-color: var(--ink-2); background: var(--panel); }
 .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: 5px; font: 12px Menlo, Consolas, monospace;
-  outline: none; }
-.exfilter input:focus { border-color: var(--blue); }
+.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; }
+.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; }
 .fstat.bad { color: #c0392b; }
@@ -62,50 +74,55 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .tchip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
 .tchip small { color: var(--muted); }
 .tchip:hover { border-color: #b8c2d0; }
-.tchip.on { border-color: var(--blue); background: #eef3fa; }
+.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; }
 .details .ttags { margin: -4px 0 10px; display: flex; gap: 4px; flex-wrap: wrap; }
 .details .ttag { color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 10px; cursor: pointer; text-decoration: none; }
 .tree { overflow: auto; padding: 4px 0 8px; }
 .explorer.collapsed .tree { display: none; }
-.gh { padding: 6px 12px 4px; font-size: 11px; font-weight: bold; color: var(--muted); text-transform: uppercase;
-  letter-spacing: .04em; cursor: pointer; user-select: none; display: flex; justify-content: space-between; }
-.gh::before { content: "\25BE"; margin-right: 6px; }
-.grp.shut .gh::before { content: "\25B8"; }
+.gh { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
+  letter-spacing: .05em; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
+.gh::before { content: ""; width: 5px; height: 5px; margin: -2px 9px 0 2px; border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
+.grp.shut .gh::before { transform: rotate(-45deg); margin-top: 0; }
+.gh:hover { color: var(--ink); }
 .gh span { font-weight: normal; }
 .gh .gname { flex: 1; }
 .grp.shut .gl { display: none; }
 .ti { padding: 4px 12px 4px 26px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .tree.flat .ti { padding-left: 14px; }
 .ti small { color: var(--muted); margin-left: 6px; }
-.ti:hover, .ti.sel { background: #eef3fa; }
+.ti { border-radius: 6px; margin: 0 6px; padding-left: 20px; }
+.ti:hover { background: var(--hover); }
+.ti.sel { background: var(--sel); }
 .ti.cur { color: var(--blue); font-weight: bold; }
 .tree .empty { padding: 8px 14px; color: var(--muted); }
 
 /* details drawer (right) */
-.details { position: absolute; top: 58px; right: 16px; bottom: 16px; width: 380px; background: #fff;
-  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); overflow: auto;
+.details { position: absolute; top: 64px; right: 16px; bottom: 16px; width: 380px; background: var(--panel);
+  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: auto;
   display: none; z-index: 3; padding: 16px 18px; }
 .details.open { display: block; }
 .has-details .minimap { right: 412px; }
-.details .close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 20px;
-  color: #888; cursor: pointer; }
-.details h2 { margin: 0 24px 2px 0; font-size: 18px; color: var(--blue); word-break: break-word; }
+.details .close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 6px;
+  background: transparent; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
+.details .close:hover { background: var(--hover); color: var(--ink); }
+.details h2 { margin: 0 28px 2px 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); word-break: break-word; }
 .details .meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
 .details .doc { white-space: pre-wrap; margin: 8px 0 12px; line-height: 1.45; }
-.details h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 6px; }
+.details h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 6px; }
 .details table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.details td { padding: 5px 4px; border-top: 1px solid #eef0f2; vertical-align: top; }
+.details td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top; }
 .details td.cn { font-weight: 600; word-break: break-word; }
-.details td.ct { color: #888; text-align: right; white-space: nowrap; }
-.details .cd { color: #666; font-weight: normal; margin-top: 2px; white-space: pre-wrap; }
+.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 ul { list-style: none; margin: 0; padding: 0; }
-.details li { padding: 5px 0; border-top: 1px solid #eef0f2; }
+.details li { padding: 6px 0; border-top: 1px solid var(--line); }
 .details a { color: var(--blue); text-decoration: none; cursor: pointer; }
 .details a:hover { text-decoration: underline; }
 .details .card { color: var(--muted); font-size: 11px; margin-left: 4px; }
@@ -113,22 +130,23 @@ 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,.9);
-  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; }
+.minimap { position: absolute; right: 16px; bottom: 16px; width: 200px; height: 140px; background: rgba(255, 255, 255, .94);
+  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: #23272b; color: #fff;
-  padding: 8px 14px; border-radius: 6px; font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 6; }
+.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); 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: 5px 8px; border: 1px solid var(--line); border-radius: 5px; font: inherit; outline: none; }
-.details .pathbox input:focus { border-color: var(--blue); }
+.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; }
+.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; }
-.details .pathres pre { background: #f6f8fa; border: 1px solid #eceff2; border-radius: 6px; padding: 8px; font-size: 11px;
+.details .pathres pre { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px; font-size: 11px;
   overflow-x: auto; margin: 6px 0; }
 .details .pathres .acts a { margin-right: 12px; font-size: 12px; }
 .details .pathres .none { margin-top: 6px; }
@@ -137,8 +155,8 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .t.ph .tb { stroke: #f0a020; stroke-width: 2.5; }
 
 /* diff banner (build --diff-base) */
-.diffbar { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--line);
-  border-radius: 8px; padding: 6px 12px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.06); display: none; z-index: 2;
+.diffbar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line);
+  border-radius: 10px; padding: 7px 14px; font-size: 12px; box-shadow: var(--shadow); display: none; z-index: 2;
   white-space: nowrap; }
 .diffbar.open { display: block; }
 .diffbar b.add { color: #2e7d32; }
@@ -155,7 +173,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: #23272b; color: #eee; border-radius: 6px;
+.tip { position: absolute; display: none; max-width: 340px; background: var(--ink); 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; }
@@ -166,17 +184,18 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .hint { position: absolute; left: 16px; bottom: 14px; color: var(--muted); font-size: 12px; }
 
 /* serve: editor pane */
-#side { width: 420px; display: flex; flex-direction: column; background: #343a40; color: #ddd; border-right: 1px solid #222; }
+#side { width: 420px; display: flex; flex-direction: column; background: #0f1114; color: #d9dce1; border-right: 1px solid #000; }
 #side.hidden { display: none; }
-.tabs { display: flex; overflow-x: auto; background: #2b3035; flex: none; }
-.tabs button { background: transparent; color: #aab; border: 0; padding: 8px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
-.tabs button.on { color: #fff; background: #343a40; }
+.tabs { display: flex; overflow-x: auto; background: #08090b; border-bottom: 1px solid rgba(255, 255, 255, .08); flex: none; }
+.tabs button { background: transparent; color: #a1a7b0; border: 0; padding: 9px 13px; font: inherit; cursor: pointer; white-space: nowrap; }
+.tabs button:hover { color: #edeef0; }
+.tabs button.on { color: #edeef0; background: #0f1114; box-shadow: inset 0 -2px 0 var(--amber); }
 .tabs button .dirty { color: #f0a020; }
 #editor { flex: 1; min-height: 0; position: relative; }
 #editor .CodeMirror, #editor textarea { position: absolute; inset: 0; height: 100%; width: 100%; font-size: 13px;
-  font-family: Menlo, Consolas, monospace; background: #343a40; color: #ddd; border: 0; padding: 6px; resize: none; }
-#problems { height: 140px; flex: none; overflow: auto; border-top: 2px solid #4caf50; padding: 8px 10px;
-  font-family: Menlo, Consolas, monospace; font-size: 12px; color: #ccc; }
+  font-family: ui-monospace, Menlo, Consolas, monospace; background: #0f1114; color: #d9dce1; border: 0; padding: 6px; resize: none; }
+#problems { height: 140px; flex: none; overflow: auto; border-top: 2px solid #4ade80; padding: 8px 10px; background: #08090b;
+  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #a1a7b0; }
 #problems.bad { border-top-color: #e57373; }
 #problems .err { color: #ff9b9b; cursor: pointer; }
 #problems .warn { color: #f0c674; cursor: pointer; }
@@ -185,17 +204,17 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .banner button { margin-left: 8px; }
 .cm-qdbd-op { color: #f0a020; }
 .cm-qdbd-kw { color: #8fbcff; }
-.CodeMirror-gutters { background: #2f353a !important; border-right: 0 !important; }
+.CodeMirror-gutters { background: #0b0c0f !important; border-right: 0 !important; }
 .cm-s-default .cm-comment { color: #7f8c8d; }
 .cm-s-default .cm-header { color: #6fc3df; }
 .CodeMirror-cursor { border-left-color: #fff !important; }
-.CodeMirror-selected { background: #4a525a !important; }
+.CodeMirror-selected { background: #2a2e35 !important; }
 .lineerr { background: rgba(229,115,115,.18); }
 
 /* narrow screens and embedded frames: toolbar to the bottom, smaller minimap */
 @media (max-width: 900px) {
   .bar { top: auto; bottom: 12px; right: auto; left: 12px; flex-wrap: wrap; max-width: calc(100% - 24px);
-    background: rgba(255,255,255,.92); border-radius: 8px; padding: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
+    border-radius: 10px; padding: 3px; }
   .hint { display: none; }
   .minimap { width: 140px; height: 100px; bottom: auto; top: 14px; right: 12px; }
   .explorer { max-width: calc(100% - 180px); }

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/src/quickdbd_cli/assets/viewer.js

@@ -60,7 +60,7 @@
     // Keep clear of the floating search box / toolbar at the top and, on narrow screens, the toolbar at the bottom.
     var top = 70, bottom = sz[0] < 900 ? 70 : pad, availH = sz[1] - top - bottom;
     var k = Math.min((sz[0] - 2 * pad) / (b[2] - b[0]), availH / (b[3] - b[1]), 1.5);
-    k = Math.max(k, 0.05);
+    k = Math.max(k, 0.03); // same floor as manual zoom, so wide diagrams still fit a phone screen
     S.view = { k: k, x: (sz[0] - (b[2] - b[0]) * k) / 2 - b[0] * k, y: top + (availH - (b[3] - b[1]) * k) / 2 - b[1] * k };
     applyView();
   }

{quickdbd_cli-0.1.12 → quickdbd_cli-0.1.13}/src/quickdbd_cli/html.py

@@ -23,6 +23,25 @@ def _escape(text: str) -> str:
     return text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;").replace('"', "&quot;")
 
 
+def _icon(d: str) -> str:
+    """A 16px stroke icon, drawn in the toolbar's text colour."""
+    return (
+        '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">'
+        f'<path d="{d}" fill="none" stroke="currentColor" stroke-width="1.8"'
+        ' stroke-linecap="round" stroke-linejoin="round"/>'
+        "</svg>"
+    )
+
+
+ICONS = {
+    "icon_menu": _icon("M4 6h16M4 12h16M4 18h16"),
+    "icon_close": _icon("M6 6l12 12M18 6L6 18"),
+    "icon_minus": _icon("M5 12h14"),
+    "icon_plus": _icon("M12 5v14M5 12h14"),
+    "icon_fit": _icon("M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"),
+}
+
+
 BODY = """
 <div id="app">
   {side}
@@ -30,7 +49,7 @@ BODY = """
     <svg id="canvas" xmlns="http://www.w3.org/2000/svg"><g id="vp"></g></svg>
     <div class="explorer" id="explorer">
       <div class="exhead">
-        <button id="extoggle" title="Show/hide table list">&#9776;</button>
+        <button id="extoggle" title="Show/hide table list" aria-label="Show or hide the table list">{icon_menu}</button>
         <input id="q" type="search" placeholder="Search {count} tables  ( / )" autocomplete="off" spellcheck="false">
       </div>
       <div class="exfilter">
@@ -42,7 +61,7 @@ BODY = """
       <div id="tree" class="tree"></div>
     </div>
     <aside class="details" id="details" aria-label="Table details">
-      <button class="close" id="dclose" title="Close (Esc)">&times;</button>
+      <button class="close" id="dclose" title="Close (Esc)" aria-label="Close">{icon_close}</button>
       <div id="dbody"></div>
     </aside>
     <div class="bar">
@@ -59,10 +78,10 @@ BODY = """
       <button id="xpng" title="Export PNG">PNG</button>
       <button id="xdrawio" title="Export an editable draw.io / diagrams.net file">draw.io</button>
       <div class="sep"></div>
-      <button id="zout" title="Zoom out">&#8722;</button>
+      <button id="zout" title="Zoom out" aria-label="Zoom out">{icon_minus}</button>
       <span class="zoomval" id="zoomval">100%</span>
-      <button id="zin" title="Zoom in">+</button>
-      <button id="zfit" title="Fit to screen">&#9678;</button>
+      <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>
     <div class="minimap">
       <svg id="mini" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"></svg>
@@ -113,7 +132,9 @@ def render_page(model: dict, positions: dict, title: str, serve: bool = False, l
         hint = (
             "Drag tables to rearrange (not saved). Click a table for details. Scroll to zoom, drag empty space to pan."
         )
-    body = BODY.format(side=SIDE if serve else "", count=len(model["tables"]), hint=hint, filter_help=FILTER_HELP)
+    body = BODY.format(
+        side=SIDE if serve else "", count=len(model["tables"]), hint=hint, filter_help=FILTER_HELP, **ICONS
+    )
     head_extra = ""
     scripts = ""
     if serve:

quickdbd_cli-0.1.12/src/quickdbd_cli/__init__.py

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