markstream-svelte 2.0.14 → 2.0.16

package/dist/components/CodeBlockNode.svelte

@@ -137,6 +137,8 @@
   let lifecycleId = $state(0)
   let heightSyncRaf: number | null = $state(null)
   let heightSyncDisposables: Array<{ dispose?: () => void } | (() => void)> = $state([])
+  let editorSurfaceResizeObserver: ResizeObserver | null = $state(null)
+  let editorSurfaceResizeTarget: HTMLElement | null = $state(null)
   let lastLayoutWidth: number | null = $state(null)
   let lastLayoutHeight: number | null = $state(null)
   let lastThemeRequest = $state('')
@@ -706,6 +708,10 @@ ${configuredUnsafeCSS}`.trim(),
   function nextAnimationFrame() {
     if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
       return Promise.resolve()
+    // Animation frames never run in hidden tabs; fall back to a timer so the
+    // editor handoff loop cannot stall indefinitely while the page is hidden.
+    if (typeof document !== 'undefined' && document.visibilityState === 'hidden')
+      return new Promise<void>(resolve => setTimeout(() => resolve(), 0))
     return new Promise<void>(resolve => window.requestAnimationFrame(() => resolve()))
   }
 
@@ -843,6 +849,39 @@ ${configuredUnsafeCSS}`.trim(),
     catch {}
   }
 
+  function bindEditorSurfaceResizeSync() {
+    if (typeof ResizeObserver === 'undefined' || !editorHost)
+      return
+    const surface = getVisualEditorSurface()
+    if (editorSurfaceResizeObserver && surface === editorSurfaceResizeTarget)
+      return
+    unbindEditorSurfaceResizeSync()
+    if (!surface)
+      return
+    // The diff surface re-renders at a different height when unchanged regions
+    // collapse/expand and when a settled stream replaces the partial layout.
+    // Those changes do not always surface through the editor events bound
+    // above, so observe the rendered surface and re-sync the host height when
+    // the rendered height no longer matches the host.
+    editorSurfaceResizeObserver = new ResizeObserver(() => {
+      if (!editorHost || collapsed)
+        return
+      const renderedHeight = measureRenderedDiffHeight(editorHost)
+      const hostHeight = Math.ceil(editorHost.getBoundingClientRect().height || 0)
+      if (renderedHeight == null || Math.abs(renderedHeight - hostHeight) <= 1)
+        return
+      scheduleEditorHeightSync()
+    })
+    editorSurfaceResizeObserver.observe(surface)
+    editorSurfaceResizeTarget = surface
+  }
+
+  function unbindEditorSurfaceResizeSync() {
+    editorSurfaceResizeObserver?.disconnect()
+    editorSurfaceResizeObserver = null
+    editorSurfaceResizeTarget = null
+  }
+
   function bindEditorHeightSync() {
     clearEditorHeightSyncBindings()
     const bind = (source: any, eventName: 'onDidContentSizeChange' | 'onDidLayoutChange') => {
@@ -871,6 +910,7 @@ ${configuredUnsafeCSS}`.trim(),
       bind(modifiedEditor, 'onDidContentSizeChange')
       bind(originalEditor, 'onDidLayoutChange')
       bind(modifiedEditor, 'onDidLayoutChange')
+      bindEditorSurfaceResizeSync()
       return
     }
 
@@ -880,6 +920,7 @@ ${configuredUnsafeCSS}`.trim(),
   }
 
   function clearEditorHeightSyncBindings() {
+    unbindEditorSurfaceResizeSync()
     for (const disposable of heightSyncDisposables) {
       try {
         if (typeof disposable === 'function')
@@ -911,22 +952,33 @@ ${configuredUnsafeCSS}`.trim(),
     editorHost.style.height = `${nextHeight}px`
     editorHost.style.minHeight = `${nextHeight}px`
     editorHost.style.maxHeight = expanded || !Number.isFinite(maxHeight) ? 'none' : `${Math.ceil(maxHeight)}px`
-    editorHost.style.overflow = diff ? 'hidden' : (contentHeight > nextHeight ? 'auto' : 'hidden')
+    editorHost.style.overflow = contentHeight > nextHeight ? 'auto' : 'hidden'
     layoutEditor(nextHeight)
+    if (diff)
+      bindEditorSurfaceResizeSync()
   }
 
   function getEditorHostMinHeight() {
     if (!editorHost || typeof window === 'undefined')
       return 0
-    const values = [
-      window.getComputedStyle(editorHost.parentElement || editorHost).minHeight,
-      window.getComputedStyle(editorHost).minHeight,
-    ]
-    for (const value of values) {
-      const parsed = Number.parseFloat(value)
-      if (Number.isFinite(parsed) && parsed > 0)
-        return Math.ceil(parsed)
-    }
+    // A consumer-configured min-height on the body element is a real floor.
+    const parentMinHeight = window.getComputedStyle(editorHost.parentElement || editorHost).minHeight
+    const parsedParentMinHeight = Number.parseFloat(parentMinHeight)
+    if (Number.isFinite(parsedParentMinHeight) && parsedParentMinHeight > 0)
+      return Math.ceil(parsedParentMinHeight)
+    // `syncEditorHostHeight` writes the host's inline min-height, so reading the
+    // computed value back would pin the host at its largest historical height
+    // and stop the container from shrinking when the diff surface collapses
+    // unchanged regions. Temporarily drop the inline value so the computed
+    // min-height reflects only a consumer/CSS-configured floor.
+    const inlineMinHeight = editorHost.style.minHeight
+    if (inlineMinHeight)
+      editorHost.style.minHeight = ''
+    const configuredMinHeight = Number.parseFloat(window.getComputedStyle(editorHost).minHeight)
+    if (inlineMinHeight)
+      editorHost.style.minHeight = inlineMinHeight
+    if (Number.isFinite(configuredMinHeight) && configuredMinHeight > 0)
+      return Math.ceil(configuredMinHeight)
     return 0
   }
 
@@ -1101,7 +1153,7 @@ ${configuredUnsafeCSS}`.trim(),
         {#if !shouldDelayEditor}
           <div bind:this={editorHost} class:is-hidden={!editorRevealed} class="code-editor-container"></div>
         {/if}
-        <div class:is-hidden={fallbackRetired} class="code-editor-fallback-surface">
+        <div class:is-retired={fallbackRetired} class="code-editor-fallback-surface">
           <PreCodeNode
             class="code-pre-fallback"
             enhanceable={false}

package/dist/components/D2BlockNode.svelte

@@ -5,6 +5,7 @@
   import { getD2 } from '../optional/d2'
   import { extractRenderedSvg, toSafeSvgMarkup } from '../sanitizeSvg'
   import { hideTooltip, showTooltipForAnchor } from '../tooltip/singletonTooltip'
+  import { createD2RenderSalt } from '../utils/d2RenderSalt'
   import { copyTextToClipboard, downloadSvgMarkup } from './shared/rich-block-helpers'
   import { getString } from './shared/node-helpers'
 
@@ -153,6 +154,7 @@
         }
       }
 
+      renderOptions.salt = renderOptions.salt ?? createD2RenderSalt()
       const rendered = await instance.render(diagram, renderOptions)
       if (!mounted || token !== renderToken)
         return

package/dist/components/FootnoteAnchorNode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { SvelteRenderableNode } from './shared/node-helpers'
   import { getString } from './shared/node-helpers'
+  import { findFootnoteElement } from '../utils/footnoteTarget'
 
   interface Props {
     node: SvelteRenderableNode
@@ -15,7 +16,7 @@
     event.preventDefault()
     if (typeof document === 'undefined' || !id)
       return
-    const target = document.getElementById(`fnref-${id}`)
+    const target = findFootnoteElement(event.currentTarget, `fnref-${id}`)
     target?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }
 </script>

package/dist/components/FootnoteReferenceNode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { SvelteRenderableNode } from './shared/node-helpers'
   import { getString } from './shared/node-helpers'
+  import { findFootnoteElement } from '../utils/footnoteTarget'
 
   interface Props {
     node: SvelteRenderableNode
@@ -16,7 +17,7 @@
     event.preventDefault()
     if (typeof document === 'undefined' || !id)
       return
-    const target = document.querySelector(href || '')
+    const target = findFootnoteElement(event.currentTarget, `fnref--${id}`)
     target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 </script>

package/dist/components/MermaidBlockNode.svelte

@@ -7,6 +7,7 @@
   import { getMermaid } from '../optional/mermaid'
   import { hideTooltip, showTooltipForAnchor, type TooltipPlacement } from '../tooltip/singletonTooltip'
   import { getLanguageIcon } from '../utils/languageIcon'
+  import { createMermaidRenderId } from '../utils/mermaidRenderId'
   import { canParseOffthread, findPrefixOffthread } from '../workers/mermaidWorkerClient'
   import { clampPreviewHeight, estimateMermaidPreviewHeight, getMermaidDiagramKind, MERMAID_PREVIEW_MIN_HEIGHT, parsePositiveNumber, resolveDiagramMinPreviewHeight } from './shared/diagram-height'
   import { copyTextToClipboard, downloadSvgMarkup } from './shared/rich-block-helpers'
@@ -257,7 +258,7 @@
       }
 
       const rendered = await withTimeout(
-        () => Promise.resolve(mermaid.render(`markstream-svelte-mermaid-${token}`, applyMermaidThemeTo(renderSource, theme))),
+        () => Promise.resolve(mermaid.render(createMermaidRenderId(), applyMermaidThemeTo(renderSource, theme))),
         fullRender ? fullRenderTimeoutMs : renderTimeoutMs,
       )
       if (!mounted || token !== renderToken)
@@ -315,7 +316,7 @@
       await withTimeout(() => Promise.resolve(mermaid.parse(themedSource)), parseTimeoutMs)
       return true
     }
-    await withTimeout(() => Promise.resolve(mermaid.render(`markstream-svelte-mermaid-parse-${renderToken}`, themedSource)), parseTimeoutMs)
+    await withTimeout(() => Promise.resolve(mermaid.render(createMermaidRenderId('markstream-svelte-mermaid-parse'), themedSource)), parseTimeoutMs)
     return true
   }
 

package/dist/components/NodeRenderer.svelte

@@ -340,12 +340,17 @@
     }
 
     const requestIdle = typeof window !== 'undefined' ? (window as any).requestIdleCallback as ((callback: (deadline: { timeRemaining?: () => number }) => void, options?: { timeout?: number }) => number) | undefined : undefined
-    if (requestIdle) {
+    // Idle callbacks and animation frames never run in hidden tabs, which
+    // would freeze batch rendering until the page becomes visible again. Fall
+    // back to a timer so background rendering keeps progressing (the browser
+    // clamps hidden-tab timers, trading pace for progress).
+    const documentHidden = typeof document !== 'undefined' && document.visibilityState === 'hidden'
+    if (requestIdle && !documentHidden) {
       renderBatchIdle = requestIdle(run, { timeout: Math.max(0, Number(renderBatchIdleTimeoutMs) || 120) })
       return
     }
 
-    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function' && !documentHidden) {
       renderBatchFrame = window.requestAnimationFrame(() => {
         renderBatchFrame = null
         if (delay > 0)

package/dist/enhanceRenderedHtml.js

@@ -6,10 +6,11 @@ import { getMermaid } from './optional/mermaid';
 import { getStreamDiffsRuntime } from './optional/streamDiffs';
 import { extractRenderedSvg, toSafeSvgMarkup } from './sanitizeSvg';
 import { hideTooltip, showTooltipForAnchor } from './tooltip/singletonTooltip';
+import { createD2RenderSalt } from './utils/d2RenderSalt';
+import { createMermaidRenderId } from './utils/mermaidRenderId';
 import { normalizeKaTeXRenderInput } from './utils/normalizeKaTeXRenderInput';
 import { renderKaTeXWithBackpressure, setKaTeXCache, WORKER_BUSY_CODE } from './workers/katexWorkerClient';
 import { canParseOffthread, findPrefixOffthread } from './workers/mermaidWorkerClient';
-let mermaidRenderId = 0;
 const rootHandles = new WeakMap();
 const DARK_THEME_OVERRIDES = {
     N1: '#E5E7EB',
@@ -262,7 +263,7 @@ async function renderMermaid(root, cleanupFns, options, isActive) {
                     sourceToRender = prefix;
                 }
             }
-            const renderId = `markstream-svelte-mermaid-${++mermaidRenderId}`;
+            const renderId = createMermaidRenderId();
             const rendered = await withTimeout(() => Promise.resolve(mermaid.render(renderId, applyMermaidThemeTo(sourceToRender, theme))), options.final === false
                 ? Number((_d = (_c = options.mermaidProps) === null || _c === void 0 ? void 0 : _c.renderTimeoutMs) !== null && _d !== void 0 ? _d : 2500)
                 : Number((_f = (_e = options.mermaidProps) === null || _e === void 0 ? void 0 : _e.fullRenderTimeoutMs) !== null && _f !== void 0 ? _f : 4000));
@@ -318,7 +319,7 @@ async function canParseMermaidWithFallback(source, theme, mermaid, options) {
         await withTimeout(() => Promise.resolve(mermaid.parse(themedSource)), parseTimeout);
         return true;
     }
-    const renderId = `markstream-svelte-mermaid-parse-${++mermaidRenderId}`;
+    const renderId = createMermaidRenderId('markstream-svelte-mermaid-parse');
     await withTimeout(() => Promise.resolve(mermaid.render(renderId, themedSource)), parseTimeout);
     return true;
 }
@@ -436,7 +437,7 @@ async function renderInfographic(root, cleanupFns, options, isActive) {
     }
 }
 async function renderD2(root, cleanupFns, options, isActive) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const D2Ctor = await getD2();
     if (!D2Ctor || !isActive())
         return;
@@ -477,6 +478,7 @@ async function renderD2(root, cleanupFns, options, isActive) {
                     ...(baseOverrides || {}),
                 };
             }
+            renderOptions.salt = (_g = renderOptions.salt) !== null && _g !== void 0 ? _g : createD2RenderSalt();
             const renderResult = await instance.render(diagram, renderOptions);
             if (!isActive())
                 return;
@@ -721,6 +723,12 @@ function normalizeVisibleCodeText(value) {
 async function waitForRenderFrame() {
     if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
         return;
+    // Animation frames never run in hidden tabs; resolve on a timer so block
+    // enhancement keeps progressing while the page is in the background.
+    if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+        await new Promise(resolve => setTimeout(resolve, 0));
+        return;
+    }
     await new Promise(resolve => window.requestAnimationFrame(() => resolve()));
 }
 function decodeDataPayload(value) {

package/dist/index.css

@@ -1665,9 +1665,11 @@ body > div[id^="dmermaid-"] {
   background: var(--markstream-code-fallback-bg, var(--code-bg));
 }
 
-.markstream-svelte .code-editor-fallback-surface.is-hidden {
-  visibility: hidden;
-  pointer-events: none;
+/* Once the enhanced editor owns the grid row, the retired fallback must leave
+   layout entirely: visibility-only hiding keeps the row at the fallback's
+   (uncollapsed) height, so collapsed diffs reserve space they no longer use. */
+.markstream-svelte .code-editor-fallback-surface.is-retired {
+  display: none;
 }
 
 .code-block-body--expanded {

package/dist/index.px.css

@@ -1665,9 +1665,11 @@ body > div[id^="dmermaid-"] {
   background: var(--markstream-code-fallback-bg, var(--code-bg));
 }
 
-.markstream-svelte .code-editor-fallback-surface.is-hidden {
-  visibility: hidden;
-  pointer-events: none;
+/* Once the enhanced editor owns the grid row, the retired fallback must leave
+   layout entirely: visibility-only hiding keeps the row at the fallback's
+   (uncollapsed) height, so collapsed diffs reserve space they no longer use. */
+.markstream-svelte .code-editor-fallback-surface.is-retired {
+  display: none;
 }
 
 .code-block-body--expanded {

package/dist/index.tailwind.css

@@ -1665,9 +1665,11 @@ body > div[id^="dmermaid-"] {
   background: var(--markstream-code-fallback-bg, var(--code-bg));
 }
 
-.markstream-svelte .code-editor-fallback-surface.is-hidden {
-  visibility: hidden;
-  pointer-events: none;
+/* Once the enhanced editor owns the grid row, the retired fallback must leave
+   layout entirely: visibility-only hiding keeps the row at the fallback's
+   (uncollapsed) height, so collapsed diffs reserve space they no longer use. */
+.markstream-svelte .code-editor-fallback-surface.is-retired {
+  display: none;
 }
 
 .code-block-body--expanded {

package/dist/utils/d2RenderSalt.d.ts

@@ -0,0 +1 @@
+export declare function createD2RenderSalt(prefix?: string): string;

package/dist/utils/d2RenderSalt.js

@@ -0,0 +1,13 @@
+// D2 derives the ids and style-scope classes of its SVG output from a hash of the
+// diagram source, so two identical diagrams would otherwise emit duplicate
+// `id`/`url(#…)` targets and two document-level `.d2-<hash>` style scopes — one
+// of them then wins and the diagrams get each other's colours. D2 exposes
+// `RenderOptions.salt` for exactly this case ("useful when generating multiple
+// identical diagrams to be included in the same HTML doc"). Every render takes a
+// fresh salt from this module-scoped counter, which the block component and
+// `enhanceRenderedHtml` share, so both render paths stay unique on one page.
+let d2RenderSaltSequence = 0;
+export function createD2RenderSalt(prefix = 'markstream-svelte-d2') {
+    d2RenderSaltSequence += 1;
+    return `${prefix}-${d2RenderSaltSequence}`;
+}

package/dist/utils/footnoteTarget.d.ts

@@ -0,0 +1 @@
+export declare function findFootnoteElement(source: EventTarget | null | undefined, id: string): Element | null;

package/dist/utils/footnoteTarget.js

@@ -0,0 +1,21 @@
+// Footnote ids are derived from the markdown label (`fnref-<label>` / `fnref--<label>`), so the
+// same id can exist in several renderer trees on one page. Resolve the target inside the tree the
+// clicked element belongs to, and only fall back to the document when that tree has no match.
+const RENDERER_ROOT_SELECTOR = '.markdown-renderer';
+function toIdSelector(id) {
+    return `[id="${id.replace(/["\\]/g, '\\$&')}"]`;
+}
+export function findFootnoteElement(source, id) {
+    var _a, _b;
+    if (typeof document === 'undefined' || typeof Element === 'undefined')
+        return null;
+    const selector = toIdSelector(id);
+    let scope = source instanceof Element ? source.closest(RENDERER_ROOT_SELECTOR) : null;
+    while (scope) {
+        const found = scope.querySelector(selector);
+        if (found)
+            return found;
+        scope = (_b = (_a = scope.parentElement) === null || _a === void 0 ? void 0 : _a.closest(RENDERER_ROOT_SELECTOR)) !== null && _b !== void 0 ? _b : null;
+    }
+    return document.querySelector(selector);
+}

package/dist/utils/mermaidRenderId.d.ts

@@ -0,0 +1 @@
+export declare function createMermaidRenderId(prefix?: string): string;

package/dist/utils/mermaidRenderId.js

@@ -0,0 +1,13 @@
+// Mermaid keys both its temporary render container (`#d<id>`) and the produced
+// `<svg id>` by the id handed to `mermaid.render`, then resolves that id again
+// when it binds interactions. The id therefore has to be unique across every
+// diagram on the page — not just within one block instance: an instance-local
+// counter made two blocks render as `markstream-svelte-mermaid-1`, which left
+// one of the previews blank (issue #775). This module-scoped counter is shared
+// by the block component and `enhanceRenderedHtml`, so both render paths stay
+// collision-free on the same page.
+let mermaidRenderSequence = 0;
+export function createMermaidRenderId(prefix = 'markstream-svelte-mermaid') {
+    mermaidRenderSequence += 1;
+    return `${prefix}-${mermaidRenderSequence}`;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-svelte",
   "type": "module",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "Svelte 5 and SvelteKit streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, stream-diffs powered code blocks, and custom Svelte components.",
   "author": "Simon He",
   "license": "MIT",
@@ -100,8 +100,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "markstream-core": "2.0.14",
-    "stream-markdown-parser": "1.2.17"
+    "markstream-core": "2.0.16",
+    "stream-markdown-parser": "1.2.18"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
@@ -120,6 +120,7 @@
     "dev": "vite dev",
     "preview": "vite preview",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run --config vitest.config.ts",
     "check:core-published": "node ../../scripts/check-core-published.mjs --package-json package.json --core-package-json ../markstream-core/package.json",
     "check:workspace-deps-published": "node ../../scripts/check-workspace-deps-published.mjs --package-json package.json",
     "release": "pnpm run check:workspace-deps-published && bumpp --all --commit --no-tag --no-push --execute 'pnpm --workspace-root run docs:llms:generate' && DIST_TAG=\"$(node ../../scripts/dist-tag.mjs)\" && pnpm publish --access public --tag \"${DIST_TAG}\" && node ../../scripts/tag-package.mjs --package-json package.json --push"