@diagrammo/dgmo 0.45.0 → 0.46.0

package/src/element/index.ts

@@ -45,8 +45,8 @@ import {
   resolveTheme,
   sanitizeSvgInPlace,
   deriveAriaLabel,
-  buildSourcePanel,
-  buildErrorBanner,
+  buildRenderedBlock,
+  buildErrorBlock,
   buildShareUrl,
   sharedWarn,
   type ThemePreference,
@@ -275,7 +275,9 @@ export class DgmoDiagram extends HTMLElement {
     line?: number;
     column?: number;
   }): void {
-    this.mount(buildErrorBanner(opts), 'dgmo dgmo--error');
+    // The standard error card carries `.dgmo.dgmo--error` on its own root,
+    // so the container itself stays class-free.
+    this.mount(buildErrorBlock({ ...opts, source: this.source ?? '' }), '');
   }
 
   private async rerender(): Promise<void> {
@@ -289,9 +291,8 @@ export class DgmoDiagram extends HTMLElement {
 
     // Loading state (visible only while an async render/fetch is in flight).
     const loading = document.createElement('div');
-    loading.className = 'dgmo-error-banner-loc';
     loading.textContent = 'Rendering diagram…';
-    this.mount(loading, 'dgmo dgmo--loading');
+    this.mount(loading, 'dgmo--loading');
 
     const themePref = this.themePreference();
     const resolvedTheme =
@@ -382,22 +383,29 @@ export class DgmoDiagram extends HTMLElement {
           ? 'dgmo-theme-transparent'
           : 'dgmo-theme-light';
 
-    const frag = document.createDocumentFragment();
-    frag.appendChild(svgEl);
-
-    // Showcase chrome: collapsible source panel + Copy + Open-in-editor.
-    if (this.isShowcase()) {
-      const shareUrl = buildShareUrl(src, {
-        palette,
-        theme: resolvedTheme === 'dark' ? 'dark' : 'light',
-        editorBase: this.editorBase(),
-        campaign: VERSION,
-        utmSource: 'element-embed',
-      });
-      frag.appendChild(buildSourcePanel(src, shareUrl, true));
-    }
-
-    this.mount(frag, `dgmo-rendered ${themeClass} dgmo--rendered`);
+    // Showcase chrome: standard embed block (BL-114) with the hover-reveal
+    // toolbar (view-source toggle + Copy + Open-in-editor).
+    const showcase = this.isShowcase();
+    const shareUrl = showcase
+      ? buildShareUrl(src, {
+          palette,
+          theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+          editorBase: this.editorBase(),
+          campaign: VERSION,
+          utmSource: 'element-embed',
+        })
+      : null;
+
+    const wrapper = buildRenderedBlock({
+      source: src,
+      svgEl,
+      themeClass,
+      showSource: showcase,
+      showEditorLink: showcase,
+      shareUrl,
+    });
+
+    this.mount(wrapper, 'dgmo--rendered');
   }
 }
 

package/src/infra/renderer.ts

@@ -2109,7 +2109,7 @@ function renderLegend(
     .attr('transform', `translate(0, ${legendY})`);
 
   if (activeGroup) {
-    legendG.attr('data-legend-active', activeGroup.toLowerCase());
+    legendG.attr('data-legend-active', tagAttrKey(activeGroup));
   }
 
   // Build all groups including Playback as a regular group for consistent rendering

package/src/render.ts

@@ -24,11 +24,29 @@ const DOM_GLOBALS = [
   'HTMLElement',
   'SVGElement',
 ] as const;
-let domRefCount = 0;
-let domInstallPromise: Promise<void> | null = null;
-let domInstalledByUs = false;
+// The ref-count state lives on `globalThis` under a well-known symbol rather
+// than in module state: dist/index and dist/block are each self-contained
+// bundles, so a host importing both gets two copies of this module. With
+// per-copy state, each copy keeps its own ref-count over the SAME
+// `globalThis.document` — one copy's release tears down globals mid-render of
+// the other. `Symbol.for` puts every copy on one shared count.
+interface DomGlobalsState {
+  refCount: number;
+  installPromise: Promise<void> | null;
+  installedByUs: boolean;
+}
+const DOM_STATE_KEY = Symbol.for('diagrammo.dgmo.dom-globals');
+
+function domState(): DomGlobalsState {
+  const g = globalThis as { [DOM_STATE_KEY]?: DomGlobalsState };
+  return (g[DOM_STATE_KEY] ??= {
+    refCount: 0,
+    installPromise: null,
+    installedByUs: false,
+  });
+}
 
-async function installDom(): Promise<void> {
+async function installDom(state: DomGlobalsState): Promise<void> {
   const { JSDOM } = await loadJsdom();
   // Concrete URL → non-opaque origin, so host code that touches
   // window.localStorage during a same-process render doesn't throw.
@@ -49,7 +67,7 @@ async function installDom(): Promise<void> {
       configurable: true,
     });
   }
-  domInstalledByUs = true;
+  state.installedByUs = true;
 }
 
 /**
@@ -58,22 +76,24 @@ async function installDom(): Promise<void> {
  * we did not install). Pair every successful call with `releaseDom()`.
  */
 async function acquireDom(): Promise<void> {
-  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;
 }
 
 /** Tear down the jsdom globals once no render is in flight. */
 function releaseDom(): void {
-  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 as Record<string, unknown>)[key];
   }
-  domInstalledByUs = false;
-  domInstallPromise = null;
-  domRefCount = 0;
+  state.installedByUs = false;
+  state.installPromise = null;
+  state.refCount = 0;
 }
 
 /**

package/src/sitemap/renderer.ts

@@ -663,7 +663,7 @@ export function renderSitemap(
       .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,

package/src/timeline/renderer.ts

@@ -1299,7 +1299,7 @@ function renderTimelineTagLegendOverlay(
       if (currentActiveGroup) {
         legendContainer.attr(
           'data-legend-active',
-          currentActiveGroup.toLowerCase()
+          tagAttrKey(currentActiveGroup)
         );
       }
 

package/src/utils/hover-styles.ts

@@ -25,6 +25,8 @@
 // there is no opacity double-up. `render({ bakeHover: false })` opts out.
 // ============================================================
 
+import { tagAttrKey } from './tag-groups';
+
 /** How a chart's cross-highlight rules are shaped. `self` = self-emphasis only
  *  (no cross-highlight — single-series / non-relational charts). */
 export type HoverStrategy = 'enumerated' | 'structural' | 'connection' | 'self';
@@ -599,7 +601,10 @@ function deriveFromSvg(svg: string, spec: HoverSpec): HoverDerived {
         .querySelector('[data-legend-active]')
         ?.getAttribute('data-legend-active');
       if (slug) {
-        groupAttr = `data-tag-${slug}`;
+        // Defensive re-slug: legacy SVGs (pre-0.46) carried the raw lowercased
+        // group name here, which is not a valid attribute name when the group
+        // name contains spaces/parens — querySelectorAll would throw.
+        groupAttr = `data-tag-${tagAttrKey(slug)}`;
       } else {
         // Fallback for charts with no legend-active marker (e.g. mindmap): if
         // the marks carry exactly ONE distinct `data-tag-*` group, use it.

package/src/utils/legend-d3.ts

@@ -74,10 +74,7 @@ export function renderLegendD3(
 
     // Set active attribute on container
     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);
     }

package/src/utils/legend-svg.ts

@@ -180,7 +180,7 @@ export function renderLegendSvg(
 
   const classAttr = className ? ` class="${esc(className)}"` : '';
   const activeAttr = activeGroup
-    ? ` data-legend-active="${esc(activeGroup.toLowerCase())}"`
+    ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"`
     : '';
   const svg = `<g${classAttr}${activeAttr}>${parts.join('')}</g>`;