@diagrammo/dgmo 0.6.3 → 0.7.1

package/package.json

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

package/src/c4/parser.ts

@@ -11,6 +11,7 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
+  MULTIPLE_PIPE_WARNING,
   CHART_TYPE_RE,
   TITLE_RE,
   OPTION_RE,
@@ -411,7 +412,7 @@ export function parseC4(
         // Otherwise it's a deployment node (possibly with pipe metadata)
         const segments = trimmed.split('|').map((s) => s.trim());
         const nodeName = segments[0];
-        const metadata = parsePipeMetadata(segments, aliasMap);
+        const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
         const shape = inferC4Shape(nodeName, metadata.tech ?? metadata.technology);
 
         const dNode: C4DeploymentNode = {
@@ -598,7 +599,7 @@ export function parseC4(
         namePart = namePart.substring(0, isAMatch.index!).trim();
       }
 
-      const metadata = parsePipeMetadata(segments, aliasMap);
+      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
 
       // Determine shape: explicit > inference
       const shape =

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;
 }