@k2b/editor 0.0.0 → 0.1.0

package/src/markdown/markup.ts

@@ -0,0 +1,385 @@
+/**
+ * Markup-hiding extension for CodeMirror.
+ *
+ * Hides markdown syntax markers when the cursor is not on the same line/range:
+ * - Heading markers (# ## ### etc.) — hidden when cursor is on a different line
+ * - Bold markers (**) — hidden when cursor is outside the bold range
+ * - Italic markers (* or _) — hidden when cursor is outside the italic range
+ * - Strikethrough markers (~~) — hidden when cursor is outside the range
+ *
+ * Also renders horizontal rules (--- / *** / ___) as visual lines.
+ */
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import { RangeSet, StateField } from "@codemirror/state";
+import type { DecorationSet } from "@codemirror/view";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { holdsDecorations, refreshMarkdownDecorationsEffect, treeOrDocChanged } from "./_lib/cursor-zone-field";
+
+// =============================================================================
+// Widgets
+// =============================================================================
+
+class HorizontalRuleWidget extends WidgetType {
+  constructor(private fromPos: number) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const hr = document.createElement("div");
+    hr.className = "cm-hr-widget";
+    hr.setAttribute("contenteditable", "false");
+    hr.onmousedown = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      view.dispatch({ selection: { anchor: this.fromPos }, scrollIntoView: true });
+      view.focus();
+    };
+    return hr;
+  }
+
+  override eq(other: WidgetType) {
+    return other instanceof HorizontalRuleWidget && other.fromPos === this.fromPos;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+}
+
+// =============================================================================
+// Decoration builders
+// =============================================================================
+
+/**
+ * Check if the cursor is on a given line.
+ */
+const cursorOnLine = (state: EditorState, lineFrom: number, lineTo: number): boolean => {
+  for (const range of state.selection.ranges) {
+    const rLineFrom = state.doc.lineAt(range.from).number;
+    const rLineTo = state.doc.lineAt(range.to).number;
+    const targetLineFrom = state.doc.lineAt(lineFrom).number;
+    const targetLineTo = state.doc.lineAt(lineTo).number;
+    if (rLineFrom <= targetLineTo && rLineTo >= targetLineFrom) return true;
+  }
+  return false;
+};
+
+/**
+ * Check if the cursor is inside a range (inclusive).
+ */
+const cursorInRange = (state: EditorState, from: number, to: number): boolean => {
+  for (const range of state.selection.ranges) {
+    if (range.from <= to && range.to >= from) return true;
+  }
+  return false;
+};
+
+/**
+ * Collect all code ranges to avoid decorating inside code blocks.
+ */
+const getCodeRanges = (state: EditorState): { from: number; to: number }[] => {
+  const ranges: { from: number; to: number }[] = [];
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.type.name === "FencedCode" || node.type.name === "InlineCode" || node.type.name === "CodeBlock") {
+        ranges.push({ from: node.from, to: node.to });
+      }
+    },
+  });
+  return ranges;
+};
+
+const isInsideCode = (codeRanges: { from: number; to: number }[], from: number, to: number): boolean =>
+  codeRanges.some((r) => from >= r.from && to <= r.to);
+
+/**
+ * Walk the syntax tree once to collect:
+ *   - Line numbers of every line that hosts a heading / HR
+ *     (cursor-on-line decisions depend on these).
+ *   - Source ranges of every emphasis / strong / strikethrough /
+ *     codespan node (cursor-in-range decisions depend on these).
+ *
+ * Cached in the StateField value so subsequent selection-only
+ * transactions can decide whether to rebuild WITHOUT another
+ * walk: if the cursor neither changed lines (for line-based
+ * decorations) nor crossed any tracked range boundary (for
+ * range-based decorations), nothing's changed and we keep the
+ * existing decoration set.
+ */
+const collectMarkupTrackedRanges = (state: EditorState): { lines: Set<number>; ranges: Array<{ from: number; to: number }> } => {
+  const lines = new Set<number>();
+  const ranges: Array<{ from: number; to: number }> = [];
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      const { name, from, to } = node;
+      if (name.startsWith("ATXHeading") || name === "HorizontalRule" || name === "SetextHeading") {
+        const fromLine = state.doc.lineAt(from).number;
+        const toLine = state.doc.lineAt(to).number;
+        for (let l = fromLine; l <= toLine; l++) lines.add(l);
+        return;
+      }
+      if (name === "Emphasis" || name === "StrongEmphasis" || name === "Strikethrough" || name === "InlineCode") {
+        ranges.push({ from, to });
+      }
+    },
+  });
+  return { lines, ranges };
+};
+
+/**
+ * Build all decorations for markup hiding and horizontal rules.
+ */
+const buildDecorations = (state: EditorState): Range<Decoration>[] => {
+  const decorations: Range<Decoration>[] = [];
+  const codeRanges = getCodeRanges(state);
+
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      const { name, from, to } = node;
+
+      // ---------------------------------------------------------------
+      // Headings: hide the "# " marker when cursor is on another line
+      // ---------------------------------------------------------------
+      if (name.startsWith("ATXHeading")) {
+        if (isInsideCode(codeRanges, from, to)) return;
+        if (cursorOnLine(state, from, to)) return;
+
+        // Find the HeaderMark node (the # characters)
+        let markEnd = from;
+        const nodeRef = node.node;
+        const markCursor = nodeRef.cursor();
+        if (markCursor.firstChild()) {
+          do {
+            if (markCursor.name === "HeaderMark") {
+              // Include the space after the #
+              markEnd = markCursor.to;
+              const afterMark = state.doc.sliceString(markEnd, markEnd + 1);
+              if (afterMark === " ") markEnd++;
+              break;
+            }
+          } while (markCursor.nextSibling());
+        }
+
+        if (markEnd > from) {
+          decorations.push(Decoration.replace({}).range(from, markEnd));
+        }
+        return;
+      }
+
+      // ---------------------------------------------------------------
+      // Bold: hide ** or __ markers
+      // ---------------------------------------------------------------
+      if (name === "StrongEmphasis") {
+        if (isInsideCode(codeRanges, from, to)) return;
+        if (cursorInRange(state, from, to)) return;
+
+        const text = state.doc.sliceString(from, to);
+        const marker = text.startsWith("**") ? "**" : text.startsWith("__") ? "__" : null;
+        if (!marker) return;
+
+        const markerLen = marker.length;
+        // Hide opening marker
+        decorations.push(Decoration.replace({}).range(from, from + markerLen));
+        // Hide closing marker
+        decorations.push(Decoration.replace({}).range(to - markerLen, to));
+        return;
+      }
+
+      // ---------------------------------------------------------------
+      // Italic: hide * or _ markers
+      // ---------------------------------------------------------------
+      if (name === "Emphasis") {
+        if (isInsideCode(codeRanges, from, to)) return;
+        if (cursorInRange(state, from, to)) return;
+
+        const text = state.doc.sliceString(from, to);
+        const marker = text.startsWith("*") ? "*" : text.startsWith("_") ? "_" : null;
+        if (!marker) return;
+
+        const markerLen = marker.length;
+        // Hide opening marker
+        decorations.push(Decoration.replace({}).range(from, from + markerLen));
+        // Hide closing marker
+        decorations.push(Decoration.replace({}).range(to - markerLen, to));
+        return;
+      }
+
+      // ---------------------------------------------------------------
+      // Strikethrough: hide ~~ markers
+      // ---------------------------------------------------------------
+      if (name === "Strikethrough") {
+        if (isInsideCode(codeRanges, from, to)) return;
+        if (cursorInRange(state, from, to)) return;
+
+        // Hide opening ~~
+        decorations.push(Decoration.replace({}).range(from, from + 2));
+        // Hide closing ~~
+        decorations.push(Decoration.replace({}).range(to - 2, to));
+        return;
+      }
+
+      // ---------------------------------------------------------------
+      // Horizontal Rule: replace --- / *** / ___ with a visual line
+      // ---------------------------------------------------------------
+      if (name === "HorizontalRule") {
+        if (cursorOnLine(state, from, to)) return;
+
+        decorations.push(
+          Decoration.replace({
+            widget: new HorizontalRuleWidget(from),
+            block: true,
+          }).range(from, to),
+        );
+        return;
+      }
+    },
+  });
+
+  return decorations;
+};
+
+const buildAtomicDecorations = (state: EditorState): Range<Decoration>[] => {
+  const decorations: Range<Decoration>[] = [];
+  syntaxTree(state).iterate({
+    enter: ({ name, from, to }) => {
+      if (name !== "HorizontalRule") return;
+      if (cursorOnLine(state, from, to)) return;
+      decorations.push(
+        Decoration.replace({
+          widget: new HorizontalRuleWidget(from),
+          block: true,
+        }).range(from, to),
+      );
+    },
+  });
+  return decorations;
+};
+
+// =============================================================================
+// Extension
+// =============================================================================
+
+/** All decoration-affecting ranges discovered during the last
+ *  rebuild. Markup makes two kinds of cursor-sensitive decisions:
+ *
+ *   - LINE-BASED (`cursorOnLine`): headings + HRs. Rebuild needed
+ *     when the cursor moves to a different line.
+ *
+ *   - RANGE-BASED (`cursorInRange`): emphasis / strong markers.
+ *     Rebuild needed when the cursor's containment status changes
+ *     for any tracked range (entered or left any of them).
+ *
+ *  We cache both so the `update()` can decide whether to rebuild
+ *  by comparing the new cursor's relationship to these ranges
+ *  against the old state's. */
+type MarkupState = {
+  decorations: DecorationSet;
+  atomicDecorations: DecorationSet;
+  /** Line numbers of every line that has a cursor-sensitive
+   *  decoration (heading, HR). If the cursor crosses any of these
+   *  lines, we rebuild. */
+  cursorSensitiveLines: Set<number>;
+  /** Emphasis / strong ranges — decisions depend on `cursorInRange`. */
+  cursorSensitiveRanges: Array<{ from: number; to: number }>;
+  /** Cached current cursor signature so we can compare across
+   *  transactions cheaply. */
+  cursorLine: number;
+  cursorRangeKey: string;
+};
+
+const cursorLineNumber = (state: EditorState): number => state.doc.lineAt(state.selection.main.head).number;
+
+/** Compact "set of ranges the cursor is inside" identifier. We use
+ *  a sorted comma-separated index string so equality is a cheap
+ *  string compare. */
+const computeCursorRangeKey = (state: EditorState, ranges: Array<{ from: number; to: number }>): string => {
+  const cursor = state.selection.main;
+  const hits: number[] = [];
+  for (let i = 0; i < ranges.length; i++) {
+    const r = ranges[i]!;
+    if (cursor.from <= r.to && cursor.to >= r.from) hits.push(i);
+  }
+  return hits.join(",");
+};
+
+export const markupExtension = (): Extension => {
+  const stateField = StateField.define<MarkupState>({
+    create(state) {
+      const tracked = collectMarkupTrackedRanges(state);
+      return {
+        decorations: RangeSet.of(buildDecorations(state), true),
+        atomicDecorations: RangeSet.of(buildAtomicDecorations(state), true),
+        cursorSensitiveLines: tracked.lines,
+        cursorSensitiveRanges: tracked.ranges,
+        cursorLine: cursorLineNumber(state),
+        cursorRangeKey: computeCursorRangeKey(state, tracked.ranges),
+      };
+    },
+    update(value, tr) {
+      if (treeOrDocChanged(tr) || tr.effects.some((effect) => effect.is(refreshMarkdownDecorationsEffect))) {
+        // Keep cached cursor signatures consistent with the rebuilt decorations.
+        const tracked = collectMarkupTrackedRanges(tr.state);
+        return {
+          decorations: RangeSet.of(buildDecorations(tr.state), true),
+          atomicDecorations: RangeSet.of(buildAtomicDecorations(tr.state), true),
+          cursorSensitiveLines: tracked.lines,
+          cursorSensitiveRanges: tracked.ranges,
+          cursorLine: cursorLineNumber(tr.state),
+          cursorRangeKey: computeCursorRangeKey(tr.state, tracked.ranges),
+        };
+      }
+      if (holdsDecorations(tr)) return value;
+      if (!tr.selection) {
+        return value;
+      }
+      // Selection moved. Two checks:
+      //   1. Cursor changed line AND old or new line had a markup
+      //      decoration (heading / HR). Rebuild.
+      //   2. Cursor crossed an emphasis/strong range boundary
+      //      (entered or left). Rebuild.
+      const newLine = cursorLineNumber(tr.state);
+      const lineChangedAndMatters =
+        newLine !== value.cursorLine && (value.cursorSensitiveLines.has(value.cursorLine) || value.cursorSensitiveLines.has(newLine));
+      const newRangeKey = computeCursorRangeKey(tr.state, value.cursorSensitiveRanges);
+      const rangesChanged = newRangeKey !== value.cursorRangeKey;
+      if (!lineChangedAndMatters && !rangesChanged) {
+        // Selection moved but didn't affect any markup decision —
+        // skip the rebuild. This is the common case for typing
+        // within a plain paragraph: lots of cursor moves with no
+        // decoration impact.
+        return { ...value, cursorLine: newLine };
+      }
+      const tracked = collectMarkupTrackedRanges(tr.state);
+      return {
+        decorations: RangeSet.of(buildDecorations(tr.state), true),
+        atomicDecorations: RangeSet.of(buildAtomicDecorations(tr.state), true),
+        cursorSensitiveLines: tracked.lines,
+        cursorSensitiveRanges: tracked.ranges,
+        cursorLine: newLine,
+        cursorRangeKey: computeCursorRangeKey(tr.state, tracked.ranges),
+      };
+    },
+    provide(field) {
+      return [
+        EditorView.decorations.from(field, (v) => v.decorations),
+        EditorView.atomicRanges.of((view) => view.state.field(field).atomicDecorations),
+      ];
+    },
+  });
+
+  const theme = EditorView.theme({
+    ".cm-hr-widget": {
+      borderTop: "2px solid",
+      borderColor: "var(--color-zinc-300)",
+      margin: "0 !important",
+      padding: "0.75em 0 0",
+      boxSizing: "border-box",
+    },
+    ".dark .cm-hr-widget": {
+      borderColor: "var(--color-zinc-600)",
+    },
+  });
+
+  return [stateField, theme];
+};

package/src/markdown/mermaid-export.ts

@@ -0,0 +1,78 @@
+import type { MermaidConfig } from "mermaid";
+
+/**
+ * iOS Safari refuses canvases above 16,777,216 pixels (4096²), the smallest
+ * limit among supported browsers, so the PNG scale shrinks to stay below it.
+ */
+const MAX_CANVAS_PIXELS = 16_777_216;
+
+export type StandaloneSvg = { svg: string; width: number; height: number };
+
+/**
+ * Mermaid sizes its SVG relative to the page (`width="100%"`, `max-width`).
+ * A downloaded file and a rasterized image need the intrinsic size from the
+ * `viewBox` instead.
+ */
+export const standaloneSvg = (markup: string): StandaloneSvg => {
+  const document = new DOMParser().parseFromString(markup, "image/svg+xml");
+  const root = document.documentElement;
+  if (root.localName !== "svg" || root.querySelector("parsererror")) throw new Error("Diagram is not an SVG document");
+  const box = (root.getAttribute("viewBox") ?? "")
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  const width = Math.ceil(box[2] ?? 0);
+  const height = Math.ceil(box[3] ?? 0);
+  if (!(width > 0) || !(height > 0)) throw new Error("Diagram has no usable viewBox");
+  root.setAttribute("width", String(width));
+  root.setAttribute("height", String(height));
+  root.style.removeProperty("max-width");
+  if (!root.getAttribute("style")?.trim()) root.removeAttribute("style");
+  return { svg: new XMLSerializer().serializeToString(root), width, height };
+};
+
+/** The page background of the diagram's theme; exported PNGs are opaque. */
+export const diagramBackground = (dark: boolean, config?: MermaidConfig): string => {
+  const background: unknown = config?.themeVariables?.background;
+  return typeof background === "string" ? background : dark ? "#11151b" : "#ffffff";
+};
+
+export const pngScale = (width: number, height: number, devicePixelRatio: number): number =>
+  Math.min(Math.max(2, devicePixelRatio), Math.sqrt(MAX_CANVAS_PIXELS / (width * height)));
+
+const loadImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Diagram image could not be decoded"));
+    image.src = url;
+  });
+
+/** Rasterize a standalone SVG through an image sink, so its markup never becomes live DOM. */
+export const rasterizeSvg = async (diagram: StandaloneSvg, options: { background: string; scale: number }): Promise<Blob> => {
+  const url = URL.createObjectURL(new Blob([diagram.svg], { type: "image/svg+xml" }));
+  try {
+    const image = await loadImage(url);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(diagram.width * options.scale));
+    canvas.height = Math.max(1, Math.round(diagram.height * options.scale));
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("Canvas is unavailable");
+    context.fillStyle = options.background;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return await new Promise<Blob>((resolve, reject) =>
+      canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error("PNG encoding failed"))), "image/png"),
+    );
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+};
+
+/** File name base from the note title; `diagram` when the note has none. */
+export const diagramFilename = (title: string | null | undefined): string =>
+  (title ?? "")
+    .replace(/[\r\n/:*?"<>|\\]/gu, "-")
+    .replace(/\s+/gu, " ")
+    .trim()
+    .slice(0, 200) || "diagram";

package/src/markdown/mermaid-preview.tsx

@@ -0,0 +1,76 @@
+import { useLocale } from "@k2b/ui";
+import { type Accessor, type JSX, Match, Switch } from "solid-js";
+import type { MermaidOptions } from "./mermaid";
+import { MermaidViewport } from "./mermaid-viewport";
+import { markdownMessages } from "./messages";
+
+export type MermaidPreviewState = { kind: "loading" } | { kind: "ready"; svg: string } | { kind: "error"; message: string };
+
+/** Parse rendered Mermaid markup into a fresh element that fits its box without overflowing. */
+const diagramElement = (markup: string): JSX.Element => {
+  const host = document.createElement("div");
+  host.innerHTML = markup;
+  const svg = host.querySelector("svg");
+  if (!svg) return host;
+  svg.style.maxWidth = "90%";
+  svg.style.maxHeight = "90%";
+  svg.style.width = "auto";
+  svg.style.height = "auto";
+  return svg;
+};
+
+/** Editor preview of one Mermaid block: loading, the zoomable diagram, or the syntax error. */
+export function MermaidEditorPreview(props: {
+  state: Accessor<MermaidPreviewState>;
+  title: () => string | null;
+  exportSvg: () => Promise<string>;
+  configuration: MermaidOptions["configuration"];
+  locale?: string;
+}): JSX.Element {
+  const locale = useLocale();
+  const t = () => markdownMessages.resolve([props.locale ?? locale()]).t;
+  const svg = () => {
+    const state = props.state();
+    return state.kind === "ready" ? state.svg : undefined;
+  };
+  const error = () => {
+    const state = props.state();
+    return state.kind === "error" ? state.message : undefined;
+  };
+  return (
+    <Switch
+      fallback={
+        <div class="flex h-full items-center justify-center gap-2 p-4 text-gray-500">
+          <i class="ti ti-loader animate-spin" aria-hidden="true" />
+          <span class="text-sm">{t().loadingDiagram}</span>
+        </div>
+      }
+    >
+      <Match when={svg()}>
+        {(markup) => (
+          <MermaidViewport
+            class="h-full w-full"
+            configuration={props.configuration}
+            locale={props.locale}
+            controls="hover"
+            diagram={() => diagramElement(markup())}
+            title={props.title()}
+            exportSvg={props.exportSvg}
+          />
+        )}
+      </Match>
+      <Match when={error()}>
+        {(message) => (
+          <div class="flex h-full flex-col items-center justify-center gap-2 p-4 text-red-500">
+            <i class="ti ti-alert-circle text-2xl" aria-hidden="true" />
+            <span class="text-sm font-mono">{t().invalidMermaid}</span>
+            <details class="text-xs text-gray-500 max-w-full">
+              <summary class="cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">{t().showErrorDetails}</summary>
+              <pre class="mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-left overflow-x-auto">{message()}</pre>
+            </details>
+          </div>
+        )}
+      </Match>
+    </Switch>
+  );
+}

package/src/markdown/mermaid-render.ts

@@ -0,0 +1,22 @@
+import type { Mermaid, MermaidConfig } from "mermaid";
+
+let pending = Promise.resolve();
+
+/** Mermaid reads global config during rendering, so configure and render as one queued operation. */
+export function renderMermaid(
+  mermaid: Pick<Mermaid, "initialize" | "render">,
+  config: MermaidConfig,
+  id: string,
+  source: string,
+  container?: Element,
+) {
+  const result = pending.then(() => {
+    mermaid.initialize(config);
+    return mermaid.render(id, source, container);
+  });
+  pending = result.then(
+    () => undefined,
+    () => undefined,
+  );
+  return result;
+}

package/src/markdown/mermaid-viewport.tsx

@@ -0,0 +1,78 @@
+import { i18n } from "@k2b/stdlib";
+import { files } from "@k2b/stdlib/browser";
+import { toast, useLocale, ZoomPanViewport } from "@k2b/ui";
+import type { JSX } from "solid-js";
+import type { MermaidOptions } from "./mermaid";
+import { diagramBackground, diagramFilename, pngScale, rasterizeSvg, standaloneSvg } from "./mermaid-export";
+
+export const mermaidViewportMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      diagram: "Diagram",
+      downloadSvg: "Download SVG",
+      downloadPng: "Download PNG",
+      exportFailed: "The diagram could not be exported.",
+    },
+    de: {
+      diagram: "Diagramm",
+      downloadSvg: "SVG herunterladen",
+      downloadPng: "PNG herunterladen",
+      exportFailed: "Das Diagramm konnte nicht exportiert werden.",
+    },
+  },
+});
+
+export type MermaidViewportProps = {
+  /** Returns a new diagram node on every call: once inline, once per fullscreen opening. */
+  diagram: () => JSX.Element;
+  /** Note title for the fullscreen heading and the export file names. */
+  title?: string | null;
+  /** Rendered Mermaid SVG markup without HTML labels, so it can be rasterized. */
+  exportSvg: () => string | Promise<string>;
+  controls?: "visible" | "hover";
+  class?: string;
+  configuration?: MermaidOptions["configuration"];
+  locale?: string;
+};
+
+/** A Mermaid diagram that can be zoomed, panned, opened fullscreen, and exported as SVG or PNG. */
+export function MermaidViewport(props: MermaidViewportProps): JSX.Element {
+  const locale = useLocale();
+  const t = () => mermaidViewportMessages.resolve([props.locale ?? locale()]).t;
+  const exporting = (format: "svg" | "png") => async () => {
+    try {
+      const diagram = standaloneSvg(await props.exportSvg());
+      if (format === "svg") {
+        files.downloadFileFromContent(diagram.svg, `${diagramFilename(props.title)}.svg`, "image/svg+xml");
+        return;
+      }
+      const dark = document.documentElement.classList.contains("dark");
+      const png = await rasterizeSvg(diagram, {
+        background: diagramBackground(dark, props.configuration?.({ dark })),
+        scale: pngScale(diagram.width, diagram.height, window.devicePixelRatio || 1),
+      });
+      files.downloadFileFromContent(png, `${diagramFilename(props.title)}.png`, "image/png");
+    } catch (error) {
+      console.error("Mermaid export failed", error);
+      toast.error(t().exportFailed);
+    }
+  };
+  return (
+    <ZoomPanViewport
+      class={props.class}
+      label={t().diagram}
+      controls={props.controls}
+      fullscreen={{
+        title: props.title?.trim() || t().diagram,
+        content: props.diagram,
+        actions: [
+          { label: t().downloadSvg, icon: "ti ti-file-vector", onSelect: exporting("svg") },
+          { label: t().downloadPng, icon: "ti ti-photo-down", onSelect: exporting("png") },
+        ],
+      }}
+    >
+      {props.diagram()}
+    </ZoomPanViewport>
+  );
+}