@diagrammo/dgmo 0.6.0 → 0.6.1

package/src/infra/renderer.ts

@@ -16,6 +16,19 @@ import type { InfraRole } from './roles';
 import { parseInfra } from './parser';
 import { computeInfra } from './compute';
 import { layoutInfra } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -39,22 +52,7 @@ const NODE_PAD_BOTTOM = 10;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
-// Legend pill/capsule constants (matching org chart style)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_GROUP_GAP = 12;
-const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram
-const SPEED_BADGE_H_PAD = 5; // horizontal padding inside active speed badge
-const SPEED_BADGE_V_PAD = 3; // vertical padding inside active speed badge
-const SPEED_BADGE_GAP = 6;   // gap between speed option slots
+const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram — local, not shared
 
 // Health colors (from UX spec)
 const COLOR_HEALTHY = '#22c55e';
@@ -1311,21 +1309,6 @@ export function computeInfraLegendGroups(
   return groups;
 }
 
-/** Compute total width for the playback pill (speed only). */
-function computePlaybackWidth(playback: InfraPlaybackState | undefined): number {
-  if (!playback) return 0;
-  const pillWidth = 'Playback'.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-  if (!playback.expanded) return pillWidth;
-
-  let entriesW = 8; // gap after pill
-  entriesW += LEGEND_PILL_FONT_SIZE * 0.8 + 6; // play/pause
-  for (const s of playback.speedOptions) {
-    entriesW += `${s}x`.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2 + SPEED_BADGE_GAP;
-  }
-  return LEGEND_CAPSULE_PAD * 2 + pillWidth + entriesW;
-}
-
-/** Whether a separate Scenario pill should render. */
 function renderLegend(
   rootSvg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   legendGroups: InfraLegendGroup[],
@@ -1334,21 +1317,21 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeGroup: string | null,
-  playback?: InfraPlaybackState,
 ) {
-  if (legendGroups.length === 0 && !playback) return;
+  if (legendGroups.length === 0) return;
 
   const legendG = rootSvg.append('g')
     .attr('transform', `translate(0, ${legendY})`);
 
+  if (activeGroup) {
+    legendG.attr('data-legend-active', activeGroup.toLowerCase());
+  }
+
   // Compute centered positions
   const effectiveW = (g: InfraLegendGroup) =>
     activeGroup != null && g.name.toLowerCase() === activeGroup.toLowerCase() ? g.width : g.minifiedWidth;
-  const playbackW = computePlaybackWidth(playback);
-  const trailingGaps = legendGroups.length > 0 && playbackW > 0 ? LEGEND_GROUP_GAP : 0;
   const totalLegendW = legendGroups.reduce((s, g) => s + effectiveW(g), 0)
-    + (legendGroups.length - 1) * LEGEND_GROUP_GAP
-    + trailingGaps + playbackW;
+    + (legendGroups.length - 1) * LEGEND_GROUP_GAP;
   let cursorX = (totalWidth - totalLegendW) / 2;
 
   for (const group of legendGroups) {
@@ -1366,7 +1349,6 @@ function renderLegend(
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'infra-legend-group')
       .attr('data-legend-group', group.name.toLowerCase())
-      .attr('data-legend-type', group.type)
       .style('cursor', 'pointer');
 
     // Outer capsule background (active only)
@@ -1400,7 +1382,7 @@ function renderLegend(
         .attr('height', pillH)
         .attr('rx', pillH / 2)
         .attr('fill', 'none')
-        .attr('stroke', isDark ? mix(palette.textMuted, palette.bg, 50) : mix(palette.textMuted, palette.bg, 50))
+        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
         .attr('stroke-width', 0.75);
     }
 
@@ -1422,15 +1404,12 @@ function renderLegend(
         const entryG = gEl
           .append('g')
           .attr('class', 'infra-legend-entry')
-          .attr('data-legend-entry', entry.key)
-          .attr('data-legend-type', group.type)
+          .attr('data-legend-entry', entry.key.toLowerCase())
           .attr('data-legend-color', entry.color)
+          .attr('data-legend-type', group.type)
+          .attr('data-legend-tag-group', group.type === 'tag' ? (group.tagKey ?? '') : null)
           .style('cursor', 'pointer');
 
-        if (group.type === 'tag' && group.tagKey) {
-          entryG.attr('data-legend-tag-group', group.tagKey);
-        }
-
         entryG.append('circle')
           .attr('cx', entryX + LEGEND_DOT_R)
           .attr('cy', LEGEND_HEIGHT / 2)
@@ -1453,127 +1432,12 @@ function renderLegend(
     cursorX += effectiveW(group) + LEGEND_GROUP_GAP;
   }
 
-  // Playback pill — speed + pause only
-  if (playback) {
-    const isExpanded = playback.expanded;
-    const groupBg = isDark
-      ? mix(palette.bg, palette.text, 85)
-      : mix(palette.bg, palette.text, 92);
-
-    const pillLabel = 'Playback';
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-    const fullW = computePlaybackWidth(playback);
-
-    const pbG = legendG
-      .append('g')
-      .attr('transform', `translate(${cursorX}, 0)`)
-      .attr('class', 'infra-legend-group infra-playback-pill')
-      .style('cursor', 'pointer');
-
-    if (isExpanded) {
-      pbG.append('rect')
-        .attr('width', fullW)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
-    }
-
-    const pillXOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillH = LEGEND_HEIGHT - (isExpanded ? LEGEND_CAPSULE_PAD * 2 : 0);
-
-    pbG.append('rect')
-      .attr('x', pillXOff).attr('y', pillYOff)
-      .attr('width', pillWidth).attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isExpanded ? palette.bg : groupBg);
-
-    if (isExpanded) {
-      pbG.append('rect')
-        .attr('x', pillXOff).attr('y', pillYOff)
-        .attr('width', pillWidth).attr('height', pillH)
-        .attr('rx', pillH / 2)
-        .attr('fill', 'none')
-        .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-        .attr('stroke-width', 0.75);
-    }
-
-    pbG.append('text')
-      .attr('x', pillXOff + pillWidth / 2)
-      .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-      .attr('font-family', FONT_FAMILY)
-      .attr('font-size', LEGEND_PILL_FONT_SIZE)
-      .attr('font-weight', '500')
-      .attr('fill', isExpanded ? palette.text : palette.textMuted)
-      .attr('text-anchor', 'middle')
-      .text(pillLabel);
-
-    if (isExpanded) {
-      let entryX = pillXOff + pillWidth + 8;
-      const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
-
-      const ppLabel = playback.paused ? '▶' : '⏸';
-      pbG.append('text')
-        .attr('x', entryX).attr('y', entryY)
-        .attr('font-family', FONT_FAMILY)
-        .attr('font-size', LEGEND_PILL_FONT_SIZE)
-        .attr('fill', palette.textMuted)
-        .attr('data-playback-action', 'toggle-pause')
-        .style('cursor', 'pointer')
-        .text(ppLabel);
-      entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
-
-      for (const s of playback.speedOptions) {
-        const label = `${s}x`;
-        const isActive = playback.speed === s;
-        const slotW = label.length * LEGEND_ENTRY_FONT_W + SPEED_BADGE_H_PAD * 2;
-        const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
-        const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
-
-        // Wrap in <g> with data attrs so a single element carries the action,
-        // and both rect and text inherit the hit target cleanly.
-        const speedG = pbG.append('g')
-          .attr('data-playback-action', 'set-speed')
-          .attr('data-playback-value', String(s))
-          .style('cursor', 'pointer');
-
-        // Badge rect: filled for active, transparent hit-target for inactive
-        speedG.append('rect')
-          .attr('x', entryX)
-          .attr('y', badgeY)
-          .attr('width', slotW)
-          .attr('height', badgeH)
-          .attr('rx', badgeH / 2)
-          .attr('fill', isActive ? palette.primary : 'transparent');
-
-        speedG.append('text')
-          .attr('x', entryX + slotW / 2).attr('y', entryY)
-          .attr('font-family', FONT_FAMILY)
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('font-weight', isActive ? '600' : '400')
-          .attr('fill', isActive ? palette.bg : palette.textMuted)
-          .attr('text-anchor', 'middle')
-          .text(label);
-        entryX += slotW + SPEED_BADGE_GAP;
-      }
-    }
-
-    cursorX += fullW + LEGEND_GROUP_GAP;
-  }
-
 }
 
 // ============================================================
 // Main render
 // ============================================================
 
-export interface InfraPlaybackState {
-  expanded: boolean;
-  paused: boolean;
-  speed: number;
-  speedOptions: readonly number[];
-}
-
 export function renderInfra(
   container: HTMLDivElement,
   layout: InfraLayoutResult,
@@ -1584,7 +1448,7 @@ export function renderInfra(
   tagGroups?: InfraTagGroup[],
   activeGroup?: string | null,
   animate?: boolean,
-  playback?: InfraPlaybackState | null,
+  _playback?: unknown,
   expandedNodeIds?: Set<string> | null,
   exportMode?: boolean,
   collapsedNodes?: Set<string> | null,
@@ -1594,7 +1458,7 @@ export function renderInfra(
 
   // Build legend groups
   const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette, layout.edges);
-  const hasLegend = legendGroups.length > 0 || !!playback;
+  const hasLegend = legendGroups.length > 0;
   // In app mode (not export), legend is rendered as a separate fixed-size SVG
   const fixedLegend = !exportMode && hasLegend;
   const legendOffset = hasLegend && !fixedLegend ? LEGEND_HEIGHT : 0;
@@ -1707,9 +1571,9 @@ export function renderInfra(
         .attr('viewBox', `0 0 ${containerWidth} ${LEGEND_HEIGHT + LEGEND_FIXED_GAP}`)
         .attr('preserveAspectRatio', 'xMidYMid meet')
         .style('display', 'block');
-      renderLegend(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP / 2, palette, isDark, activeGroup ?? null, playback ?? undefined);
+      renderLegend(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP / 2, palette, isDark, activeGroup ?? null);
     } else {
-      renderLegend(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null, playback ?? undefined);
+      renderLegend(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null);
     }
   }
 }

package/src/infra/types.ts

@@ -99,13 +99,6 @@ export interface InfraTagGroup {
   lineNumber: number;
 }
 
-export interface InfraScenario {
-  name: string;
-  /** Node property overrides: nodeId -> { key: value } */
-  overrides: Record<string, Record<string, string | number>>;
-  lineNumber: number;
-}
-
 export interface ParsedInfra {
   type: 'infra';
   title: string | null;
@@ -115,7 +108,6 @@ export interface ParsedInfra {
   edges: InfraEdge[];
   groups: InfraGroup[];
   tagGroups: InfraTagGroup[];
-  scenarios: InfraScenario[];
   options: Record<string, string>;
   diagnostics: DgmoError[];
   error: string | null;
@@ -128,9 +120,7 @@ export interface ParsedInfra {
 export interface InfraComputeParams {
   rps?: number; // override edge rps (for slider)
   instanceOverrides?: Record<string, number>; // nodeId -> instance count override
-  scenario?: InfraScenario | null; // apply a named scenario's overrides
-  /** Per-node property overrides: nodeId -> { propertyKey: numericValue }.
-   *  Applied after scenario overrides. Lets sliders adjust cache-hit, etc. */
+  /** Per-node property overrides: nodeId -> { propertyKey: numericValue }. */
   propertyOverrides?: Record<string, Record<string, number>>;
   /** Set of group IDs that should be treated as collapsed (virtual nodes). */
   collapsedGroups?: Set<string>;

package/src/initiative-status/layout.ts

@@ -265,16 +265,19 @@ export function layoutInitiativeStatus(
       }
     } else if (isYDisplaced) {
       // 3-point diagonal: exit bottom/top-center of source, enter left-center of target.
-      // Using src.x (center) not exitX (right side) avoids overlapping the parallel bundle.
+      // yOffset applied as X-spread at exit AND Y-spread at entry so parallel edges maintain
+      // a consistent visual gap along their entire length (not just at one end).
       const exitY = tgt.y > src.y + NODESEP
         ? src.y + src.height / 2   // target is below — exit bottom
         : src.y - src.height / 2;  // target is above — exit top
-      const midX = Math.max(src.x + 1, (src.x + enterX) / 2); // +1 ensures strictly increasing X
-      const midY = (exitY + tgt.y) / 2;
+      const spreadExitX = src.x + yOffset;
+      const spreadEntryY = tgt.y + yOffset;
+      const midX = (spreadExitX + enterX) / 2; // always monotone ✓ (yOffset << node gap)
+      const midY = (exitY + spreadEntryY) / 2;
       points = [
-        { x: src.x,  y: exitY },
-        { x: midX,   y: midY },
-        { x: enterX, y: tgt.y },
+        { x: spreadExitX, y: exitY },
+        { x: midX,        y: midY },
+        { x: enterX,      y: spreadEntryY },
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       // 4-point elbow: adjacent-rank forward edges (unchanged)

package/src/kanban/renderer.ts

@@ -10,6 +10,13 @@ import { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedKanban, KanbanColumn, KanbanCard, KanbanTagGroup } from './types';
 import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_CAPSULE_PAD,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -36,10 +43,6 @@ const CARD_META_FONT_SIZE = 10;
 const WIP_FONT_SIZE = 10;
 const COLUMN_RADIUS = 8;
 const COLUMN_HEADER_RADIUS = 8;
-const LEGEND_HEIGHT = 28;
-const LEGEND_FONT_SIZE = 11;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
 
 // ============================================================
 // Tag color resolution
@@ -106,9 +109,8 @@ function computeLayout(
   parsed: ParsedKanban,
   _palette: PaletteColors
 ): { columns: ColumnLayout[]; totalWidth: number; totalHeight: number } {
-  // Title and legend share one row
-  const hasHeader = !!parsed.title || parsed.tagGroups.length > 0;
-  const headerHeight = hasHeader ? Math.max(TITLE_HEIGHT, LEGEND_HEIGHT) + 8 : 0;
+  // Title row
+  const headerHeight = parsed.title ? TITLE_HEIGHT + 8 : 0;
   const startY = DIAGRAM_PADDING + headerHeight;
 
   // Estimate column widths based on content
@@ -189,7 +191,8 @@ function computeLayout(
   }
 
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING + legendSpace;
 
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
@@ -237,18 +240,19 @@ export function renderKanban(
       .text(parsed.title);
   }
 
-  // Legend (same row as title)
+  // Legend (bottom of diagram)
   if (parsed.tagGroups.length > 0) {
-    const legendY = DIAGRAM_PADDING;
-    // Start legend after title text
-    const titleTextWidth = parsed.title
-      ? parsed.title.length * TITLE_FONT_SIZE * 0.6 + 16
-      : 0;
-    let legendX = DIAGRAM_PADDING + titleTextWidth;
+    const legendY = height - LEGEND_HEIGHT;
+    let legendX = DIAGRAM_PADDING;
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
-    const capsulePad = 4;
+    const capsulePad = LEGEND_CAPSULE_PAD;
+
+    const legendContainer = svg.append('g').attr('class', 'kanban-legend');
+    if (activeTagGroup) {
+      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
 
     for (const group of parsed.tagGroups) {
       const isActive =
@@ -257,7 +261,7 @@ export function renderKanban(
       // When a group is active, skip all other groups entirely
       if (activeTagGroup != null && !isActive) continue;
 
-      const pillTextWidth = group.name.length * LEGEND_FONT_SIZE * 0.6;
+      const pillTextWidth = group.name.length * LEGEND_PILL_FONT_SIZE * 0.6;
       const pillWidth = pillTextWidth + 16;
 
       // Measure total capsule width for active groups (pill + entries)
@@ -272,7 +276,7 @@ export function renderKanban(
 
       // Outer capsule background for active group
       if (isActive) {
-        svg
+        legendContainer
           .append('rect')
           .attr('x', legendX)
           .attr('y', legendY)
@@ -286,7 +290,7 @@ export function renderKanban(
 
       // Pill background
       const pillBg = isActive ? palette.bg : groupBg;
-      svg
+      legendContainer
         .append('rect')
         .attr('x', pillX)
         .attr('y', legendY + (isActive ? capsulePad : 0))
@@ -298,7 +302,7 @@ export function renderKanban(
         .attr('data-legend-group', group.name.toLowerCase());
 
       if (isActive) {
-        svg
+        legendContainer
           .append('rect')
           .attr('x', pillX)
           .attr('y', legendY + capsulePad)
@@ -311,11 +315,11 @@ export function renderKanban(
       }
 
       // Pill text
-      svg
+      legendContainer
         .append('text')
         .attr('x', pillX + pillWidth / 2)
-        .attr('y', legendY + LEGEND_HEIGHT / 2 + LEGEND_FONT_SIZE / 2 - 2)
-        .attr('font-size', LEGEND_FONT_SIZE)
+        .attr('y', legendY + LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+        .attr('font-size', LEGEND_PILL_FONT_SIZE)
         .attr('font-weight', '500')
         .attr('fill', isActive ? palette.text : palette.textMuted)
         .attr('text-anchor', 'middle')
@@ -325,7 +329,7 @@ export function renderKanban(
       if (isActive) {
         let entryX = pillX + pillWidth + 4;
         for (const entry of group.entries) {
-          const entryG = svg
+          const entryG = legendContainer
             .append('g')
             .attr('data-legend-entry', entry.value.toLowerCase())
             .style('cursor', 'pointer');

package/src/org/renderer.ts

@@ -10,6 +10,23 @@ import type { ParsedOrg } from './parser';
 import type { OrgLayoutResult, OrgLayoutNode } from './layout';
 import { parseOrg } from './parser';
 import { layoutOrg } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+  LEGEND_EYE_SIZE,
+  LEGEND_EYE_GAP,
+  EYE_OPEN_PATH,
+  EYE_CLOSED_PATH,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -37,27 +54,7 @@ const CONTAINER_HEADER_HEIGHT = 28;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
-// Legend (kanban-style pills)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_GROUP_GAP = 12;
-const LEGEND_EYE_SIZE = 14;
-const LEGEND_EYE_GAP = 6;
-const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram
-
-// Eye icon SVG paths (14×14 viewBox)
-const EYE_OPEN_PATH =
-  'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
-const EYE_CLOSED_PATH =
-  'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
+const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram — local, not shared
 
 // ============================================================
 // Color helpers
@@ -117,7 +114,7 @@ export function renderOrg(
 
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const legendOnly = layout.nodes.length === 0;
-  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
+  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
   const hasLegend = layout.legend.length > 0;
 
   // In app mode (not export), render the legend at a fixed size outside the
@@ -512,7 +509,7 @@ export function renderOrg(
     }
 
     // Choose parent: unscaled group for fixedLegend, contentG for legend-only
-    const legendParent = fixedLegend
+    const legendParentBase = fixedLegend
       ? svg
           .append('g')
           .attr('class', 'org-legend-fixed')
@@ -523,6 +520,10 @@ export function renderOrg(
               : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
           )
       : contentG;
+    const legendParent = legendParentBase;
+    if (fixedLegend && activeTagGroup) {
+      legendParentBase.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
 
     for (const group of visibleGroups) {
       const isActive =

package/src/render.ts

@@ -52,7 +52,7 @@ export async function render(
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
     c4Container?: string;
-    scenario?: string;
+    tagGroup?: string;
   },
 ): Promise<string> {
   const theme = options?.theme ?? 'light';
@@ -75,6 +75,6 @@ export async function render(
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
-    scenario: options?.scenario,
+    tagGroup: options?.tagGroup,
   });
 }

package/src/sequence/renderer.ts

@@ -25,6 +25,19 @@ import type {
 import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
 import { resolveSequenceTags } from './tag-resolution';
 import type { ResolvedTagMap } from './tag-resolution';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Layout Constants
@@ -54,19 +67,6 @@ const NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD)
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
 
-// Legend rendering constants (consistent with org chart legend)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_GROUP_GAP = 12;
-const LEGEND_BOTTOM_GAP = 8;
 
 
 function wrapTextLines(text: string, maxChars: number): string[] {
@@ -1282,12 +1282,10 @@ export function renderSequenceDiagram(
 
   // Compute cumulative Y positions for each step, with section dividers as stable anchors
   const titleOffset = title ? TITLE_HEIGHT : 0;
-  const legendOffset =
-    parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + LEGEND_BOTTOM_GAP : 0;
   const groupOffset =
     groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY =
-    TOP_MARGIN + titleOffset + legendOffset + PARTICIPANT_Y_OFFSET + groupOffset;
+    TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
   const hasActors = participants.some((p) => p.type === 'actor');
   const messageStartOffset = MESSAGE_START_OFFSET + (hasActors ? 20 : 0);
@@ -1388,11 +1386,13 @@ export function renderSequenceDiagram(
     participants.length * PARTICIPANT_GAP,
     PARTICIPANT_BOX_WIDTH + 40
   );
-  const totalHeight =
+  const contentHeight =
     participantStartY +
     PARTICIPANT_BOX_HEIGHT +
     Math.max(lifelineLength, 40) +
     40;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = contentHeight + legendSpace;
 
   const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
@@ -1571,7 +1571,7 @@ export function renderSequenceDiagram(
 
   // Render legend pills for tag groups
   if (parsed.tagGroups.length > 0) {
-    const legendY = TOP_MARGIN + titleOffset;
+    const legendY = contentHeight;
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
@@ -1615,8 +1615,13 @@ export function renderSequenceDiagram(
       (legendItems.length - 1) * LEGEND_GROUP_GAP;
     let legendX = (svgWidth - totalLegendWidth) / 2;
 
+    const legendContainer = svg.append('g').attr('class', 'sequence-legend');
+    if (activeTagGroup) {
+      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
+
     for (const item of legendItems) {
-      const gEl = svg
+      const gEl = legendContainer
         .append('g')
         .attr('transform', `translate(${legendX}, ${legendY})`)
         .attr('class', 'sequence-legend-group')