@matfsw/docusaurus-plantuml-plugin 1.5.2 → 1.6.1

package/CHANGELOG.md

@@ -7,6 +7,69 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.6.1] - 2026-08-21
+
+### Fixed
+
+- **A diagram that fits can now be dragged around the space beside it.** The viewport has always
+  shown a grab cursor, but content that fitted was pinned at the origin, so on anything short of
+  a magnified diagram the cursor promised something that did not happen. It was most obvious
+  maximized: a modest diagram is fitted into the top-left corner of the screen with room to
+  spare, and none of that room could be used.
+
+  `clampTransform` now bounds each axis by the empty space beside the picture,
+  `viewport - content × scale`, instead of pinning content that fits at the origin. The diagram
+  moves through that space and no further, so it can never leave the viewport, and a magnified
+  one still cannot be dragged until an edge comes inside it. Axes stay independent, so a wide,
+  short diagram pans sideways while moving only through what little vertical room it has, and
+  **Reset** puts everything back.
+
+  Note that *fitting* makes one axis flush with the screen by construction, so a freshly
+  maximized diagram slides only along the other one. Zoom out a step and it moves both ways.
+
+- **Dragging no longer marks the diagram's text.** `pointerdown` cannot `preventDefault()`
+  without breaking focus, links and double-click, so the browser anchored a text selection on
+  the first press — before the 3px drag threshold could tell a drag from a click. The labels
+  flashed blue for the whole gesture, a drag past the frame kept extending the selection across
+  the page, and it could not be cleared by clicking, because the click that ends a drag is the
+  one the component swallows so a drag over a link does not follow it.
+
+  The canvas inside a zoom viewport is now `user-select: none`, which removes the anchor rather
+  than trying to undo its effects. The text stays reachable where it is actually read: the `</>`
+  source view with Copy, the diagram search, and the browser's find-in-page. A diagram with
+  `zoom=false` is not a drag surface and is untouched; a site that wants the selection back can
+  say `[data-plantuml-diagram] svg {user-select: text}`.
+
+## [1.6.0] - 2026-08-21
+
+### Fixed
+
+- **The zoom controls no longer cover the diagram.** The toolbar was painted over the frame's
+  top-right corner and the minimap toggle over its bottom-left, so at 100% — the view a reader
+  arrives at without touching anything — a sequence diagram's first participant and a graph's
+  leftmost node were sitting underneath a row of buttons. No placement fixes that, because the
+  picture is whatever shape its author drew.
+
+  A zoomable diagram is now two stacked rows: every control in one row (search bar included),
+  and the diagram beneath it. Nothing is painted over the picture at any zoom level; the frame
+  is one button-bar row taller than before, which is the price of never covering the content.
+  The control row is also the frame's **first** child in the DOM, so tab order follows what the
+  reader sees. Maximizing uses the same two rows.
+
+  The **minimap toggle has moved into the toolbar**, beside Maximize; it no longer has a row of
+  its own beneath the diagram. The toolbar wraps rather than overflowing a narrow column. The
+  minimap _panel_ still opens over the diagram's bottom-left corner — the reader opens it
+  deliberately, closes it from its own ✕, and putting it opposite the toolbar keeps the control
+  from covering the map. The source view's header no longer reserves a 12rem gutter for a
+  toolbar that is no longer above it.
+
+  Released as a **minor** rather than the patch these headings would normally derive: the
+  rendered markup changed shape. The minimap's own bar element is gone, its toggle is a button
+  inside the existing control group, and that group is now the frame's first child rather than
+  its last. Site CSS or tests that reached for those positions need updating; the documented
+  selectors — `[data-plantuml-diagram]`, `div[role="img"] > svg`, `[data-plantuml-zoom]` and the
+  control group's accessible name — are all unchanged.
+
 ## [1.5.2] - 2026-08-20
 
 ### Changed
@@ -540,7 +603,9 @@ Initial release.
   opt-out.
 - Plugin option validation that rejects unknown keys and out-of-range values at build time.
 
-[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.5.2...HEAD
+[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.6.1...HEAD
+[1.6.1]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.6.0...v1.6.1
+[1.6.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.5.2...v1.6.0
 [1.5.2]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.5.1...v1.5.2
 [1.5.1]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.5.0...v1.5.1
 [1.5.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.4.0...v1.5.0

package/README.md

@@ -525,7 +525,24 @@ diagram, whichever engine produced it.
 ## Zoom and pan
 
 Large diagrams are unreadable at column width. Rendered diagrams are therefore zoomable and
-pannable by default, with a small control toolbar in the top-right corner.
+pannable by default, with a small control toolbar above the picture.
+
+### The frame's layout
+
+A zoomable diagram is two stacked rows: **the controls**, at the top right, and **the diagram**
+beneath them. The search bar opens beside the toolbar, in the same row, and the toolbar wraps
+rather than overflowing a narrow column.
+
+Nothing is painted over the picture, so at 100% — the view a reader arrives at — the whole
+diagram is visible. The controls used to float over the frame's corners, which is exactly where
+a sequence diagram draws its first participant and a graph its leftmost node; no amount of
+nudging fixes that, because the picture is whatever shape its author drew. The row costs the
+height of one small button bar per diagram, which is the price of never covering the content.
+
+Zooming in can still slide the diagram under the row's edge — the viewport clips it there — and
+that is deliberate: by then the reader is driving, and a frame that grew as you zoomed would
+reflow the page around it. The **minimap**, once opened, does float over the picture's
+bottom-left corner: the reader asked for it, and it closes with its own ✕.
 
 ### Interaction
 
@@ -533,7 +550,7 @@ pannable by default, with a small control toolbar in the top-right corner.
 | ----------------------------------- | -------------------------------------------------------------- |
 | Plain scroll wheel                  | Scrolls the page. Never intercepted.                           |
 | **Ctrl** + wheel, or trackpad pinch | Zooms about the pointer                                        |
-| Drag                                | Pans, once zoomed in                                           |
+| Drag                                | Moves the diagram, at any zoom level                           |
 | One finger on a touchscreen         | Scrolls the page                                               |
 | Two-finger pinch on a touchscreen   | The browser's own page zoom                                    |
 | Toolbar buttons                     | Zoom out, zoom in, reset, maximize — plus fit, while maximized |
@@ -564,11 +581,32 @@ working, and `Tab` always moves on — the diagram is never a keyboard trap.
 
 The toolbar buttons and the keyboard zoom about the **top-left corner** of the viewport, while
 the wheel zooms about the **pointer**. That difference is deliberate: a diagram rarely fills its
-viewport, and one that fits is left-aligned, so the empty space sits to its right and below.
+viewport, and one that fits opens at the origin, so the empty space sits to its right and below.
 Zooming about the centre would scale that empty space and push the diagram off the top and left
 edges — most visibly when maximized. Anchoring at the top-left grows the diagram into the empty
 space instead and keeps it visible as long as possible.
 
+### Moving the diagram
+
+Dragging moves the diagram **whatever the zoom level** — including a small one, and including a
+diagram that fits its frame whole. Maximize a modest diagram and it is fitted into a corner of
+the screen with room to spare; that space is now yours to move it into, rather than a grab
+cursor that did nothing.
+
+Text inside a zoomable diagram is **not selectable**, because the same box is the drag surface:
+the browser anchors a selection on the first press, before a drag can be told apart from a
+click, so dragging used to paint the labels blue and leave them that way. The text is still
+reachable everywhere it is actually read — the `</>` source view with its Copy button, the
+diagram search, and the browser's find-in-page. A diagram with `zoom=false` is not a drag
+surface and stays selectable, and a site that wants the selection back everywhere can say
+`[data-plantuml-diagram] svg {user-select: text}`.
+
+The rule in both directions is that the diagram stays reachable: it can never be dragged so far
+that an edge comes inside the viewport, and never so far that it leaves the viewport altogether.
+Where there is no room — a picture exactly as wide as its frame — it does not budge on that axis,
+so a wide, short diagram still pans sideways while staying put vertically. The arrow keys move it
+the same way, and **Reset** puts it back where it opened.
+
 Scale is limited to 0.25×–8×, and the view resets to 100% whenever the diagram source or the
 site colour mode changes.
 
@@ -587,10 +625,12 @@ highlight without touching the plugin.
 
 ### Minimap
 
-The button in the bottom-left corner opens a minimap: a small copy of the diagram with a
-rectangle marking what the viewport currently shows. Press or drag anywhere on the map to
-centre the view there — a single press works as "jump there". The map follows every zoom,
-pan and resize, works while maximized, and closes from its own ✕ or the toggle.
+The minimap button in the toolbar opens a minimap: a small copy of the diagram with a
+rectangle marking what the viewport currently shows. It appears in the diagram's bottom-left
+corner — the opposite one from the toolbar, so the control that opens it never covers it.
+Press or drag anywhere on the map to centre the view there — a single press works as "jump
+there". The map follows every zoom, pan and resize, works while maximized, and closes from its
+own ✕ or the toggle.
 
 The map is pointer-only and hidden from assistive technology on purpose: the real viewport is
 already keyboard-operable with the arrow keys, so announcing a second, duplicated view of the
@@ -635,6 +675,8 @@ would mean most readers never discover it. The costs are real and worth knowing:
 
 - Each zoomable diagram adds a **keyboard tab stop for the viewport and one per toolbar
   button**. On a page with six diagrams that is a meaningful amount of tabbing.
+- The frame is **one button-bar row taller** than the picture, because the controls sit above it
+  rather than over it — see [The frame's layout](#the-frames-layout).
 - The rendered markup gains a viewport and transform wrapper around the `role="img"` container.
   Site CSS that targets `[data-plantuml-diagram] > div[role="img"]` as a **direct child** needs
   updating — see [Accessibility](#accessibility) for both shapes.

package/dist/theme/PlantUmlDiagram/index.js

@@ -296,9 +296,9 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
         ...(zoom.maximized ? { [DATA_ATTR.maximized]: 'true' } : {}),
         ...(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
+        ...(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.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' && (
+                                            : `${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, {}) }), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": minimapOpen ? 'Hide minimap' : 'Show minimap', "aria-expanded": minimapOpen, onClick: () => setMinimapOpen((open) => !open), children: _jsx(MinimapIcon, {}) })), sourceToggle, copyControl, _jsx("span", { ref: zoom.readoutRef, className: sourceOpen ? `${styles.readout} ${styles.hiddenView}` : styles.readout, "aria-hidden": "true", children: "100%" })] })] }), _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 }) }), !sourceOpen && minimapOpen && (_jsx(Minimap, { svg: state.svg, zoom: zoom, onClose: () => setMinimapOpen(false) })), sourceView] })] })), 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

@@ -52,8 +52,26 @@
  * the figure keeps the exact height it has at 100% no matter how far the reader zooms in, and
  * `max-width: 100%` on the SVG keeps constraining the base size as it always did.
  */
+
+/*
+ * The frame is two stacked rows — controls, then picture — not one box with chrome floating
+ * over it.
+ *
+ * Floating it covered the diagram: the toolbar sat over the top right of every figure and the
+ * minimap toggle over the bottom left, and at 100% — the view every reader arrives at — that
+ * is exactly where a sequence diagram's first participant and a graph's leftmost node are
+ * drawn. No amount of nudging fixes that, because the picture is whatever shape its author
+ * drew. A row above the picture means the opening view has nothing painted over it at all.
+ * Zooming can still slide content under the row's edge, which is fine: by then the reader is
+ * driving, and the alternative is a frame that grows as you zoom.
+ *
+ * `position: relative` stays for the maximized overlay's sake, not for the controls.
+ */
 .stage {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .viewport {
@@ -72,13 +90,30 @@
 
 .viewport[data-plantuml-dragging='true'] {
   cursor: grabbing;
-  user-select: none;
 }
 
-/* Inside the viewport the SVG must not be clipped by the old scroll container. */
+/*
+ * Inside the viewport the SVG must not be clipped by the old scroll container — and its text
+ * is not selectable, because this box is a drag surface.
+ *
+ * Pressing on SVG text used to anchor a native selection: `pointerdown` deliberately does not
+ * `preventDefault()`, so that focus, links and double-click keep working, which means the
+ * browser starts selecting before the 3px drag threshold has been crossed. Marking the box
+ * unselectable once dragging began was too late — the anchor already existed, the labels
+ * flashed blue for the whole gesture, a drag past the edge kept extending the selection into
+ * the page, and the click that would normally collapse it is the very click a drag swallows.
+ * Removing the anchor removes all of that at once.
+ *
+ * The text stays reachable everywhere it was actually read: the `</>` source view (with Copy),
+ * this component's own search, and the browser's find-in-page, none of which need a selection.
+ * A diagram with `zoom=false` is not a drag surface and is left alone. A site that wants the
+ * old behaviour can say `[data-plantuml-diagram] svg {user-select: text}` — an attribute
+ * selector, so no hashed class name is needed.
+ */
 .viewport .canvas {
   display: block;
   overflow: visible;
+  user-select: none;
 }
 
 .layer {
@@ -108,25 +143,32 @@
 /*
  * 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.
+ *
+ * `flex-end` keeps the toolbar where readers have always found it, at the top right of the
+ * frame — now above the picture rather than on top of it.
  */
 .controls {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
   display: flex;
+  /*
+   * Wrapping, in both directions, because the row is the only thing holding the controls now:
+   * in a narrow column the search bar drops below the toolbar rather than squeezing it, and
+   * the toolbar itself breaks across lines rather than overflowing the frame.
+   */
+  flex-wrap: wrap;
   gap: 0.5rem;
   align-items: flex-start;
+  justify-content: flex-end;
 }
 
 .toolbar {
   display: flex;
+  flex-wrap: wrap;
   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 {
@@ -137,7 +179,6 @@
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: var(--ifm-global-radius);
   background: var(--ifm-background-surface-color);
-  opacity: 0.92;
 }
 
 .searchInput {
@@ -275,9 +316,8 @@
   position: fixed;
   inset: 0;
   z-index: var(--ifm-z-index-overlay, 400);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* Keeps the control rows off the screen's edges; `inset: 0` fixes the border box either way. */
+  padding: 0.5rem;
   /*
    * `--ifm-background-surface-color`, not `--ifm-background-color`: Infima defines the latter
    * as `#0000` in light mode, so the overlay would be transparent and the page would show
@@ -288,35 +328,49 @@
   background: var(--ifm-background-surface-color, #ffffff);
 }
 
+/*
+ * The picture takes every pixel the two control rows leave. `min-height: 0` is what allows
+ * that: a flex item's floor is its content, so without it a tall diagram would push the
+ * minimap row off the bottom of the screen instead of being clipped by its own viewport.
+ *
+ * The viewport itself needs no size: it is the lone item in `.stageBody`'s grid cell, so it
+ * stretches to whatever the row is given — 100vw/100dvh here would ignore the padding and
+ * the rows and overflow the overlay by exactly their height.
+ */
+.maximized .stageBody {
+  flex: 1;
+  min-height: 0;
+  /*
+   * The row must take the height it is *given*, not the height the picture wants. A grid
+   * track sized `auto` floors at max-content, so a diagram taller than the screen sized the
+   * row past the frame and the viewport painted straight over the minimap row below it —
+   * and, worse, `fitScale` then measured that overflowing viewport and concluded the diagram
+   * already fitted. `minmax(0, 1fr)` removes the floor, so the track is exactly the free
+   * height and the viewport clips the picture as it does everywhere else.
+   */
+  grid-template-rows: minmax(0, 1fr);
+}
+
 .maximized .viewport {
-  width: 100vw;
-  height: 100dvh;
   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.
+ * A small copy of the diagram 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.
+ *
+ * It floats over the picture's bottom-left corner — it is a child of `.stageBody`, so that is
+ * the box it is anchored in, and it is the one control positioned that way. A control the
+ * reader has explicitly opened may cover the picture; the toolbar, which is simply always
+ * there, may not. The corner is deliberately the opposite one from the toolbar that opens it:
+ * a map painted under its own control would be half hidden by it.
  */
-.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;
+  bottom: 0.5rem;
   left: 0.5rem;
   /*
    * The close control sits *beside* the map, not floating over it: a wide, short diagram
@@ -383,7 +437,6 @@
 @media (forced-colors: active) {
   .toolbar,
   .searchBar,
-  .minimapBar,
   .minimap {
     border-color: ButtonBorder;
   }
@@ -563,8 +616,8 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
-  /* Clears the toolbar, which floats over the top-right of the same frame. */
-  padding: 0.5rem 12rem 0.25rem 0.75rem;
+  /* No clearance needed: the toolbar has a row above the frame, not a corner inside it. */
+  padding: 0.5rem 0.75rem 0.25rem;
 }
 
 .sourceViewTitle {

package/dist/theme/PlantUmlDiagram/useZoomPan.js

@@ -27,9 +27,9 @@ export function useZoomPan({ enabled, resetKey }) {
      * Layout sizes, never `getBoundingClientRect()`: the layer's rect includes the transform we
      * are about to change — and, mid-easing, the transition — which would feed back into the
      * next measurement. The layer is `width: fit-content`, so its layout size *is* the rendered
-     * picture's, not the full-width frame's; that is what lets fitting fill a maximized screen
-     * and keeps the minimap honest about where the diagram ends. The clamp deliberately runs
-     * against wider bounds — see {@link clampBounds}.
+     * picture's, not the full-width frame's; that is what lets fitting fill a maximized screen,
+     * keeps the minimap honest about where the diagram ends, and tells the clamp how much empty
+     * space a fitted diagram may be dragged into.
      */
     const measure = useCallback(() => {
         const viewport = viewportRef.current;
@@ -41,20 +41,6 @@ export function useZoomPan({ enabled, resetKey }) {
             contentHeight: layer?.offsetHeight ?? 0,
         };
     }, []);
-    /**
-     * The bounds the clamp runs against: the picture or the viewport, whichever is *wider*.
-     *
-     * Fitting wants the true picture size; the clamp deliberately does not. Focal zoom must
-     * hold the point under the pointer even when that slides the picture's right edge inside
-     * the viewport — clamping to the picture itself yanks the diagram sideways mid-gesture the
-     * moment that edge is reached. Flooring the width at the viewport's restores exactly the
-     * geometry the full-width layer always gave. Height is not floored: the layer never
-     * stretched vertically, so the height clamp has always run against the real picture.
-     */
-    const clampBounds = useCallback(() => {
-        const bounds = measure();
-        return { ...bounds, contentWidth: Math.max(bounds.contentWidth, bounds.viewportWidth) };
-    }, [measure]);
     const write = useCallback((next) => {
         transformRef.current = next;
         const layer = layerRef.current;
@@ -76,20 +62,26 @@ export function useZoomPan({ enabled, resetKey }) {
         };
     }, []);
     const getTransform = useCallback(() => transformRef.current, []);
+    /**
+     * Every gesture ends here, so the clamp is the single place that decides where a diagram may
+     * sit. It is handed the measured picture: the floor that keeps focal zoom honest lives inside
+     * {@link clampTransform}, applied to that end of the range only, so the other end can offer a
+     * fitted diagram the real empty space beside it.
+     */
     const apply = useCallback((next) => {
-        write(clampTransform(next, clampBounds()));
-    }, [clampBounds, write]);
+        write(clampTransform(next, measure()));
+    }, [measure, write]);
     const reset = useCallback(() => {
         apply(IDENTITY);
     }, [apply]);
     /**
      * Zooms about the viewport's top-left corner.
      *
-     * Not the centre: a diagram rarely fills its viewport, and a diagram that fits is
-     * left-aligned, so the empty space sits to its right and below. Zooming about the centre
-     * scales that empty space too and pushes the diagram off the top and left edges — most
-     * visibly when maximized. Anchoring at the top-left leaves a left-aligned diagram exactly
-     * where it is and grows it into the empty space, keeping it visible as long as possible.
+     * Not the centre: a diagram rarely fills its viewport, and one that fits opens at the origin,
+     * so the empty space sits to its right and below. Zooming about the centre scales that empty
+     * space too and pushes the diagram off the top and left edges — most visibly when maximized.
+     * Anchoring at the top-left leaves the diagram exactly where it is and grows it into the
+     * empty space, keeping it visible as long as possible.
      *
      * Wheel zoom still tracks the pointer, which is what direct manipulation should do.
      */
@@ -104,8 +96,8 @@ export function useZoomPan({ enabled, resetKey }) {
      *
      * Only offered while maximized. Inline it would duplicate Reset, because the inline frame
      * grows with the diagram — at 100% everything is already visible, so there is nothing for
-     * a fit to add. Translation returns to the origin because a diagram that fits is
-     * left-aligned, exactly as `clampTransform` would force anyway.
+     * a fit to add. Translation returns to the origin: fitting is "show me all of it from the
+     * top", and the reader can drag it wherever they like from there.
      */
     const fit = useCallback(() => {
         apply({ ...IDENTITY, k: fitScale(measure()) });

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

@@ -42,12 +42,18 @@ export declare function clamp(value: number, min: number, max: number): number;
 export declare function zoomAbout(transform: Transform, factor: number, focalX: number, focalY: number, min?: number, max?: number): Transform;
 export declare function panBy(transform: Transform, dx: number, dy: number): Transform;
 /**
- * Keeps the diagram reachable: an edge can never be dragged inside the viewport, and content
- * that fits is left-aligned — matching the `justify-content: flex-start` behaviour diagrams
- * had before they became zoomable.
+ * Keeps the diagram reachable, in both directions, one axis at a time.
  *
- * The axes are clamped independently, so a wide, short diagram pans horizontally while staying
- * pinned vertically.
+ * The two ends of the range answer different questions, and are deliberately measured against
+ * different things — see {@link clampAxis}. Forwards, the limit is the *empty space* beside the
+ * picture: a diagram that fits can be moved through it but never out of the viewport. Content
+ * that fits used to be pinned at `0` outright, which left the reader with a grab cursor that
+ * moved nothing — most obviously while maximized, where a fitted diagram sits in a corner of a
+ * screen with room to spare. Backwards, the limit keeps a magnified diagram from being dragged
+ * until an edge comes inside the viewport.
+ *
+ * The axes are clamped independently, so a wide, short diagram pans horizontally while moving
+ * only through the little vertical space it has.
  */
 export declare function clampTransform(transform: Transform, bounds: Bounds): Transform;
 /**

package/dist/theme/PlantUmlDiagram/zoomMath.js

@@ -39,23 +39,45 @@ export function panBy(transform, dx, dy) {
     return { k: transform.k, x: transform.x + dx, y: transform.y + dy };
 }
 /**
- * Keeps the diagram reachable: an edge can never be dragged inside the viewport, and content
- * that fits is left-aligned — matching the `justify-content: flex-start` behaviour diagrams
- * had before they became zoomable.
+ * Keeps the diagram reachable, in both directions, one axis at a time.
  *
- * The axes are clamped independently, so a wide, short diagram pans horizontally while staying
- * pinned vertically.
+ * The two ends of the range answer different questions, and are deliberately measured against
+ * different things — see {@link clampAxis}. Forwards, the limit is the *empty space* beside the
+ * picture: a diagram that fits can be moved through it but never out of the viewport. Content
+ * that fits used to be pinned at `0` outright, which left the reader with a grab cursor that
+ * moved nothing — most obviously while maximized, where a fitted diagram sits in a corner of a
+ * screen with room to spare. Backwards, the limit keeps a magnified diagram from being dragged
+ * until an edge comes inside the viewport.
+ *
+ * The axes are clamped independently, so a wide, short diagram pans horizontally while moving
+ * only through the little vertical space it has.
  */
 export function clampTransform(transform, bounds) {
-    const scaledWidth = bounds.contentWidth * transform.k;
-    const scaledHeight = bounds.contentHeight * transform.k;
-    const x = scaledWidth <= bounds.viewportWidth
-        ? 0
-        : clamp(transform.x, bounds.viewportWidth - scaledWidth, 0);
-    const y = scaledHeight <= bounds.viewportHeight
-        ? 0
-        : clamp(transform.y, bounds.viewportHeight - scaledHeight, 0);
-    return { k: transform.k, x, y };
+    return {
+        k: transform.k,
+        x: clampAxis(transform.x, bounds.viewportWidth, bounds.contentWidth, transform.k),
+        y: clampAxis(transform.y, bounds.viewportHeight, bounds.contentHeight, transform.k),
+    };
+}
+/**
+ * One axis of the clamp.
+ *
+ * **Forwards** (positive translation) the picture may travel exactly as far as the empty space
+ * beside it, `viewport - content * k`, and no further — so it never leaves the viewport. Once
+ * the content overflows there is no empty space and the limit is `0`.
+ *
+ * **Backwards** the content size is floored at the viewport's *before* scaling. That looks odd
+ * until you zoom: focal zoom must hold the point under the pointer, and a picture narrower than
+ * its frame reaches a scale where it overflows while the pointer is still asking it to travel
+ * further left than a flush right edge allows. Clamping to the picture there yanks it sideways
+ * mid-gesture. The floor buys that fidelity for the price of some empty space at the right
+ * while zoomed, which is the trade this component has always made — it is only the *forward*
+ * limit, above, that had to stop being measured this way for a fitted diagram to move at all.
+ */
+function clampAxis(value, viewport, content, k) {
+    const forward = Math.max(0, viewport - content * k);
+    const backward = Math.min(0, viewport - Math.max(content, viewport) * k);
+    return clamp(value, backward, forward);
 }
 /** `WheelEvent.deltaMode` constants, which jsdom does not define. */
 const DELTA_PIXEL = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matfsw/docusaurus-plantuml-plugin",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "Render PlantUML diagrams in Docusaurus 3 entirely in the browser - no Java, no PlantUML server, no CDN.",
   "keywords": [
     "docusaurus",