fix(mermaid): open fullscreen at a readable zoom (0.6.1)

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project are documented here. Format loosely
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 track `packages/framework`'s own `package.json`.
 
+## [0.6.1] — 2026-09-27
+
+### Changed
+
+- **Fullscreen diagrams open readable.** When fitting the whole diagram would
+  shrink its labels below ~75% of mermaid's own size (a wide flowchart on a
+  phone, a 30-node graph on a laptop), the fullscreen view now opens zoomed to
+  readable text, centered, with the minimap for orientation. The fit button
+  still shows the whole diagram.
+
 ## [0.6.0] — 2026-09-27
 
 ### Added

packages/framework/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkform/framework",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Standalone Next.js + MDX framework for documentation, API reference (OpenAPI), blog, and changelog sites. The rendering engine behind the inkform docs themes — usable on its own.",
   "license": "MIT",
   "author": "Charan",

packages/framework/src/mermaid/viewer.tsx

@@ -24,6 +24,8 @@ interface ViewerProps {
 const PAD = { inline: 16, fullscreen: 32 };
 const MAX_SCALE = 12;
 const MINIMAP = { width: 184, height: 132 };
+/** Fullscreen never opens with labels smaller than this fraction of mermaid's own size. */
+const READABLE = 0.75;
 
 const isMac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
 const reducedMotion = () =>
@@ -89,8 +91,9 @@ export function DiagramViewer({ svg, mode, label, apiRef, onScale, minimap = fal
       svgEl.setAttribute('width', String(w));
       svgEl.setAttribute('height', String(h));
       if (mode === 'inline') frame.style.height = `${Math.round(h + pad * 2)}px`;
+      return s;
     };
-    fit();
+    let fitScale = fit();
 
     const pz = Panzoom(stage, {
       canvas: true,
@@ -103,6 +106,14 @@ export function DiagramViewer({ svg, mode, label, apiRef, onScale, minimap = fal
     });
     pzRef.current = pz;
 
+    // A wide diagram fitted to a phone screen shrinks its labels to a few
+    // pixels. Fullscreen opens zoomed to readable text instead (centered);
+    // the fit button still shows the whole thing.
+    const openReadable = () => {
+      if (mode === 'fullscreen' && fitScale < READABLE) pz.zoom(READABLE / fitScale, { animate: false, force: true });
+    };
+    openReadable();
+
     // Minimap: visible region of the stage, in stage-local coordinates. The
     // transform is `scale(s) translate(x, y)` about the stage's center, so a
     // frame point q maps back to stage point (q - offset - o) / s - t + o.
@@ -187,9 +198,10 @@ export function DiagramViewer({ svg, mode, label, apiRef, onScale, minimap = fal
       const changed = mode === 'inline' ? w !== lastW : w !== lastW || h !== lastH;
       lastW = w;
       if (!changed) return;
-      fit();
+      fitScale = fit();
       lastH = frame.clientHeight;
       pz.reset({ animate: false });
+      openReadable();
       paintMinimap();
     });
     ro.observe(frame);
@@ -209,7 +221,7 @@ export function DiagramViewer({ svg, mode, label, apiRef, onScale, minimap = fal
     };
     paintMinimapRef.current = paintMinimap;
     centerOnRef.current = centerOn;
-    onScaleRef.current(1);
+    onScaleRef.current(pz.getScale());
     requestAnimationFrame(paintMinimap);
 
     return () => {