@diagrammo/dgmo 0.45.0 → 0.46.0

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,
@@ -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,
@@ -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,
@@ -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("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {

package/src/auto/index.ts

@@ -3,9 +3,9 @@
  *
  * Drop a `<script src="…/auto.js">` on any page; on `DOMContentLoaded`
  * this module scans for `.dgmo, .language-dgmo`, runs `render()`, and
- * replaces each match with `<div class="dgmo-rendered">` containing the
- * SVG plus an optional collapsible source panel with Copy and
- * "Open in editor" actions.
+ * replaces each match with the standard DGMO embed block (BL-114,
+ * `figure.dgmo.dgmo-rendered`) — the diagram plus a hover-reveal icon
+ * toolbar with view-source, Copy, and "Open in editor" actions.
  *
  * Public API: frozen `window.dgmo` and alias `window.diagrammo` with
  * `{ initialize, run, version }`. Configuration is read from the
@@ -24,8 +24,8 @@ import {
   resolveTheme,
   ensureStyles,
   deriveAriaLabel,
-  buildSourcePanel,
-  buildErrorBanner,
+  buildRenderedBlock,
+  buildErrorBlock,
   buildShareUrl,
 } from './shared';
 
@@ -59,7 +59,7 @@ let activeConfig: Required<AutoConfig> = { ...DEFAULTS };
 
 // Track wrappers so we can re-render on theme changes / re-runs.
 interface TrackedWrapper {
-  wrapper: HTMLDivElement;
+  wrapper: HTMLElement;
   source: string;
   perElementShowSource: boolean | null;
 }
@@ -220,7 +220,28 @@ function determineReplaceTarget(matched: Element): Element {
 }
 
 interface ProcessOutcome {
-  wrapper?: HTMLDivElement;
+  wrapper?: HTMLElement;
+}
+
+/**
+ * Swap a failing source element for the standard `.dgmo--error` card (which
+ * carries the message AND the offending source — unified error shape across
+ * every embed surface). The card is marked `data-dgmo-processed` so a
+ * follow-up run() doesn't loop on it; users wanting to retry after editing
+ * should insert a fresh source element.
+ */
+function replaceWithErrorCard(
+  el: Element,
+  source: string,
+  opts: {
+    message: string;
+    severity?: string;
+    line?: number;
+    column?: number;
+  }
+): void {
+  const card = buildErrorBlock({ ...opts, source });
+  determineReplaceTarget(el).replaceWith(card);
 }
 
 async function processElement(el: Element): Promise<ProcessOutcome> {
@@ -237,15 +258,10 @@ async function processElement(el: Element): Promise<ProcessOutcome> {
   const source = el.textContent || '';
   const sourceBytes = new TextEncoder().encode(source).byteLength;
   if (sourceBytes > SOURCE_BYTE_CAP) {
-    el.style.visibility = '';
-    // Keep `data-dgmo-processed` set so a follow-up run() doesn't loop on
-    // the same broken source. Users wanting to retry after editing should
-    // clear the attribute manually or replace the element. // un-hide so user can see the source
-    const banner = buildErrorBanner({
+    replaceWithErrorCard(el, source, {
       message: `DGMO source too large to render — ${SOURCE_BYTE_CAP / 1024} KB max`,
       severity: 'error',
     });
-    el.parentElement?.insertBefore(banner, el);
     warn('source exceeds 256 KB cap');
     return {};
   }
@@ -281,59 +297,40 @@ async function processElement(el: Element): Promise<ProcessOutcome> {
       palette: cfg.palette,
     });
   } catch (err) {
-    el.style.visibility = '';
-    // Keep `data-dgmo-processed` set so a follow-up run() doesn't loop on
-    // the same broken source. Users wanting to retry after editing should
-    // clear the attribute manually or replace the element.
     const message =
       err instanceof Error ? err.message : 'Render failed unexpectedly';
-    const banner = buildErrorBanner({ message, severity: 'error' });
-    el.parentElement?.insertBefore(banner, el);
+    replaceWithErrorCard(el, source, { message, severity: 'error' });
     warn('render() rejected:', err);
     return {};
   }
 
   if (result.diagnostics && result.diagnostics.length > 0) {
-    el.style.visibility = '';
-    // Keep `data-dgmo-processed` set so a follow-up run() doesn't loop on
-    // the same broken source. Users wanting to retry after editing should
-    // clear the attribute manually or replace the element.
     const d = result.diagnostics[0]!; // In-bounds by length > 0 check above.
     // d may have shape { severity, message, line, column } from diagnostics.ts
-    const banner = buildErrorBanner({
+    replaceWithErrorCard(el, source, {
       message: d.message,
       severity: d.severity,
       line: d.line,
       ...(d.column !== undefined && { column: d.column }),
     });
-    el.parentElement?.insertBefore(banner, el);
     warn('diagnostic:', d.message, d.line, d.column);
     return {};
   }
 
   if (!result.svg) {
-    el.style.visibility = '';
-    // Keep `data-dgmo-processed` set so a follow-up run() doesn't loop on
-    // the same broken source. Users wanting to retry after editing should
-    // clear the attribute manually or replace the element.
-    const banner = buildErrorBanner({
+    replaceWithErrorCard(el, source, {
       message: 'Empty SVG returned from renderer',
       severity: 'error',
     });
-    el.parentElement?.insertBefore(banner, el);
     return {};
   }
 
-  // Build wrapper.
-  const wrapper = document.createElement('div');
   const themeClass =
     resolvedTheme === 'dark'
       ? 'dgmo-theme-dark'
       : resolvedTheme === 'transparent'
         ? 'dgmo-theme-transparent'
         : 'dgmo-theme-light';
-  wrapper.className = `dgmo-rendered ${themeClass}`;
-  wrapper.dataset['dgmoProcessed'] = 'true';
 
   // Insert SVG via a detached holder + post-insertion sanitization. The
   // spec said "never assign user-supplied content to innerHTML"; we treat
@@ -349,15 +346,10 @@ async function processElement(el: Element): Promise<ProcessOutcome> {
   svgHolder.innerHTML = result.svg;
   const svgEl = svgHolder.querySelector('svg');
   if (!svgEl) {
-    el.style.visibility = '';
-    // Keep `data-dgmo-processed` set so a follow-up run() doesn't loop on
-    // the same broken source. Users wanting to retry after editing should
-    // clear the attribute manually or replace the element.
-    const banner = buildErrorBanner({
+    replaceWithErrorCard(el, source, {
       message: 'Empty SVG returned from renderer',
       severity: 'error',
     });
-    el.parentElement?.insertBefore(banner, el);
     return {};
   }
   sanitizeSvgInPlace(svgEl);
@@ -366,24 +358,30 @@ async function processElement(el: Element): Promise<ProcessOutcome> {
   // control/bidi-strip filter rather than relying on renderer output).
   svgEl.setAttribute('role', 'img');
   svgEl.setAttribute('aria-label', ariaLabel);
-  wrapper.appendChild(svgEl);
-
-  if (showSource) {
-    // Build share URL for the "Open in editor" action.
-    let shareUrl: string | null = null;
-    if (cfg.showEditorLink) {
-      shareUrl = buildShareUrl(source, {
-        palette: cfg.palette,
-        theme: resolvedTheme === 'dark' ? 'dark' : 'light',
-        editorBase: EDITOR_BASE_URL,
-        campaign: VERSION,
-        utmSource: 'auto-embed',
-      });
-    }
-    const panel = buildSourcePanel(source, shareUrl, cfg.showEditorLink);
-    wrapper.appendChild(panel);
+
+  // Build share URL for the "Open in editor" toolbar action.
+  let shareUrl: string | null = null;
+  if (showSource && cfg.showEditorLink) {
+    shareUrl = buildShareUrl(source, {
+      palette: cfg.palette,
+      theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+      editorBase: EDITOR_BASE_URL,
+      campaign: VERSION,
+      utmSource: 'auto-embed',
+    });
   }
 
+  // Standard embed block (BL-114): canonical chrome from src/embed.
+  const wrapper = buildRenderedBlock({
+    source,
+    svgEl,
+    themeClass,
+    showSource,
+    showEditorLink: cfg.showEditorLink,
+    shareUrl,
+  });
+  wrapper.dataset['dgmoProcessed'] = 'true';
+
   // Track wrapper so re-runs / theme changes can update it. Only persist
   // the explicit 'true'/'false' values; treat any other value as null so
   // the global default applies on re-render (matches first-render behavior).