@diagrammo/dgmo 0.14.1 → 0.15.1

package/src/infra/parser.ts

@@ -194,6 +194,24 @@ export function parseInfra(content: string): ParsedInfra {
     if (!m) return { label: trimmed };
     return { label: m[1].trim(), alias: m[2] };
   }
+
+  // Infra nodes have no "is a <type>" declaration — capability comes from
+  // properties (cache-hit, buffer, drain-rate, …). Strip the suffix if a
+  // user wrote it (likely copying from sequence/c4 syntax) and warn.
+  const IS_A_SUFFIX = /^(.*?)\s+is\s+an?\s+[A-Za-z][\w-]*\s*$/i;
+  function peelInfraDecorations(
+    rawName: string,
+    lineNumber: number
+  ): { label: string; alias?: string } {
+    const peeled = peelAlias(rawName);
+    const m = peeled.label.match(IS_A_SUFFIX);
+    if (!m) return peeled;
+    warn(
+      lineNumber,
+      `Infra nodes don't use 'is a <type>' — types are inferred from properties (cache-hit, buffer, drain-rate, …). Drop the 'is a' suffix.`
+    );
+    return { label: m[1].trim(), alias: peeled.alias };
+  }
   /**
    * Resolve a connection-target token. If the token exactly matches a
    * declared alias, return the bound canonical id. Otherwise fall
@@ -333,11 +351,11 @@ export function parseInfra(content: string): ParsedInfra {
 
       // animate (default ON) / no-animate
       if (trimmed === 'animate') {
-        result.options.animate = 'on';
+        result.options['animate'] = 'on';
         continue;
       }
       if (trimmed === 'no-animate') {
-        result.options.animate = 'off';
+        result.options['animate'] = 'off';
         continue;
       }
 
@@ -399,7 +417,7 @@ export function parseInfra(content: string): ParsedInfra {
         finishCurrentTagGroup();
 
         const rawName = (compMatch[1] ?? compMatch[2] ?? '').trim();
-        const peeled = peelAlias(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || '';
         const { tags } = extractPipeMetadata(rest);
@@ -482,7 +500,7 @@ export function parseInfra(content: string): ParsedInfra {
       if (compMatch) {
         finishCurrentTagGroup();
         const rawName = (compMatch[1] ?? compMatch[2] ?? '').trim();
-        const peeled = peelAlias(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || '';
         const { tags: nodeTags } = extractPipeMetadata(rest);
@@ -532,11 +550,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -570,11 +588,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -613,11 +631,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -651,11 +669,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -764,7 +782,7 @@ export function parseInfra(content: string): ParsedInfra {
       const compMatch = trimmed.match(COMPONENT_RE);
       if (compMatch) {
         const rawName = (compMatch[1] ?? compMatch[2] ?? '').trim();
-        const peeled = peelAlias(rawName);
+        const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
         const rest = compMatch[3] || '';
         const { tags: nodeTags } = extractPipeMetadata(rest);
@@ -796,10 +814,13 @@ export function parseInfra(content: string): ParsedInfra {
         finishCurrentTagGroup();
         currentGroup = null;
 
-        const name = (compMatch[1] ?? compMatch[2] ?? '').trim();
+        const rawName = (compMatch[1] ?? compMatch[2] ?? '').trim();
+        const peeled = peelInfraDecorations(rawName, lineNumber);
+        const name = peeled.label;
         const rest = compMatch[3] || '';
         const { tags } = extractPipeMetadata(rest);
         const id = nodeId(name);
+        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
 
         currentNode = {
           id,
@@ -871,12 +892,23 @@ export function parseInfra(content: string): ParsedInfra {
 // Symbol extraction (for completion API)
 // ============================================================
 
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 /**
  * Extract component names (entities) from infra document text.
  * Used by the dgmo completion API for ghost hints and popup completions.
  */
+/** Strip ` as <alias>` and ` is a/an <type>` decorations from a node name
+ *  so completion suggests the bare identifier the user will reference. */
+function stripNodeDecorations(name: string): string {
+  let s = name.trim();
+  const aliasMatch = s.match(/^(.*?)\s+as\s+[A-Za-z][A-Za-z0-9_]{0,11}\s*$/);
+  if (aliasMatch) s = aliasMatch[1].trim();
+  const isAMatch = s.match(/^(.*?)\s+is\s+an?\s+[A-Za-z][\w-]*\s*$/i);
+  if (isAMatch) s = isAMatch[1].trim();
+  return s;
+}
+
 export function extractSymbols(docText: string): DiagramSymbols {
   const entities: string[] = [];
   let inMetadata = true;
@@ -916,7 +948,7 @@ export function extractSymbols(docText: string): DiagramSymbols {
       if (/^\[/.test(line)) continue; // [Group] header
       const m = COMPONENT_RE.exec(line);
       if (m) {
-        const name = (m[1] ?? m[2] ?? '').trim();
+        const name = stripNodeDecorations((m[1] ?? m[2] ?? '').trim());
         if (name && !entities.includes(name)) entities.push(name);
       }
     } else {
@@ -940,7 +972,7 @@ export function extractSymbols(docText: string): DiagramSymbols {
         continue;
       const m = COMPONENT_RE.exec(line);
       if (m) {
-        const name = (m[1] ?? m[2] ?? '').trim();
+        const name = stripNodeDecorations((m[1] ?? m[2] ?? '').trim());
         if (name && !entities.includes(name)) entities.push(name);
       }
     }

package/src/infra/renderer.ts

@@ -1165,7 +1165,7 @@ function renderEdgePaths(
   nodes: InfraLayoutNode[],
   groups: InfraLayoutGroup[],
   palette: PaletteColors,
-  isDark: boolean,
+  _isDark: boolean,
   animate: boolean,
   direction: 'LR' | 'TB',
   speedMultiplier: number = 1
@@ -1245,7 +1245,7 @@ function renderEdgeLabels(
   nodes: InfraLayoutNode[],
   groups: InfraLayoutGroup[],
   palette: PaletteColors,
-  isDark: boolean,
+  _isDark: boolean,
   animate: boolean,
   direction: 'LR' | 'TB'
 ) {

package/src/internal.ts

@@ -1,20 +1,14 @@
 // ============================================================
-// @diagrammo/dgmo/internal — internal helpers for app consumers.
-// Not part of the public API; may change between versions.
+// @diagrammo/dgmo/internal — DEPRECATED ALIAS for @diagrammo/dgmo/advanced
+//
+// This subpath was renamed to `/advanced` to match its actual contract
+// ("low-level but supported" rather than "private"). Update your imports:
+//
+//   import { … } from '@diagrammo/dgmo/internal';
+//   →
+//   import { … } from '@diagrammo/dgmo/advanced';
+//
+// The `/internal` subpath will be removed in 0.17.x.
 // ============================================================
 
-export { parseDataRowValues } from './chart';
-export {
-  computeCardArchive,
-  computeCardMove,
-  isArchiveColumn,
-} from './kanban/mutations';
-export {
-  applyGroupOrdering,
-  applyPositionOverrides,
-  buildNoteMessageMap,
-  buildRenderSequence,
-  computeActivations,
-  groupMessagesBySection,
-} from './sequence/renderer';
-export { orderArcNodes } from './d3';
+export * from './advanced';

package/src/kanban/parser.ts

@@ -270,8 +270,8 @@ export function parseKanban(
           parsePipeMetadata(pipeSegments, metaAliasMap)
         );
         // Extract wip from metadata
-        if (columnMetadata.wip) {
-          const wipVal = parseInt(columnMetadata.wip, 10);
+        if (columnMetadata['wip']) {
+          const wipVal = parseInt(columnMetadata['wip'], 10);
           if (!isNaN(wipVal)) {
             wipLimit = wipVal;
           }

package/src/mindmap/layout.ts

@@ -64,7 +64,7 @@ interface PositionedNode {
 
 export function layoutMindmap(
   parsed: ParsedMindmap,
-  palette: PaletteColors,
+  _palette: PaletteColors,
   options?: {
     interactive?: boolean;
     hiddenCounts?: Map<string, number>;

package/src/mindmap/parser.ts

@@ -297,7 +297,7 @@ export function parseMindmap(
 function parseNodeLine(
   trimmed: string,
   lineNumber: number,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   counter: number,
   aliasMap: Map<string, string>,
   warnFn: (line: number, msg: string) => void

package/src/org/parser.ts

@@ -389,7 +389,7 @@ function parseNodeLabel(
   trimmed: string,
   _indent: number,
   lineNumber: number,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   counter: number,
   metaAliasMap: Map<string, string> = new Map(),
   warnFn?: (line: number, msg: string) => void,

package/src/org/renderer.ts

@@ -235,7 +235,7 @@ export function renderOrg(
   const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
 
   // Render container backgrounds (bottom layer)
-  const colorOff = parsed.options?.color === 'off';
+  const colorOff = parsed.options?.['color'] === 'off';
   for (const c of layout.containers) {
     const cG = contentG
       .append('g')

package/src/palettes/index.ts

@@ -34,3 +34,42 @@ export { tokyoNightPalette } from './tokyo-night';
 
 export { draculaPalette } from './dracula';
 export { monokaiPalette } from './monokai';
+
+// ============================================================
+// Public namespace — `palettes` for use with render()
+// ============================================================
+
+import { boldPalette } from './bold';
+import { catppuccinPalette } from './catppuccin';
+import { draculaPalette } from './dracula';
+import { gruvboxPalette } from './gruvbox';
+import { monokaiPalette } from './monokai';
+import { nordPalette } from './nord';
+import { oneDarkPalette } from './one-dark';
+import { rosePinePalette } from './rose-pine';
+import { solarizedPalette } from './solarized';
+import { tokyoNightPalette } from './tokyo-night';
+
+import type { PaletteConfig } from './types';
+
+/**
+ * All built-in palettes, keyed by camelCase id. Use directly with render():
+ *
+ *   await render(text, { palette: palettes.catppuccin });
+ *
+ * For preference/settings storage, the `.id` field of each entry is the
+ * canonical string (e.g. `'tokyo-night'`, `'nord'`) — that's the wire format
+ * used by share URLs and the CLI `--palette` flag.
+ */
+export const palettes = {
+  nord: nordPalette,
+  catppuccin: catppuccinPalette,
+  solarized: solarizedPalette,
+  gruvbox: gruvboxPalette,
+  tokyoNight: tokyoNightPalette,
+  oneDark: oneDarkPalette,
+  rosePine: rosePinePalette,
+  dracula: draculaPalette,
+  monokai: monokaiPalette,
+  bold: boldPalette,
+} as const satisfies Record<string, PaletteConfig>;

package/src/pert/layout.ts

@@ -488,7 +488,7 @@ export function relayoutPert(
 function applySwimLanes(
   g: any,
   resolved: ResolvedPert,
-  memberToGroup: Map<string, string>,
+  _memberToGroup: Map<string, string>,
   collapsedGroupIds: ReadonlySet<string>
 ): boolean {
   const expanded = resolved.groups.filter(

package/src/pert/monte-carlo.ts

@@ -134,8 +134,8 @@ interface SimulationOptions {
 function simulate(
   resolved: ResolvedPert,
   expanded: ExpandedActivity[],
-  predecessors: Map<string, string[]>,
-  successors: Map<string, string[]>,
+  _predecessors: Map<string, string[]>,
+  _successors: Map<string, string[]>,
   topo: string[],
   terminals: string[],
   poisoned: Set<string>,

package/src/pert/parser.ts

@@ -42,7 +42,7 @@ import type {
   DeclarationSite,
   ReferenceSite,
 } from './internal';
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 // ============================================================
 // Regexes / constants
@@ -675,7 +675,7 @@ export function parsePert(
         id,
         name,
         activityIds: [],
-        collapsed: meta.collapsed === 'true',
+        collapsed: meta['collapsed'] === 'true',
         lineNumber,
         ...(Object.keys(tags).length > 0 && { tags }),
       });
@@ -1027,7 +1027,7 @@ export function parsePert(
       name: decl.name,
       ...(decl.alias !== undefined && { alias: decl.alias }),
       duration: estimate,
-      ...(meta.confidence && { confidence: meta.confidence }),
+      ...(meta['confidence'] && { confidence: meta['confidence'] }),
       ...(decl.groupHint !== undefined && { groupId: decl.groupHint }),
       lineNumber: decl.lineNumber,
       isMilestone,

package/src/raci/parser.ts

@@ -389,9 +389,9 @@ export function parseRaci(
           let roleColor: string | undefined;
           if (segments.length > 1) {
             const meta = parsePipeMetadata(segments);
-            if (meta.color) {
+            if (meta['color']) {
               roleColor = resolveColorWithDiagnostic(
-                meta.color,
+                meta['color'],
                 j + 1,
                 result.diagnostics,
                 palette
@@ -473,9 +473,9 @@ export function parseRaci(
         let phaseColor: string | undefined;
         if (phaseMatch[2]) {
           const meta = parsePipeMetadata(['', phaseMatch[2]]);
-          if (meta.color) {
+          if (meta['color']) {
             phaseColor = resolveColorWithDiagnostic(
-              meta.color,
+              meta['color'],
               lineNumber,
               result.diagnostics,
               palette

package/src/raci/renderer.ts

@@ -1150,7 +1150,7 @@ function renderTaskRow(
   surfaceBg: string,
   solid: boolean,
   taskDiagnostics: Map<string, TaskDiagnosticBucket> | null,
-  hasAnyDiagnostic: boolean,
+  _hasAnyDiagnostic: boolean,
   rowContent: RowContent | undefined,
   onClickLine?: (lineNumber: number) => void,
   _onMarkerDragStart?: (source: RaciDragSource, e: PointerEvent) => void

package/src/render.ts

@@ -13,7 +13,7 @@ import type { CompactViewState } from './sharing';
 async function ensureDom(): Promise<void> {
   if (typeof document !== 'undefined') return;
 
-  const { JSDOM } = await import('jsdom');
+  const { JSDOM } = await loadJsdom();
   const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
   const win = dom.window;
 
@@ -39,6 +39,22 @@ async function ensureDom(): Promise<void> {
   });
 }
 
+/**
+ * Load jsdom server-side. The specifier is constructed at runtime so
+ * downstream bundlers (Vite, Rollup, esbuild, webpack) cannot statically
+ * resolve it. Without this indirection, every browser bundle of
+ * @diagrammo/dgmo emits a 5+ MB jsdom chunk even though `ensureDom()`
+ * guards execution with a `typeof document` check — the guard prevents
+ * runtime evaluation, but the static dependency edge still pulls jsdom
+ * into the bundle.
+ */
+async function loadJsdom(): Promise<typeof import('jsdom')> {
+  const spec = ['js', 'dom'].join('');
+  return import(/* @vite-ignore */ /* webpackIgnore: true */ spec) as Promise<
+    typeof import('jsdom')
+  >;
+}
+
 /**
  * Render DGMO source to an SVG string.
  *

package/src/sequence/renderer.ts

@@ -949,9 +949,6 @@ export function renderSequenceDiagram(
   const messages = collapsed ? collapsed.messages : parsed.messages;
   const elements = collapsed ? collapsed.elements : parsed.elements;
   const groups = collapsed ? collapsed.groups : parsed.groups;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const collapsedGroupIds = collapsed?.collapsedGroupIds ?? new Map();
-
   const collapsedSections = options?.collapsedSections;
 
   const sourceParticipants = collapsed
@@ -1006,7 +1003,7 @@ export function renderSequenceDiagram(
   const charsForWidth = (maxW: number): number =>
     Math.floor((maxW - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
 
-  const activationsOff = parsedOptions.activations?.toLowerCase() === 'off';
+  const activationsOff = parsedOptions['activations']?.toLowerCase() === 'off';
 
   // Tag resolution — shared utility handles priority chain:
   // programmatic override → diagram-level active-tag → auto-activate first group

package/src/sitemap/parser.ts

@@ -566,7 +566,7 @@ export function parseSitemap(
 function parseNodeLabel(
   trimmed: string,
   lineNumber: number,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   counter: number,
   metaAliasMap: Map<string, string> = new Map(),
   warnFn?: (line: number, msg: string) => void,

package/src/tech-radar/interactive.ts

@@ -188,7 +188,7 @@ function renderQuarterCircle(
   width: number,
   height: number,
   mutedColor: string,
-  tooltip: HTMLDivElement,
+  _tooltip: HTMLDivElement,
   rootContainer: HTMLElement,
   onClickItem?: (lineNumber: number) => void
 ): void {

package/src/tech-radar/renderer.ts

@@ -920,7 +920,7 @@ import type { TechRadarBlip } from './types';
 
 function createBlipPopover(
   container: HTMLElement,
-  palette: PaletteColors,
+  _palette: PaletteColors,
   isDark: boolean
 ): HTMLDivElement {
   container.style.position = 'relative';

package/src/themes.ts

@@ -0,0 +1,22 @@
+/**
+ * Theme — render mode flag. Selects which palette variant the renderer uses
+ * for background and text:
+ *  - 'light'       → palette.light colors
+ *  - 'dark'        → palette.dark colors
+ *  - 'transparent' → no background fill (for embedding in colored containers)
+ */
+export type Theme = 'light' | 'dark' | 'transparent';
+
+/**
+ * `themes` namespace — use with render() options for a typed handle:
+ *
+ *   await render(text, { theme: themes.dark });
+ *
+ * Passing the raw string `'dark'` also works (the underlying type is the
+ * string-literal union); the namespace is the conventional path.
+ */
+export const themes = {
+  light: 'light',
+  dark: 'dark',
+  transparent: 'transparent',
+} as const satisfies Record<string, Theme>;

package/src/utils/tag-groups.ts

@@ -418,25 +418,21 @@ export function injectDefaultTagMetadata(
  *
  * 1. Programmatic override (from render API / CLI flag) — highest priority
  * 2. Diagram-level `active-tag` option (from parsed source)
- * 3. No coloring (null) — collapsed-by-default
+ * 3. Auto-activate first declared tag group
+ * 4. No coloring (null)
  *
  * The sentinel value `"none"` (case-insensitive) at any level means
- * "suppress tag coloring."
+ * "suppress tag coloring." Diagrams with tag groups render colored by
+ * default across every render path (CLI, export, share-link, app); use
+ * `active-tag none` to opt out.
  *
- * Note: there is no auto-activate-first-group fallback. Coloring is
- * opt-in: either the source carries `active-tag <name>` or the caller
- * (typically the app on user click) supplies a programmatic override.
- * Static exports therefore render the legend as a row of collapsed
- * pills with nodes uncolored — consistent with the app's pre-click
- * default.
- *
- * @param _tagGroups    Declared tag groups (kept for API stability; unused since auto-activation removed)
+ * @param tagGroups     Declared tag groups (only `.name` is used)
  * @param explicitActiveTag  Value of `active-tag` option from parsed diagram, if any
  * @param programmaticOverride  Value from render API / CLI; `undefined` = not set,
  *                              `null` or `''` = explicitly no coloring
  */
 export function resolveActiveTagGroup(
-  _tagGroups: ReadonlyArray<{ name: string }>,
+  tagGroups: ReadonlyArray<{ name: string }>,
   explicitActiveTag: string | undefined,
   programmaticOverride?: string | null
 ): string | null {
@@ -453,7 +449,10 @@ export function resolveActiveTagGroup(
     return explicitActiveTag;
   }
 
-  // 3. No explicit activation → no coloring (collapsed-by-default)
+  // 3. Auto-activate first declared group
+  if (tagGroups.length > 0) return tagGroups[0].name;
+
+  // 4. No tag groups → no coloring
   return null;
 }
 

package/src/wireframe/layout.ts

@@ -333,7 +333,8 @@ function layoutElement(
 
   // Container — layout children
   const isInlineRow =
-    el.metadata._inlineRow === 'true' || el.metadata._labelField === 'true';
+    el.metadata['_inlineRow'] === 'true' ||
+    el.metadata['_labelField'] === 'true';
   const padTop = isInlineRow ? 0 : GROUP_PADDING_TOP;
   const padBottom = isInlineRow ? 0 : GROUP_PADDING_BOTTOM;
   const padX = isInlineRow ? 0 : GROUP_PADDING_X;
@@ -402,8 +403,8 @@ function allocateEqualWidths(
 function getElementHeight(el: WireframeElement): number {
   if (el.type === 'heading') {
     return el.headingLevel === 2
-      ? (ELEMENT_HEIGHTS.subheading ?? 36)
-      : (ELEMENT_HEIGHTS.heading ?? 48);
+      ? (ELEMENT_HEIGHTS['subheading'] ?? 36)
+      : (ELEMENT_HEIGHTS['heading'] ?? 48);
   }
 
   if (el.type === 'textInput' && el.fieldVariant === 'textarea') {
@@ -421,11 +422,11 @@ function getElementHeight(el: WireframeElement): number {
   if (el.type === 'image') {
     if (el.imageHint === 'round') return 80;
     if (el.imageHint === 'wide') return 80;
-    return ELEMENT_HEIGHTS.image ?? 120;
+    return ELEMENT_HEIGHTS['image'] ?? 120;
   }
 
   // Label-field wrapper
-  if (el.metadata._labelField === 'true') {
+  if (el.metadata['_labelField'] === 'true') {
     return 36; // input height
   }
 
@@ -434,7 +435,7 @@ function getElementHeight(el: WireframeElement): number {
 
 function getSpacingAfter(el: WireframeElement): number {
   if (el.type === 'heading' && el.headingLevel === 2) {
-    return SPACING_AFTER.subheading ?? 12;
+    return SPACING_AFTER['subheading'] ?? 12;
   }
   return SPACING_AFTER[el.type] ?? 8;
 }
@@ -448,7 +449,10 @@ function computeFieldAlignX(children: WireframeElement[]): number {
   let labelFieldCount = 0;
 
   for (const child of children) {
-    if (child.metadata._labelField === 'true' && child.children.length >= 2) {
+    if (
+      child.metadata['_labelField'] === 'true' &&
+      child.children.length >= 2
+    ) {
       const labelEl = child.children[0];
       const labelWidth = labelEl.label.length * CHAR_WIDTH;
       maxLabelWidth = Math.max(maxLabelWidth, labelWidth);

package/src/wireframe/parser.ts

@@ -650,7 +650,7 @@ export function parseWireframe(content: string): ParsedWireframe {
     wrapper.isContainer = true;
     wrapper.orientation = 'horizontal';
     wrapper.children = children;
-    wrapper.metadata._inlineRow = 'true';
+    wrapper.metadata['_inlineRow'] = 'true';
     pushElement(wrapper);
   }
 
@@ -852,7 +852,7 @@ export function parseWireframe(content: string): ParsedWireframe {
             wrapper.isContainer = true;
             wrapper.orientation = 'horizontal';
             wrapper.children.push(labelEl, fieldEl);
-            wrapper.metadata._labelField = 'true';
+            wrapper.metadata['_labelField'] = 'true';
             pushElement(wrapper);
           }
         } else {