@diagrammo/dgmo 0.2.22 → 0.2.24

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

@@ -347,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)
@@ -355,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)
@@ -466,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

@@ -52,7 +52,6 @@ export interface OrgContainerBounds {
 export interface OrgLegendEntry {
   value: string;
   color: string;
-  isDefault?: boolean;
 }
 
 export interface OrgLegendGroup {
@@ -272,29 +271,34 @@ 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;
 
-    // Pill label includes alias if present (e.g., "Rank (r)")
-    const pillLabel = group.alias ? `${group.name} (${group.alias})` : group.name;
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-    // Minified pill shows just the group name (no alias)
-    const minPillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    // 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
-    const isDefaultValue = group.defaultValue?.toLowerCase();
     let entriesWidth = 0;
-    for (const entry of group.entries) {
-      const entryLabel = isDefaultValue === entry.value.toLowerCase()
-        ? `${entry.value} (default)`
-        : entry.value;
+    for (const entry of visibleEntries) {
       entriesWidth +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
-        entryLabel.length * LEGEND_ENTRY_FONT_W +
+        entry.value.length * LEGEND_ENTRY_FONT_W +
         LEGEND_ENTRY_TRAIL;
     }
     const capsuleWidth =
@@ -303,10 +307,9 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean):
     groups.push({
       name: group.name,
       alias: group.alias,
-      entries: group.entries.map((e) => ({
+      entries: visibleEntries.map((e) => ({
         value: e.value,
         color: e.color,
-        isDefault: group.defaultValue?.toLowerCase() === e.value.toLowerCase() || undefined,
       })),
       x: 0,
       y: 0,
@@ -1101,9 +1104,24 @@ 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;
 

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
@@ -464,8 +480,8 @@ export function renderOrg(
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
 
-    // Pill label: include alias when expanded (e.g., "Rank (r)")
-    const pillLabel = isActive && group.alias ? `${group.name} (${group.alias})` : group.name;
+    // 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;
 
@@ -529,7 +545,12 @@ export function renderOrg(
     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)
@@ -537,8 +558,8 @@ export function renderOrg(
           .attr('fill', entry.color);
 
         const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-        const entryLabel = entry.isDefault ? `${entry.value} (default)` : entry.value;
-        gEl
+        const entryLabel = entry.value;
+        entryG
           .append('text')
           .attr('x', textX)
           .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)

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