pmx-canvas 0.10.0 → 0.11.0

package/src/client/theme/surface-theme.css

@@ -21,12 +21,12 @@
   /* ── Core palette (dark · ink + cyan) ────────────────────── */
   --c-bg: #081524;
   --c-panel: #0f1d31;
-  --c-panel-soft: #0a1729;
+  --c-panel-soft: #13243b;
   --c-line: #1b2c44;
   --c-text: #e6eef7;
-  --c-text-soft: #c7d3ea;
+  --c-text-soft: #b9c6d6;
   --c-muted: #8ea3bd;
-  --c-dim: #5c6b80;
+  --c-dim: #6b7d94;
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
@@ -46,13 +46,13 @@
   /* Common aliases authored HTML might use. */
   --color-bg: #081524;
   --color-panel: #0f1d31;
-  --color-surface: #0a1729;
+  --color-surface: #13243b;
   --color-border: #1b2c44;
   --color-text: #e6eef7;
   --color-text-primary: #e6eef7;
-  --color-text-secondary: #c7d3ea;
+  --color-text-secondary: #b9c6d6;
   --color-text-muted: #8ea3bd;
-  --color-text-dim: #5c6b80;
+  --color-text-dim: #6b7d94;
   --color-accent: #4BBCFF;
   --color-success: #2fd07f;
   --color-warning: #f4c542;

package/src/json-render/charts/tufte-components.tsx

@@ -336,6 +336,18 @@ interface SlopegraphProps {
   height?: number | null;
 }
 
+/** Separate close labels without moving the data points they describe. */
+function slopeLabelPositions(values: number[], top: number, bottom: number): number[] {
+  const order = values.map((y, index) => ({ y, index })).sort((a, b) => a.y - b.y);
+  const gap = Math.min(14, (bottom - top) / Math.max(1, order.length - 1));
+  for (let i = 1; i < order.length; i++) order[i].y = Math.max(order[i].y, order[i - 1].y + gap);
+  if (order.length) order[order.length - 1].y = Math.min(order[order.length - 1].y, bottom);
+  for (let i = order.length - 2; i >= 0; i--) order[i].y = Math.min(order[i].y, order[i + 1].y - gap);
+  const result = [...values];
+  for (const { y, index } of order) result[index] = y;
+  return result;
+}
+
 function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
   const stroke = props.color ?? ACCENT;
   const rows = (props.data ?? []).map((row) => ({
@@ -359,6 +371,16 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
   // fills without pushing a scrollbar onto the iframe document.
   const plotH = chartPlotHeight(height, Boolean(props.title));
   const scaleY = (v: number) => topPad + (1 - (v - min) / (max - min)) * (plotH - topPad - botPad);
+  const beforeLabels = slopeLabelPositions(
+    rows.map((row) => scaleY(row.before)),
+    topPad,
+    plotH - botPad,
+  );
+  const afterLabels = slopeLabelPositions(
+    rows.map((row) => scaleY(row.after)),
+    topPad,
+    plotH - botPad,
+  );
 
   return (
     <div ref={frameRef} className="pmx-chart pmx-chart--slopegraph" style={{ height }}>
@@ -390,10 +412,30 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
               <line x1={leftX} y1={y1} x2={rightX} y2={y2} stroke={lineColor} strokeWidth={1.5} />
               <circle cx={leftX} cy={y1} r={2.5} fill={lineColor} />
               <circle cx={rightX} cy={y2} r={2.5} fill={lineColor} />
-              <text x={leftX - 8} y={y1} textAnchor="end" dominantBaseline="central" fontSize={11} fill={INK}>
+              {beforeLabels[i] !== y1 && (
+                <line x1={leftX} y1={y1} x2={leftX - 5} y2={beforeLabels[i]} stroke={lineColor} />
+              )}
+              {afterLabels[i] !== y2 && (
+                <line x1={rightX} y1={y2} x2={rightX + 5} y2={afterLabels[i]} stroke={lineColor} />
+              )}
+              <text
+                x={leftX - 8}
+                y={beforeLabels[i]}
+                textAnchor="end"
+                dominantBaseline="central"
+                fontSize={11}
+                fill={INK}
+              >
                 {`${row.label}  ${row.before}`}
               </text>
-              <text x={rightX + 8} y={y2} textAnchor="start" dominantBaseline="central" fontSize={11} fill={INK}>
+              <text
+                x={rightX + 8}
+                y={afterLabels[i]}
+                textAnchor="start"
+                dominantBaseline="central"
+                fontSize={11}
+                fill={INK}
+              >
                 {`${row.after}  ${row.label}`}
               </text>
             </g>

package/src/json-render/renderer/index.css

@@ -3,7 +3,7 @@
 
 @source "../../../../node_modules/@json-render/shadcn/dist/index.js";
 
-@custom-variant dark (&:is([data-theme="dark"] *));
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-sans: "IBM Plex Sans", system-ui, sans-serif;
@@ -99,6 +99,66 @@
   --chart-6: #ffffff;
 }
 
+/* Named themes share the canvas surface, including nested cards and charts.
+   Explicit dark/light remain available for authored design experiments. */
+:root[data-canvas-theme] {
+  --radius: 6px;
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-lg: 15px;
+  --text-xl: 20px;
+  --background: var(--c-panel);
+  --foreground: var(--c-text);
+  --card: var(--c-panel-soft);
+  --card-foreground: var(--c-text);
+  --popover: var(--c-panel);
+  --popover-foreground: var(--c-text);
+  --primary: var(--c-accent);
+  --primary-foreground: var(--c-on-accent, var(--c-on-pin));
+  --secondary: var(--c-panel-soft);
+  --secondary-foreground: var(--c-text);
+  --muted: var(--c-panel-soft);
+  --muted-foreground: var(--c-muted);
+  --accent: var(--c-panel-soft);
+  --accent-foreground: var(--c-text);
+  --destructive: var(--c-danger);
+  --border: var(--c-line);
+  --input: var(--c-line);
+  --ring: var(--c-accent);
+  --chart-1: var(--c-accent);
+  --chart-2: var(--c-rel-supports);
+  --chart-3: var(--c-rel-contradicts);
+  --chart-4: var(--c-rel-cites);
+  --chart-5: var(--c-rel-informs);
+  --chart-6: var(--c-muted);
+  font-size: 16px;
+}
+
+/* surface-theme's unlayered body rule otherwise wins over Tailwind's base layer. */
+body {
+  background: var(--background);
+  color: var(--foreground);
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.pmx-viewer-root { width: 100%; min-width: 0; }
+[data-embedded] .pmx-viewer-root:not(:has(> [data-slot="card"])) { padding: 12px 14px; }
+[data-embedded] .pmx-viewer-root > [data-slot="card"] {
+  width: 100%;
+  max-width: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  padding: 12px 14px;
+}
+[data-embedded][data-duplicate-title] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-header"] > [data-slot="card-title"] { display: none; }
+[data-embedded][data-duplicate-title] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-header"]:not(:has([data-slot="card-description"])) { display: none; }
+[data-embedded] .pmx-viewer-root > [data-slot="card"] > [data-slot="card-content"] { padding: 0; }
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -159,7 +219,7 @@ button {
   border: 1px solid transparent;
   border-radius: 9999px;
   padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
+  font-size: max(11px, 0.75rem);
   font-weight: 500;
   line-height: 1.25rem;
 }

package/src/json-render/renderer/index.tsx

@@ -23,6 +23,7 @@ import { extraChartComponents } from '../charts/extra-components';
 import { tufteChartComponents } from '../charts/tufte-components';
 import { pmxCanvasDirectives } from '../directives';
 import { JsonRenderDevtools } from '@json-render/devtools-react';
+import { canvasThemeScheme, isCanvasTheme } from '../../shared/themes.js';
 
 type BadgeVariant =
   | 'default'
@@ -167,10 +168,12 @@ function syncPreferredTheme(): void {
 }
 
 function applyTheme(theme: unknown): void {
-  if (theme !== 'dark' && theme !== 'light' && theme !== 'high-contrast') return;
+  if (theme !== 'dark' && theme !== 'light' && !isCanvasTheme(theme)) return;
   document.documentElement.setAttribute('data-theme', theme);
-  document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'high-contrast');
-  document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark';
+  document.documentElement.toggleAttribute('data-canvas-theme', isCanvasTheme(theme));
+  const scheme = theme === 'light' ? 'light' : canvasThemeScheme(theme);
+  document.documentElement.classList.toggle('dark', scheme === 'dark');
+  document.documentElement.style.colorScheme = scheme;
 }
 
 function App({ store }: { store: StateStore }) {
@@ -235,11 +238,15 @@ function App({ store }: { store: StateStore }) {
         padding: 0,
         boxSizing: 'border-box' as const,
       }
-    : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
+    : { minHeight: '100vh', padding: 0, boxSizing: 'border-box' as const };
   return (
-    <div style={containerStyle}>
+    <div
+      style={containerStyle}
+      data-embedded={!isSite ? '' : undefined}
+      data-duplicate-title={spec.elements[spec.root]?.props?.title === document.title ? '' : undefined}
+    >
       <JSONUIProvider registry={registry} store={store} directives={pmxCanvasDirectives} handlers={buildAxHandlers()}>
-        <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
+        <div className="pmx-viewer-root" style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
         {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? <JsonRenderDevtools position="right" /> : null}
@@ -282,8 +289,25 @@ if (root) {
   // Standalone viewers have no state token and render immediately.
   window.addEventListener('message', (event: MessageEvent) => {
     if (event.source !== window.parent) return;
-    const m = event.data as { source?: string; type?: string; token?: string; state?: unknown } | null;
+    const m = event.data as {
+      source?: string;
+      type?: string;
+      token?: string;
+      state?: unknown;
+      theme?: unknown;
+      title?: unknown;
+    } | null;
     if (!m) return;
+    if (m.source === HTML_SURFACE_PUSH_SOURCE && m.type === 'theme-update' && stateToken && m.token === stateToken) {
+      applyTheme(m.theme);
+      if (typeof m.title === 'string') {
+        document.title = m.title;
+        const spec = window.__PMX_CANVAS_JSON_RENDER_SPEC__;
+        document
+          .querySelector('[data-embedded]')
+          ?.toggleAttribute('data-duplicate-title', spec?.elements[spec.root]?.props?.title === m.title);
+      }
+    }
     if (m.source === JSON_VIEWER_STATE_SOURCE && m.type === 'restore' && stateToken && m.token === stateToken) {
       if (m.state === null || (typeof m.state === 'object' && !Array.isArray(m.state)))
         mount(m.state as Record<string, unknown> | null);

package/src/json-render/server.ts

@@ -6,6 +6,7 @@ import { applySpecPatch, parseSpecStreamLine, type Spec, type SpecStreamLine } f
 import { allComponentDefinitions, catalog, validateShadcnElementProps, type JsonRenderIssue } from './catalog.js';
 import { findUnknownDirectiveKey, isDynamicPropValue } from './directives.js';
 import { contentHeightReporterTag } from '../shared/content-height-reporter.js';
+import type { CanvasThemeName } from '../shared/themes.js';
 
 export interface JsonRenderSpec {
   root: string;
@@ -1030,7 +1031,7 @@ export async function readJsonRenderBundle(): Promise<{ js: string; css: string
 export async function buildJsonRenderViewerHtml(options: {
   title: string;
   spec: JsonRenderSpec;
-  theme?: 'dark' | 'light' | 'high-contrast';
+  theme?: CanvasThemeName | 'dark' | 'light';
   display?: 'expanded' | 'site';
   devtools?: boolean;
   nodeId?: string;
@@ -1076,7 +1077,7 @@ export async function buildJsonRenderViewerHtml(options: {
     const heightReporter = options.frameToken ? contentHeightReporterTag(options.frameToken) : '';
     return buildAppHtml({
       title: options.title,
-      css: cssBundle,
+      css: `${readFileSync(join(import.meta.dir, '../client/theme/surface-theme.css'), 'utf-8')}\n${cssBundle}`,
       js: escapeInlineScriptSource(boot),
       head: `<meta name="color-scheme" content="light dark" />${heightReporter}`,
     });

package/src/server/board-export.ts

@@ -12,7 +12,7 @@
 import { existsSync, mkdirSync, readFileSync, realpathSync, statSync, writeFileSync } from 'node:fs';
 import { dirname, isAbsolute, join, relative, resolve, sep } from 'node:path';
 import { Marked, Renderer, type RendererThis, type Tokens } from 'marked';
-import { canvasThemeScheme } from '../shared/themes.js';
+import { canvasThemeScheme, normalizeCanvasThemeName, type CanvasThemeName } from '../shared/themes.js';
 import { delimiterForPath, parseDelimitedText } from '../shared/delimited-text.js';
 import { buildJsonRenderViewerHtml, escapeInlineScriptSource, readJsonRenderBundle } from '../json-render/server.js';
 import type { JsonRenderSpec } from '../json-render/server.js';
@@ -58,6 +58,7 @@ interface ExportCard {
   w: number;
   h: number;
   group?: true;
+  heading?: true;
   html?: string;
   frame?: string;
 }
@@ -66,7 +67,7 @@ interface Collected {
   manifest: ExportManifest;
   cards: ExportCard[];
   edges: CanvasEdge[];
-  scheme: 'dark' | 'light';
+  theme: CanvasThemeName;
   needsJsonRender: boolean;
   needsMermaid: boolean;
 }
@@ -207,9 +208,7 @@ async function collect(
   const read = canvasState.readBoard(boardId);
   if (!read) return null;
   const { board, state } = read;
-  const theme = canvasThemeScheme(state.theme ?? canvasState.theme);
-  // Exports collapse to a scheme; surface documents take the theme that draws it.
-  const surfaceTheme = theme === 'light' ? 'daylight' : 'harbor';
+  const theme = normalizeCanvasThemeName(state.theme ?? canvasState.theme);
   const remoteImages = new Set<string>();
   const links = new Set<string>();
   const frameNetworkDestinations = new Set<string>();
@@ -278,6 +277,7 @@ async function collect(
         card.group = true;
         break;
       case 'markdown':
+        if (data.display === 'heading') card.heading = true;
         card.html = `<div class="md">${await markdown.parse(text(data.content))}</div>`;
         break;
       case 'status':
@@ -385,8 +385,7 @@ async function collect(
         const html = text(data.html) || text(data.content);
         collectFrameNetworkDestinations(html, frameNetworkDestinations);
         manifest.frames += 1;
-        if (withFrames)
-          card.frame = buildHtmlSurfaceDocument(html, { theme: surfaceTheme, title, inlineThemeCss: themeCss });
+        if (withFrames) card.frame = buildHtmlSurfaceDocument(html, { theme, title, inlineThemeCss: themeCss });
         break;
       }
       case 'mermaid':
@@ -398,7 +397,7 @@ async function collect(
               '<script src="/canvas/mermaid-entry.js"></script>',
               `<script src="${MERMAID_SRC}"></script>`,
             ),
-            { theme: surfaceTheme, title, inlineThemeCss: themeCss },
+            { theme, title, inlineThemeCss: themeCss },
           );
         }
         break;
@@ -415,7 +414,8 @@ async function collect(
             title,
             spec: data.spec as JsonRenderSpec,
             theme,
-            display: 'site',
+            // The saved card owns the viewport, just as on the live canvas.
+            // Omitting display selects embedded layout and its duplicate-title policy.
           });
         }
         break;
@@ -444,7 +444,7 @@ async function collect(
   manifest.links = [...links];
   manifest.frameNetworkDestinations = [...frameNetworkDestinations];
   manifest.embeddedCodeCanAccessNetwork = manifest.frames > 0;
-  return { manifest, cards, edges: state.edges, scheme: theme, needsJsonRender, needsMermaid };
+  return { manifest, cards, edges: state.edges, theme, needsJsonRender, needsMermaid };
 }
 
 /** What an export of `boardId` would put in the file, without building it. */
@@ -467,7 +467,7 @@ export async function buildBoardExport(
 ): Promise<{ html: string; manifest: ExportManifest } | null> {
   const collected = await collect(boardId, includeFiles, true, includeDerivedText);
   if (!collected) return null;
-  const { manifest, cards, edges: snapshotEdges, scheme, needsJsonRender, needsMermaid } = collected;
+  const { manifest, cards, edges: snapshotEdges, theme, needsJsonRender, needsMermaid } = collected;
 
   // Store each viewer bundle once; frames reference it by placeholder.
   const assets: Record<string, string> = {};
@@ -496,7 +496,7 @@ export async function buildBoardExport(
   const exportedAt = new Date().toISOString();
   const html = exportPage({
     title: manifest.boardName,
-    scheme,
+    theme,
     exportedAt,
     board: { cards, edges },
     assets,
@@ -536,7 +536,7 @@ export function exportsFolder(): string | null {
 
 function exportPage(input: {
   title: string;
-  scheme: 'dark' | 'light';
+  theme: CanvasThemeName;
   exportedAt: string;
   board: {
     cards: ExportCard[];
@@ -545,14 +545,22 @@ function exportPage(input: {
   assets: Record<string, string>;
 }): string {
   const date = new Date(input.exportedAt).toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'short' });
+  // Use the workbench's shipped faces and shared palette without offline requests.
+  const fonts = (readAsset('global.css').match(/@font-face\s*\{[^}]*\}/g) ?? [])
+    .join('\n')
+    .replace(
+      /url\("fonts\/([\w.-]+\.woff2)"\)/g,
+      (_, file: string) =>
+        `url("data:font/woff2;base64,${readFileSync(join(canvasBundleDir(), 'fonts', file)).toString('base64')}")`,
+    );
   return `<!doctype html>
-<html lang="en" data-scheme="${input.scheme}">
+<html lang="en" data-scheme="${canvasThemeScheme(input.theme)}" data-theme="${input.theme}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="generator" content="PMX Canvas">
 <title>${escapeHtml(input.title)}</title>
-<style>${EXPORT_CSS}</style>
+<style>${fonts}\n${readAsset('surface-theme.css')}\n${EXPORT_CSS}</style>
 </head>
 <body>
 <header class="bar">
@@ -574,10 +582,9 @@ function exportPage(input: {
 }
 
 const EXPORT_CSS = `
-:root{--bg:#0b1016;--panel:#121a23;--line:#263241;--text:#e8edf2;--soft:#9aa7b4;--accent:#4bbcff;--add:#2ea66f;--del:#e25d6e}
-[data-scheme=light]{--bg:#f4f6f8;--panel:#ffffff;--line:#d5dbe1;--text:#17202a;--soft:#5b6875;--accent:#0a6fc2;--add:#1c7a4f;--del:#b3263a}
+:root{--bg:var(--c-bg);--panel:var(--c-panel);--line:var(--c-line);--text:var(--c-text);--soft:var(--c-muted);--accent:var(--c-accent);--add:var(--c-ok);--del:var(--c-danger)}
 *{box-sizing:border-box}
-html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}
+html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.6 var(--font-ui)}
 .bar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line);z-index:5}
 .bar .name{display:flex;flex-direction:column;min-width:0}
 .bar .name strong,.bar .name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -592,12 +599,16 @@ button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid
 #edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
 #edges line{stroke:var(--soft);stroke-width:1.5}
 #edges text{fill:var(--soft);font-size:12px;text-anchor:middle}
-.card{position:absolute;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.18)}
+.card{position:absolute;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-node);overflow:hidden;box-shadow:var(--e-1)}
 .card.group{background:color-mix(in srgb,var(--accent) 5%,transparent);border-style:dashed;box-shadow:none}
-.card-title{position:relative;flex-shrink:0;width:100%;text-align:left;padding:12px 42px 12px 18px;font-weight:600;font-size:13px;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:zoom-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--soft) 5%,var(--panel))}
+.card-title{position:relative;flex-shrink:0;width:100%;text-align:left;padding:7px 38px 7px 12px;font-weight:600;font-size:12px;line-height:22px;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:zoom-in;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent}
 button.card-title:after{content:'↗';position:absolute;right:16px;color:var(--soft);font-size:16px}
 .card.group .card-title{border-bottom:none;cursor:default;color:var(--soft)}
-.card-body{flex:1;min-height:0;min-width:0;overflow:auto;padding:20px;overflow-wrap:anywhere;overscroll-behavior:contain;cursor:auto}
+.card-body{flex:1;min-height:0;min-width:0;overflow:auto;padding:10px 14px;font-size:var(--fs-ui);color:var(--c-text-soft);overflow-wrap:anywhere;overscroll-behavior:contain;cursor:auto}
+.card.heading{background:transparent;border-color:transparent;box-shadow:none}
+.card.heading .card-title{padding:8px 38px 0 16px;border:0;font-size:var(--fs-heading);line-height:28px;letter-spacing:-.01em}
+.card.heading .card-body{padding:0 16px 8px;color:var(--soft)}
+.card.heading:not(:hover):not(:focus-within) .card-title:after{visibility:hidden}
 .card-body>:first-child,.md>:first-child{margin-top:0}.card-body>:last-child,.md>:last-child{margin-bottom:0}
 .card iframe,#overlay-body iframe{flex:1;min-height:0;width:100%;height:100%;border:0;background:var(--bg)}
 .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:1.4em 0 .6em;line-height:1.3;font-weight:650;letter-spacing:-.02em}
@@ -607,7 +618,7 @@ button.card-title:after{content:'↗';position:absolute;right:16px;color:var(--s
 .md input[type=checkbox]{accent-color:var(--accent);margin-right:.5em}
 .md blockquote{margin:1em 0;padding:10px 16px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--soft)}
 .md blockquote>:last-child{margin-bottom:0}.md hr{border:0;border-top:1px solid var(--line);margin:24px 0}
-.md code,pre{font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
+.md code,pre{font:13px/1.65 var(--font-code);tab-size:2}
 .md :not(pre)>code{padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--soft) 8%,var(--panel))}
 pre{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--soft) 5%,var(--panel));white-space:pre;overflow:auto;overflow-wrap:normal;overscroll-behavior:contain}
 .prose{white-space:pre-wrap}.table-scroll{width:100%;max-width:100%;overflow:auto;margin:16px 0;border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain}
@@ -629,7 +640,7 @@ details{margin-top:16px}summary{cursor:pointer;color:var(--soft);margin-bottom:1
 #overlay .sheet{width:min(1100px,100%);height:min(90vh,100%);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
 #overlay .sheet>header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
 #overlay-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
-#overlay-body .card-body{padding:28px 32px}#overlay-body .md{max-width:960px;margin:0 auto}
+#overlay-body .card-body{padding:28px 32px;font-size:15px}#overlay-body .md{max-width:960px;margin:0 auto}
 @media(max-width:600px){#overlay{padding:8px}#overlay .sheet{height:100%}#overlay-body .card-body{padding:18px}.bar{padding:0 10px}.bar .name span{display:none}}
 `;
 
@@ -660,7 +671,7 @@ const body = (card) => {
 const ordered = [...board.cards].sort((a, b) => (b.group ? 1 : 0) - (a.group ? 1 : 0));
 for (const card of ordered) {
   const el = document.createElement('section');
-  el.className = 'card' + (card.group ? ' group' : '');
+  el.className = 'card' + (card.group ? ' group' : '') + (card.heading ? ' heading' : '');
   el.dataset.nodeId = card.id;
   el.dataset.nodeType = card.kind;
   Object.assign(el.style, { left: card.x + 'px', top: card.y + 'px', width: card.w + 'px', height: card.h + 'px' });

package/src/server/canvas-geometry.ts

@@ -58,6 +58,7 @@ export function validCanvasNodeUpdates(input: unknown): CanvasNodeUpdate[] {
     return (
       typeof update.id === 'string' &&
       (update.collapsed === undefined || typeof update.collapsed === 'boolean') &&
+      (update.zIndex === undefined || finite(update.zIndex) !== undefined) &&
       validateCanvasNodePatch(update) === null
     );
   });

package/src/server/canvas-state.ts

@@ -364,6 +364,7 @@ export interface CanvasNodeUpdate {
   position?: { x: number; y: number };
   size?: { width: number; height: number };
   collapsed?: boolean;
+  zIndex?: number;
 }
 
 export type CanvasChangeType = 'pins' | 'nodes' | 'ax' | 'ax-timeline';
@@ -3220,6 +3221,9 @@ class CanvasStateManager {
       if (update.collapsed !== undefined && update.collapsed !== existing.collapsed) {
         nextPatch.collapsed = update.collapsed;
       }
+      if (update.zIndex !== undefined && update.zIndex !== existing.zIndex) {
+        nextPatch.zIndex = update.zIndex;
+      }
       if (Object.keys(nextPatch).length === 0) {
         skipped++;
         continue;
@@ -3977,4 +3981,5 @@ class CanvasStateManager {
 // Module-level singleton — safe because Bun is single-threaded and this
 // module is imported once per process. Agent tools and the HTTP server share
 // the same instance; no locking needed.
+export const boardCatalogEpoch = randomUUID();
 export const canvasState = new CanvasStateManager();