@diagrammo/dgmo 0.52.0 → 0.54.0

package/dist/{chunk-H7KENAZO.js → chunk-COJW2NEY.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-PDKUANDZ.js";
 import {
   layoutGraph
-} from "./chunk-HFMYN6N2.js";
+} from "./chunk-3B2GXZCX.js";
 import {
   appendArrowheadMarkers
 } from "./chunk-LP7EC4MI.js";
@@ -14,7 +14,7 @@ import {
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-J7TLCB2Q.js";
+} from "./chunk-3IUHKMJI.js";
 import {
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
@@ -22,6 +22,12 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-2NZOHEP4.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-J7HQPVYH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -30,21 +36,27 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
+import {
+  parseState
+} from "./chunk-T7Y554OK.js";
 import {
   measureText
-} from "./chunk-WCT3NYCV.js";
+} from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-WBM7ZNDI.js";
+} from "./chunk-JYDMBWRP.js";
 import {
-  parseState
-} from "./chunk-ROOE4R4Y.js";
+  resolveActiveTagGroup,
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-AHTTKERF.js";
 import {
-  fillModeFromOptions
-} from "./chunk-BRENJ2BQ.js";
+  fillModeFromOptions,
+  legendSuppressed
+} from "./chunk-3FRO35WW.js";
 
 // src/graph/state-renderer.ts
 import * as d3Selection from "d3-selection";
@@ -100,6 +112,23 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const sGroupExtraPadding = ctx.aesthetic(GROUP_EXTRA_PADDING);
   const showTitle = !!graph.title && graph.options["no-title"] !== "on";
   const titleHeight = showTitle ? 40 : 0;
+  const tagGroups = graph.tagGroups ?? [];
+  const activeTagGroup = resolveActiveTagGroup(
+    tagGroups,
+    graph.options["active-tag"]
+  );
+  const legendGroups = tagGroups;
+  const hasLegend = legendGroups.length > 0 && !legendSuppressed(graph.options);
+  const legendH = hasLegend ? ctx.structural(
+    getMaxLegendReservedHeight(
+      {
+        groups: legendGroups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: exportDims ? "export" : "preview"
+      },
+      width
+    )
+  ) + 8 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
   const { scale, offsetX, offsetY, canvasHeight } = fitDiagramToCanvas({
@@ -108,7 +137,9 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     diagramW,
     diagramH,
     padding: sDiagramPadding,
-    titleHeight,
+    // The legend band sits directly under the title, so it reserves the same
+    // top strip fitDiagramToCanvas already offsets the diagram by.
+    titleHeight: titleHeight + legendH,
     maxScale: MAX_SCALE,
     exportMode: !!exportDims
   });
@@ -141,6 +172,21 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
       }
     }
   }
+  if (hasLegend) {
+    const legendG = svg.append("g").attr("transform", `translate(0, ${titleHeight + 4})`);
+    renderIntegratedLegend(legendG, {
+      groups: legendGroups,
+      activeGroup: activeTagGroup,
+      mode: exportDims ? "export" : "preview",
+      // Inactive sibling groups stay visible as collapsed pills so the user
+      // can click one to flip the active colouring dimension (as in b&l).
+      showInactivePills: true,
+      palette,
+      isDark,
+      width
+    });
+    legendG.selectAll("[data-legend-group]").classed("st-legend-group", true);
+  }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   for (const group of layout.groups) {
     if (group.collapsed) continue;
@@ -246,9 +292,22 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const colorOff = graph.options?.["color"] === "off";
   const fillMode = fillModeFromOptions(graph.options ?? {});
   const noNotes = graph.options?.["no-notes"] === "on";
+  const mutableTagGroups = [...tagGroups];
+  const nodeIntentColor = (node) => node.color ?? (activeTagGroup ? resolveTagColor(
+    node.metadata ?? {},
+    mutableTagGroups,
+    activeTagGroup
+  ) : void 0);
   for (const node of layout.nodes) {
     const isCollapsedGroup = collapsedGroupIds.has(node.id);
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", isCollapsedGroup ? "st-group-wrapper st-node" : "st-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id).style("cursor", "pointer");
+    if (activeTagGroup && node.shape !== "pseudostate") {
+      const tagKey = tagAttrKey(activeTagGroup);
+      const metaValue = node.metadata?.[tagKey];
+      if (metaValue) {
+        nodeG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
+      }
+    }
     if (isCollapsedGroup) {
       nodeG.attr("data-group-toggle", node.id).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr("aria-label", `Expand group ${node.label}`);
     }
@@ -263,7 +322,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     } else if (isCollapsedGroup) {
       const w = node.width;
       const h = node.height;
-      const groupColor = node.color ?? stateDefaultColor(palette, colorOff);
+      const groupColor = nodeIntentColor(node) ?? stateDefaultColor(palette, colorOff);
       const fillColor = shapeFill(palette, groupColor, isDark, {
         mode: fillMode
       });
@@ -284,14 +343,15 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     } else {
       const w = node.width;
       const h = node.height;
+      const intentColor = nodeIntentColor(node);
       const resolvedFill = stateFill(
         palette,
         isDark,
-        node.color,
+        intentColor,
         colorOff,
         fillMode
       );
-      nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", resolvedFill).attr("stroke", stateStroke(palette, node.color, colorOff)).attr("stroke-width", sNodeStrokeWidth);
+      nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", resolvedFill).attr("stroke", stateStroke(palette, intentColor, colorOff)).attr("stroke-width", sNodeStrokeWidth);
       nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr(
         "fill",
         contrastText(
@@ -379,4 +439,4 @@ export {
   renderState,
   renderStateForExport
 };
-//# sourceMappingURL=chunk-H7KENAZO.js.map
+//# sourceMappingURL=chunk-COJW2NEY.js.map

package/dist/{chunk-WBRZJOEC.js → chunk-COVYNAKJ.js}

@@ -1,15 +1,15 @@
 import {
   buildPlacedNotes
-} from "./chunk-JED6ZDEE.js";
+} from "./chunk-5HWPEYWB.js";
 import {
   noteCanvasShift
 } from "./chunk-6EK55ART.js";
-import {
-  measureText
-} from "./chunk-WCT3NYCV.js";
 import {
   resolveNotes
-} from "./chunk-FMDSF3OV.js";
+} from "./chunk-QZAW5SFH.js";
+import {
+  measureText
+} from "./chunk-4ASYQ347.js";
 
 // src/class/layout.ts
 import dagre from "@dagrejs/dagre";
@@ -201,4 +201,4 @@ function layoutClassDiagram(parsed, options) {
 export {
   layoutClassDiagram
 };
-//# sourceMappingURL=chunk-WBRZJOEC.js.map
+//# sourceMappingURL=chunk-COVYNAKJ.js.map

package/dist/{chunk-7QE3XMRK.js → chunk-CSHFU6LT.js}

@@ -5,7 +5,7 @@ import {
 import {
   renderCollapseBar,
   renderNodeCard
-} from "./chunk-OTOHI4JO.js";
+} from "./chunk-H3HFC3SQ.js";
 import {
   CARD_RADIUS,
   COLLAPSE_BAR_HEIGHT,
@@ -25,16 +25,16 @@ import {
 } from "./chunk-3CIOJ5YJ.js";
 import {
   layoutOrg
-} from "./chunk-QZX5S6R3.js";
+} from "./chunk-BWYFIVZF.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-AUIM2NVH.js";
+} from "./chunk-2NZOHEP4.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-YAA6IID3.js";
+} from "./chunk-J7HQPVYH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -42,6 +42,9 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
+import {
+  parseOrg
+} from "./chunk-T3FAJAJT.js";
 import {
   EYE_CLOSED_PATH,
   EYE_OPEN_PATH,
@@ -49,26 +52,23 @@ import {
   LEGEND_EYE_SIZE,
   LEGEND_GROUP_GAP,
   LEGEND_HEIGHT
-} from "./chunk-QOOUC2J5.js";
+} from "./chunk-Q5IHQ4NW.js";
 import {
   measureText
-} from "./chunk-WCT3NYCV.js";
-import {
-  parseOrg
-} from "./chunk-NNS4E7CW.js";
+} from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-WBM7ZNDI.js";
+} from "./chunk-JYDMBWRP.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-HHKO6SKY.js";
+} from "./chunk-AHTTKERF.js";
 import {
   fillModeFromOptions
-} from "./chunk-BRENJ2BQ.js";
+} from "./chunk-3FRO35WW.js";
 
 // src/org/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -485,4 +485,4 @@ export {
   renderOrg,
   renderOrgForExport
 };
-//# sourceMappingURL=chunk-7QE3XMRK.js.map
+//# sourceMappingURL=chunk-CSHFU6LT.js.map

package/dist/{chunk-6EJITS44.js → chunk-DLU643TF.js}

@@ -1,15 +1,15 @@
 import {
   GRAPH_DX
-} from "./chunk-I46X5VUA.js";
+} from "./chunk-7TF3QOOD.js";
 import {
   tryCollectNote
-} from "./chunk-ARGMQ3H4.js";
+} from "./chunk-WWHECSYZ.js";
 import {
   resolveNotes
-} from "./chunk-FMDSF3OV.js";
+} from "./chunk-QZAW5SFH.js";
 import {
   parseInArrowLabel
-} from "./chunk-FFUN5D66.js";
+} from "./chunk-WF64MW5G.js";
 import {
   displayName,
   normalizeName
@@ -21,7 +21,7 @@ import {
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-BRENJ2BQ.js";
+} from "./chunk-3FRO35WW.js";
 import {
   NAME_DIAGNOSTIC_CODES,
   emit,
@@ -29,7 +29,7 @@ import {
   makeDgmoError,
   nameMergedMessage,
   suggest
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/graph/flowchart-parser.ts
 function nodeId(shape, label) {
@@ -470,4 +470,4 @@ export {
   looksLikeFlowchart,
   extractSymbols
 };
-//# sourceMappingURL=chunk-6EJITS44.js.map
+//# sourceMappingURL=chunk-DLU643TF.js.map

package/dist/{chunk-LBMS4AW6.js → chunk-DPGQ5UMO.js}

@@ -4,7 +4,7 @@ import {
   layoutC4Containers,
   layoutC4Context,
   layoutC4Deployment
-} from "./chunk-ONU3U4GL.js";
+} from "./chunk-LRSW4JLE.js";
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk-3CIOJ5YJ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-AUIM2NVH.js";
+} from "./chunk-2NZOHEP4.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -25,30 +25,30 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
-import {
-  LEGEND_HEIGHT
-} from "./chunk-QOOUC2J5.js";
-import {
-  measureText,
-  wrapTextToWidth
-} from "./chunk-WCT3NYCV.js";
 import {
   parseC4
-} from "./chunk-BPY242XU.js";
+} from "./chunk-2NYXI35Z.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
+import {
+  LEGEND_HEIGHT
+} from "./chunk-Q5IHQ4NW.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   mix,
   shapeFill
-} from "./chunk-WBM7ZNDI.js";
+} from "./chunk-JYDMBWRP.js";
 import {
   tagAttrKey
-} from "./chunk-HHKO6SKY.js";
+} from "./chunk-AHTTKERF.js";
 import {
   fillModeFromOptions
-} from "./chunk-BRENJ2BQ.js";
+} from "./chunk-3FRO35WW.js";
 
 // src/c4/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -1036,4 +1036,4 @@ export {
   renderC4Deployment,
   renderC4DeploymentForExport
 };
-//# sourceMappingURL=chunk-LBMS4AW6.js.map
+//# sourceMappingURL=chunk-DPGQ5UMO.js.map

package/dist/{chunk-LTXOLDUZ.js → chunk-EAI6XJ7D.js}

@@ -4,16 +4,16 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-HHKO6SKY.js";
+} from "./chunk-AHTTKERF.js";
 import {
   FILL_FAMILY_TOKENS,
   extractColor,
   measureIndent,
   parseFirstLine
-} from "./chunk-BRENJ2BQ.js";
+} from "./chunk-3FRO35WW.js";
 import {
   emit
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/swimlane/diagnostics.ts
 var SWIMLANE_DX = {
@@ -303,6 +303,12 @@ function parseSwimlane(content, palette) {
         options[trimmed.toLowerCase()] = "on";
       continue;
     }
+    const dirBool = indent === 0 ? trimmed.match(/^direction-(lr|tb)$/i) : null;
+    if (dirBool) {
+      direction = dirBool[1].toUpperCase();
+      options["direction"] = direction;
+      continue;
+    }
     if (indent === 0 && /^direction\s+/i.test(trimmed)) {
       const val = trimmed.replace(/^direction\s+/i, "").trim().toUpperCase();
       if (val === "LR" || val === "TB") {
@@ -525,7 +531,8 @@ function parseSwimlane(content, palette) {
     if (cIdx > 0) trimmed = trimmed.slice(0, cIdx).trim();
     if (!trimmed) continue;
     const indent = measureIndent(raw);
-    if (indent === 0 && /^direction\s+/i.test(trimmed)) continue;
+    if (indent === 0 && /^direction(?:\s+|-(?:lr|tb)$)/i.test(trimmed))
+      continue;
     if (indent === 0 && FILL_FAMILY_TOKENS.has(trimmed.toLowerCase())) continue;
     if (matchTagBlockHeading(trimmed) && indent === 0) {
       inTagBlock = true;
@@ -685,4 +692,4 @@ export {
   SWIMLANE_DIAGNOSTICS,
   parseSwimlane
 };
-//# sourceMappingURL=chunk-LTXOLDUZ.js.map
+//# sourceMappingURL=chunk-EAI6XJ7D.js.map

package/dist/{chunk-FT3ZYWET.js → chunk-EPRF3ZRV.js}

@@ -12,11 +12,11 @@ import {
   fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-BRENJ2BQ.js";
+} from "./chunk-3FRO35WW.js";
 import {
   makeDgmoError,
   makeFail
-} from "./chunk-CXK4DZH3.js";
+} from "./chunk-4W2PE66Q.js";
 
 // src/countdown/parser.ts
 var TIME_24H_RE = /^(\d{1,2}):(\d{2})$/;
@@ -52,19 +52,20 @@ function parse24h(tok) {
   return { hour, minute };
 }
 function parseAt(rest, lineNum, softError) {
-  const t = parse24h(rest.trim());
+  const tok = rest.trim();
+  const t = parse24h(tok);
   if (t) return t;
-  const fixed = ampmTo24h(rest.trim());
-  softError(
-    lineNum,
-    fixed ? `"at ${rest}": use 24h time (${fixed}).` : `"at" needs a 24h time like 18:00 (got "${rest}").`
-  );
+  const fixed = ampmTo24h(tok);
+  if (fixed) return parse24h(fixed);
+  softError(lineNum, `"at" needs a time like 18:00 or 6:30pm (got "${rest}").`);
   return null;
 }
 function ampmTo24h(tok) {
   const m = tok.match(AMPM_RE);
   if (!m) return null;
-  let hour = Number(m[1]) % 12;
+  const h = Number(m[1]);
+  if (h < 1 || h > 12) return null;
+  let hour = h % 12;
   if (/pm/i.test(m[3])) hour += 12;
   return `${String(hour).padStart(2, "0")}:${m[2] ?? "00"}`;
 }
@@ -545,4 +546,4 @@ export {
   targetToMs2 as targetToMs,
   parseCountdown
 };
-//# sourceMappingURL=chunk-FT3ZYWET.js.map
+//# sourceMappingURL=chunk-EPRF3ZRV.js.map