@diagrammo/dgmo 0.7.3 → 0.8.1

package/src/kanban/renderer.ts

@@ -35,8 +35,8 @@ const CARD_RADIUS = 6;
 const CARD_PADDING_X = 10;
 const CARD_PADDING_Y = 6;
 const CARD_STROKE_WIDTH = 1.5;
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 const TITLE_HEIGHT = 30;
-const TITLE_FONT_SIZE = 18;
 const COLUMN_HEADER_FONT_SIZE = 13;
 const CARD_TITLE_FONT_SIZE = 12;
 const CARD_META_FONT_SIZE = 10;
@@ -235,7 +235,7 @@ export function renderKanban(
       .attr('x', DIAGRAM_PADDING)
       .attr('y', DIAGRAM_PADDING + TITLE_FONT_SIZE)
       .attr('font-size', TITLE_FONT_SIZE)
-      .attr('font-weight', 'bold')
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .attr('fill', palette.text)
       .text(parsed.title);
   }

package/src/kanban/types.ts

@@ -21,6 +21,7 @@ export interface KanbanColumn {
   name: string;
   wipLimit?: number;
   color?: string;
+  metadata?: Record<string, string>;
   cards: KanbanCard[];
   lineNumber: number;
 }

package/src/org/layout.ts

@@ -3,8 +3,10 @@
 // ============================================================
 
 import { hierarchy, tree } from 'd3-hierarchy';
-import type { ParsedOrg, OrgNode, OrgTagGroup } from './parser';
+import type { ParsedOrg, OrgNode } from './parser';
+import type { TagGroup } from '../utils/tag-groups';
 import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
+import { LEGEND_PILL_FONT_SIZE, LEGEND_ENTRY_FONT_SIZE, measureLegendText } from '../utils/legend-constants';
 
 // ============================================================
 // Types
@@ -101,10 +103,8 @@ const STACK_V_GAP = 20;
 const LEGEND_GAP = 30;
 const LEGEND_HEIGHT = 28;
 const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_W = 11 * 0.6;
 const LEGEND_CAPSULE_PAD = 4;
 const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_W = 10 * 0.6;
 const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_GROUP_GAP = 12;
@@ -167,7 +167,7 @@ function computeCardHeight(meta: Record<string, string>): number {
 
 function resolveNodeColor(
   node: OrgNode,
-  tagGroups: OrgTagGroup[],
+  tagGroups: TagGroup[],
   activeGroupName: string | null
 ): string | undefined {
   // Explicit inline (color) always wins — handled before tag resolution
@@ -262,7 +262,7 @@ function centerHeavyChildren(node: TreeNode): void {
 // ============================================================
 
 function computeLegendGroups(
-  tagGroups: OrgTagGroup[],
+  tagGroups: TagGroup[],
   showEyeIcons: boolean,
   usedValuesByGroup?: Map<string, Set<string>>
 ): OrgLegendGroup[] {
@@ -279,7 +279,7 @@ function computeLegendGroups(
     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 pillWidth = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
     const minPillWidth = pillWidth;
 
     // Capsule: pad + pill + gap + entries + pad
@@ -288,7 +288,7 @@ function computeLegendGroups(
       entriesWidth +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
-        entry.value.length * LEGEND_ENTRY_FONT_W +
+        measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
         LEGEND_ENTRY_TRAIL;
     }
     const eyeSpace = showEyeIcons ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
@@ -320,7 +320,7 @@ function computeLegendGroups(
  */
 function injectDefaultMetadata(
   roots: OrgNode[],
-  tagGroups: OrgTagGroup[]
+  tagGroups: TagGroup[]
 ): void {
   // Flatten all nodes (recursive) for the shared utility
   const allNodes: OrgNode[] = [];
@@ -377,7 +377,7 @@ export function layoutOrg(
 
   // Build tree structure
   const subNodeLabel = parsed.options['sub-node-label'] ?? undefined;
-  const showSubNodeCount = parsed.options['show-sub-node-count']?.toLowerCase() === 'yes';
+  const showSubNodeCount = ['yes', 'on'].includes(parsed.options['show-sub-node-count']?.toLowerCase() ?? '');
   const treeNodes = buildTreeNodes(parsed.roots, hiddenCounts, hiddenAttributes, subNodeLabel, showSubNodeCount);
 
   // Single root or virtual root for multiple roots

package/src/org/parser.ts

@@ -8,20 +8,14 @@ import {
   extractColor,
   parsePipeMetadata,
   MULTIPLE_PIPE_WARNING,
-  CHART_TYPE_RE,
-  TITLE_RE,
-  OPTION_RE,
+  parseFirstLine,
+  OPTION_NOCOLON_RE,
 } from '../utils/parsing';
 
 // ============================================================
 // Types
 // ============================================================
 
-/** @deprecated Use `TagEntry` from `utils/tag-groups` */
-export type OrgTagEntry = TagEntry;
-/** @deprecated Use `TagGroup` from `utils/tag-groups` */
-export type OrgTagGroup = TagGroup;
-
 export interface OrgNode {
   id: string;
   label: string;
@@ -37,7 +31,7 @@ export interface ParsedOrg {
   title: string | null;
   titleLineNumber: number | null;
   roots: OrgNode[];
-  tagGroups: OrgTagGroup[];
+  tagGroups: TagGroup[];
   options: Record<string, string>;
   diagnostics: DgmoError[];
   error: string | null;
@@ -50,6 +44,15 @@ export interface ParsedOrg {
 const CONTAINER_RE = /^\[([^\]]+)\]$/;
 const METADATA_RE = /^([^:]+):\s*(.+)$/;
 
+/** Known org chart options (key-value). */
+const KNOWN_OPTIONS = new Set([
+  'direction', 'sub-node-label', 'hide', 'show-sub-node-count',
+]);
+/** Known org chart boolean options (bare keyword = on). */
+const KNOWN_BOOLEANS = new Set([
+  'show-sub-node-count',
+]);
+
 // ============================================================
 // Inference
 // ============================================================
@@ -111,7 +114,7 @@ export function parseOrg(
   let containerCounter = 0;
 
   // Tag group parsing state
-  let currentTagGroup: OrgTagGroup | null = null;
+  let currentTagGroup: TagGroup | null = null;
 
   // Alias map: alias (lowercased) → group name (lowercased)
   const aliasMap = new Map<string, string>();
@@ -139,28 +142,21 @@ export function parseOrg(
 
     // --- Header phase ---
 
-    // chart: type
+    // Extract chart type + title from first line (e.g. `org My Org Chart`)
     if (!contentStarted) {
-      const chartMatch = trimmed.match(CHART_TYPE_RE);
-      if (chartMatch) {
-        const chartType = chartMatch[1].trim().toLowerCase();
-        if (chartType !== 'org') {
+      const firstLine = parseFirstLine(trimmed);
+      if (firstLine) {
+        if (firstLine.chartType !== 'org') {
           const allTypes = ['org', 'class', 'flowchart', 'sequence', 'er', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
-          let msg = `Expected chart type "org", got "${chartType}"`;
-          const hint = suggest(chartType, allTypes);
+          let msg = `Expected chart type "org", got "${firstLine.chartType}"`;
+          const hint = suggest(firstLine.chartType, allTypes);
           if (hint) msg += `. ${hint}`;
           return fail(lineNumber, msg);
         }
-        continue;
-      }
-    }
-
-    // title: value
-    if (!contentStarted) {
-      const titleMatch = trimmed.match(TITLE_RE);
-      if (titleMatch) {
-        result.title = titleMatch[1].trim();
-        result.titleLineNumber = lineNumber;
+        if (firstLine.title) {
+          result.title = firstLine.title;
+          result.titleLineNumber = lineNumber;
+        }
         continue;
       }
     }
@@ -174,7 +170,8 @@ export function parseOrg(
         continue;
       }
       if (tagBlockMatch.deprecated) {
-        pushWarning(lineNumber, `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`);
+        pushError(lineNumber, `'## ${tagBlockMatch.name}' is no longer supported — use 'tag: ${tagBlockMatch.name}' instead`);
+        continue;
       }
       currentTagGroup = {
         name: tagBlockMatch.name,
@@ -189,34 +186,36 @@ export function parseOrg(
       continue;
     }
 
-    // Generic header options (key: value lines before content/tag groups)
-    // Only match non-indented lines with simple hyphenated keys
+    // Generic header options (space-separated: `key value` or bare boolean `key`)
+    // Only match non-indented lines with known option keys
     if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
-      const optMatch = trimmed.match(OPTION_RE);
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
       if (optMatch) {
         const key = optMatch[1].trim().toLowerCase();
-        if (key !== 'chart' && key !== 'title') {
+        if (KNOWN_OPTIONS.has(key)) {
           result.options[key] = optMatch[2].trim();
           continue;
         }
       }
+      // Bare boolean option (single keyword, no value)
+      if (KNOWN_BOOLEANS.has(trimmed.toLowerCase())) {
+        result.options[trimmed.toLowerCase()] = 'on';
+        continue;
+      }
     }
 
-    // Tag group entries (indented Value(color) [default] under ## heading)
+    // Tag group entries (indented Value(color) under tag heading)
+    // First entry is implicitly the default.
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
       if (indent > 0) {
-        // Strip trailing `default` keyword before extracting color
-        const isDefault = /\bdefault\s*$/.test(trimmed);
-        const entryText = isDefault
-          ? trimmed.replace(/\s+default\s*$/, '').trim()
-          : trimmed;
-        const { label, color } = extractColor(entryText, palette);
+        const { label, color } = extractColor(trimmed, palette);
         if (!color) {
           pushError(lineNumber, `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`);
           continue;
         }
-        if (isDefault) {
+        // First entry is the default
+        if (currentTagGroup.entries.length === 0) {
           currentTagGroup.defaultValue = label;
         }
         currentTagGroup.entries.push({

package/src/org/renderer.ts

@@ -15,11 +15,9 @@ 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,
   LEGEND_GROUP_GAP,
@@ -27,6 +25,7 @@ import {
   LEGEND_EYE_GAP,
   EYE_OPEN_PATH,
   EYE_CLOSED_PATH,
+  measureLegendText,
 } from '../utils/legend-constants';
 
 // ============================================================
@@ -35,8 +34,8 @@ import {
 
 const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 const TITLE_HEIGHT = 30;
-const TITLE_FONT_SIZE = 18;
 const LABEL_FONT_SIZE = 13;
 const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
@@ -179,7 +178,7 @@ export function renderOrg(
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
-      .attr('font-weight', 'bold')
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .attr('class', 'org-title chart-title')
       .style(
         'cursor',
@@ -534,7 +533,7 @@ export function renderOrg(
 
       const pillLabel = group.name;
       const pillWidth =
-        pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+        measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
 
       const gX = fixedPositions?.get(group.name) ?? group.x;
       const gY = fixedPositions ? 0 : group.y;
@@ -656,7 +655,7 @@ export function renderOrg(
             .attr('fill', palette.textMuted)
             .text(entryLabel);
 
-          entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+          entryX = textX + measureLegendText(entryLabel, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
         }
       }
     }

package/src/org/resolver.ts

@@ -34,10 +34,18 @@ export interface ResolveImportsResult {
 // ============================================================
 
 const MAX_DEPTH = 10;
-const IMPORT_RE = /^(\s+)import:\s+(.+\.dgmo)\s*$/i;
-const TAGS_RE = /^tags:\s+(.+\.dgmo)\s*$/i;
-const HEADER_RE = /^(chart|title)\s*:/i;
-const OPTION_RE = /^[a-z][a-z0-9-]*\s*:/i;
+const IMPORT_RE = /^(\s+)import:?\s+(.+\.dgmo)\s*$/i;
+const TAGS_RE = /^tags:?\s+(.+\.dgmo)\s*$/i;
+/** Matches new-style first line: `org ...` or old `chart: ...` or `title: ...` */
+const HEADER_RE = /^(org|kanban|chart\s*:|title\s*:)/i;
+/**
+ * Known option keys that can appear in org chart headers (space-separated).
+ * Only these are stripped from imported files — avoids eating content like "Alice Chen".
+ */
+const KNOWN_HEADER_OPTIONS = new Set([
+  'direction', 'sub-node-label', 'hide', 'show-sub-node-count',
+  'color-off',
+]);
 
 // ============================================================
 // Path Helpers (pure string ops — no Node `path` dependency)
@@ -116,7 +124,7 @@ interface ParsedHeader {
 
 /**
  * Separate an imported file into header (stripped) and content body.
- * Also extracts tag groups and tags: directive for merging.
+ * Also extracts tag groups and tags directive for merging.
  */
 function parseFileHeader(lines: string[]): ParsedHeader {
   const tagGroups = extractTagGroups(lines);
@@ -157,11 +165,10 @@ function parseFileHeader(lines: string[]): ParsedHeader {
         continue;
       }
 
-      // Other option-like header lines (non-indented key: value)
-      if (OPTION_RE.test(trimmed) && !isTagBlockHeading(trimmed) && !lines[i].match(/^\s/)) {
-        // Check it's not a content line (node with metadata)
-        const key = trimmed.split(':')[0].trim().toLowerCase();
-        if (key !== 'chart' && key !== 'title' && !trimmed.includes('|')) {
+      // Known option header lines (space-separated `key value` or bare boolean)
+      if (!lines[i].match(/^\s/) && !isTagBlockHeading(trimmed) && !trimmed.includes('|')) {
+        const firstToken = trimmed.split(/\s/)[0].toLowerCase();
+        if (KNOWN_HEADER_OPTIONS.has(firstToken)) {
           continue;
         }
       }
@@ -181,7 +188,7 @@ function parseFileHeader(lines: string[]): ParsedHeader {
 // ============================================================
 
 /**
- * Pre-processes org chart content, resolving `tags:` and `import:` directives.
+ * Pre-processes org chart content, resolving `tags` and `import` directives.
  *
  * @param content   - Raw .dgmo file content
  * @param filePath  - Absolute path of the file (for relative path resolution)
@@ -220,7 +227,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
+  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('//')) {
@@ -240,7 +247,7 @@ async function resolveFile(
     headerLines.push({ text: lines[i], originalLine: i + 1 });
   }
 
-  // ---- Step 2: Resolve tags: directive ----
+  // ---- Step 2: Resolve tags directive ----
   let tagsFileGroups: TagGroupBlock[] = [];
   if (tagsDirective) {
     const tagsPath = resolvePath(filePath, tagsDirective);
@@ -255,7 +262,7 @@ async function resolveFile(
     }
   }
 
-  // ---- Step 3: Resolve import: directives in body ----
+  // ---- Step 3: Resolve import directives in body ----
   const bodyLines = lines.slice(bodyStartIndex);
   const resolvedBodyLines: { text: string; originalLine: number | null; importSource: ImportSource | null }[] = [];
   const importedTagGroups: TagGroupBlock[] = [];
@@ -381,7 +388,7 @@ async function resolveFile(
   const lineMap: (number | null)[] = [null];
   const importSourceMap: (ImportSource | null)[] = [null];
 
-  // Header lines (chart:, title:, options — no tags: or tag groups)
+  // Header lines (chart:, title:, options — no tags or tag groups)
   for (const entry of headerLines) {
     outputLines.push(entry.text);
     lineMap.push(entry.originalLine);
@@ -470,10 +477,10 @@ function findBodyStart(lines: string[]): number {
     if (HEADER_RE.test(trimmed)) continue;
     if (TAGS_RE.test(trimmed)) continue;
 
-    // Option-like lines (non-indented key: value before content)
-    if (OPTION_RE.test(trimmed) && !isTagBlockHeading(trimmed) && !lines[i].match(/^\s/) && !trimmed.includes('|')) {
-      const key = trimmed.split(':')[0].trim().toLowerCase();
-      if (key !== 'chart' && key !== 'title') {
+    // Known option lines (space-separated `key value` or bare boolean before content)
+    if (!lines[i].match(/^\s/) && !trimmed.includes('|') && !isTagBlockHeading(trimmed)) {
+      const firstToken = trimmed.split(/\s/)[0].toLowerCase();
+      if (KNOWN_HEADER_OPTIONS.has(firstToken)) {
         continue;
       }
     }

package/src/render.ts

@@ -57,7 +57,7 @@ export async function render(
 ): Promise<string> {
   const theme = options?.theme ?? 'light';
   const paletteName = options?.palette ?? 'nord';
-  const branding = options?.branding ?? true;
+  const branding = options?.branding ?? false;
 
   const paletteColors = getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];