@diagrammo/dgmo 0.50.2 → 0.52.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,97 @@
 import {
   defaultEmbedBackground,
+  docsLink,
   normalizeSvgForEmbed,
   renderErrorCard
-} from "./chunk-DN66GPY5.js";
+} from "./chunk-GJFAMOGK.js";
 import {
   encodeDiagramUrl,
   render
-} from "./chunk-SVTI362O.js";
-import "./chunk-66RUL3XF.js";
+} from "./chunk-J7KJR3R6.js";
+import "./chunk-7KINELPI.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-AUIM2NVH.js";
+import "./chunk-ZEF5M5MB.js";
+import "./chunk-MUE65OTD.js";
+import "./chunk-FT3ZYWET.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-FY5MSZAP.js";
+import "./chunk-APKUAJ2L.js";
+import "./chunk-PRI2OD4E.js";
+import "./chunk-4IHAV6O7.js";
+import "./chunk-Z5QVYKR7.js";
 import "./chunk-BDXC7MDK.js";
-import "./chunk-QJJZSROI.js";
-import "./chunk-HGN652MU.js";
-import "./chunk-U6EQI3U6.js";
-import "./chunk-7UEMZREK.js";
+import "./chunk-DYWQFQJP.js";
+import "./chunk-VL2O2F3W.js";
+import "./chunk-QBZYACOG.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-NNAAJVBU.js";
-import "./chunk-VUJGMJE6.js";
-import "./chunk-C2CVAM3U.js";
-import "./chunk-GKC3HILQ.js";
+import "./chunk-QOOUC2J5.js";
+import "./chunk-WCT3NYCV.js";
+import "./chunk-EMLPOL77.js";
+import "./chunk-SMRFPVLQ.js";
+import "./chunk-VILVLS7P.js";
+import "./chunk-7BIZCTAX.js";
+import "./chunk-XD6ZYURY.js";
+import "./chunk-ICPJPQ5C.js";
+import "./chunk-UNURMIQO.js";
+import "./chunk-ZNWAYU6N.js";
+import "./chunk-4UNQ6X24.js";
+import "./chunk-NR5HCAUD.js";
+import "./chunk-IM6PDDCE.js";
+import "./chunk-QGATPIPX.js";
+import "./chunk-5NGAO4QK.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";
-import "./chunk-XHVV4NVW.js";
-import "./chunk-OMNGQPEZ.js";
-import "./chunk-VBYSIOOY.js";
+} from "./chunk-FQ7HTV52.js";
+import "./chunk-5RP7JRVP.js";
+import "./chunk-HQQNCY7W.js";
+import "./chunk-RT7ACF77.js";
+import "./chunk-LTXOLDUZ.js";
+import "./chunk-75G3Q4DK.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-AL672HNE.js";
+import "./chunk-REJAIQ5S.js";
+import "./chunk-NNS4E7CW.js";
+import "./chunk-HBPDFCQY.js";
+import "./chunk-K4EOKJA6.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-J6QROYDA.js";
+import "./chunk-R3YSD62R.js";
+import {
+  scanMonthNameDates
+} from "./chunk-DAOFNU6J.js";
+import "./chunk-3YRPZ7ZZ.js";
+import "./chunk-3QD7VP3U.js";
+import "./chunk-BPY242XU.js";
 import "./chunk-IYULMRBE.js";
 import {
   resolvePaletteOrFallback
 } from "./chunk-R3XI2VC7.js";
-import "./chunk-P6T66CCZ.js";
-import "./chunk-BH3UYK36.js";
+import "./chunk-WBM7ZNDI.js";
+import "./chunk-QJMKPUYK.js";
 import "./chunk-C3Z4DX3V.js";
-import "./chunk-FJUNPCYI.js";
-import "./chunk-GBE54KY6.js";
+import "./chunk-HHKO6SKY.js";
+import "./chunk-6EJITS44.js";
 import "./chunk-I46X5VUA.js";
-import "./chunk-2C56LEML.js";
+import "./chunk-ROOE4R4Y.js";
 import "./chunk-NXMESY4J.js";
-import "./chunk-GL5UZ6NY.js";
-import "./chunk-SCHXJTZL.js";
+import "./chunk-TPFKKXCB.js";
+import "./chunk-ARGMQ3H4.js";
 import "./chunk-FMDSF3OV.js";
 import "./chunk-FFUN5D66.js";
 import "./chunk-NOTA6TEI.js";
-import "./chunk-OTAL43EH.js";
+import "./chunk-BRENJ2BQ.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
@@ -184,7 +189,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: ">l~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!_!`2P!`!a2^!a!b2e!b!c#u!c!}2l!}#O5r#O#P#u#P#Q5w#Q#R#u#R#S2l#S#T#u#T#[2l#[#]6O#]#o2l#o#p#u#p#q>O#q#r#u#r#s>V#s;'S#u;'S;=`>f<%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(`|}(e}!O)b!O!P*l!P!Q,]!Q![,v#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~(eO]~~(hP!Q![(k~(nP!Q![(q~(tP!Q![(w~(|Q^~|}(e!O!P)S~)VP!Q![)Y~)_P^~!Q![)Y~)eP!Q![)h~)mQ[~}!O)s!Q![*d~)vP!Q![)y~)|P!Q![*P~*UP[~!Q![*X~*[P!Q![*_~*dO[~~*iP[~}!O)s~*oP!Q![*r~*wY^~uv(`!Q![*r#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~+jP#W#X+m~+rPZ~!a!b+u~+zOZ~~,PQZ~!a!b+u#]#^,V~,YP#b#c+m~,`P!Q![,c~,hQ[~!P!Q)s!Q![,n~,sP[~!P!Q)s~,{_^~uv(`|}(e}!O)b!O!P*l!P!Q,]!Q![-z#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~.P]^~uv(`|}(e!O!P*l!Q![.x#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~.}]^~uv(`}!O/v!O!P*l!Q![0b#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~/yP!Q![/|~0PP!Q![0S~0XP[~}!O0[~0_P!Q![*X~0g[^~uv(`!O!P*l!Q![0b#R#S1]#U#V+g#W#X+m#[#]+m#a#b+z#e#f+m#g#h+m#k#l+m#m#n+m~1`P!Q![1c~1hR^~!O!P)S!Q![1c#R#S1]~1xOh~q~~2POe~q~~2UPq~!_!`2X~2^O_~~2eOf~q~~2lOn~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~~6OOb~q~~6Vap~q~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#h3r#h#i7[#i#o3r~7aap~qr3rst3rvw3rwx3r{|3r}!O4v!O!P3r!P!Q3r!Q![3r!_!`3r!a!b3r!b!c3r!c!}3r#R#S3r#T#h3r#h#i8f#i#o3r~8kap~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~;QP!P!Q;T~;WP!P!Q;Z~;^YOX;|Zp;|qy;|z|;|}!`;|!a#P;|#Q#p;|#q;'S;|;'S;=`<q<%lO;|~<RY`~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~>VOg~q~~>^Pl~q~!`!a>a~>fOY~~>iP;=`<%l#u",
   tokenizers: [0],
   topRules: { "Document": [0, 6] },
   specialized: [{ term: 32, get: (value, stack) => specializeKeyword(value, stack) << 1, external: specializeKeyword }],
@@ -295,6 +300,7 @@ function highlightDgmo(source) {
   applyLabelOverrides(tokens);
   applyNoteContent(tokens);
   applyRecurringLine(tokens);
+  applyMonthNameDates(tokens);
   return tokens;
 }
 var ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
@@ -529,6 +535,40 @@ function applyRecurringLine(tokens) {
     offset += lineText.length + 1;
   }
 }
+var DATE_BEARING_CHARTS = /* @__PURE__ */ new Set([
+  "gantt",
+  "pert",
+  "countdown",
+  "timeline",
+  "event-line"
+]);
+function applyMonthNameDates(tokens) {
+  const fullText = tokens.map((t) => t.text).join("");
+  const lines = fullText.split("\n");
+  const firstContent = lines.find((l) => {
+    const t = l.trim();
+    return t.length > 0 && !t.startsWith("//");
+  });
+  const chartType = firstContent?.trim().split(/\s+/)[0]?.toLowerCase();
+  if (!chartType || !DATE_BEARING_CHARTS.has(chartType)) return;
+  let offset = 0;
+  for (const lineText of lines) {
+    for (const sp of scanMonthNameDates(lineText)) {
+      markDateSpan(tokens, offset + sp.start, offset + sp.end);
+    }
+    offset += lineText.length + 1;
+  }
+}
+function markDateSpan(tokens, from, to) {
+  let pos = 0;
+  for (const token of tokens) {
+    const tokenEnd = pos + token.text.length;
+    if (tokenEnd > from && pos < to && token.text.trim().length > 0 && (token.role === "default" || token.role === "number")) {
+      token.role = "number";
+    }
+    pos = tokenEnd;
+  }
+}
 var NOTE_HEAD_RE = /^note(\s|$)/i;
 function applyNoteContent(tokens) {
   const fullText = tokens.map((t) => t.text).join("");
@@ -611,21 +651,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 +772,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 +814,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 +860,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 +1046,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 +1063,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 +1080,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 +1088,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 +1098,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-MXEP6BNP.js

@@ -0,0 +1,26 @@
+import {
+  D3_DATA_CHART_TYPES,
+  renderDataChartD3,
+  supportsD3DataChart
+} from "./chunk-DYWQFQJP.js";
+import "./chunk-VL2O2F3W.js";
+import "./chunk-QBZYACOG.js";
+import "./chunk-YAA6IID3.js";
+import "./chunk-A4GOY3PE.js";
+import "./chunk-6KFWC4CO.js";
+import "./chunk-QOOUC2J5.js";
+import "./chunk-WCT3NYCV.js";
+import "./chunk-EMLPOL77.js";
+import "./chunk-R3XI2VC7.js";
+import "./chunk-WBM7ZNDI.js";
+import "./chunk-HHKO6SKY.js";
+import "./chunk-BRENJ2BQ.js";
+import "./chunk-TLVIHFRO.js";
+import "./chunk-CXK4DZH3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  D3_DATA_CHART_TYPES,
+  renderDataChartD3,
+  supportsD3DataChart
+};
+//# sourceMappingURL=charts-d3-MXEP6BNP.js.map

package/dist/{chunk-3YPY3OXD.js → chunk-3HF5YEFJ.js}

@@ -1,6 +1,6 @@
 import {
   compactNumber
-} from "./chunk-PFHVU7UA.js";
+} from "./chunk-5BHJZH62.js";
 import {
   parseInlineMarkdown
 } from "./chunk-3HDBAXF5.js";
@@ -15,7 +15,7 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   resolveColor
 } from "./chunk-TLVIHFRO.js";
@@ -47,7 +47,11 @@ function resolvePaint(parsed, palette, isDark, pctFrac) {
   const base = parsed.color && resolveColor(parsed.color, palette) || parsed.color || autoColor || getSeriesColors(palette)[0];
   return {
     base,
-    fill: shapeFill(palette, base, isDark, { solid: parsed.options.solidFill }),
+    // §1.9 fill family: tint (default) / solid / outline. In outline mode the
+    // progress region renders hollow (theme base bg) and the traffic-light /
+    // override color moves to the border — advancement still reads from the
+    // outlined region's extent against the gray track.
+    fill: shapeFill(palette, base, isDark, { mode: parsed.options.fillMode }),
     track: mix(palette.border, themeBaseBg(palette, isDark), 45),
     text: palette.text,
     muted: mix(palette.text, themeBaseBg(palette, isDark), 55)
@@ -177,7 +181,7 @@ function renderBar(svg, parsed, metrics, paint) {
   g.append("rect").attr("x", x).attr("y", y).attr("width", trackW).attr("height", trackH).attr("rx", r).attr("fill", paint.track);
   const fillW = trackW * metrics.fillFrac;
   if (fillW > 0.5) {
-    g.append("rect").attr("x", x).attr("y", y).attr("width", fillW).attr("height", trackH).attr("rx", r).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", 2);
+    g.append("rect").attr("x", x).attr("y", y).attr("width", fillW).attr("height", trackH).attr("rx", r).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", parsed.options.fillMode === "outline" ? 1.5 : 2);
   }
   if (!parsed.options.noValue) {
     const valX = Math.max(x + fillW - 16, x + 52);
@@ -222,7 +226,7 @@ function renderThermometer(svg, parsed, metrics, paint) {
   const yBase = bulbCy - Math.sqrt(mBulb * mBulb - mHalf * mHalf);
   const yForFrac = (f) => yTop + (1 - f) * (yBase - yTop);
   const fillTopY = clamp(yForFrac(metrics.fillFrac), yTop, yBase);
-  g.append("path").attr("d", bodyPath(fillTopY, mHalf, mBulb, false)).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+  g.append("path").attr("d", bodyPath(fillTopY, mHalf, mBulb, false)).attr("fill", paint.fill).attr("stroke", paint.base).attr("stroke-width", parsed.options.fillMode === "outline" ? 1.5 : 2).attr("stroke-linejoin", "round");
   if (parsed.hasTarget) {
     const edgeX = cx + r;
     const tickLabelX = edgeX + 14;
@@ -306,7 +310,13 @@ function renderGauge(svg, parsed, metrics, paint) {
   }
   g.append("path").attr("d", arcPath(cx, cy, r, 0, 1)).attr("fill", "none").attr("stroke", paint.track).attr("stroke-width", stroke).attr("stroke-linecap", "round");
   if (metrics.fillFrac > 1e-3) {
-    g.append("path").attr("d", arcPath(cx, cy, r, 0, metrics.fillFrac)).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+    const valueArc = arcPath(cx, cy, r, 0, metrics.fillFrac);
+    if (parsed.options.fillMode === "outline") {
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.base).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke - 3).attr("stroke-linecap", "round");
+    } else {
+      g.append("path").attr("d", valueArc).attr("fill", "none").attr("stroke", paint.fill).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+    }
   }
   const a = Math.PI - metrics.fillFrac * Math.PI;
   const needleLen = r - stroke / 2 - 6;
@@ -351,4 +361,4 @@ export {
   renderGoal,
   renderGoalForExport
 };
-//# sourceMappingURL=chunk-3YPY3OXD.js.map
+//# sourceMappingURL=chunk-3HF5YEFJ.js.map

package/dist/{chunk-4MJ7M6YL.js → chunk-3HGU63UY.js}

@@ -1,7 +1,7 @@
 import {
   computeNodeText,
   layoutMindmap
-} from "./chunk-7TV5Y53Y.js";
+} from "./chunk-HWX6ZHF3.js";
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
@@ -19,10 +19,10 @@ import {
 } from "./chunk-YYVTBZZC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-HEVYAHLW.js";
+} from "./chunk-AUIM2NVH.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-7UEMZREK.js";
+} from "./chunk-YAA6IID3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -32,20 +32,23 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-HQCHYB5F.js";
+} from "./chunk-QOOUC2J5.js";
 import {
   parseMindmap
-} from "./chunk-SXRTRMEE.js";
+} from "./chunk-AL672HNE.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   contrastText,
   shapeFill
-} from "./chunk-P6T66CCZ.js";
+} from "./chunk-WBM7ZNDI.js";
 import {
   tagAttrKey
-} from "./chunk-FJUNPCYI.js";
+} from "./chunk-HHKO6SKY.js";
+import {
+  fillModeFromOptions
+} from "./chunk-BRENJ2BQ.js";
 
 // src/mindmap/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -56,11 +59,9 @@ var LABEL_LINE_HEIGHT = 18;
 var DESC_LINE_HEIGHT = 14;
 var NODE_RADIUS = 6;
 var ROOT_STROKE_WIDTH = 2.5;
-function nodeFill(palette, isDark, nodeColor, solid) {
+function nodeFill(palette, isDark, nodeColor, fillMode) {
   const color = nodeColor ?? palette.primary;
-  return shapeFill(palette, color, isDark, {
-    ...solid !== void 0 && { solid }
-  });
+  return shapeFill(palette, color, isDark, { mode: fillMode });
 }
 function nodeStroke(palette, nodeColor) {
   return nodeColor ?? palette.primary;
@@ -258,7 +259,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
       palette,
       isDark,
       effectiveColor,
-      parsed.options["solid-fill"] === "on"
+      fillModeFromOptions(parsed.options)
     );
     const stroke = nodeStroke(palette, effectiveColor);
     const onFillText = contrastText(
@@ -388,4 +389,4 @@ export {
   renderMindmap,
   renderMindmapForExport
 };
-//# sourceMappingURL=chunk-4MJ7M6YL.js.map
+//# sourceMappingURL=chunk-3HGU63UY.js.map

package/dist/chunk-3LK5DNED.js

@@ -0,0 +1,35 @@
+import {
+  mix
+} from "./chunk-WBM7ZNDI.js";
+import {
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/clock/swatches.ts
+function buildSwatches(palette, muted) {
+  const bg = palette.bg;
+  const day = resolveColor("orange", palette) ?? "#d98a1f";
+  const night = resolveColor("blue", palette) ?? "#4864b0";
+  const ok = resolveColor("green", palette) ?? "#3f9e59";
+  const soon = resolveColor("orange", palette) ?? "#c9761a";
+  return {
+    day,
+    night,
+    dayTint: mix(day, bg, 14),
+    nightTint: mix(night, bg, 14),
+    ok,
+    soon,
+    off: muted,
+    okSoft: mix(ok, bg, 14),
+    soonSoft: mix(soon, bg, 14),
+    offSoft: mix(muted, bg, 16),
+    // Sundown indicator: a yellow sun by day, a blue moon by night.
+    sunIcon: resolveColor("yellow", palette) ?? "#f4b400",
+    moonIcon: night
+  };
+}
+
+export {
+  buildSwatches
+};
+//# sourceMappingURL=chunk-3LK5DNED.js.map