@diagrammo/dgmo 0.45.0 → 0.46.0

package/dist/block.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,
@@ -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,
@@ -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,
@@ -68655,6 +68652,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)";
@@ -69049,7 +69047,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) => {
@@ -69104,10 +69102,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/"
@@ -69126,23 +69130,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/block.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,
@@ -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,
@@ -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("");