@diagrammo/dgmo 0.44.1 → 0.46.0

package/src/auto/styles.ts

@@ -1,24 +1,40 @@
 /**
- * Static CSS for `@diagrammo/dgmo/auto`.
+ * Static CSS for `@diagrammo/dgmo/auto` (and `./element`, which shares the
+ * same injector).
  *
- * The string is a literal — no template interpolation of user-supplied
- * values. Theme/palette differences are applied via class hooks
- * (`.dgmo-theme-light`, `.dgmo-theme-dark`) on the rendered wrapper, so
- * a malicious theme name can never be smuggled into the stylesheet text.
+ * As of BL-114 the diagram + source chrome is the canonical standard block
+ * from `src/embed` — its styles ship in `BLOCK_CSS` and are appended below.
+ * This file only keeps the auto-surface-specific rules: anti-flash hiding,
+ * the `.dgmo-rendered` container reset, and the loading hint.
+ *
+ * `BLOCK_CSS` keys its dark-mode overrides off `[data-theme="dark"]`; the
+ * browser surfaces resolve the theme themselves and stamp a
+ * `.dgmo-theme-dark` class on the wrapper, so a re-scoped copy of the dark
+ * rules is appended too (same adapter pattern as fumadocs/nextra's
+ * build-css.mjs, done here at module init).
  *
- * All selectors are prefixed `.dgmo-` to avoid collisions with embedder
- * styles. Class names are part of the SemVer-stable surface — see
+ * The string is a literal — no template interpolation of user-supplied
+ * values. All selectors are prefixed `.dgmo-` to avoid collisions with
+ * embedder styles. Class names are part of the SemVer-stable surface — see
  * "SemVer policy" in the README HTML section.
+ *
+ * IMPORTANT: keep AUTO_BASE_CSS a single pure template literal — tsup's
+ * emitAutoCss extracts it (plus BLOCK_CSS) with a regex to build
+ * `dist/auto.css`, mirroring the concatenation done at the bottom of this
+ * file. Update tsup.config.ts if the assembly here changes.
  */
-export const CSS: string = `
+
+import { BLOCK_CSS } from '../embed/css';
+
+const AUTO_BASE_CSS: string = `
 /* 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;
 }
 
@@ -32,197 +48,26 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
   line-height: 1.4;
   color-scheme: light dark;
 }
-.dgmo-rendered svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.dgmo-source-panel {
-  margin-top: 4px;
-  position: relative;
-}
-
-.dgmo-source-toggle {
-  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;
-  border: 0;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-align: left;
-  cursor: pointer;
-  color: inherit;
-  opacity: 0.45;
-  border-radius: 3px;
-  transition: opacity 120ms ease, background 120ms ease;
-}
-.dgmo-source-toggle:hover {
-  opacity: 0.85;
-  background: rgba(127, 127, 127, 0.08);
-}
-.dgmo-source-toggle:focus-visible {
-  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 {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 150ms ease-out;
-  position: relative;
-}
-.dgmo-source-body.dgmo-open {
-  max-height: 60vh;
-  overflow: auto;
-  margin-top: 2px;
-  border-radius: 4px;
-  background: rgba(127, 127, 127, 0.04);
-}
-.dgmo-rendered.dgmo-theme-dark .dgmo-source-body.dgmo-open {
-  background: rgba(255, 255, 255, 0.03);
-}
-.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;
-  white-space: pre;
-  overflow: auto;
-  background: transparent;
-  color: inherit;
-}
-
-.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;
-}
-.dgmo-source-body.dgmo-open .dgmo-source-actions {
-  pointer-events: auto;
-}
-.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-btn:hover {
-  opacity: 1;
-  background: rgba(127, 127, 127, 0.15);
-}
-.dgmo-btn:focus-visible {
-  opacity: 1;
-  outline: 2px solid currentColor;
-  outline-offset: 1px;
-}
-.dgmo-btn[aria-disabled="true"] {
-  opacity: 0.25;
-  cursor: not-allowed;
-}
-.dgmo-btn[aria-disabled="true"]:hover {
-  background: transparent;
-}
-.dgmo-btn-copied {
-  opacity: 1 !important;
-  color: rgb(120, 200, 120);
-}
-.dgmo-btn svg {
-  width: 14px;
-  height: 14px;
-  display: block;
-}
 
-.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;
-}
-.dgmo-error-banner-title {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-.dgmo-error-banner-loc {
-  opacity: 0.7;
+.dgmo--loading {
+  opacity: 0.6;
   font-size: 12px;
   font-family: ui-monospace, monospace;
 }
+`;
 
-/* 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; }
+/** Re-scope BLOCK_CSS's \`[data-theme="dark"]\` rules to `.dgmo-theme-dark`. */
+function darkScopedBlockCss(css: string): string {
+  const rules = css.match(/\[data-theme="dark"\][^{]*\{[^}]*\}/g) ?? [];
+  return rules
+    .map((rule) => rule.replace(/\[data-theme="dark"\]/g, '.dgmo-theme-dark'))
+    .join('\n');
+}
 
-.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; }
-`;
+export const CSS: string =
+  AUTO_BASE_CSS +
+  '\n' +
+  BLOCK_CSS +
+  '\n' +
+  darkScopedBlockCss(BLOCK_CSS) +
+  '\n';

package/src/c4/renderer.ts

@@ -622,7 +622,7 @@ export function renderC4Context(
           .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
-      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+      legendParent.attr('data-legend-active', tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent as GSelection,
@@ -1804,7 +1804,7 @@ export function renderC4Containers(
           .attr('transform', `translate(0, ${DIAGRAM_PADDING + titleHeight})`)
       : contentG.append('g').attr('class', 'c4-legend');
     if (activeTagGroup) {
-      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+      legendParent.attr('data-legend-active', tagAttrKey(activeTagGroup));
     }
     renderLegend(
       legendParent as GSelection,

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/element/index.ts

@@ -45,8 +45,8 @@ import {
   resolveTheme,
   sanitizeSvgInPlace,
   deriveAriaLabel,
-  buildSourcePanel,
-  buildErrorBanner,
+  buildRenderedBlock,
+  buildErrorBlock,
   buildShareUrl,
   sharedWarn,
   type ThemePreference,
@@ -275,7 +275,9 @@ export class DgmoDiagram extends HTMLElement {
     line?: number;
     column?: number;
   }): void {
-    this.mount(buildErrorBanner(opts), 'dgmo dgmo--error');
+    // The standard error card carries `.dgmo.dgmo--error` on its own root,
+    // so the container itself stays class-free.
+    this.mount(buildErrorBlock({ ...opts, source: this.source ?? '' }), '');
   }
 
   private async rerender(): Promise<void> {
@@ -289,9 +291,8 @@ export class DgmoDiagram extends HTMLElement {
 
     // Loading state (visible only while an async render/fetch is in flight).
     const loading = document.createElement('div');
-    loading.className = 'dgmo-error-banner-loc';
     loading.textContent = 'Rendering diagram…';
-    this.mount(loading, 'dgmo dgmo--loading');
+    this.mount(loading, 'dgmo--loading');
 
     const themePref = this.themePreference();
     const resolvedTheme =
@@ -382,22 +383,29 @@ export class DgmoDiagram extends HTMLElement {
           ? 'dgmo-theme-transparent'
           : 'dgmo-theme-light';
 
-    const frag = document.createDocumentFragment();
-    frag.appendChild(svgEl);
-
-    // Showcase chrome: collapsible source panel + Copy + Open-in-editor.
-    if (this.isShowcase()) {
-      const shareUrl = buildShareUrl(src, {
-        palette,
-        theme: resolvedTheme === 'dark' ? 'dark' : 'light',
-        editorBase: this.editorBase(),
-        campaign: VERSION,
-        utmSource: 'element-embed',
-      });
-      frag.appendChild(buildSourcePanel(src, shareUrl, true));
-    }
-
-    this.mount(frag, `dgmo-rendered ${themeClass} dgmo--rendered`);
+    // Showcase chrome: standard embed block (BL-114) with the hover-reveal
+    // toolbar (view-source toggle + Copy + Open-in-editor).
+    const showcase = this.isShowcase();
+    const shareUrl = showcase
+      ? buildShareUrl(src, {
+          palette,
+          theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+          editorBase: this.editorBase(),
+          campaign: VERSION,
+          utmSource: 'element-embed',
+        })
+      : null;
+
+    const wrapper = buildRenderedBlock({
+      source: src,
+      svgEl,
+      themeClass,
+      showSource: showcase,
+      showEditorLink: showcase,
+      shareUrl,
+    });
+
+    this.mount(wrapper, 'dgmo--rendered');
   }
 }