@diagrammo/dgmo 0.50.1 → 0.51.0

package/dist/block.css

@@ -26,21 +26,25 @@
 }
 
 /* === Toolbar ===
- * The diagram is the star: the toolbar is a slim reserved row below the SVG
- * (height always in flow — 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.
+ * The diagram is the star: the toolbar is an overlay pinned to the diagram's
+ * top-right corner (position:absolute — it reserves no layout space, so the
+ * block is exactly as tall as the chart). It 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 — three wordless icon buttons. */
 .dgmo-source-wrap {
   margin: 0;
 }
 .dgmo-toolbar {
+  position: absolute;
+  top: 0.4em;
+  right: 0.4em;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.25em;
-  min-height: 1.9em;
-  padding: 0.15em 0;
+  padding: 0.15em;
   opacity: 0;
   transition: opacity 0.15s ease;
   cursor: pointer;
@@ -143,6 +147,14 @@
   overflow: auto;
   border-radius: 0.5em;
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+  /* Opaque surface behind the enlarged diagram so a transparent embed doesn't
+   * show the page through it. The client overrides this inline with the block's
+   * own palette bg (data-dgmo-bg); this is the fallback for blocks that predate
+   * that attribute. */
+  background: #fff;
+}
+[data-theme="dark"] .dgmo-lightbox-svg {
+  background: #1e1e1e;
 }
 .dgmo-lightbox-svg > svg {
   display: block;
@@ -177,9 +189,10 @@
  * border so the code visibly belongs to the chart above it. The frame box
  * (border + padding) is RESERVED at all times — with the border transparent
  * while closed — so opening the panel only paints the border in. It never
- * reflows the diagram or shifts the toolbar: the SVG box and toolbar position
- * are identical open vs closed. */
+ * reflows the diagram. position:relative anchors the overlay toolbar to
+ * this box. */
 .dgmo:has(> .dgmo-source-wrap) {
+  position: relative;
   border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
@@ -222,6 +235,13 @@
   font-size: 0.85em;
   margin: 0.5em 0 0;
 }
+.dgmo-error-docs {
+  display: inline-block;
+  margin-top: 0.6em;
+  font-size: 0.9em;
+  font-weight: 600;
+  color: inherit;
+}
 
 /* === Source highlight roles ===
  * Light values mirror LIGHT_ROLE_STYLES; dark overrides mirror

package/dist/block.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Canonical stylesheet for the standard DGMO embed block (BL-114).
+ *
+ * Shipped two ways: `dist/block.css` (extracted at build time by
+ * tsup.config.ts, same regex mechanism as auto.css) for `<link>`/import
+ * consumers, and the `BLOCK_CSS` string export for embedders that inject a
+ * `<style>` tag.
+ *
+ * Dark mode keys off `[data-theme="dark"]`. Hosts with a different signal
+ * (`html.dark`, `body.theme-dark`) rewrite the selector at their build step —
+ * fumadocs-dgmo/nextra-dgmo's build-css.mjs is the reference adapter.
+ *
+ * The `.dgmo-tok-*` role colors mirror LIGHT_ROLE_STYLES (light) and
+ * NORD_ROLE_STYLES (dark) from editor/highlight-api.ts. A parity test
+ * (tests/block.test.ts) guards against drift — update both when either
+ * changes.
+ *
+ * IMPORTANT: keep this a single pure template literal — the build extracts it
+ * with a regex, so no interpolation or computed values.
+ */
+declare const BLOCK_CSS: string;
+
+/**
+ * Standard DGMO embed block (BL-114) — the ONE canonical
+ * "diagram + source chrome" HTML builder shared by every embed surface:
+ * remark-dgmo (and through it the astro/docusaurus/fumadocs/nextra/vitepress
+ * wrappers), the `/auto` script-tag drop-in, `<dgmo-diagram>`, dgmo-mcp HTML
+ * reports, the marketing site, and the Obsidian plugin.
+ *
+ * Chrome contract (user-approved 2026-07-05): the diagram is the star. A slim
+ * icon toolbar sits in a reserved row below the SVG, invisible until the
+ * block is hovered/focused or the source is open. Four wordless icon
+ * buttons — `</>` toggles the hidden source panel, expand (full-screen),
+ * copy, open-in-editor. No disclosure triangle, no text labels. The toolbar
+ * IS the <summary> of a native <details>, so show/hide works with zero
+ * JavaScript; copy and expand need a small delegated click handler
+ * (remark-dgmo's `bindDgmo` is the reference — expand's lightbox helper is
+ * mirrored across every client surface, same as copy).
+ *
+ * Markup vocabulary: `figure.dgmo` (`--diagram`/`--showcase`/`--error`),
+ * `.dgmo-light`/`.dgmo-dark` (dual color-mode) or `.dgmo-svg` (single),
+ * `details.dgmo-source-wrap > summary.dgmo-toolbar`, `.dgmo-source-inner`,
+ * `pre.dgmo-pre > span.dgmo-code` with `.dgmo-tok-<role>` token spans. While
+ * the source is open the wrapper gets one shared frame (`:has()` rule) so
+ * diagram + code read as a single unit. No visible caption — `title` becomes
+ * the wrapper's aria-label. Styles ship as `BLOCK_CSS` / `dist/block.css`.
+ */
+
+/** Default hosted editor used by "Open in editor" links. */
+declare const EDITOR_BASE_URL = "https://online.diagrammo.app";
+type BlockMode = 'diagram' | 'showcase';
+/**
+ * Color-mode strategy for the emitted SVG(s).
+ * - `auto` — render twice (light + dark) and let CSS flip visibility.
+ * - `light` / `dark` / `transparent` — single render with that theme.
+ */
+type BlockColorMode = 'auto' | 'light' | 'dark' | 'transparent';
+interface DgmoBlockOptions {
+    /** `diagram` (default): SVG only. `showcase`: SVG + source chrome. */
+    mode?: BlockMode;
+    /** Palette name. Default `slate`; unknown names warn + fall back. */
+    palette?: string;
+    /** Default `auto` (dual light/dark render). */
+    colorMode?: BlockColorMode;
+    /**
+     * Embed background. `auto` (default) strips the theme's opaque root
+     * background so the diagram blends into the host page — except for
+     * background-meaningful types like `map`, which stay opaque. `transparent` /
+     * `opaque` force the choice regardless of type (the embedder opt-out).
+     */
+    background?: 'auto' | 'transparent' | 'opaque';
+    /** Default: true in showcase mode, false in diagram mode. */
+    showSource?: boolean;
+    /** Default: true in showcase mode, false in diagram mode. */
+    showCopy?: boolean;
+    /**
+     * Show the expand (full-screen) toolbar button. Default: true in showcase
+     * mode, false in diagram mode. Needs the client lightbox handler to do
+     * anything (mirrored across surfaces); markup-only surfaces can omit it.
+     */
+    showExpand?: boolean;
+    /** Default: true in showcase mode, false in diagram mode. */
+    showOpenInEditor?: boolean;
+    /** Base URL for the open-in-editor link. Default: online.diagrammo.app. */
+    editorBaseUrl?: string;
+    /** Outer wrapper element. Default `figure`. */
+    wrapper?: 'figure' | 'div';
+    /** Base class for the wrapper (styling hook). Default `dgmo`. */
+    className?: string;
+    /** Extra classes appended to every emitted wrapper (compat shims). */
+    legacyClassNames?: string[];
+    /**
+     * Accessible name for the block (`aria-label` on the wrapper). NOT rendered
+     * visually — the chart's visible title belongs in the DGMO source itself.
+     */
+    title?: string;
+    /** Receives palette-fallback warnings. Default: console.warn. */
+    onWarn?: (message: string) => void;
+}
+interface DgmoBlockResult {
+    html: string;
+    diagnostics: Array<{
+        message: string;
+        line?: number;
+        severity?: string;
+    }>;
+}
+/**
+ * Render one ```dgmo source block to the standard embed HTML. Async because
+ * it runs the full dgmo render pipeline (once per color mode).
+ *
+ * Render errors are NOT caught here — callers decide between throwing,
+ * `errorBlockHtml()`, or their own fallback.
+ */
+declare function renderDgmoBlock(source: string, options?: DgmoBlockOptions): Promise<DgmoBlockResult>;
+/**
+ * Assemble the standard block around already-rendered SVG markup. Exposed for
+ * surfaces that render through their own pipeline (e.g. dgmo-mcp's
+ * renderPipeline) but must emit the canonical chrome. `svgsHtml` must be the
+ * `.dgmo-light`+`.dgmo-dark` (or `.dgmo-svg`) wrapper divs.
+ */
+declare function buildDgmoBlockHtml(source: string, svgsHtml: string, options?: DgmoBlockOptions): string;
+/**
+ * Standard error card for a block that failed to parse/render. Same shape on
+ * every surface: `.dgmo--error` with `role="alert"`, message + offending
+ * source.
+ */
+declare function errorBlockHtml(err: unknown, source: string, options?: Pick<DgmoBlockOptions, 'className' | 'legacyClassNames'>): string;
+
+export { BLOCK_CSS, type BlockColorMode, type BlockMode, type DgmoBlockOptions, type DgmoBlockResult, EDITOR_BASE_URL, buildDgmoBlockHtml, errorBlockHtml, renderDgmoBlock };

package/dist/block.js

@@ -1,91 +1,95 @@
 import {
+  defaultEmbedBackground,
+  docsLink,
   normalizeSvgForEmbed,
   renderErrorCard
-} from "./chunk-YIA4LEX4.js";
+} from "./chunk-GNSFLJAA.js";
 import {
   encodeDiagramUrl,
   render
-} from "./chunk-ZAD4HV2G.js";
-import "./chunk-66RUL3XF.js";
+} from "./chunk-3ODS2VGL.js";
+import "./chunk-B63YB7X3.js";
 import "./chunk-YRYKTYMQ.js";
 import "./chunk-YYVTBZZC.js";
-import "./chunk-HEVYAHLW.js";
-import "./chunk-VVZRV54S.js";
-import "./chunk-Q4V4XQWV.js";
-import "./chunk-BTUTZMPT.js";
+import "./chunk-OU7HLO7I.js";
+import "./chunk-KJGG2JKQ.js";
+import "./chunk-GTWKD3QT.js";
+import "./chunk-AFIEPDLX.js";
 import {
   monthIndex,
   weekdayIndex
-} from "./chunk-YNRDWYZP.js";
-import "./chunk-3XPUDB7B.js";
-import "./chunk-QXKWYZNR.js";
-import "./chunk-PGEGPSCZ.js";
-import "./chunk-3UIKSPFB.js";
+} from "./chunk-OQKP2X3D.js";
+import "./chunk-6NFYEQDX.js";
+import "./chunk-APKUAJ2L.js";
+import "./chunk-XEQXCIBC.js";
+import "./chunk-6MNGECP2.js";
+import "./chunk-6BQFET7X.js";
 import "./chunk-BDXC7MDK.js";
-import "./chunk-4S52SK6G.js";
-import "./chunk-HGN652MU.js";
+import "./chunk-4VWJ4LW2.js";
+import "./chunk-VL2O2F3W.js";
 import "./chunk-U6EQI3U6.js";
-import "./chunk-7UEMZREK.js";
+import "./chunk-YAA6IID3.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-6KFWC4CO.js";
-import "./chunk-HQCHYB5F.js";
-import "./chunk-5LWQH6QV.js";
-import "./chunk-XDXNDSKO.js";
-import "./chunk-I2WKW7C7.js";
-import "./chunk-TSA237IM.js";
-import "./chunk-6IAA2QQ2.js";
-import "./chunk-6HJBFVLO.js";
-import "./chunk-3P2DKJCG.js";
-import "./chunk-3LKM6FMW.js";
-import "./chunk-XJLKLU4D.js";
-import "./chunk-7L3R6I3U.js";
+import "./chunk-QOOUC2J5.js";
+import "./chunk-WCT3NYCV.js";
+import "./chunk-QZPEGJOM.js";
+import "./chunk-GGHRAITI.js";
+import "./chunk-PZDBOK2Q.js";
+import "./chunk-2EQMXBBQ.js";
+import "./chunk-4QZ43D7I.js";
+import "./chunk-Q62FEYK3.js";
+import "./chunk-AE7II3E3.js";
+import "./chunk-2ILHQOL3.js";
+import "./chunk-ENRS56GC.js";
 import "./chunk-NNAAJVBU.js";
-import "./chunk-VUJGMJE6.js";
-import "./chunk-C2CVAM3U.js";
-import "./chunk-GKC3HILQ.js";
+import "./chunk-MVN25IF6.js";
+import "./chunk-5PZT4DQG.js";
+import "./chunk-I2QZFCS2.js";
 import {
   REGISTRY_COLON_KEY_TOKENS,
   REGISTRY_CONTROL_TOKENS,
   REGISTRY_DIRECTIVE_TOKENS,
   REGISTRY_MODIFIER_TOKENS,
   REGISTRY_STATUS_TOKENS
-} from "./chunk-U2HGPLZS.js";
-import "./chunk-DSWVNQVS.js";
-import "./chunk-DZXYF2F5.js";
+} from "./chunk-6H7O2OPM.js";
+import "./chunk-BGP54HVR.js";
+import "./chunk-6K2M4VSR.js";
 import "./chunk-XHVV4NVW.js";
-import "./chunk-OMNGQPEZ.js";
-import "./chunk-VBYSIOOY.js";
+import "./chunk-E7Y3SYKW.js";
+import "./chunk-5WPNFSXP.js";
 import "./chunk-QQJUTGQH.js";
-import "./chunk-SXRTRMEE.js";
-import "./chunk-NU3XLTGP.js";
-import "./chunk-OTQKUHRS.js";
-import "./chunk-SQLNBA64.js";
-import "./chunk-EAMEADTV.js";
-import "./chunk-L3UHP6TD.js";
+import "./chunk-2UJSV2VT.js";
+import "./chunk-332ZR4QU.js";
+import "./chunk-RBHWPDBB.js";
+import "./chunk-KFNWFNAA.js";
+import "./chunk-5PDTIBLV.js";
+import "./chunk-7L4UJOY6.js";
 import "./chunk-USZW2HHU.js";
-import "./chunk-HTMN2Z6U.js";
-import "./chunk-I7F2A35O.js";
-import "./chunk-6BFZKBGD.js";
-import "./chunk-3Y2DRD7S.js";
-import "./chunk-QROYX7TT.js";
+import "./chunk-EDA6C7MV.js";
+import "./chunk-TMACGPW5.js";
+import "./chunk-RBDIYLA5.js";
+import "./chunk-JJXGQIRV.js";
+import "./chunk-IEDMFNU7.js";
+import "./chunk-3LV2NCB6.js";
 import "./chunk-IYULMRBE.js";
 import {
   resolvePaletteOrFallback
 } from "./chunk-R3XI2VC7.js";
 import "./chunk-P6T66CCZ.js";
-import "./chunk-BH3UYK36.js";
+import "./chunk-RLFVAKEO.js";
 import "./chunk-C3Z4DX3V.js";
-import "./chunk-FJUNPCYI.js";
-import "./chunk-GBE54KY6.js";
+import "./chunk-467TVMQL.js";
+import "./chunk-OZPBJM5Q.js";
 import "./chunk-I46X5VUA.js";
-import "./chunk-2C56LEML.js";
+import "./chunk-5F5ELR3V.js";
 import "./chunk-NXMESY4J.js";
-import "./chunk-GL5UZ6NY.js";
-import "./chunk-SCHXJTZL.js";
+import "./chunk-FC5I2KXV.js";
+import "./chunk-WQLMU7VG.js";
 import "./chunk-FMDSF3OV.js";
 import "./chunk-FFUN5D66.js";
 import "./chunk-NOTA6TEI.js";
-import "./chunk-OTAL43EH.js";
+import "./chunk-LV4BETUU.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
@@ -183,7 +187,7 @@ var parser = LRParser.deserialize({
   maxTerm: 40,
   skippedNodes: [0],
   repeatNodeCount: 2,
-  tokenData: "<v~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz%lz{%s{|%z|}&R}!O&Y!O!P#u!P!Q&i!Q!['Y![!]/{!]!^#u!^!_0S!_!`0Z!`!a0h!a!b0o!b!c#u!c!}0v!}#O3|#O#P#u#P#Q4R#Q#R#u#R#S0v#S#T#u#T#[0v#[#]4Y#]#o0v#o#p#u#p#q<Y#q#r#u#r#s<a#s;'S#u;'S;=`<p<%lO#u~#zOq~~$PQv~XY#zpq#z~$[Ow~~$aUq~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Oo~~%bP;=`<%l$s~%lOc~q~~%sOd~q~~%zOm~q~~&ROj~q~~&YOi~q~~&aPk~q~!`!a&d~&iOX~~&nPq~!P!Q&q~&vSV~OY&qZ;'S&q;'S;=`'S<%lO&q~'VP;=`<%l&q~'a]^~q~uv(Y|}(_!O!P)[!Q![*{#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~(_O]~~(bP!Q![(e~(hP!Q![(k~(nP!Q![(q~(vQ^~|}(_!O!P(|~)PP!Q![)S~)XP^~!Q![)S~)_P!Q![)b~)gY^~uv(Y!Q![)b#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~*YP#W#X*]~*bPZ~!a!b*e~*jOZ~~*oQZ~!a!b*e#]#^*u~*xP#b#c*]~+Q]^~uv(Y|}(_!O!P)[!Q![+y#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,O]^~uv(Y|}(_!O!P)[!Q![,w#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,|]^~uv(Y}!O-u!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~-xP!Q![-{~.OP!Q![.R~.WP[~}!O.Z~.^P!Q![.a~.dP!Q![.g~.lO[~~.q[^~uv(Y!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~/jP!Q![/m~/rR^~!O!P(|!Q![/m#R#S/g~0SOh~q~~0ZOe~q~~0`Pq~!_!`0c~0hO_~~0oOf~q~~0vOn~q~~0}_p~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~2R_p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~3T]qr1|st1|vw1|wx1|{|1|!O!P1|!P!Q1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~4ROa~~4YOb~q~~4aap~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i5f#i#o1|~5kap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i6p#i#o1|~6uap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#d1|#d#e7z#e#o1|~8Pbp~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#g1|#g#h;R#h#o1|~9[P!P!Q9_~9bP!P!Q9e~9hYOX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~:]Y`~OX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~;OP;=`<%l:W~;W`p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~<aOg~q~~<hPl~q~!`!a<k~<pOY~~<sP;=`<%l#u",
+  tokenData: "={~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz%lz{%s{|%z|}&R}!O&Y!O!P#u!P!Q&i!Q!['Y![!]1Q!]!^#u!^!_1X!_!`1`!`!a1m!a!b1t!b!c#u!c!}1{!}#O5R#O#P#u#P#Q5W#Q#R#u#R#S1{#S#T#u#T#[1{#[#]5_#]#o1{#o#p#u#p#q=_#q#r#u#r#s=f#s;'S#u;'S;=`=u<%lO#u~#zOq~~$PQv~XY#zpq#z~$[Ow~~$aUq~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Oo~~%bP;=`<%l$s~%lOc~q~~%sOd~q~~%zOm~q~~&ROj~q~~&YOi~q~~&aPk~q~!`!a&d~&iOX~~&nPq~!P!Q&q~&vSV~OY&qZ;'S&q;'S;=`'S<%lO&q~'VP;=`<%l&q~'a^^~q~uv(]|}(b!O!P)_!P!Q+O!Q![,Y#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~(bO]~~(eP!Q![(h~(kP!Q![(n~(qP!Q![(t~(yQ^~|}(b!O!P)P~)SP!Q![)V~)[P^~!Q![)V~)bP!Q![)e~)jY^~uv(]!Q![)e#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~*]P#W#X*`~*ePZ~!a!b*h~*mOZ~~*rQZ~!a!b*h#]#^*x~*{P#b#c*`~+RP!Q![+U~+ZQ[~!P!Q+a!Q![,Q~+dP!Q![+g~+jP!Q![+m~+rP[~!Q![+u~+xP!Q![+{~,QO[~~,VP[~!P!Q+a~,_^^~uv(]|}(b!O!P)_!P!Q+O!Q![-Z#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~-`]^~uv(]|}(b!O!P)_!Q![.X#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~.^]^~uv(]}!O/V!O!P)_!Q![/q#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~/YP!Q![/]~/`P!Q![/c~/hP[~}!O/k~/nP!Q![+u~/v[^~uv(]!O!P)_!Q![/q#R#S0l#U#V*Y#W#X*`#[#]*`#a#b*m#e#f*`#g#h*`#k#l*`#m#n*`~0oP!Q![0r~0wR^~!O!P)P!Q![0r#R#S0l~1XOh~q~~1`Oe~q~~1ePq~!_!`1h~1mO_~~1tOf~q~~1{On~q~~2S_p~q~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~3W_p~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~4Y]qr3Rst3Rvw3Rwx3R{|3R!O!P3R!P!Q3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~5WOa~~5_Ob~q~~5fap~q~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#h3R#h#i6k#i#o3R~6pap~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#h3R#h#i7u#i#o3R~7zap~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#d3R#d#e9P#e#o3R~9Ubp~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R![!]:^!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#g3R#g#h<W#h#o3R~:aP!P!Q:d~:gP!P!Q:j~:mYOX;]Zp;]qy;]z|;]}!`;]!a#P;]#Q#p;]#q;'S;];'S;=`<Q<%lO;]~;bY`~OX;]Zp;]qy;]z|;]}!`;]!a#P;]#Q#p;]#q;'S;];'S;=`<Q<%lO;]~<TP;=`<%l;]~<]`p~qr3Rst3Rvw3Rwx3R{|3R}!O4V!O!P3R!P!Q3R!Q![3R![!]:^!_!`3R!a!b3R!b!c3R!c!}3R#R#S3R#T#o3R~=fOg~q~~=mPl~q~!`!a=p~=uOY~~=xP;=`<%l#u",
   tokenizers: [0],
   topRules: { "Document": [0, 6] },
   specialized: [{ term: 32, get: (value, stack) => specializeKeyword(value, stack) << 1, external: specializeKeyword }],
@@ -610,21 +614,25 @@ var BLOCK_CSS = `
 }
 
 /* === 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.
+ * The diagram is the star: the toolbar is an overlay pinned to the diagram's
+ * top-right corner (position:absolute \u2014 it reserves no layout space, so the
+ * block is exactly as tall as the chart). It 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 {
+  position: absolute;
+  top: 0.4em;
+  right: 0.4em;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.25em;
-  min-height: 1.9em;
-  padding: 0.15em 0;
+  padding: 0.15em;
   opacity: 0;
   transition: opacity 0.15s ease;
   cursor: pointer;
@@ -727,6 +735,14 @@ var BLOCK_CSS = `
   overflow: auto;
   border-radius: 0.5em;
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+  /* Opaque surface behind the enlarged diagram so a transparent embed doesn't
+   * show the page through it. The client overrides this inline with the block's
+   * own palette bg (data-dgmo-bg); this is the fallback for blocks that predate
+   * that attribute. */
+  background: #fff;
+}
+[data-theme="dark"] .dgmo-lightbox-svg {
+  background: #1e1e1e;
 }
 .dgmo-lightbox-svg > svg {
   display: block;
@@ -761,9 +777,10 @@ var BLOCK_CSS = `
  * border so the code visibly belongs to the chart above it. The frame box
  * (border + padding) is RESERVED at all times \u2014 with the border transparent
  * while closed \u2014 so opening the panel only paints the border in. It never
- * reflows the diagram or shifts the toolbar: the SVG box and toolbar position
- * are identical open vs closed. */
+ * reflows the diagram. position:relative anchors the overlay toolbar to
+ * this box. */
 .dgmo:has(> .dgmo-source-wrap) {
+  position: relative;
   border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
@@ -806,6 +823,13 @@ var BLOCK_CSS = `
   font-size: 0.85em;
   margin: 0.5em 0 0;
 }
+.dgmo-error-docs {
+  display: inline-block;
+  margin-top: 0.6em;
+  font-size: 0.9em;
+  font-weight: 600;
+  color: inherit;
+}
 
 /* === Source highlight roles ===
  * Light values mirror LIGHT_ROLE_STYLES; dark overrides mirror
@@ -952,6 +976,7 @@ function resolveBlockOptions(opts) {
     mode,
     palette: opts.palette ?? "slate",
     colorMode: opts.colorMode ?? "auto",
+    background: opts.background ?? "auto",
     showSource: opts.showSource ?? showcase,
     showCopy: opts.showCopy ?? showcase,
     showExpand: opts.showExpand ?? showcase,
@@ -969,8 +994,10 @@ async function renderDgmoBlock(source, options = {}) {
   const trimmed = source.trim();
   const palette = resolvePaletteOrFallback(opts.palette, opts.onWarn);
   const diagnostics = [];
+  let chartType;
   const renderTheme = async (theme) => {
     const r = await render(trimmed, { palette: palette.id, theme });
+    chartType = r.chartType;
     diagnostics.push(...r.diagnostics);
     const errors = r.diagnostics.filter((d) => d.severity === "error");
     return errors.length ? renderErrorCard(errors, trimmed, palette, theme) : r.svg;
@@ -981,10 +1008,13 @@ async function renderDgmoBlock(source, options = {}) {
       renderTheme("light"),
       renderTheme("dark")
     ]);
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-light"))}">${normalizeSvgForEmbed(light)}</div><div class="${escapeAttr(innerClasses(opts, "dgmo-dark"))}">${normalizeSvgForEmbed(dark)}</div>`;
+    const background = opts.background === "auto" ? defaultEmbedBackground(chartType) : opts.background;
+    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-light"))}" data-dgmo-bg="${escapeAttr(palette.light.bg)}">${normalizeSvgForEmbed(light, { background })}</div><div class="${escapeAttr(innerClasses(opts, "dgmo-dark"))}" data-dgmo-bg="${escapeAttr(palette.dark.bg)}">${normalizeSvgForEmbed(dark, { background })}</div>`;
   } else {
     const svg = await renderTheme(opts.colorMode);
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-svg"))}">${normalizeSvgForEmbed(svg)}</div>`;
+    const background = opts.background === "auto" ? defaultEmbedBackground(chartType) : opts.background;
+    const paletteBg = palette[opts.colorMode === "dark" ? "dark" : "light"].bg;
+    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-svg"))}" data-dgmo-bg="${escapeAttr(paletteBg)}">${normalizeSvgForEmbed(svg, { background })}</div>`;
   }
   return { html: assembleBlock(trimmed, svgsHtml, opts), diagnostics };
 }
@@ -996,7 +1026,8 @@ function errorBlockHtml(err, source, options = {}) {
   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> ${escapeHtml(msg)}<pre>${escapeHtml(source)}</pre></div>`;
+  const docs = docsLink(source);
+  return `<div class="${escapeAttr(cls)}" role="alert"><strong>dgmo render error:</strong> ${escapeHtml(msg)}<pre>${escapeHtml(source)}</pre><a class="${escapeAttr(base)}-error-docs" href="${escapeAttr(docs.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(docs.label)}</a></div>`;
 }
 function wrapperClasses(opts, variant) {
   const base = `${opts.className} ${opts.className}--${variant}`;
@@ -1012,7 +1043,7 @@ function assembleBlock(source, svgsHtml, opts) {
   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) : "";
+  const sourceHtml = 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>`;
@@ -1020,8 +1051,7 @@ var COPY_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" str
 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>`;
 var EXPAND_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="M6.5 13.5h-4v-4"/><path d="M13.5 2.5 9 7"/><path d="M2.5 13.5 7 9"/></svg>`;
 function sourceDisclosure(source, opts) {
-  if (!opts.showSource) return "";
-  const toggle = `<span class="dgmo-toggle" title="View DGMO source">${CODE_ICON}</span>`;
+  const toggle = opts.showSource ? `<span class="dgmo-toggle" title="View DGMO source">${CODE_ICON}</span>` : "";
   const expandButton = opts.showExpand ? `<button type="button" class="dgmo-toolbar-btn dgmo-expand" aria-label="View full screen" title="Expand">${EXPAND_ICON}</button>` : "";
   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 = "";
@@ -1031,8 +1061,13 @@ function sourceDisclosure(source, opts) {
       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 buttons = `${toggle}${expandButton}${copyButton}${openButton}`;
+  if (!buttons) return "";
+  if (!opts.showSource) {
+    return `<div class="dgmo-source-wrap"><div class="dgmo-toolbar">${buttons}</div></div>`;
+  }
   const sourceHtml = highlightedSource(source);
-  return `<details class="dgmo-source-wrap"><summary class="dgmo-toolbar" aria-label="View DGMO source">${toggle}${expandButton}${copyButton}${openButton}</summary><div class="dgmo-source-inner">${sourceHtml}</div></details>`;
+  return `<details class="dgmo-source-wrap"><summary class="dgmo-toolbar" aria-label="View DGMO source">${buttons}</summary><div class="dgmo-source-inner">${sourceHtml}</div></details>`;
 }
 function highlightedSource(source) {
   const tokens = highlightDgmo(source);

package/dist/{charts-d3-LR6D3D7A.js → charts-d3-7E4B4IMW.js}

@@ -2,19 +2,19 @@ import {
   D3_DATA_CHART_TYPES,
   renderDataChartD3,
   supportsD3DataChart
-} from "./chunk-4S52SK6G.js";
-import "./chunk-HGN652MU.js";
+} from "./chunk-4VWJ4LW2.js";
+import "./chunk-VL2O2F3W.js";
 import "./chunk-U6EQI3U6.js";
-import "./chunk-7UEMZREK.js";
+import "./chunk-YAA6IID3.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-6KFWC4CO.js";
-import "./chunk-HQCHYB5F.js";
-import "./chunk-5LWQH6QV.js";
-import "./chunk-XDXNDSKO.js";
+import "./chunk-QOOUC2J5.js";
+import "./chunk-WCT3NYCV.js";
+import "./chunk-QZPEGJOM.js";
 import "./chunk-R3XI2VC7.js";
 import "./chunk-P6T66CCZ.js";
-import "./chunk-FJUNPCYI.js";
-import "./chunk-OTAL43EH.js";
+import "./chunk-467TVMQL.js";
+import "./chunk-LV4BETUU.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
@@ -23,4 +23,4 @@ export {
   renderDataChartD3,
   supportsD3DataChart
 };
-//# sourceMappingURL=charts-d3-LR6D3D7A.js.map
+//# sourceMappingURL=charts-d3-7E4B4IMW.js.map

package/dist/{chunk-6IAA2QQ2.js → chunk-2EQMXBBQ.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-LV4BETUU.js";
 import {
   makeDgmoError,
   makeFail
@@ -274,4 +274,4 @@ function parseCycle(content) {
 export {
   parseCycle
 };
-//# sourceMappingURL=chunk-6IAA2QQ2.js.map
+//# sourceMappingURL=chunk-2EQMXBBQ.js.map

package/dist/{chunk-XJLKLU4D.js → chunk-2ILHQOL3.js}

@@ -7,7 +7,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-467TVMQL.js";
 import {
   TREEMAP_REGISTRY,
   extractColor,
@@ -18,7 +18,7 @@ import {
   stripQuotes,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-LV4BETUU.js";
 import {
   emit,
   formatDgmoError,
@@ -377,4 +377,4 @@ export {
   TREEMAP_DIAGNOSTICS,
   parseTreemap
 };
-//# sourceMappingURL=chunk-XJLKLU4D.js.map
+//# sourceMappingURL=chunk-2ILHQOL3.js.map

package/dist/{chunk-SXRTRMEE.js → chunk-2UJSV2VT.js}

@@ -10,7 +10,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-467TVMQL.js";
 import {
   MINDMAP_REGISTRY,
   OPTION_NOCOLON_RE,
@@ -21,7 +21,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-LV4BETUU.js";
 import {
   formatDgmoError,
   makeDgmoError,
@@ -313,4 +313,4 @@ function findMetadataParent(indent, indentStack) {
 export {
   parseMindmap
 };
-//# sourceMappingURL=chunk-SXRTRMEE.js.map
+//# sourceMappingURL=chunk-2UJSV2VT.js.map