@diagrammo/dgmo 0.8.11 → 0.8.12

package/src/kanban/renderer.ts

@@ -257,7 +257,7 @@ export function renderKanban(
     const legendY = DIAGRAM_PADDING + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
-      position: { placement: 'top-center', titleRelation: 'below-title' },
+      position: { placement: 'top-center', titleRelation: 'inline-with-title' },
       mode: exportDims ? 'inline' : 'fixed',
     };
     const legendState: LegendState = { activeGroup: activeTagGroup ?? null };

package/src/org/parser.ts

@@ -6,6 +6,7 @@ import {
   isTagBlockHeading,
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 import {
@@ -54,6 +55,7 @@ const KNOWN_OPTIONS = new Set([
   'sub-node-label',
   'hide',
   'show-sub-node-count',
+  'active-tag',
 ]);
 /** Known org chart boolean options (bare keyword = on). */
 const KNOWN_BOOLEANS = new Set(['show-sub-node-count', 'direction-tb']);
@@ -344,6 +346,7 @@ export function parseOrg(content: string, palette?: PaletteColors): ParsedOrg {
     collectAll(result.roots);
 
     validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
 
   if (

package/src/sequence/parser.ts

@@ -18,6 +18,7 @@ import type { TagGroup } from '../utils/tag-groups';
 import {
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 
@@ -1280,6 +1281,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         entities.push({ metadata: g.metadata, lineNumber: g.lineNumber });
     }
     validateTagValues(entities, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
 
   return result;

package/src/sequence/renderer.ts

@@ -24,6 +24,7 @@ import type {
 import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
 import { resolveSequenceTags } from './tag-resolution';
 import type { ResolvedTagMap } from './tag-resolution';
+import { resolveActiveTagGroup } from '../utils/tag-groups';
 import { LEGEND_HEIGHT } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
@@ -918,13 +919,14 @@ export function renderSequenceDiagram(
 
   const activationsOff = parsedOptions.activations?.toLowerCase() === 'off';
 
-  // Tag resolution — compute resolved tag values and build color lookup
-  // Explicit render option wins (including null = "no active group"),
-  // then fall back to diagram-level `active-tag: Name` option for CLI/export
+  // Tag resolution — shared utility handles priority chain:
+  // programmatic override → diagram-level active-tag → auto-activate first group
   const activeTagGroup =
-    options?.activeTagGroup !== undefined
-      ? options.activeTagGroup || undefined
-      : parsedOptions['active-tag'] || undefined;
+    resolveActiveTagGroup(
+      parsed.tagGroups,
+      parsedOptions['active-tag'],
+      options?.activeTagGroup
+    ) ?? undefined;
   let tagMap: ResolvedTagMap | undefined;
   const tagValueToColor = new Map<string, string>();
   if (activeTagGroup) {

package/src/sharing.ts

@@ -3,7 +3,7 @@ import {
   decompressFromEncodedURIComponent,
 } from 'lz-string';
 
-const DEFAULT_BASE_URL = 'https://diagrammo.app/view';
+const DEFAULT_BASE_URL = 'https://online.diagrammo.app';
 const COMPRESSED_SIZE_LIMIT = 8192; // 8 KB
 
 export interface DiagramViewState {
@@ -27,7 +27,12 @@ export interface EncodeDiagramUrlOptions {
 
 export type EncodeDiagramUrlResult =
   | { url: string; error?: undefined }
-  | { url?: undefined; error: 'too-large'; compressedSize: number; limit: number };
+  | {
+      url?: undefined;
+      error: 'too-large';
+      compressedSize: number;
+      limit: number;
+    };
 
 /**
  * Compress a DGMO DSL string into a shareable URL.
@@ -36,14 +41,18 @@ export type EncodeDiagramUrlResult =
  */
 export function encodeDiagramUrl(
   dsl: string,
-  options?: EncodeDiagramUrlOptions,
+  options?: EncodeDiagramUrlOptions
 ): EncodeDiagramUrlResult {
   const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
   const compressed = compressToEncodedURIComponent(dsl);
   const byteSize = new TextEncoder().encode(compressed).byteLength;
 
   if (byteSize > COMPRESSED_SIZE_LIMIT) {
-    return { error: 'too-large', compressedSize: byteSize, limit: COMPRESSED_SIZE_LIMIT };
+    return {
+      error: 'too-large',
+      compressedSize: byteSize,
+      limit: COMPRESSED_SIZE_LIMIT,
+    };
   }
 
   let hash = `dgmo=${compressed}`;
@@ -124,7 +133,8 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
       viewState.collapsedLanes = val.split(',').filter(Boolean);
     }
     if (key === 'pal' && val) viewState.palette = val;
-    if (key === 'th' && (val === 'light' || val === 'dark')) viewState.theme = val;
+    if (key === 'th' && (val === 'light' || val === 'dark'))
+      viewState.theme = val;
   }
 
   // Strip 'dgmo=' prefix

package/src/sitemap/parser.ts

@@ -10,6 +10,7 @@ import {
   isTagBlockHeading,
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 import {
@@ -476,6 +477,7 @@ export function parseSitemap(
     };
     collectAll(result.roots);
     validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
 
   if (

package/src/utils/legend-layout.ts

@@ -271,13 +271,15 @@ export function computeLegendLayout(
   }
 
   // Position elements in rows
+  const alignLeft = config.position.titleRelation === 'inline-with-title';
   const rows = layoutRows(
     activeCapsule,
     pills,
     controlLayouts,
     groupAvailW,
     containerWidth,
-    totalControlsW
+    totalControlsW,
+    alignLeft
   );
 
   const height = rows.length * LEGEND_HEIGHT;
@@ -379,7 +381,8 @@ function layoutRows(
   controls: LegendControlLayout[],
   groupAvailW: number,
   containerWidth: number,
-  totalControlsW: number
+  totalControlsW: number,
+  alignLeft = false
 ): Array<{
   y: number;
   items: Array<LegendPillLayout | LegendCapsuleLayout | LegendControlLayout>;
@@ -405,7 +408,8 @@ function layoutRows(
     const itemW = item.width + LEGEND_GROUP_GAP;
     if (currentRowW + item.width > groupAvailW && currentRowItems.length > 0) {
       // Commit current row
-      centerRowItems(currentRowItems, containerWidth, totalControlsW);
+      if (!alignLeft)
+        centerRowItems(currentRowItems, containerWidth, totalControlsW);
       rows.push({ y: rowY, items: currentRowItems });
       rowY += LEGEND_HEIGHT;
       currentRowItems = [];

package/src/utils/tag-groups.ts

@@ -304,6 +304,27 @@ export function validateTagValues(
   }
 }
 
+// ── Tag Group Name Validation ────────────────────────────
+
+/**
+ * Warn when a tag group uses the reserved name "none" (case-insensitive).
+ * Should be called alongside `validateTagValues()` in each parser's
+ * post-parse validation.
+ */
+export function validateTagGroupNames(
+  tagGroups: ReadonlyArray<{ name: string; lineNumber: number }>,
+  pushWarning: (lineNumber: number, message: string) => void
+): void {
+  for (const group of tagGroups) {
+    if (group.name.toLowerCase() === 'none') {
+      pushWarning(
+        group.lineNumber,
+        `'none' is a reserved keyword and cannot be used as a tag group name`
+      );
+    }
+  }
+}
+
 // ── Default Metadata Injection ────────────────────────────
 
 /**
@@ -340,6 +361,49 @@ export function injectDefaultTagMetadata(
   }
 }
 
+// ── Active Tag Group Resolution ──────────────────────────────
+
+/**
+ * Determine which tag group should be active, using a priority chain:
+ *
+ * 1. Programmatic override (from render API / CLI flag) — highest priority
+ * 2. Diagram-level `active-tag` option (from parsed source)
+ * 3. Auto-activate first declared tag group
+ * 4. No coloring (null)
+ *
+ * The sentinel value `"none"` (case-insensitive) at any level means
+ * "suppress tag coloring."
+ *
+ * @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 }>,
+  explicitActiveTag: string | undefined,
+  programmaticOverride?: string | null
+): string | null {
+  // 1. Programmatic override (highest priority)
+  if (programmaticOverride !== undefined) {
+    if (!programmaticOverride) return null; // null or ''
+    if (programmaticOverride.toLowerCase() === 'none') return null;
+    return programmaticOverride;
+  }
+
+  // 2. Diagram-level active-tag option
+  if (explicitActiveTag) {
+    if (explicitActiveTag.toLowerCase() === 'none') return null;
+    return explicitActiveTag;
+  }
+
+  // 3. Auto-activate first declared group
+  if (tagGroups.length > 0) return tagGroups[0].name;
+
+  // 4. No tag groups → no coloring
+  return null;
+}
+
 // ── Matchers ────────────────────────────────────────────────
 
 export function matchTagBlockHeading(trimmed: string): TagBlockMatch | null {