@diagrammo/dgmo 0.48.1 → 0.49.0

package/dist/block.css

@@ -109,15 +109,84 @@
   opacity: 1;
 }
 
-/* === Open state: frame the whole block ===
+/* === Full-screen lightbox ===
+ * The expand button clones the visible diagram into a native <dialog> that
+ * the client shows with showModal(): top-layer, so it escapes any transformed
+ * or overflow-clipped ancestor (docs sidebars) and fills the whole viewport.
+ * Escape / backdrop-click / the close button dismiss it. The <dialog> itself
+ * fills the viewport with a transparent background (so a click landing on it
+ * — outside the centered card — reads as a backdrop dismiss); the dim comes
+ * from ::backdrop. */
+.dgmo-lightbox {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+.dgmo-lightbox[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dgmo-lightbox::backdrop {
+  background: rgba(0, 0, 0, 0.72);
+}
+.dgmo-lightbox-svg {
+  width: 95vw;
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+  border-radius: 0.5em;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+}
+.dgmo-lightbox-svg > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+.dgmo-lightbox-close {
+  position: fixed;
+  top: max(1rem, env(safe-area-inset-top));
+  right: max(1rem, env(safe-area-inset-right));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4em;
+  height: 2.4em;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.dgmo-lightbox-close:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+/* === 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 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. */
+.dgmo:has(> .dgmo-source-wrap) {
+  border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
 }
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
 
 /* === Source panel (hidden until toggled) === */
 .dgmo-source-inner {

package/dist/block.d.ts

@@ -29,11 +29,13 @@ declare const BLOCK_CSS: string;
  *
  * 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. Three wordless icon
- * buttons — `</>` toggles the hidden source panel, 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 needs a
- * small delegated click handler (remark-dgmo's `bindDgmo` is the reference).
+ * 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),
@@ -64,6 +66,12 @@ interface DgmoBlockOptions {
     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. */

package/dist/block.js

@@ -1,35 +1,40 @@
 import {
-  normalizeSvgForEmbed
-} from "./chunk-ODZVHU3R.js";
+  normalizeSvgForEmbed,
+  renderErrorCard
+} from "./chunk-26RVGM44.js";
 import {
   encodeDiagramUrl,
   render
-} from "./chunk-UC7TFHUM.js";
-import "./chunk-PBAHEPLQ.js";
-import "./chunk-OJR3MQYV.js";
-import "./chunk-UWN33VNX.js";
+} from "./chunk-SVDWQGX2.js";
+import "./chunk-RI4NIMFP.js";
+import "./chunk-5ZZLLBFK.js";
+import "./chunk-TC3YWBFO.js";
+import "./chunk-JFPY3UJ7.js";
+import "./chunk-HGN652MU.js";
+import "./chunk-KQAEKMIX.js";
+import "./chunk-ZREZOIGS.js";
 import "./chunk-YRYKTYMQ.js";
-import "./chunk-U6EQI3U6.js";
-import "./chunk-PWIHZ6NJ.js";
 import "./chunk-YYVTBZZC.js";
-import "./chunk-YAA6IID3.js";
+import "./chunk-U6EQI3U6.js";
+import "./chunk-3NFJWFNP.js";
+import "./chunk-4UDKKGHH.js";
+import "./chunk-7UEMZREK.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-6KFWC4CO.js";
-import "./chunk-QOOUC2J5.js";
-import "./chunk-WCT3NYCV.js";
-import "./chunk-HSH73DP6.js";
-import "./chunk-P235SVAH.js";
-import "./chunk-6HO5ZTXK.js";
-import "./chunk-44CM72SQ.js";
-import "./chunk-76OWZ3BA.js";
-import "./chunk-MO5YHHMQ.js";
-import "./chunk-WCSOJFU3.js";
-import "./chunk-7JEGTRLD.js";
+import "./chunk-HQCHYB5F.js";
+import "./chunk-5LWQH6QV.js";
+import "./chunk-TLKMTQYL.js";
+import "./chunk-IFK3GIUW.js";
+import "./chunk-XCC2RENT.js";
+import "./chunk-2WMBWZY2.js";
+import "./chunk-4BD7EVPK.js";
+import "./chunk-ZDUQGL3N.js";
+import "./chunk-FMKTYMP4.js";
+import "./chunk-B57V3DWN.js";
 import "./chunk-NNAAJVBU.js";
-import "./chunk-RYEGFMUO.js";
-import "./chunk-33LCUH4H.js";
-import "./chunk-XAKEUMEJ.js";
-import "./chunk-BUPDIHML.js";
+import "./chunk-RTERS6S5.js";
+import "./chunk-LVHPTBO3.js";
+import "./chunk-YRVLP7UU.js";
 import {
   REGISTRY_COLON_KEY_TOKENS,
   REGISTRY_CONTROL_TOKENS,
@@ -37,40 +42,42 @@ import {
   REGISTRY_MODIFIER_TOKENS,
   REGISTRY_STATUS_TOKENS
 } from "./chunk-DKEPS5LH.js";
-import "./chunk-BUVJFRPY.js";
-import "./chunk-WVAJFAIA.js";
-import "./chunk-EB6FPQUP.js";
-import "./chunk-EVCVDTXE.js";
-import "./chunk-NURGB5Z4.js";
-import "./chunk-L66GEFB6.js";
-import "./chunk-RVMRZAPB.js";
-import "./chunk-AN2MOO5T.js";
-import "./chunk-RTLBSQ3G.js";
+import "./chunk-KV6Y2HE6.js";
+import "./chunk-4YNP6O47.js";
+import "./chunk-XHVV4NVW.js";
+import "./chunk-YYX3SU6H.js";
+import "./chunk-4HVNZ7WF.js";
+import "./chunk-QQJUTGQH.js";
+import "./chunk-65RTDUZH.js";
+import "./chunk-35BBZDFE.js";
+import "./chunk-F743CM2N.js";
+import "./chunk-7OVSJI2V.js";
+import "./chunk-FUCAB3KQ.js";
 import "./chunk-L3UHP6TD.js";
 import "./chunk-USZW2HHU.js";
-import "./chunk-5QXL4NYS.js";
-import "./chunk-GMR5MFHJ.js";
-import "./chunk-ERLBPDGU.js";
-import "./chunk-AELOBFW5.js";
-import "./chunk-B65G5DNL.js";
+import "./chunk-CLR4A2N2.js";
+import "./chunk-IUK7AGD4.js";
+import "./chunk-MJCG5K2O.js";
+import "./chunk-O5MQPK7E.js";
+import "./chunk-EYN7VFKL.js";
 import "./chunk-IYULMRBE.js";
 import {
   resolvePaletteOrFallback
 } from "./chunk-R3XI2VC7.js";
 import "./chunk-P6T66CCZ.js";
-import "./chunk-SML67VPV.js";
+import "./chunk-D5AVQCDN.js";
 import "./chunk-C3Z4DX3V.js";
-import "./chunk-QLCCJEJI.js";
-import "./chunk-LIOHW36Z.js";
+import "./chunk-HBVD67XG.js";
+import "./chunk-6VE3VLWM.js";
 import "./chunk-I46X5VUA.js";
-import "./chunk-3MQQNXPD.js";
+import "./chunk-5FGDJIJX.js";
 import "./chunk-NXMESY4J.js";
-import "./chunk-RUNNI6VE.js";
-import "./chunk-5MLYVTYM.js";
+import "./chunk-ZXL6MB4R.js";
+import "./chunk-K6HNAY5V.js";
 import "./chunk-FMDSF3OV.js";
 import "./chunk-FFUN5D66.js";
 import "./chunk-NOTA6TEI.js";
-import "./chunk-Y3J7VR52.js";
+import "./chunk-ZNQX6QWH.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
@@ -93,6 +100,7 @@ var CHART_TYPES = /* @__PURE__ */ new Set([
   "class",
   "er",
   "org",
+  "family",
   "kanban",
   "c4",
   "state",
@@ -111,6 +119,7 @@ var CHART_TYPES = /* @__PURE__ */ new Set([
   "ring",
   "treemap",
   "block",
+  "sketch",
   "raci",
   "cycle",
   // Data chart types
@@ -132,7 +141,8 @@ var CHART_TYPES = /* @__PURE__ */ new Set([
   "event-line",
   "venn",
   "quadrant",
-  "map"
+  "map",
+  "body"
 ]);
 var TAG_KEYWORD = "tag";
 var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([...REGISTRY_DIRECTIVE_TOKENS]);
@@ -300,6 +310,9 @@ var ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
   "value",
   "label",
   "style",
+  // Sketch (§31): shape morph + half-slot coordinate keys
+  "shape",
+  "at",
   // Treemap + boxes-and-lines + map colour-by-value channel key
   "heat",
   // Infra node behavior + edge colon-keys (§4) come from the single-source
@@ -583,15 +596,84 @@ var BLOCK_CSS = `
   opacity: 1;
 }
 
-/* === Open state: frame the whole block ===
+/* === Full-screen lightbox ===
+ * The expand button clones the visible diagram into a native <dialog> that
+ * the client shows with showModal(): top-layer, so it escapes any transformed
+ * or overflow-clipped ancestor (docs sidebars) and fills the whole viewport.
+ * Escape / backdrop-click / the close button dismiss it. The <dialog> itself
+ * fills the viewport with a transparent background (so a click landing on it
+ * \u2014 outside the centered card \u2014 reads as a backdrop dismiss); the dim comes
+ * from ::backdrop. */
+.dgmo-lightbox {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+.dgmo-lightbox[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dgmo-lightbox::backdrop {
+  background: rgba(0, 0, 0, 0.72);
+}
+.dgmo-lightbox-svg {
+  width: 95vw;
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+  border-radius: 0.5em;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
+}
+.dgmo-lightbox-svg > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+.dgmo-lightbox-close {
+  position: fixed;
+  top: max(1rem, env(safe-area-inset-top));
+  right: max(1rem, env(safe-area-inset-right));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4em;
+  height: 2.4em;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.dgmo-lightbox-close:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+/* === 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 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. */
+.dgmo:has(> .dgmo-source-wrap) {
+  border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
 }
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
 
 /* === Source panel (hidden until toggled) === */
 .dgmo-source-inner {
@@ -775,6 +857,7 @@ function resolveBlockOptions(opts) {
     colorMode: opts.colorMode ?? "auto",
     showSource: opts.showSource ?? showcase,
     showCopy: opts.showCopy ?? showcase,
+    showExpand: opts.showExpand ?? showcase,
     showOpenInEditor: opts.showOpenInEditor ?? showcase,
     editorBaseUrl: opts.editorBaseUrl ?? EDITOR_BASE_URL,
     wrapper: opts.wrapper ?? "figure",
@@ -787,23 +870,24 @@ function resolveBlockOptions(opts) {
 async function renderDgmoBlock(source, options = {}) {
   const opts = resolveBlockOptions(options);
   const trimmed = source.trim();
-  const paletteId = resolvePaletteOrFallback(opts.palette, opts.onWarn).id;
+  const palette = resolvePaletteOrFallback(opts.palette, opts.onWarn);
   const diagnostics = [];
+  const renderTheme = async (theme) => {
+    const r = await render(trimmed, { palette: palette.id, theme });
+    diagnostics.push(...r.diagnostics);
+    const errors = r.diagnostics.filter((d) => d.severity === "error");
+    return errors.length ? renderErrorCard(errors, trimmed, palette, theme) : r.svg;
+  };
   let svgsHtml;
   if (opts.colorMode === "auto") {
     const [light, dark] = await Promise.all([
-      render(trimmed, { palette: paletteId, theme: "light" }),
-      render(trimmed, { palette: paletteId, theme: "dark" })
+      renderTheme("light"),
+      renderTheme("dark")
     ]);
-    diagnostics.push(...light.diagnostics, ...dark.diagnostics);
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-light"))}">${normalizeSvgForEmbed(light.svg)}</div><div class="${escapeAttr(innerClasses(opts, "dgmo-dark"))}">${normalizeSvgForEmbed(dark.svg)}</div>`;
+    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-light"))}">${normalizeSvgForEmbed(light)}</div><div class="${escapeAttr(innerClasses(opts, "dgmo-dark"))}">${normalizeSvgForEmbed(dark)}</div>`;
   } else {
-    const result = await render(trimmed, {
-      palette: paletteId,
-      theme: opts.colorMode
-    });
-    diagnostics.push(...result.diagnostics);
-    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-svg"))}">${normalizeSvgForEmbed(result.svg)}</div>`;
+    const svg = await renderTheme(opts.colorMode);
+    svgsHtml = `<div class="${escapeAttr(innerClasses(opts, "dgmo-svg"))}">${normalizeSvgForEmbed(svg)}</div>`;
   }
   return { html: assembleBlock(trimmed, svgsHtml, opts), diagnostics };
 }
@@ -837,9 +921,11 @@ function assembleBlock(source, svgsHtml, opts) {
 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>`;
+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 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 = "";
   if (opts.showOpenInEditor) {
@@ -849,7 +935,7 @@ function sourceDisclosure(source, opts) {
     }
   }
   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>`;
+  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>`;
 }
 function highlightedSource(source) {
   const tokens = highlightDgmo(source);

package/dist/{charts-d3-QOZHKTCT.js → charts-d3-EW3YQTEA.js}

@@ -2,18 +2,19 @@ import {
   D3_DATA_CHART_TYPES,
   renderDataChartD3,
   supportsD3DataChart
-} from "./chunk-OJR3MQYV.js";
+} from "./chunk-JFPY3UJ7.js";
+import "./chunk-HGN652MU.js";
+import "./chunk-KQAEKMIX.js";
 import "./chunk-U6EQI3U6.js";
-import "./chunk-YAA6IID3.js";
+import "./chunk-7UEMZREK.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-6KFWC4CO.js";
-import "./chunk-QOOUC2J5.js";
-import "./chunk-WCT3NYCV.js";
-import "./chunk-P235SVAH.js";
+import "./chunk-HQCHYB5F.js";
+import "./chunk-5LWQH6QV.js";
 import "./chunk-R3XI2VC7.js";
 import "./chunk-P6T66CCZ.js";
-import "./chunk-QLCCJEJI.js";
-import "./chunk-Y3J7VR52.js";
+import "./chunk-HBVD67XG.js";
+import "./chunk-ZNQX6QWH.js";
 import "./chunk-TLVIHFRO.js";
 import "./chunk-CXK4DZH3.js";
 import "./chunk-5WRI5ZAA.js";
@@ -22,4 +23,4 @@ export {
   renderDataChartD3,
   supportsD3DataChart
 };
-//# sourceMappingURL=charts-d3-QOZHKTCT.js.map
+//# sourceMappingURL=charts-d3-EW3YQTEA.js.map