@diagrammo/dgmo 0.2.21 → 0.2.23

package/src/initiative-status/types.ts

@@ -0,0 +1,43 @@
+// ============================================================
+// Initiative Status Diagram — Types
+// ============================================================
+
+import type { DgmoError } from '../diagnostics';
+import type { ParticipantType } from '../sequence/parser';
+
+export type InitiativeStatus = 'done' | 'wip' | 'todo' | 'na' | null;
+
+export const VALID_STATUSES: readonly string[] = ['done', 'wip', 'todo', 'na'];
+
+export interface ISNode {
+  label: string;
+  status: InitiativeStatus;
+  shape: ParticipantType;
+  lineNumber: number;
+}
+
+export interface ISEdge {
+  source: string; // node label
+  target: string; // node label
+  label?: string; // e.g. "getUser"
+  status: InitiativeStatus;
+  lineNumber: number;
+}
+
+export interface ISGroup {
+  label: string;
+  nodeLabels: string[];
+  lineNumber: number;
+}
+
+export interface ParsedInitiativeStatus {
+  type: 'initiative-status';
+  title: string | null;
+  titleLineNumber: number | null;
+  nodes: ISNode[];
+  edges: ISEdge[];
+  groups: ISGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error?: string;
+}

package/src/kanban/renderer.ts

@@ -267,7 +267,9 @@ export function renderKanban(
       ? parsed.title.length * TITLE_FONT_SIZE * 0.6 + 16
       : 0;
     let legendX = DIAGRAM_PADDING + titleTextWidth;
-    const groupBg = mix(palette.surface, palette.bg, isDark ? 35 : 20);
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
     const capsulePad = 4;
 
     for (const group of parsed.tagGroups) {
@@ -345,7 +347,12 @@ export function renderKanban(
       if (isActive) {
         let entryX = pillX + pillWidth + 4;
         for (const entry of group.entries) {
-          svg
+          const entryG = svg
+            .append('g')
+            .attr('data-legend-entry', entry.value.toLowerCase())
+            .style('cursor', 'pointer');
+
+          entryG
             .append('circle')
             .attr('cx', entryX + LEGEND_DOT_R)
             .attr('cy', legendY + LEGEND_HEIGHT / 2)
@@ -353,7 +360,7 @@ export function renderKanban(
             .attr('fill', entry.color);
 
           const entryTextX = entryX + LEGEND_DOT_R * 2 + 4;
-          svg
+          entryG
             .append('text')
             .attr('x', entryTextX)
             .attr('y', legendY + LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
@@ -464,6 +471,19 @@ export function renderKanban(
         .attr('data-card-id', card.id)
         .attr('data-line-number', card.lineNumber);
 
+      // Expose active tag group value for legend-entry hover dimming
+      if (activeTagGroup) {
+        const tagKey = activeTagGroup.toLowerCase();
+        const tagValue = card.tags[tagKey];
+        const group = parsed.tagGroups.find(
+          (tg) => tg.name.toLowerCase() === tagKey
+        );
+        const value = tagValue ?? group?.defaultValue;
+        if (value) {
+          cg.attr(`data-tag-${tagKey}`, value.toLowerCase());
+        }
+      }
+
       const cx = colLayout.x + cardLayout.x;
       const cy = colLayout.y + cardLayout.y;
 

package/src/org/layout.ts

@@ -56,6 +56,7 @@ export interface OrgLegendEntry {
 
 export interface OrgLegendGroup {
   name: string;
+  alias?: string;
   entries: OrgLegendEntry[];
   x: number;
   y: number;
@@ -270,17 +271,30 @@ function centerHeavyChildren(node: TreeNode): void {
 // Layout
 // ============================================================
 
-function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean): OrgLegendGroup[] {
+function computeLegendGroups(
+  tagGroups: OrgTagGroup[],
+  _showEyeIcons: boolean,
+  usedValuesByGroup?: Map<string, Set<string>>
+): OrgLegendGroup[] {
   const groups: OrgLegendGroup[] = [];
 
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
 
+    // Filter entries to only values actually used by nodes (if provided)
+    const usedValues = usedValuesByGroup?.get(group.name.toLowerCase());
+    const visibleEntries = usedValues
+      ? group.entries.filter((e) => usedValues.has(e.value.toLowerCase()))
+      : group.entries;
+    if (visibleEntries.length === 0) continue;
+
+    // Pill label shows just the group name (alias is for DSL shorthand only)
     const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const minPillWidth = pillWidth;
 
     // Capsule: pad + pill + gap + entries + pad
     let entriesWidth = 0;
-    for (const entry of group.entries) {
+    for (const entry of visibleEntries) {
       entriesWidth +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
@@ -292,12 +306,16 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean):
 
     groups.push({
       name: group.name,
-      entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
+      alias: group.alias,
+      entries: visibleEntries.map((e) => ({
+        value: e.value,
+        color: e.color,
+      })),
       x: 0,
       y: 0,
       width: capsuleWidth,
       height: LEGEND_HEIGHT,
-      minifiedWidth: pillWidth,
+      minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT,
     });
   }
@@ -348,20 +366,22 @@ export function layoutOrg(
       return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
     }
 
-    // Layout legend groups horizontally (all minified when no nodes)
-    let cx = MARGIN;
+    // Legend-only mode: stack groups vertically, all expanded
+    let cy = MARGIN;
+    let maxWidth = 0;
     for (const g of legendGroups) {
-      g.x = cx;
-      g.y = MARGIN;
-      cx += g.minifiedWidth + LEGEND_GROUP_GAP;
+      g.x = MARGIN;
+      g.y = cy;
+      cy += LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      if (g.width > maxWidth) maxWidth = g.width;
     }
     return {
       nodes: [],
       edges: [],
       containers: [],
       legend: legendGroups,
-      width: cx - LEGEND_GROUP_GAP + MARGIN,
-      height: LEGEND_HEIGHT + MARGIN * 2,
+      width: maxWidth + MARGIN * 2,
+      height: cy - LEGEND_GROUP_GAP + MARGIN,
     };
   }
 
@@ -1084,13 +1104,28 @@ export function layoutOrg(
   const totalWidth = finalMaxX - finalMinX + MARGIN * 2;
   const totalHeight = finalMaxY - minY + MARGIN * 2;
 
+  // Collect which tag group values are actually used by nodes
+  const usedValuesByGroup = new Map<string, Set<string>>();
+  for (const group of parsed.tagGroups) {
+    const key = group.name.toLowerCase();
+    const used = new Set<string>();
+    const walk = (node: OrgNode) => {
+      if (!node.isContainer && node.metadata[key]) {
+        used.add(node.metadata[key].toLowerCase());
+      }
+      for (const child of node.children) walk(child);
+    };
+    for (const root of parsed.roots) walk(root);
+    usedValuesByGroup.set(key, used);
+  }
+
   // Compute legend for tag groups
   const showEyeIcons = hiddenAttributes !== undefined;
-  const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons);
+  const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons, usedValuesByGroup);
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
 
-  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
+  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
 
   // When a tag group is active, only that group is laid out (full size).
   // When none is active, all groups are laid out minified.
@@ -1133,28 +1168,31 @@ export function layoutOrg(
 
       finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
-      // Top: horizontal row at top-right
+      // Top: horizontal row above chart content, left-aligned
+      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+
+      // Push all chart content down
+      for (const n of layoutNodes) n.y += legendShift;
+      for (const c of containers) c.y += legendShift;
+      for (const e of layoutEdges) {
+        for (const p of e.points) p.y += legendShift;
+      }
+
       const totalGroupsWidth =
         visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
         (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
-      const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
-      const legendY = MARGIN;
 
-      let cx = legendStartX;
+      let cx = MARGIN;
       for (const g of visibleGroups) {
         g.x = cx;
-        g.y = legendY;
+        g.y = MARGIN;
         cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
 
-      const legendRight = legendStartX + totalGroupsWidth + MARGIN;
-      if (legendRight > finalWidth) {
-        finalWidth = legendRight;
-      }
-
-      const legendBottom = legendY + LEGEND_HEIGHT + MARGIN;
-      if (legendBottom > finalHeight) {
-        finalHeight = legendBottom;
+      finalHeight += legendShift;
+      const neededWidth = totalGroupsWidth + MARGIN * 2;
+      if (neededWidth > finalWidth) {
+        finalWidth = neededWidth;
       }
     }
   }

package/src/org/renderer.ts

@@ -77,14 +77,12 @@ function nodeFill(
   isDark: boolean,
   nodeColor?: string
 ): string {
-  if (nodeColor) {
-    return mix(nodeColor, isDark ? palette.surface : palette.bg, 25);
-  }
-  return mix(palette.primary, isDark ? palette.surface : palette.bg, 15);
+  const color = nodeColor ?? palette.primary;
+  return mix(color, isDark ? palette.surface : palette.bg, 25);
 }
 
 function nodeStroke(palette: PaletteColors, nodeColor?: string): string {
-  return nodeColor ?? palette.textMuted;
+  return nodeColor ?? palette.primary;
 }
 
 function containerFill(
@@ -206,6 +204,15 @@ export function renderOrg(
       .attr('class', 'org-container')
       .attr('data-line-number', String(c.lineNumber)) as GSelection;
 
+    // Expose active tag group value for legend-entry hover dimming
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const metaValue = c.metadata[tagKey];
+      if (metaValue) {
+        cG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
+      }
+    }
+
     // Toggle attribute for containers that have (or had) children
     if (c.hasChildren) {
       cG.attr('data-node-toggle', c.nodeId)
@@ -333,6 +340,15 @@ export function renderOrg(
       .attr('class', 'org-node')
       .attr('data-line-number', String(node.lineNumber)) as GSelection;
 
+    // Expose active tag group value for legend-entry hover dimming
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const metaValue = node.metadata[tagKey];
+      if (metaValue) {
+        nodeG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
+      }
+    }
+
     // Toggle attribute for nodes that have (or had) children
     if (node.hasChildren) {
       nodeG
@@ -447,27 +463,34 @@ 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.
-  if (!exportDims || layout.nodes.length === 0) for (const group of layout.legend) {
+  const legendOnly = layout.nodes.length === 0;
+  if (!exportDims || legendOnly) for (const group of layout.legend) {
     const isActive =
-      activeTagGroup != null &&
-      group.name.toLowerCase() === activeTagGroup.toLowerCase();
+      legendOnly ||
+      (activeTagGroup != null &&
+        group.name.toLowerCase() === activeTagGroup.toLowerCase());
 
-    // When a group is active, skip all other groups entirely
-    if (activeTagGroup != null && !isActive) continue;
+    // When a group is active, skip all other groups entirely (not in legend-only mode)
+    if (!legendOnly && activeTagGroup != null && !isActive) continue;
 
-    const groupBg = mix(palette.surface, palette.bg, isDark ? 35 : 20);
+    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 =
-      group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      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', 'pointer');
+      .style('cursor', legendOnly ? 'default' : 'pointer');
 
     // Outer capsule background (active only)
     if (isActive) {
@@ -516,13 +539,18 @@ export function renderOrg(
       .attr('font-weight', '500')
       .attr('fill', isActive ? palette.text : palette.textMuted)
       .attr('text-anchor', 'middle')
-      .text(group.name);
+      .text(pillLabel);
 
     // Entries inside capsule (active only)
     if (isActive) {
       let entryX = pillX + pillWidth + 4;
       for (const entry of group.entries) {
-        gEl
+        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)
@@ -530,15 +558,16 @@ export function renderOrg(
           .attr('fill', entry.color);
 
         const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-        gEl
+        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(entry.value);
+          .text(entryLabel);
 
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
     }
   }

package/src/org/resolver.ts

@@ -200,6 +200,7 @@ async function resolveFile(
   const bodyStartIndex = findBodyStart(lines);
 
   // Collect header lines (chart:, title:, options, tags:)
+  let tagsLineNumber = 0; // 1-based line number of the tags: directive
   for (let i = 0; i < bodyStartIndex; i++) {
     const trimmed = lines[i].trim();
     if (trimmed === '' || trimmed.startsWith('//')) {
@@ -212,6 +213,7 @@ async function resolveFile(
     const tagsMatch = trimmed.match(TAGS_RE);
     if (tagsMatch) {
       tagsDirective = tagsMatch[1].trim();
+      tagsLineNumber = i + 1; // 1-based
       continue;
     }
 
@@ -228,7 +230,7 @@ async function resolveFile(
       tagsFileGroups = extractTagGroups(tagsLines);
     } catch {
       diagnostics.push(
-        makeDgmoError(0, `Tags file not found: ${tagsDirective}`)
+        makeDgmoError(tagsLineNumber, `Tags file not found: ${tagsDirective}`)
       );
     }
   }

package/src/render.ts

@@ -49,6 +49,9 @@ export async function render(
     theme?: 'light' | 'dark' | 'transparent';
     palette?: string;
     branding?: boolean;
+    c4Level?: 'context' | 'containers' | 'components' | 'deployment';
+    c4System?: string;
+    c4Container?: string;
   },
 ): Promise<string> {
   const theme = options?.theme ?? 'light';
@@ -66,5 +69,10 @@ export async function render(
 
   // D3 and unknown/null frameworks both go through D3 renderer
   await ensureDom();
-  return renderD3ForExport(content, theme, paletteColors, undefined, { branding });
+  return renderD3ForExport(content, theme, paletteColors, undefined, {
+    branding,
+    c4Level: options?.c4Level,
+    c4System: options?.c4System,
+    c4Container: options?.c4Container,
+  });
 }

package/src/sequence/participant-inference.ts

@@ -203,6 +203,7 @@ const PARTICIPANT_RULES: readonly InferenceRule[] = [
   { pattern: /User$/i, type: 'actor' },
   { pattern: /Actor$/i, type: 'actor' },
   { pattern: /Analyst$/i, type: 'actor' },
+  { pattern: /Staff$/i, type: 'actor' },
 
   // ── 7. Frontend patterns ────────────────────────────────
   { pattern: /App$/i, type: 'frontend' },

package/src/sequence/renderer.ts

@@ -1925,7 +1925,8 @@ export function renderSequenceDiagram(
             'data-line-number',
             String(messages[step.messageIndex].lineNumber)
           )
-          .attr('data-msg-index', String(step.messageIndex));
+          .attr('data-msg-index', String(step.messageIndex))
+          .attr('data-step-index', String(i));
 
         if (step.label) {
           const labelEl = svg
@@ -1940,7 +1941,8 @@ export function renderSequenceDiagram(
               'data-line-number',
               String(messages[step.messageIndex].lineNumber)
             )
-            .attr('data-msg-index', String(step.messageIndex));
+            .attr('data-msg-index', String(step.messageIndex))
+            .attr('data-step-index', String(i));
           renderInlineText(labelEl, step.label, palette);
         }
       } else {
@@ -1966,7 +1968,8 @@ export function renderSequenceDiagram(
             'data-line-number',
             String(messages[step.messageIndex].lineNumber)
           )
-          .attr('data-msg-index', String(step.messageIndex));
+          .attr('data-msg-index', String(step.messageIndex))
+          .attr('data-step-index', String(i));
 
         if (step.label) {
           const midX = (x1 + x2) / 2;
@@ -1982,7 +1985,8 @@ export function renderSequenceDiagram(
               'data-line-number',
               String(messages[step.messageIndex].lineNumber)
             )
-            .attr('data-msg-index', String(step.messageIndex));
+            .attr('data-msg-index', String(step.messageIndex))
+            .attr('data-step-index', String(i));
           renderInlineText(labelEl, step.label, palette);
         }
       }
@@ -2011,7 +2015,8 @@ export function renderSequenceDiagram(
           'data-line-number',
           String(messages[step.messageIndex].lineNumber)
         )
-        .attr('data-msg-index', String(step.messageIndex));
+        .attr('data-msg-index', String(step.messageIndex))
+        .attr('data-step-index', String(i));
 
       if (step.label) {
         const midX = (x1 + x2) / 2;
@@ -2027,7 +2032,8 @@ export function renderSequenceDiagram(
             'data-line-number',
             String(messages[step.messageIndex].lineNumber)
           )
-          .attr('data-msg-index', String(step.messageIndex));
+          .attr('data-msg-index', String(step.messageIndex))
+          .attr('data-step-index', String(i));
         renderInlineText(labelEl, step.label, palette);
       }
     }