@diagrammo/dgmo 0.47.0 → 0.48.0

package/src/embed/css.ts

@@ -1,312 +0,0 @@
-/**
- * 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

@@ -1,15 +0,0 @@
-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);
-}

package/src/embed/index.ts

@@ -1,280 +0,0 @@
-/**
- * Standard DGMO embed block (BL-114) — the ONE canonical
- * "diagram + source chrome" HTML builder shared by every embed surface:
- * remark-dgmo (and through it the astro/docusaurus/fumadocs/nextra/vitepress
- * wrappers), the `/auto` script-tag drop-in, `<dgmo-diagram>`, dgmo-mcp HTML
- * reports, the marketing site, and the Obsidian plugin.
- *
- * 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).
- *
- * Markup vocabulary: `figure.dgmo` (`--diagram`/`--showcase`/`--error`),
- * `.dgmo-light`/`.dgmo-dark` (dual color-mode) or `.dgmo-svg` (single),
- * `details.dgmo-source-wrap > summary.dgmo-toolbar`, `.dgmo-source-inner`,
- * `pre.dgmo-pre > span.dgmo-code` with `.dgmo-tok-<role>` token spans. While
- * the source is open the wrapper gets one shared frame (`:has()` rule) so
- * diagram + code read as a single unit. No visible caption — `title` becomes
- * the wrapper's aria-label. Styles ship as `BLOCK_CSS` / `dist/block.css`.
- */
-
-import { render } from '../render';
-import { encodeDiagramUrl } from '../sharing';
-import { resolvePaletteOrFallback } from '../palettes';
-import { highlightDgmo } from '../editor/highlight-api';
-import { normalizeSvgForEmbed } from '../utils/svg-embed';
-import { escapeHtml, escapeAttr } from './escape';
-
-export { BLOCK_CSS } from './css';
-
-/** Default hosted editor used by "Open in editor" links. */
-export const EDITOR_BASE_URL = 'https://online.diagrammo.app';
-
-export type BlockMode = 'diagram' | 'showcase';
-
-/**
- * Color-mode strategy for the emitted SVG(s).
- * - `auto` — render twice (light + dark) and let CSS flip visibility.
- * - `light` / `dark` / `transparent` — single render with that theme.
- */
-export type BlockColorMode = 'auto' | 'light' | 'dark' | 'transparent';
-
-export interface DgmoBlockOptions {
-  /** `diagram` (default): SVG only. `showcase`: SVG + source chrome. */
-  mode?: BlockMode;
-  /** Palette name. Default `slate`; unknown names warn + fall back. */
-  palette?: string;
-  /** Default `auto` (dual light/dark render). */
-  colorMode?: BlockColorMode;
-  /** Default: true in showcase mode, false in diagram mode. */
-  showSource?: boolean;
-  /** Default: true in showcase mode, false in diagram mode. */
-  showCopy?: boolean;
-  /** Default: true in showcase mode, false in diagram mode. */
-  showOpenInEditor?: boolean;
-  /** Base URL for the open-in-editor link. Default: online.diagrammo.app. */
-  editorBaseUrl?: string;
-  /** Outer wrapper element. Default `figure`. */
-  wrapper?: 'figure' | 'div';
-  /** Base class for the wrapper (styling hook). Default `dgmo`. */
-  className?: string;
-  /** Extra classes appended to every emitted wrapper (compat shims). */
-  legacyClassNames?: string[];
-  /**
-   * Accessible name for the block (`aria-label` on the wrapper). NOT rendered
-   * visually — the chart's visible title belongs in the DGMO source itself.
-   */
-  title?: string;
-  /** Receives palette-fallback warnings. Default: console.warn. */
-  onWarn?: (message: string) => void;
-}
-
-type ResolvedBlockOptions = Required<
-  Omit<DgmoBlockOptions, 'title' | 'onWarn'>
-> & {
-  title: string | undefined;
-  onWarn: (message: string) => void;
-};
-
-export interface DgmoBlockResult {
-  html: string;
-  diagnostics: Array<{ message: string; line?: number; severity?: string }>;
-}
-
-function resolveBlockOptions(opts: DgmoBlockOptions): ResolvedBlockOptions {
-  const mode: BlockMode = opts.mode ?? 'diagram';
-  const showcase = mode === 'showcase';
-  return {
-    mode,
-    palette: opts.palette ?? 'slate',
-    colorMode: opts.colorMode ?? 'auto',
-    showSource: opts.showSource ?? showcase,
-    showCopy: opts.showCopy ?? showcase,
-    showOpenInEditor: opts.showOpenInEditor ?? showcase,
-    editorBaseUrl: opts.editorBaseUrl ?? EDITOR_BASE_URL,
-    wrapper: opts.wrapper ?? 'figure',
-    className: opts.className ?? 'dgmo',
-    legacyClassNames: opts.legacyClassNames ?? [],
-    title: opts.title,
-
-    onWarn: opts.onWarn ?? ((message) => console.warn(message)),
-  };
-}
-
-/**
- * Render one ```dgmo source block to the standard embed HTML. Async because
- * it runs the full dgmo render pipeline (once per color mode).
- *
- * Render errors are NOT caught here — callers decide between throwing,
- * `errorBlockHtml()`, or their own fallback.
- */
-export async function renderDgmoBlock(
-  source: string,
-  options: DgmoBlockOptions = {}
-): Promise<DgmoBlockResult> {
-  const opts = resolveBlockOptions(options);
-  const trimmed = source.trim();
-  // Resolve-with-fallback so unknown names warn here (render() itself falls
-  // back silently); render() takes the palette by NAME, so pass the id.
-  const paletteId = resolvePaletteOrFallback(opts.palette, opts.onWarn).id;
-  const diagnostics: DgmoBlockResult['diagnostics'] = [];
-
-  let svgsHtml: string;
-  if (opts.colorMode === 'auto') {
-    const [light, dark] = await Promise.all([
-      render(trimmed, { palette: paletteId, theme: 'light' }),
-      render(trimmed, { palette: paletteId, theme: '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>`;
-  } 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>`;
-  }
-
-  return { html: assembleBlock(trimmed, svgsHtml, opts), diagnostics };
-}
-
-/**
- * Assemble the standard block around already-rendered SVG markup. Exposed for
- * surfaces that render through their own pipeline (e.g. dgmo-mcp's
- * renderPipeline) but must emit the canonical chrome. `svgsHtml` must be the
- * `.dgmo-light`+`.dgmo-dark` (or `.dgmo-svg`) wrapper divs.
- */
-export function buildDgmoBlockHtml(
-  source: string,
-  svgsHtml: string,
-  options: DgmoBlockOptions = {}
-): string {
-  return assembleBlock(source.trim(), svgsHtml, resolveBlockOptions(options));
-}
-
-/**
- * Standard error card for a block that failed to parse/render. Same shape on
- * every surface: `.dgmo--error` with `role="alert"`, message + offending
- * source.
- */
-export function errorBlockHtml(
-  err: unknown,
-  source: string,
-  options: Pick<DgmoBlockOptions, 'className' | 'legacyClassNames'> = {}
-): string {
-  const msg =
-    err instanceof Error ? err.message : 'Failed to render dgmo block.';
-  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>`
-  );
-}
-
-// ============================================================
-// Internals
-// ============================================================
-
-function wrapperClasses(
-  opts: ResolvedBlockOptions,
-  variant: 'diagram' | 'showcase'
-): string {
-  const base = `${opts.className} ${opts.className}--${variant}`;
-  const legacy = opts.legacyClassNames.join(' ');
-  return legacy ? `${base} ${legacy}` : base;
-}
-
-function innerClasses(opts: ResolvedBlockOptions, primary: string): string {
-  const legacy = opts.legacyClassNames.join(' ');
-  return legacy ? `${primary} ${legacy}` : primary;
-}
-
-function assembleBlock(
-  source: string,
-  svgsHtml: string,
-  opts: ResolvedBlockOptions
-): string {
-  const Wrapper = opts.wrapper;
-  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) : '';
-
-  return (
-    `<${Wrapper} class="${escapeAttr(wrapperClasses(opts, variant))}"${ariaAttr}>` +
-    svgsHtml +
-    sourceHtml +
-    `</${Wrapper}>`
-  );
-}
-
-// ----- icon SVGs (static author-controlled markup) -----
-const 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>`;
-const 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>`;
-const 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>`;
-
-/**
- * The hidden source panel plus its toolbar. The <summary> is the toolbar row;
- * its default click behavior is the source toggle, so no JS is needed for
- * show/hide. The `</>` span deliberately does NOT get the `.dgmo-toolbar-btn`
- * class — client copy/open handlers preventDefault on `.dgmo-toolbar-btn`
- * inside a <summary> (to not also toggle), and the toggle must keep the
- * default.
- */
-function sourceDisclosure(source: string, opts: ResolvedBlockOptions): string {
-  if (!opts.showSource) return '';
-
-  const toggle = `<span class="dgmo-toggle" title="View DGMO source">${CODE_ICON}</span>`;
-
-  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) {
-    const encoded = encodeDiagramUrl(source, { baseUrl: opts.editorBaseUrl });
-    // `too-large` (or any encode failure) → omit the link; copy remains.
-    if (encoded.url) {
-      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 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>`
-  );
-}
-
-function highlightedSource(source: string): string {
-  const tokens = highlightDgmo(source);
-  const inner = tokens
-    .map((t) => {
-      const text = escapeHtml(t.text);
-      if (!t.role || t.role === 'default') return text;
-      return `<span class="dgmo-tok-${escapeAttr(t.role)}">${text}</span>`;
-    })
-    .join('');
-  // <pre><span> rather than <pre><code>: Astro's Shiki rehype plugin and
-  // Docusaurus's MDX pipeline post-process any <pre><code> pair (even ones
-  // emitted as raw HTML), clobbering pre-rendered highlight spans. A <span>
-  // inner element bypasses the matcher while keeping preformatted semantics.
-  return `<pre class="dgmo-pre"><span class="dgmo-code">${inner}</span></pre>`;
-}