@diagrammo/dgmo 0.44.1 → 0.45.0

package/dist/element.mjs

@@ -28035,7 +28035,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -37264,7 +37264,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {
@@ -69866,7 +69866,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.44.1";
+var VERSION = "0.45.0";
 var EDITOR_BASE_URL = "https://online.diagrammo.app";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1200;

package/dist/highlight.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var highlight_api_exports = {};
 __export(highlight_api_exports, {
   ATTRIBUTE_KEYS: () => ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES: () => LIGHT_ROLE_STYLES,
   NODE_TO_ROLE: () => NODE_TO_ROLE,
   NORD_ROLE_STYLES: () => NORD_ROLE_STYLES,
   ROLE_TO_ANSI: () => ROLE_TO_ANSI,
@@ -747,6 +748,35 @@ var NORD_ROLE_STYLES = {
   noteContent: { color: "#616E88", fontStyle: "italic" },
   default: {}
 };
+var LIGHT_ROLE_STYLES = {
+  keyword: { color: "#3b6ea5", fontWeight: "bold" },
+  // slate blue
+  controlKeyword: { color: "#7d5ba6", fontWeight: "bold" },
+  // purple
+  definitionKeyword: { color: "#2f5a86", fontWeight: "bold" },
+  // deep blue
+  modifier: { color: "#7d5ba6" },
+  chartType: { color: "#b8691f", fontWeight: "bold" },
+  // amber
+  operator: { color: "#c0504d", fontWeight: "bold" },
+  // red
+  number: { color: "#7d5ba6" },
+  comment: { color: "#677483", fontStyle: "italic" },
+  // muted gray
+  heading: { color: "#b8691f", fontWeight: "bold" },
+  bracket: { color: "#5b6672" },
+  separator: { color: "#2d7268" },
+  // deep teal
+  deprecatedSyntax: { color: "#c0504d", textDecoration: "line-through" },
+  url: { color: "#3b6ea5", textDecoration: "underline" },
+  colorAnnotation: { color: "#b8691f", fontStyle: "italic" },
+  punctuation: { color: "#677483" },
+  propertyName: { color: "#2d7268" },
+  string: { color: "#3f7a3b" },
+  // forest green
+  noteContent: { color: "#677483", fontStyle: "italic" },
+  default: {}
+};
 var ROLE_TO_ANSI = {
   comment: "\x1B[3;90m",
   // italic dim
@@ -812,6 +842,7 @@ function renderAnsi(tokens, useColor) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES,
   NODE_TO_ROLE,
   NORD_ROLE_STYLES,
   ROLE_TO_ANSI,

package/dist/highlight.d.cts

@@ -31,10 +31,19 @@ declare function highlightDgmo(source: string): HighlightToken[];
  */
 declare const ATTRIBUTE_KEYS: Set<string>;
 declare const NORD_ROLE_STYLES: Record<string, Record<string, string>>;
+/**
+ * Light-background counterpart of NORD_ROLE_STYLES for static contexts
+ * (marketing site, light-mode source panels). Same role keys — a parity test
+ * (tests/block.test.ts) guards the two maps and the `.dgmo-tok-*` rules in
+ * block/css.ts against drift. Colors are darker AA-targeting tones tuned for
+ * a light code panel (bg ~#f3f5f8). Moved here from the site repo's
+ * hand-maintained mirror (BL-114).
+ */
+declare const LIGHT_ROLE_STYLES: Record<string, Record<string, string>>;
 declare const ROLE_TO_ANSI: Record<string, string>;
 /**
  * Render highlighted tokens to an ANSI string for terminal display.
  */
 declare function renderAnsi(tokens: HighlightToken[], useColor: boolean): string;
 
-export { ATTRIBUTE_KEYS, type HighlightToken, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };
+export { ATTRIBUTE_KEYS, type HighlightToken, LIGHT_ROLE_STYLES, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };

package/dist/highlight.d.ts

@@ -31,10 +31,19 @@ declare function highlightDgmo(source: string): HighlightToken[];
  */
 declare const ATTRIBUTE_KEYS: Set<string>;
 declare const NORD_ROLE_STYLES: Record<string, Record<string, string>>;
+/**
+ * Light-background counterpart of NORD_ROLE_STYLES for static contexts
+ * (marketing site, light-mode source panels). Same role keys — a parity test
+ * (tests/block.test.ts) guards the two maps and the `.dgmo-tok-*` rules in
+ * block/css.ts against drift. Colors are darker AA-targeting tones tuned for
+ * a light code panel (bg ~#f3f5f8). Moved here from the site repo's
+ * hand-maintained mirror (BL-114).
+ */
+declare const LIGHT_ROLE_STYLES: Record<string, Record<string, string>>;
 declare const ROLE_TO_ANSI: Record<string, string>;
 /**
  * Render highlighted tokens to an ANSI string for terminal display.
  */
 declare function renderAnsi(tokens: HighlightToken[], useColor: boolean): string;
 
-export { ATTRIBUTE_KEYS, type HighlightToken, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };
+export { ATTRIBUTE_KEYS, type HighlightToken, LIGHT_ROLE_STYLES, NODE_TO_ROLE, NORD_ROLE_STYLES, ROLE_TO_ANSI, highlightDgmo, renderAnsi };

package/dist/highlight.js

@@ -716,6 +716,35 @@ var NORD_ROLE_STYLES = {
   noteContent: { color: "#616E88", fontStyle: "italic" },
   default: {}
 };
+var LIGHT_ROLE_STYLES = {
+  keyword: { color: "#3b6ea5", fontWeight: "bold" },
+  // slate blue
+  controlKeyword: { color: "#7d5ba6", fontWeight: "bold" },
+  // purple
+  definitionKeyword: { color: "#2f5a86", fontWeight: "bold" },
+  // deep blue
+  modifier: { color: "#7d5ba6" },
+  chartType: { color: "#b8691f", fontWeight: "bold" },
+  // amber
+  operator: { color: "#c0504d", fontWeight: "bold" },
+  // red
+  number: { color: "#7d5ba6" },
+  comment: { color: "#677483", fontStyle: "italic" },
+  // muted gray
+  heading: { color: "#b8691f", fontWeight: "bold" },
+  bracket: { color: "#5b6672" },
+  separator: { color: "#2d7268" },
+  // deep teal
+  deprecatedSyntax: { color: "#c0504d", textDecoration: "line-through" },
+  url: { color: "#3b6ea5", textDecoration: "underline" },
+  colorAnnotation: { color: "#b8691f", fontStyle: "italic" },
+  punctuation: { color: "#677483" },
+  propertyName: { color: "#2d7268" },
+  string: { color: "#3f7a3b" },
+  // forest green
+  noteContent: { color: "#677483", fontStyle: "italic" },
+  default: {}
+};
 var ROLE_TO_ANSI = {
   comment: "\x1B[3;90m",
   // italic dim
@@ -780,6 +809,7 @@ function renderAnsi(tokens, useColor) {
 }
 export {
   ATTRIBUTE_KEYS,
+  LIGHT_ROLE_STYLES,
   NODE_TO_ROLE,
   NORD_ROLE_STYLES,
   ROLE_TO_ANSI,

package/dist/index.cjs

@@ -28040,7 +28040,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -37268,7 +37268,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {

package/dist/index.js

@@ -28035,7 +28035,7 @@ var init_renderer2 = __esm({
     COLLAPSED = "dgmo-evt-collapsed";
     OFF = "dgmo-evt-off";
     HIDDEN_ATTR = "data-evt-hidden";
-    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{text-decoration:line-through;opacity:.5}`;
+    HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
     DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
     PIN_ATTR = "data-evt-pin";
   }
@@ -37264,7 +37264,7 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
   const titleOffset = parsed.title ? 40 : 0;
   const width = opts.exportDims?.width ?? layout.width;
   const height = (opts.exportDims?.height ?? layout.height) + 0;
-  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).style("font-family", FONT_FAMILY);
+  const svg = d3Selection14.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const baseBg = themeBaseBg(palette, isDark);
   const ev = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {
@@ -89,7 +89,18 @@
         "default": "./dist/element.cjs"
       }
     },
-    "./fonts/*": "./fonts/*"
+    "./fonts/*": "./fonts/*",
+    "./block": {
+      "import": {
+        "types": "./dist/block.d.ts",
+        "default": "./dist/block.js"
+      },
+      "require": {
+        "types": "./dist/block.d.cts",
+        "default": "./dist/block.cjs"
+      }
+    },
+    "./block.css": "./dist/block.css"
   },
   "files": [
     "dist/*.js",

package/src/editor/highlight-api.ts

@@ -500,6 +500,40 @@ export const NORD_ROLE_STYLES: Record<string, Record<string, string>> = {
   default: {},
 };
 
+// ============================================================
+// LIGHT_ROLE_STYLES — slate-light companion to NORD_ROLE_STYLES
+// ============================================================
+
+/**
+ * Light-background counterpart of NORD_ROLE_STYLES for static contexts
+ * (marketing site, light-mode source panels). Same role keys — a parity test
+ * (tests/block.test.ts) guards the two maps and the `.dgmo-tok-*` rules in
+ * block/css.ts against drift. Colors are darker AA-targeting tones tuned for
+ * a light code panel (bg ~#f3f5f8). Moved here from the site repo's
+ * hand-maintained mirror (BL-114).
+ */
+export const LIGHT_ROLE_STYLES: Record<string, Record<string, string>> = {
+  keyword: { color: '#3b6ea5', fontWeight: 'bold' }, // slate blue
+  controlKeyword: { color: '#7d5ba6', fontWeight: 'bold' }, // purple
+  definitionKeyword: { color: '#2f5a86', fontWeight: 'bold' }, // deep blue
+  modifier: { color: '#7d5ba6' },
+  chartType: { color: '#b8691f', fontWeight: 'bold' }, // amber
+  operator: { color: '#c0504d', fontWeight: 'bold' }, // red
+  number: { color: '#7d5ba6' },
+  comment: { color: '#677483', fontStyle: 'italic' }, // muted gray
+  heading: { color: '#b8691f', fontWeight: 'bold' },
+  bracket: { color: '#5b6672' },
+  separator: { color: '#2d7268' }, // deep teal
+  deprecatedSyntax: { color: '#c0504d', textDecoration: 'line-through' },
+  url: { color: '#3b6ea5', textDecoration: 'underline' },
+  colorAnnotation: { color: '#b8691f', fontStyle: 'italic' },
+  punctuation: { color: '#677483' },
+  propertyName: { color: '#2d7268' },
+  string: { color: '#3f7a3b' }, // forest green
+  noteContent: { color: '#677483', fontStyle: 'italic' },
+  default: {},
+};
+
 // ============================================================
 // ROLE_TO_ANSI — ANSI escape codes for CLI output
 // ============================================================

package/src/embed/css.ts

@@ -0,0 +1,312 @@
+/**
+ * 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.
+ */
+export const BLOCK_CSS: string = `
+/* @diagrammo/dgmo block — standard embed chrome.
+ * Override the [data-theme="dark"] selectors if your site uses .dark or
+ * another color-mode convention. */
+
+/* === Color-mode visibility (dual-render) === */
+.dgmo-dark {
+  display: none;
+}
+[data-theme="dark"] .dgmo-light {
+  display: none;
+}
+[data-theme="dark"] .dgmo-dark {
+  display: block;
+}
+
+/* === Diagram sizing ===
+ * SVGs are emitted with viewBox only (no fixed width/height). Force them to
+ * fill their wrapper so light and dark variants render at identical sizes. */
+.dgmo-light > svg,
+.dgmo-dark > svg,
+.dgmo-svg > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+/* === 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.
+ * No text labels, no disclosure triangle — three wordless icon buttons. */
+.dgmo-source-wrap {
+  margin: 0;
+}
+.dgmo-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.25em;
+  min-height: 1.9em;
+  padding: 0.15em 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  color: rgba(127, 127, 127, 0.9);
+}
+.dgmo-toolbar::-webkit-details-marker {
+  display: none;
+}
+/* Reveal is keyed to the diagram IMAGE (the svg wrappers), not the whole
+ * figure — hovering the open code panel keeps the page quiet. The toolbar's
+ * own :hover keeps it alive while the pointer travels down from the image
+ * (they're adjacent, so there's no dead gap). focus-within covers keyboard
+ * and touch-tap. */
+.dgmo-light:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-dark:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-svg:hover ~ .dgmo-source-wrap > .dgmo-toolbar,
+.dgmo-toolbar:hover,
+.dgmo:focus-within .dgmo-toolbar {
+  opacity: 1;
+}
+/* Touch devices have no hover: keep the icons faintly visible so the
+ * affordance is discoverable at all. */
+@media (hover: none) {
+  .dgmo-toolbar {
+    opacity: 0.5;
+  }
+}
+
+.dgmo-toggle,
+.dgmo-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9em;
+  height: 1.9em;
+  border-radius: 0.35em;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+.dgmo-toggle:hover,
+.dgmo-toolbar-btn:hover {
+  opacity: 1;
+  background: rgba(127, 127, 127, 0.12);
+}
+.dgmo-toggle svg,
+.dgmo-toolbar-btn svg {
+  width: 1em;
+  height: 1em;
+}
+/* Active state while the source panel is open. */
+.dgmo-source-wrap[open] > .dgmo-toolbar .dgmo-toggle {
+  opacity: 1;
+  background: rgba(127, 127, 127, 0.15);
+}
+.dgmo-copy--success {
+  color: #5cba7a;
+  opacity: 1;
+}
+
+/* === Open state: frame the whole block ===
+ * When the source panel is open, diagram + toolbar + code get one shared
+ * border so the code visibly belongs to the chart above it, not to the
+ * surrounding prose. Closed blocks stay frameless. */
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border: 1px solid rgba(127, 127, 127, 0.3);
+  border-radius: 0.6em;
+  padding: 0.75em 0.75em 0.5em;
+}
+
+/* === Source panel (hidden until toggled) === */
+.dgmo-source-inner {
+  border-top: 1px solid rgba(127, 127, 127, 0.25);
+  background: rgba(127, 127, 127, 0.06);
+  overflow: hidden;
+  margin: 0 -0.75em -0.5em;
+  border-radius: 0 0 0.6em 0.6em;
+}
+.dgmo-pre {
+  white-space: pre;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  line-height: 1.5;
+  margin: 0;
+  padding: 1em;
+}
+.dgmo-code {
+  display: block;
+}
+
+/* === Error card === */
+.dgmo--error {
+  border: 1px solid rgba(220, 80, 80, 0.5);
+  border-radius: 0.5em;
+  padding: 0.75em 1em;
+}
+.dgmo--error pre {
+  white-space: pre;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  margin: 0.5em 0 0;
+}
+
+/* === Source highlight roles ===
+ * Light values mirror LIGHT_ROLE_STYLES; dark overrides mirror
+ * NORD_ROLE_STYLES. Guarded by the parity test in tests/block.test.ts. */
+.dgmo-tok-keyword {
+  color: #3b6ea5;
+  font-weight: bold;
+}
+.dgmo-tok-controlKeyword {
+  color: #7d5ba6;
+  font-weight: bold;
+}
+.dgmo-tok-definitionKeyword {
+  color: #2f5a86;
+  font-weight: bold;
+}
+.dgmo-tok-modifier {
+  color: #7d5ba6;
+}
+.dgmo-tok-chartType {
+  color: #b8691f;
+  font-weight: bold;
+}
+.dgmo-tok-operator {
+  color: #c0504d;
+  font-weight: bold;
+}
+.dgmo-tok-number {
+  color: #7d5ba6;
+}
+.dgmo-tok-comment {
+  color: #677483;
+  font-style: italic;
+}
+.dgmo-tok-heading {
+  color: #b8691f;
+  font-weight: bold;
+}
+.dgmo-tok-bracket {
+  color: #5b6672;
+}
+.dgmo-tok-separator {
+  color: #2d7268;
+}
+.dgmo-tok-deprecatedSyntax {
+  color: #c0504d;
+  text-decoration: line-through;
+}
+.dgmo-tok-url {
+  color: #3b6ea5;
+  text-decoration: underline;
+}
+.dgmo-tok-colorAnnotation {
+  color: #b8691f;
+  font-style: italic;
+}
+.dgmo-tok-punctuation {
+  color: #677483;
+}
+.dgmo-tok-propertyName {
+  color: #2d7268;
+}
+.dgmo-tok-string {
+  color: #3f7a3b;
+}
+.dgmo-tok-noteContent {
+  color: #677483;
+  font-style: italic;
+}
+
+[data-theme="dark"] .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-definitionKeyword {
+  color: #5e81ac;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-modifier {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-chartType {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-operator {
+  color: #bf616a;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-number {
+  color: #b48ead;
+}
+[data-theme="dark"] .dgmo-tok-comment {
+  color: #616e88;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-heading {
+  color: #d08770;
+  font-weight: bold;
+}
+[data-theme="dark"] .dgmo-tok-bracket {
+  color: #5e81ac;
+}
+[data-theme="dark"] .dgmo-tok-separator {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-deprecatedSyntax {
+  color: #bf616a;
+  text-decoration: line-through;
+}
+[data-theme="dark"] .dgmo-tok-url {
+  color: #88c0d0;
+  text-decoration: underline;
+}
+[data-theme="dark"] .dgmo-tok-colorAnnotation {
+  color: #d08770;
+  font-style: italic;
+}
+[data-theme="dark"] .dgmo-tok-punctuation {
+  color: #616e88;
+}
+[data-theme="dark"] .dgmo-tok-propertyName {
+  color: #88c0d0;
+}
+[data-theme="dark"] .dgmo-tok-string {
+  color: #a3be8c;
+}
+[data-theme="dark"] .dgmo-tok-noteContent {
+  color: #616e88;
+  font-style: italic;
+}
+`;

package/src/embed/escape.ts

@@ -0,0 +1,15 @@
+const HTML_ENTITIES: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+export function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (ch) => HTML_ENTITIES[ch] ?? ch);
+}
+
+export function escapeAttr(s: string): string {
+  return s.replace(/[&<>"']/g, (ch) => HTML_ENTITIES[ch] ?? ch);
+}