@diagrammo/dgmo 0.44.1 → 0.46.0

package/dist/highlight.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var highlight_api_exports = {};
 __export(highlight_api_exports, {
   ATTRIBUTE_KEYS: () => ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES: () => LIGHT_ROLE_STYLES,
   NODE_TO_ROLE: () => NODE_TO_ROLE,
   NORD_ROLE_STYLES: () => NORD_ROLE_STYLES,
   ROLE_TO_ANSI: () => ROLE_TO_ANSI,
@@ -747,6 +748,35 @@ var NORD_ROLE_STYLES = {
   noteContent: { color: "#616E88", fontStyle: "italic" },
   default: {}
 };
+var LIGHT_ROLE_STYLES = {
+  keyword: { color: "#3b6ea5", fontWeight: "bold" },
+  // slate blue
+  controlKeyword: { color: "#7d5ba6", fontWeight: "bold" },
+  // purple
+  definitionKeyword: { color: "#2f5a86", fontWeight: "bold" },
+  // deep blue
+  modifier: { color: "#7d5ba6" },
+  chartType: { color: "#b8691f", fontWeight: "bold" },
+  // amber
+  operator: { color: "#c0504d", fontWeight: "bold" },
+  // red
+  number: { color: "#7d5ba6" },
+  comment: { color: "#677483", fontStyle: "italic" },
+  // muted gray
+  heading: { color: "#b8691f", fontWeight: "bold" },
+  bracket: { color: "#5b6672" },
+  separator: { color: "#2d7268" },
+  // deep teal
+  deprecatedSyntax: { color: "#c0504d", textDecoration: "line-through" },
+  url: { color: "#3b6ea5", textDecoration: "underline" },
+  colorAnnotation: { color: "#b8691f", fontStyle: "italic" },
+  punctuation: { color: "#677483" },
+  propertyName: { color: "#2d7268" },
+  string: { color: "#3f7a3b" },
+  // forest green
+  noteContent: { color: "#677483", fontStyle: "italic" },
+  default: {}
+};
 var ROLE_TO_ANSI = {
   comment: "\x1B[3;90m",
   // italic dim
@@ -812,6 +842,7 @@ function renderAnsi(tokens, useColor) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES,
   NODE_TO_ROLE,
   NORD_ROLE_STYLES,
   ROLE_TO_ANSI,

package/dist/highlight.d.cts

@@ -31,10 +31,19 @@ declare function highlightDgmo(source: string): HighlightToken[];
  */
 declare const ATTRIBUTE_KEYS: Set<string>;
 declare const NORD_ROLE_STYLES: Record<string, Record<string, string>>;
+/**
+ * Light-background counterpart of NORD_ROLE_STYLES for static contexts
+ * (marketing site, light-mode source panels). Same role keys — a parity test
+ * (tests/block.test.ts) guards the two maps and the `.dgmo-tok-*` rules in
+ * block/css.ts against drift. Colors are darker AA-targeting tones tuned for
+ * a light code panel (bg ~#f3f5f8). Moved here from the site repo's
+ * hand-maintained mirror (BL-114).
+ */
+declare const LIGHT_ROLE_STYLES: Record<string, Record<string, string>>;
 declare const ROLE_TO_ANSI: Record<string, string>;
 /**
  * Render highlighted tokens to an ANSI string for terminal display.
  */
 declare function renderAnsi(tokens: HighlightToken[], useColor: boolean): string;
 
-export { ATTRIBUTE_KEYS, type HighlightToken, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };
+export { ATTRIBUTE_KEYS, type HighlightToken, LIGHT_ROLE_STYLES, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };

package/dist/highlight.d.ts

@@ -31,10 +31,19 @@ declare function highlightDgmo(source: string): HighlightToken[];
  */
 declare const ATTRIBUTE_KEYS: Set<string>;
 declare const NORD_ROLE_STYLES: Record<string, Record<string, string>>;
+/**
+ * Light-background counterpart of NORD_ROLE_STYLES for static contexts
+ * (marketing site, light-mode source panels). Same role keys — a parity test
+ * (tests/block.test.ts) guards the two maps and the `.dgmo-tok-*` rules in
+ * block/css.ts against drift. Colors are darker AA-targeting tones tuned for
+ * a light code panel (bg ~#f3f5f8). Moved here from the site repo's
+ * hand-maintained mirror (BL-114).
+ */
+declare const LIGHT_ROLE_STYLES: Record<string, Record<string, string>>;
 declare const ROLE_TO_ANSI: Record<string, string>;
 /**
  * Render highlighted tokens to an ANSI string for terminal display.
  */
 declare function renderAnsi(tokens: HighlightToken[], useColor: boolean): string;
 
-export { ATTRIBUTE_KEYS, type HighlightToken, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };
+export { ATTRIBUTE_KEYS, type HighlightToken, LIGHT_ROLE_STYLES, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };

package/dist/highlight.js

@@ -716,6 +716,35 @@ var NORD_ROLE_STYLES = {
   noteContent: { color: "#616E88", fontStyle: "italic" },
   default: {}
 };
+var LIGHT_ROLE_STYLES = {
+  keyword: { color: "#3b6ea5", fontWeight: "bold" },
+  // slate blue
+  controlKeyword: { color: "#7d5ba6", fontWeight: "bold" },
+  // purple
+  definitionKeyword: { color: "#2f5a86", fontWeight: "bold" },
+  // deep blue
+  modifier: { color: "#7d5ba6" },
+  chartType: { color: "#b8691f", fontWeight: "bold" },
+  // amber
+  operator: { color: "#c0504d", fontWeight: "bold" },
+  // red
+  number: { color: "#7d5ba6" },
+  comment: { color: "#677483", fontStyle: "italic" },
+  // muted gray
+  heading: { color: "#b8691f", fontWeight: "bold" },
+  bracket: { color: "#5b6672" },
+  separator: { color: "#2d7268" },
+  // deep teal
+  deprecatedSyntax: { color: "#c0504d", textDecoration: "line-through" },
+  url: { color: "#3b6ea5", textDecoration: "underline" },
+  colorAnnotation: { color: "#b8691f", fontStyle: "italic" },
+  punctuation: { color: "#677483" },
+  propertyName: { color: "#2d7268" },
+  string: { color: "#3f7a3b" },
+  // forest green
+  noteContent: { color: "#677483", fontStyle: "italic" },
+  default: {}
+};
 var ROLE_TO_ANSI = {
   comment: "\x1B[3;90m",
   // italic dim
@@ -780,6 +809,7 @@ function renderAnsi(tokens, useColor) {
 }
 export {
   ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES,
   NODE_TO_ROLE,
   NORD_ROLE_STYLES,
   ROLE_TO_ANSI,

package/dist/index.cjs

@@ -5052,10 +5052,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     legendG.selectAll("*").remove();
     if (currentLayout.height === 0) return;
     if (currentState.activeGroup) {
-      legendG.attr(
-        "data-legend-active",
-        currentState.activeGroup.toLowerCase()
-      );
+      legendG.attr("data-legend-active", tagAttrKey(currentState.activeGroup));
     } else {
       legendG.attr("data-legend-active", null);
     }
@@ -5862,7 +5859,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       if (currentActiveGroup) {
         legendContainer.attr(
           "data-legend-active",
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
       const iconAddon = viewMode ? 0 : LG_ICON_W;
@@ -25559,7 +25556,7 @@ function renderLegendSvg(groups, options) {
     track(pill.x, pill.y, pill.width, pill.height);
   }
   const classAttr = className ? ` class="${esc(className)}"` : "";
-  const activeAttr = activeGroup ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"` : "";
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"` : "";
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return {
     svg,
@@ -28040,7 +28037,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -30874,7 +30871,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   if (fixedLegend) {
     const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${sDiagramPadding + fixedTitleH})`);
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent,
@@ -37268,7 +37265,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {
@@ -41296,7 +41293,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -41911,7 +41908,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -45584,7 +45581,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const appHostedPlayback = controlsHost === "app" && !!playback;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
-    legendG.attr("data-legend-active", activeGroup.toLowerCase());
+    legendG.attr("data-legend-active", tagAttrKey(activeGroup));
   }
   const allGroups = legendGroups.map((g) => ({
     name: g.name,
@@ -68673,6 +68670,7 @@ async function exportVisualization(ctx) {
 init_charts_d3();
 
 // src/utils/hover-styles.ts
+init_tag_groups();
 var MAX_HOVER_GROUPS = 40;
 var DEFAULT_DIM_OPACITY = 0.4;
 var LIFT_DECL = "filter:saturate(1.4) brightness(1.06)";
@@ -69067,7 +69065,7 @@ function deriveFromSvg(svg, spec) {
     if (spec.groupAttrMode === "tag-active") {
       const slug = root.querySelector("[data-legend-active]")?.getAttribute("data-legend-active");
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         const names = /* @__PURE__ */ new Set();
         root.querySelectorAll(spec.markSelector).forEach((el) => {
@@ -69122,10 +69120,16 @@ var DOM_GLOBALS = [
   "HTMLElement",
   "SVGElement"
 ];
-var domRefCount = 0;
-var domInstallPromise = null;
-var domInstalledByUs = false;
-async function installDom() {
+var DOM_STATE_KEY = /* @__PURE__ */ Symbol.for("diagrammo.dgmo.dom-globals");
+function domState() {
+  const g = globalThis;
+  return g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false
+  };
+}
+async function installDom(state) {
   const { JSDOM } = await loadJsdom();
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
     url: "http://localhost/"
@@ -69144,23 +69148,25 @@ async function installDom() {
       configurable: true
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 async function acquireDom() {
-  if (typeof document !== "undefined" && !domInstalledByUs) return;
-  domRefCount++;
-  if (!domInstallPromise) domInstallPromise = installDom();
-  await domInstallPromise;
+  const state = domState();
+  if (typeof document !== "undefined" && !state.installedByUs) return;
+  state.refCount++;
+  if (!state.installPromise) state.installPromise = installDom(state);
+  await state.installPromise;
 }
 function releaseDom() {
-  if (!domInstalledByUs) return;
-  if (--domRefCount > 0) return;
+  const state = domState();
+  if (!state.installedByUs) return;
+  if (--state.refCount > 0) return;
   for (const key of DOM_GLOBALS) {
     delete globalThis[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");

package/dist/index.js

@@ -5050,10 +5050,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     legendG.selectAll("*").remove();
     if (currentLayout.height === 0) return;
     if (currentState.activeGroup) {
-      legendG.attr(
-        "data-legend-active",
-        currentState.activeGroup.toLowerCase()
-      );
+      legendG.attr("data-legend-active", tagAttrKey(currentState.activeGroup));
     } else {
       legendG.attr("data-legend-active", null);
     }
@@ -5862,7 +5859,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       if (currentActiveGroup) {
         legendContainer.attr(
           "data-legend-active",
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
       const iconAddon = viewMode ? 0 : LG_ICON_W;
@@ -25557,7 +25554,7 @@ function renderLegendSvg(groups, options) {
     track(pill.x, pill.y, pill.width, pill.height);
   }
   const classAttr = className ? ` class="${esc(className)}"` : "";
-  const activeAttr = activeGroup ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"` : "";
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"` : "";
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return {
     svg,
@@ -28035,7 +28032,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -30871,7 +30868,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   if (fixedLegend) {
     const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${sDiagramPadding + fixedTitleH})`);
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent,
@@ -37264,7 +37261,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {
@@ -41293,7 +41290,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -41908,7 +41905,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   if (hasLegend) {
     const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleHeight})`) : contentG.append("g").attr("class", "c4-legend");
     if (activeTagGroup) {
-      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+      legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
     renderLegend2(
       legendParent,
@@ -45581,7 +45578,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   const appHostedPlayback = controlsHost === "app" && !!playback;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
-    legendG.attr("data-legend-active", activeGroup.toLowerCase());
+    legendG.attr("data-legend-active", tagAttrKey(activeGroup));
   }
   const allGroups = legendGroups.map((g) => ({
     name: g.name,
@@ -68652,6 +68649,7 @@ async function exportVisualization(ctx) {
 init_charts_d3();
 
 // src/utils/hover-styles.ts
+init_tag_groups();
 var MAX_HOVER_GROUPS = 40;
 var DEFAULT_DIM_OPACITY = 0.4;
 var LIFT_DECL = "filter:saturate(1.4) brightness(1.06)";
@@ -69046,7 +69044,7 @@ function deriveFromSvg(svg, spec) {
     if (spec.groupAttrMode === "tag-active") {
       const slug = root.querySelector("[data-legend-active]")?.getAttribute("data-legend-active");
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         const names = /* @__PURE__ */ new Set();
         root.querySelectorAll(spec.markSelector).forEach((el) => {
@@ -69101,10 +69099,16 @@ var DOM_GLOBALS = [
   "HTMLElement",
   "SVGElement"
 ];
-var domRefCount = 0;
-var domInstallPromise = null;
-var domInstalledByUs = false;
-async function installDom() {
+var DOM_STATE_KEY = /* @__PURE__ */ Symbol.for("diagrammo.dgmo.dom-globals");
+function domState() {
+  const g = globalThis;
+  return g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false
+  };
+}
+async function installDom(state) {
   const { JSDOM } = await loadJsdom();
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
     url: "http://localhost/"
@@ -69123,23 +69127,25 @@ async function installDom() {
       configurable: true
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 async function acquireDom() {
-  if (typeof document !== "undefined" && !domInstalledByUs) return;
-  domRefCount++;
-  if (!domInstallPromise) domInstallPromise = installDom();
-  await domInstallPromise;
+  const state = domState();
+  if (typeof document !== "undefined" && !state.installedByUs) return;
+  state.refCount++;
+  if (!state.installPromise) state.installPromise = installDom(state);
+  await state.installPromise;
 }
 function releaseDom() {
-  if (!domInstalledByUs) return;
-  if (--domRefCount > 0) return;
+  const state = domState();
+  if (!state.installedByUs) return;
+  if (--state.refCount > 0) return;
   for (const key of DOM_GLOBALS) {
     delete globalThis[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 async function loadJsdom() {
   const spec = ["js", "dom"].join("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.44.1",
+  "version": "0.46.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {
@@ -89,7 +89,18 @@
         "default": "./dist/element.cjs"
       }
     },
-    "./fonts/*": "./fonts/*"
+    "./fonts/*": "./fonts/*",
+    "./block": {
+      "import": {
+        "types": "./dist/block.d.ts",
+        "default": "./dist/block.js"
+      },
+      "require": {
+        "types": "./dist/block.d.cts",
+        "default": "./dist/block.cjs"
+      }
+    },
+    "./block.css": "./dist/block.css"
   },
   "files": [
     "dist/*.js",