@diagrammo/dgmo 0.6.2 → 0.7.0

package/src/initiative-status/renderer.ts

@@ -5,11 +5,26 @@
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
+import { runInExportContainer, extractExportSvg } from '../utils/export-container';
+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';
 import { contrastText, mix } from '../palettes/color-utils';
+import type { TagGroup } from '../utils/tag-groups';
 import type { PaletteColors } from '../palettes';
 import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
 import type { ParticipantType } from '../sequence/parser';
-import type { ISLayoutResult, ISLayoutNode, ISLayoutEdge, ISLayoutGroup } from './layout';
+import type { ISLayoutResult } from './layout';
 import { parseInitiativeStatus } from './parser';
 import { layoutInitiativeStatus } from './layout';
 
@@ -66,6 +81,44 @@ function edgeStrokeColor(status: InitiativeStatus, palette: PaletteColors, isDar
   return statusColor(status, palette, isDark);
 }
 
+// ============================================================
+// Legend helpers
+// ============================================================
+
+interface ISLegendEntry {
+  label: string;
+  statusKey: InitiativeStatus;
+}
+
+const IS_STATUS_LABELS: Record<string, string> = {
+  done: 'Done',
+  wip:  'In Progress',
+  todo: 'To Do',
+  na:   'N/A',
+};
+
+const IS_STATUS_ORDER: InitiativeStatus[] = ['todo', 'wip', 'done', 'na'];
+
+function collectStatuses(parsed: ParsedInitiativeStatus): ISLegendEntry[] {
+  const present = new Set<string>();
+  for (const n of parsed.nodes) {
+    if (n.status) present.add(n.status);
+  }
+  return IS_STATUS_ORDER
+    .filter((s) => s !== null && present.has(s))
+    .map((s) => ({ label: IS_STATUS_LABELS[s!], statusKey: s }));
+}
+
+const LEGEND_GROUP_NAME = 'Status';
+
+function legendEntriesWidth(entries: ISLegendEntry[]): number {
+  let w = 0;
+  for (const e of entries) {
+    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+
 // ============================================================
 // Edge path generator
 // ============================================================
@@ -409,15 +462,31 @@ function renderNodeShape(
 // Main renderer
 // ============================================================
 
+export interface ISRenderOptions {
+  onClickItem?: (lineNumber: number) => void;
+  exportDims?: { width?: number; height?: number };
+  legendActive?: boolean | null;
+  activeTagGroup?: string | null;
+  hiddenTagValues?: Map<string, Set<string>>;
+  tagGroups?: TagGroup[];
+}
+
 export function renderInitiativeStatus(
   container: HTMLDivElement,
   parsed: ParsedInitiativeStatus,
   layout: ISLayoutResult,
   palette: PaletteColors,
   isDark: boolean,
-  onClickItem?: (lineNumber: number) => void,
-  exportDims?: { width?: number; height?: number }
+  options?: ISRenderOptions
 ): void {
+  const {
+    onClickItem,
+    exportDims,
+    legendActive,
+    activeTagGroup,
+    hiddenTagValues,
+    tagGroups,
+  } = options ?? {};
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -425,20 +494,28 @@ export function renderInitiativeStatus(
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
+  const legendEntries = collectStatuses(parsed);
+  const hasLegend = legendEntries.length > 1;
+  const isLegendExpanded = legendActive !== false;
+
+  const effectiveTagGroups = tagGroups ?? parsed.tagGroups ?? [];
+  const hasTagGroups = effectiveTagGroups.length > 0;
+
   const titleHeight = parsed.title ? 40 : 0;
+  const LEGEND_FIXED_GAP = 8;
+  const legendReserve = (hasLegend || hasTagGroups) ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
 
   // Scale to fit
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const availH = height - titleHeight - legendReserve;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  const offsetY = titleHeight + legendReserve + DIAGRAM_PADDING;
 
   // Create SVG
   const svg = d3Selection
@@ -498,6 +575,201 @@ export function renderInitiativeStatus(
     }
   }
 
+  // ── Legend ──
+  if (hasLegend || hasTagGroups) {
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
+
+    // Build legend groups: Status + tag groups
+    interface LegendGroup {
+      name: string;
+      key: string; // lowercase key for data attribute
+      isStatus: boolean;
+      entries: { label: string; color: string; value: string }[];
+      width: number; // total width when expanded
+    }
+
+    const legendGroups: LegendGroup[] = [];
+
+    // Status group (always first if entries exist)
+    if (hasLegend) {
+      const statusEntries = legendEntries.map((e) => ({
+        label: e.label,
+        color: statusColor(e.statusKey, palette, isDark),
+        value: e.statusKey ?? 'na',
+      }));
+      const pillW = LEGEND_GROUP_NAME.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const entrW = legendEntriesWidth(legendEntries);
+      legendGroups.push({
+        name: LEGEND_GROUP_NAME,
+        key: 'status',
+        isStatus: true,
+        entries: statusEntries,
+        width: LEGEND_CAPSULE_PAD * 2 + pillW + LEGEND_ENTRY_TRAIL + entrW,
+      });
+    }
+
+    // Tag groups
+    for (const tg of effectiveTagGroups) {
+      const entries = tg.entries.map((e) => ({
+        label: e.value,
+        color: e.color || palette.textMuted,
+        value: e.value.toLowerCase(),
+      }));
+      const pillW = tg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      let entrW = 0;
+      for (const e of entries) {
+        entrW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      }
+      legendGroups.push({
+        name: tg.name,
+        key: tg.name.toLowerCase(),
+        isStatus: false,
+        entries,
+        width: LEGEND_CAPSULE_PAD * 2 + pillW + 4 + entrW,
+      });
+    }
+
+    // Determine which group is active/expanded
+    const activeKey = activeTagGroup?.toLowerCase() ?? null;
+    const isStatusExpanded = isLegendExpanded && activeKey === null;
+
+    // When a tag group is active, only show that group (mutual exclusion).
+    // When no tag group is active, show all pills (Status expanded + tag pills minified).
+    const visibleLegendGroups = activeKey !== null
+      ? legendGroups.filter((lg) => !lg.isStatus && lg.key === activeKey)
+      : legendGroups;
+
+    // Compute total legend width
+    let totalLegendW = 0;
+    for (const lg of visibleLegendGroups) {
+      const isActive = lg.isStatus ? isStatusExpanded : (activeKey === lg.key);
+      const pillW = lg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      totalLegendW += isActive ? lg.width : pillW;
+      totalLegendW += LEGEND_GROUP_GAP;
+    }
+    totalLegendW -= LEGEND_GROUP_GAP; // remove trailing gap
+
+    const legendX = (width - totalLegendW) / 2;
+    const legendY = titleHeight;
+
+    const legendRow = svg
+      .append('g')
+      .attr('class', 'is-legend-row')
+      .attr('transform', `translate(${legendX}, ${legendY})`);
+
+    let cursorX = 0;
+
+    for (const lg of visibleLegendGroups) {
+      const isActive = lg.isStatus ? isStatusExpanded : (activeKey === lg.key);
+      const pillW = lg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
+      const groupW = isActive ? lg.width : pillW;
+
+      const gEl = legendRow
+        .append('g')
+        .attr('transform', `translate(${cursorX}, 0)`)
+        .attr('class', 'is-legend-group')
+        .attr('data-legend-group', lg.key)
+        .style('cursor', 'pointer');
+
+      if (isActive) {
+        // Outer capsule background
+        gEl.append('rect')
+          .attr('width', groupW)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+      }
+
+      const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+
+      // Pill background
+      gEl.append('rect')
+        .attr('x', pillXOff)
+        .attr('y', pillYOff)
+        .attr('width', pillW)
+        .attr('height', pillH)
+        .attr('rx', pillH / 2)
+        .attr('fill', isActive ? palette.bg : groupBg);
+
+      // Active pill border
+      if (isActive) {
+        gEl.append('rect')
+          .attr('x', pillXOff)
+          .attr('y', pillYOff)
+          .attr('width', pillW)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', 'none')
+          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
+          .attr('stroke-width', 0.75);
+      }
+
+      // Pill text
+      gEl.append('text')
+        .attr('x', pillXOff + pillW / 2)
+        .attr('y', 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')
+        .attr('font-family', FONT_FAMILY)
+        .text(lg.name);
+
+      // Entries inside capsule (active only)
+      if (isActive) {
+        // Determine which values are hidden for this group
+        const hiddenSet = !lg.isStatus ? hiddenTagValues?.get(lg.key) : undefined;
+
+        let entryX = pillXOff + pillW + 4;
+        for (const entry of lg.entries) {
+          const isHidden = hiddenSet?.has(entry.value) ?? false;
+
+          const entryG = gEl.append('g')
+            .attr('data-legend-entry', entry.value)
+            .style('cursor', !lg.isStatus ? 'pointer' : 'default');
+
+          if (isHidden) {
+            // Hidden: hollow ring + dimmed text (strikethrough-like)
+            entryG.append('circle')
+              .attr('cx', entryX + LEGEND_DOT_R)
+              .attr('cy', LEGEND_HEIGHT / 2)
+              .attr('r', LEGEND_DOT_R)
+              .attr('fill', 'none')
+              .attr('stroke', entry.color)
+              .attr('stroke-width', 1.2)
+              .attr('opacity', 0.5);
+          } else {
+            // Visible: solid dot
+            entryG.append('circle')
+              .attr('cx', entryX + LEGEND_DOT_R)
+              .attr('cy', LEGEND_HEIGHT / 2)
+              .attr('r', LEGEND_DOT_R)
+              .attr('fill', entry.color);
+          }
+
+          entryG.append('text')
+            .attr('x', entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .attr('font-family', FONT_FAMILY)
+            .attr('opacity', isHidden ? 0.4 : 1)
+            .attr('text-decoration', isHidden ? 'line-through' : 'none')
+            .text(entry.label);
+
+          entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        }
+      }
+
+      cursorX += groupW + LEGEND_GROUP_GAP;
+    }
+
+  }
+
   // Content group
   const contentG = svg
     .append('g')
@@ -768,7 +1040,15 @@ export function renderInitiativeStatus(
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'is-node')
-      .attr('data-line-number', String(node.lineNumber));
+      .attr('data-line-number', String(node.lineNumber))
+      .attr('data-is-status', node.status ?? 'na');
+
+    // Tag data attributes for hover dimming
+    if (node.metadata) {
+      for (const [key, val] of Object.entries(node.metadata)) {
+        nodeG.attr(`data-tag-${key}`, val.toLowerCase());
+      }
+    }
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
@@ -787,14 +1067,16 @@ export function renderInitiativeStatus(
       .attr('fill', 'transparent')
       .attr('class', 'is-node-hit-area');
 
+    // Always use status coloring regardless of legend state
     const fill = nodeFill(node.status, palette, isDark);
     const stroke = nodeStroke(node.status, palette, isDark);
     renderNodeShape(nodeG, node.shape, node.width, node.height, fill, stroke);
 
+    const textColor = contrastText(fill, '#eceff4', '#2e3440');
+
     // Label placement: actors put label below the figure, others center inside
     const isActor = node.shape === 'actor';
     if (isActor) {
-      const textColor = nodeTextColor(node.status, palette, isDark);
       const fitted = fitTextToNode(node.label, node.width, node.height * 0.35);
       const labelY = node.height / 2 - fitted.fontSize * 0.3;
       for (let li = 0; li < fitted.lines.length; li++) {
@@ -811,7 +1093,6 @@ export function renderInitiativeStatus(
       }
     } else {
       const fitted = fitTextToNode(node.label, node.width, node.height);
-      const textColor = nodeTextColor(node.status, palette, isDark);
       const totalTextHeight = fitted.lines.length * fitted.fontSize * 1.3;
       const startY = -totalTextHeight / 2 + fitted.fontSize * 0.65;
 
@@ -846,40 +1127,22 @@ export function renderInitiativeStatusForExport(
   const layout = layoutInitiativeStatus(parsed);
   const isDark = theme === 'dark';
 
+  const legendEntries = collectStatuses(parsed);
+  const EXPORT_LEGEND_GAP = 8;
+  const legendReserve = legendEntries.length > 1 ? LEGEND_HEIGHT + EXPORT_LEGEND_GAP : 0;
   const titleOffset = parsed.title ? 40 : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset + legendReserve;
 
-  const container = document.createElement('div');
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = 'absolute';
-  container.style.left = '-9999px';
-  document.body.appendChild(container);
-
-  try {
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderInitiativeStatus(
       container,
       parsed,
       layout,
       palette,
       isDark,
-      undefined,
-      { width: exportWidth, height: exportHeight }
+      { exportDims: { width: exportWidth, height: exportHeight } }
     );
-
-    const svgEl = container.querySelector('svg');
-    if (!svgEl) return '';
-
-    if (theme === 'transparent') {
-      svgEl.style.background = 'none';
-    }
-
-    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svgEl.style.fontFamily = FONT_FAMILY;
-
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }

package/src/initiative-status/types.ts

@@ -4,6 +4,7 @@
 
 import type { DgmoError } from '../diagnostics';
 import type { ParticipantType } from '../sequence/parser';
+import type { TagGroup } from '../utils/tag-groups';
 
 export type InitiativeStatus = 'done' | 'wip' | 'todo' | 'na' | null;
 
@@ -14,6 +15,7 @@ export interface ISNode {
   status: InitiativeStatus;
   shape: ParticipantType;
   lineNumber: number;
+  metadata: Record<string, string>;
 }
 
 export interface ISEdge {
@@ -22,6 +24,7 @@ export interface ISEdge {
   label?: string; // e.g. "getUser"
   status: InitiativeStatus;
   lineNumber: number;
+  metadata: Record<string, string>;
 }
 
 export interface ISGroup {
@@ -37,7 +40,10 @@ export interface ParsedInitiativeStatus {
   nodes: ISNode[];
   edges: ISEdge[];
   groups: ISGroup[];
+  tagGroups: TagGroup[];
   options: Record<string, string>;
+  /** Initial hidden tag values from `hide:` DSL directive. Map<groupKey, Set<values>> */
+  initialHiddenTagValues: Map<string, Set<string>>;
   diagnostics: DgmoError[];
   error: string | null;
 }

package/src/kanban/parser.ts

@@ -1,5 +1,4 @@
 import type { PaletteColors } from '../palettes';
-import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { resolveColor } from '../colors';
 import { matchTagBlockHeading } from '../utils/tag-groups';
@@ -15,7 +14,6 @@ import type {
   KanbanColumn,
   KanbanCard,
   KanbanTagGroup,
-  KanbanTagEntry,
 } from './types';
 
 // ============================================================

package/src/org/layout.ts

@@ -81,8 +81,6 @@ export interface OrgLayoutResult {
 // ============================================================
 
 const CHAR_WIDTH = 7.5;
-const LABEL_FONT_SIZE = 13;
-const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
 const HEADER_HEIGHT = 28;
 const SEPARATOR_GAP = 6;
@@ -1117,8 +1115,6 @@ export function layoutOrg(
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
 
-  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
-
   // When a tag group is active, only that group is laid out (full size).
   // When none is active, all groups are laid out minified — unless
   // expandAllLegend is set (export mode), which shows all groups expanded.
@@ -1128,66 +1124,33 @@ export function layoutOrg(
   const allExpanded = expandAllLegend && activeTagGroup == null;
   const effectiveW = (g: OrgLegendGroup) =>
     activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
-  const effectiveH = (g: OrgLegendGroup) =>
-    activeTagGroup != null || allExpanded ? g.height : g.minifiedHeight;
 
   if (visibleGroups.length > 0) {
-    if (legendPosition === 'bottom') {
-      // Bottom: center legend groups horizontally below diagram content
-      const totalGroupsWidth =
-        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-      const neededWidth = totalGroupsWidth + MARGIN * 2;
-
-      if (neededWidth > totalWidth) {
-        finalWidth = neededWidth;
-        const shift = (finalWidth - totalWidth) / 2;
-        for (const n of layoutNodes) n.x += shift;
-        for (const c of containers) c.x += shift;
-        for (const e of layoutEdges) {
-          for (const p of e.points) p.x += shift;
-        }
-      }
-
-      const contentBottom = totalHeight - MARGIN;
-      const legendY = contentBottom + LEGEND_GAP;
-      const startX = (finalWidth - totalGroupsWidth) / 2;
-
-      let cx = startX;
-      for (const g of visibleGroups) {
-        g.x = cx;
-        g.y = legendY;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
-
-      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
-    } else {
-      // Top: horizontal row above chart content, left-aligned
-      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
-
-      // Push all chart content down
-      for (const n of layoutNodes) n.y += legendShift;
-      for (const c of containers) c.y += legendShift;
-      for (const e of layoutEdges) {
-        for (const p of e.points) p.y += legendShift;
-      }
+    // Top: horizontal row above chart content, left-aligned
+    const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+
+    // Push all chart content down
+    for (const n of layoutNodes) n.y += legendShift;
+    for (const c of containers) c.y += legendShift;
+    for (const e of layoutEdges) {
+      for (const p of e.points) p.y += legendShift;
+    }
 
-      const totalGroupsWidth =
-        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+    const totalGroupsWidth =
+      visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+      (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
 
-      let cx = MARGIN;
-      for (const g of visibleGroups) {
-        g.x = cx;
-        g.y = MARGIN;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
+    let cx = MARGIN;
+    for (const g of visibleGroups) {
+      g.x = cx;
+      g.y = MARGIN;
+      cx += effectiveW(g) + LEGEND_GROUP_GAP;
+    }
 
-      finalHeight += legendShift;
-      const neededWidth = totalGroupsWidth + MARGIN * 2;
-      if (neededWidth > finalWidth) {
-        finalWidth = neededWidth;
-      }
+    finalHeight += legendShift;
+    const neededWidth = totalGroupsWidth + MARGIN * 2;
+    if (neededWidth > finalWidth) {
+      finalWidth = neededWidth;
     }
   }
 

package/src/org/renderer.ts

@@ -4,10 +4,11 @@
 
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
+import { runInExportContainer, extractExportSvg } from '../utils/export-container';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedOrg } from './parser';
-import type { OrgLayoutResult, OrgLayoutNode } from './layout';
+import type { OrgLayoutResult } from './layout';
 import { parseOrg } from './parser';
 import { layoutOrg } from './layout';
 import {
@@ -114,7 +115,6 @@ export function renderOrg(
 
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const legendOnly = layout.nodes.length === 0;
-  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
@@ -147,10 +147,9 @@ export function renderOrg(
   // Center the diagram
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY =
-    legendPosition === 'top' && fixedLegend
-      ? DIAGRAM_PADDING + legendReserve + titleReserve
-      : DIAGRAM_PADDING + titleReserve;
+  const offsetY = fixedLegend
+    ? DIAGRAM_PADDING + legendReserve + titleReserve
+    : DIAGRAM_PADDING + titleReserve;
 
   // Create SVG
   const svg = d3Selection
@@ -515,9 +514,7 @@ export function renderOrg(
           .attr('class', 'org-legend-fixed')
           .attr(
             'transform',
-            legendPosition === 'bottom'
-              ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`
-              : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
+            `translate(0, ${DIAGRAM_PADDING + titleReserve})`
           )
       : contentG;
     const legendParent = legendParentBase;
@@ -687,38 +684,16 @@ export function renderOrgForExport(
   const layout = layoutOrg(parsed, undefined, undefined, exportHidden);
   const isDark = theme === 'dark';
 
-  // Create offscreen container
-  const container = document.createElement('div');
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight =
-    layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
 
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = 'absolute';
-  container.style.left = '-9999px';
-  document.body.appendChild(container);
-
-  try {
-    // No hiddenAttributes passed to renderOrg — export never shows eye icons
+  // No hiddenAttributes passed to renderOrg — export never shows eye icons
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderOrg(container, parsed, layout, palette, isDark, undefined, {
       width: exportWidth,
       height: exportHeight,
     });
-
-    const svgEl = container.querySelector('svg');
-    if (!svgEl) return '';
-
-    if (theme === 'transparent') {
-      svgEl.style.background = 'none';
-    }
-
-    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svgEl.style.fontFamily = FONT_FAMILY;
-
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }