@diagrammo/dgmo 0.45.0 → 0.47.0

package/src/auto/styles.ts

@@ -1,24 +1,40 @@
 /**
- * Static CSS for `@diagrammo/dgmo/auto`.
+ * Static CSS for `@diagrammo/dgmo/auto` (and `./element`, which shares the
+ * same injector).
  *
- * The string is a literal — no template interpolation of user-supplied
- * values. Theme/palette differences are applied via class hooks
- * (`.dgmo-theme-light`, `.dgmo-theme-dark`) on the rendered wrapper, so
- * a malicious theme name can never be smuggled into the stylesheet text.
+ * As of BL-114 the diagram + source chrome is the canonical standard block
+ * from `src/embed` — its styles ship in `BLOCK_CSS` and are appended below.
+ * This file only keeps the auto-surface-specific rules: anti-flash hiding,
+ * the `.dgmo-rendered` container reset, and the loading hint.
+ *
+ * `BLOCK_CSS` keys its dark-mode overrides off `[data-theme="dark"]`; the
+ * browser surfaces resolve the theme themselves and stamp a
+ * `.dgmo-theme-dark` class on the wrapper, so a re-scoped copy of the dark
+ * rules is appended too (same adapter pattern as fumadocs/nextra's
+ * build-css.mjs, done here at module init).
  *
- * All selectors are prefixed `.dgmo-` to avoid collisions with embedder
- * styles. Class names are part of the SemVer-stable surface — see
+ * The string is a literal — no template interpolation of user-supplied
+ * values. All selectors are prefixed `.dgmo-` to avoid collisions with
+ * embedder styles. Class names are part of the SemVer-stable surface — see
  * "SemVer policy" in the README HTML section.
+ *
+ * IMPORTANT: keep AUTO_BASE_CSS a single pure template literal — tsup's
+ * emitAutoCss extracts it (plus BLOCK_CSS) with a regex to build
+ * `dist/auto.css`, mirroring the concatenation done at the bottom of this
+ * file. Update tsup.config.ts if the assembly here changes.
  */
-export const CSS: string = `
+
+import { BLOCK_CSS } from '../embed/css';
+
+const AUTO_BASE_CSS: string = `
 /* anti-flash: hide source elements until either render swaps them out
-   or the error path explicitly un-hides them */
+   or the error path replaces them with the standard error card */
 pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
-.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *) {
+.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *):not(.dgmo--error):not(.dgmo--error *) {
   visibility: hidden;
 }
 .dgmo-rendered, .dgmo-rendered *,
-.dgmo-error-banner, .dgmo-error-banner * {
+.dgmo--error, .dgmo--error * {
   visibility: visible !important;
 }
 
@@ -32,197 +48,26 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
   line-height: 1.4;
   color-scheme: light dark;
 }
-.dgmo-rendered svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.dgmo-source-panel {
-  margin-top: 4px;
-  position: relative;
-}
-
-.dgmo-source-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  /* Visual size is small; the 28px hit area + padding still meets
-     the 44 × 44 minimum touch target across most stylesheets, and
-     we widen padding on coarse pointers below. */
-  min-height: 28px;
-  padding: 4px 6px;
-  background: transparent;
-  border: 0;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-align: left;
-  cursor: pointer;
-  color: inherit;
-  opacity: 0.45;
-  border-radius: 3px;
-  transition: opacity 120ms ease, background 120ms ease;
-}
-.dgmo-source-toggle:hover {
-  opacity: 0.85;
-  background: rgba(127, 127, 127, 0.08);
-}
-.dgmo-source-toggle:focus-visible {
-  opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-.dgmo-source-toggle[aria-expanded="true"] {
-  opacity: 0.7;
-}
-.dgmo-source-toggle .dgmo-chevron {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  font-size: 8px;
-  line-height: 1;
-  transition: transform 150ms ease-out;
-}
-.dgmo-source-toggle[aria-expanded="true"] .dgmo-chevron {
-  transform: rotate(90deg);
-}
-@media (pointer: coarse) {
-  /* Larger hit area on touch devices without making the visible
-     toggle bigger on the desktop. */
-  .dgmo-source-toggle {
-    min-height: 44px;
-    padding: 12px 10px;
-  }
-}
-
-.dgmo-source-body {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 150ms ease-out;
-  position: relative;
-}
-.dgmo-source-body.dgmo-open {
-  max-height: 60vh;
-  overflow: auto;
-  margin-top: 2px;
-  border-radius: 4px;
-  background: rgba(127, 127, 127, 0.04);
-}
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-body.dgmo-open {
-  background: rgba(255, 255, 255, 0.03);
-}
-.dgmo-source-pre {
-  margin: 0;
-  /* Right padding leaves room for the floating action icons. */
-  padding: 10px 56px 10px 14px;
-  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.45;
-  white-space: pre;
-  overflow: auto;
-  background: transparent;
-  color: inherit;
-}
-
-.dgmo-source-actions {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: flex;
-  gap: 2px;
-  /* Inherit visibility:hidden when collapsed; pointer-events:none keeps
-     them off the tab order until the panel opens. */
-  pointer-events: none;
-}
-.dgmo-source-body.dgmo-open .dgmo-source-actions {
-  pointer-events: auto;
-}
-.dgmo-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  background: transparent;
-  color: inherit;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  text-decoration: none;
-  opacity: 0.4;
-  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
-}
-.dgmo-btn:hover {
-  opacity: 1;
-  background: rgba(127, 127, 127, 0.15);
-}
-.dgmo-btn:focus-visible {
-  opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-.dgmo-btn[aria-disabled="true"] {
-  opacity: 0.25;
-  cursor: not-allowed;
-}
-.dgmo-btn[aria-disabled="true"]:hover {
-  background: transparent;
-}
-.dgmo-btn-copied {
-  opacity: 1 !important;
-  color: rgb(120, 200, 120);
-}
-.dgmo-btn svg {
-  width: 14px;
-  height: 14px;
-  display: block;
-}
 
-.dgmo-error-banner {
-  display: block;
-  margin: 0.5em 0;
-  padding: 10px 14px;
-  border-left: 4px solid #c44;
-  background: rgba(204, 68, 68, 0.08);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 13px;
-  line-height: 1.4;
-  color: inherit;
-  border-radius: 0 4px 4px 0;
-}
-.dgmo-error-banner-title {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-.dgmo-error-banner-loc {
-  opacity: 0.7;
+.dgmo--loading {
+  opacity: 0.6;
   font-size: 12px;
   font-family: ui-monospace, monospace;
 }
+`;
 
-/* Token roles — fallback colors used when theme classes don't override */
-.dgmo-source-pre .dgmo-tok-keyword { color: #5e81ac; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-controlKeyword { color: #b48ead; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-definitionKeyword { color: #5e81ac; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-modifier { color: #b48ead; }
-.dgmo-source-pre .dgmo-tok-chartType { color: #d08770; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-operator { color: #bf616a; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-number { color: #b48ead; }
-.dgmo-source-pre .dgmo-tok-comment { color: #6c7a96; font-style: italic; }
-.dgmo-source-pre .dgmo-tok-heading { color: #d08770; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-bracket { color: #5e81ac; }
-.dgmo-source-pre .dgmo-tok-separator { color: #88c0d0; }
-.dgmo-source-pre .dgmo-tok-url { color: #88c0d0; text-decoration: underline; }
-.dgmo-source-pre .dgmo-tok-colorAnnotation { color: #d08770; font-style: italic; }
-.dgmo-source-pre .dgmo-tok-punctuation { color: #6c7a96; }
-.dgmo-source-pre .dgmo-tok-noteContent { color: #6c7a96; font-style: italic; }
+/** Re-scope BLOCK_CSS's \`[data-theme="dark"]\` rules to `.dgmo-theme-dark`. */
+function darkScopedBlockCss(css: string): string {
+  const rules = css.match(/\[data-theme="dark"\][^{]*\{[^}]*\}/g) ?? [];
+  return rules
+    .map((rule) => rule.replace(/\[data-theme="dark"\]/g, '.dgmo-theme-dark'))
+    .join('\n');
+}
 
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-keyword,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-definitionKeyword { color: #81a1c1; }
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-comment,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-noteContent,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-punctuation { color: #616e88; }
-`;
+export const CSS: string =
+  AUTO_BASE_CSS +
+  '\n' +
+  BLOCK_CSS +
+  '\n' +
+  darkScopedBlockCss(BLOCK_CSS) +
+  '\n';

package/src/c4/renderer.ts

@@ -622,7 +622,7 @@ export function renderC4Context(
           .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
-      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+      legendParent.attr('data-legend-active', tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent as GSelection,
@@ -1804,7 +1804,7 @@ export function renderC4Containers(
           .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
-      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+      legendParent.attr('data-legend-active', tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent as GSelection,

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>`;