@diagrammo/dgmo 0.15.0 → 0.16.0

package/src/boxes-and-lines/renderer.ts

@@ -309,6 +309,7 @@ interface BLRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 export function renderBoxesAndLines(
@@ -328,6 +329,7 @@ export function renderBoxesAndLines(
     controlsExpanded,
     onToggleDescriptions,
     onToggleControlsExpand,
+    exportMode = false,
   } = options ?? {};
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -974,7 +976,7 @@ export function renderBoxesAndLines(
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -1017,11 +1019,13 @@ export function renderBoxesAndLinesForExport(
     exportDims?: { width: number; height: number };
     activeTagGroup?: string | null;
     hiddenTagValues?: Map<string, Set<string>>;
+    exportMode?: boolean;
   }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
     hiddenTagValues: options?.hiddenTagValues,
+    exportMode: options?.exportMode,
   });
 }

package/src/c4/parser.ts

@@ -350,7 +350,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -421,7 +421,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         );
         const shape = inferC4Shape(
           nodeName,
-          metadata.tech ?? metadata.technology
+          metadata['tech'] ?? metadata['technology']
         );
 
         const dNode: C4DeploymentNode = {
@@ -555,11 +555,11 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
           // parsePipeMetadata expects segments split by |; first segment is pre-pipe
           const meta = parsePipeMetadata(['', metaPart], metaAliasMap);
           // tech/technology on pipe overrides [tech] in label
-          if (meta.tech) {
-            technology = meta.tech;
+          if (meta['tech']) {
+            technology = meta['tech'];
           }
-          if (meta.technology) {
-            technology = meta.technology;
+          if (meta['technology']) {
+            technology = meta['technology'];
           }
         }
 
@@ -729,7 +729,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
 
       const shape =
         explicitShape ??
-        inferC4Shape(namePart, metadata.tech ?? metadata.technology);
+        inferC4Shape(namePart, metadata['tech'] ?? metadata['technology']);
 
       // Extract description from pipe metadata into dedicated field
       let isADescription: string[] | undefined;
@@ -806,7 +806,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       // Determine shape: explicit > inference
       const shape =
         explicitShape ??
-        inferC4Shape(namePart, metadata.tech ?? metadata.technology);
+        inferC4Shape(namePart, metadata['tech'] ?? metadata['technology']);
 
       // Extract description from pipe metadata into dedicated field
       let prefixDescription: string[] | undefined;

package/src/c4/renderer.ts

@@ -232,7 +232,8 @@ export function renderC4Context(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -636,7 +637,8 @@ export function renderC4Context(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1259,7 +1261,8 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeTagGroup?: string | null,
-  fixedWidth?: number | null
+  fixedWidth?: number | null,
+  exportMode?: boolean
 ): void {
   const groups = layout.legend.map((g) => ({
     name: g.name,
@@ -1268,7 +1271,7 @@ function renderLegend(
   const legendConfig: LegendConfig = {
     groups,
     position: { placement: 'top-center', titleRelation: 'below-title' },
-    mode: 'fixed',
+    mode: exportMode ? 'export' : 'preview',
   };
   const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
   const containerWidth = fixedWidth ?? layout.width;
@@ -1300,7 +1303,8 @@ export function renderC4Containers(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -1805,7 +1809,8 @@ export function renderC4Containers(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1933,7 +1938,8 @@ export function renderC4Deployment(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   renderC4Containers(
     container,
@@ -1943,7 +1949,8 @@ export function renderC4Deployment(
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }
 

package/src/chart-types.ts

@@ -490,8 +490,3 @@ export const chartTypes: readonly ChartTypeMeta[] = [
     fallback: true,
   },
 ] as const;
-
-// Chart-type ids currently flagged as beta. Renderers/UIs use this set to
-// surface a "β BETA" badge next to titles, nav entries, and template tiles.
-// Promote/demote by editing this set + the corresponding registry titles.
-export const BETA_CHART_IDS: ReadonlySet<string> = new Set(['c4', 'venn']);

package/src/chart.ts

@@ -63,7 +63,7 @@ export interface ParsedChart {
 // Colors
 // ============================================================
 
-import { resolveColorWithDiagnostic } from './colors';
+import { resolveColorWithDiagnostic, RECOGNIZED_COLOR_NAMES } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
 import {
@@ -212,21 +212,30 @@ export function parseChart(
       // Fall through — first line might be a data row or option
     }
 
-    // Era line: era Day 1 -> Day 3 Rough Seas (blue) — colon-free
-    const eraMatch = trimmed.match(
-      /^era\s+(.+?)\s*->\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
-    );
+    // Era line (§1.5 trailing-token):
+    //   `era Day 1 -> Day 3 Rough Seas`        (no color)
+    //   `era Day 1 -> Day 3 Rough Seas blue`   (trailing color word)
+    // Color (if any) is the last whitespace-delimited token of the label.
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*$/);
     if (eraMatch) {
-      // Store start and raw afterArrow — resolved against data labels after parsing
       const afterArrow = eraMatch[2].trim();
       const spaceIdx = afterArrow.indexOf(' ');
       if (spaceIdx >= 0) {
+        // Peel trailing-token color off the after-arrow label region.
+        const lastSpaceIdx = afterArrow.lastIndexOf(' ');
+        const trailing = afterArrow.substring(lastSpaceIdx + 1);
+        const hasColor = RECOGNIZED_COLOR_NAMES.includes(
+          trailing as (typeof RECOGNIZED_COLOR_NAMES)[number]
+        );
+        const labelPart = hasColor
+          ? afterArrow.substring(0, lastSpaceIdx).trimEnd()
+          : afterArrow;
         rawEras.push({
           start: eraMatch[1].trim(),
-          afterArrow,
-          color: eraMatch[3]
+          afterArrow: labelPart,
+          color: hasColor
             ? (resolveColorWithDiagnostic(
-                eraMatch[3].trim(),
+                trailing,
                 lineNumber,
                 result.diagnostics,
                 palette

package/src/class/parser.ts

@@ -35,10 +35,11 @@ function classId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Class declaration: [modifier] ClassName [extends Parent] [implements Interface] (color)
-// Multi-word names allowed (`Customer Service`); quote with `"name"` if name
-// contains reserved chars. ClassName must start with uppercase to keep the
-// convention. Captures (positional):
+// Class declaration: [modifier] ClassName [extends Parent] [implements Interface] [color] [as alias]
+// Color is the universal §1.5 trailing-token form (a bare lowercase palette
+// color word after structural slots). Multi-word names allowed
+// (`Customer Service`); quote with `"name"` if name contains reserved chars.
+// ClassName must start with uppercase. Captures (positional):
 //   1: modifier (abstract|interface|enum) | undefined
 //   2: quotedClassName | undefined
 //   3: bareClassName | undefined
@@ -47,10 +48,10 @@ function classId(name: string): string {
 //   6: quotedImplements | undefined
 //   7: bareImplements | undefined
 //   8: legacy bracket modifier | undefined
-//   9: color | undefined
+//   9: color (trailing token; recognized palette word) | undefined
 //  10: alias literal (TD-18) | undefined
 const CLASS_DECL_RE =
-  /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
+  /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
 
 // Relationship — arrow syntax (indented under source class).
 // Arrows: --|>  ..|>  *--  o--  ..>  ->
@@ -184,14 +185,6 @@ export function parseClassDiagram(
     error: null,
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const _fail = (line: number, message: string): ParsedClassDiagram => {
-    const diag = makeDgmoError(line, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
-
   const classMap = new Map<string, ClassNode>();
 
   // Per-parse alias literal → canonical class id (TD-18). Per C8.
@@ -548,7 +541,7 @@ export function looksLikeClassDiagram(content: string): boolean {
 // Symbol extraction (for completion API)
 // ============================================================
 
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 /**
  * Extract class names (entities) from class diagram document text.

package/src/class/renderer.ts

@@ -192,7 +192,8 @@ export function renderClassDiagram(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  legendActive?: boolean | null
+  legendActive?: boolean | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -376,7 +377,7 @@ export function renderClassDiagram(
     const legendConfig: LegendConfig = {
       groups: legendGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
     };
     const legendState: LegendState = {
       activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null,
@@ -697,10 +698,20 @@ export function renderClassDiagramForExport(
     legendReserve;
 
   return runInExportContainer(exportWidth, exportHeight, (container) => {
-    renderClassDiagram(container, parsed, layout, palette, isDark, undefined, {
-      width: exportWidth,
-      height: exportHeight,
-    });
+    renderClassDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      undefined,
+      {
+        width: exportWidth,
+        height: exportHeight,
+      },
+      true, // legendActive for export
+      true // exportMode
+    );
     return extractExportSvg(container, theme);
   });
 }

package/src/cli.ts

@@ -179,8 +179,8 @@ palette: catppuccin    // override palette
 // This is a comment (only // syntax — not #)
 \`\`\`
 
-Inline colors on most elements: append \`(colorname)\` — e.g. \`North(red): 850\`, \`[Process(blue)]\`.
-Named colors: \`red\`, \`orange\`, \`yellow\`, \`green\`, \`blue\`, \`purple\`, \`teal\`, \`cyan\`, \`gray\`.
+Inline colors on most elements: append the color name as the trailing token — e.g. \`North red 850\`, \`[Process] blue\`. To use a color word as a literal label, capitalize it (\`Red\` stays as the word Red).
+Named colors: \`red\`, \`orange\`, \`yellow\`, \`green\`, \`blue\`, \`purple\`, \`teal\`, \`cyan\`, \`gray\`, \`black\`, \`white\`.
 
 ### sequence (most commonly used)
 
@@ -234,7 +234,7 @@ North: 850
 South: 620
 
 // line (multi-series)
-series: Sales(red), Costs(blue)
+series: Sales red, Costs blue
 Q1: 100, 50
 Q2: 120, 55
 
@@ -295,7 +295,7 @@ API
 async A -> B: msg  ❌  use A ~msg~> B
 A <- B             ❌  left-pointing arrows removed — use B -> A
 parallel else      ❌  not supported — use separate parallel blocks
-== Foo(#ff0000) == ❌  hex colors not supported — use named colors: == Foo(red) ==
+== Foo #ff0000 == ❌  hex colors not supported — use named colors: == Foo red ==
 A -routes to /api-> B  ❌  -> inside a label is ambiguous — rephrase the label
 end                ❌  not needed — indentation closes blocks in sequence diagrams
 \`\`\`
@@ -427,8 +427,8 @@ bar, line, multi-line, area, pie, doughnut, radar, polar-area, bar-stacked, scat
 
 - First line: chart type keyword (e.g. \`sequence\`, \`flowchart\`, \`bar\`), optionally followed by a title (\`bar Revenue\`)
 - \`// comment\` — only \`//\` comments (not \`#\`)
-- \`(colorname)\` — inline colors on data series, tag values, kanban columns: \`Label(red) 100\`
-- \`series A(red), B(blue)\` — multi-series with colors
+- Trailing color name — inline colors on data series, tag values, kanban columns: \`Label red 100\`
+- \`series A red, B blue\` — multi-series with colors
 
 ## Rendering via CLI
 
@@ -705,7 +705,9 @@ async function main(): Promise<void> {
 
   if (opts.cat) {
     const useColor =
-      !opts.noColor && !process.env.NO_COLOR && process.stdout.isTTY === true;
+      !opts.noColor &&
+      !process.env['NO_COLOR'] &&
+      process.stdout.isTTY === true;
 
     let catContent: string;
     if (opts.input && opts.input !== '-') {
@@ -822,9 +824,9 @@ async function main(): Promise<void> {
         }
       }
       const mcpServers =
-        (settings.mcpServers as Record<string, unknown> | undefined) ?? {};
+        (settings['mcpServers'] as Record<string, unknown> | undefined) ?? {};
       mcpServers['dgmo'] = mcpEntry;
-      settings.mcpServers = mcpServers;
+      settings['mcpServers'] = mcpServers;
       writeFileSync(
         settingsPath,
         JSON.stringify(settings, null, 2) + '\n',
@@ -842,9 +844,9 @@ async function main(): Promise<void> {
         }
       }
       const mcpServers =
-        (mcp.mcpServers as Record<string, unknown> | undefined) ?? {};
+        (mcp['mcpServers'] as Record<string, unknown> | undefined) ?? {};
       mcpServers['dgmo'] = mcpEntry;
-      mcp.mcpServers = mcpServers;
+      mcp['mcpServers'] = mcpServers;
       writeFileSync(mcpPath, JSON.stringify(mcp, null, 2) + '\n', 'utf-8');
       console.log(
         `✓ MCP server configured: ${join(process.cwd(), '.mcp.json')}`
@@ -1118,7 +1120,7 @@ async function main(): Promise<void> {
       );
     } else if (os === 'win32') {
       const appData =
-        process.env.APPDATA ?? join(homedir(), 'AppData', 'Roaming');
+        process.env['APPDATA'] ?? join(homedir(), 'AppData', 'Roaming');
       configPath = join(appData, 'Claude', 'claude_desktop_config.json');
     } else {
       configPath = join(
@@ -1154,7 +1156,7 @@ async function main(): Promise<void> {
       }
     }
 
-    const existingDgmo = config.mcpServers?.dgmo;
+    const existingDgmo = config.mcpServers?.['dgmo'];
     if (existingDgmo && existingDgmo.command === 'dgmo-mcp') {
       console.log(`✓ dgmo MCP server already configured in ${configPath}`);
     } else {

package/src/completion-types.ts

@@ -0,0 +1,28 @@
+// ============================================================
+// Completion / symbol-extraction shared types
+// ============================================================
+//
+// Lives in its own leaf module so chart-type parsers (Class, ER,
+// Flowchart, Infra, Pert) can `import type { DiagramSymbols }` here
+// without depending on completion.ts — which itself imports those
+// parsers' extractSymbols() functions, producing a cycle hub.
+//
+// Keep this file dependency-free.
+
+// ChartType is just a string — alias for documentation clarity.
+export type ChartType = string;
+
+export interface DiagramSymbols {
+  kind: ChartType;
+  entities: string[]; // table names, node IDs, class names, etc.
+  keywords: string[]; // diagram-specific reserved words
+  /**
+   * Map of alias-literal → canonical entity name, collected from
+   * `Name as <alias>` declarations in the document. Editor surfaces
+   * both forms in autocomplete; selecting an alias inserts the alias
+   * literal (the alias is input convenience, not a display name).
+   */
+  aliases?: Record<string, string>;
+}
+
+export type ExtractFn = (docText: string) => DiagramSymbols;

package/src/completion.ts

@@ -17,29 +17,27 @@ import { extractSymbols as extractInfraSymbols } from './infra/parser';
 import { extractSymbols as extractClassSymbols } from './class/parser';
 import { extractPertSymbols } from './pert/parser';
 import { parseFirstLine, ALL_CHART_TYPES } from './utils/parsing';
-import { CHART_TYPE_DESCRIPTIONS } from './dgmo-router';
+import { RECOGNIZED_COLOR_NAMES } from './colors';
+
+const RECOGNIZED_COLOR_SET: ReadonlySet<string> = new Set(
+  RECOGNIZED_COLOR_NAMES
+);
+// Read chart-type descriptions directly from the source-of-truth data
+// module instead of via dgmo-router.ts. dgmo-router imports every
+// parser, and the parsers (Class/ER/Infra/Pert/Flowchart) type-only
+// import DiagramSymbols back from this file — creating a hub of cycles
+// through completion ↔ dgmo-router. Going through chart-types.ts (a
+// leaf module with zero imports) breaks 7 of the 10 known cycles.
+import { chartTypes } from './chart-types';
 
 // ============================================================
 // Symbol extraction
 // ============================================================
 
-// ChartType is just a string — alias here for documentation clarity.
-export type ChartType = string;
-
-export interface DiagramSymbols {
-  kind: ChartType;
-  entities: string[]; // table names, node IDs, class names, etc.
-  keywords: string[]; // diagram-specific reserved words
-  /**
-   * Map of alias-literal → canonical entity name, collected from
-   * `Name as <alias>` declarations in the document. Editor surfaces
-   * both forms in autocomplete; selecting an alias inserts the alias
-   * literal (the alias is input convenience, not a display name).
-   */
-  aliases?: Record<string, string>;
-}
-
-export type ExtractFn = (docText: string) => DiagramSymbols;
+// Types live in ./completion-types so the chart-type parsers can
+// import them without taking a cycle through this file.
+import type { ChartType, DiagramSymbols, ExtractFn } from './completion-types';
+export type { ChartType, DiagramSymbols, ExtractFn };
 
 const extractorRegistry = new Map<ChartType, ExtractFn>();
 
@@ -575,6 +573,10 @@ for (const [type, spec] of COMPLETION_REGISTRY) {
 // ============================================================
 
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
+const CHART_TYPE_DESCRIPTIONS: Record<string, string> = Object.fromEntries(
+  chartTypes.map((c) => [c.id, c.description])
+);
+
 export const CHART_TYPES: ReadonlyArray<{ name: string; description: string }> =
   [...ALL_CHART_TYPES]
     .filter((t) => t !== 'multi-line')
@@ -971,10 +973,15 @@ export function extractTagDeclarations(docText: string): Map<string, string[]> {
       (raw[0] === ' ' || raw[0] === '\t')
     ) {
       if (trimmed && !trimmed.startsWith('//')) {
-        // Strip color annotation: Frontend(blue) → Frontend
-        const colorIdx = trimmed.indexOf('(');
+        // Strip trailing-token color (§1.5): `Frontend blue` → `Frontend`.
+        // Whitespace-split; if the last token is a recognized color word,
+        // drop it; otherwise the whole trimmed string is the value.
+        const lastSpaceIdx = trimmed.lastIndexOf(' ');
         const value =
-          colorIdx > 0 ? trimmed.substring(0, colorIdx).trim() : trimmed;
+          lastSpaceIdx > 0 &&
+          RECOGNIZED_COLOR_SET.has(trimmed.substring(lastSpaceIdx + 1))
+            ? trimmed.substring(0, lastSpaceIdx).trim()
+            : trimmed;
         if (value) currentValues.push(value);
       }
       continue;

package/src/cycle/layout.ts

@@ -863,8 +863,8 @@ function fitToCanvas(
   nodes: CycleLayoutNode[],
   edges: CycleLayoutEdge[],
   parsed: ParsedCycle,
-  cx: number,
-  cy: number,
+  _cx: number,
+  _cy: number,
   radius: number,
   width: number,
   height: number,

package/src/cycle/parser.ts

@@ -7,6 +7,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   tryParseSharedOption,
 } from '../utils/parsing';
 import type { ParsedCycle, CycleNode, CycleEdge } from './types';
@@ -149,6 +150,7 @@ export function parseCycle(content: string): ParsedCycle {
       }
 
       // Parse node: Label | color: blue, span: 3, description: text
+      // OR shortcut form (color only): `Label color` (universal §1.5)
       const pipeIdx = trimmed.indexOf('|');
       let label: string;
       let metadata: Record<string, string> = {};
@@ -166,6 +168,18 @@ export function parseCycle(content: string): ParsedCycle {
         continue;
       }
 
+      // Universal trailing-token shortcut: if no `| color:` was set explicitly
+      // and the label ends in a recognized color word, treat that word as the
+      // color and strip it from the label.
+      if (!metadata['color']) {
+        const { label: stripped, colorName: shortcutColor } =
+          peelTrailingColorName(label);
+        if (shortcutColor) {
+          metadata['color'] = shortcutColor;
+          label = stripped;
+        }
+      }
+
       // Extract known keys from metadata
       const color = metadata['color'];
       const spanStr = metadata['span'];

package/src/cycle/renderer.ts

@@ -46,6 +46,7 @@ export interface CycleRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 /**
@@ -144,7 +145,7 @@ export function renderCycle(
     const legendConfig: LegendConfig = {
       groups: [],
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: renderOptions?.exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -519,7 +520,8 @@ export function renderCycleForExport(
   palette: PaletteColors,
   isDark: boolean,
   exportDims?: D3ExportDimensions,
-  viewState?: CompactViewState
+  viewState?: CompactViewState,
+  exportMode?: boolean
 ): void {
   renderCycle(
     container,
@@ -528,7 +530,8 @@ export function renderCycleForExport(
     isDark,
     undefined,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }