@diagrammo/dgmo 0.45.0 → 0.46.0

package/dist/element.mjs

@@ -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("");
@@ -69264,6 +69270,9 @@ function encodeDiagramUrl(dsl, options) {
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 
+// src/embed/index.ts
+init_palettes();
+
 // src/editor/dgmo.grammar.js
 import { LRParser } from "@lezer/lr";
 
@@ -69646,230 +69655,426 @@ function markTokensInRange(tokens, from, to, role) {
   }
 }
 
-// src/auto/styles.ts
-var CSS = `
-/* anti-flash: hide source elements until either render swaps them out
-   or the error path explicitly un-hides them */
-pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
-.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *) {
-  visibility: hidden;
+// src/embed/escape.ts
+var HTML_ENTITIES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml3(s) {
+  return s.replace(/[&<>"']/g, (ch) => HTML_ENTITIES[ch] ?? ch);
 }
-.dgmo-rendered, .dgmo-rendered *,
-.dgmo-error-banner, .dgmo-error-banner * {
-  visibility: visible !important;
+function escapeAttr(s) {
+  return s.replace(/[&<>"']/g, (ch) => HTML_ENTITIES[ch] ?? ch);
 }
 
-.dgmo-rendered {
+// src/embed/css.ts
+var BLOCK_CSS = `
+/* @diagrammo/dgmo block \u2014 standard embed chrome.
+ * Override the [data-theme="dark"] selectors if your site uses .dark or
+ * another color-mode convention. */
+
+/* === Color-mode visibility (dual-render) === */
+.dgmo-dark {
+  display: none;
+}
+[data-theme="dark"] .dgmo-light {
+  display: none;
+}
+[data-theme="dark"] .dgmo-dark {
   display: block;
-  position: relative;
-  margin: 1em 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, sans-serif;
-  font-size: 14px;
-  line-height: 1.4;
-  color-scheme: light dark;
 }
-.dgmo-rendered svg {
+
+/* === Diagram sizing ===
+ * SVGs are emitted with viewBox only (no fixed width/height). Force them to
+ * fill their wrapper so light and dark variants render at identical sizes. */
+.dgmo-light > svg,
+.dgmo-dark > svg,
+.dgmo-svg > svg {
   display: block;
-  max-width: 100%;
+  width: 100%;
   height: auto;
+  max-width: 100%;
 }
 
-.dgmo-source-panel {
-  margin-top: 4px;
-  position: relative;
+/* === Toolbar ===
+ * The diagram is the star: the toolbar is a slim reserved row below the SVG
+ * (height always in flow \u2014 no layout shift) that stays fully transparent
+ * until the block is hovered or focused, or the source panel is open. It is
+ * the <summary> of the source <details>, so toggling works without any JS.
+ * No text labels, no disclosure triangle \u2014 three wordless icon buttons. */
+.dgmo-source-wrap {
+  margin: 0;
+}
+.dgmo-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25em;
+  min-height: 1.9em;
+  padding: 0.15em 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  color: rgba(127, 127, 127, 0.9);
+}
+.dgmo-toolbar::-webkit-details-marker {
+  display: none;
+}
+/* Reveal is keyed to the diagram IMAGE (the svg wrappers), not the whole
+ * figure \u2014 hovering the open code panel keeps the page quiet. The toolbar's
+ * own :hover keeps it alive while the pointer travels down from the image
+ * (they're adjacent, so there's no dead gap). focus-within covers keyboard
+ * and touch-tap. */
+.dgmo-light:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-dark:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-svg:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-toolbar:hover,
+.dgmo:focus-within .dgmo-toolbar {
+  opacity: 1;
+}
+/* Touch devices have no hover: keep the icons faintly visible so the
+ * affordance is discoverable at all. */
+@media (hover: none) {
+  .dgmo-toolbar {
+    opacity: 0.5;
+  }
 }
 
-.dgmo-source-toggle {
+.dgmo-toggle,
+.dgmo-toolbar-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  /* Visual size is small; the 28px hit area + padding still meets
-     the 44 \xD7 44 minimum touch target across most stylesheets, and
-     we widen padding on coarse pointers below. */
-  min-height: 28px;
-  padding: 4px 6px;
-  background: transparent;
+  justify-content: center;
+  width: 1.9em;
+  height: 1.9em;
+  border-radius: 0.35em;
+  background: none;
   border: 0;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-align: left;
-  cursor: pointer;
+  padding: 0;
   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);
+  cursor: pointer;
+  opacity: 0.75;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
 }
-.dgmo-source-toggle:focus-visible {
+.dgmo-toggle:hover,
+.dgmo-toolbar-btn:hover {
   opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
+  background: rgba(127, 127, 127, 0.12);
 }
-.dgmo-source-toggle[aria-expanded="true"] {
-  opacity: 0.7;
+.dgmo-toggle svg,
+.dgmo-toolbar-btn svg {
+  width: 1em;
+  height: 1em;
 }
-.dgmo-source-toggle .dgmo-chevron {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  font-size: 8px;
-  line-height: 1;
-  transition: transform 150ms ease-out;
+/* Active state while the source panel is open. */
+.dgmo-source-wrap[open] > .dgmo-toolbar .dgmo-toggle {
+  opacity: 1;
+  background: rgba(127, 127, 127, 0.15);
 }
-.dgmo-source-toggle[aria-expanded="true"] .dgmo-chevron {
-  transform: rotate(90deg);
+.dgmo-copy--success {
+  color: #5cba7a;
+  opacity: 1;
 }
-@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;
-  }
+
+/* === Open state: frame the whole block ===
+ * When the source panel is open, diagram + toolbar + code get one shared
+ * border so the code visibly belongs to the chart above it, not to the
+ * surrounding prose. Closed blocks stay frameless. */
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border: 1px solid rgba(127, 127, 127, 0.3);
+  border-radius: 0.6em;
+  padding: 0.75em 0.75em 0.5em;
 }
 
-.dgmo-source-body {
+/* === Source panel (hidden until toggled) === */
+.dgmo-source-inner {
+  border-top: 1px solid rgba(127, 127, 127, 0.25);
+  background: rgba(127, 127, 127, 0.06);
   overflow: hidden;
-  max-height: 0;
-  transition: max-height 150ms ease-out;
-  position: relative;
+  margin: 0 -0.75em -0.5em;
+  border-radius: 0 0 0.6em 0.6em;
+}
+.dgmo-pre {
+  white-space: pre;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  line-height: 1.5;
+  margin: 0;
+  padding: 1em;
 }
-.dgmo-source-body.dgmo-open {
-  max-height: 60vh;
-  overflow: auto;
-  margin-top: 2px;
-  border-radius: 4px;
-  background: rgba(127, 127, 127, 0.04);
+.dgmo-code {
+  display: block;
 }
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-body.dgmo-open {
-  background: rgba(255, 255, 255, 0.03);
+
+/* === Error card === */
+.dgmo--error {
+  border: 1px solid rgba(220, 80, 80, 0.5);
+  border-radius: 0.5em;
+  padding: 0.75em 1em;
 }
-.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;
+.dgmo--error pre {
   white-space: pre;
-  overflow: auto;
-  background: transparent;
-  color: inherit;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  margin: 0.5em 0 0;
 }
 
-.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;
+/* === Source highlight roles ===
+ * Light values mirror LIGHT_ROLE_STYLES; dark overrides mirror
+ * NORD_ROLE_STYLES. Guarded by the parity test in tests/block.test.ts. */
+.dgmo-tok-keyword {
+  color: #3b6ea5;
+  font-weight: bold;
 }
-.dgmo-source-body.dgmo-open .dgmo-source-actions {
-  pointer-events: auto;
+.dgmo-tok-controlKeyword {
+  color: #7d5ba6;
+  font-weight: bold;
 }
-.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-tok-definitionKeyword {
+  color: #2f5a86;
+  font-weight: bold;
 }
-.dgmo-btn:hover {
-  opacity: 1;
-  background: rgba(127, 127, 127, 0.15);
+.dgmo-tok-modifier {
+  color: #7d5ba6;
 }
-.dgmo-btn:focus-visible {
-  opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
+.dgmo-tok-chartType {
+  color: #b8691f;
+  font-weight: bold;
 }
-.dgmo-btn[aria-disabled="true"] {
-  opacity: 0.25;
-  cursor: not-allowed;
+.dgmo-tok-operator {
+  color: #c0504d;
+  font-weight: bold;
 }
-.dgmo-btn[aria-disabled="true"]:hover {
-  background: transparent;
+.dgmo-tok-number {
+  color: #7d5ba6;
 }
-.dgmo-btn-copied {
-  opacity: 1 !important;
-  color: rgb(120, 200, 120);
+.dgmo-tok-comment {
+  color: #677483;
+  font-style: italic;
 }
-.dgmo-btn svg {
-  width: 14px;
-  height: 14px;
-  display: block;
+.dgmo-tok-heading {
+  color: #b8691f;
+  font-weight: bold;
+}
+.dgmo-tok-bracket {
+  color: #5b6672;
+}
+.dgmo-tok-separator {
+  color: #2d7268;
+}
+.dgmo-tok-deprecatedSyntax {
+  color: #c0504d;
+  text-decoration: line-through;
+}
+.dgmo-tok-url {
+  color: #3b6ea5;
+  text-decoration: underline;
+}
+.dgmo-tok-colorAnnotation {
+  color: #b8691f;
+  font-style: italic;
+}
+.dgmo-tok-punctuation {
+  color: #677483;
+}
+.dgmo-tok-propertyName {
+  color: #2d7268;
+}
+.dgmo-tok-string {
+  color: #3f7a3b;
+}
+.dgmo-tok-noteContent {
+  color: #677483;
+  font-style: italic;
 }
 
-.dgmo-error-banner {
+[data-theme="dark"] .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-definitionKeyword {
+  color: #5e81ac;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-modifier {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-chartType {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-operator {
+  color: #bf616a;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-number {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-comment {
+  color: #616e88;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-heading {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-bracket {
+  color: #5e81ac;
+}
+[data-theme="dark"] .dgmo-tok-separator {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-deprecatedSyntax {
+  color: #bf616a;
+  text-decoration: line-through;
+}
+[data-theme="dark"] .dgmo-tok-url {
+  color: #88c0d0;
+  text-decoration: underline;
+}
+[data-theme="dark"] .dgmo-tok-colorAnnotation {
+  color: #d08770;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-punctuation {
+  color: #616e88;
+}
+[data-theme="dark"] .dgmo-tok-propertyName {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-string {
+  color: #a3be8c;
+}
+[data-theme="dark"] .dgmo-tok-noteContent {
+  color: #616e88;
+  font-style: italic;
+}
+`;
+
+// src/embed/index.ts
+var EDITOR_BASE_URL = "https://online.diagrammo.app";
+function resolveBlockOptions(opts) {
+  const mode = opts.mode ?? "diagram";
+  const showcase = mode === "showcase";
+  return {
+    mode,
+    palette: opts.palette ?? "slate",
+    colorMode: opts.colorMode ?? "auto",
+    showSource: opts.showSource ?? showcase,
+    showCopy: opts.showCopy ?? showcase,
+    showOpenInEditor: opts.showOpenInEditor ?? showcase,
+    editorBaseUrl: opts.editorBaseUrl ?? EDITOR_BASE_URL,
+    wrapper: opts.wrapper ?? "figure",
+    className: opts.className ?? "dgmo",
+    legacyClassNames: opts.legacyClassNames ?? [],
+    title: opts.title,
+    onWarn: opts.onWarn ?? ((message) => console.warn(message))
+  };
+}
+function buildDgmoBlockHtml(source, svgsHtml, options = {}) {
+  return assembleBlock(source.trim(), svgsHtml, resolveBlockOptions(options));
+}
+function errorBlockHtml(err, source, options = {}) {
+  const msg = err instanceof Error ? err.message : "Failed to render dgmo block.";
+  const base = options.className ?? "dgmo";
+  const legacy = (options.legacyClassNames ?? []).join(" ");
+  const cls = legacy ? `${base} ${legacy} ${base}--error` : `${base} ${base}--error`;
+  return `<div class="${escapeAttr(cls)}" role="alert"><strong>dgmo render error:</strong> ${escapeHtml3(msg)}<pre>${escapeHtml3(source)}</pre></div>`;
+}
+function wrapperClasses(opts, variant) {
+  const base = `${opts.className} ${opts.className}--${variant}`;
+  const legacy = opts.legacyClassNames.join(" ");
+  return legacy ? `${base} ${legacy}` : base;
+}
+function assembleBlock(source, svgsHtml, opts) {
+  const Wrapper = opts.wrapper;
+  const showcase = opts.mode === "showcase";
+  const variant = showcase ? "showcase" : "diagram";
+  const ariaAttr = opts.title ? ` aria-label="${escapeAttr(opts.title)}"` : "";
+  const sourceHtml = showcase ? sourceDisclosure(source, opts) : "";
+  return `<${Wrapper} class="${escapeAttr(wrapperClasses(opts, variant))}"${ariaAttr}>` + svgsHtml + sourceHtml + `</${Wrapper}>`;
+}
+var CODE_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m10 4.5 4 3.5-4 3.5"/><path d="m6 4.5-4 3.5 4 3.5"/></svg>`;
+var COPY_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h2.5"/></svg>`;
+var EXTERNAL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 2.5h4v4"/><path d="M13.5 2.5 7 9"/><path d="M12.5 9.5v3a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h3"/></svg>`;
+function sourceDisclosure(source, opts) {
+  if (!opts.showSource) return "";
+  const toggle = `<span class="dgmo-toggle" title="View DGMO source">${CODE_ICON}</span>`;
+  const copyButton = opts.showCopy ? `<button type="button" class="dgmo-toolbar-btn dgmo-copy" aria-label="Copy DGMO source" title="Copy source" data-dgmo-source="${escapeAttr(source)}">${COPY_ICON}</button>` : "";
+  let openButton = "";
+  if (opts.showOpenInEditor) {
+    const encoded = encodeDiagramUrl(source, { baseUrl: opts.editorBaseUrl });
+    if (encoded.url) {
+      openButton = `<a href="${escapeAttr(encoded.url)}" target="_blank" rel="noopener noreferrer" class="dgmo-toolbar-btn dgmo-open" aria-label="Open in online editor" title="Open in online editor">${EXTERNAL_ICON}</a>`;
+    }
+  }
+  const sourceHtml = highlightedSource(source);
+  return `<details class="dgmo-source-wrap"><summary class="dgmo-toolbar" aria-label="View DGMO source">${toggle}${copyButton}${openButton}</summary><div class="dgmo-source-inner">${sourceHtml}</div></details>`;
+}
+function highlightedSource(source) {
+  const tokens = highlightDgmo(source);
+  const inner = tokens.map((t) => {
+    const text = escapeHtml3(t.text);
+    if (!t.role || t.role === "default") return text;
+    return `<span class="dgmo-tok-${escapeAttr(t.role)}">${text}</span>`;
+  }).join("");
+  return `<pre class="dgmo-pre"><span class="dgmo-code">${inner}</span></pre>`;
+}
+
+// src/auto/styles.ts
+var AUTO_BASE_CSS = `
+/* anti-flash: hide source elements until either render swaps them out
+   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 *):not(.dgmo--error):not(.dgmo--error *) {
+  visibility: hidden;
+}
+.dgmo-rendered, .dgmo-rendered *,
+.dgmo--error, .dgmo--error * {
+  visibility: visible !important;
+}
+
+.dgmo-rendered {
   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;
+  position: relative;
+  margin: 1em 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
   line-height: 1.4;
-  color: inherit;
-  border-radius: 0 4px 4px 0;
-}
-.dgmo-error-banner-title {
-  font-weight: 600;
-  margin-bottom: 2px;
+  color-scheme: light dark;
 }
-.dgmo-error-banner-loc {
-  opacity: 0.7;
+
+.dgmo--loading {
+  opacity: 0.6;
   font-size: 12px;
   font-family: ui-monospace, monospace;
 }
-
-/* Token roles \u2014 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; }
-
-.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; }
 `;
+function darkScopedBlockCss(css) {
+  const rules = css.match(/\[data-theme="dark"\][^{]*\{[^}]*\}/g) ?? [];
+  return rules.map((rule) => rule.replace(/\[data-theme="dark"\]/g, ".dgmo-theme-dark")).join("\n");
+}
+var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS) + "\n";
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.45.0";
-var EDITOR_BASE_URL = "https://online.diagrammo.app";
+var VERSION = "0.46.0";
 var ARIA_LABEL_MAX = 200;
-var COPIED_INTERACTION_MS = 1200;
+var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";
 var ARIA_STRIP_RE = /[\x00-\x1F‪-‮⁦-⁩]/g;
 var STYLE_FLAG = "dgmoAutoStyles";
@@ -69938,139 +70143,98 @@ function deriveAriaLabel(source) {
   if (!firstLine) return "DGMO diagram";
   return firstLine.replace(ARIA_STRIP_RE, "").slice(0, ARIA_LABEL_MAX);
 }
-function buildHighlightedSource(source) {
-  const frag = document.createDocumentFragment();
-  let tokens;
-  try {
-    tokens = highlightDgmo(source);
-  } catch {
-    frag.appendChild(document.createTextNode(source));
-    return frag;
-  }
-  for (const tok of tokens) {
-    if (!tok.text) continue;
-    const span = document.createElement("span");
-    span.className = `dgmo-tok-${tok.role}`;
-    span.textContent = tok.text;
-    frag.appendChild(span);
-  }
-  return frag;
-}
-var COPY_ICON_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h2.5"/></svg>';
-var CHECK_ICON_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 8.5 6.5 12 13 4.5"/></svg>';
-var EXTERNAL_ICON_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2h5v5"/><path d="M14 2L7 9"/><path d="M13 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4"/></svg>';
-function setIcon(el, svg) {
-  el.innerHTML = svg;
-}
-function buildSourcePanel(source, shareUrl, showEditorLink) {
-  const panel = document.createElement("div");
-  panel.className = "dgmo-source-panel";
-  const toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "dgmo-source-toggle";
-  toggle.setAttribute("aria-expanded", "false");
-  const chevron = document.createElement("span");
-  chevron.className = "dgmo-chevron";
-  chevron.setAttribute("aria-hidden", "true");
-  chevron.textContent = "\u25B8";
-  toggle.appendChild(chevron);
-  const label = document.createElement("span");
-  label.textContent = "DGMO source";
-  toggle.appendChild(label);
-  const body = document.createElement("div");
-  body.className = "dgmo-source-body";
-  const pre = document.createElement("pre");
-  pre.className = "dgmo-source-pre";
-  pre.appendChild(buildHighlightedSource(source));
-  body.appendChild(pre);
-  const actions = document.createElement("div");
-  actions.className = "dgmo-source-actions";
-  const copyBtn = document.createElement("button");
-  copyBtn.type = "button";
-  copyBtn.className = "dgmo-btn dgmo-btn-copy";
-  copyBtn.setAttribute("aria-label", "Copy DGMO source");
-  copyBtn.title = "Copy source";
-  setIcon(copyBtn, COPY_ICON_SVG);
-  copyBtn.addEventListener("click", () => {
-    void copySource(source, copyBtn);
+function buildRenderedBlock(opts) {
+  const html = buildDgmoBlockHtml(opts.source, '<div class="dgmo-svg"></div>', {
+    mode: opts.showSource ? "showcase" : "diagram",
+    showOpenInEditor: opts.showSource && opts.showEditorLink,
+    // Keep the legacy `.dgmo-rendered` + theme hooks so the anti-flash CSS,
+    // idempotency filters, and theme-scoped token colors keep working.
+    legacyClassNames: ["dgmo-rendered", opts.themeClass]
   });
-  actions.appendChild(copyBtn);
-  if (showEditorLink) {
-    const editorBtn = document.createElement("a");
-    editorBtn.className = "dgmo-btn dgmo-btn-editor";
-    editorBtn.target = "_blank";
-    editorBtn.rel = "noopener noreferrer";
-    editorBtn.setAttribute("aria-label", "Open in editor");
-    setIcon(editorBtn, EXTERNAL_ICON_SVG);
-    if (shareUrl) {
-      editorBtn.href = shareUrl;
-      editorBtn.title = "Open in editor";
-    } else {
-      editorBtn.setAttribute("aria-disabled", "true");
-      editorBtn.title = "Diagram too large for share link; copy source and paste into editor";
-      editorBtn.addEventListener("click", (e) => e.preventDefault());
-    }
-    actions.appendChild(editorBtn);
-  }
-  body.appendChild(actions);
-  panel.appendChild(toggle);
-  panel.appendChild(body);
-  toggle.addEventListener("click", () => {
-    const open = body.classList.toggle("dgmo-open");
-    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+  const holder = document.createElement("div");
+  holder.innerHTML = html;
+  const wrapper = holder.firstElementChild;
+  wrapper.querySelector(".dgmo-svg")?.appendChild(opts.svgEl);
+  const open = wrapper.querySelector("a.dgmo-open");
+  if (open) {
+    if (opts.shareUrl) open.href = opts.shareUrl;
+    else open.remove();
+  }
+  bindBlockToolbar(wrapper);
+  return wrapper;
+}
+function bindBlockToolbar(wrapper) {
+  wrapper.addEventListener("click", (e) => {
+    void handleToolbarClick(e);
   });
-  return panel;
 }
-async function copySource(source, btn) {
-  let copied = false;
+async function handleToolbarClick(e) {
+  const target = e.target;
+  if (!target || typeof target.closest !== "function") return;
+  const btn = target.closest(".dgmo-toolbar-btn");
+  if (!btn) return;
+  const insideSummary = !!btn.closest("summary");
+  if (insideSummary) e.preventDefault();
+  if (btn.matches("button.dgmo-copy")) {
+    const copied = await copyText(btn.dataset["dgmoSource"] ?? "");
+    if (copied) {
+      btn.classList.add("dgmo-copy--success");
+      setTimeout(
+        () => btn.classList.remove("dgmo-copy--success"),
+        COPIED_INTERACTION_MS
+      );
+    } else {
+      sharedWarn("clipboard write failed");
+    }
+    return;
+  }
+  if (insideSummary && btn.matches("a.dgmo-open")) {
+    const anchor = btn;
+    if (anchor.href) {
+      window.open(
+        anchor.href,
+        anchor.target || "_blank",
+        "noopener,noreferrer"
+      );
+    }
+  }
+}
+async function copyText(text) {
   try {
     if (navigator?.clipboard?.writeText) {
-      await navigator.clipboard.writeText(source);
-      copied = true;
+      await navigator.clipboard.writeText(text);
+      return true;
     }
   } catch {
   }
-  if (!copied && typeof document !== "undefined") {
+  if (typeof document !== "undefined") {
     try {
       const ta = document.createElement("textarea");
-      ta.value = source;
+      ta.value = text;
       ta.setAttribute("readonly", "");
       ta.style.position = "absolute";
       ta.style.left = "-9999px";
       document.body.appendChild(ta);
       ta.select();
-      copied = document.execCommand("copy");
+      const copied = document.execCommand("copy");
       document.body.removeChild(ta);
+      return copied;
     } catch {
-      copied = false;
+      return false;
     }
   }
-  if (copied) {
-    setIcon(btn, CHECK_ICON_SVG);
-    btn.classList.add("dgmo-btn-copied");
-    setTimeout(() => {
-      setIcon(btn, COPY_ICON_SVG);
-      btn.classList.remove("dgmo-btn-copied");
-    }, COPIED_INTERACTION_MS);
-  } else {
-    sharedWarn("clipboard write failed");
-  }
+  return false;
 }
-function buildErrorBanner(opts) {
-  const banner = document.createElement("div");
-  banner.className = "dgmo-error-banner";
-  banner.setAttribute("role", "alert");
-  const title = document.createElement("div");
-  title.className = "dgmo-error-banner-title";
-  title.textContent = `${opts.severity ?? "error"}: ${opts.message}`;
-  banner.appendChild(title);
+function buildErrorBlock(opts) {
+  let message = opts.severity && opts.severity !== "error" ? `${opts.severity}: ${opts.message}` : opts.message;
   if (opts.line !== void 0 && opts.line > 0) {
-    const loc = document.createElement("div");
-    loc.className = "dgmo-error-banner-loc";
-    loc.textContent = opts.column !== void 0 ? `at ${opts.line}:${opts.column}` : `at line ${opts.line}`;
-    banner.appendChild(loc);
+    message += opts.column !== void 0 ? ` (at ${opts.line}:${opts.column})` : ` (at line ${opts.line})`;
   }
-  return banner;
+  const holder = document.createElement("div");
+  holder.innerHTML = errorBlockHtml(new Error(message), opts.source);
+  const card = holder.firstElementChild;
+  card.setAttribute("data-dgmo-processed", "true");
+  return card;
 }
 function buildShareUrl(source, opts) {
   const result = encodeDiagramUrl(source, {
@@ -70244,7 +70408,7 @@ var DgmoDiagram = class extends HTMLElement {
     this.container.appendChild(node);
   }
   showError(opts) {
-    this.mount(buildErrorBanner(opts), "dgmo dgmo--error");
+    this.mount(buildErrorBlock({ ...opts, source: this.source ?? "" }), "");
   }
   async rerender() {
     const token = ++this.renderToken;
@@ -70254,9 +70418,8 @@ var DgmoDiagram = class extends HTMLElement {
       return;
     }
     const loading = document.createElement("div");
-    loading.className = "dgmo-error-banner-loc";
     loading.textContent = "Rendering diagram\u2026";
-    this.mount(loading, "dgmo dgmo--loading");
+    this.mount(loading, "dgmo--loading");
     const themePref = this.themePreference();
     const resolvedTheme = themePref === "transparent" ? "transparent" : resolveTheme(themePref);
     const palette = this.palette();
@@ -70329,19 +70492,23 @@ var DgmoDiagram = class extends HTMLElement {
     svgEl.setAttribute("role", "img");
     svgEl.setAttribute("aria-label", deriveAriaLabel(src));
     const themeClass = resolvedTheme === "dark" ? "dgmo-theme-dark" : resolvedTheme === "transparent" ? "dgmo-theme-transparent" : "dgmo-theme-light";
-    const frag = document.createDocumentFragment();
-    frag.appendChild(svgEl);
-    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`);
+    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");
   }
 };
 function defineDgmoDiagram() {