diff --git a/CHANGELOG.md b/CHANGELOG.md index 2529a46..d855e73 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 575aadc..6bf6434 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8292,7 +8292,7 @@ }, "packages/framework": { "name": "@inkform/framework", - "version": "0.6.0", + "version": "0.6.1", "license": "MIT", "dependencies": { "@ai-sdk/anthropic": "^4.0.16", diff --git a/packages/framework/package.json b/packages/framework/package.json index 9a51d37..02a550a 100644 --- a/packages/framework/package.json +++ b/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", diff --git a/packages/framework/src/mermaid/viewer.tsx b/packages/framework/src/mermaid/viewer.tsx index e76aab5..fb699be 100644 --- a/packages/framework/src/mermaid/viewer.tsx +++ b/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 () => {