@diagrammo/dgmo 0.4.2 → 0.4.4

package/src/org/renderer.ts

@@ -5,6 +5,7 @@
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
+import { mix } from '../palettes/color-utils';
 import type { ParsedOrg } from './parser';
 import type { OrgLayoutResult, OrgLayoutNode } from './layout';
 import { parseOrg } from './parser';
@@ -47,31 +48,13 @@ 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 = 8; // gap between fixed legend and scaled diagram
 
 // ============================================================
-// Color helpers (inline to avoid cross-module import issues)
+// Color helpers
 // ============================================================
 
-function mix(a: string, b: string, pct: number): string {
-  const parse = (h: string) => {
-    const r = h.replace('#', '');
-    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
-    return [
-      parseInt(f.substring(0, 2), 16),
-      parseInt(f.substring(2, 4), 16),
-      parseInt(f.substring(4, 6), 16),
-    ];
-  };
-  const [ar, ag, ab] = parse(a),
-    [br, bg, bb] = parse(b),
-    t = pct / 100;
-  const c = (x: number, y: number) =>
-    Math.round(x * t + y * (1 - t))
-      .toString(16)
-      .padStart(2, '0');
-  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
-}
-
 function nodeFill(
   palette: PaletteColors,
   isDark: boolean,
@@ -125,19 +108,39 @@ export function renderOrg(
   if (width <= 0 || height <= 0) return;
 
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
+  const legendOnly = layout.nodes.length === 0;
+  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
+  const hasLegend = layout.legend.length > 0;
+
+  // In app mode (not export), render the legend at a fixed size outside the
+  // scaled diagram group so it stays legible on large org charts.
+  // The layout already shifted chart content down by legendShift for top legends
+  // (LEGEND_HEIGHT + LEGEND_GROUP_GAP = 40px). We subtract that from the
+  // diagram height so the scale is computed on chart content only, then
+  // reserve fixed pixel space for the legend above or below.
+  const layoutLegendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP; // 40px — what layout added
+  const fixedLegend = !exportDims && hasLegend && !legendOnly;
+  const legendReserve = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
 
   // Compute scale to fit diagram in viewport
   const diagramW = layout.width;
-  const diagramH = layout.height + titleOffset;
+  let diagramH = layout.height + titleOffset;
+  if (fixedLegend) {
+    // Remove the legend space from diagram height — legend is rendered separately
+    diagramH -= layoutLegendShift;
+  }
+  const availH = height - DIAGRAM_PADDING * 2 - legendReserve;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
-  const scaleY = (height - DIAGRAM_PADDING * 2) / diagramH;
+  const scaleY = availH / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   // Center the diagram
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = DIAGRAM_PADDING;
+  const offsetY =
+    legendPosition === 'top' && fixedLegend
+      ? DIAGRAM_PADDING + legendReserve
+      : DIAGRAM_PADDING;
 
   // Create SVG
   const svg = d3Selection
@@ -462,112 +465,147 @@ export function renderOrg(
   }
 
   // Render legend — kanban-style pills.
-  // Skip in export mode (unless legend-only chart).
-  // Legend-only (no nodes): all groups rendered as expanded capsules.
-  // Active group: only that group rendered as capsule (pill + entries).
-  // No active group: all groups rendered as standalone pills.
-  const legendOnly = layout.nodes.length === 0;
-  if (!exportDims || legendOnly) for (const group of layout.legend) {
-    const isActive =
-      legendOnly ||
-      (activeTagGroup != null &&
-        group.name.toLowerCase() === activeTagGroup.toLowerCase());
-
-    // When a group is active, skip all other groups entirely (not in legend-only mode)
-    if (!legendOnly && activeTagGroup != null && !isActive) continue;
-
-    const groupBg = isDark
-      ? mix(palette.surface, palette.bg, 50)
-      : mix(palette.surface, palette.bg, 30);
-
-    // Pill label: just the group name (alias is for DSL shorthand only)
-    const pillLabel = group.name;
-    const pillWidth =
-      pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-
-    const gEl = contentG
-      .append('g')
-      .attr('transform', `translate(${group.x}, ${group.y})`)
-      .attr('class', 'org-legend-group')
-      .attr('data-legend-group', group.name.toLowerCase())
-      .style('cursor', legendOnly ? 'default' : 'pointer');
+  // In app mode (fixedLegend): render at native size outside the scaled group.
+  // In export mode: skip legend (unless legend-only chart).
+  // Legend-only (no nodes): all groups rendered as expanded capsules inside scaled group.
+  if (fixedLegend || legendOnly || (exportDims && hasLegend)) {
+    // Determine which groups to render
+    const visibleGroups = layout.legend.filter((group) => {
+      if (legendOnly) return true;
+      if (activeTagGroup == null) return true;
+      return group.name.toLowerCase() === activeTagGroup.toLowerCase();
+    });
 
-    // Outer capsule background (active only)
-    if (isActive) {
-      gEl
-        .append('rect')
-        .attr('width', group.width)
-        .attr('height', LEGEND_HEIGHT)
-        .attr('rx', LEGEND_HEIGHT / 2)
-        .attr('fill', groupBg);
+    // For fixedLegend: compute positions in pixel space, centered in SVG
+    let fixedPositions: Map<string, number> | undefined;
+    if (fixedLegend && visibleGroups.length > 0) {
+      fixedPositions = new Map();
+      const effectiveW = (g: typeof visibleGroups[0]) =>
+        activeTagGroup != null ? g.width : g.minifiedWidth;
+      const totalW =
+        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+      let cx = (width - totalW) / 2;
+      for (const g of visibleGroups) {
+        fixedPositions.set(g.name, cx);
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
+      }
     }
 
-    const pillX = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillY = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
+    // Choose parent: unscaled group for fixedLegend, contentG for legend-only
+    const legendParent = fixedLegend
+      ? svg
+          .append('g')
+          .attr('class', 'org-legend-fixed')
+          .attr(
+            'transform',
+            legendPosition === 'bottom'
+              ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`
+              : `translate(0, ${DIAGRAM_PADDING})`
+          )
+      : contentG;
+
+    for (const group of visibleGroups) {
+      const isActive =
+        legendOnly ||
+        (activeTagGroup != null &&
+          group.name.toLowerCase() === activeTagGroup.toLowerCase());
+
+      const groupBg = isDark
+        ? mix(palette.surface, palette.bg, 50)
+        : mix(palette.surface, palette.bg, 30);
+
+      const pillLabel = group.name;
+      const pillWidth =
+        pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+
+      const gX = fixedPositions?.get(group.name) ?? group.x;
+      const gY = fixedPositions ? 0 : group.y;
+
+      const gEl = legendParent
+        .append('g')
+        .attr('transform', `translate(${gX}, ${gY})`)
+        .attr('class', 'org-legend-group')
+        .attr('data-legend-group', group.name.toLowerCase())
+        .style('cursor', legendOnly ? 'default' : 'pointer');
+
+      // Outer capsule background (active only)
+      if (isActive) {
+        gEl
+          .append('rect')
+          .attr('width', group.width)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+      }
 
-    // Pill background
-    gEl
-      .append('rect')
-      .attr('x', pillX)
-      .attr('y', pillY)
-      .attr('width', pillWidth)
-      .attr('height', pillH)
-      .attr('rx', pillH / 2)
-      .attr('fill', isActive ? palette.bg : groupBg);
-
-    // Active pill border
-    if (isActive) {
+      const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
+
+      // Pill background
       gEl
         .append('rect')
-        .attr('x', pillX)
-        .attr('y', pillY)
+        .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);
-    }
-
-    // Pill text
-    gEl
-      .append('text')
-      .attr('x', pillX + pillWidth / 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')
-      .text(pillLabel);
-
-    // Entries inside capsule (active only)
-    if (isActive) {
-      let entryX = pillX + pillWidth + 4;
-      for (const entry of group.entries) {
-        const entryG = gEl
-          .append('g')
-          .attr('data-legend-entry', entry.value.toLowerCase())
-          .style('cursor', 'pointer');
-
-        entryG
-          .append('circle')
-          .attr('cx', entryX + LEGEND_DOT_R)
-          .attr('cy', LEGEND_HEIGHT / 2)
-          .attr('r', LEGEND_DOT_R)
-          .attr('fill', entry.color);
-
-        const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-        const entryLabel = entry.value;
-        entryG
-          .append('text')
-          .attr('x', textX)
-          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('fill', palette.textMuted)
-          .text(entryLabel);
+        .attr('fill', isActive ? palette.bg : groupBg);
+
+      // Active pill border
+      if (isActive) {
+        gEl
+          .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);
+      }
 
-        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      // Pill text
+      gEl
+        .append('text')
+        .attr('x', pillXOff + pillWidth / 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')
+        .text(pillLabel);
+
+      // Entries inside capsule (active only)
+      if (isActive) {
+        let entryX = pillXOff + pillWidth + 4;
+        for (const entry of group.entries) {
+          const entryG = gEl
+            .append('g')
+            .attr('data-legend-entry', entry.value.toLowerCase())
+            .style('cursor', 'pointer');
+
+          entryG
+            .append('circle')
+            .attr('cx', entryX + LEGEND_DOT_R)
+            .attr('cy', LEGEND_HEIGHT / 2)
+            .attr('r', LEGEND_DOT_R)
+            .attr('fill', entry.color);
+
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          const entryLabel = entry.value;
+          entryG
+            .append('text')
+            .attr('x', textX)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .text(entryLabel);
+
+          entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        }
       }
     }
   }

package/src/org/resolver.ts

@@ -12,9 +12,21 @@ import { isTagBlockHeading, matchTagBlockHeading } from '../utils/tag-groups';
  */
 export type ReadFileFn = (path: string) => string | Promise<string>;
 
+/** Tracks the original source file and line for an imported line. */
+export interface ImportSource {
+  /** Absolute path of the file this line originates from */
+  filePath: string;
+  /** 1-based line number in the original (pre-resolution) source file */
+  sourceLine: number;
+}
+
 export interface ResolveImportsResult {
   content: string;
   diagnostics: DgmoError[];
+  /** resolvedLine (1-based index) → originalLine (1-based) or null for inserted lines */
+  lineMap: (number | null)[];
+  /** resolvedLine (1-based index) → import source info or null for non-imported lines */
+  importSourceMap: (ImportSource | null)[];
 }
 
 // ============================================================
@@ -96,6 +108,8 @@ function extractTagGroups(lines: string[]): TagGroupBlock[] {
 interface ParsedHeader {
   /** Lines that are NOT header/tags/tag-groups — the "content" body */
   contentLines: string[];
+  /** For each contentLine, its 0-based index in the input lines[] array */
+  contentLineIndices: number[];
   tagGroups: TagGroupBlock[];
   tagsDirective: string | null;
 }
@@ -121,6 +135,7 @@ function parseFileHeader(lines: string[]): ParsedHeader {
 
   let tagsDirective: string | null = null;
   const contentLines: string[] = [];
+  const contentLineIndices: number[] = [];
   let headerDone = false;
 
   for (let i = 0; i < lines.length; i++) {
@@ -155,9 +170,10 @@ function parseFileHeader(lines: string[]): ParsedHeader {
     }
 
     contentLines.push(lines[i]);
+    contentLineIndices.push(i);
   }
 
-  return { contentLines, tagGroups, tagsDirective };
+  return { contentLines, contentLineIndices, tagGroups, tagsDirective };
 }
 
 // ============================================================
@@ -179,7 +195,12 @@ export async function resolveOrgImports(
 ): Promise<ResolveImportsResult> {
   const diagnostics: DgmoError[] = [];
   const result = await resolveFile(content, filePath, readFileFn, diagnostics, new Set([filePath]), 0);
-  return { content: result, diagnostics };
+  return {
+    content: result.content,
+    diagnostics,
+    lineMap: result.lineMap,
+    importSourceMap: result.importSourceMap,
+  };
 }
 
 async function resolveFile(
@@ -189,11 +210,11 @@ async function resolveFile(
   diagnostics: DgmoError[],
   ancestorChain: Set<string>,
   depth: number,
-): Promise<string> {
+): Promise<{ content: string; lineMap: (number | null)[]; importSourceMap: (ImportSource | null)[] }> {
   const lines = content.split('\n');
 
   // ---- Step 1: Identify header, tags directive, inline tag groups ----
-  const headerLines: string[] = [];
+  const headerLines: { text: string; originalLine: number }[] = [];
   let tagsDirective: string | null = null;
   const inlineTagGroups = extractTagGroups(lines);
   const bodyStartIndex = findBodyStart(lines);
@@ -203,7 +224,7 @@ async function resolveFile(
   for (let i = 0; i < bodyStartIndex; i++) {
     const trimmed = lines[i].trim();
     if (trimmed === '' || trimmed.startsWith('//')) {
-      headerLines.push(lines[i]);
+      headerLines.push({ text: lines[i], originalLine: i + 1 });
       continue;
     }
     if (isTagBlockHeading(trimmed)) continue; // skip inline tag group headings
@@ -216,7 +237,7 @@ async function resolveFile(
       continue;
     }
 
-    headerLines.push(lines[i]);
+    headerLines.push({ text: lines[i], originalLine: i + 1 });
   }
 
   // ---- Step 2: Resolve tags: directive ----
@@ -236,7 +257,7 @@ async function resolveFile(
 
   // ---- Step 3: Resolve import: directives in body ----
   const bodyLines = lines.slice(bodyStartIndex);
-  const resolvedBodyLines: string[] = [];
+  const resolvedBodyLines: { text: string; originalLine: number | null; importSource: ImportSource | null }[] = [];
   const importedTagGroups: TagGroupBlock[] = [];
 
   for (let i = 0; i < bodyLines.length; i++) {
@@ -250,7 +271,7 @@ async function resolveFile(
       if (isTagBlockHeading(trimmed) || (inlineTagGroups.length > 0 && isTagGroupEntry(line, bodyLines, i))) {
         continue;
       }
-      resolvedBodyLines.push(line);
+      resolvedBodyLines.push({ text: line, originalLine: lineNumber, importSource: null });
       continue;
     }
 
@@ -299,7 +320,7 @@ async function resolveFile(
     );
 
     // Strip header, extract tag groups from resolved content
-    const resolvedLines = resolved.split('\n');
+    const resolvedLines = resolved.content.split('\n');
     const parsed = parseFileHeader(resolvedLines);
 
     // Collect tag groups from imported file (lowest priority)
@@ -307,23 +328,43 @@ async function resolveFile(
       importedTagGroups.push(group);
     }
 
-    // Re-indent and insert content lines
-    const importedContentLines = parsed.contentLines.filter(
-      (l) => l.trim() !== ''  // skip trailing blank lines
-    );
+    // Re-indent and insert content lines, computing import source for each
+    const importedContentLines: { text: string; index: number }[] = [];
+    for (let j = 0; j < parsed.contentLines.length; j++) {
+      if (parsed.contentLines[j].trim() !== '') {
+        importedContentLines.push({ text: parsed.contentLines[j], index: parsed.contentLineIndices[j] });
+      }
+    }
 
     // Trim trailing empty lines but keep internal structure
     let lastNonEmpty = importedContentLines.length - 1;
-    while (lastNonEmpty >= 0 && importedContentLines[lastNonEmpty].trim() === '') {
+    while (lastNonEmpty >= 0 && importedContentLines[lastNonEmpty].text.trim() === '') {
       lastNonEmpty--;
     }
     const trimmedImported = importedContentLines.slice(0, lastNonEmpty + 1);
 
-    for (const importedLine of trimmedImported) {
-      if (importedLine.trim() === '') {
-        resolvedBodyLines.push('');
+    for (const entry of trimmedImported) {
+      // Compute import source: which file and line does this content originate from?
+      // entry.index is the 0-based index in resolved.content.split('\n')
+      const resolvedLineNum = entry.index + 1; // 1-based line in the resolved imported content
+
+      // Check if this line itself came from a deeper import
+      let importSource: ImportSource | null = null;
+      if (resolved.importSourceMap[resolvedLineNum]) {
+        // Nested import — use the deepest source
+        importSource = resolved.importSourceMap[resolvedLineNum];
       } else {
-        resolvedBodyLines.push(indent + importedLine);
+        // Direct content from this imported file
+        const origLine = resolved.lineMap[resolvedLineNum];
+        if (origLine != null) {
+          importSource = { filePath: importAbsPath, sourceLine: origLine };
+        }
+      }
+
+      if (entry.text.trim() === '') {
+        resolvedBodyLines.push({ text: '', originalLine: lineNumber, importSource });
+      } else {
+        resolvedBodyLines.push({ text: indent + entry.text, originalLine: lineNumber, importSource });
       }
     }
   }
@@ -334,10 +375,17 @@ async function resolveFile(
 
   // ---- Step 5: Rebuild output ----
   const outputLines: string[] = [];
+  // lineMap[i] maps resolved line i (1-based) to original line (1-based) or null
+  // importSourceMap[i] maps resolved line i (1-based) to import source or null
+  // Index 0 is unused padding so indices align with 1-based line numbers
+  const lineMap: (number | null)[] = [null];
+  const importSourceMap: (ImportSource | null)[] = [null];
 
   // Header lines (chart:, title:, options — no tags: or tag groups)
-  for (const line of headerLines) {
-    outputLines.push(line);
+  for (const entry of headerLines) {
+    outputLines.push(entry.text);
+    lineMap.push(entry.originalLine);
+    importSourceMap.push(null);
   }
 
   // Merged tag groups
@@ -345,12 +393,27 @@ async function resolveFile(
     // Ensure blank line before tag groups if header has content
     if (outputLines.length > 0 && outputLines[outputLines.length - 1].trim() !== '') {
       outputLines.push('');
+      lineMap.push(null);
+      importSourceMap.push(null);
     }
     for (const group of mergedGroups) {
+      // Find original line for inline tag groups, null for external
+      const inlineMatch = inlineTagGroups.find((g) => g.name === group.name);
       for (const line of group.lines) {
         outputLines.push(line);
+        // Inline tag groups map to their original line, external ones map to null
+        if (inlineMatch) {
+          // Find the original line index of this tag group in the source
+          const srcIdx = lines.indexOf(line);
+          lineMap.push(srcIdx >= 0 ? srcIdx + 1 : null);
+        } else {
+          lineMap.push(null);
+        }
+        importSourceMap.push(null);
       }
       outputLines.push(''); // blank line between groups
+      lineMap.push(null);
+      importSourceMap.push(null);
     }
   }
 
@@ -358,12 +421,16 @@ async function resolveFile(
   // Ensure blank line separator
   if (resolvedBodyLines.length > 0 && outputLines.length > 0 && outputLines[outputLines.length - 1].trim() !== '') {
     outputLines.push('');
+    lineMap.push(null);
+    importSourceMap.push(null);
   }
-  for (const line of resolvedBodyLines) {
-    outputLines.push(line);
+  for (const entry of resolvedBodyLines) {
+    outputLines.push(entry.text);
+    lineMap.push(entry.originalLine);
+    importSourceMap.push(entry.importSource);
   }
 
-  return outputLines.join('\n');
+  return { content: outputLines.join('\n'), lineMap, importSourceMap };
 }
 
 // ============================================================

package/src/palettes/color-utils.ts

@@ -145,6 +145,36 @@ export function shade(hex: string, base: string, amount: number): string {
   return `#${sr.toString(16).padStart(2, '0')}${sg.toString(16).padStart(2, '0')}${sb.toString(16).padStart(2, '0')}`;
 }
 
+// ============================================================
+// Color Mixing
+// ============================================================
+
+/**
+ * Blend two hex colors by percentage.
+ * `pct` = 0 → 100% of `b`, `pct` = 100 → 100% of `a`.
+ *
+ * Used by all renderers for tinted fills and strokes.
+ */
+export function mix(a: string, b: string, pct: number): string {
+  const parse = (h: string) => {
+    const r = h.replace('#', '');
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [
+      parseInt(f.substring(0, 2), 16),
+      parseInt(f.substring(2, 4), 16),
+      parseInt(f.substring(4, 6), 16),
+    ];
+  };
+  const [ar, ag, ab] = parse(a),
+    [br, bg, bb] = parse(b),
+    t = pct / 100;
+  const c = (x: number, y: number) =>
+    Math.round(x * t + y * (1 - t))
+      .toString(16)
+      .padStart(2, '0');
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
+
 // ============================================================
 // Contrast / Accessibility
 // ============================================================

package/src/render.ts

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