@diagrammo/dgmo 0.50.2 → 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.js

@@ -1,92 +1,95 @@
 import {
   defaultEmbedBackground,
+  docsLink,
   normalizeSvgForEmbed,
   renderErrorCard
-} from "./chunk-DN66GPY5.js";
+} from "./chunk-GNSFLJAA.js";
 import {
   encodeDiagramUrl,
   render
-} from "./chunk-SVTI362O.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-KQ57MHRO.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-QJJZSROI.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-XEGTMVYY.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";
@@ -184,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 }],
@@ -611,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;
@@ -728,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;
@@ -762,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;
@@ -807,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
@@ -986,11 +1009,12 @@ async function renderDgmoBlock(source, options = {}) {
       renderTheme("dark")
     ]);
     const background = opts.background === "auto" ? defaultEmbedBackground(chartType) : opts.background;
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-light"))}">${normalizeSvgForEmbed(light, { background })}</div><div class="${escapeAttr(innerClasses(opts, "dgmo-dark"))}">${normalizeSvgForEmbed(dark, { background })}</div>`;
+    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);
     const background = opts.background === "auto" ? defaultEmbedBackground(chartType) : opts.background;
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-svg"))}">${normalizeSvgForEmbed(svg, { background })}</div>`;
+    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 };
 }
@@ -1002,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}`;
@@ -1018,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>`;
@@ -1026,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 = "";
@@ -1037,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-MUW3LTML.js → charts-d3-7E4B4IMW.js}

@@ -2,19 +2,19 @@ import {
   D3_DATA_CHART_TYPES,
   renderDataChartD3,
   supportsD3DataChart
-} from "./chunk-QJJZSROI.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-XEGTMVYY.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-MUW3LTML.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

package/dist/{chunk-LE4MYMLI.js → chunk-32XPAAET.js}

@@ -8,18 +8,18 @@ import {
   rectsOverlap,
   segmentRectOverlap,
   segmentsCross
-} from "./chunk-HGN652MU.js";
+} from "./chunk-VL2O2F3W.js";
 import {
   compactNumber,
   computeLegendLayout
-} from "./chunk-7UEMZREK.js";
+} from "./chunk-YAA6IID3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_Y
 } from "./chunk-A4GOY3PE.js";
 import {
   measureLegendText
-} from "./chunk-HQCHYB5F.js";
+} from "./chunk-QOOUC2J5.js";
 import {
   contrastRatio,
   mix,
@@ -29,7 +29,7 @@ import {
 } from "./chunk-P6T66CCZ.js";
 import {
   tagAttrKey
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-467TVMQL.js";
 import {
   resolveColor
 } from "./chunk-TLVIHFRO.js";
@@ -3177,4 +3177,4 @@ export {
   albersSkewFallback,
   layoutMap
 };
-//# sourceMappingURL=chunk-LE4MYMLI.js.map
+//# sourceMappingURL=chunk-32XPAAET.js.map

package/dist/{chunk-NU3XLTGP.js → chunk-332ZR4QU.js}

@@ -6,10 +6,10 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-467TVMQL.js";
 import {
   tryCollectNote
-} from "./chunk-SCHXJTZL.js";
+} from "./chunk-WQLMU7VG.js";
 import {
   resolveNotes
 } from "./chunk-FMDSF3OV.js";
@@ -32,7 +32,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-LV4BETUU.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-TLVIHFRO.js";
@@ -521,4 +521,4 @@ export {
   looksLikeERDiagram,
   extractSymbols
 };
-//# sourceMappingURL=chunk-NU3XLTGP.js.map
+//# sourceMappingURL=chunk-332ZR4QU.js.map

package/dist/{chunk-F7BFXWNQ.js → chunk-3JLKYGBQ.js}

@@ -1,7 +1,7 @@
 import {
   measureText,
   wrapTextToWidth
-} from "./chunk-5LWQH6QV.js";
+} from "./chunk-WCT3NYCV.js";
 import {
   mix,
   shapeFill
@@ -287,4 +287,4 @@ export {
   scoreToCurveY,
   layoutJourneyMap
 };
-//# sourceMappingURL=chunk-F7BFXWNQ.js.map
+//# sourceMappingURL=chunk-3JLKYGBQ.js.map

package/dist/{chunk-QROYX7TT.js → chunk-3LV2NCB6.js}

@@ -11,7 +11,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-467TVMQL.js";
 import {
   parseInArrowLabel
 } from "./chunk-FFUN5D66.js";
@@ -27,7 +27,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-OTAL43EH.js";
+} from "./chunk-LV4BETUU.js";
 import {
   formatDgmoError,
   makeDgmoError,
@@ -804,4 +804,4 @@ function validateDeploymentRefs(result, knownNames, pushWarning) {
 export {
   parseC4
 };
-//# sourceMappingURL=chunk-QROYX7TT.js.map
+//# sourceMappingURL=chunk-3LV2NCB6.js.map