@diagrammo/dgmo 0.6.3 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/c4/renderer.ts

@@ -256,7 +256,7 @@ export function renderC4Context(
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
 
   const svg = d3Selection
     .select(container)
@@ -592,12 +592,12 @@ export function renderC4Context(
 
   // ── Legend ──
   if (hasLegend) {
-    // App mode: fixed overlay at SVG bottom so it's always readable regardless of scale.
+    // App mode: fixed overlay at SVG top so it's always readable regardless of scale.
     // Export mode: render inside scaled contentG at layout coordinates.
     const legendParent = fixedLegend
       ? svg.append('g')
           .attr('class', 'c4-legend-fixed')
-          .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`)
+          .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
       legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
@@ -1298,7 +1298,7 @@ export function renderC4Containers(
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
 
   const svg = d3Selection
     .select(container)
@@ -1707,12 +1707,12 @@ export function renderC4Containers(
 
   // ── Legend ──
   if (hasLegend) {
-    // App mode: fixed overlay at SVG bottom so it's always readable regardless of scale.
+    // App mode: fixed overlay at SVG top so it's always readable regardless of scale.
     // Export mode: render inside scaled contentG at layout coordinates.
     const legendParent = fixedLegend
       ? svg.append('g')
           .attr('class', 'c4-legend-fixed')
-          .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`)
+          .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
       legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());

package/src/class/renderer.ts

@@ -6,6 +6,18 @@ 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,
+} from '../utils/legend-constants';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedClassDiagram, ClassModifier, RelationshipType } from './types';
@@ -51,6 +63,49 @@ function nodeStroke(palette: PaletteColors, modifier: ClassModifier | undefined,
   return nodeColor ?? modifierColor(modifier, palette, colorOff);
 }
 
+// ============================================================
+// Legend helpers
+// ============================================================
+
+interface ClassLegendEntry {
+  label: string;
+  colorKey: keyof PaletteColors['colors'];
+}
+
+const CLASS_TYPE_MAP: Record<string, ClassLegendEntry> = {
+  class:     { label: 'Class',     colorKey: 'teal' },
+  abstract:  { label: 'Abstract',  colorKey: 'purple' },
+  interface: { label: 'Interface', colorKey: 'blue' },
+  enum:      { label: 'Enum',      colorKey: 'yellow' },
+};
+
+const CLASS_TYPE_ORDER = ['class', 'abstract', 'interface', 'enum'];
+
+function collectClassTypes(parsed: ParsedClassDiagram): ClassLegendEntry[] {
+  if (parsed.options?.color === 'off') return [];
+
+  const present = new Set<string>();
+  for (const c of parsed.classes) {
+    if (c.color) continue; // explicit color override — skip
+    present.add(c.modifier ?? 'class');
+  }
+  return CLASS_TYPE_ORDER.filter((k) => present.has(k)).map((k) => CLASS_TYPE_MAP[k]);
+}
+
+const LEGEND_GROUP_NAME = 'Type';
+
+function legendEntriesWidth(entries: ClassLegendEntry[]): 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;
+}
+
+function classTypeKey(modifier: ClassModifier | undefined): string {
+  return modifier ?? 'class';
+}
+
 // ============================================================
 // Visibility symbols
 // ============================================================
@@ -107,7 +162,8 @@ export function renderClassDiagram(
   palette: PaletteColors,
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
-  exportDims?: { width?: number; height?: number }
+  exportDims?: { width?: number; height?: number },
+  legendActive?: boolean | null
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -115,17 +171,22 @@ export function renderClassDiagram(
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
+  const legendEntries = collectClassTypes(parsed);
+  const hasLegend = legendEntries.length > 1; // only show when multiple types present
+
   const titleHeight = parsed.title ? 40 : 0;
+  const LEGEND_FIXED_GAP = 8;
+  const legendReserve = hasLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
   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 offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  const offsetY = titleHeight + legendReserve + DIAGRAM_PADDING;
 
   const svg = d3Selection
     .select(container)
@@ -244,6 +305,114 @@ export function renderClassDiagram(
     }
   }
 
+  // ── Legend ──
+  // legendActive: true = expanded (default), false = collapsed pill only
+  const isLegendExpanded = legendActive !== false;
+  if (hasLegend) {
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
+
+    const pillWidth = LEGEND_GROUP_NAME.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+    const entriesW = legendEntriesWidth(legendEntries);
+
+    const totalW = isLegendExpanded
+      ? LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesW
+      : pillWidth;
+
+    const legendX = (width - totalW) / 2;
+    const legendY = titleHeight;
+
+    const legendG = svg
+      .append('g')
+      .attr('class', 'cd-legend')
+      .attr('data-legend-group', 'type')
+      .attr('transform', `translate(${legendX}, ${legendY})`)
+      .style('cursor', 'pointer');
+
+    if (isLegendExpanded) {
+      // Outer capsule
+      legendG.append('rect')
+        .attr('width', totalW)
+        .attr('height', LEGEND_HEIGHT)
+        .attr('rx', LEGEND_HEIGHT / 2)
+        .attr('fill', groupBg);
+
+      // Inner pill
+      legendG.append('rect')
+        .attr('x', LEGEND_CAPSULE_PAD)
+        .attr('y', LEGEND_CAPSULE_PAD)
+        .attr('width', pillWidth)
+        .attr('height', pillH)
+        .attr('rx', pillH / 2)
+        .attr('fill', palette.bg);
+
+      legendG.append('rect')
+        .attr('x', LEGEND_CAPSULE_PAD)
+        .attr('y', LEGEND_CAPSULE_PAD)
+        .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);
+
+      legendG.append('text')
+        .attr('x', LEGEND_CAPSULE_PAD + 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', palette.text)
+        .attr('text-anchor', 'middle')
+        .attr('font-family', FONT_FAMILY)
+        .text(LEGEND_GROUP_NAME);
+
+      // Entries
+      let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+      for (const entry of legendEntries) {
+        const color = palette.colors[entry.colorKey];
+        const typeKey = CLASS_TYPE_ORDER.find((k) => CLASS_TYPE_MAP[k] === entry)!;
+
+        const entryG = legendG.append('g')
+          .attr('data-legend-entry', typeKey);
+
+        entryG.append('circle')
+          .attr('cx', entryX + LEGEND_DOT_R)
+          .attr('cy', LEGEND_HEIGHT / 2)
+          .attr('r', LEGEND_DOT_R)
+          .attr('fill', 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)
+          .text(entry.label);
+
+        entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.label.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      }
+    } else {
+      // Collapsed: single muted pill
+      legendG.append('rect')
+        .attr('width', pillWidth)
+        .attr('height', LEGEND_HEIGHT)
+        .attr('rx', LEGEND_HEIGHT / 2)
+        .attr('fill', groupBg);
+
+      legendG.append('text')
+        .attr('x', 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', palette.textMuted)
+        .attr('text-anchor', 'middle')
+        .attr('font-family', FONT_FAMILY)
+        .text(LEGEND_GROUP_NAME);
+    }
+  }
+
   // ── Content group ──
   const contentG = svg
     .append('g')
@@ -320,7 +489,8 @@ export function renderClassDiagram(
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'cd-class')
       .attr('data-line-number', String(node.lineNumber))
-      .attr('data-node-id', node.id);
+      .attr('data-node-id', node.id)
+      .attr('data-cd-type', classTypeKey(node.modifier));
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
@@ -331,8 +501,11 @@ export function renderClassDiagram(
     const w = node.width;
     const h = node.height;
     const colorOff = parsed.options?.color === 'off';
-    const fill = nodeFill(palette, isDark, node.modifier, node.color, colorOff);
-    const stroke = nodeStroke(palette, node.modifier, node.color, colorOff);
+    // When legend is collapsed, use neutral color for nodes without explicit color
+    const neutralize = hasLegend && !isLegendExpanded && !node.color;
+    const effectiveColor = neutralize ? palette.primary : node.color;
+    const fill = nodeFill(palette, isDark, node.modifier, effectiveColor, colorOff);
+    const stroke = nodeStroke(palette, node.modifier, effectiveColor, colorOff);
 
     // Outer rectangle
     nodeG.append('rect')
@@ -504,8 +677,11 @@ export function renderClassDiagramForExport(
   const layout = layoutClassDiagram(parsed);
   const isDark = theme === 'dark';
 
+  const legendEntries = collectClassTypes(parsed);
+  const EXPORT_LEGEND_GAP = 8;
+  const legendReserve = legendEntries.length > 1 ? LEGEND_HEIGHT + EXPORT_LEGEND_GAP : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0);
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0) + legendReserve;
 
   return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderClassDiagram(

package/src/cli.ts

@@ -8,21 +8,13 @@ import { render } from './render';
 import { parseDgmo, getAllChartTypes } from './dgmo-router';
 import { parseDgmoChartType } from './dgmo-router';
 import { formatDgmoError } from './diagnostics';
-import { getPalette } from './palettes/registry';
+import { getPalette, getAvailablePalettes } from './palettes';
 import { DEFAULT_FONT_NAME } from './fonts';
 import { encodeDiagramUrl } from './sharing';
 import { resolveOrgImports } from './org/resolver';
 
-const PALETTES = [
-  'nord',
-  'solarized',
-  'catppuccin',
-  'rose-pine',
-  'gruvbox',
-  'tokyo-night',
-  'one-dark',
-  'bold',
-];
+// Derived from the palette registry so new palettes are auto-included.
+const PALETTES = getAvailablePalettes().map((p) => p.id);
 
 const THEMES = ['light', 'dark', 'transparent'] as const;
 

package/src/colors.ts

@@ -41,9 +41,9 @@ export const colorNames: Record<string, string> = {
 };
 
 /**
- * Resolves a color name or hex code to a valid CSS color.
+ * Resolves a color name to a valid CSS color.
  * When a palette is provided, named colors resolve against its color map first.
- * Hex codes (e.g. "#ff0000") are passed through regardless of palette (FR8).
+ * Hex codes are NOT supported — use named colors only.
  * Unknown names are returned as-is.
  */
 export function resolveColor(
@@ -51,7 +51,6 @@ export function resolveColor(
   palette?: { colors: Record<string, string> }
 ): string {
   const lower = color.toLowerCase();
-  if (lower.startsWith('#')) return lower;
 
   if (palette) {
     const named = palette.colors[lower];
@@ -59,6 +58,7 @@ export function resolveColor(
   }
 
   if (colorNames[lower]) return colorNames[lower];
+  // Unknown color name — return as-is so callers can detect + warn
   return color;
 }
 

package/src/d3.ts

@@ -3059,7 +3059,7 @@ export function renderTimeline(
     }
   }
 
-  // Reserve space for tag legend at the bottom of chart content
+  // Reserve space for tag legend at the top of chart content (below title/headers)
   const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
 
   // ================================================================
@@ -3099,9 +3099,9 @@ export function renderTimeline(
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 40 + scaleMargin,
-        bottom: 40 + tagLegendReserve,
+        bottom: 40,
         left: 60 + scaleMargin,
       };
       const innerWidth = width - margin.left - margin.right;
@@ -3254,12 +3254,14 @@ export function renderTimeline(
             const rectH = Math.max(y2 - y, 4);
 
             let fill: string = mix(evColor, bg, 30);
+            let stroke: string = evColor;
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
+              const strokeGradientId = `uncertain-vg-s-${ev.lineNumber}`;
               const defs =
                 svg.select('defs').node() || svg.append('defs').node();
-              d3Selection
-                .select(defs as Element)
+              const defsEl = d3Selection.select(defs as Element);
+              defsEl
                 .append('linearGradient')
                 .attr('id', gradientId)
                 .attr('x1', '0%')
@@ -3277,7 +3279,26 @@ export function renderTimeline(
                 .attr('offset', (d) => d.offset)
                 .attr('stop-color', mix(laneColor, bg, 30))
                 .attr('stop-opacity', (d) => d.opacity);
+              defsEl
+                .append('linearGradient')
+                .attr('id', strokeGradientId)
+                .attr('x1', '0%')
+                .attr('y1', '0%')
+                .attr('x2', '0%')
+                .attr('y2', '100%')
+                .selectAll('stop')
+                .data([
+                  { offset: '0%', opacity: 1 },
+                  { offset: '80%', opacity: 1 },
+                  { offset: '100%', opacity: 0 },
+                ])
+                .enter()
+                .append('stop')
+                .attr('offset', (d) => d.offset)
+                .attr('stop-color', evColor)
+                .attr('stop-opacity', (d) => d.opacity);
               fill = `url(#${gradientId})`;
+              stroke = `url(#${strokeGradientId})`;
             }
 
             evG
@@ -3288,7 +3309,7 @@ export function renderTimeline(
               .attr('height', rectH)
               .attr('rx', 4)
               .attr('fill', fill)
-              .attr('stroke', evColor)
+              .attr('stroke', stroke)
               .attr('stroke-width', 2);
             evG
               .append('text')
@@ -3323,9 +3344,9 @@ export function renderTimeline(
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 200,
-        bottom: 40 + tagLegendReserve,
+        bottom: 40,
         left: 60 + scaleMargin,
       };
       const innerWidth = width - margin.left - margin.right;
@@ -3474,12 +3495,14 @@ export function renderTimeline(
           const rectH = Math.max(y2 - y, 4);
 
           let fill: string = mix(color, bg, 30);
+          let stroke: string = color;
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
+            const strokeGradientId = `uncertain-v-s-${ev.lineNumber}`;
             const defs =
               svg.select('defs').node() || svg.append('defs').node();
-            d3Selection
-              .select(defs as Element)
+            const defsEl = d3Selection.select(defs as Element);
+            defsEl
               .append('linearGradient')
               .attr('id', gradientId)
               .attr('x1', '0%')
@@ -3497,7 +3520,26 @@ export function renderTimeline(
               .attr('offset', (d) => d.offset)
               .attr('stop-color', mix(color, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
+            defsEl
+              .append('linearGradient')
+              .attr('id', strokeGradientId)
+              .attr('x1', '0%')
+              .attr('y1', '0%')
+              .attr('x2', '0%')
+              .attr('y2', '100%')
+              .selectAll('stop')
+              .data([
+                { offset: '0%', opacity: 1 },
+                { offset: '80%', opacity: 1 },
+                { offset: '100%', opacity: 0 },
+              ])
+              .enter()
+              .append('stop')
+              .attr('offset', (d) => d.offset)
+              .attr('stop-color', color)
+              .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
+            stroke = `url(#${strokeGradientId})`;
           }
 
           evG
@@ -3508,7 +3550,7 @@ export function renderTimeline(
             .attr('height', rectH)
             .attr('rx', 4)
             .attr('fill', fill)
-            .attr('stroke', color)
+            .attr('stroke', stroke)
             .attr('stroke-width', 2);
           evG
             .append('text')
@@ -3606,9 +3648,9 @@ export function renderTimeline(
     // Group-sorted doesn't need legend space (group names shown on left)
     const baseTopMargin = title ? 50 : 20;
     const margin = {
-      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin,
+      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
-      bottom: 40 + scaleMargin + tagLegendReserve,
+      bottom: 40 + scaleMargin,
       left: dynamicLeftMargin,
     };
     const innerWidth = width - margin.left - margin.right;
@@ -3785,12 +3827,14 @@ export function renderTimeline(
           const labelFitsInside = rectW >= estLabelWidth;
 
           let fill: string = mix(evColor, bg, 30);
+          let stroke: string = evColor;
           if (ev.uncertain) {
             // Create gradient for uncertain end - fades last 20%
             const gradientId = `uncertain-${ev.lineNumber}`;
+            const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
             const defs = svg.select('defs').node() || svg.append('defs').node();
-            d3Selection
-              .select(defs as Element)
+            const defsEl = d3Selection.select(defs as Element);
+            defsEl
               .append('linearGradient')
               .attr('id', gradientId)
               .attr('x1', '0%')
@@ -3808,7 +3852,26 @@ export function renderTimeline(
               .attr('offset', (d) => d.offset)
               .attr('stop-color', mix(evColor, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
+            defsEl
+              .append('linearGradient')
+              .attr('id', strokeGradientId)
+              .attr('x1', '0%')
+              .attr('y1', '0%')
+              .attr('x2', '100%')
+              .attr('y2', '0%')
+              .selectAll('stop')
+              .data([
+                { offset: '0%', opacity: 1 },
+                { offset: '80%', opacity: 1 },
+                { offset: '100%', opacity: 0 },
+              ])
+              .enter()
+              .append('stop')
+              .attr('offset', (d) => d.offset)
+              .attr('stop-color', evColor)
+              .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
+            stroke = `url(#${strokeGradientId})`;
           }
 
           evG
@@ -3819,7 +3882,7 @@ export function renderTimeline(
             .attr('height', BAR_H)
             .attr('rx', 4)
             .attr('fill', fill)
-            .attr('stroke', evColor)
+            .attr('stroke', stroke)
             .attr('stroke-width', 2);
 
           if (labelFitsInside) {
@@ -3887,9 +3950,9 @@ export function renderTimeline(
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: 104 + (timelineScale ? 40 : 0) + markerMargin,
+      top: 104 + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
-      bottom: 40 + scaleMargin + tagLegendReserve,
+      bottom: 40 + scaleMargin,
       left: 60,
     };
     const innerWidth = width - margin.left - margin.right;
@@ -4047,12 +4110,14 @@ export function renderTimeline(
         const labelFitsInside = rectW >= estLabelWidth;
 
         let fill: string = mix(color, bg, 30);
+        let stroke: string = color;
         if (ev.uncertain) {
           // Create gradient for uncertain end - fades last 20%
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
+          const strokeGradientId = `uncertain-ts-s-${ev.lineNumber}`;
           const defs = svg.select('defs').node() || svg.append('defs').node();
-          d3Selection
-            .select(defs as Element)
+          const defsEl = d3Selection.select(defs as Element);
+          defsEl
             .append('linearGradient')
             .attr('id', gradientId)
             .attr('x1', '0%')
@@ -4070,7 +4135,26 @@ export function renderTimeline(
             .attr('offset', (d) => d.offset)
             .attr('stop-color', mix(color, bg, 30))
             .attr('stop-opacity', (d) => d.opacity);
+          defsEl
+            .append('linearGradient')
+            .attr('id', strokeGradientId)
+            .attr('x1', '0%')
+            .attr('y1', '0%')
+            .attr('x2', '100%')
+            .attr('y2', '0%')
+            .selectAll('stop')
+            .data([
+              { offset: '0%', opacity: 1 },
+              { offset: '80%', opacity: 1 },
+              { offset: '100%', opacity: 0 },
+            ])
+            .enter()
+            .append('stop')
+            .attr('offset', (d) => d.offset)
+            .attr('stop-color', color)
+            .attr('stop-opacity', (d) => d.opacity);
           fill = `url(#${gradientId})`;
+          stroke = `url(#${strokeGradientId})`;
         }
 
         evG
@@ -4081,7 +4165,7 @@ export function renderTimeline(
           .attr('height', BAR_H)
           .attr('rx', 4)
           .attr('fill', fill)
-          .attr('stroke', color)
+          .attr('stroke', stroke)
           .attr('stroke-width', 2);
 
         if (labelFitsInside) {
@@ -4157,7 +4241,8 @@ export function renderTimeline(
     const mainSvg = d3Selection.select(container).select<SVGSVGElement>('svg');
     const mainG = mainSvg.select<SVGGElement>('g');
     if (!mainSvg.empty() && !mainG.empty()) {
-      const legendY = height - LG_HEIGHT - 4;
+      // Position legend at top, below title
+      const legendY = title ? 50 : 10;
 
       const groupBg = isDark
         ? mix(palette.surface, palette.bg, 50)
@@ -5914,7 +5999,7 @@ export async function renderForExport(
     const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderInitiativeStatus(container, isParsed, isLayout, effectivePalette, theme === 'dark', undefined, { width: exportWidth, height: exportHeight });
+    renderInitiativeStatus(container, isParsed, isLayout, effectivePalette, theme === 'dark', { exportDims: { width: exportWidth, height: exportHeight } });
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6003,6 +6088,26 @@ export async function renderForExport(
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
+  if (detectedType === 'gantt') {
+    const { parseGantt } = await import('./gantt/parser');
+    const { calculateSchedule } = await import('./gantt/calculator');
+    const { renderGantt } = await import('./gantt/renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const ganttParsed = parseGantt(content, effectivePalette);
+    if (ganttParsed.error) return '';
+
+    const resolved = calculateSchedule(ganttParsed);
+    if (resolved.error || resolved.tasks.length === 0) return '';
+
+    const EXPORT_W = 1200;
+    const EXPORT_H = 800;
+    const container = createExportContainer(EXPORT_W, EXPORT_H);
+
+    renderGantt(container, resolved, effectivePalette, theme === 'dark', undefined, { width: EXPORT_W, height: EXPORT_H });
+    return finalizeSvgExport(container, theme, effectivePalette, options);
+  }
+
   if (detectedType === 'state') {
     const { parseState } = await import('./graph/state-parser');
     const { layoutGraph } = await import('./graph/layout');