markstream-angular 2.0.7 → 2.0.8

package/dist/index.css

@@ -31,6 +31,8 @@ markstream-angular {
   --ms-inset-panel-y: 0.375rem;
   --ms-gap-header-main: 0.625rem;
   --ms-gap-header-actions: 0.125rem;
+  --ms-size-diagram-min-height: 360px;
+  --ms-size-code-max-height: 500px;
   /* Unified default code surface; explicit editor themes may override it. */
   --code-bg: #fff;
   --code-fg: hsl(0 0% 10%);
@@ -1470,16 +1472,35 @@ body > div[id^="dmermaid-"] {
   line-height: 1.5;
 }
 
+/* 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-angular .d2-render {
+  max-height: var(--ms-size-code-max-height);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.markstream-angular .d2-svg svg,
-.markstream-angular .infographic-render svg {
+.markstream-angular .d2-svg {
+  margin: auto;
+  width: 100%;
+}
+
+.markstream-angular .d2-render .d2-error {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Root svg with class .markstream-d2-root-svg: cap it with the same token as
+   the container so tall diagrams scale down to fit, mirroring the mermaid
+   block's max-height behavior. */
+.markstream-angular .d2-svg svg.markstream-d2-root-svg {
+  width: 100%;
   max-width: 100%;
   height: auto;
+  max-height: var(--ms-d2-render-max-height, var(--ms-size-code-max-height));
   display: block;
-  margin: 0 auto;
 }
 
 .markstream-angular .mode-btn {
@@ -1514,8 +1535,23 @@ body > div[id^="dmermaid-"] {
 .markstream-angular .infographic-render {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: var(--ms-size-diagram-min-height);
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Keep the diagram fully visible and centered like the mermaid block: scale
+   down proportionally inside the preview area. Scoped to the preview host so
+   the fullscreen modal (.fullscreen host) keeps its own sizing. The column
+   flex container with margin:auto children stays centered while remaining
+   scroll-safe when content overflows. */
+.markstream-angular .infographic-render svg {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  margin: auto;
 }
 
 .markstream-angular .infographic-pending-source {

package/dist/index.d.ts

@@ -446,7 +446,7 @@ declare class D2BlockNodeComponent implements AfterViewInit, OnChanges, OnDestro
     get resolvedShowExportButton(): boolean;
     get resolvedShowCollapseButton(): boolean;
     get resolvedShowTooltips(): boolean;
-    get resolvedMaxHeight(): string;
+    get resolvedRenderStyle(): string;
     get resolvedLoading(): boolean;
     get resolvedProgressiveRender(): boolean;
     ngAfterViewInit(): void;
@@ -645,6 +645,13 @@ declare class InfographicBlockNodeComponent implements AfterViewInit, OnChanges,
     get resolvedShowTooltips(): boolean;
     get resolvedMaxHeight(): string;
     get estimatedPreviewHeightPx(): number;
+    /**
+     * Resolve the diagram preview minimum height from the density CSS token
+     * (--ms-size-diagram-min-height), falling back to the built-in default.
+     * Mirrors MermaidBlockNode's resolveDiagramMinHeight; SSR falls back to the
+     * constant because getComputedStyle is browser-only.
+     */
+    private resolveDiagramMinHeight;
     get resolvedContainerMinHeight(): string;
     private get maxPreviewHeight();
     private resolveContainerMinHeight;
@@ -848,6 +855,13 @@ declare class MermaidBlockNodeComponent implements AfterViewInit, OnChanges, OnD
     get resolvedShowTooltips(): boolean;
     get resolvedMaxHeight(): string;
     get estimatedPreviewHeightPx(): number;
+    /**
+     * Resolve the diagram preview minimum height from the density CSS token
+     * (--ms-size-diagram-min-height), falling back to the built-in default.
+     * Mirrors the vue3 renderer's resolveMinContainerHeight; SSR falls back to
+     * the constant because getComputedStyle is browser-only.
+     */
+    private resolveDiagramMinHeight;
     private get maxPreviewHeight();
     get resolvedWorkerTimeout(): number;
     get resolvedParseTimeout(): number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-angular",
   "type": "module",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Angular 20+ standalone streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, stream-diffs powered code blocks, and safe Angular component rendering.",
   "author": "Simon He",
   "license": "MIT",
@@ -94,8 +94,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "stream-markdown-parser": "1.2.13",
-    "markstream-core": "2.0.7"
+    "markstream-core": "2.0.8",
+    "stream-markdown-parser": "1.2.14"
   },
   "devDependencies": {
     "@angular/common": "^20.3.26",