jamdesk 1.1.96 → 1.1.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jamdesk",
-  "version": "1.1.96",
+  "version": "1.1.97",
   "description": "CLI for Jamdesk — build, preview, and deploy documentation sites from MDX. Dev server with hot reload, 50+ components, OpenAPI support, AI search, and Mintlify migration",
   "keywords": [
     "jamdesk",

package/vendored/components/mdx/Mermaid.tsx

@@ -1,17 +1,26 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { readCachedHeight } from './mermaidCache';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
 
 // Neutral floor reserved in the SSR markup itself (present on the browser's
 // first paint, before any JS) so a cache miss / pre-hydration window shows
 // correctly-sized empty space instead of a collapse or a grey pulse. Roughly
-// the prior skeleton footprint; refined to the exact diagram height on a
-// cache hit by the layout effect below.
+// the prior skeleton footprint; a cache hit refines it to the exact diagram
+// height pre-paint, and once the diagram renders the floor is released
+// entirely (see the layout effect below).
 const DEFAULT_MERMAID_RESERVE_PX = 192;
 
+// Sentinel: floor released, MermaidInner's own min-height governs the box.
+const FLOOR_RELEASED_PX = 0;
+
+// A rendered diagram (or the error box) is always taller than this; the empty
+// pre-render container is 0px. Distinguishes "content has painted" from "still
+// reserving the gap" so the floor is released only once it is dead weight.
+const RENDERED_FLOOR_RELEASE_PX = 8;
+
 const MermaidInner = dynamic(
   () => import('./MermaidInner').then(mod => ({ default: mod.MermaidInner })),
   { ssr: false, loading: () => null }
@@ -25,21 +34,49 @@ interface MermaidProps {
 }
 
 export function Mermaid({ children, className, minWidth }: MermaidProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
   // Server + first (hydration) render emit the constant default — identical
   // markup, so no hydration mismatch. The sessionStorage read happens only
   // in the post-hydration layout effect, never in this initializer.
   const [reservedPx, setReservedPx] = useState(DEFAULT_MERMAID_RESERVE_PX);
 
-  // Fires once, after the hydration commit, synchronously before that
-  // commit's paint — and BEFORE the MermaidInner chunk has resolved or
-  // injected anything. On a cache hit, refine the reserved space to the
-  // exact diagram height so the SVG paints into already-exact space.
-  // Distinct from the reverted spike: one pre-paint settle before injection,
-  // never a re-render around an already-injected node. minWidth still flows
-  // to MermaidInner unchanged; the wrapper owns height only.
+  // The reserved min-height only bridges the pre-render gap; it must never
+  // outlive the diagram or it leaves dead space under any diagram shorter
+  // than the floor (the cache-miss path never refines it down).
   useIsomorphicLayoutEffect(() => {
-    const h = readCachedHeight(children);
-    if (h > 0) setReservedPx(h);
+    const wrapper = wrapperRef.current;
+
+    // Relies on MermaidInner rendering exactly one HTMLElement root (the
+    // diagram container or the error box); if that contract changes, this
+    // height probe silently targets the wrong node.
+    const releaseIfRendered = (): boolean => {
+      const content = wrapper?.firstElementChild as HTMLElement | null;
+      if (content && content.clientHeight > RENDERED_FLOOR_RELEASE_PX) {
+        setReservedPx(FLOOR_RELEASED_PX);
+        return true;
+      }
+      return false;
+    };
+
+    // Already painted (warm soft-nav: SVG hydrated synchronously from cache) —
+    // the floor is already dead weight, skip the cache refine entirely.
+    if (releaseIfRendered()) return;
+
+    // Not yet painted: cache hit → reserve the exact height pre-paint (zero
+    // shift); cache miss / new diagram → hold the default floor for its gap.
+    const cached = readCachedHeight(children);
+    setReservedPx(cached > 0 ? cached : DEFAULT_MERMAID_RESERVE_PX);
+
+    if (!wrapper || typeof MutationObserver === 'undefined') return;
+    // childList only — no `attributes`: MermaidInner's post-commit style pass
+    // mutates SVG child styles heavily; observing attributes would fire a
+    // callback storm. The SVG-insert is a childList mutation, all we need.
+    const mo = new MutationObserver(() => {
+      if (releaseIfRendered()) mo.disconnect();
+    });
+    mo.observe(wrapper, { childList: true, subtree: true });
+    return () => mo.disconnect();
   }, [children]);
 
   // Stable element identity across reservedPx changes. The pre-paint
@@ -63,7 +100,7 @@ export function Mermaid({ children, className, minWidth }: MermaidProps) {
   );
 
   return (
-    <div data-testid="mermaid-wrapper" style={{ minHeight: reservedPx }}>
+    <div ref={wrapperRef} data-testid="mermaid-wrapper" style={{ minHeight: reservedPx }}>
       {inner}
     </div>
   );