@matfsw/docusaurus-plantuml-plugin 1.3.0 → 1.4.0

package/dist/theme/PlantUmlDiagram/deeplink.js

@@ -0,0 +1,149 @@
+/**
+ * Deep links into diagrams: `#graph?highlight-node=<TARGET>`.
+ *
+ * Every diagram on the page reacts to the hash — none of them needs an id of its own, and a
+ * diagram that does not contain the target simply does nothing. The matcher below is a
+ * ladder: the first level that yields a match wins, so a deterministic, author-chosen ID
+ * always beats the loose text matching that exists for diagrams nobody annotated.
+ *
+ * Everything here is DOM-in, elements-out and free of React, which is what makes the ladder
+ * testable against synthetic SVG.
+ */
+/** The hash prefix that separates diagram deep links from ordinary heading anchors. */
+const HASH_PREFIX = '#graph?';
+/** The query parameter carrying the node identifier. */
+const NODE_PARAM = 'highlight-node';
+/**
+ * Extracts the deeplink target from a location hash.
+ *
+ * Returns the decoded identifier — `%0A` becomes a real newline, so multiline labels can be
+ * addressed — or `null` when the hash is absent, not diagram-shaped, or names no node.
+ */
+export function parseDiagramHash(hash) {
+    if (!hash.startsWith(HASH_PREFIX))
+        return null;
+    const target = new URLSearchParams(hash.slice(HASH_PREFIX.length)).get(NODE_PARAM);
+    return target === null || target.trim() === '' ? null : target;
+}
+/** Escapes a value for use inside a double-quoted CSS attribute selector. */
+function escapeAttributeValue(value) {
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+/** The target of an `<a>` element, whichever spelling the engine used. */
+function hrefOf(anchor) {
+    return anchor.getAttribute('href') ?? anchor.getAttribute('xlink:href');
+}
+/** Whether every line of the window contains its target line, case-insensitively. */
+function windowMatches(texts, start, lines) {
+    return lines.every((line, index) => (texts[start + index]?.textContent ?? '').toLowerCase().includes(line));
+}
+/**
+ * Finds the node a deeplink target refers to inside one rendered diagram.
+ *
+ * The ladder, from most to least deterministic:
+ *
+ * 1. **Explicit id** — an element whose `id` equals the target. Graphviz emits these for
+ *    `node [id="…"]`, giving a hidden, deterministic handle. (PlantUML's own `id`s are
+ *    generated — `ent0001` — and deliberately not part of the contract.)
+ * 2. **PlantUML alias** — the engine writes every entity's alias into
+ *    `data-qualified-name` on its `g.entity` group, so `component "X" as REACTION_1234`
+ *    and `note "…" as REACTION_1234` are addressable by an id that never appears in the
+ *    picture. This is PlantUML's spelling of a hidden deterministic id.
+ * 3. **Self-anchor** — an `<a>` whose href's hash parses to the same target, which doubles
+ *    as the node's own permalink. Graphviz emits these for `node [URL="#graph?…"]`; the
+ *    bundled PlantUML engine currently emits no anchors at all, so for PlantUML this level
+ *    is future-proofing rather than an authoring channel.
+ * 4. **Graphviz node name** — the `<title>` Graphviz writes into every `g.node`, so plain
+ *    DOT node names work with no annotation at all.
+ * 5. **Multiline label** — a target containing newlines (`%0A` in the URL) matches that many
+ *    *consecutive* text lines, each containing its line of the target. The window stays
+ *    inside one node's group where groups exist (Graphviz `g.node`, PlantUML `g.entity`)
+ *    and runs over the document order otherwise — which is how a two-line label is told
+ *    apart from two nodes that each contain one of the lines.
+ * 6. **Single-line substring** — the first text line containing the target,
+ *    case-insensitively. This is what lets the unique half of a label (`12345` of
+ *    `caminus-process-archive\n12345`) address the node without spelling out the rest.
+ */
+export function findDeeplinkTarget(root, target) {
+    // A target with a newline is a multiline label, never an id or alias — and selector
+    // engines reject the literal newline outright.
+    if (!target.includes('\n')) {
+        // 1. Explicit id. An attribute selector rather than #…: ids here are author-chosen and
+        // may start with a digit or contain characters a bare id selector would reject.
+        const byId = root.querySelector(`[id="${escapeAttributeValue(target)}"]`);
+        if (byId)
+            return { elements: [byId], anchor: byId };
+        // 2. PlantUML alias.
+        const byAlias = root.querySelector(`[data-qualified-name="${escapeAttributeValue(target)}"]`);
+        if (byAlias)
+            return { elements: [byAlias], anchor: byAlias };
+    }
+    // 3. Self-anchor.
+    for (const anchor of Array.from(root.querySelectorAll('a'))) {
+        const href = hrefOf(anchor);
+        const hashIndex = href?.indexOf('#') ?? -1;
+        if (href !== null && hashIndex >= 0 && parseDiagramHash(href.slice(hashIndex)) === target) {
+            return { elements: [anchor], anchor };
+        }
+    }
+    // 4. Graphviz node name.
+    for (const title of Array.from(root.querySelectorAll('g.node > title'))) {
+        const node = title.parentElement;
+        if (node && (title.textContent ?? '').trim() === target) {
+            return { elements: [node], anchor: node };
+        }
+    }
+    const lines = target
+        .split('\n')
+        .map((line) => line.trim().toLowerCase())
+        .filter((line) => line !== '');
+    if (lines.length === 0)
+        return null;
+    // 5. Multiline label.
+    if (lines.length > 1) {
+        const groups = Array.from(root.querySelectorAll('g.node, g.entity'));
+        const scopes = groups.length > 0 ? groups : [root];
+        for (const scope of scopes) {
+            const texts = Array.from(scope.querySelectorAll('text'));
+            for (let start = 0; start + lines.length <= texts.length; start += 1) {
+                if (windowMatches(texts, start, lines)) {
+                    const window = texts.slice(start, start + lines.length);
+                    return { elements: window, anchor: window[0] };
+                }
+            }
+        }
+        return null;
+    }
+    // 6. Single-line substring.
+    const needle = lines[0];
+    for (const text of Array.from(root.querySelectorAll('text'))) {
+        if ((text.textContent ?? '').toLowerCase().includes(needle)) {
+            return { elements: [text], anchor: text };
+        }
+    }
+    return null;
+}
+/**
+ * Scrolls the page to the first figure that claims a given deeplink navigation — and only
+ * that one.
+ *
+ * Diagrams evaluate the hash independently, so without an arbiter every matching figure
+ * would fight over the scroll position. The caller keys the claim on one *navigation* to
+ * one target (history entry key + pathname + target): the many diagrams reacting to a
+ * single navigation yield a single scroll, while following the same deep link again — a new
+ * history entry, unchanged hash — scrolls again. Keying on the target alone got that second
+ * follow wrong: the stale claim swallowed the scroll. On a page whose diagrams were
+ * force-rendered by the hash, renders complete in mount order, so the first claimant is in
+ * practice the first matching figure in the document.
+ */
+let scrolledKey = null;
+export function claimDeeplinkScroll(claimKey, figure) {
+    if (scrolledKey === claimKey)
+        return;
+    scrolledKey = claimKey;
+    figure.scrollIntoView({ block: 'center' });
+}
+/** Test-only: lets each test start with the scroll unclaimed. */
+export function resetDeeplinkScroll() {
+    scrolledKey = null;
+}

package/dist/theme/PlantUmlDiagram/icons.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The toolbar's icons, drawn rather than typed.
+ *
+ * These were symbol characters until 1.3.1, and one of them was invisible to a large group of
+ * readers: `⛶` U+26F6 SQUARE FOUR CORNERS has no glyph in any font that ships with a stock
+ * Linux desktop, so the maximize control rendered as a tofu box — on the demo site included.
+ * The other four only worked because DejaVu Sans happens to be installed, which a minimal
+ * container image or a locked-down corporate desktop does not promise. See issue #21.
+ *
+ * Two details keep the existing styling working with no CSS change at all:
+ *
+ * - `currentColor` inherits `.toolbarButton`'s `color: var(--ifm-font-color-base)`, so both
+ *   colour modes keep working exactly as they did.
+ * - `1em` inherits its `font-size: 1rem`, so the icons size with the button — and with a
+ *   reader who has scaled their font up — the way the characters used to.
+ *
+ * Every icon is `aria-hidden`: each `<button>` already carries an `aria-label`, which is the
+ * accessible name. Nothing here is announced.
+ */
+import type { ReactElement } from 'react';
+/** Replaces `−` U+2212. */
+export declare function ZoomOutIcon(): ReactElement;
+/** Replaces `+`. */
+export declare function ZoomInIcon(): ReactElement;
+/** Replaces `⟲` U+27F2: a circular arrow, open at the top right where the arrowhead sits. */
+export declare function ResetZoomIcon(): ReactElement;
+/**
+ * Fit to view: the maximize corners with the diagram drawn inside them, so the two controls
+ * read as siblings — both are about the frame, one keeps you in the page.
+ */
+export declare function FitIcon(): ReactElement;
+/** Replaces `⛶` U+26F6, the character that had no glyph. */
+export declare function MaximizeIcon(): ReactElement;
+/** Replaces `✕` U+2715, shown in place of maximize while the diagram fills the viewport. */
+export declare function CloseIcon(): ReactElement;
+/** The search toggle: a lens. */
+export declare function SearchIcon(): ReactElement;
+/** Previous search match. */
+export declare function ChevronUpIcon(): ReactElement;
+/** Next search match. */
+export declare function ChevronDownIcon(): ReactElement;
+/** The minimap toggle: a map frame with the viewport rectangle marked inside it. */
+export declare function MinimapIcon(): ReactElement;
+/**
+ * Replaces the literal `</>` of the source toggle.
+ *
+ * ASCII, so it never had the glyph problem — but left as text it would be the one control in
+ * the row still drawn in the page font, at a different weight and optical size from its
+ * neighbours, and moving with the reader's font settings while they stayed put.
+ */
+export declare function SourceIcon(): ReactElement;

package/dist/theme/PlantUmlDiagram/icons.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconProps = {
+    viewBox: '0 0 16 16',
+    width: '1em',
+    height: '1em',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': true,
+    // Keeps the SVG out of the tab order in browsers that made it focusable by default.
+    focusable: false,
+};
+/** Replaces `−` U+2212. */
+export function ZoomOutIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M3 8h10" }) }));
+}
+/** Replaces `+`. */
+export function ZoomInIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
+}
+/** Replaces `⟲` U+27F2: a circular arrow, open at the top right where the arrowhead sits. */
+export function ResetZoomIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("path", { d: "M13 8A5 5 0 1 1 11.4 4.3" }), _jsx("path", { d: "M13 2v3h-3" })] }));
+}
+/**
+ * Fit to view: the maximize corners with the diagram drawn inside them, so the two controls
+ * read as siblings — both are about the frame, one keeps you in the page.
+ */
+export function FitIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }), _jsx("rect", { x: "5.5", y: "5.5", width: "5", height: "5", rx: "1" })] }));
+}
+/** Replaces `⛶` U+26F6, the character that had no glyph. */
+export function MaximizeIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) }));
+}
+/** Replaces `✕` U+2715, shown in place of maximize while the diagram fills the viewport. */
+export function CloseIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
+}
+/** The search toggle: a lens. */
+export function SearchIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("circle", { cx: "7", cy: "7", r: "4" }), _jsx("path", { d: "M10 10l4 4" })] }));
+}
+/** Previous search match. */
+export function ChevronUpIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M4 10l4-4 4 4" }) }));
+}
+/** Next search match. */
+export function ChevronDownIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M4 6l4 4 4-4" }) }));
+}
+/** The minimap toggle: a map frame with the viewport rectangle marked inside it. */
+export function MinimapIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1" }), _jsx("rect", { x: "4.5", y: "7.5", width: "4", height: "3", fill: "currentColor", stroke: "none" })] }));
+}
+/**
+ * Replaces the literal `</>` of the source toggle.
+ *
+ * ASCII, so it never had the glyph problem — but left as text it would be the one control in
+ * the row still drawn in the page font, at a different weight and optical size from its
+ * neighbours, and moving with the reader's font settings while they stayed put.
+ */
+export function SourceIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M6 4L2 8l4 4M10 4l4 4-4 4" }) }));
+}

package/dist/theme/PlantUmlDiagram/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { useLocation } from '@docusaurus/router';
 import { useColorMode } from '@docusaurus/theme-common';
 import { DATA_ATTR } from '../../constants.js';
 import { getSharedCache } from '../../runtime/cache.js';
@@ -7,6 +8,11 @@ import { PlantUmlError } from '../../runtime/errors.js';
 import { renderGraphvizDiagram } from '../../runtime/graphvizRenderer.js';
 import { renderDiagram } from '../../runtime/renderer.js';
 import { usePlantUmlConfig } from '../usePlantUmlConfig.js';
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon, FitIcon, MaximizeIcon, MinimapIcon, ResetZoomIcon, SearchIcon, SourceIcon, ZoomInIcon, ZoomOutIcon, } from './icons.js';
+import { parseDiagramHash } from './deeplink.js';
+import Minimap from './Minimap.js';
+import { useDiagramDeeplink } from './useDiagramDeeplink.js';
+import { useDiagramSearch } from './useDiagramSearch.js';
 import { useZoomPan } from './useZoomPan.js';
 import styles from './styles.module.css';
 /**
@@ -49,6 +55,9 @@ function messageFor(error) {
 export default function PlantUmlDiagram({ source, title, language, engine = 'plantuml', layout, zoom: zoomProp, showSource: showSourceProp, }) {
     const config = usePlantUmlConfig();
     const { colorMode } = useColorMode();
+    // The router, not `window.location`: `<Link>` navigations are `history.pushState` calls
+    // that fire no DOM event, so only the router sees every way the hash can change.
+    const routerLocation = useLocation();
     const containerRef = useRef(null);
     const hintId = useId();
     const sourcePanelId = useId();
@@ -67,8 +76,12 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
     const interactive = zoomProp ?? config?.options.zoom ?? true;
     const sourceAvailable = showSourceProp ?? config?.options.showSource ?? true;
     const [state, setState] = useState(INITIAL_STATE);
-    const [inView, setInView] = useState(!lazy);
+    // A diagram deep link must be able to reach a diagram below the fold, so a `#graph?…`
+    // hash defeats lazy rendering. The router's server-side location has no hash, and the
+    // first paint is the placeholder either way, so hydration cannot mismatch.
+    const [inView, setInView] = useState(() => !lazy || parseDiagramHash(routerLocation.hash) !== null);
     const [sourceOpen, setSourceOpen] = useState(false);
+    const [minimapOpen, setMinimapOpen] = useState(false);
     const [copyState, setCopyState] = useState('idle');
     const copyTimer = useRef(undefined);
     // A pending "Copied" message must not fire into an unmounted component.
@@ -106,6 +119,48 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
         // gratuitous jump.
         resetKey: `${source}|${engine}|${resolvedLayout}|${renderDark ? 'dark' : 'light'}`,
     });
+    const search = useDiagramSearch({
+        enabled: interactive && state.status === 'ready',
+        zoom,
+        svg: state.svg,
+    });
+    useDiagramDeeplink({
+        ready: state.status === 'ready' && state.svg !== null,
+        svg: state.svg,
+        interactive,
+        zoom,
+        containerRef,
+    });
+    // A hash arriving *after* mount must defeat lazy rendering too — a deep link followed
+    // from another diagram on the same page may point below the fold. Driven by the router
+    // location rather than `hashchange`, which `<Link>` navigations never fire.
+    useEffect(() => {
+        if (!inView && parseDiagramHash(routerLocation.hash) !== null)
+            setInView(true);
+    }, [inView, routerLocation.hash]);
+    const searchToggleRef = useRef(null);
+    // Escape and the ✕ hand focus back to the toggle, so the keyboard is not left stranded on
+    // a control that just left the page.
+    const closeSearch = useCallback(() => {
+        search.close();
+        searchToggleRef.current?.focus();
+    }, [search]);
+    const onSearchKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (event.shiftKey)
+                search.previous();
+            else
+                search.next();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            // Escape in the search closes the search. Without this, the document-level listener
+            // would also un-maximize the diagram in the same keystroke.
+            event.stopPropagation();
+            closeSearch();
+        }
+    }, [closeSearch, search]);
     useEffect(() => {
         if (!lazy || inView)
             return undefined;
@@ -200,13 +255,20 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
     ]);
     const label = title ?? `${engineName} diagram`;
     const busy = state.status === 'loading' || state.status === 'rendering';
+    /**
+     * One wrapper object per SVG string, not a fresh literal in the JSX: React 19 compares
+     * `dangerouslySetInnerHTML` by the wrapper's identity, not by `__html`, so an inline
+     * literal makes every re-render of the figure re-parse the whole SVG subtree — visibly
+     * so once anything marks the rendered elements, as the search's highlights do.
+     */
+    const svgHtml = useMemo(() => (state.svg === null ? null : { __html: state.svg }), [state.svg]);
     // The sanitized SVG always lives in this element, zoomable or not, so `role="img" > svg`
     // stays a stable contract for tests and for author CSS.
-    const canvas = state.svg !== null && (_jsx("div", { className: !interactive && sourceOpen ? `${styles.canvas} ${styles.hiddenView}` : styles.canvas, role: "img", "aria-label": label, 
+    const canvas = state.svg !== null && svgHtml !== null && (_jsx("div", { className: !interactive && sourceOpen ? `${styles.canvas} ${styles.hiddenView}` : styles.canvas, role: "img", "aria-label": label, 
         // Sanitized above unless `sanitizeSvg: false` was explicitly opted into.
-        dangerouslySetInnerHTML: { __html: state.svg } }));
+        dangerouslySetInnerHTML: svgHtml }));
     const copyControl = sourceAvailable && sourceOpen && state.status === 'ready' && (_jsx("button", { type: "button", className: `${styles.toolbarButton} ${styles.toolbarTextButton}`, "aria-label": `Copy ${engineName} source to clipboard`, onClick: copySource, children: "Copy" }));
-    const sourceToggle = sourceAvailable && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": sourceOpen ? 'Hide diagram source' : 'Show diagram source', "aria-expanded": sourceOpen, "aria-controls": sourcePanelId, onClick: () => setSourceOpen((open) => !open), children: _jsx("span", { "aria-hidden": "true", children: '</>' }) }));
+    const sourceToggle = sourceAvailable && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": sourceOpen ? 'Hide diagram source' : 'Show diagram source', "aria-expanded": sourceOpen, "aria-controls": sourcePanelId, onClick: () => setSourceOpen((open) => !open), children: _jsx(SourceIcon, {}) }));
     /**
      * The source *replaces the diagram in its own frame* rather than appearing beneath it.
      *
@@ -224,7 +286,11 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
         [DATA_ATTR.theme]: dark ? 'dark' : 'light',
         ...(interactive ? { [DATA_ATTR.interactive]: 'true' } : {}),
         ...(zoom.maximized ? { [DATA_ATTR.maximized]: 'true' } : {}),
-        ...(sourceOpen ? { [DATA_ATTR.sourceOpen]: 'true' } : {}), children: [state.status === 'ready' && state.svg !== null && !interactive && canvas, state.status === 'ready' && state.svg !== null && !interactive && sourceView, state.status === 'ready' && state.svg !== null && !interactive && sourceAvailable && (_jsxs("div", { className: styles.plainToolbar, role: "group", "aria-label": `${label} source controls`, children: [sourceToggle, copyControl] })), state.status === 'ready' && state.svg !== null && interactive && (_jsxs("div", { ref: zoom.stageRef, className: zoom.maximized ? `${styles.stage} ${styles.maximized}` : styles.stage, children: [_jsxs("div", { className: styles.stageBody, children: [_jsx("div", { ref: zoom.viewportRef, className: sourceOpen ? `${styles.viewport} ${styles.invisibleView}` : styles.viewport, tabIndex: sourceOpen ? -1 : 0, "aria-describedby": hintId, "aria-keyshortcuts": "Plus Minus 0 ArrowUp ArrowDown ArrowLeft ArrowRight", onKeyDown: zoom.onKeyDown, [DATA_ATTR.zoom]: '1', children: _jsx("div", { ref: zoom.layerRef, className: styles.layer, children: canvas }) }), sourceView] }), _jsxs("div", { className: styles.toolbar, role: "group", "aria-label": `${label} zoom controls`, children: [!sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom out", onClick: zoom.zoomOut, children: _jsx("span", { "aria-hidden": "true", children: "\u2212" }) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom in", onClick: zoom.zoomIn, children: _jsx("span", { "aria-hidden": "true", children: "+" }) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Reset zoom", onClick: zoom.reset, children: _jsx("span", { "aria-hidden": "true", children: "\u27F2" }) })), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Maximize diagram", "aria-pressed": zoom.maximized, onClick: zoom.toggleMaximize, children: _jsx("span", { "aria-hidden": "true", children: zoom.maximized ? '✕' : '⛶' }) }), sourceToggle, copyControl, _jsx("span", { ref: zoom.readoutRef, className: sourceOpen ? `${styles.readout} ${styles.hiddenView}` : styles.readout, "aria-hidden": "true", children: "100%" })] })] })), state.status === 'ready' && state.svg !== null && interactive && (_jsx("p", { id: hintId, className: styles.visuallyHidden, children: "Zoomable diagram. Use the zoom controls, or press plus and minus to zoom, the arrow keys to pan, and zero to reset." })), state.status !== 'ready' && state.status !== 'error' && (
+        ...(sourceOpen ? { [DATA_ATTR.sourceOpen]: 'true' } : {}),
+        ...(minimapOpen ? { [DATA_ATTR.minimapOpen]: 'true' } : {}),
+        ...(search.open ? { [DATA_ATTR.searchOpen]: 'true' } : {}), children: [state.status === 'ready' && state.svg !== null && !interactive && canvas, state.status === 'ready' && state.svg !== null && !interactive && sourceView, state.status === 'ready' && state.svg !== null && !interactive && sourceAvailable && (_jsxs("div", { className: styles.plainToolbar, role: "group", "aria-label": `${label} source controls`, children: [sourceToggle, copyControl] })), state.status === 'ready' && state.svg !== null && interactive && (_jsxs("div", { ref: zoom.stageRef, className: zoom.maximized ? `${styles.stage} ${styles.maximized}` : styles.stage, children: [_jsxs("div", { className: styles.stageBody, children: [_jsx("div", { ref: zoom.viewportRef, className: sourceOpen ? `${styles.viewport} ${styles.invisibleView}` : styles.viewport, tabIndex: sourceOpen ? -1 : 0, "aria-describedby": hintId, "aria-keyshortcuts": "Plus Minus 0 ArrowUp ArrowDown ArrowLeft ArrowRight", onKeyDown: zoom.onKeyDown, [DATA_ATTR.zoom]: '1', children: _jsx("div", { ref: zoom.layerRef, className: styles.layer, children: canvas }) }), sourceView] }), _jsxs("div", { className: styles.controls, children: [search.open && !sourceOpen && (_jsxs("div", { className: styles.searchBar, role: "search", "aria-label": `${label} search`, children: [_jsx("input", { ref: search.inputRef, type: "text", className: styles.searchInput, placeholder: "Search diagram", "aria-label": "Search diagram text", value: search.query, onChange: (event) => search.setQuery(event.target.value), onKeyDown: onSearchKeyDown }), _jsx("span", { className: styles.searchCount, role: "status", children: search.matchCount === 0
+                                            ? '0/0'
+                                            : `${search.currentIndex + 1}/${search.matchCount}` }), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Previous match", onClick: search.previous, children: _jsx(ChevronUpIcon, {}) }), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Next match", onClick: search.next, children: _jsx(ChevronDownIcon, {}) }), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Close search", onClick: closeSearch, children: _jsx(CloseIcon, {}) })] })), _jsxs("div", { className: styles.toolbar, role: "group", "aria-label": `${label} zoom controls`, children: [!sourceOpen && (_jsx("button", { ref: searchToggleRef, type: "button", className: styles.toolbarButton, "aria-label": "Search diagram", "aria-expanded": search.open, onClick: search.toggle, children: _jsx(SearchIcon, {}) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom out", onClick: zoom.zoomOut, children: _jsx(ZoomOutIcon, {}) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom in", onClick: zoom.zoomIn, children: _jsx(ZoomInIcon, {}) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Reset zoom", onClick: zoom.reset, children: _jsx(ResetZoomIcon, {}) })), !sourceOpen && zoom.maximized && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Fit diagram to screen", onClick: zoom.fit, children: _jsx(FitIcon, {}) })), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Maximize diagram", "aria-pressed": zoom.maximized, onClick: zoom.toggleMaximize, children: zoom.maximized ? _jsx(CloseIcon, {}) : _jsx(MaximizeIcon, {}) }), sourceToggle, copyControl, _jsx("span", { ref: zoom.readoutRef, className: sourceOpen ? `${styles.readout} ${styles.hiddenView}` : styles.readout, "aria-hidden": "true", children: "100%" })] })] }), !sourceOpen && minimapOpen && (_jsx(Minimap, { svg: state.svg, zoom: zoom, onClose: () => setMinimapOpen(false) })), !sourceOpen && (_jsx("div", { className: styles.minimapBar, children: _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": minimapOpen ? 'Hide minimap' : 'Show minimap', "aria-expanded": minimapOpen, onClick: () => setMinimapOpen((open) => !open), children: _jsx(MinimapIcon, {}) }) }))] })), state.status === 'ready' && state.svg !== null && interactive && (_jsx("p", { id: hintId, className: styles.visuallyHidden, children: "Zoomable diagram. Use the zoom controls, or press plus and minus to zoom, the arrow keys to pan, and zero to reset." })), state.status !== 'ready' && state.status !== 'error' && (
             // `aria-busy` on the figure already conveys progress; announcing every phase change
             // would make a page with several diagrams unusable with a screen reader.
             _jsxs("div", { className: styles.placeholder, children: [_jsx("span", { className: styles.spinner, "aria-hidden": "true" }), _jsxs("span", { children: [state.status === 'loading' ? `Loading ${engineName} runtime…` : null, state.status === 'rendering' ? `Rendering ${label}…` : null, state.status === 'idle' ? `${label} (waiting to render)` : null] })] })), state.status === 'error' && (_jsxs("div", { className: styles.error, role: "alert", children: [_jsxs("p", { className: styles.errorHeading, children: [_jsx("span", { className: styles.errorIcon, "aria-hidden": "true", children: "\u26A0" }), _jsxs("span", { children: ["Error: ", engineName, " diagram could not be rendered"] })] }), _jsx("pre", { className: styles.errorMessage, children: state.error }), config?.options.showSourceOnError !== false && (_jsxs("details", { className: styles.errorDetails, children: [_jsx("summary", { children: "Show diagram source" }), _jsx("pre", { className: styles.source, children: source })] }))] })), title !== undefined && _jsx("figcaption", { className: styles.caption, children: title }), _jsx("noscript", { dangerouslySetInnerHTML: {

package/dist/theme/PlantUmlDiagram/styles.module.css

@@ -82,6 +82,20 @@
 }
 
 .layer {
+  /*
+   * Shrinks to the rendered picture instead of stretching across the viewport. The zoom
+   * hook measures content through `offsetWidth`/`offsetHeight` — layout sizes, immune to
+   * both the transform and its transition — so this is what makes those measurements mean
+   * "the diagram" rather than "the full-width frame". Fitting (which fills the screen when
+   * maximized) and the minimap both read that measurement.
+   *
+   * `max-width` is load-bearing, not decoration: in intrinsic (`fit-content`) sizing the
+   * SVG's own `max-width: 100%` resolves against an indefinite width and is ignored, so
+   * without this cap a diagram wider than the column would blow the layer out to the SVG's
+   * intrinsic width and overflow the frame.
+   */
+  width: fit-content;
+  max-width: 100%;
   transform-origin: 0 0;
   transition: transform var(--plantuml-zoom-transition, 150ms) ease-out;
 }
@@ -91,10 +105,31 @@
   transition: none;
 }
 
-.toolbar {
+/*
+ * One flex row holds the search bar and the toolbar, so opening the search never needs to
+ * know how wide the toolbar happens to be — it simply takes the space to its left.
+ */
+.controls {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.toolbar {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 0.25rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-background-surface-color);
+  opacity: 0.92;
+}
+
+.searchBar {
   display: flex;
   gap: 0.25rem;
   align-items: center;
@@ -105,6 +140,66 @@
   opacity: 0.92;
 }
 
+.searchInput {
+  width: 10rem;
+  max-width: 40vw;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  /* Not `--ifm-background-color`: Infima defines it as `#0000` in light mode. */
+  background: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
+  font-size: 0.8125rem;
+}
+
+.searchInput:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 1px;
+}
+
+.searchCount {
+  min-width: 2.25rem;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+/*
+ * Search highlights, keyed on the attributes the search hook sets. Attribute + CSS rather
+ * than mutating the SVG string: the string is shared through the render cache, and a
+ * highlight must never leak into another figure showing the same diagram.
+ *
+ * These rules sit after the Graphviz `currentColor` retargeting above and tie on
+ * specificity, so source order is what makes the highlight win there too.
+ */
+.layer .canvas svg text[data-plantuml-search-match] {
+  fill: var(--ifm-color-primary);
+}
+
+.layer .canvas svg text[data-plantuml-search-current] {
+  fill: var(--ifm-color-danger-dark);
+  text-decoration: underline;
+}
+
+/*
+ * The node a `#graph?highlight-node=…` deep link resolved to.
+ *
+ * The attribute may sit on a text line itself, or on the group/anchor wrapping a whole node
+ * (Graphviz `g.node`, a PlantUML self-anchor), so both spellings are styled. Scoped to
+ * `.figure` rather than `.layer`: a diagram that opted out of zoom still highlights, it
+ * just cannot pan.
+ *
+ * Placed after the Graphviz `currentColor` retargeting, whose specificity these tie —
+ * source order is what makes the highlight win there.
+ */
+.figure .canvas svg text[data-plantuml-focused-node],
+.figure .canvas svg [data-plantuml-focused-node] text {
+  fill: var(--ifm-color-danger-dark);
+  text-decoration: underline;
+}
+
 .toolbarButton {
   display: flex;
   align-items: center;
@@ -169,6 +264,80 @@
   max-height: none;
 }
 
+/*
+ * Minimap.
+ *
+ * A small copy of the diagram, bottom-left where the toolbar is top-right, with a rectangle
+ * marking the visible part. The copy is laid out at the content's own width and scaled down
+ * as one block, so it keeps exactly the geometry of the real canvas and the rectangle's
+ * coordinates can be multiplied straight through.
+ */
+.minimapBar {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  display: flex;
+  padding: 0.25rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-background-surface-color);
+  opacity: 0.92;
+}
+
+.minimap {
+  position: absolute;
+  bottom: 3.25rem;
+  left: 0.5rem;
+  /*
+   * The close control sits *beside* the map, not floating over it: a wide, short diagram
+   * makes a map only a couple of buttons tall, and an overlaid control would cover — and
+   * steal presses from — the map's whole right end.
+   */
+  display: flex;
+  gap: 0.25rem;
+  align-items: flex-start;
+  max-width: calc(100% - 1rem);
+  padding: 0.25rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-background-surface-color);
+  opacity: 0.95;
+}
+
+.minimapCanvas {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  cursor: crosshair;
+  /* The map pans the diagram; a drag on it must never scroll the page instead. */
+  touch-action: none;
+}
+
+.minimapLayer {
+  transform-origin: 0 0;
+  /* The map is one press-or-drag surface; its copy of the diagram must not eat the events. */
+  pointer-events: none;
+}
+
+.minimapLayer svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.minimapRect {
+  position: absolute;
+  border: 2px solid var(--ifm-color-primary);
+  background: color-mix(in srgb, var(--ifm-color-primary) 20%, transparent);
+  pointer-events: none;
+}
+
+.minimapClose {
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .visuallyHidden {
   position: absolute;
   width: 1px;
@@ -182,7 +351,10 @@
 }
 
 @media (forced-colors: active) {
-  .toolbar {
+  .toolbar,
+  .searchBar,
+  .minimapBar,
+  .minimap {
     border-color: ButtonBorder;
   }
 
@@ -190,6 +362,12 @@
     border-color: ButtonBorder;
     color: ButtonText;
   }
+
+  /* `color-mix` resolves to nothing useful here; the outline alone must carry the meaning. */
+  .minimapRect {
+    border-color: Highlight;
+    background: transparent;
+  }
 }
 
 .placeholder {