@diagrammo/dgmo 0.45.0 → 0.46.0

package/dist/auto.css

@@ -1,11 +1,11 @@
 /* anti-flash: hide source elements until either render swaps them out
-   or the error path explicitly un-hides them */
+   or the error path replaces them with the standard error card */
 pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
-.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *) {
+.dgmo:not(svg *):not(.dgmo-rendered):not(.dgmo-rendered *):not(.dgmo--error):not(.dgmo--error *) {
   visibility: hidden;
 }
 .dgmo-rendered, .dgmo-rendered *,
-.dgmo-error-banner, .dgmo-error-banner * {
+.dgmo--error, .dgmo--error * {
   visibility: visible !important;
 }
 
@@ -19,196 +19,379 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
   line-height: 1.4;
   color-scheme: light dark;
 }
-.dgmo-rendered svg {
+
+.dgmo--loading {
+  opacity: 0.6;
+  font-size: 12px;
+  font-family: ui-monospace, monospace;
+}
+
+/* @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;
-  max-width: 100%;
+}
+
+/* === 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%;
 }
 
-.dgmo-source-panel {
-  margin-top: 4px;
-  position: relative;
+/* === 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-source-toggle {
+.dgmo-toggle,
+.dgmo-toolbar-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  /* Visual size is small; the 28px hit area + padding still meets
-     the 44 × 44 minimum touch target across most stylesheets, and
-     we widen padding on coarse pointers below. */
-  min-height: 28px;
-  padding: 4px 6px;
-  background: transparent;
+  justify-content: center;
+  width: 1.9em;
+  height: 1.9em;
+  border-radius: 0.35em;
+  background: none;
   border: 0;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-align: left;
-  cursor: pointer;
+  padding: 0;
   color: inherit;
-  opacity: 0.45;
-  border-radius: 3px;
-  transition: opacity 120ms ease, background 120ms ease;
+  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-source-toggle:hover {
-  opacity: 0.85;
-  background: rgba(127, 127, 127, 0.08);
+.dgmo-toggle svg,
+.dgmo-toolbar-btn svg {
+  width: 1em;
+  height: 1em;
 }
-.dgmo-source-toggle:focus-visible {
+/* 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;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-.dgmo-source-toggle[aria-expanded="true"] {
-  opacity: 0.7;
-}
-.dgmo-source-toggle .dgmo-chevron {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  font-size: 8px;
-  line-height: 1;
-  transition: transform 150ms ease-out;
-}
-.dgmo-source-toggle[aria-expanded="true"] .dgmo-chevron {
-  transform: rotate(90deg);
-}
-@media (pointer: coarse) {
-  /* Larger hit area on touch devices without making the visible
-     toggle bigger on the desktop. */
-  .dgmo-source-toggle {
-    min-height: 44px;
-    padding: 12px 10px;
-  }
 }
 
-.dgmo-source-body {
+/* === 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;
-  max-height: 0;
-  transition: max-height 150ms ease-out;
-  position: relative;
+  margin: 0 -0.75em -0.5em;
+  border-radius: 0 0 0.6em 0.6em;
 }
-.dgmo-source-body.dgmo-open {
-  max-height: 60vh;
-  overflow: auto;
-  margin-top: 2px;
-  border-radius: 4px;
-  background: rgba(127, 127, 127, 0.04);
+.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-rendered.dgmo-theme-dark .dgmo-source-body.dgmo-open {
-  background: rgba(255, 255, 255, 0.03);
+.dgmo-code {
+  display: block;
 }
-.dgmo-source-pre {
-  margin: 0;
-  /* Right padding leaves room for the floating action icons. */
-  padding: 10px 56px 10px 14px;
-  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.45;
+
+/* === 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: auto;
-  background: transparent;
-  color: inherit;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  margin: 0.5em 0 0;
 }
 
-.dgmo-source-actions {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: flex;
-  gap: 2px;
-  /* Inherit visibility:hidden when collapsed; pointer-events:none keeps
-     them off the tab order until the panel opens. */
-  pointer-events: none;
+/* === 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-source-body.dgmo-open .dgmo-source-actions {
-  pointer-events: auto;
+.dgmo-tok-controlKeyword {
+  color: #7d5ba6;
+  font-weight: bold;
 }
-.dgmo-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  background: transparent;
-  color: inherit;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  text-decoration: none;
-  opacity: 0.4;
-  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
+.dgmo-tok-definitionKeyword {
+  color: #2f5a86;
+  font-weight: bold;
 }
-.dgmo-btn:hover {
-  opacity: 1;
-  background: rgba(127, 127, 127, 0.15);
+.dgmo-tok-modifier {
+  color: #7d5ba6;
 }
-.dgmo-btn:focus-visible {
-  opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
+.dgmo-tok-chartType {
+  color: #b8691f;
+  font-weight: bold;
 }
-.dgmo-btn[aria-disabled="true"] {
-  opacity: 0.25;
-  cursor: not-allowed;
+.dgmo-tok-operator {
+  color: #c0504d;
+  font-weight: bold;
 }
-.dgmo-btn[aria-disabled="true"]:hover {
-  background: transparent;
+.dgmo-tok-number {
+  color: #7d5ba6;
 }
-.dgmo-btn-copied {
-  opacity: 1 !important;
-  color: rgb(120, 200, 120);
+.dgmo-tok-comment {
+  color: #677483;
+  font-style: italic;
 }
-.dgmo-btn svg {
-  width: 14px;
-  height: 14px;
-  display: block;
+.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;
 }
 
-.dgmo-error-banner {
-  display: block;
-  margin: 0.5em 0;
-  padding: 10px 14px;
-  border-left: 4px solid #c44;
-  background: rgba(204, 68, 68, 0.08);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 13px;
-  line-height: 1.4;
-  color: inherit;
-  border-radius: 0 4px 4px 0;
+[data-theme="dark"] .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
 }
-.dgmo-error-banner-title {
-  font-weight: 600;
-  margin-bottom: 2px;
+[data-theme="dark"] .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
 }
-.dgmo-error-banner-loc {
-  opacity: 0.7;
-  font-size: 12px;
-  font-family: ui-monospace, monospace;
+[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;
 }
 
-/* Token roles — fallback colors used when theme classes don't override */
-.dgmo-source-pre .dgmo-tok-keyword { color: #5e81ac; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-controlKeyword { color: #b48ead; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-definitionKeyword { color: #5e81ac; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-modifier { color: #b48ead; }
-.dgmo-source-pre .dgmo-tok-chartType { color: #d08770; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-operator { color: #bf616a; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-number { color: #b48ead; }
-.dgmo-source-pre .dgmo-tok-comment { color: #6c7a96; font-style: italic; }
-.dgmo-source-pre .dgmo-tok-heading { color: #d08770; font-weight: 600; }
-.dgmo-source-pre .dgmo-tok-bracket { color: #5e81ac; }
-.dgmo-source-pre .dgmo-tok-separator { color: #88c0d0; }
-.dgmo-source-pre .dgmo-tok-url { color: #88c0d0; text-decoration: underline; }
-.dgmo-source-pre .dgmo-tok-colorAnnotation { color: #d08770; font-style: italic; }
-.dgmo-source-pre .dgmo-tok-punctuation { color: #6c7a96; }
-.dgmo-source-pre .dgmo-tok-noteContent { color: #6c7a96; font-style: italic; }
+.dgmo-theme-dark selectors if your site uses .dark or
+ * another color-mode convention. */
 
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-keyword,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-definitionKeyword { color: #81a1c1; }
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-comment,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-noteContent,
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-pre .dgmo-tok-punctuation { color: #616e88; }
+/* === Color-mode visibility (dual-render) === */
+.dgmo-dark {
+  display: none;
+}
+.dgmo-theme-dark .dgmo-light {
+  display: none;
+}
+.dgmo-theme-dark .dgmo-dark {
+  display: block;
+}
+.dgmo-theme-dark .dgmo-tok-keyword {
+  color: #81a1c1;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-controlKeyword {
+  color: #b48ead;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-definitionKeyword {
+  color: #5e81ac;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-modifier {
+  color: #b48ead;
+}
+.dgmo-theme-dark .dgmo-tok-chartType {
+  color: #d08770;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-operator {
+  color: #bf616a;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-number {
+  color: #b48ead;
+}
+.dgmo-theme-dark .dgmo-tok-comment {
+  color: #616e88;
+  font-style: italic;
+}
+.dgmo-theme-dark .dgmo-tok-heading {
+  color: #d08770;
+  font-weight: bold;
+}
+.dgmo-theme-dark .dgmo-tok-bracket {
+  color: #5e81ac;
+}
+.dgmo-theme-dark .dgmo-tok-separator {
+  color: #88c0d0;
+}
+.dgmo-theme-dark .dgmo-tok-deprecatedSyntax {
+  color: #bf616a;
+  text-decoration: line-through;
+}
+.dgmo-theme-dark .dgmo-tok-url {
+  color: #88c0d0;
+  text-decoration: underline;
+}
+.dgmo-theme-dark .dgmo-tok-colorAnnotation {
+  color: #d08770;
+  font-style: italic;
+}
+.dgmo-theme-dark .dgmo-tok-punctuation {
+  color: #616e88;
+}
+.dgmo-theme-dark .dgmo-tok-propertyName {
+  color: #88c0d0;
+}
+.dgmo-theme-dark .dgmo-tok-string {
+  color: #a3be8c;
+}
+.dgmo-theme-dark .dgmo-tok-noteContent {
+  color: #616e88;
+  font-style: italic;
+}

package/dist/auto.d.cts

@@ -2,13 +2,15 @@
  * Shared browser-embed helpers for the `@diagrammo/dgmo` client-side
  * drop-ins (`./auto` script-tag renderer and `./element` custom element).
  *
- * These are the SVG sanitizer, theme resolver, source panel (with Copy +
- * "Open in editor"), error banner, aria-label derivation, style injection,
- * and share-URL builder — factored out of `auto/index.ts` so the two entries
- * share one implementation rather than diverging copies. The `auto` entry's
- * public `window.dgmo` surface is unaffected; it imports from here.
+ * These are the SVG sanitizer, theme resolver, the standard-block DOM
+ * assembler (canonical chrome from `src/embed` — BL-114), the error card,
+ * aria-label derivation, style injection, and share-URL builder — factored
+ * out of `auto/index.ts` so the two entries share one implementation rather
+ * than diverging copies. The `auto` entry's public `window.dgmo` surface is
+ * unaffected; it imports from here.
  */
 declare const VERSION: string;
+
 type ThemePreference = 'auto' | 'light' | 'dark' | 'transparent';
 declare function resolveTheme(theme: ThemePreference | undefined): 'light' | 'dark' | 'transparent';
 
@@ -17,9 +19,9 @@ declare function resolveTheme(theme: ThemePreference | undefined): 'light' | 'da
  *
  * Drop a `<script src="…/auto.js">` on any page; on `DOMContentLoaded`
  * this module scans for `.dgmo, .language-dgmo`, runs `render()`, and
- * replaces each match with `<div class="dgmo-rendered">` containing the
- * SVG plus an optional collapsible source panel with Copy and
- * "Open in editor" actions.
+ * replaces each match with the standard DGMO embed block (BL-114,
+ * `figure.dgmo.dgmo-rendered`) — the diagram plus a hover-reveal icon
+ * toolbar with view-source, Copy, and "Open in editor" actions.
  *
  * Public API: frozen `window.dgmo` and alias `window.diagrammo` with
  * `{ initialize, run, version }`. Configuration is read from the

package/dist/auto.d.ts

@@ -2,13 +2,15 @@
  * Shared browser-embed helpers for the `@diagrammo/dgmo` client-side
  * drop-ins (`./auto` script-tag renderer and `./element` custom element).
  *
- * These are the SVG sanitizer, theme resolver, source panel (with Copy +
- * "Open in editor"), error banner, aria-label derivation, style injection,
- * and share-URL builder — factored out of `auto/index.ts` so the two entries
- * share one implementation rather than diverging copies. The `auto` entry's
- * public `window.dgmo` surface is unaffected; it imports from here.
+ * These are the SVG sanitizer, theme resolver, the standard-block DOM
+ * assembler (canonical chrome from `src/embed` — BL-114), the error card,
+ * aria-label derivation, style injection, and share-URL builder — factored
+ * out of `auto/index.ts` so the two entries share one implementation rather
+ * than diverging copies. The `auto` entry's public `window.dgmo` surface is
+ * unaffected; it imports from here.
  */
 declare const VERSION: string;
+
 type ThemePreference = 'auto' | 'light' | 'dark' | 'transparent';
 declare function resolveTheme(theme: ThemePreference | undefined): 'light' | 'dark' | 'transparent';
 
@@ -17,9 +19,9 @@ declare function resolveTheme(theme: ThemePreference | undefined): 'light' | 'da
  *
  * Drop a `<script src="…/auto.js">` on any page; on `DOMContentLoaded`
  * this module scans for `.dgmo, .language-dgmo`, runs `render()`, and
- * replaces each match with `<div class="dgmo-rendered">` containing the
- * SVG plus an optional collapsible source panel with Copy and
- * "Open in editor" actions.
+ * replaces each match with the standard DGMO embed block (BL-114,
+ * `figure.dgmo.dgmo-rendered`) — the diagram plus a hover-reveal icon
+ * toolbar with view-source, Copy, and "Open in editor" actions.
  *
  * Public API: frozen `window.dgmo` and alias `window.diagrammo` with
  * `{ initialize, run, version }`. Configuration is read from the