@diagrammo/dgmo 0.31.0 → 0.32.1

package/src/sequence/renderer.ts

@@ -4,7 +4,7 @@
 
 import * as d3Selection from 'd3-selection';
 import type { PaletteColors } from '../palettes';
-import { contrastText, mix, shapeFill } from '../palettes/color-utils';
+import { contrastText, mix, shapeFill, themeBaseBg } from '../palettes/color-utils';
 import {
   parseInlineMarkdown,
   truncateBareUrl,
@@ -2010,7 +2010,7 @@ export function renderSequenceDiagram(
     const fillColor = groupTagColor
       ? mix(
           groupTagColor,
-          isDark ? palette.surface : palette.bg,
+          themeBaseBg(palette, isDark),
           isDark ? 15 : 20
         )
       : isDark
@@ -2139,7 +2139,7 @@ export function renderSequenceDiagram(
       const pFill = effectiveTagColor
         ? mix(
             effectiveTagColor,
-            isDark ? palette.surface : palette.bg,
+            themeBaseBg(palette, isDark),
             isDark ? 30 : 40
           )
         : isDark
@@ -2507,7 +2507,7 @@ export function renderSequenceDiagram(
       .attr('y', y1)
       .attr('width', sActivationWidth)
       .attr('height', y2 - y1)
-      .attr('fill', isDark ? palette.surface : palette.bg);
+      .attr('fill', themeBaseBg(palette, isDark));
 
     // Canonical 25% tint via shapeFill() (or full intent when solid-fill is on).
     const actFill = shapeFill(palette, actBaseColor, isDark, { solid });

package/src/sitemap/parser.ts

@@ -8,6 +8,7 @@ import {
   descriptionBareRemovedMessage,
   formatDgmoError,
   makeDgmoError,
+  makeFail,
   METADATA_DIAGNOSTIC_CODES,
   pipeOperatorRemovedMessage,
   suggest,
@@ -165,12 +166,7 @@ export function parseSitemap(
     error: null,
   };
 
-  const fail = (line: number, message: string): ParsedSitemap => {
-    const diag = makeDgmoError(line, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
 
   const pushError = (line: number, message: string): void => {
     const diag = makeDgmoError(line, message);
@@ -324,7 +320,12 @@ export function parseSitemap(
       const indent = measureIndent(line);
       if (indent > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         // Bare value (no explicit color) → keep it; finalized below.
         currentTagGroup.entries.push({
           value: label,

package/src/sitemap/renderer.ts

@@ -6,7 +6,7 @@ import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
-import { contrastText, mix, shapeFill } from '../palettes/color-utils';
+import { contrastText, mix, shapeFill, themeBaseBg } from '../palettes/color-utils';
 import type { ParsedSitemap } from './types';
 import type { SitemapLayoutResult, SitemapLegendGroup } from './layout';
 import { renderInlineText } from '../utils/inline-markdown';
@@ -83,7 +83,7 @@ function containerFill(
   nodeColor?: string
 ): string {
   if (nodeColor) {
-    return mix(nodeColor, isDark ? palette.surface : palette.bg, 10);
+    return mix(nodeColor, themeBaseBg(palette, isDark), 10);
   }
   return mix(palette.surface, palette.bg, 40);
 }

package/src/tech-radar/parser.ts

@@ -1,6 +1,6 @@
 import {
-  formatDgmoError,
   makeDgmoError,
+  makeFail,
   METADATA_DIAGNOSTIC_CODES,
   pipeOperatorRemovedMessage,
   suggest,
@@ -72,12 +72,7 @@ export function parseTechRadar(content: string): ParsedTechRadar {
     error: null,
   };
 
-  const fail = (line: number, message: string): ParsedTechRadar => {
-    const diag = makeDgmoError(line, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
 
   const warn = (line: number, message: string): void => {
     result.diagnostics.push(makeDgmoError(line, message, 'warning'));

package/src/timeline/renderer.ts

@@ -24,7 +24,7 @@ import type {
 import { parseTimelineDate } from '../timeline/parser';
 import type { PaletteColors } from '../palettes';
 import { getSeriesColors } from '../palettes';
-import { mix, shapeFill } from '../palettes/color-utils';
+import { mix, shapeFill, themeBaseBg } from '../palettes/color-utils';
 import { resolveTagColor } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import {
@@ -808,7 +808,7 @@ function setupTimeline(
   const textColor = palette.text;
   const mutedColor = palette.border;
   const bgColor = palette.bg;
-  const bg = isDark ? palette.surface : palette.bg;
+  const bg = themeBaseBg(palette, isDark);
   const colors = getSeriesColors(palette);
 
   const groupColorMap = new Map<string, string>();
@@ -1451,7 +1451,7 @@ function renderTimelineHorizontalTimeSort(
   setup: TimelineSetup,
   hovers: TimelineHoverHelpers,
   onClickItem: ((lineNumber: number) => void) | undefined,
-  _exportDims: D3ExportDimensions | undefined,
+  exportDims: D3ExportDimensions | undefined,
   _swimlaneTagGroup: string | null | undefined,
   _activeTagGroup: string | null | undefined,
   _onTagStateChange:
@@ -1461,6 +1461,7 @@ function renderTimelineHorizontalTimeSort(
 ): void {
   const {
     width,
+    height,
     tooltip,
     solid,
     textColor,
@@ -1538,6 +1539,15 @@ function renderTimelineHorizontalTimeSort(
   const innerHeight = rowH * sorted.length;
   const usedHeight = margin.top + innerHeight + margin.bottom;
 
+  // On-screen (non-export) the content can be taller than the host pane. Rather
+  // than overflow it (forcing the user to scroll), scale the whole SVG down to
+  // fit the available height: the viewBox keeps the natural content geometry
+  // while the rendered height is clamped to the container, and
+  // preserveAspectRatio uniformly shrinks + centers it. Export keeps the full
+  // natural height so the image is never compressed.
+  const fitToContainer = !exportDims && height > 0 && usedHeight > height;
+  const svgHeight = fitToContainer ? height : usedHeight;
+
   const xScale = d3Scale
     .scaleLinear()
     .domain([minDate - datePadding, maxDate + datePadding])
@@ -1547,12 +1557,12 @@ function renderTimelineHorizontalTimeSort(
     .select(container)
     .append('svg')
     .attr('width', width)
-    .attr('height', usedHeight)
+    .attr('height', svgHeight)
     .attr('viewBox', `0 0 ${width} ${usedHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('background', bgColor);
 
-  if (ctx.isBelowFloor) {
+  if (ctx.isBelowFloor && !fitToContainer) {
     svg.attr('width', '100%');
   }
 

package/src/utils/parsing.ts

@@ -8,6 +8,7 @@ import {
   RECOGNIZED_COLOR_NAMES,
   resolveColor,
   resolveColorWithDiagnostic,
+  invalidColorDiagnostic,
 } from '../colors';
 import {
   emptyMetadataValueMessage,
@@ -122,7 +123,18 @@ export function extractColor(
   if (lastSpaceIdx < 0) return { label };
   const trailing = label.substring(lastSpaceIdx + 1);
   // Case-sensitive lowercase match against the closed 11-name palette.
-  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) {
+    // Not a valid color. If it nonetheless LOOKS like an intended color (a hex
+    // literal or a CSS color name like `pink`), flag it — otherwise the
+    // trailing-token rule would silently swallow it into the label with no
+    // diagnostic, and the MCP color gate would have nothing to block on. A
+    // genuine label word (`Zinfandel`) is not color-like, so it stays as-is.
+    if (diagnostics && line !== undefined) {
+      const diag = invalidColorDiagnostic(trailing, line);
+      if (diag) diagnostics.push(diag);
+    }
+    return { label };
+  }
   let color: string | undefined;
   if (diagnostics && line !== undefined) {
     color = resolveColorWithDiagnostic(trailing, line, diagnostics, palette);

package/src/utils/scaling.ts

@@ -21,6 +21,41 @@ export class ScaleContext {
     return new ScaleContext(clamped, minScaleFactor);
   }
 
+  /**
+   * Fit content into a bounding box, scaling by whichever dimension is more
+   * constraining (the smaller of the width- and height-fit ratios) so the
+   * diagram never overflows the canvas in either axis. Like {@link from}, the
+   * factor is clamped to `[minScaleFactor, 1]` (content is never enlarged, and
+   * never shrunk past the readability floor).
+   */
+  static fromBox(
+    containerWidth: number,
+    idealWidth: number,
+    containerHeight: number,
+    idealHeight: number,
+    minScaleFactor = DEFAULT_MIN_SCALE_FACTOR
+  ): ScaleContext {
+    const wRaw = idealWidth > 0 ? containerWidth / idealWidth : 1;
+    const hRaw = idealHeight > 0 ? containerHeight / idealHeight : 1;
+    const raw = Math.min(wRaw, hRaw);
+    const clamped = Math.max(Math.min(raw, 1), minScaleFactor);
+    return new ScaleContext(clamped, minScaleFactor);
+  }
+
+  /**
+   * Build a context from an explicit raw factor (clamped to
+   * `[minScaleFactor, 1]`). Used to refine a fit iteratively: layout scaling is
+   * non-linear (gaps shrink faster than floored text), so the first-pass factor
+   * can still overflow — re-measure the laid-out result and tighten.
+   */
+  static fromFactor(
+    rawFactor: number,
+    minScaleFactor = DEFAULT_MIN_SCALE_FACTOR
+  ): ScaleContext {
+    const clamped = Math.max(Math.min(rawFactor, 1), minScaleFactor);
+    return new ScaleContext(clamped, minScaleFactor);
+  }
+
   static identity(): ScaleContext {
     return new ScaleContext(1, DEFAULT_MIN_SCALE_FACTOR);
   }
@@ -42,7 +77,9 @@ export class ScaleContext {
 }
 
 // ============================================================
-// Minimum dimensions formula table
+// ContentCounts — per-chart-type content tallies that feed the registry's
+// `minDims` formulas (chart-type-registry.ts). The formulas themselves moved
+// there (Story 111.5) so a chart type's sizing is defined in one descriptor.
 // ============================================================
 
 export interface ContentCounts {
@@ -57,83 +94,3 @@ export interface ContentCounts {
   roles?: number;
   blips?: number;
 }
-
-const DEFAULT_MIN = { width: 300, height: 200 };
-
-export function computeMinDimensions(
-  chartType: string,
-  counts: ContentCounts
-): { width: number; height: number } {
-  switch (chartType) {
-    case 'sequence':
-      return {
-        width: Math.max((counts.participants ?? 2) * 80, 320),
-        height: Math.max((counts.messages ?? 1) * 20 + 120, 200),
-      };
-    case 'raci':
-      return {
-        width: Math.max((counts.roles ?? 2) * 50 + 180, 300),
-        height: Math.max((counts.tasks ?? 1) * 28 + 80, 200),
-      };
-    case 'mindmap':
-      return {
-        width: Math.max((counts.nodes ?? 3) * 30, 300),
-        height: Math.max((counts.depth ?? 2) * 60, 200),
-      };
-    case 'tech-radar':
-      return { width: 360, height: 400 };
-    case 'heatmap':
-      return {
-        width: Math.max((counts.columns ?? 3) * 40, 300),
-        height: Math.max((counts.rows ?? 3) * 30 + 60, 200),
-      };
-    case 'arc':
-      return {
-        width: 300,
-        height: Math.max((counts.nodes ?? 3) * 20 + 120, 200),
-      };
-    case 'org':
-      return {
-        width: Math.max((counts.nodes ?? 3) * 60, 300),
-        height: Math.max((counts.depth ?? 2) * 80, 200),
-      };
-    case 'gantt':
-      return {
-        width: 400,
-        height: Math.max((counts.tasks ?? 3) * 24 + 80, 200),
-      };
-    case 'kanban':
-      return {
-        width: Math.max((counts.columns ?? 3) * 120, 360),
-        height: 300,
-      };
-    case 'er':
-      return {
-        width: Math.max((counts.nodes ?? 2) * 140, 300),
-        height: Math.max((counts.nodes ?? 2) * 80, 200),
-      };
-    case 'class':
-      return {
-        width: Math.max((counts.nodes ?? 2) * 140, 300),
-        height: Math.max((counts.nodes ?? 2) * 80, 200),
-      };
-    case 'flowchart':
-    case 'state':
-      return {
-        width: Math.max((counts.nodes ?? 3) * 60, 300),
-        height: Math.max((counts.nodes ?? 3) * 50, 200),
-      };
-    case 'pert':
-      return {
-        width: Math.max((counts.tasks ?? 3) * 80, 340),
-        height: Math.max((counts.tasks ?? 3) * 40 + 80, 200),
-      };
-    case 'infra':
-      return {
-        width: Math.max((counts.nodes ?? 3) * 80, 300),
-        height: Math.max((counts.nodes ?? 3) * 60, 200),
-      };
-    default:
-      return { ...DEFAULT_MIN };
-  }
-}

package/src/utils/tag-groups.ts

@@ -572,6 +572,44 @@ export function validateTagGroupNames(
   }
 }
 
+// ── Parent → Child Tag Cascade ────────────────────────────
+
+/**
+ * Cascade explicit tag values down a node tree: a child that has no value of
+ * its own for a given tag group inherits the value of its nearest ancestor
+ * that does. A child's own explicit value always wins and becomes the new
+ * inherited value for its subtree.
+ *
+ * Run this on the parsed tree BEFORE {@link injectDefaultTagMetadata} so that
+ * an inherited ancestor value takes precedence over the group's global
+ * default — only nodes with no tagged ancestor fall through to the default.
+ * Idempotent and mutates `metadata` in place.
+ *
+ * @param roots     Root nodes of the tree (each with mutable `metadata` + `children`)
+ * @param tagGroups Declared tag groups (only `.name` is used)
+ */
+export function cascadeTagMetadata<
+  T extends { metadata: Record<string, string>; children: readonly T[] },
+>(roots: readonly T[], tagGroups: ReadonlyArray<{ name: string }>): void {
+  const keys = tagGroups.map((g) => g.name.toLowerCase());
+  if (keys.length === 0) return;
+
+  const walk = (node: T, inherited: Record<string, string>): void => {
+    const childInherited = { ...inherited };
+    for (const key of keys) {
+      const own = node.metadata[key];
+      if (own) {
+        childInherited[key] = own; // own explicit value propagates downward
+      } else if (inherited[key]) {
+        node.metadata[key] = inherited[key]; // inherit from nearest ancestor
+      }
+    }
+    for (const child of node.children) walk(child, childInherited);
+  };
+
+  for (const root of roots) walk(root, {});
+}
+
 // ── Default Metadata Injection ────────────────────────────
 
 /**

package/src/visualizations/parse.ts

@@ -215,7 +215,12 @@ function parseVisualizationFull(
     // Timeline tag group entries (indented under tag heading)
     if (currentTimelineTagGroup && indent > 0) {
       const { text: entryText, isDefault } = stripDefaultModifier(line);
-      const { label, color } = extractColor(entryText, palette);
+      const { label, color } = extractColor(
+        entryText,
+        palette,
+        result.diagnostics,
+        lineNumber
+      );
       if (color) {
         if (isDefault) {
           currentTimelineTagGroup.defaultValue = label;

package/src/wireframe/parser.ts

@@ -895,7 +895,12 @@ export function parseWireframe(content: string): ParsedWireframe {
       // Indented tag entry: `Value color` or `Value color default`
       if (indent > 0 && currentTagGroup) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry);
+        const { label, color } = extractColor(
+          cleanEntry,
+          undefined,
+          diagnostics,
+          lineNumber
+        );
         // Bare value (no explicit color) → keep it; finalized below.
         currentTagGroup.entries.push({
           value: label,