@diagrammo/dgmo 0.15.0 → 0.16.0

package/src/utils/tag-groups.ts

@@ -9,8 +9,9 @@ import {
   tagShorthandRemovedMessage,
   type DgmoError,
 } from '../diagnostics';
+import { RECOGNIZED_COLOR_NAMES } from '../colors';
 
-/** A single entry inside a tag group: `Value(color)` */
+/** A single entry inside a tag group: `Value color` */
 export interface TagEntry {
   value: string;
   color: string;
@@ -32,7 +33,7 @@ interface TagBlockMatch {
   name: string;
   alias: string | undefined;
   colorHint: string | undefined;
-  /** Inline tag values parsed from single-line form (e.g., `tag Priority as p High(red), Low(blue)`) */
+  /** Inline tag values parsed from single-line form (e.g., `tag Priority as p High red, Low blue`) */
   inlineValues?: string[];
   /**
    * If the heading used the legacy `tag Name <alias>` (bare shorthand)
@@ -51,8 +52,8 @@ interface TagBlockMatch {
  * Returns the cleaned text and whether the keyword was present.
  *
  * Examples:
- *   "NA(gray) default" → { text: "NA(gray)", isDefault: true }
- *   "Done(green)"      → { text: "Done(green)", isDefault: false }
+ *   "NA gray default" → { text: "NA gray", isDefault: true }
+ *   "Done green"      → { text: "Done green", isDefault: false }
  */
 export function stripDefaultModifier(text: string): {
   text: string;
@@ -90,7 +91,7 @@ export function isTagBlockHeading(trimmed: string): boolean {
 /**
  * Parse a tag declaration line: `tag Name [as <alias>] [Values...]`
  *
- * Canonical form (post-TD-18): `tag Priority as p High(red), Low(blue)`.
+ * Canonical form: `tag Priority as p High red, Low blue` (universal §1.5).
  *
  * Legacy forms still parse for graceful degradation but set
  * `legacyForm` on the result so the caller can emit
@@ -117,12 +118,26 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
   let restStartIdx = 1;
 
   // Locate any keyword separator (`as` or legacy `alias`) that appears
-  // BEFORE the first inline-value token. Inline values are tokens that
-  // contain `(` (color suffix) or follow a comma.
+  // BEFORE the first inline-value token. Inline values are recognized by
+  // a comma in the line: scan tokens for one. Under §1.5 trailing-token
+  // syntax there's no `(color)` marker anymore — a comma anywhere after
+  // the name span signals that inline values follow.
   let valueStart = tokens.length;
   for (let i = 1; i < tokens.length; i++) {
-    if (tokens[i].includes('(')) {
+    if (tokens[i].includes(',')) {
+      // valueStart is the FIRST token of the first inline value, which is
+      // the token immediately following the alias / keyword span. Walk
+      // back to the start of the value span by finding the most recent
+      // word boundary — but for the simple heuristic here, the inline
+      // value list starts at the previous non-keyword token.
       valueStart = i;
+      // The token containing the comma might be `High` (in `High red,`)
+      // or `red,` (in `High red,` if tokenized differently). Treat the
+      // value span as starting at the token BEFORE the first comma
+      // unless that token is the alias / keyword.
+      // Simpler: use this index as a coarse upper bound. The keyword
+      // search below uses [1, valueStart) — anything past `as`/`alias`
+      // belongs to the value span.
       break;
     }
   }
@@ -170,16 +185,77 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
   } else {
     // No `as`/`alias` keyword — try legacy bare-shorthand. The trailing
     // token of the name span (just before inline values) is the alias
-    // candidate; if it passes the universal alias regex, accept it and
-    // mark legacyForm='bare-shorthand'.
-    if (tokens[0][0] === '"' || tokens[0][0] === "'") {
+    // candidate; if it passes the universal alias regex AND is NOT a
+    // recognized palette color (§1.5 escape hatch), accept it.
+    //
+    // When inline values are present (valueStart < tokens.length), the
+    // tokens immediately before the first value-segment-with-color form
+    // the (name + alias) prefix. The first value contains at least the
+    // value name + trailing color, so we walk back to find where it
+    // starts: skip the trailing color token, then 1+ name tokens.
+    const isColorWord = (s: string): boolean =>
+      (RECOGNIZED_COLOR_NAMES as readonly string[]).includes(s);
+
+    if (valueStart < tokens.length) {
+      // Inline values are present (we found a comma at valueStart).
+      // The first value's last token is at index commaIdx; strip the
+      // comma to inspect. Walk back to determine the value name length.
+      const commaTokenIdx = valueStart;
+      // Find where the first value starts: the value contains at least
+      // 1 word + optional trailing color. Walk back from commaTokenIdx
+      // while the previous tokens look like value-name words (i.e. not
+      // a recognized alias-shaped lowercase short token that is followed
+      // by a value start).
+      // Simpler heuristic: pre-comma trailing color is the last token if
+      // it's a recognized color (after stripping comma). The value's
+      // name is the token immediately before that. So the value spans
+      // (firstValueStart..=commaTokenIdx). The "name + alias" prefix
+      // is [0, firstValueStart).
+      const lastBeforeComma = tokens[commaTokenIdx].replace(/,$/, '');
+      // value = `<name word(s)> <color>` if trailing token is a recognized
+      // palette word; otherwise value = `<name word(s)>` (no color).
+      const firstValueStart = isColorWord(lastBeforeComma)
+        ? commaTokenIdx - 1
+        : commaTokenIdx;
+      // Now firstValueStart points at the first token of value #1.
+      // [0, firstValueStart) is the `<name + optional alias>` prefix.
+      const prefixEnd = firstValueStart;
+      const aliasCandidate = prefixEnd > 1 ? tokens[prefixEnd - 1] : undefined;
+      if (
+        aliasCandidate &&
+        isAliasToken(aliasCandidate) &&
+        !isColorWord(aliasCandidate)
+      ) {
+        alias = aliasCandidate;
+        legacyForm = 'bare-shorthand';
+        name = tokens
+          .slice(0, prefixEnd - 1)
+          .map((t) => stripQuotes(t))
+          .join(' ');
+        restStartIdx = prefixEnd;
+      } else {
+        name = tokens
+          .slice(0, prefixEnd)
+          .map((t) => stripQuotes(t))
+          .join(' ');
+        restStartIdx = prefixEnd;
+      }
+    } else if (tokens[0][0] === '"' || tokens[0][0] === "'") {
       // Quoted name. Check the next token for legacy bare alias.
-      if (tokens.length > 1 && isAliasToken(tokens[1]) && valueStart > 1) {
+      if (
+        tokens.length > 1 &&
+        isAliasToken(tokens[1]) &&
+        !isColorWord(tokens[1])
+      ) {
         alias = tokens[1];
         legacyForm = 'bare-shorthand';
         restStartIdx = 2;
       }
-    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
+    } else if (
+      valueStart > 1 &&
+      isAliasToken(tokens[valueStart - 1]) &&
+      !isColorWord(tokens[valueStart - 1])
+    ) {
       // Bare shorthand at the end of the name span.
       alias = tokens[valueStart - 1];
       legacyForm = 'bare-shorthand';
@@ -207,12 +283,16 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
       .filter(Boolean);
   }
 
-  // Trailing `(color)` on the name itself (no inline values).
+  // Trailing recognized-color token on the name itself (no inline values).
+  // Per §1.5 universal trailing-token: case-sensitive lowercase match.
   if (!inlineValues || inlineValues.length === 0) {
-    const colorMatch = name.match(/\(([^)]+)\)\s*$/);
-    if (colorMatch) {
-      colorHint = colorMatch[1];
-      name = name.substring(0, colorMatch.index!).trim();
+    const lastSpaceIdx = name.lastIndexOf(' ');
+    if (lastSpaceIdx > 0) {
+      const trailing = name.substring(lastSpaceIdx + 1);
+      if ((RECOGNIZED_COLOR_NAMES as readonly string[]).includes(trailing)) {
+        colorHint = trailing;
+        name = name.substring(0, lastSpaceIdx).trimEnd();
+      }
     }
   }
 
@@ -418,25 +498,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 +529,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);
   }
 
@@ -718,7 +718,7 @@ export function parseWireframe(content: string): ParsedWireframe {
         }
       }
 
-      // Indented tag entry: `Value(color)` or `Value(color) default`
+      // Indented tag entry: `Value color` or `Value color default`
       if (indent > 0 && currentTagGroup) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
         const { label, color } = extractColor(cleanEntry);
@@ -736,7 +736,7 @@ export function parseWireframe(content: string): ParsedWireframe {
         } else {
           pushWarning(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
         }
         continue;
@@ -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 {

package/src/wireframe/renderer.ts

@@ -268,7 +268,10 @@ function renderGroup(
   const el = node.element;
 
   // Inline rows and label-field wrappers — no group chrome, just render children
-  if (el.metadata._inlineRow === 'true' || el.metadata._labelField === 'true') {
+  if (
+    el.metadata['_inlineRow'] === 'true' ||
+    el.metadata['_labelField'] === 'true'
+  ) {
     for (const child of node.children) {
       renderNode(g, child, ctx, depth);
     }
@@ -637,7 +640,7 @@ function renderText(
   const el = node.element;
 
   // Check if this is a label-field wrapper
-  if (el.metadata._labelField === 'true' && el.children.length >= 2) {
+  if (el.metadata['_labelField'] === 'true' && el.children.length >= 2) {
     for (const child of node.children) {
       renderNode(g, child, ctx, 0);
     }