bc-atlas 0.11.0 → 0.12.0

package/.bca.example.json

@@ -50,8 +50,6 @@
   },
   "details": false,
   "noExternal": false,
-  "layout": "elk",
-  "theme": 0,
   "sourceUrl": "https://github.com/example/repo/blob/{ref}/{file}#L{line}",
   "sourceRef": "main",
   "sourcePathPrefix": "apps/Sales",

package/CHANGELOG.md

@@ -4,6 +4,83 @@ All notable changes to BC Atlas will be documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project
 follows [Semantic Versioning](https://semver.org/).
 
+## 0.12.0 - 2026-10-29
+
+### Added
+
+- `bca export --view knowledge-graph` writes the project as RDF with the BC
+  Atlas OWL ontology, for triple stores, graph databases, and ontology
+  editors: Turtle (`.ttl`), RDF/XML (`.rdf`, `.owl`), N-Triples (`.nt`), or
+  JSON-LD (`.jsonld`). Apps, namespaces, objects with fields, keys, and
+  procedures, every relation as a property (`bca:calls`, `bca:writes`, ...)
+  and as a `bca:Relation` with its evidence, objects outside the workspace,
+  architecture components, and violations. Stable IRIs (`urn:bc-atlas:...`, or
+  `--base-iri`), and `SOURCE_DATE_EPOCH` for reproducible files. See
+  [Knowledge graph](./docs/knowledge-graph.md).
+- Knowledge graph: `--no-evidence` writes only the direct relation triples,
+  without a `bca:Relation` per relation; the Base Application's graph drops
+  from 4.4 million triples (270 MB of Turtle) to 1.1 million (78 MB).
+- The BC Atlas ontology is published at its IRI,
+  `https://schulzoli.github.io/BC-Atlas/ontology`: a page with every class
+  and property (each term's IRI opens its row), and the ontology as
+  `ontology.ttl`, `.owl`, `.rdf`, `.nt`, and `.jsonld` next to it, for
+  Protégé and other tools that resolve IRIs. Exports point to it with
+  `rdfs:seeAlso`.
+
+### Changed
+
+- App and VS Code panel: Diagrams and Docs work the same way. On the left, a
+  filterable list (the views; the overview, use cases, and scenarios) with
+  the settings below it; on the right, the selected item with its tools.
+  `J`/`K` and **‹**/**›** step through the list, **Enter** in the filter opens
+  the first match, and the address keeps the selection and the settings.
+- Diagrams: views are listed with what they show, choices apply at once,
+  **PNG** saves the diagram besides **SVG** and **D2**, and a click on an
+  object opens its page.
+- Diagrams are drawn by BC Atlas itself instead of D2: an ELK layered layout
+  with groups, right-angled routes (curves beyond 120 relations), labels, and
+  a legend, as SVG, PNG, or vector PDF. `--format png` and `--format pdf` no
+  longer need the `d2` executable, and every drawing still writes its D2
+  source next to it. Text is sized with the metrics of the bundled Liberation
+  Sans (Arial and Helvetica widths), so boxes fit in all three formats. Large
+  views are faster and far less tall (a 200-object project view: 5 instead of
+  19 seconds, 7499 × 6811 instead of 6112 × 25030 pixels).
+- Diagrams page: hover an object to light up its relations and neighbors,
+  click it to open its page, find objects by name (**Enter** jumps to the next
+  match), and click a legend entry to hide that kind of relation.
+- The npm package no longer installs `@terrastruct/d2` (58 MB); it uses
+  `elkjs` and `@resvg/resvg-wasm`. The VS Code extension shrinks from about 9
+  to 4.5 MB. The `layout` and `theme` settings of `.bca.json` (D2 options)
+  have no effect any more.
+- Docs: the guides are part of the page instead of a page in a frame, one
+  overview, use case, or scenario at a time. Switch between user guide and
+  test case and between English and German; **Open test** opens the AL test
+  at its procedure; **Markdown**, **DITA**, **BPMN**, and **SVG** save the
+  page, **All as HTML** the whole documentation. Links between guides and
+  from a use case's process to its scenarios stay on the page.
+- Large diagrams as an overview of their groups: every closed group is one
+  box with its object count and main object types, and the relations into,
+  out of, and between closed groups are bundled (one route per pair of groups
+  with the number of relations, per kind towards single objects). On the
+  Diagrams page, views with more than 120 objects or 250 relations start this
+  way; click a box to open its group, a group's name to close it, or use
+  **Open groups** and **Close groups**. Files of views with more than 1,500
+  objects are drawn as the overview instead of only writing the D2 source, so
+  the Base Application's project view (8,083 objects) now has a diagram.
+- Diagrams page and the flows on the Docs page: on a dark theme the diagrams
+  turn dark too (saved files stay light).
+- PDF diagrams with text outside Windows-1252 (Polish, Czech, Greek,
+  Cyrillic, ...) embed Liberation Sans, so the text shows and can be copied
+  and searched; other PDFs keep using Helvetica and stay small.
+- The README's diagram images are rendered from the example SVGs by
+  `npm run examples`, and CI checks them with the other generated examples.
+
+### Security
+
+- The Azure DevOps test-case CSV (`--export ado-csv`) writes cells that start
+  with `=`, `+`, `-`, or `@` with a leading apostrophe, so Excel and Google
+  Sheets do not run them as formulas.
+
 ## 0.11.0 - 2026-10-29
 
 ### Changed

package/README.md

@@ -41,10 +41,10 @@ In VS Code, install the **BC Atlas** extension and open an AL project:
 | **Get started** | `bca setup` | Guided setup in the terminal or through your AI agent (Claude Code, Copilot, Cursor): a starter `.bca.json`, features, Husky or Git hooks, GitHub Actions or Azure Pipelines, cron schedule, and sync. |
 | **Analyze** | `bca check` | Health findings - cycles, forbidden dependencies, architecture violations, hot spots, diagnostics, and AL compiler and CodeCop/UICop/AppSourceCop findings - with a CI exit code, also as SARIF for code scanning. |
 | | `bca architecture` | Find a target architecture (components, layers), list every dependency that blocks it with how to resolve it, and enforce it with a shrinking baseline. [Guide](./docs/clean-architecture.md) |
-| **Export** | `bca export` | Everything the extension shows, as files: the BC Atlas pages as one offline HTML file to share (default), the Markdown report ([example](./examples/report/README.md)), the 3D explorer, one Markdown page per object, any of ten diagram views as D2, SVG, PNG, PDF, or JSON, with `--watch`. |
+| **Export** | `bca export` | Everything the extension shows, as files: the BC Atlas pages as one offline HTML file to share (default), the Markdown report ([example](./examples/report/README.md)), the 3D explorer, one Markdown page per object, any of ten diagram views as D2, SVG, PNG, PDF, or JSON, with `--watch`, and the project as a knowledge graph in RDF with an OWL ontology ([Turtle, RDF/XML, OWL, N-Triples, JSON-LD](./docs/knowledge-graph.md)). |
 | | `bca docs` | User guides and test cases from AL UI tests (`[SCENARIO]`, `[GIVEN]`, `[WHEN]`, `[THEN]`) as Markdown, HTML, DITA 1.3, or Azure DevOps CSV, with real captions and translations, a flow diagram per scenario, and BPMN 2.0 processes per use case. [Example](./examples/docs/index.md) |
 | **Integrate** | `bca run` | One entry point for Git hooks, schedules, and pipelines; verifies, stages, or publishes generated files. Also available as a [GitHub Action](./docs/automation-and-ci.md#github-actions). |
-| | `bca update` | "BC Atlas 0.12.0 is available": release notes, one-step update, and regenerated hooks, tasks, and pipelines. Dependabot pull requests on request. |
+| | `bca update` | "BC Atlas 0.13.0 is available": release notes, one-step update, and regenerated hooks, tasks, and pipelines. Dependabot pull requests on request. |
 | | `bca mcp` | A Model Context Protocol server for AI agents; `bca help --format json` is the versioned command contract. |
 
 Run `bca` for the same overview in your terminal and `bca help <command>` for
@@ -65,7 +65,7 @@ options and examples.
 | `ui` | How do pages, actions, and source tables connect? | `bca export --view ui --focus "Sales Order" -o ui.svg` |
 | `workflow` | What happens after an action or entry point? | `bca export --view workflow --entry action:Release -o flow.svg` |
 
-In VS Code, the Diagrams page of the BC Atlas panel renders every view with zoom and pan.
+In VS Code, the Diagrams page of the BC Atlas panel renders every view with zoom and pan; click an object to open it.
 
 ### Clean architecture
 
@@ -208,7 +208,7 @@ and update-check tools. `bca setup agent --agent claude|copilot|cursor` adds a
   -> AL compiler: calls and diagnostics   (src/al, when the toolchain is installed)
   -> resolved model with evidence         (resolver, call analysis, semantics)
   -> view projection and insights         (views, workflow, health)
-  -> D2 / SVG / JSON / Markdown / HTML    (renderers)
+  -> SVG / PNG / PDF / D2 / JSON / Markdown / HTML    (renderers)
   -> the pages: one workspace, in VS Code (vscode/) or exported as one file
 ```
 
@@ -291,5 +291,6 @@ Release notes are in [CHANGELOG.md](./CHANGELOG.md).
 ## License
 
 [MIT](./LICENSE). Dependencies retain their own licenses: `tree-sitter-al` and
-`web-tree-sitter` are MIT, and D2 is MPL-2.0. See
+`web-tree-sitter` are MIT, elkjs is EPL-2.0, resvg is MPL-2.0, and the
+Liberation Sans font is OFL-1.1. See
 [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -13,14 +13,31 @@ project.
 Copyright Tree-sitter contributors. Licensed under the MIT License.
 Source: <https://github.com/tree-sitter/tree-sitter>
 
-## D2
+## ELK (elkjs)
 
-Copyright Terrastruct, Inc. and contributors. Licensed under the Mozilla Public
-License 2.0. Source: <https://github.com/terrastruct/d2>
+Copyright Kiel University and others. Licensed under the Eclipse Public License
+2.0 (or, at your option, GPL-3.0-or-later). Source: <https://github.com/kieler/elkjs>
 
-The official D2 WebAssembly package is redistributed as an npm dependency for
-SVG rendering. The CLI can optionally invoke a separately installed D2
-executable for PNG and PDF output.
+`elkjs` lays out the diagram views (layered layout, routes, and labels).
+
+## resvg (@resvg/resvg-wasm)
+
+Copyright the resvg authors. Licensed under the Mozilla Public License 2.0.
+Source: <https://github.com/yisibl/resvg-js>
+
+The resvg WebAssembly package is an npm dependency that turns diagrams into
+PNG files.
+
+## Liberation Sans
+
+Digitized data copyright (c) 2010 Google Corporation; copyright (c) 2012 Red
+Hat, Inc. Licensed under the SIL Open Font License 1.1. Source:
+<https://github.com/liberationfonts/liberation-fonts>
+
+`vendor/fonts/LiberationSans-Regular.ttf` and `LiberationSans-Bold.ttf` are
+redistributed (license in `vendor/fonts/LICENSE-LiberationSans.txt`): PNG files
+are rendered with them, and their glyph widths size the boxes of every
+diagram.
 
 ## 3d-force-graph and three.js
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bc-atlas",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "BC Atlas maps Microsoft Dynamics 365 Business Central AL projects: architecture diagrams, health checks, reports, and documentation generated from source.",
   "homepage": "https://github.com/SchulzOli/BC-Atlas#readme",
   "bugs": {
@@ -38,7 +38,8 @@
     "site:build": "vitepress build website && node ./scripts/site-assets.js",
     "site:preview": "vitepress preview website",
     "version:set": "node ./scripts/set-version.js",
-    "update:graph-vendor": "node ./scripts/build-graph-vendor.js"
+    "update:graph-vendor": "node ./scripts/build-graph-vendor.js",
+    "update:font-metrics": "node ./scripts/build-font-metrics.js"
   },
   "keywords": [
     "al",
@@ -62,7 +63,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/server": "^2.4.0",
-    "@terrastruct/d2": "^0.1.33",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "elkjs": "^0.12.1",
     "fflate": "^0.8.3",
     "graphology": "^0.26.0",
     "graphology-communities-louvain": "^2.0.2",
@@ -71,10 +73,14 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "3d-force-graph": "^1.80.0",
     "@modelcontextprotocol/client": "^2.4.0",
+    "3d-force-graph": "^1.80.0",
     "bpmn-moddle": "^10.3.1",
     "esbuild": "^0.28.2",
+    "jsonld": "^9.0.0",
+    "n3": "^2.13.12",
+    "opentype.js": "^2.0.0",
+    "rdfxml-streaming-parser": "^3.3.0",
     "three": "^0.186.1",
     "vitepress": "2.0.0-alpha.20"
   }

package/src/app/service.js

@@ -3,6 +3,8 @@
 // call it directly. Every method takes one plain object and returns JSON or,
 // for the explorer and the docs, an HTML page as a string.
 
+import { DOCUMENT_MODES } from "../docs/export.js";
+
 const HISTORY = ["commits", "prs", "releases"];
 const GROUPINGS = ["auto", "coupling", "namespace", "folder", "module", "app"];
 
@@ -20,6 +22,13 @@ function architectureSettings(params = {}) {
   return { propose: truthy(params.propose), groupBy, depth: positive(params.depth, "depth"), minObjects: positive(params.minObjects, "minObjects") };
 }
 
+// A guide or a test case, in a language; empty means the .bca.json setting.
+function docsSettings({ mode, language } = {}) {
+  if (mode && !DOCUMENT_MODES.includes(mode)) throw new Error(`mode must be one of: ${DOCUMENT_MODES.join(", ")}`);
+  if (language && !/^[a-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/u.test(language)) throw new Error("language must be a language tag such as de-DE");
+  return { mode: mode || undefined, language: language || undefined };
+}
+
 export function createService(workspace) {
   const methods = {
     overview: () => workspace.overview(),
@@ -46,8 +55,13 @@ export function createService(workspace) {
       if (history && !HISTORY.includes(history)) throw new Error(`history must be one of: ${HISTORY.join(", ")}`);
       return workspace.explorer({ propose: truthy(propose), history: history || false, last: positive(last, "last") });
     },
-    docsHtml: async () => {
-      const html = await workspace.docsHtml();
+    docsBrowser: async (params = {}) => {
+      const browser = await workspace.docsBrowser(docsSettings(params));
+      if (!browser) throw new Error("no UI-test documentation found");
+      return browser;
+    },
+    docsHtml: async (params = {}) => {
+      const html = await workspace.docsHtml(docsSettings(params));
       if (!html) throw new Error("no UI-test documentation found");
       return html;
     },

package/src/app/snapshot.js

@@ -39,11 +39,12 @@ function compactDetails(index) {
 
 export async function createSnapshot(workspace, { log = () => {}, history = false, last, title } = {}) {
   const overview = { ...await workspace.overview(), ...(title ? { title } : {}) };
-  const [health, architecture, components, index, docsHtml] = await Promise.all([
+  const [health, architecture, components, index, docs, docsHtml] = await Promise.all([
     workspace.healthReport(),
     workspace.architecture(),
     workspace.components(),
     workspace.objectIndex(),
+    workspace.docsBrowser(),
     workspace.docsHtml()
   ]);
   const { nodes, details } = compactDetails(index);
@@ -73,6 +74,8 @@ export async function createSnapshot(workspace, { log = () => {}, history = fals
     details,
     views,
     diagrams,
+    // The Docs page in the settings of .bca.json; the whole page for download.
+    docs: docs ? { ...docs, languages: [docs.language] } : undefined,
     explorerHtml,
     docsHtml
   };

package/src/app/ui/app.css

@@ -271,11 +271,91 @@ table.matrix td.self { background: var(--surface-2); }
 .component-graph.focused [data-group], .component-graph.focused [data-groups] { opacity: 0.12; }
 .component-graph.focused .on { opacity: 1; }
 
-/* Diagrams */
-.diagram-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
-.diagram-form { display: grid; gap: 12px; position: sticky; top: 90px; }
-.diagram-form select, .diagram-form input:not([type="checkbox"]) { width: 100%; }
-.view-hint { font-size: 12px; color: var(--muted); margin-top: -6px; }
+/* Workbench: Diagrams and Docs. A filterable list and its settings on the
+   left, the selected item with its tools on the right. */
+#page > .workbench:only-child { grid-row: 1 / -1; }
+.workbench { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; min-height: 0; height: 100%; }
+.wb-side, .wb-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 0; min-width: 0; }
+.wb-side { display: flex; flex-direction: column; overflow: hidden; }
+.wb-filter { margin: 12px 12px 6px; width: auto !important; }
+.wb-list { flex: 1 1 auto; overflow: auto; padding: 0 8px 10px; min-height: 120px; }
+.wb-group h3 { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 14px 8px 4px; }
+.wb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 8px; border-radius: 8px; color: var(--text); }
+.wb-item:hover { background: var(--hover); text-decoration: none; }
+.wb-item[aria-current] { background: var(--selected); color: var(--selected-text); outline: 1px solid var(--vscode-contrastActiveBorder, transparent); outline-offset: -1px; }
+.wb-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wb-item small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.wb-item[aria-current] small, .wb-item[aria-current] .count { color: inherit; opacity: 0.8; }
+.wb-item .count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; align-self: center; }
+.wb-none { padding: 8px; }
+.wb-settings { border-top: 1px solid var(--border); padding: 12px 14px 14px; max-height: 50%; overflow: auto; flex: none; }
+.wb-form { display: grid; gap: 10px; }
+.wb-form h3 { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
+.wb-form select, .wb-form input:not([type="checkbox"]) { width: 100%; }
+.wb-form .field i { font-style: normal; font-weight: 400; }
+.wb-form .segmented { display: flex; }
+.wb-form .segmented button { flex: 1; }
+.wb-main { display: flex; flex-direction: column; overflow: hidden; }
+.wb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
+.wb-heading { flex: 1 1 280px; min-width: 0; }
+.wb-title { font-size: 16px; font-weight: 650; }
+.wb-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
+.wb-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.wb-tools, .wb-step { display: inline-flex; gap: 4px; }
+.wb-actions .icon-button:disabled { opacity: 0.4; cursor: default; }
+.wb-step .icon-button { font-size: 15px; line-height: 1; padding: 4px 10px; }
+.wb-body { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
+.wb-body.scroll { overflow: auto; display: block; }
+.wb-body > .canvas { flex: 1; height: auto; border: 0; border-radius: 0 0 var(--radius) var(--radius); }
+.wb-body > .empty, .wb-body > .error-box { margin: 18px; }
+/* Interactive diagrams (src/diagram/svg.js): hover lights up an object's relations */
+.bca-diagram .node, .bca-diagram .legend-kind, .bca-diagram .group text { cursor: pointer; }
+.bca-diagram .node.collapsed:hover rect { stroke-width: 2.4; }
+.bca-diagram .node, .bca-diagram .edge, .bca-diagram .group { transition: opacity 0.12s; }
+.bca-diagram.focused .node:not(.on), .bca-diagram.focused .edge:not(.on) { opacity: 0.14; }
+.bca-diagram.focused .edge.on path { stroke-width: 2.4; }
+.bca-diagram .node.on rect { filter: drop-shadow(0 0 4px rgba(47, 111, 224, 0.55)); }
+.bca-diagram.searching:not(.focused) .node:not(.match) { opacity: 0.25; }
+.bca-diagram .node.match rect { stroke: #2f6fe0; stroke-width: 2.5; }
+.bca-diagram .edge.off { display: none; }
+.bca-diagram .legend-kind.off { opacity: 0.3; }
+/* On a dark theme the diagrams turn dark too: lightness inverted, hues kept.
+   Saved files (SVG, PNG, PDF) stay light. */
+:root[data-theme="dark"] .canvas:has(.bca-diagram) { background: #16181d; }
+:root[data-theme="dark"] .bca-diagram,
+:root[data-theme="dark"] .doc .diagram svg,
+:root[data-theme="dark"] .doc .journey svg { filter: invert(0.88) hue-rotate(180deg) saturate(1.3); }
+:root[data-theme="dark"] .doc .diagram, :root[data-theme="dark"] .doc .journey { background: #1d2026; }
+:root[data-theme="dark"] .canvas-info { background: rgba(22, 24, 29, 0.85); color: var(--muted); }
+.canvas-search { position: absolute; left: 12px; top: 12px; z-index: 2; width: 240px !important; background: var(--surface); box-shadow: var(--shadow); }
+.canvas-search.none { border-color: var(--error); }
+
+/* A guide or test case in the Docs page */
+.doc { padding: 20px 28px 40px; max-width: 980px; font-size: 14.5px; line-height: 1.6; }
+.doc h2 { font-size: 18px; margin: 26px 0 8px; }
+.doc h2:first-child, .doc > p:first-child + h2 { margin-top: 0; }
+.doc h3 { font-size: 15px; margin: 22px 0 6px; }
+.doc p { margin: 8px 0; }
+.doc ul, .doc ol { padding-left: 22px; margin: 6px 0; }
+.doc ol.steps > li { margin: 8px 0; padding-left: 4px; }
+.doc ol.steps > li::marker { color: var(--muted); font-weight: 600; }
+.doc .short { font-size: 15.5px; }
+.doc .ui { color: var(--link); font-weight: 600; }
+.doc kbd { font: inherit; font-size: 0.95em; padding: 0 5px; border-bottom-width: 1px; background: var(--surface-2); }
+.doc .note { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 8px 12px; margin: 10px 0; border-radius: 0 6px 6px 0; }
+.doc .info { display: block; color: var(--muted); font-size: 13px; }
+.doc .result { display: block; margin-top: 4px; color: var(--muted); }
+.doc table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13.5px; }
+.doc th, .doc td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
+.doc th { background: var(--surface-2); font-weight: 600; }
+.doc .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
+.doc .chips span { background: var(--accent-soft); color: var(--link); border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 600; }
+.doc .diagram, .doc .journey { overflow-x: auto; margin: 12px 0; padding: 12px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); }
+.doc .diagram svg, .doc .journey svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
+.doc details { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
+.doc details summary { cursor: pointer; }
+.doc article { border: 0; padding: 0; margin: 0; }
+
 .canvas {
   position: relative; height: calc(100vh - 170px); min-height: 420px; overflow: hidden; border-radius: var(--radius);
   background: var(--paper); border: 1px solid var(--border); cursor: grab;
@@ -316,8 +396,14 @@ dialog p { color: var(--muted); margin: 0 0 16px; }
 
 @media (max-width: 1100px) {
   .grid.wide { grid-template-columns: 1fr; }
-  .diagram-layout { grid-template-columns: 1fr; }
-  .diagram-form { position: static; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
+  .workbench { grid-template-columns: 240px minmax(0, 1fr); }
+}
+@media (max-width: 760px) {
+  .workbench { grid-template-columns: 1fr; grid-template-rows: auto minmax(480px, 1fr); height: auto; }
+  .wb-list { max-height: 260px; }
+  /* On a phone the page scrolls, not the guide inside it. */
+  .wb-main, .wb-body.scroll { overflow: visible; }
+  .doc { padding: 16px; }
 }
 @media (max-width: 860px) {
   #shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }