markstream-svelte 2.0.6 → 2.0.8

package/dist/components/D2BlockNode.svelte

@@ -47,7 +47,7 @@
   let {
     node,
     context = undefined,
-    maxHeight = '500px',
+    maxHeight = undefined,
     loading = undefined,
     isDark = undefined,
     themeId = undefined,
@@ -80,7 +80,12 @@
   let resolvedIsDark = $derived(isDark ?? context?.isDark ?? false)
   let shouldRender = $derived(!(resolvedLoading && !source.trim()))
   let showSourceFallback = $derived(showSource || !svgMarkup)
-  let renderStyle = $derived(maxHeight && maxHeight !== 'none' ? `max-height: ${maxHeight}` : '')
+  // Expose the same cap to the stylesheet (via --ms-d2-render-max-height)
+  // so the root svg can scale down proportionally to the container's
+  // max-height; see the .d2-svg svg rule in index.css.
+  let renderStyle = $derived(maxHeight
+    ? `max-height: ${maxHeight}; --ms-d2-render-max-height: ${maxHeight}`
+    : '')
 
   onMount(() => {
     mounted = true

package/dist/components/InfographicBlockNode.svelte

@@ -5,7 +5,7 @@
   import { getInfographic } from '../optional/infographic'
   import { toSafeSvgMarkup } from '../sanitizeSvg'
   import { hideTooltip, showTooltipForAnchor } from '../tooltip/singletonTooltip'
-  import { clampPreviewHeight, estimateInfographicPreviewHeight, parsePositiveNumber } from './shared/diagram-height'
+  import { clampPreviewHeight, estimateInfographicPreviewHeight, INFOGRAPHIC_PREVIEW_MIN_HEIGHT, parsePositiveNumber, resolveDiagramMinPreviewHeight } from './shared/diagram-height'
   import { clearElement, copyTextToClipboard, downloadSvgMarkup } from './shared/rich-block-helpers'
   import { getString } from './shared/node-helpers'
 
@@ -45,6 +45,7 @@
   const infographicIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="#5b8ff9" d="M5 4.25A2.25 2.25 0 0 1 7.25 2h2.5A2.25 2.25 0 0 1 12 4.25v2.5A2.25 2.25 0 0 1 9.75 9h-2.5A2.25 2.25 0 0 1 5 6.75z"/><path fill="#61d9a6" d="M12 17.25A2.25 2.25 0 0 1 14.25 15h2.5A2.25 2.25 0 0 1 19 17.25v2.5A2.25 2.25 0 0 1 16.75 22h-2.5A2.25 2.25 0 0 1 12 19.75z"/><path fill="#f6bd16" d="M12 4.25A2.25 2.25 0 0 1 14.25 2h2.5A2.25 2.25 0 0 1 19 4.25v2.5A2.25 2.25 0 0 1 16.75 9h-2.5A2.25 2.25 0 0 1 12 6.75z"/><path fill="#5ad8a6" d="M7.5 10.75h1.75a6.25 6.25 0 0 1 6.25 6.25v.25h-2V17a4.25 4.25 0 0 0-4.25-4.25H7.5z"/><path fill="#7262fd" d="M15.5 11.1l3.75 2.16v4.33l-3.75 2.16l-3.75-2.16v-4.33z"/></svg>'
 
   let renderHost: HTMLDivElement | null = $state(null)
+  let blockHost: HTMLElement | null = $state(null)
   let mounted = $state(false)
   let renderToken = $state(0)
   let lastCompletedRenderSignature = $state('')
@@ -75,7 +76,7 @@
   let maxPreviewHeight = $derived(maxHeight === 'none' ? null : parsePositiveNumber(maxHeight))
   let previewHeight = $derived(clampPreviewHeight(
     parsePositiveNumber(estimatedPreviewHeightPx) ?? estimateInfographicPreviewHeight(source),
-    320,
+    resolveDiagramMinPreviewHeight(blockHost, INFOGRAPHIC_PREVIEW_MIN_HEIGHT),
     maxPreviewHeight ?? undefined,
   ))
   let previewStyle = $derived([
@@ -379,6 +380,7 @@
 
 {#if shouldRender}
   <div
+    bind:this={blockHost}
     class:dark={resolvedIsDark}
     class:is-rendering={rendering || resolvedLoading}
     class="markstream-svelte-enhanced-block markstream-svelte-enhanced-block--infographic"

package/dist/components/MermaidBlockNode.svelte

@@ -7,7 +7,7 @@
   import { hideTooltip, showTooltipForAnchor, type TooltipPlacement } from '../tooltip/singletonTooltip'
   import { getLanguageIcon } from '../utils/languageIcon'
   import { canParseOffthread, findPrefixOffthread } from '../workers/mermaidWorkerClient'
-  import { clampPreviewHeight, estimateMermaidPreviewHeight, getMermaidDiagramKind, parsePositiveNumber } from './shared/diagram-height'
+  import { clampPreviewHeight, estimateMermaidPreviewHeight, getMermaidDiagramKind, MERMAID_PREVIEW_MIN_HEIGHT, parsePositiveNumber, resolveDiagramMinPreviewHeight } from './shared/diagram-height'
   import { copyTextToClipboard, downloadSvgMarkup } from './shared/rich-block-helpers'
   import { getString } from './shared/node-helpers'
 
@@ -77,6 +77,7 @@
   let showSource = $state(false)
   let modalOpen = $state(false)
   let zoom = $state(1)
+  let blockHost: HTMLElement | null = $state(null)
   let previewHost: HTMLElement | null = $state(null)
   let modalHost: HTMLElement | null = $state(null)
   let renderTimer: ReturnType<typeof setTimeout> | null = $state(null)
@@ -93,7 +94,7 @@
   let maxPreviewHeight = $derived(maxHeight === 'none' ? null : parsePositiveNumber(maxHeight))
   let previewHeight = $derived(clampPreviewHeight(
     parsePositiveNumber(estimatedPreviewHeightPx) ?? estimateMermaidPreviewHeight(source),
-    undefined,
+    resolveDiagramMinPreviewHeight(blockHost, MERMAID_PREVIEW_MIN_HEIGHT),
     maxPreviewHeight ?? undefined,
   ))
   let previewStyle = $derived([
@@ -496,6 +497,7 @@
 
 {#if shouldRender}
   <div
+    bind:this={blockHost}
     class:dark={resolvedIsDark}
     class:is-rendering={resolvedLoading || rendering}
     class="mermaid-block"

package/dist/components/shared/diagram-height.d.ts

@@ -7,3 +7,10 @@ export declare function getMermaidDiagramKind(code: string): string;
 export declare function estimateMermaidPreviewHeight(code: string): number;
 export declare function estimateInfographicPreviewHeight(code: string): number;
 export declare function clampPreviewHeight(height: number, minHeight?: number, maxHeight?: number | null): number;
+/**
+ * Resolve the diagram preview minimum height from the CSS token
+ * (`--ms-size-diagram-min-height`), falling back to the provided default.
+ * SSR-safe: without a mounted container (Svelte SSR) the token is unreadable,
+ * so the fallback applies instead.
+ */
+export declare function resolveDiagramMinPreviewHeight(container: HTMLElement | null | undefined, fallback: number): number;

package/dist/components/shared/diagram-height.js

@@ -50,3 +50,16 @@ export function clampPreviewHeight(height, minHeight = MERMAID_PREVIEW_MIN_HEIGH
         ? Math.max(minHeight, height)
         : Math.min(Math.max(minHeight, height), maxHeight);
 }
+/**
+ * Resolve the diagram preview minimum height from the CSS token
+ * (`--ms-size-diagram-min-height`), falling back to the provided default.
+ * SSR-safe: without a mounted container (Svelte SSR) the token is unreadable,
+ * so the fallback applies instead.
+ */
+export function resolveDiagramMinPreviewHeight(container, fallback) {
+    var _a;
+    const raw = container
+        ? getComputedStyle(container).getPropertyValue('--ms-size-diagram-min-height').trim()
+        : '';
+    return (_a = parsePositiveNumber(raw)) !== null && _a !== void 0 ? _a : fallback;
+}

package/dist/index.css

@@ -67,6 +67,7 @@ markstream-svelte {
   --ms-flow-diagram-y: 1.5em;
   --ms-size-image-max-width: 24rem;
   --ms-size-diagram-min-height: 360px;
+  --ms-size-code-max-height: 500px;
   --ms-duration-standard: 180ms;
   --ms-duration-fast: 120ms;
   --ms-duration-emphasis: 220ms;
@@ -2119,17 +2120,37 @@ body > div[id^="dmermaid-"] {
   white-space: inherit;
 }
 
+/* Center the rendered diagram like the mermaid/infographic blocks: a
+   column flex container with margin:auto children stays centered while
+   remaining scroll-safe when content overflows. */
 .markstream-svelte .d2-render {
   max-height: var(--ms-size-code-max-height);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.markstream-svelte .d2-svg svg,
-.markstream-svelte .infographic-render svg {
+/* margin: auto (not justify-content: center) keeps overflow scrolling safe. */
+.markstream-svelte .d2-svg {
+  margin: auto;
+  width: 100%;
+}
+
+.markstream-svelte .d2-render .d2-error {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.markstream-svelte .d2-svg svg.markstream-d2-root-svg {
+  width: 100%;
   max-width: 100%;
   height: auto;
+  /* Match the container cap so tall diagrams scale down to fit, mirroring
+     the mermaid block's max-height behavior. The inline maxHeight prop
+     exposes its value as --ms-d2-render-max-height so the svg cap always
+     tracks the effective container cap. The fallback is the shared token. */
+  max-height: var(--ms-d2-render-max-height, var(--ms-size-code-max-height));
   display: block;
-  margin: 0 auto;
 }
 
 .markstream-svelte .d2-error {
@@ -2140,7 +2161,7 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-render {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: var(--ms-size-diagram-min-height);
   overflow: auto;
   text-align: center;
 }
@@ -2154,6 +2175,25 @@ body > div[id^="dmermaid-"] {
   text-align: left;
 }
 
+/* The render host mirrors the mermaid/vue diagram layers: an inset-0
+   layer with a definite height (the inline min-height estimate on
+   .infographic-render) that flex-centers the rendered diagram. */
 .markstream-svelte .infographic-render > div {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 120ms ease;
 }
+
+/* Keep the diagram fully visible and centered like the mermaid block:
+   scale down proportionally inside the preview area. Scoped to the
+   preview container only; the fullscreen modal clone (portaled to body
+   without this wrapper) keeps its own sizing. */
+.markstream-svelte .infographic-render svg {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}

package/dist/index.px.css

@@ -67,6 +67,7 @@ markstream-svelte {
   --ms-flow-diagram-y: 1.5em;
   --ms-size-image-max-width: 384px;
   --ms-size-diagram-min-height: 360px;
+  --ms-size-code-max-height: 500px;
   --ms-duration-standard: 180ms;
   --ms-duration-fast: 120ms;
   --ms-duration-emphasis: 220ms;
@@ -2119,17 +2120,37 @@ body > div[id^="dmermaid-"] {
   white-space: inherit;
 }
 
+/* Center the rendered diagram like the mermaid/infographic blocks: a
+   column flex container with margin:auto children stays centered while
+   remaining scroll-safe when content overflows. */
 .markstream-svelte .d2-render {
   max-height: var(--ms-size-code-max-height);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.markstream-svelte .d2-svg svg,
-.markstream-svelte .infographic-render svg {
+/* margin: auto (not justify-content: center) keeps overflow scrolling safe. */
+.markstream-svelte .d2-svg {
+  margin: auto;
+  width: 100%;
+}
+
+.markstream-svelte .d2-render .d2-error {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.markstream-svelte .d2-svg svg.markstream-d2-root-svg {
+  width: 100%;
   max-width: 100%;
   height: auto;
+  /* Match the container cap so tall diagrams scale down to fit, mirroring
+     the mermaid block's max-height behavior. The inline maxHeight prop
+     exposes its value as --ms-d2-render-max-height so the svg cap always
+     tracks the effective container cap. The fallback is the shared token. */
+  max-height: var(--ms-d2-render-max-height, var(--ms-size-code-max-height));
   display: block;
-  margin: 0 auto;
 }
 
 .markstream-svelte .d2-error {
@@ -2140,7 +2161,7 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-render {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: var(--ms-size-diagram-min-height);
   overflow: auto;
   text-align: center;
 }
@@ -2154,6 +2175,25 @@ body > div[id^="dmermaid-"] {
   text-align: left;
 }
 
+/* The render host mirrors the mermaid/vue diagram layers: an inset-0
+   layer with a definite height (the inline min-height estimate on
+   .infographic-render) that flex-centers the rendered diagram. */
 .markstream-svelte .infographic-render > div {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 120ms ease;
 }
+
+/* Keep the diagram fully visible and centered like the mermaid block:
+   scale down proportionally inside the preview area. Scoped to the
+   preview container only; the fullscreen modal clone (portaled to body
+   without this wrapper) keeps its own sizing. */
+.markstream-svelte .infographic-render svg {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}

package/dist/index.tailwind.css

@@ -67,6 +67,7 @@ markstream-svelte {
   --ms-flow-diagram-y: 1.5em;
   --ms-size-image-max-width: 24rem;
   --ms-size-diagram-min-height: 360px;
+  --ms-size-code-max-height: 500px;
   --ms-duration-standard: 180ms;
   --ms-duration-fast: 120ms;
   --ms-duration-emphasis: 220ms;
@@ -2119,17 +2120,37 @@ body > div[id^="dmermaid-"] {
   white-space: inherit;
 }
 
+/* Center the rendered diagram like the mermaid/infographic blocks: a
+   column flex container with margin:auto children stays centered while
+   remaining scroll-safe when content overflows. */
 .markstream-svelte .d2-render {
   max-height: var(--ms-size-code-max-height);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.markstream-svelte .d2-svg svg,
-.markstream-svelte .infographic-render svg {
+/* margin: auto (not justify-content: center) keeps overflow scrolling safe. */
+.markstream-svelte .d2-svg {
+  margin: auto;
+  width: 100%;
+}
+
+.markstream-svelte .d2-render .d2-error {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.markstream-svelte .d2-svg svg.markstream-d2-root-svg {
+  width: 100%;
   max-width: 100%;
   height: auto;
+  /* Match the container cap so tall diagrams scale down to fit, mirroring
+     the mermaid block's max-height behavior. The inline maxHeight prop
+     exposes its value as --ms-d2-render-max-height so the svg cap always
+     tracks the effective container cap. The fallback is the shared token. */
+  max-height: var(--ms-d2-render-max-height, var(--ms-size-code-max-height));
   display: block;
-  margin: 0 auto;
 }
 
 .markstream-svelte .d2-error {
@@ -2140,7 +2161,7 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-render {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: var(--ms-size-diagram-min-height);
   overflow: auto;
   text-align: center;
 }
@@ -2154,6 +2175,25 @@ body > div[id^="dmermaid-"] {
   text-align: left;
 }
 
+/* The render host mirrors the mermaid/vue diagram layers: an inset-0
+   layer with a definite height (the inline min-height estimate on
+   .infographic-render) that flex-centers the rendered diagram. */
 .markstream-svelte .infographic-render > div {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 120ms ease;
 }
+
+/* Keep the diagram fully visible and centered like the mermaid block:
+   scale down proportionally inside the preview area. Scoped to the
+   preview container only; the fullscreen modal clone (portaled to body
+   without this wrapper) keeps its own sizing. */
+.markstream-svelte .infographic-render svg {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-svelte",
   "type": "module",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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.6",
-    "stream-markdown-parser": "1.2.12"
+    "markstream-core": "2.0.8",
+    "stream-markdown-parser": "1.2.14"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",