feat(diagram-engine): design tokens + role/group composition, engine-wide theming

Paper-summary posters previously required hand-written XML: every engine
box rendered identically (white, 11px), so anything whose meaning lives
in visual hierarchy came out flat. This makes presentation a first-class,
generalised part of the declaration - not a poster feature.

Structure/presentation separation, the same split HTML and CSS settled on:

- ROLE says what a node IS: banner, heading, body, callout, good, bad,
  metric, muted. Maps to a type scale and an emphasis (filled / tinted /
  outlined / ghost), never to a colour.
- GROUP says which semantic zone a node belongs to. Each distinct group
  name gets one hue ramp (tint / base / dark), assigned in document
  order. Promoted from a draw_graph-only field to BoxNode and GroupNode,
  round-tripped via dai_group.
- themedStyle(role, hue, kind) composes the two by rule - there is no
  per-combination table to extend, so a new diagram kind gets full
  theming by tagging nodes. The model never sees a hex value.

A heading container plus a group yields the tinted section panel with a
dark title; a grouped body box takes its zone's tint; verdict roles stay
green/red regardless of zone; the banner is the page's one dark field.

Also fixed, found while building the acceptance poster:

- autoBoxSize only counted explicit newlines, so a long single-line label
  wrapped to six lines in draw.io but got a one-line-tall box, and the
  text overflowed the cell.
- Marker stamping appended without replacing, so every render of a
  recovered style grew it by one duplicate dai_* token per key -
  unnoticed because draw.io resolves duplicates last-wins. dai_* keys
  are now replaced in place; mxGraph keys still append, because
  last-wins is load-bearing for container=1 normalisation.
- Banner/heading/metric roles stretch across their container's cross
  axis, the way a masthead spans its page.
- Prompt: a poster's banner IS its title (no set_title alongside), and
  sections get their colour by naming groups.

537 unit tests, 250-flowchart corpus still zero crossing arrows, 5 e2e
tests in a real browser. Verified visually: the Transformer-paper poster
renders with a navy masthead, three hue-coded section panels, metric,
verdict and callout boxes - all engine-computed geometry.

lib/diagram-engine/operations.ts

@@ -54,6 +54,27 @@ export const OperationSchema = z.discriminatedUnion("op", [
         id: z.string(),
         parent: z.string().optional(),
         label: z.string(),
+        role: z
+            .enum([
+                "banner",
+                "heading",
+                "body",
+                "callout",
+                "good",
+                "bad",
+                "metric",
+                "muted",
+            ])
+            .optional()
+            .describe(
+                "What this IS: banner=masthead, heading=section title, callout=must-not-miss, good/bad=verdict, metric=key number, muted=fine print. The theme decides how each looks",
+            ),
+        group: z
+            .string()
+            .optional()
+            .describe(
+                "Semantic zone name; nodes and panels sharing a group get the same hue from the engine's palette. Never pick colours",
+            ),
         fill: z
             .string()
             .optional()
@@ -98,6 +119,27 @@ export const OperationSchema = z.discriminatedUnion("op", [
         label: z
             .string()
             .describe("Frame title; empty string means invisible wrapper"),
+        role: z
+            .enum([
+                "banner",
+                "heading",
+                "body",
+                "callout",
+                "good",
+                "bad",
+                "metric",
+                "muted",
+            ])
+            .optional()
+            .describe(
+                "Section role: heading=titled tinted panel, banner=masthead strip, good/bad=verdict panel",
+            ),
+        group: z
+            .string()
+            .optional()
+            .describe(
+                "Semantic zone name; the panel and everything sharing this group take one hue",
+            ),
         dir: z.enum(["row", "col"]).describe("How children stack"),
         gname: z
             .string()
@@ -370,6 +412,8 @@ export function applyOperations(
                             : {}),
                         ...(op.fill ? { fill: op.fill } : {}),
                         ...(op.stroke ? { stroke: op.stroke } : {}),
+                        ...(op.role ? { role: op.role } : {}),
+                        ...(op.group ? { group: op.group } : {}),
                         ...cellOf(op),
                     }
                 else if (op.op === "add_container")
@@ -381,6 +425,8 @@ export function applyOperations(
                         dir: op.dir,
                         gap: op.gap ?? 20,
                         children: [],
+                        ...(op.role ? { role: op.role } : {}),
+                        ...(op.group ? { group: op.group } : {}),
                     }
                 else if (op.op === "add_grid")
                     node = {