@diagrammo/dgmo 0.4.3 → 0.5.0

package/src/er/parser.ts

@@ -1,7 +1,9 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { measureIndent } from '../utils/parsing';
+import { measureIndent, extractColor, parsePipeMetadata } from '../utils/parsing';
+import { matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
+import type { TagGroup } from '../utils/tag-groups';
 import type {
   ParsedERDiagram,
   ERTable,
@@ -22,9 +24,9 @@ function tableId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Table declaration: table_name or table_name (color)
+// Table declaration: table_name or table_name (color) or table_name | key: value
 // Allows lowercase, uppercase, underscores, digits — must start with letter or underscore
-const TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s+\(([^)]+)\))?\s*$/;
+const TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
 
 // Column: name: type [constraints]  or  name [constraints]  or  name: type  or  name
 const COLUMN_RE = /^(\w+)(?:\s*:\s*(\w[\w()]*(?:\s*\[\])?))?(?:\s+\[([^\]]+)\])?\s*$/;
@@ -143,6 +145,7 @@ export function parseERDiagram(
     options: {},
     tables: [],
     relationships: [],
+    tagGroups: [],
     diagnostics: [],
     error: null,
   };
@@ -163,6 +166,8 @@ export function parseERDiagram(
   const tableMap = new Map<string, ERTable>();
   let currentTable: ERTable | null = null;
   let contentStarted = false;
+  let currentTagGroup: TagGroup | null = null;
+  const aliasMap = new Map<string, string>();
 
   function getOrCreateTable(name: string, lineNumber: number): ERTable {
     const id = tableId(name);
@@ -173,6 +178,7 @@ export function parseERDiagram(
       id,
       name,
       columns: [],
+      metadata: {},
       lineNumber,
     };
     tableMap.set(id, table);
@@ -195,6 +201,52 @@ export function parseERDiagram(
     // Skip comments
     if (trimmed.startsWith('//')) continue;
 
+    // Tag group heading — `tag: Name` or deprecated `## Name`
+    if (!contentStarted && indent === 0) {
+      const tagBlockMatch = matchTagBlockHeading(trimmed);
+      if (tagBlockMatch) {
+        if (tagBlockMatch.deprecated) {
+          result.diagnostics.push(makeDgmoError(lineNumber,
+            `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`, 'warning'));
+        }
+        currentTagGroup = {
+          name: tagBlockMatch.name,
+          alias: tagBlockMatch.alias,
+          entries: [],
+          lineNumber,
+        };
+        if (tagBlockMatch.alias) {
+          aliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
+        }
+        result.tagGroups.push(currentTagGroup);
+        continue;
+      }
+    }
+
+    // Tag group entries (indented under tag: heading)
+    if (currentTagGroup && !contentStarted && indent > 0) {
+      const isDefault = /\bdefault\s*$/.test(trimmed);
+      const entryText = isDefault
+        ? trimmed.replace(/\s+default\s*$/, '').trim()
+        : trimmed;
+      const { label, color } = extractColor(entryText, palette);
+      if (!color) {
+        result.diagnostics.push(makeDgmoError(lineNumber,
+          `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`, 'warning'));
+        continue;
+      }
+      if (isDefault) {
+        currentTagGroup.defaultValue = label;
+      }
+      currentTagGroup.entries.push({ value: label, color, lineNumber });
+      continue;
+    }
+
+    // End tag group on non-indented line
+    if (currentTagGroup && indent === 0) {
+      currentTagGroup = null;
+    }
+
     // Metadata directives (before content)
     if (!contentStarted && indent === 0 && /^[a-z][a-z0-9-]*\s*:/i.test(trimmed)) {
       const colonIdx = trimmed.indexOf(':');
@@ -296,6 +348,14 @@ export function parseERDiagram(
       if (color) table.color = color;
       table.lineNumber = lineNumber;
 
+      // Parse pipe metadata: TableName(color) | key: value, key2: value2
+      const pipeStr = tableDecl[3]?.trim();
+      if (pipeStr) {
+        // parsePipeMetadata skips index 0 (name segment), so prepend empty
+        const meta = parsePipeMetadata(['', pipeStr], aliasMap);
+        Object.assign(table.metadata, meta);
+      }
+
       currentTable = table;
       continue;
     }
@@ -308,6 +368,31 @@ export function parseERDiagram(
     result.error = formatDgmoError(diag);
   }
 
+  // Validate tag values on tables
+  if (result.tagGroups.length > 0) {
+    const tagEntities = result.tables.map((t) => ({
+      metadata: t.metadata,
+      lineNumber: t.lineNumber,
+    }));
+    validateTagValues(
+      tagEntities,
+      result.tagGroups,
+      (line, msg) => result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
+      suggest,
+    );
+
+    // Inject defaults for tables without explicit tags
+    for (const group of result.tagGroups) {
+      if (!group.defaultValue) continue;
+      const key = group.name.toLowerCase();
+      for (const table of result.tables) {
+        if (!table.metadata[key]) {
+          table.metadata[key] = group.defaultValue;
+        }
+      }
+    }
+  }
+
   // Warn about isolated tables (not in any relationship)
   if (result.tables.length >= 2 && result.relationships.length >= 1 && !result.error) {
     const connectedIds = new Set<string>();

package/src/er/renderer.ts

@@ -8,6 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { getSeriesColors } from '../palettes';
+import { resolveTagColor } from '../utils/tag-groups';
 import type { ParsedERDiagram, ERConstraint } from './types';
 import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
 import { parseERDiagram } from './parser';
@@ -200,7 +201,8 @@ export function renderERDiagram(
   palette: PaletteColors,
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
-  exportDims?: { width?: number; height?: number }
+  exportDims?: { width?: number; height?: number },
+  activeTagGroup?: string | null
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -338,7 +340,8 @@ export function renderERDiagram(
   // ── Nodes (top layer) ──
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
-    const nodeColor = node.color ?? seriesColors[ni % seriesColors.length];
+    const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
+    const nodeColor = node.color ?? tagColor ?? seriesColors[ni % seriesColors.length];
 
     const nodeG = contentG
       .append('g')
@@ -347,6 +350,15 @@ export function renderERDiagram(
       .attr('data-line-number', String(node.lineNumber))
       .attr('data-node-id', node.id);
 
+    // Set data-tag-* attributes for legend hover
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      }
+    }
+
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
         onClickItem(node.lineNumber);
@@ -430,6 +442,83 @@ export function renderERDiagram(
       }
     }
   }
+
+  // ── Tag Legend ──
+  if (parsed.tagGroups.length > 0) {
+    const LEGEND_Y_PAD = 16;
+    const LEGEND_PILL_H = 22;
+    const LEGEND_PILL_RX = 11;
+    const LEGEND_PILL_PAD = 10;
+    const LEGEND_GAP = 8;
+    const LEGEND_FONT_SIZE = 11;
+    const LEGEND_GROUP_GAP = 16;
+
+    const legendG = svg.append('g')
+      .attr('class', 'er-tag-legend');
+
+    let legendX = DIAGRAM_PADDING;
+    let legendY = height - DIAGRAM_PADDING;
+
+    for (const group of parsed.tagGroups) {
+      const groupG = legendG.append('g')
+        .attr('data-legend-group', group.name.toLowerCase());
+
+      // Group label
+      const labelText = groupG.append('text')
+        .attr('x', legendX)
+        .attr('y', legendY + LEGEND_PILL_H / 2)
+        .attr('dominant-baseline', 'central')
+        .attr('fill', palette.textMuted)
+        .attr('font-size', LEGEND_FONT_SIZE)
+        .attr('font-family', FONT_FAMILY)
+        .text(`${group.name}:`);
+
+      const labelWidth = (labelText.node()?.getComputedTextLength?.() ?? group.name.length * 7) + 6;
+      legendX += labelWidth;
+
+      // Entries
+      for (const entry of group.entries) {
+        const pillG = groupG.append('g')
+          .attr('data-legend-entry', entry.value.toLowerCase())
+          .style('cursor', 'pointer');
+
+        // Estimate text width
+        const tmpText = legendG.append('text')
+          .attr('font-size', LEGEND_FONT_SIZE)
+          .attr('font-family', FONT_FAMILY)
+          .text(entry.value);
+        const textW = tmpText.node()?.getComputedTextLength?.() ?? entry.value.length * 7;
+        tmpText.remove();
+
+        const pillW = textW + LEGEND_PILL_PAD * 2;
+
+        pillG.append('rect')
+          .attr('x', legendX)
+          .attr('y', legendY)
+          .attr('width', pillW)
+          .attr('height', LEGEND_PILL_H)
+          .attr('rx', LEGEND_PILL_RX)
+          .attr('ry', LEGEND_PILL_RX)
+          .attr('fill', mix(entry.color, isDark ? palette.surface : palette.bg, 25))
+          .attr('stroke', entry.color)
+          .attr('stroke-width', 1);
+
+        pillG.append('text')
+          .attr('x', legendX + pillW / 2)
+          .attr('y', legendY + LEGEND_PILL_H / 2)
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'central')
+          .attr('fill', palette.text)
+          .attr('font-size', LEGEND_FONT_SIZE)
+          .attr('font-family', FONT_FAMILY)
+          .text(entry.value);
+
+        legendX += pillW + LEGEND_GAP;
+      }
+
+      legendX += LEGEND_GROUP_GAP;
+    }
+  }
 }
 
 // ============================================================

package/src/er/types.ts

@@ -18,6 +18,7 @@ export interface ERTable {
   name: string;
   color?: string;
   columns: ERColumn[];
+  metadata: Record<string, string>;
   lineNumber: number;
 }
 
@@ -30,6 +31,7 @@ export interface ERRelationship {
 }
 
 import type { DgmoError } from '../diagnostics';
+import type { TagGroup } from '../utils/tag-groups';
 
 export interface ParsedERDiagram {
   type: 'er';
@@ -38,6 +40,7 @@ export interface ParsedERDiagram {
   options: Record<string, string>;
   tables: ERTable[];
   relationships: ERRelationship[];
+  tagGroups: TagGroup[];
   diagnostics: DgmoError[];
   error: string | null;
 }

package/src/infra/layout.ts

@@ -335,7 +335,7 @@ function formatUptime(fraction: number): string {
 // Layout engine
 // ============================================================
 
-export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null): InfraLayoutResult {
+export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null, collapsedNodes?: Set<string> | null): InfraLayoutResult {
   if (computed.nodes.length === 0) {
     return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
   }
@@ -363,9 +363,12 @@ export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: strin
   const widthMap = new Map<string, number>();
   const heightMap = new Map<string, number>();
   for (const node of computed.nodes) {
-    const expanded = node.id === selectedNodeId;
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    const expanded = !isNodeCollapsed && node.id === selectedNodeId;
     const width = computeNodeWidth(node, expanded, computed.options);
-    const height = computeNodeHeight(node, expanded, computed.options);
+    const height = isNodeCollapsed
+      ? NODE_HEADER_HEIGHT + NODE_PAD_BOTTOM
+      : computeNodeHeight(node, expanded, computed.options);
     widthMap.set(node.id, width);
     heightMap.set(node.id, height);
     const inGroup = groupedNodeIds.has(node.id);

package/src/infra/parser.ts

@@ -43,8 +43,8 @@ const TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?(\s+default)?\s*$/;
 // Component line: ComponentName  or  ComponentName | t: Backend | env: Prod
 const COMPONENT_RE = /^([a-zA-Z_][\w]*)(.*)$/;
 
-// Pipe metadata: | key: value
-const PIPE_META_RE = /\|\s*(\w+)\s*:\s*([^|]+)/g;
+// Pipe metadata: | key: value  or  | k1: v1, k2: v2  (comma-separated)
+const PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
 
 // Property: key: value
 const PROPERTY_RE = /^([\w-]+)\s*:\s*(.+)$/;

package/src/infra/renderer.ts

@@ -606,6 +606,23 @@ function renderEdgeLabels(
   }
 }
 
+/** Returns the resolved tag color for a node's active tag group, or null if not applicable. */
+function resolveActiveTagStroke(
+  node: InfraLayoutNode,
+  activeGroup: string,
+  tagGroups: InfraTagGroup[],
+  palette: PaletteColors,
+): string | null {
+  const tg = tagGroups.find((t) => t.name.toLowerCase() === activeGroup.toLowerCase());
+  if (!tg) return null;
+  const tagKey = (tg.alias ?? tg.name).toLowerCase();
+  const tagVal = node.tags[tagKey];
+  if (!tagVal) return null;
+  const tv = tg.values.find((v) => v.name.toLowerCase() === tagVal.toLowerCase());
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+
 function renderNodes(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   nodes: InfraLayoutNode[],
@@ -615,11 +632,22 @@ function renderNodes(
   selectedNodeId?: string | null,
   activeGroup?: string | null,
   diagramOptions?: Record<string, string>,
+  collapsedNodes?: Set<string> | null,
+  tagGroups?: InfraTagGroup[],
 ) {
   const mutedColor = palette.textMuted;
 
   for (const node of nodes) {
-    const { fill, stroke, textFill } = nodeColor(node, palette, isDark);
+    let { fill, stroke, textFill } = nodeColor(node, palette, isDark);
+
+    // When a tag legend is active, override border color with tag color
+    if (activeGroup && tagGroups && !node.isEdge) {
+      const tagStroke = resolveActiveTagStroke(node, activeGroup, tagGroups, palette);
+      if (tagStroke) {
+        stroke = tagStroke;
+        fill = mix(palette.bg, tagStroke, isDark ? 88 : 94);
+      }
+    }
     let cls = 'infra-node';
     if (animate && node.isEdge) {
       cls += ' infra-node-edge-throb';
@@ -632,12 +660,13 @@ function renderNodes(
     const g = svg.append('g')
       .attr('class', cls)
       .attr('data-line-number', node.lineNumber)
-      .attr('data-infra-node', node.id);
+      .attr('data-infra-node', node.id)
+      .attr('data-node-collapse', node.id)
+      .style('cursor', 'pointer');
 
-    // Collapsed group nodes: toggle attribute + pointer cursor
+    // Collapsed group nodes: toggle attribute
     if (node.id.startsWith('[')) {
-      g.attr('data-node-toggle', node.id)
-        .style('cursor', 'pointer');
+      g.attr('data-node-toggle', node.id);
     }
 
     // Expose tag values for legend hover dimming
@@ -681,8 +710,22 @@ function renderNodes(
       .attr('fill', textFill)
       .text(node.label);
 
-    // --- Key-value rows below header ---
-    {
+    // --- Key-value rows below header (skipped for collapsed nodes) ---
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    if (isNodeCollapsed) {
+      // Collapsed: show a subtle chevron indicator at the bottom of the header
+      const chevronY = y + node.height - 6;
+      g.append('text')
+        .attr('x', node.x)
+        .attr('y', chevronY)
+        .attr('text-anchor', 'middle')
+        .attr('font-family', FONT_FAMILY)
+        .attr('font-size', 8)
+        .attr('fill', textFill)
+        .attr('opacity', 0.5)
+        .text('▼');
+    }
+    if (!isNodeCollapsed) {
       const expanded = node.id === selectedNodeId;
       // Declared properties only shown when node is selected (expanded)
       const displayProps = (!node.isEdge && expanded) ? getDisplayProps(node, expanded, diagramOptions) : [];
@@ -1380,6 +1423,7 @@ export function renderInfra(
   playback?: InfraPlaybackState | null,
   selectedNodeId?: string | null,
   exportMode?: boolean,
+  collapsedNodes?: Set<string> | null,
 ) {
   // Clear previous render (preserve tooltips if any)
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -1470,7 +1514,7 @@ export function renderInfra(
   // Render layers: groups (back), edge paths, nodes, reject particles, edge labels (front)
   renderGroups(svg, layout.groups, palette, isDark);
   renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
-  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options);
+  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options, collapsedNodes, tagGroups ?? []);
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }

package/src/kanban/mutations.ts

@@ -171,7 +171,7 @@ export function computeCardArchive(
       : [...withoutCard, ''];
     return [
       ...trimmedEnd,
-      '== Archive ==',
+      '[Archive]',
       ...cardLines,
     ].join('\n');
   }

package/src/kanban/parser.ts

@@ -1,6 +1,7 @@
 import type { PaletteColors } from '../palettes';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { resolveColor } from '../colors';
 import { matchTagBlockHeading } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -21,7 +22,10 @@ import type {
 // Regex patterns
 // ============================================================
 
-const COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
+// [Column Name], [Column Name](color), [Column Name] | wip: 3, etc.
+const COLUMN_RE = /^\[(.+?)\](?:\s*\(([^)]+)\))?\s*(?:\|\s*(.+))?$/;
+// Legacy delimiter
+const LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
 
 // ============================================================
 // Parser
@@ -60,6 +64,7 @@ export function parseKanban(
   let currentTagGroup: KanbanTagGroup | null = null;
   let currentColumn: KanbanColumn | null = null;
   let currentCard: KanbanCard | null = null;
+  let cardBaseIndent = 0; // indent level of current card (for detail detection)
   let columnCounter = 0;
   let cardCounter = 0;
 
@@ -155,7 +160,7 @@ export function parseKanban(
       }
     }
 
-    // Tag group entries (indented Value(color) [default] under ## heading)
+    // Tag group entries (indented Value(color) [default] under tag: heading)
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
       if (indent > 0) {
@@ -187,8 +192,18 @@ export function parseKanban(
 
     // --- Content phase ---
 
-    // Column delimiter: == Name == or == Name [wip: N] ==
-    const columnMatch = trimmed.match(COLUMN_RE);
+    const indent = measureIndent(line);
+
+    // Reject legacy == Column == syntax
+    if (LEGACY_COLUMN_RE.test(trimmed)) {
+      const legacyMatch = trimmed.match(LEGACY_COLUMN_RE)!;
+      const name = legacyMatch[1].replace(/\s*\(.*\)\s*$/, '').trim();
+      warn(lineNumber, `'== ${name} ==' is no longer supported. Use '[${name}]' instead`);
+      continue;
+    }
+
+    // [Column] header at indent 0
+    const columnMatch = indent === 0 ? trimmed.match(COLUMN_RE) : null;
     if (columnMatch) {
       contentStarted = true;
       currentTagGroup = null;
@@ -196,7 +211,6 @@ export function parseKanban(
       // Finalize previous card's endLineNumber
       if (currentCard) {
         currentCard.endLineNumber = lineNumber - 1;
-        // Walk back over trailing empty lines
         while (
           currentCard.endLineNumber > currentCard.lineNumber &&
           !lines[currentCard.endLineNumber - 1].trim()
@@ -207,16 +221,25 @@ export function parseKanban(
       currentCard = null;
 
       columnCounter++;
-      const rawColName = columnMatch[1].trim();
-      const wipStr = columnMatch[2];
-      const { label: colName, color: colColor } = extractColor(
-        rawColName,
-        palette
-      );
+      const colName = columnMatch[1].trim();
+      const colColor = columnMatch[2]
+        ? resolveColor(columnMatch[2].trim(), palette)
+        : undefined;
+
+      // Parse WIP limit from pipe metadata (e.g., "| wip: 3")
+      let wipLimit: number | undefined;
+      const pipeStr = columnMatch[3];
+      if (pipeStr) {
+        const wipMatch = pipeStr.match(/\bwip\s*:\s*(\d+)\b/i);
+        if (wipMatch) {
+          wipLimit = parseInt(wipMatch[1], 10);
+        }
+      }
+
       currentColumn = {
         id: `col-${columnCounter}`,
         name: colName,
-        wipLimit: wipStr ? parseInt(wipStr, 10) : undefined,
+        wipLimit,
         color: colColor,
         cards: [],
         lineNumber,
@@ -226,45 +249,41 @@ export function parseKanban(
     }
 
     // If we hit a non-column, non-header line and haven't started content yet,
-    // it's invalid (cards without a column)
+    // skip silently (blank lines or whitespace between header and columns)
     if (!contentStarted) {
-      // Could be the first column, or an error
-      // For permissiveness, skip these lines silently (they might be blank
-      // lines or just whitespace between header and columns)
       continue;
     }
 
     if (!currentColumn) {
-      // Content line before any column — skip with warning
       warn(lineNumber, 'Card line found before any column');
       continue;
     }
 
-    const indent = measureIndent(line);
-
-    // Detail lines: indented under a card
-    if (indent > 0 && currentCard) {
+    // Detail lines: indented deeper than the card
+    if (currentCard && indent > cardBaseIndent) {
       currentCard.details.push(trimmed);
       currentCard.endLineNumber = lineNumber;
       continue;
     }
 
-    // New card line (non-indented within a column)
-    // Finalize previous card
-    if (currentCard) {
-      // endLineNumber already tracked
+    // Card line: indented under a [Column]
+    if (indent > 0) {
+      cardCounter++;
+      const card = parseCardLine(
+        trimmed,
+        lineNumber,
+        cardCounter,
+        aliasMap,
+        palette
+      );
+      cardBaseIndent = indent;
+      currentCard = card;
+      currentColumn.cards.push(card);
+      continue;
     }
 
-    cardCounter++;
-    const card = parseCardLine(
-      trimmed,
-      lineNumber,
-      cardCounter,
-      aliasMap,
-      palette
-    );
-    currentCard = card;
-    currentColumn.cards.push(card);
+    // Un-indented non-column line in content phase — could be stray text
+    // For permissiveness, skip silently
   }
 
   // Finalize last card's endLineNumber
@@ -310,7 +329,7 @@ export function parseKanban(
   }
 
   if (result.columns.length === 0 && !result.error) {
-    return fail(1, 'No columns found. Use == Column Name == to define columns');
+    return fail(1, 'No columns found. Use [Column Name] to define columns');
   }
 
   return result;

package/src/sharing.ts

@@ -8,6 +8,7 @@ const COMPRESSED_SIZE_LIMIT = 8192; // 8 KB
 
 export interface DiagramViewState {
   activeTagGroup?: string;
+  collapsedGroups?: string[];
 }
 
 export interface DecodedDiagramUrl {
@@ -47,6 +48,10 @@ export function encodeDiagramUrl(
     hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
   }
 
+  if (options?.viewState?.collapsedGroups?.length) {
+    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(','))}`;
+  }
+
   // Encode in both query param AND hash fragment — some share mechanisms
   // strip one or the other (iOS share sheet strips #, AirDrop strips ?)
   return { url: `${baseUrl}?${hash}#${hash}` };
@@ -89,6 +94,9 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
     if (key === 'tag' && val) {
       viewState.activeTagGroup = val;
     }
+    if (key === 'cg' && val) {
+      viewState.collapsedGroups = val.split(',').filter(Boolean);
+    }
   }
 
   // Strip 'dgmo=' prefix