@diagrammo/dgmo 0.30.0 → 0.31.0

package/src/colors.ts

@@ -60,6 +60,28 @@ export const RECOGNIZED_COLOR_NAMES = Object.freeze([
   'white',
 ] as const);
 
+/**
+ * The canonical order in which the categorical (non-neutral) color names are
+ * auto-assigned: tag/group swatches (`autoTagColorCycle`) and data-chart
+ * series colors (`getSeriesColors`) both derive their rotation from this list.
+ *
+ * Seeded with the RGB primaries (`red, green, blue`) for an unmistakable first
+ * three, then each subsequent hue is chosen to fill the widest remaining gap on
+ * the color wheel — maximizing contrast between adjacent swatches. Neutrals
+ * (`gray`/`black`/`white`) are intentionally excluded so auto-picked colors
+ * always read as distinct legend swatches.
+ */
+export const CATEGORICAL_COLOR_ORDER = Object.freeze([
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'teal',
+  'purple',
+  'orange',
+  'cyan',
+] as const);
+
 /**
  * Returns true iff `name` is one of the 11 recognized DGMO color names.
  */

package/src/er/renderer.ts

@@ -46,8 +46,10 @@ const MAX_SCALE = 3;
 const TABLE_FONT_SIZE = 13;
 const COLUMN_FONT_SIZE = 11;
 const EDGE_LABEL_FONT_SIZE = 11;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 const MEMBER_LINE_HEIGHT = 18;
 const COMPARTMENT_PADDING_Y = 8;
 const MEMBER_PADDING_X = 10;

package/src/graph/flowchart-renderer.ts

@@ -36,8 +36,10 @@ const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
 const NODE_FONT_SIZE = 13;
 const EDGE_LABEL_FONT_SIZE = 11;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 const ARROWHEAD_W = 10;
 const ARROWHEAD_H = 7;
 const IO_SKEW = 15;

package/src/graph/state-renderer.ts

@@ -37,8 +37,10 @@ const MAX_SCALE = 3;
 const NODE_FONT_SIZE = 13;
 const EDGE_LABEL_FONT_SIZE = 11;
 const GROUP_LABEL_FONT_SIZE = 11;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 const ARROWHEAD_W = 10;
 const ARROWHEAD_H = 7;
 const PSEUDOSTATE_RADIUS = 10;

package/src/infra/renderer.ts

@@ -57,20 +57,24 @@ import { ScaleContext } from '../utils/scaling';
 // ============================================================
 
 const NODE_FONT_SIZE = 13;
+// Intentional deviation (conventions §1): infra uses denser meta rows
+// (10px font / 14px line height) than the 11/16 default.
 const META_FONT_SIZE = 10;
 const META_LINE_HEIGHT = 14;
 const EDGE_LABEL_FONT_SIZE = 11;
 const GROUP_LABEL_FONT_SIZE = 14;
 const NODE_BORDER_RADIUS = 8;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+  COLLAPSE_BAR_HEIGHT,
+  COLLAPSE_BAR_INSET,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 const OVERLOAD_STROKE_WIDTH = 3;
 const ROLE_DOT_RADIUS = 3;
 const NODE_HEADER_HEIGHT = 28;
 const NODE_SEPARATOR_GAP = 4;
 const NODE_PAD_BOTTOM = 10;
-const COLLAPSE_BAR_HEIGHT = 6;
-const COLLAPSE_BAR_INSET = 0;
 
 const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram — local, not shared
 const SPEED_BADGE_H_PAD = 5; // horizontal padding inside active speed badge

package/src/journey-map/parser.ts

@@ -184,7 +184,21 @@ export function parseJourneyMap(
             }
           }
         } else {
-          personaName = afterKeyword;
+          // Same-line form (pipes removed in 0.18.0): peel a trailing
+          // `color: <token>` off the rest-of-line persona name.
+          const colorMatch = afterKeyword.match(/^(.+?)\s+color:\s*(\S+)$/i);
+          if (colorMatch) {
+            personaName = colorMatch[1]!.trim();
+            personaColor =
+              resolveColorWithDiagnostic(
+                colorMatch[2]!,
+                lineNumber,
+                result.diagnostics,
+                palette
+              ) ?? undefined;
+          } else {
+            personaName = afterKeyword;
+          }
         }
 
         if (!personaName) {

package/src/journey-map/renderer.ts

@@ -52,7 +52,7 @@ export interface JourneyMapInteractiveOptions {
 // Match kanban styling constants
 const DIAGRAM_PADDING = 20;
 const PADDING = DIAGRAM_PADDING;
-const CARD_RADIUS = 6;
+import { CARD_RADIUS } from '../utils/visual-conventions'; // shared (Story 111.1)
 const CARD_PADDING_X = 10;
 const CARD_PADDING_Y = 6;
 const CARD_HEADER_HEIGHT = 24;

package/src/kanban/renderer.ts

@@ -55,7 +55,7 @@ const CARD_HEADER_HEIGHT = 24;
 const CARD_META_LINE_HEIGHT = 14;
 const CARD_SEPARATOR_GAP = 4;
 const CARD_GAP = 8;
-const CARD_RADIUS = 6;
+import { CARD_RADIUS } from '../utils/visual-conventions'; // shared (Story 111.1)
 const CARD_PADDING_X = 10;
 const CARD_PADDING_Y = 6;
 const CARD_STROKE_WIDTH = 1.5;

package/src/map/renderer.ts

@@ -219,6 +219,15 @@ function appendWaterLines(
   }
 }
 
+// Per-render namespace for SVG def ids (clipPaths, masks, filters, markers, the
+// `<use>`-shared coast path). SVG `url(#id)` / `href="#id"` resolve document-
+// globally to the FIRST matching id, so when several maps are inlined on one
+// page (the docs gallery, an MDX page) shared constant ids made every later map
+// reference the first map's defs — its coast `<use>` ghosted through. A
+// monotonic per-render suffix makes every render's ids unique. NOT reset between
+// renders, so re-renders (legend flips) and same-page siblings never collide.
+let mapInstanceCounter = 0;
+
 /** Render a resolved map into `container` (d3-selection appends an `<svg>`). */
 export function renderMap(
   container: HTMLDivElement,
@@ -283,6 +292,10 @@ export function renderMap(
   // arrowhead up to a giant wedge. The size grows gently with the line width —
   // enough to stay distinct from the stroke — but is firmly capped.
   const defs = svg.append('defs');
+  // Namespace every def id minted below so multiple maps on one page don't share
+  // `url(#…)` targets (see mapInstanceCounter).
+  const uid = mapInstanceCounter++;
+  const nid = (base: string): string => `${base}__m${uid}`;
   // Dampened: ~8px at the thinnest leg, easing toward a 15px cap as legs widen.
   const arrowSize = (w: number): number => Math.min(15, 7 + w * 0.95);
 
@@ -356,8 +369,8 @@ export function renderMap(
   // sub-pixel + low-contrast so the texture stays faint. Decorative — no data attrs.
   if (layout.relief.length && layout.reliefHatch) {
     const h = layout.reliefHatch;
-    const rangeClipId = 'dgmo-relief-clip';
-    const landClipId = 'dgmo-relief-land';
+    const rangeClipId = nid('dgmo-relief-clip');
+    const landClipId = nid('dgmo-relief-land');
     const rangeClip = defs.append('clipPath').attr('id', rangeClipId);
     for (const s of layout.relief) rangeClip.append('path').attr('d', s.d);
     const landClip = defs.append('clipPath').attr('id', landClipId);
@@ -402,7 +415,7 @@ export function renderMap(
   // §24B.2, ADR-1/3/6.
   if (layout.coastlineStyle) {
     const cs = layout.coastlineStyle;
-    const maskId = 'dgmo-map-water-mask';
+    const maskId = nid('dgmo-map-water-mask');
     const mask = defs
       .append('mask')
       .attr('id', maskId)
@@ -472,7 +485,7 @@ export function renderMap(
     appendWaterLines(
       gWater,
       defs,
-      'dgmo-map-coast',
+      nid('dgmo-map-coast'),
       // Pass the canvas frame so edges collinear with it (the antimeridian on a
       // world map, regional clipExtent cuts) don't get ringed as fake coast —
       // land runs cleanly to the render-area edge.
@@ -565,7 +578,7 @@ export function renderMap(
     (l) => l.poiId !== undefined && !l.hidden
   );
   if (poiLabels.length) {
-    const patchBlurId = 'dgmo-map-label-patch-blur';
+    const patchBlurId = nid('dgmo-map-label-patch-blur');
     // Soft falloff so the patch dissolves into the surrounding basemap instead of
     // ending on a hard edge. Tuned at the 11px label font. One shared filter for
     // every patch group.
@@ -690,7 +703,7 @@ export function renderMap(
       // Always-on patch for labels that are visible at rest (non-cluster members).
       buildPatch(
         poiLabels.filter((l) => l.clusterMember === undefined),
-        'dgmo-map-label-patch'
+        nid('dgmo-map-label-patch')
       );
       // Per-cluster patches, hidden until the fan expands.
       const byCluster = new Map<string, typeof poiLabels>();
@@ -705,11 +718,11 @@ export function renderMap(
       // data-cluster-deco attribute instead.
       let ci = 0;
       for (const [cid, labs] of byCluster)
-        buildPatch(labs, `dgmo-map-label-patch-c${ci++}`, cid);
+        buildPatch(labs, nid(`dgmo-map-label-patch-c${ci++}`), cid);
     } else {
       // Export / `no-cluster-pois`: fan is permanently open → one always-on patch
       // over every POI label.
-      buildPatch(poiLabels, 'dgmo-map-label-patch');
+      buildPatch(poiLabels, nid('dgmo-map-label-patch'));
     }
   }
 
@@ -734,7 +747,7 @@ export function renderMap(
       // Neighbour land (Canada beside Alaska) clipped to this box, behind the
       // state — so a land border reads as land rather than sprouting coast rings.
       if (box.contextLand) {
-        const clipId = `dgmo-map-inset-clip-${bi}`;
+        const clipId = nid(`dgmo-map-inset-clip-${bi}`);
         defs.append('clipPath').attr('id', clipId).append('path').attr('d', d);
         insetG
           .append('path')
@@ -751,7 +764,7 @@ export function renderMap(
     // same way. Inside the inset group so it composites over the box fills.
     if (layout.coastlineStyle) {
       const cs = layout.coastlineStyle;
-      const maskId = 'dgmo-map-inset-water-mask';
+      const maskId = nid('dgmo-map-inset-water-mask');
       const mask = defs
         .append('mask')
         .attr('id', maskId)
@@ -786,7 +799,7 @@ export function renderMap(
             .append('path')
             .attr('d', box.contextLand.d)
             .attr('fill', 'black')
-            .attr('clip-path', `url(#dgmo-map-inset-clip-${bi})`);
+            .attr('clip-path', `url(#${nid(`dgmo-map-inset-clip-${bi}`)})`);
       });
       for (const r of layout.insetRegions)
         if (r.id !== 'lake')
@@ -798,7 +811,7 @@ export function renderMap(
       // which side reads as water, but SVG strokes still extend stroke-width/2
       // past their path, so without this the seaward rings bleed over the box
       // border. Union of all inset quads = one clipPath shared by the group.
-      const clipId = 'dgmo-map-inset-water-clip';
+      const clipId = nid('dgmo-map-inset-water-clip');
       const clip = defs.append('clipPath').attr('id', clipId);
       for (const box of layout.insets) {
         const d =
@@ -820,7 +833,7 @@ export function renderMap(
       appendWaterLines(
         gInsetWater,
         defs,
-        'dgmo-map-inset-coast',
+        nid('dgmo-map-inset-coast'),
         coastlineOuterRings(layout.insetRegions, cs.minExtent),
         cs,
         layout.background
@@ -895,7 +908,7 @@ export function renderMap(
     // stroke is enough for the line widths legs use.
     wireSync(p, leg.lineNumber);
     if (leg.arrow) {
-      const id = `dgmo-map-arrow-${i}`;
+      const id = nid(`dgmo-map-arrow-${i}`);
       const s = arrowSize(leg.width);
       defs
         .append('marker')

package/src/mindmap/renderer.ts

@@ -35,9 +35,11 @@ const LABEL_LINE_HEIGHT = 18;
 const DESC_LINE_HEIGHT = 14;
 const NODE_RADIUS = 6;
 const ROOT_STROKE_WIDTH = 2.5;
-const NODE_STROKE_WIDTH = 1.5;
-const EDGE_STROKE_WIDTH = 1.5;
-const COLLAPSE_BAR_HEIGHT = 6;
+import {
+  NODE_STROKE_WIDTH,
+  EDGE_STROKE_WIDTH,
+  COLLAPSE_BAR_HEIGHT,
+} from '../utils/visual-conventions'; // shared (Story 111.1)
 
 function nodeFill(
   palette: PaletteColors,

package/src/org/renderer.ts

@@ -26,6 +26,7 @@ import {
   EYE_CLOSED_PATH,
 } from '../utils/legend-constants';
 import { renderIntegratedLegend } from '../utils/legend-integration';
+import { renderNodeCard, renderCollapseBar } from '../utils/card';
 import { measureText } from '../utils/text-measure';
 import { getMaxLegendReservedHeight } from '../utils/legend-layout';
 import type { LegendConfig } from '../utils/legend-types';
@@ -38,23 +39,25 @@ const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
 import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 const TITLE_HEIGHT = 30;
-const LABEL_FONT_SIZE = 13;
-const META_FONT_SIZE = 11;
-const META_LINE_HEIGHT = 16;
-const HEADER_HEIGHT = 28;
-const SEPARATOR_GAP = 6;
-const EDGE_STROKE_WIDTH = 1.5;
-const NODE_STROKE_WIDTH = 1.5;
-const CARD_RADIUS = 6;
-const CONTAINER_RADIUS = 8;
-const CONTAINER_LABEL_FONT_SIZE = 13;
-const CONTAINER_META_FONT_SIZE = 11;
-const CONTAINER_META_LINE_HEIGHT = 16;
-const CONTAINER_HEADER_HEIGHT = 28;
-
-// Collapsed-node accent bar
-const COLLAPSE_BAR_HEIGHT = 6;
-const COLLAPSE_BAR_INSET = 0;
+// Shared card / group / collapse constants (Story 111.1). org matches every
+// convention default, so it imports the full set.
+import {
+  LABEL_FONT_SIZE,
+  META_FONT_SIZE,
+  META_LINE_HEIGHT,
+  HEADER_HEIGHT,
+  SEPARATOR_GAP,
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH,
+  CARD_RADIUS,
+  CONTAINER_RADIUS,
+  CONTAINER_LABEL_FONT_SIZE,
+  CONTAINER_META_FONT_SIZE,
+  CONTAINER_META_LINE_HEIGHT,
+  CONTAINER_HEADER_HEIGHT,
+  COLLAPSE_BAR_HEIGHT,
+  COLLAPSE_BAR_INSET,
+} from '../utils/visual-conventions';
 
 // Ancestor breadcrumb trail (focus mode)
 const ANCESTOR_DOT_R = 4;
@@ -360,21 +363,16 @@ export function renderOrg(
     }
 
     if (!exportDims && c.hiddenCount && c.hiddenCount > 0) {
-      const clipId = `clip-${c.nodeId}`;
-      cG.append('clipPath')
-        .attr('id', clipId)
-        .append('rect')
-        .attr('width', c.width)
-        .attr('height', c.height)
-        .attr('rx', sContainerRadius);
-      cG.append('rect')
-        .attr('x', sCollapseBarInset)
-        .attr('y', c.height - sCollapseBarHeight)
-        .attr('width', c.width - sCollapseBarInset * 2)
-        .attr('height', sCollapseBarHeight)
-        .attr('fill', containerStroke(palette, colorOff ? undefined : c.color))
-        .attr('clip-path', `url(#${clipId})`)
-        .attr('class', 'org-collapse-bar');
+      renderCollapseBar(cG, {
+        width: c.width,
+        height: c.height,
+        barHeight: sCollapseBarHeight,
+        inset: sCollapseBarInset,
+        rx: sContainerRadius,
+        fill: containerStroke(palette, colorOff ? undefined : c.color),
+        clipId: `clip-${c.nodeId}`,
+        className: 'org-collapse-bar',
+      });
     }
 
     // Focus icon (hover-reveal, interactive only) — for non-root containers with children
@@ -489,103 +487,52 @@ export function renderOrg(
     );
     const stroke = nodeStroke(palette, colorOff ? undefined : node.color);
 
-    const rect = nodeG
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('width', node.width)
-      .attr('height', node.height)
-      .attr('rx', sCardRadius)
-      .attr('fill', fill)
-      .attr('stroke', stroke)
-      .attr('stroke-width', sNodeStrokeWidth);
-
-    if (node.isContainer) {
-      rect.attr('stroke-dasharray', '6 3');
-    }
-
     const labelColor = contrastText(
       fill,
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    nodeG
-      .append('text')
-      .attr('x', node.width / 2)
-      .attr('y', sHeaderHeight / 2 + sLabelFontSize / 2 - 2)
-      .attr('text-anchor', 'middle')
-      .attr('fill', labelColor)
-      .attr('font-size', sLabelFontSize)
-      .attr('font-weight', 'bold')
-      .text(node.label);
 
     const metaEntries = Object.entries(node.metadata);
-    if (metaEntries.length > 0) {
-      nodeG
-        .append('line')
-        .attr('x1', 0)
-        .attr('y1', sHeaderHeight)
-        .attr('x2', node.width)
-        .attr('y2', sHeaderHeight)
-        .attr('stroke', solid ? labelColor : stroke)
-        .attr('stroke-opacity', 0.3)
-        .attr('stroke-width', 1);
-
-      const metaDisplayKeys = metaEntries.map(
-        ([k]) => displayNames.get(k) ?? k
-      );
-      const maxKeyWidth = Math.max(
-        ...metaDisplayKeys.map((k) => measureText(`${k}: `, sMetaFontSize))
-      );
-      const valueX = 10 + maxKeyWidth;
-
-      const metaStartY = sHeaderHeight + sSeparatorGap + sMetaFontSize;
-      for (let i = 0; i < metaEntries.length; i++) {
-        const [, value] = metaEntries[i]!;
-        const displayKey = metaDisplayKeys[i]!;
-        const rowY = metaStartY + i * sMetaLineHeight;
-
-        nodeG
-          .append('text')
-          .attr('x', 10)
-          .attr('y', rowY)
-          .attr('fill', labelColor)
-          .attr('font-size', sMetaFontSize)
-          .text(`${displayKey}: `);
-
-        nodeG
-          .append('text')
-          .attr('x', valueX)
-          .attr('y', rowY)
-          .attr('fill', labelColor)
-          .attr('font-size', sMetaFontSize)
-          .text(value);
-      }
-    }
+    renderNodeCard(nodeG, {
+      width: node.width,
+      height: node.height,
+      rx: sCardRadius,
+      fill,
+      stroke,
+      strokeWidth: sNodeStrokeWidth,
+      ...(node.isContainer && { dashed: true }),
+      label: node.label,
+      labelColor,
+      labelFontSize: sLabelFontSize,
+      headerHeight: sHeaderHeight,
+      ...(metaEntries.length > 0 && {
+        meta: {
+          rows: metaEntries.map(
+            ([k, value]) => [displayNames.get(k) ?? k, value] as const
+          ),
+          fontSize: sMetaFontSize,
+          lineHeight: sMetaLineHeight,
+          separatorGap: sSeparatorGap,
+          separatorColor: solid ? labelColor : stroke,
+          textColor: labelColor,
+        },
+      }),
+    });
 
     if (!exportDims && node.hiddenCount && node.hiddenCount > 0) {
-      const clipId = `clip-${node.id}`;
-      nodeG
-        .append('clipPath')
-        .attr('id', clipId)
-        .append('rect')
-        .attr('width', node.width)
-        .attr('height', node.height)
-        .attr('rx', sCardRadius);
-      nodeG
-        .append('rect')
-        .attr('x', sCollapseBarInset)
-        .attr('y', node.height - sCollapseBarHeight)
-        .attr('width', node.width - sCollapseBarInset * 2)
-        .attr('height', sCollapseBarHeight)
-        .attr(
-          'fill',
-          solid
-            ? labelColor
-            : nodeStroke(palette, colorOff ? undefined : node.color)
-        )
-        .attr('clip-path', `url(#${clipId})`)
-        .attr('class', 'org-collapse-bar');
+      renderCollapseBar(nodeG, {
+        width: node.width,
+        height: node.height,
+        barHeight: sCollapseBarHeight,
+        inset: sCollapseBarInset,
+        rx: sCardRadius,
+        fill: solid
+          ? labelColor
+          : nodeStroke(palette, colorOff ? undefined : node.color),
+        clipId: `clip-${node.id}`,
+        className: 'org-collapse-bar',
+      });
     }
 
     // Focus icon (hover-reveal, interactive only) — for non-root nodes with children

package/src/palettes/color-utils.ts

@@ -1,3 +1,4 @@
+import { CATEGORICAL_COLOR_ORDER } from '../colors';
 import type { PaletteColors } from './types';
 
 // ============================================================
@@ -318,10 +319,14 @@ export function shapeFill(
 // Series Colors
 // ============================================================
 
-/** Derive the 8-color series rotation from a palette's named colors. */
+/**
+ * Derive the 8-color series rotation from a palette's named colors, in the
+ * shared {@link CATEGORICAL_COLOR_ORDER} (RGB-seeded, max-contrast). Tag
+ * swatches and chart series colors thus share one canonical rotation.
+ */
 export function getSeriesColors(palette: PaletteColors): string[] {
   const c = palette.colors;
-  return [c.blue, c.green, c.yellow, c.orange, c.purple, c.red, c.teal, c.cyan];
+  return CATEGORICAL_COLOR_ORDER.map((name) => c[name]!);
 }
 
 /**

package/src/pert/renderer.ts

@@ -87,7 +87,16 @@ const NODE_CELL_FONT_SIZE = 11;
 // row holds the name and is taller than the corner cells so the name
 // reads as the primary label (mirroring textbook proportions).
 const NODE_RADIUS = 6;
-const NODE_STROKE_WIDTH = 1.5;
+// Shared card / group / collapse constants (Story 111.1). The explanatory
+// comments below stay with the renderer; the values now live in one module.
+import {
+  NODE_STROKE_WIDTH,
+  EDGE_STROKE_WIDTH,
+  CONTAINER_RADIUS,
+  CONTAINER_LABEL_FONT_SIZE,
+  CONTAINER_HEADER_HEIGHT,
+  COLLAPSE_BAR_HEIGHT,
+} from '../utils/visual-conventions';
 
 // Analysis-block chrome (Summary / Activity Risk / Completion / Field
 // labels). These sit BELOW the diagram and shouldn't compete with it
@@ -113,18 +122,14 @@ const NODE_BOTTOM_ROW_HEIGHT = 26;
 // stroke and a matching red arrowhead because the critical path is the
 // central concept of a PERT chart, and a binary `data-critical` attr
 // alone left it visually invisible to readers.
-const EDGE_STROKE_WIDTH = 1.5;
 const ARROWHEAD_W = 10;
 const ARROWHEAD_H = 7;
 // Group-rect treatment per §2: neutral surface fill on textMuted stroke,
 // solid border, rx=8, top-center 13pt 'bold' label inside a reserved
 // 28px header band — exactly matching org's container recipe.
-const CONTAINER_RADIUS = 8;
-const CONTAINER_LABEL_FONT_SIZE = 13;
-const CONTAINER_HEADER_HEIGHT = 28;
-// Collapse-bar height — see conventions doc §3 Pattern A/B (matches
-// org's `COLLAPSE_BAR_HEIGHT`). Universal "this is collapsed" signal.
-const COLLAPSE_BAR_HEIGHT = 6;
+// CONTAINER_RADIUS/LABEL_FONT_SIZE/HEADER_HEIGHT + COLLAPSE_BAR_HEIGHT now
+// imported from utils/visual-conventions (Story 111.1). Group-rect treatment
+// per §2; collapse-bar height matches org per §3 Pattern A/B.
 // Always-on fade applied to bottom-20% (by duration) activity nodes
 // so the eye is drawn to the longer, schedule-dominating work first.
 // Less aggressive than FADE_OPACITY because these cards still need to

package/src/raci/renderer.ts

@@ -267,7 +267,7 @@ const TINT_PCT = 25;
  * kanban `CARD_RADIUS = 6`). Keeps RACI markers visually consistent
  * with nodes elsewhere in the diagram language.
  */
-const NODE_STROKE_WIDTH = 1.5;
+import { NODE_STROKE_WIDTH } from '../utils/visual-conventions'; // shared (Story 111.1)
 const NODE_RADIUS = 6;
 
 /**