@itsthecsguy/linework 0.1.2 → 0.1.4

package/README.md

@@ -102,6 +102,29 @@ Linework lays it out with ELK and draws it with draw.io's own renderer. It draws
 
 To change a diagram, the agent runs `linework show` to get the spec back, hand edits included, edits it and rebuilds. The rebuild merges into your layout. Your boxes stay where you put them, new ones go next to their neighbours, and only the edges that need it get rerouted (with draw.io's libavoid router).
 
+## Examples
+
+These are first builds of the specs in [`examples/`](examples), with no hand edits. Each one is a `.drawio.svg`, so the image you see here is also the file you'd open in draw.io. Click one to see its spec.
+
+<table>
+<tr>
+<td width="50%" valign="top">Architecture, with AWS icons<br><br><a href="examples/serverless-aws.yaml"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/gallery/serverless-aws-dark.drawio.svg"><img alt="Architecture diagram: an uploader posts to an API Gateway, a Lambda presigns an S3 upload, and S3 events queue resize jobs for a second Lambda." src="docs/gallery/serverless-aws-light.drawio.svg" width="100%"></picture></a></td>
+<td width="50%" valign="top">Flow<br><br><a href="examples/refund-flow.yaml"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/gallery/refund-flow-dark.drawio.svg"><img alt="Flowchart of a refund: look up the order, check the 30-day window and the amount, then auto-approve, queue for review or deny, and email the customer." src="docs/gallery/refund-flow-light.drawio.svg" width="100%"></picture></a></td>
+</tr>
+</table>
+
+State
+
+<a href="examples/job-state.yaml"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/gallery/job-state-dark.drawio.svg"><img alt="State diagram of a background job: queued, running, paused, waiting to retry, succeeded, failed and cancelled, with the transitions between them." src="docs/gallery/job-state-light.drawio.svg"></picture></a>
+
+Sequence
+
+<a href="examples/pay-sequence.yaml"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/gallery/pay-sequence-dark.drawio.svg"><img alt="Sequence diagram of a card payment: the web app posts to the checkout API, which writes the order and creates a Stripe PaymentIntent, with an alt frame for success and decline." src="docs/gallery/pay-sequence-light.drawio.svg"></picture></a>
+
+ER
+
+<a href="examples/shop-er.yaml"><picture><source media="(prefers-color-scheme: dark)" srcset="docs/gallery/shop-er-dark.drawio.svg"><img alt="Entity relationship diagram of a shop: customers, addresses, orders, order items, products, inventory and payments, with keys and crow's-foot cardinality." src="docs/gallery/shop-er-light.drawio.svg"></picture></a>
+
 ## Styles
 
 Set `theme:` in the spec.
@@ -115,12 +138,29 @@ Set `theme:` in the spec.
 | `blueprint` | technical deep dives. Blue ink on pale drafting paper, monospace. |
 | `c4` | C4-model diagrams, in quiet blues and grays |
 
+The same spec in each style:
+
+<table>
+<tr>
+<td width="33%" align="center" valign="top"><code>clean</code><br><br><img alt="A web app, checkout API and orders database in the clean style" src="docs/gallery/style-clean.drawio.svg"></td>
+<td width="33%" align="center" valign="top"><code>soft</code><br><br><img alt="A web app, checkout API and orders database in the soft style" src="docs/gallery/style-soft.drawio.svg"></td>
+<td width="33%" align="center" valign="top"><code>dark</code><br><br><img alt="A web app, checkout API and orders database in the dark style" src="docs/gallery/style-dark.drawio.svg"></td>
+</tr>
+<tr>
+<td width="33%" align="center" valign="top"><code>sketch</code><br><br><img alt="A web app, checkout API and orders database in the sketch style" src="docs/gallery/style-sketch.drawio.svg"></td>
+<td width="33%" align="center" valign="top"><code>blueprint</code><br><br><img alt="A web app, checkout API and orders database in the blueprint style" src="docs/gallery/style-blueprint.drawio.svg"></td>
+<td width="33%" align="center" valign="top"><code>c4</code><br><br><img alt="A web app, checkout API and orders database in the c4 style" src="docs/gallery/style-c4.drawio.svg"></td>
+</tr>
+</table>
+
 Color is for meaning. Nodes stay neutral by default, and errors and successes are red and green in every style. Mark the part the doc is about with `highlight: true` on a node or `==>` on an edge, and it's drawn in the style's accent color. Use `color: red` (or blue, violet, pink, orange, amber, green, teal, gray) for categories.
 
 Linework sizes every box from the real width of its text in the font it renders with, wrapping long labels instead of widening boxes. Each SVG carries a subset of that font (about 10 to 15KB), so text fits the same way on GitHub, in a browser or in a doc. `check` flags labels that overflow, overlap a box, another label, another edge or a group border, and `build` moves edge labels until they're clear.
 
 Linework needs Node 20+ and a Chromium-based browser, which it uses headless to measure text and render. It tries Playwright's Chromium, then Chrome, then Edge. If none is found, run `linework install-browser`, or set `LINEWORK_CHROME` to a browser binary. If a browser is found but crashes on launch, an agent's sandbox is usually blocking it. Linework then retries Playwright's Chromium in single-process mode, which starts inside Codex's sandbox.
 
+Linework keeps the font subsets it embeds in your cache folder (`~/Library/Caches/linework` on macOS, `~/.cache/linework` on Linux, `%LOCALAPPDATA%\linework` on Windows), so rebuilding a diagram doesn't compress the same fonts again. Set `LINEWORK_NO_CACHE=1` to turn that off.
+
 ## Connect over MCP
 
 The MCP server is for chat apps and agents that can't run shell commands. Agents with a shell do better with the skill, since they can run the CLI and see its output directly.

package/dist/api.js

@@ -97,19 +97,22 @@ export async function build(specText, opts) {
         }
         else
             xml = await straightenDetours(b, toMxfile(diagram, l), detourEdges(diagram, l));
-        xml = (await fixLabels(b, xml)).xml;
+        const fixed = await fixLabels(b, xml);
+        xml = fixed.xml;
         xml = stampEdgeRoutes(xml);
-        return finish(b, xml, { mode, warnings, direction: mode === 'merge' ? (old.meta.aiviz_direction ?? l.direction) : l.direction, edits, old, stats });
+        // Stamping routes changes attributes, not geometry: the cells fixLabels read still hold.
+        return finish(b, xml, { mode, warnings, direction: mode === 'merge' ? (old.meta.aiviz_direction ?? l.direction) : l.direction, edits, old, stats, cells: fixed.cells });
     });
     async function finish(b, xml, r) {
         fs.mkdirSync(path.dirname(path.resolve(opts.out)), { recursive: true });
-        fs.writeFileSync(opts.out, kind === 'svg' ? await b.renderSvg(xml) : xml);
-        if (opts.png)
-            await b.renderPng(xml, opts.png);
+        // Issued together: the browser renders the preview and lays out the lint pass
+        // while node subsets the fonts for the SVG.
+        const [file, , cells] = await Promise.all([kind === 'svg' ? b.renderSvg(xml) : xml, opts.png ? b.renderPng(xml, opts.png) : undefined, r.cells ?? b.inspect(xml)]);
+        fs.writeFileSync(opts.out, file);
         return {
             out: opts.out,
             warnings: r.warnings,
-            check: check(await b.inspect(xml)),
+            check: check(cells),
             direction: r.direction,
             mode: r.mode,
             merge: r.stats,

package/dist/cli.js

@@ -1,11 +1,8 @@
 #!/usr/bin/env node
 import fs from 'node:fs';
+import module from 'node:module';
 import path from 'node:path';
 import { parseArgs } from 'node:util';
-import { build, checkFile, listIcons, render, show, tidy } from './api.js';
-import { SpecError, jsonSchema } from './spec/parse.js';
-import { KINDS, DIAGRAM_TYPES } from './spec/model.js';
-import { buildLines, checkLines } from './report.js';
 const USAGE = `linework: AI-written, hand-editable diagrams (YAML spec -> .drawio.svg)
 
 Usage:
@@ -53,43 +50,89 @@ Usage:
       Download the headless Chromium build that matches this version. Needed only
       when no Chrome or Edge is installed, or to run inside an agent's sandbox.
 `;
+// Node 22.1+ can keep compiled bytecode for linework's modules on disk, which
+// takes about a quarter off loading them on every run after the first. Older
+// Node has no such call. NODE_DISABLE_COMPILE_CACHE=1 turns it off.
+module.enableCompileCache?.();
 async function main(argv) {
     const [cmd, ...rest] = argv;
-    const { values, positionals } = parseArgs({
-        args: rest,
-        allowPositionals: true,
-        options: {
-            out: { type: 'string', short: 'o' },
-            png: { type: 'string' },
-            force: { type: 'boolean', default: false },
-            relayout: { type: 'boolean', default: false },
-            geometry: { type: 'boolean', default: false },
-            quiet: { type: 'boolean', short: 'q', default: false },
-            block: { type: 'string' },
-            scale: { type: 'string' },
-            'no-open': { type: 'boolean', default: false },
-            port: { type: 'string' },
-            root: { type: 'string' },
-            to: { type: 'string' },
-            pull: { type: 'boolean', default: false },
-            help: { type: 'boolean', short: 'h' },
-        },
-    });
+    const { values, positionals } = parseArgs({ args: rest, allowPositionals: true, options: OPTIONS });
     if (!cmd || cmd === 'help' || cmd === '--help' || cmd === '-h' || values.help)
         return void process.stdout.write(USAGE);
+    // Commands that draw start Chromium first and load the rest of linework while it
+    // boots and loads draw.io: the two take about the same time, so they overlap.
+    const needsBrowser = ['build', 'render', 'check', 'tidy', 'icons'].includes(cmd) || (cmd === 'import' && !!values.out);
+    const launching = needsBrowser ? import('./render/browser.js').then((m) => m.DrawioBrowser.launch({ scale: cmd === 'render' && values.scale ? Number(values.scale) : 2 })) : undefined;
+    // A failure here surfaces where the browser is awaited; don't report it twice.
+    launching?.catch(() => { });
+    try {
+        await run(cmd, values, positionals, launching);
+    }
+    finally {
+        if (launching)
+            await (await launching.catch(() => undefined))?.close();
+    }
+    // The font subsetter's WebAssembly keeps node alive for ~100ms after the work
+    // is done, with nothing left to run. A drawing command is finished here.
+    if (launching)
+        await exitWhenFlushed();
+}
+/** A small spec with a group, labels and a cycle: enough to exercise ELK's main paths. */
+const WARM_SPEC = 'type: architecture\ngroups: { g: G }\nnodes:\n  a: { in: g }\n  b: { in: g }\n  c: {}\nedges:\n  - a -> b: x\n  - b -> c: y\n  - c -> a\n';
+async function warmUp() {
+    const [{ parseSpecText }, { layout }] = await Promise.all([import('./spec/parse.js'), import('./layout/layout.js')]);
+    await layout(parseSpecText(WARM_SPEC).diagram);
+}
+function exitWhenFlushed() {
+    return new Promise(() => {
+        let pending = 2;
+        const done = () => --pending === 0 && process.exit();
+        process.stdout.write('', done);
+        process.stderr.write('', done);
+    });
+}
+const OPTIONS = {
+    out: { type: 'string', short: 'o' },
+    png: { type: 'string' },
+    force: { type: 'boolean', default: false },
+    relayout: { type: 'boolean', default: false },
+    geometry: { type: 'boolean', default: false },
+    quiet: { type: 'boolean', short: 'q', default: false },
+    block: { type: 'string' },
+    scale: { type: 'string' },
+    'no-open': { type: 'boolean', default: false },
+    port: { type: 'string' },
+    root: { type: 'string' },
+    to: { type: 'string' },
+    pull: { type: 'boolean', default: false },
+    help: { type: 'boolean', short: 'h' },
+};
+async function run(cmd, values, positionals, launching) {
+    const browser = async () => {
+        // ELK compiles its code on first use. Laying out a tiny graph while Chromium
+        // is still starting takes that cost off the real layout.
+        if (launching && ['build', 'import'].includes(cmd))
+            await warmUp();
+        return launching;
+    };
+    const { buildLines } = await import('./report.js');
     switch (cmd) {
         case 'build': {
             const src = positionals[0];
             if (!src || !values.out)
                 fail('usage: linework build <spec.yaml|-> -o <out.drawio.svg>');
             const text = src === '-' ? fs.readFileSync(0, 'utf8') : fs.readFileSync(src, 'utf8');
-            const res = await build(text, { out: values.out, png: values.png, force: values.force, relayout: values.relayout });
+            const { build } = await import('./api.js');
+            // Spec errors first: they shouldn't wait on, or hide behind, a browser problem.
+            (await import('./spec/parse.js')).parseSpecText(text);
+            const res = await build(text, { out: values.out, png: values.png, force: values.force, relayout: values.relayout, browser: await browser() });
             for (const line of buildLines(res, values.png))
                 console.log(line);
             return;
         }
         case 'show': {
             const file = positionals[0] ?? fail('usage: linework show <file.drawio.svg>');
+            const { show } = await import('./api.js');
             const res = show(file, { geometry: values.geometry });
             process.stdout.write(res.yaml);
             if (values.quiet)
@@ -107,30 +150,26 @@ async function main(argv) {
             const file = positionals[0];
             if (!file || !values.out)
                 fail('usage: linework render <file.drawio.svg> -o <out.png>');
-            const { DrawioBrowser } = await import('./render/browser.js');
-            const b = await DrawioBrowser.launch({ scale: values.scale ? Number(values.scale) : 2 });
-            try {
-                await render(file, values.out, b);
-            }
-            finally {
-                await b.close();
-            }
+            const { render } = await import('./api.js');
+            await render(file, values.out, await browser());
             console.log(`wrote ${values.out}`);
             return;
         }
         case 'check': {
             const file = positionals[0] ?? fail('usage: linework check <file.drawio.svg>');
-            const res = await checkFile(file);
-            printCheck(res);
+            const { checkFile } = await import('./api.js');
+            const res = await checkFile(file, await browser());
+            await printCheck(res);
             if (res.findings.some((f) => f.level === 'error'))
                 process.exitCode = 1;
             return;
         }
         case 'tidy': {
             const file = positionals[0] ?? fail('usage: linework tidy <file.drawio.svg>');
-            const res = await tidy(file);
+            const { tidy } = await import('./api.js');
+            const res = await tidy(file, await browser());
             console.log(res.fixed ? `rerouted ${res.fixed} edges in ${file}` : 'nothing to fix');
-            printCheck(res.check);
+            await printCheck(res.check);
             return;
         }
         case 'edit': {
@@ -169,16 +208,18 @@ async function main(argv) {
             const yaml = toYaml(res.diagram, 'imported from Mermaid');
             if (!values.out)
                 return void process.stdout.write(yaml);
-            const built = await build(yaml, { out: values.out, png: values.png, relayout: values.relayout, force: values.force });
+            const { build } = await import('./api.js');
+            const built = await build(yaml, { out: values.out, png: values.png, relayout: values.relayout, force: values.force, browser: await browser() });
             console.log(`wrote ${built.out} (${built.check.stats.nodes} nodes, ${built.check.stats.edges} edges, ${built.direction})`);
-            printCheck(built.check);
+            await printCheck(built.check);
             return;
         }
         case 'icons': {
             const provider = positionals[0];
             if (!provider || !['aws', 'gcp', 'k8s', 'azure'].includes(provider))
                 fail('usage: linework icons <aws|gcp|k8s|azure> [filter]');
-            const names = await listIcons(provider, positionals[1]);
+            const { listIcons } = await import('./api.js');
+            const names = await listIcons(provider, positionals[1], await browser());
             console.log(names.map((n) => `${provider}.${n}`).join('\n') || 'no matches');
             return;
         }
@@ -229,6 +270,7 @@ async function main(argv) {
             return;
         }
         case 'kinds': {
+            const { KINDS, DIAGRAM_TYPES } = await import('./spec/model.js');
             const types = (positionals.length ? positionals : DIAGRAM_TYPES);
             for (const t of types) {
                 if (!KINDS[t])
@@ -239,9 +281,11 @@ async function main(argv) {
             }
             return;
         }
-        case 'schema':
+        case 'schema': {
+            const { jsonSchema } = await import('./spec/parse.js');
             console.log(JSON.stringify(jsonSchema(), null, 2));
             return;
+        }
         case 'install-browser': {
             const { browserInstallCommand } = await import('./render/browser.js');
             const { spawnSync } = await import('node:child_process');
@@ -255,7 +299,8 @@ async function main(argv) {
             fail(`unknown command "${cmd}"\n\n${USAGE}`);
     }
 }
-function printCheck(res) {
+async function printCheck(res) {
+    const { checkLines } = await import('./report.js');
     for (const line of checkLines(res))
         console.log(line);
 }
@@ -264,7 +309,7 @@ function fail(msg) {
     process.exit(2);
 }
 main(process.argv.slice(2)).catch((e) => {
-    if (e instanceof SpecError) {
+    if (e?.name === 'SpecError') {
         console.error('spec error:');
         for (const i of e.issues)
             console.error(`  ${i.path ? i.path + ': ' : ''}${i.message}`);

package/dist/drawio/theme.js

@@ -76,10 +76,10 @@ function lightPaint(sw, neutral, text, muted, accent) {
     return (color, highlight) => {
         if (highlight) {
             const s = sw[color === 'neutral' || color === 'ink' ? accent : color];
-            return { fill: s.solid, stroke: s.solid, text: '#FFFFFF', sub: 'rgba(255,255,255,0.78)', strokeWidth: 1 };
+            return { fill: s.solid, stroke: s.solid, text: '#FFFFFF', sub: 'rgba(255,255,255,0.9)', strokeWidth: 1 };
         }
         if (color === 'ink')
-            return { fill: text, stroke: text, text: '#FFFFFF', sub: muted, strokeWidth: 1 };
+            return { fill: text, stroke: text, text: '#FFFFFF', sub: 'rgba(255,255,255,0.72)', strokeWidth: 1 };
         if (color === 'neutral')
             return { ...neutral, text, sub: muted, strokeWidth: 1 };
         const s = sw[color];
@@ -92,16 +92,16 @@ const CLEAN = {
     canvas: '#FFFFFF',
     text: '#17171C',
     muted: '#6B6B76',
-    edge: '#A0A0AB',
+    edge: '#868691',
     edgeText: '#52525C',
     edgeWidth: 1.25,
     accent: 'blue',
     kindColors: false,
     radius: 10,
-    group: { fill: '#F5F5F7', nested: '#EBEBEF', stroke: 'none', dashed: false, text: '#6B6B76' },
+    group: { fill: '#F5F5F7', nested: '#EBEBEF', stroke: 'none', dashed: false, text: '#61616C' },
     note: { fill: '#FFF4CC', stroke: 'none', text: '#5C4300' },
     well: '#F3F3F5',
-    paint: lightPaint(LIGHT_SW, { fill: '#FFFFFF', stroke: '#DADAE0' }, '#17171C', '#6B6B76', 'blue'),
+    paint: lightPaint(LIGHT_SW, { fill: '#FFFFFF', stroke: '#C4C4CC' }, '#17171C', '#6B6B76', 'blue'),
     edgePaint: (color, hl) => {
         const s = LIGHT_SW[color ?? 'blue'];
         if (hl)
@@ -115,12 +115,12 @@ const SOFT = {
     name: 'soft',
     kindColors: true,
     radius: 12,
-    group: { fill: '#F7F7F9', nested: '#EFEFF3', stroke: 'none', dashed: false, text: '#6B6B76' },
+    group: { fill: '#F7F7F9', nested: '#EFEFF3', stroke: 'none', dashed: false, text: '#61616C' },
     paint: (color, hl) => {
         if (hl || color === 'ink')
             return CLEAN.paint(color, hl);
         const c = color === 'neutral' ? 'gray' : color;
-        return { fill: SOFT_TINT[c], stroke: 'none', text: c === 'gray' ? '#17171C' : LIGHT_SW[c].ink, sub: c === 'gray' ? '#6B6B76' : LIGHT_SW[c].ink + 'B3', strokeWidth: 1 };
+        return { fill: SOFT_TINT[c], stroke: 'none', text: c === 'gray' ? '#17171C' : LIGHT_SW[c].ink, sub: c === 'gray' ? '#6B6B76' : LIGHT_SW[c].ink + 'E0', strokeWidth: 1 };
     },
 };
 const DARK = {
@@ -141,7 +141,7 @@ const DARK = {
     paint: (color, hl) => {
         if (hl) {
             const s = DARK_SW[color === 'neutral' || color === 'ink' ? 'blue' : color];
-            return { fill: s.solid, stroke: s.solid, text: '#FFFFFF', sub: 'rgba(255,255,255,0.78)', strokeWidth: 1 };
+            return { fill: s.solid, stroke: s.solid, text: '#FFFFFF', sub: 'rgba(255,255,255,0.9)', strokeWidth: 1 };
         }
         if (color === 'ink')
             return { fill: '#E6EDF3', stroke: '#E6EDF3', text: '#0D1117', sub: '#59636E', strokeWidth: 1 };
@@ -212,7 +212,7 @@ const BLUEPRINT = {
     accent: 'blue',
     kindColors: false,
     radius: 4,
-    group: { fill: 'none', stroke: '#9DB0D0', dashed: true, text: '#5A6F92' },
+    group: { fill: 'none', stroke: '#7489AF', dashed: true, text: '#5A6F92' },
     note: { fill: '#EAF0FA', stroke: '#9DB0D0', text: BP_INK },
     well: '#EAF0FA',
     paint: (color, hl) => {
@@ -236,7 +236,7 @@ const BLUEPRINT = {
 // Other diagram types use `clean`.
 const C4_KIND = {
     person: { fill: '#1E3466', stroke: '#1E3466', text: '#FFFFFF', type: 'Person' },
-    external: { fill: '#6B7383', stroke: '#6B7383', text: '#FFFFFF', type: 'External system' },
+    external: { fill: '#626A7A', stroke: '#626A7A', text: '#FFFFFF', type: 'External system' },
 };
 const C4_CONTAINER = { fill: '#456A9E', stroke: '#456A9E', text: '#FFFFFF', type: 'Container' };
 const C4 = { ...CLEAN, name: 'c4', group: { fill: 'none', stroke: '#444444', dashed: true, text: '#444444' }, edge: '#707070', edgeText: '#444444' };
@@ -250,7 +250,7 @@ export function paintFor(type, kind, theme, look = {}) {
     const t = palette(theme);
     if (theme === 'c4' && type === 'architecture' && !look.highlight && !look.color) {
         const c = C4_KIND[kind] ?? C4_CONTAINER;
-        return { fill: c.fill, stroke: c.stroke, text: c.text, sub: 'rgba(255,255,255,0.8)', strokeWidth: 1 };
+        return { fill: c.fill, stroke: c.stroke, text: c.text, sub: 'rgba(255,255,255,0.92)', strokeWidth: 1 };
     }
     const k = kindDef(type, kind);
     // A highlight is the style's accent unless the spec names a color.
@@ -274,7 +274,9 @@ export function nodeStyle(type, kind, theme = 'clean', look = {}) {
     const r = t.radius;
     switch (k.shape) {
         case 'cylinder':
-            return `shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=7;${base}`;
+            // With an outline the lid is drawn, and the text centres on the face below
+            // it. Without one (soft) the lid is invisible: centre on the whole shape.
+            return `shape=cylinder3;boundedLbl=${stroke === 'none' ? 0 : 1};backgroundOutline=1;size=${CYL_SIZE};${base}`;
         case 'pill':
             return `rounded=1;arcSize=50;${base}`;
         case 'diamond':
@@ -298,6 +300,17 @@ export function nodeStyle(type, kind, theme = 'clean', look = {}) {
             return `rounded=1;absoluteArcSize=1;arcSize=${r * 2};${base}`;
     }
 }
+/** Depth of a cylinder's lid and base curve. */
+export const CYL_SIZE = 7;
+/**
+ * Vertical centre of a node's text, from the top of its box. draw.io bounds a
+ * cylinder's label between its lid (2 x size) and 0.3 x size above the base.
+ */
+export function textMiddle(style, h) {
+    if (!/shape=cylinder3/.test(style) || !/boundedLbl=1/.test(style))
+        return h / 2;
+    return (2 * CYL_SIZE + h - 0.3 * CYL_SIZE) / 2;
+}
 /** Horizontal text padding inside a node, each side. */
 export const PAD_X = 16;
 /** Vertical text padding inside a node, each side. */
@@ -309,6 +322,8 @@ export function fieldStyle(theme = 'clean') {
     return ('text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=0;spacingRight=0;overflow=fill;' +
         `rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;${fontPart(t, t.type.size.field, t.text)}`);
 }
+/** Left inset of a group's title. */
+export const GROUP_INSET = 14;
 export function groupStyle(theme = 'clean', look = {}, depth = 0) {
     const t = palette(theme);
     let { fill, stroke, text } = t.group;
@@ -324,7 +339,7 @@ export function groupStyle(theme = 'clean', look = {}, depth = 0) {
     return (`rounded=1;absoluteArcSize=1;arcSize=${t.radius * 2 + 4};html=1;whiteSpace=wrap;container=1;collapsible=0;` +
         `fillColor=${fill};strokeColor=${stroke};strokeWidth=${look.highlight ? 1.5 : 1};` +
         (t.group.dashed ? dashes(t) : '') +
-        'verticalAlign=top;align=left;spacingLeft=14;spacingTop=9;' +
+        `verticalAlign=top;align=left;spacingLeft=${GROUP_INSET};spacingTop=9;` +
         `${fontPart(t, t.type.size.group, text)}fontStyle=1;${t.extra}`);
 }
 /** Group title HTML: sentence case, except blueprint's drafting capitals. */
@@ -358,8 +373,10 @@ export function lifelineStyle(kind, theme = 'clean', headH = 48, look = {}) {
     const t = palette(theme);
     const c = paintFor('sequence', kind, theme, look);
     const k = kindDef('sequence', kind);
-    const stroke = c.stroke === 'none' ? (k.dashed ? '#A1A1AA' : c.fill) : c.stroke;
-    // The lifeline's dashed stem uses the stroke colour: keep it quiet even when the head is loud.
+    // The dashed stem takes the stroke color, so a highlighted head keeps the plain
+    // participant line: the accent stays on the head and the highlighted messages.
+    const quiet = t.paint('neutral', false).stroke;
+    const stroke = look.highlight ? (quiet === 'none' ? t.edge : quiet) : c.stroke === 'none' ? (k.dashed ? '#A1A1AA' : c.fill) : c.stroke;
     return (`shape=umlLifeline;perimeter=lifelinePerimeter;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;size=${headH};` +
         `html=1;whiteSpace=wrap;rounded=1;absoluteArcSize=1;arcSize=${t.radius * 2};fillColor=${c.fill};strokeColor=${stroke};strokeWidth=${Math.min(1.5, c.strokeWidth)};` +
         `spacingLeft=${PAD_X - 4};spacingRight=${PAD_X - 4};` +
@@ -384,12 +401,17 @@ export function messageStyle(style, theme = 'clean', self = false, look = {}) {
         (self ? 'edgeStyle=orthogonalEdgeStyle;rounded=1;align=left;spacingLeft=6;verticalAlign=middle;' : '') +
         `${fontPart(t, t.type.size.edge, p.text)}${look.highlight ? 'fontStyle=1;' : ''}labelBackgroundColor=${t.canvas};labelPadding=1 5;${t.extra}`);
 }
+/** Padding of a sequence frame's operator tab, and its inset from the frame's corner. */
+export const FRAME_TAB_X = 9, FRAME_TAB_Y = 3, FRAME_TAB_INSET = 4;
 export function frameStyle(theme = 'clean') {
     const t = palette(theme);
-    const line = t.name === 'dark' ? '#3D444D' : t.name === 'clean' || t.name === 'soft' || t.name === 'c4' ? '#DADAE0' : t.muted;
-    // The operator (alt, loop, opt) sits in the corner as a small label, not a UML tab.
-    return (`rounded=1;absoluteArcSize=1;arcSize=${t.radius * 2};whiteSpace=wrap;html=1;container=0;verticalAlign=top;align=left;spacing=0;spacingLeft=10;spacingTop=4;` +
-        `fillColor=none;strokeColor=${line};strokeWidth=1;${fontPart(t, t.type.size.group, t.muted)}fontStyle=1;${t.extra}`);
+    // The operator (alt, loop, opt) sits in a small tab in the frame's corner: UML's
+    // pentagon, drawn as a chip, inset the same from both sides so its square corner
+    // stays inside the frame's rounded one. draw.io draws an HTML label's background
+    // 1px left of and 3.5px below where its spacing puts it; the +1 and -3.5 cancel that.
+    return (`rounded=1;absoluteArcSize=1;arcSize=${t.radius * 2};whiteSpace=wrap;html=1;container=0;verticalAlign=top;align=left;spacing=0;spacingLeft=${FRAME_TAB_X + FRAME_TAB_INSET + 1};spacingTop=${FRAME_TAB_Y + FRAME_TAB_INSET - 3.5};` +
+        `labelBackgroundColor=${t.well};labelPadding=${FRAME_TAB_Y} ${FRAME_TAB_X};` +
+        `fillColor=none;strokeColor=${t.edge};strokeWidth=1;${fontPart(t, t.type.size.group, t.text)}fontStyle=1;${t.extra}`);
 }
 export function guardStyle(theme = 'clean') {
     const t = palette(theme);
@@ -397,7 +419,7 @@ export function guardStyle(theme = 'clean') {
 }
 export function separatorStyle(theme = 'clean') {
     const t = palette(theme);
-    return `endArrow=none;dashed=1;dashPattern=4 4;html=1;strokeColor=${t.name === 'dark' ? '#3D444D' : t.name === 'clean' || t.name === 'soft' || t.name === 'c4' ? '#DADAE0' : t.muted};`;
+    return `endArrow=none;dashed=1;dashPattern=4 4;html=1;strokeColor=${t.edge};`;
 }
 export function noteStyle(theme = 'clean') {
     const t = palette(theme);