qgraphflow 0.0.6 → 0.0.7

package/examples/jeepay/usecase.graph.json

@@ -0,0 +1,222 @@
+{
+  "meta": {
+    "title": "Jeepay 支付网关用例图",
+    "subtitle": "Jeepay 源码与配置证据",
+    "sourceRef": "jeequan/jeepay@e1ac9086d679826bab593f20431b7ecd292eb685",
+    "scope": "支付网关公开 API 能力",
+    "diagramType": "usecase",
+    "locale": "zh-CN",
+    "notes": [
+      "商户系统与支付渠道是从 API 路由与回调入口归纳的外部角色。",
+      "图中是接口能力，不表示当前环境中已接入或已调用任一支付渠道。"
+    ],
+    "viewId": "jeepay-usecase"
+  },
+  "nodes": [
+    {
+      "id": "mch",
+      "label": "商户系统",
+      "kind": "actor"
+    },
+    {
+      "id": "channel",
+      "label": "支付渠道",
+      "kind": "actor"
+    },
+    {
+      "id": "create",
+      "label": "统一下单",
+      "kind": "usecase",
+      "module": "payment",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/UnifiedOrderController.java",
+        "lineStart": 52,
+        "lineEnd": 52,
+        "kind": "source"
+      },
+      "groupId": "system",
+      "tags": [
+        "core"
+      ]
+    },
+    {
+      "id": "query",
+      "label": "查询支付订单",
+      "kind": "usecase",
+      "module": "payment",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/QueryOrderController.java",
+        "lineStart": 50,
+        "lineEnd": 50,
+        "kind": "source"
+      },
+      "groupId": "system"
+    },
+    {
+      "id": "close",
+      "label": "关闭支付订单",
+      "kind": "usecase",
+      "module": "payment",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/CloseOrderController.java",
+        "lineStart": 55,
+        "lineEnd": 55,
+        "kind": "source"
+      },
+      "groupId": "system"
+    },
+    {
+      "id": "refund",
+      "label": "申请退款",
+      "kind": "usecase",
+      "module": "refund",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/refund/RefundOrderController.java",
+        "lineStart": 66,
+        "lineEnd": 66,
+        "kind": "source"
+      },
+      "groupId": "system"
+    },
+    {
+      "id": "transfer",
+      "label": "发起转账",
+      "kind": "usecase",
+      "module": "transfer",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/transfer/TransferOrderController.java",
+        "lineStart": 65,
+        "lineEnd": 65,
+        "kind": "source"
+      },
+      "groupId": "system"
+    },
+    {
+      "id": "division",
+      "label": "执行分账",
+      "kind": "usecase",
+      "module": "division",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/division/PayOrderDivisionExecController.java",
+        "lineStart": 66,
+        "lineEnd": 66,
+        "kind": "source"
+      },
+      "groupId": "system"
+    },
+    {
+      "id": "callback",
+      "label": "通知支付结果",
+      "kind": "usecase",
+      "module": "payment",
+      "source": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/ChannelNoticeController.java",
+        "lineStart": 169,
+        "lineEnd": 169,
+        "kind": "source"
+      },
+      "groupId": "system"
+    }
+  ],
+  "edges": [
+    {
+      "id": "u1",
+      "source": "mch",
+      "target": "create",
+      "kind": "association",
+      "label": "下单",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/UnifiedOrderController.java",
+        "lineStart": 52,
+        "lineEnd": 52
+      }
+    },
+    {
+      "id": "u2",
+      "source": "mch",
+      "target": "query",
+      "kind": "association",
+      "label": "查单",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/QueryOrderController.java",
+        "lineStart": 50,
+        "lineEnd": 50
+      }
+    },
+    {
+      "id": "u3",
+      "source": "mch",
+      "target": "close",
+      "kind": "association",
+      "label": "关单",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/CloseOrderController.java",
+        "lineStart": 55,
+        "lineEnd": 55
+      }
+    },
+    {
+      "id": "u4",
+      "source": "mch",
+      "target": "refund",
+      "kind": "association",
+      "label": "退款",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/refund/RefundOrderController.java",
+        "lineStart": 66,
+        "lineEnd": 66
+      }
+    },
+    {
+      "id": "u5",
+      "source": "mch",
+      "target": "transfer",
+      "kind": "association",
+      "label": "转账",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/transfer/TransferOrderController.java",
+        "lineStart": 65,
+        "lineEnd": 65
+      }
+    },
+    {
+      "id": "u6",
+      "source": "mch",
+      "target": "division",
+      "kind": "association",
+      "label": "分账",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/division/PayOrderDivisionExecController.java",
+        "lineStart": 66,
+        "lineEnd": 66
+      }
+    },
+    {
+      "id": "u7",
+      "source": "channel",
+      "target": "callback",
+      "kind": "association",
+      "label": "异步回调",
+      "evidence": "source",
+      "site": {
+        "file": "jeepay-payment/src/main/java/com/jeequan/jeepay/pay/ctrl/payorder/ChannelNoticeController.java",
+        "lineStart": 169,
+        "lineEnd": 169
+      }
+    }
+  ],
+  "groups": [
+    {
+      "id": "system",
+      "label": "Jeepay 支付网关",
+      "kind": "system"
+    }
+  ],
+  "layout": {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qgraphflow",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "MIT",
   "description": "Generate evidence-grounded interactive software diagrams with offline HTML, SVG and PNG export.",
   "repository": {
@@ -43,7 +43,6 @@
     "README.md",
     "docs/clients*.md",
     "docs/readme/",
-    "examples/order-flow.graph.json",
     "skills/q-flow/scripts/compile-layout.mjs",
     "skills/q-flow/scripts/compile-sequence.mjs",
     "skills/q-flow/assets/layout-dist/",
@@ -51,9 +50,21 @@
     "skills/q-flow/assets/viewer/src/layout-measure.js",
     "skills/q-flow/assets/viewer/src/layout-spacing.js",
     "skills/q-flow/assets/viewer/src/session-graph.js",
+    "skills/q-flow/assets/viewer/src/view-identity.js",
+    "skills/q-flow/assets/viewer/src/architecture-overview.js",
     "skills/q-flow/assets/viewer/src/layout-quality.js",
+    "skills/q-flow/assets/viewer/src/layout-policy.js",
+    "skills/q-flow/assets/viewer/src/layout-compaction.js",
+    "skills/q-flow/assets/viewer/src/route-clearance.js",
     "skills/q-flow/assets/viewer/src/export-svg.js",
-    "skills/q-flow/assets/viewer/src/node-svg.js"
+    "skills/q-flow/assets/viewer/src/node-svg.js",
+    "skills/q-flow/assets/viewer/src/architecture-overview-theme.js",
+    "skills/q-flow/assets/viewer/src/orthogonal-routing.js",
+    "skills/q-flow/assets/viewer/src/layout-refinement.js",
+    "skills/q-flow/assets/viewer/src/layout-templates.js",
+    "skills/q-flow/assets/viewer/src/presentation-graph.js",
+    "skills/q-flow/assets/viewer/src/layout-semantics.js",
+    "examples/jeepay/"
   ],
   "scripts": {
     "package": "node scripts/package.mjs"

package/skills/q-flow/SKILL.md

@@ -6,32 +6,38 @@ argument-hint: "[module or flow] [what the diagram should answer]"
 
 # Q flow
 
-Generate an offline diagram artifact in the target repository, with SVG/PNG downloads in its Viewer.
+Offline HTML diagrams with SVG/PNG downloads.
 
 ## Intake
 
-A request is ready when the invocation or the conversation names a subject (repository, module, flow, entity set or document) and the question the diagram must answer, at a matching level: a behaviour question (call order, decisions, data movement, lifecycle) needs one flow or component as its subject, so a repository- or module-level subject with such a question is not ready: find entry points with the file-name and annotation search in [guided-intake.md](references/guided-intake.md) (`rg -l`; do not open source files) and ask which flow. Diagram type, granularity, output directory, language and graph count have defaults and are never asked. Start Evidence without another question only when the invocation and conversation together provide a ready request.
+Resolve intent first: an audit is read-only, even if source drift is found. Read and validate without `--fix`; report findings without generation, edits or `--force`. Only an explicit update enters Refresh. Read all supplied material, combining source and documents when requested; distinguish implemented facts from documented intent. Existing graphs supply scope, type, granularity, views and directory; inherit these unless changed.
 
-When both are missing, run one guided round from [guided-intake.md](references/guided-intake.md) before Evidence: inventory the repository first so options name real modules, ask subject and intent in one message with a recommended option, and add a second round only for the cases it lists. When only one is missing, or the level does not match, ask for that one only. Use the client's structured question tool when one exists; otherwise number the options in plain text. After asking, end the turn and wait for the reply; never assume an answer. Write no output files before the round completes.
+A request is ready when every requested view has a subject and question. Structure accepts a system, module or entity set; behaviour needs a flow or component, including one described in a document. For missing scope or output location, use [guided-intake.md](references/guided-intake.md). Ask only for missing information, usually in one or two rounds; continue if essential scope remains unclear. Use a structured question tool when available, otherwise numbered options. After asking, end the turn and wait for the reply; never assume an answer. Write no output files before the round completes.
+
+For every ready request, apply [Granularity](references/graph-common.md#granularity) before Evidence, even when intake is skipped. Default unspecified preferences; then start without another confirmation.
 
 ## Evidence
 
-- Prefer one bounded CodeGraph query when its index is current. CodeGraph is optional; if missing or stale, use [evidence-sources.md](references/evidence-sources.md) for direct tracing and optional setup.
+- For repository evidence, follow [evidence-sources.md](references/evidence-sources.md): verify tool/index availability before reporting CodeGraph, otherwise trace directly. Documents use document evidence.
 - Use source/tests for calls, DDL/mappings for ER, manifests for deployment, and accepted requirements plus implementation for business behavior.
 - Preserve exact identifiers and file/line anchors. Separate repository facts, framework behavior, documents, and inference; omit unproven critical relationships and label other inference. Never put secrets or token values in graph data.
+- Public examples and documentation must use independently authored fictional content or public sources. Never reuse private project names, paths, architecture, rules, versions, status or reference images; renaming them is insufficient. Remove affected generated copies when replacing private-derived examples. This does not restrict private diagrams explicitly requested for the user's own project.
 
 ## Author
 
-1. Choose `meta.diagramType` by intent: structure → `architecture`; decisions → `flowchart`; ordered calls → `sequence`; stored data → `er`; runtime placement → `deployment`; types → `class`; lifecycle → `state`; actors/capabilities → `usecase`; data movement → `dataflow`. Default to `architecture` when ambiguous. Use one graph unless the user explicitly requests multiple views; order a collection as architecture, flowchart, sequence, ER, deployment, class, state, use case, then data flow.
-2. Read exactly two files: [graph-common.md](references/graph-common.md) and the matching type page in [references/types/](references/types/) (`types/<diagramType>.md`). Do not read `graph-schema.md`, `visual-contract.md`, `examples/`, `scripts/`, `assets/` or any test to learn rules: the two pages carry every rule the validator applies plus a minimal valid skeleton, and anything they leave open is settled by the validator's message, not by reading implementation.
-3. Write the complete evidenced graph that answers the question, as facts without coordinates — layout is computed. Real names and full labels; `evidence` on every edge; `source` anchors on repository-backed nodes; `groupId` / `parentId` for real ownership only; `layout.rank`, `layout.order`, `primaryPath` or `participantOrder` only for an order the source already has. Mark the business center with the `business` kind or a `core` tag, never literal colors or invented kinds. In a collection, reuse the same non-empty `module` value for the same business module. Preserve ER keys/cardinalities, class members/multiplicities, sequence pairing/fragments/executions, state guards and architecture/deployment boundaries. Write the file once and complete; later corrections are edits to the reported fields.
-4. Default output: `<repository-root>/docs/qgraphflow/<scope>-<diagram-type>/`, with a short kebab-case scope or `overview`. Honor user-selected directories, including legacy paths.
+Eleven templates: three architecture views (`meta.architectureView`: `capabilities`, `engineering`, `relations`) and eight other types below.
+
+1. Choose `meta.diagramType` by intent: structure → `architecture`; decisions → `flowchart`; ordered calls → `sequence`; stored data → `er`; runtime placement → `deployment`; types → `class`; lifecycle → `state`; actors/capabilities → `usecase`; data movement → `dataflow`. Default to `architecture` when ambiguous. Architecture: platform capabilities / business integration → `capabilities`; engineering organization / component layers → `engineering`; component calls / dependencies → `relations`. Use one graph unless the user explicitly requests multiple views.
+2. Each view uses [graph-common.md](references/graph-common.md) and its matching page in [references/types/](references/types/) (`types/<diagramType>.md`); reuse loaded references across views. Do not read `graph-schema.md`, `visual-contract.md`, `examples/`, `scripts/`, `assets/` or tests to learn rules. Use the type skeleton and validator messages for fields.
+3. Write the evidenced graph at the chosen granularity, without coordinates. Record level/coverage in `meta.scope` and check every user requirement before layout. Apply the common rules for names, evidence, ownership, order and business centre. Across views reuse the same non-empty `module` value for the same business module. Preserve ER keys/cardinalities, class members/multiplicities, sequence pairing/fragments/executions, state guards and architecture/deployment boundaries required at this level. Write once; correct only reported fields.
+4. Templates measure text and preserve order; routes use feasible outlines and independent labels. Never remove facts.
+5. Default output: `<repository-root>/docs/qgraphflow/<scope>-<diagram-type>/`. Document-only work uses the current project root instead; without a suitable project or specified directory, ask only for the output location. Honor user-selected directories.
 
 ## Generate and verify
 
-Resolve this skill directory from the loaded `SKILL.md`, not the client's working directory or a hard-coded installation path. Resolve references, scripts and assets relative to it. Use absolute paths for the input graph and output directory in the target repository; never write user outputs into the plugin installation or cache. Quote paths that may contain spaces.
+Resolve the skill directory from the loaded `SKILL.md`, not the client's working directory or a hard-coded installation path. Quote absolute paths in the target repository; never output into plugin caches.
 
-Run from this skill directory (or invoke the scripts by their resolved absolute paths):
+Run from the skill directory:
 
 ```bash
 node scripts/validate-graph.mjs "<absolute-graph.json>" --input-only --repo-root "<absolute-repository-root>"
@@ -39,13 +45,13 @@ node scripts/generate-viewer.mjs "<absolute-graph.json>" "<absolute-output-direc
 node scripts/validate-graph.mjs "<absolute-output-directory>/graph.json" --repo-root "<absolute-repository-root>"
 ```
 
-- Execute the scripts; do not read them, the bundled HTML, the Viewer source or tests. `--help` lists every option. A successful run prints one summary line; a failed run prints the failing elements with rule, measurement and remediation, and `--verbose` prints the full receipt when you need it.
-- On failure, repair in this order: `node scripts/validate-graph.mjs "<graph.json>" --input-only --fix --repo-root "<root>"` (renumbers sequence `order`, fills operand ids and unambiguous `replyTo`, adds the callee bar of each answered sync call, re-anchors a symbol found once in its file, prints each change, writes back only when the graph then passes); then edit only the reported fields of the reported elements and rerun. Rewrite the whole file only when the diagram type or the split into views was wrong. Never delete supported facts, shrink text or use `--force` to pass a check.
-- Composition warnings never fail the run; the input validation step prints them in full, the later two only count them in the receipt (`warnings: n`). Fix `module.missing` (an ordinary node without the module of the subsystem whose work it performs), `module.inconsistent` (the same component with different modules across views) and `flowchart.process-branch` (a non-decision that branches). `module.single-tone` asks whether the steps of a flow really are one subsystem's work — if they are, leave it. Module colours are hashed from the name and eight slots repeat by design: the module label stays authoritative, so never rename a module for colour. A failing collection names every failing view in one run.
-- If bounded layout still fails, report the blocking nodes and relationships and propose separate views with explicit coverage of the original model; never silently reduce the requested detail. Generation defaults to `--layout auto`; `--layout preserve` keeps existing geometry under the same gate.
-- For repository-backed diagrams, pass the target repository root to both commands: they verify every node `source` against local UTF-8 files (existence, line range, symbol, no path escape) and report `sourceEvidence`. This checks the working tree, not the commit in `sourceRef` or whether code proves a relationship. Omitting `--repo-root` reports `skipped`, never verified evidence; say so when source files are unavailable. Conceptual diagrams need no root.
-- Outputs are `index.html`, `graph.json` and one SVG per view (`diagram.svg`, or `diagram-<n>-<type>.svg` in a collection), built from the prebuilt `assets/viewer-dist/index.html`; no Viewer rebuild or package installation. Use `--force` only with approval to replace the named outputs. A collection is one delivery: all views must pass before any output is replaced.
-- Reply with: every artifact path (`index.html`, `graph.json`, each SVG), diagram type(s), evidence scope, the validation result (semantic, geometry, source evidence), unresolved inference or framework boundaries, and the line `Browser acceptance: not performed` unless the next section ran. Keep tool output to summaries or relevant errors; never paste full HTML or graph JSON.
+- Execute the scripts; do not read them, the bundled HTML, the Viewer source or tests. `--help` lists every option. Failures report elements, rule, measurement and remediation; `--verbose` prints the receipt.
+- On failure, run `node scripts/validate-graph.mjs "<graph.json>" --input-only --fix --repo-root "<root>"` first: it repairs sequence order, operand ids, unambiguous replies/callee bars and unique source/site symbols, prints changes and writes only a valid graph. Then edit only reported fields/elements and rerun. Rewrite the whole file only for a wrong type or view split. Never delete supported facts, shrink text or use `--force` to pass a check.
+- Composition warnings never fail the run; input validation prints them, later commands count them (`warnings: n`). Fix `module.missing`, `module.inconsistent`, `flowchart.process-branch` (a non-decision branches) and `edge.site-missing`. For `module.single-tone`, keep one module if the flow really belongs to it; never rename a module for colour. `view.oversized` means over 4 screens at readable zoom: apply the common contract's view-splitting rules while preserving requested detail and graph count. A failing collection names every failing view.
+- If bounded layout still fails, distinguish a search budget from proven impossibility, report the blocking nodes and relationships and propose separate views with explicit coverage of the original model; never silently reduce the requested detail. Generation defaults to `--layout auto`; `--layout preserve` keeps existing geometry under the same gate.
+- For repository-backed diagrams, pass the target repository root to both commands: they verify every node `source` and edge `site` against local UTF-8 files (existence, line range, symbol, no path escape) and report `sourceEvidence` with its `relations` coverage. This checks the working tree, not the commit in `sourceRef` or whether code proves a relationship. Omitting `--repo-root` reports `skipped`, never verified evidence; say so when source files are unavailable. Conceptual diagrams need no root.
+- Outputs are `index.html`, `graph.json` and one SVG per view (`diagram.svg`, or `diagram-<n>-<type>.svg` in a collection), built from the prebuilt viewer; no rebuild or install. Use `--force` only with approval to replace the named outputs. All collection views must pass before replacing output.
+- Reply with artifact paths, types, granularity and coverage (`meta.scope`), semantic/geometry/source-relation results, `meta.notes`, unresolved evidence boundaries, and `Browser acceptance: not performed` unless the next section ran. Never paste full HTML or graph JSON.
 
 ## Acceptance on request
 
@@ -53,17 +59,19 @@ Ordinary graph delivery ends with the three commands above. Run the browser chec
 
 ## Refresh an existing diagram
 
-When asked to update an existing diagram (its directory or `graph.json`), or when source evidence reports drift, refresh it instead of drawing a new one; the request approves `--force` for that directory.
+Read the supplied graph and collection metadata. Inherit type, scope, granularity, view count and directory. An explicit update approves `--force` for that directory; audit findings alone do not. Resolve only the requested views; ask if their identity is ambiguous.
+
+Simplification uses verified facts in Author. Expansion returns to Evidence before Author. Preserve stable IDs; report gaps, aggregations, additions and exclusions. These changes authorize `--layout auto --force` for the requested views only. In a collection add `--view <view-id>` for each changed view; omit it only when all views need layout. Unselected views must pass preserve; never relayout them to clear a failure. Ordinary refresh preserves geometry:
 
 ```bash
 node scripts/validate-graph.mjs "<dir>/graph.json" --input-only --fix --repo-root "<root>"
 node scripts/generate-viewer.mjs "<dir>/graph.json" "<dir>" --layout preserve --force --repo-root "<root>"
 ```
 
-Between the two, fix only anchors still reported: read just their files, edit just those nodes' `source` or facts, and report a symbol you cannot place. Do not re-gather evidence or rewrite the graph unless asked; then validate the output as above. `preserve` keeps the user's moved positions and edited text; if it fails the gate, report the nodes and ask before `--layout auto`. Reply with the changed anchors and every artifact path. If a browser could only download `graph.json`, put it in `<dir>` and regenerate the page and SVGs.
+Between the two, fix only anchors still reported: read just their files, edit just those `source` / `site` anchors or facts, and report a symbol you cannot place. Then validate the output as above. `preserve` keeps the user's moved positions and edited text; if it fails the gate, report the nodes and ask before `--layout auto`. Reply with the changed anchors and every artifact path. If a browser could only download `graph.json`, put it in `<dir>` and regenerate the page and SVGs.
 
 ## Viewer maintenance
 
-For Viewer changes or interaction audits, read [viewer-development.md](references/viewer-development.md), including its maintained visual/interaction contract. Changes to Viewer source, routing, schema behavior, or validation require the full nine-type browser matrix described there. Graph-only delivery uses the single-page check in [acceptance.md](references/acceptance.md).
+For Viewer changes or interaction audits, read [viewer-development.md](references/viewer-development.md), including its maintained visual/interaction contract. Changes to Viewer source, routing, schema behavior, or validation require the full eleven-view browser matrix described there. Graph-only delivery uses the single-page check in [acceptance.md](references/acceptance.md).
 
 Publishing the plugin or creating a remote repository requires separate user authorization.

package/skills/q-flow/agents/openai.yaml

@@ -1,5 +1,5 @@
 interface:
   display_name: "Q flow"
-  short_description: "Nine kinds of interactive software diagrams from source, configuration and documents"
+  short_description: "Eleven kinds of interactive software diagrams from source, configuration and documents"
   brand_color: "#203f35"
   default_prompt: "Use $q-flow to generate the right kind of interactive software diagram from the current evidence."

package/skills/q-flow/assets/viewer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qgraphflow-viewer",
   "private": true,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "build": "node build-layout.mjs && vite build",

package/skills/q-flow/assets/viewer/src/architecture-overview-theme.js

@@ -0,0 +1,22 @@
+// Shared overview presentation tokens on a 1440px layer band.
+// Presentation tokens are independent of module identity and never change ownership or evidence.
+export const OVERVIEW = Object.freeze({ width: 1440, margin: 42, padding: 22, cardPadding: 18, cardGap: 14, bandGap: 28, connectedGap: 56, cardRadius: 14, sectionRadius: 20, title: 22, titleLine: 28, body: 18, bodyLine: 26, badge: 16, badgeLine: 20, sectionTitle: 24, sectionLine: 30 });
+export const OVERVIEW_TONES = ['white', 'subtle', 'blue', 'green', 'lavender', 'plain'];
+const light = {
+  paper: '#ffffff', ink: '#242628', body: '#566475', line: '#e1e5e8', edge: '#7d8798',
+  white: { fill: '#ffffff', stroke: '#e1e5e8' }, subtle: { fill: '#f5fafc', stroke: '#e1e5e8' },
+  blue: { fill: '#eef7fd', stroke: '#87cdee', band: ['#e5f3fb', '#cde8f5'], accent: '#327d9f' },
+  green: { fill: '#edf9f5', stroke: '#a7e5d3', band: ['#edf9f5', '#dff4ed'], accent: '#2d8269' },
+  lavender: { fill: '#eaf0fe', stroke: '#aac6fd', band: ['#edf2fe', '#d7e4fc'], accent: '#5375aa' },
+  badge: { fill: '#e9edf0', ink: '#5f6a7a' }, success: { fill: '#e7f5e9', ink: '#2b763d' }
+};
+const dark = {
+  paper: '#171b22', ink: '#eef1f5', body: '#b4bdcb', line: '#404955', edge: '#a8b6c9',
+  white: { fill: '#242b35', stroke: '#404955' }, subtle: { fill: '#222d38', stroke: '#404955' },
+  blue: { fill: '#223746', stroke: '#457d9e', band: ['#243c4d', '#294b5f'], accent: '#8bc4e0' },
+  green: { fill: '#203c34', stroke: '#437d6b', band: ['#243f37', '#294e43'], accent: '#89cbb2' },
+  lavender: { fill: '#2c354d', stroke: '#657eaf', band: ['#2f3c58', '#364b70'], accent: '#aec6f1' },
+  badge: { fill: '#3b4552', ink: '#c0c9d6' }, success: { fill: '#294c38', ink: '#a6d9af' }
+};
+export const overviewPalette = palette => parseInt(palette.paper.slice(1, 3), 16) < 128 ? dark : light;
+export const overviewAppearance = (node, palette) => ({ ...(overviewPalette(palette)[node.overviewTone ?? 'subtle'] ?? overviewPalette(palette).subtle), role: 'neutral', label: 'Components / actors' });