markstream-angular 2.0.12 → 2.0.13

package/dist/index.css

@@ -875,9 +875,14 @@ body > div[id^="dmermaid-"] {
   color: #bfdbfe;
 }
 
+/* The pan transform is applied to `.mermaid-preview` itself, and a transformed
+   element paints above the header it overlaps; the body is what clips the panned
+   diagram back into the preview area. clip (not auto/hidden) means it is not a
+   scroll container at all, so a touch swipe keeps scrolling the page. */
 .markstream-angular .mermaid-body {
   position: relative;
   padding: 1rem;
+  overflow: clip;
 }
 
 .markstream-angular .mermaid-preview {
@@ -1536,7 +1541,9 @@ body > div[id^="dmermaid-"] {
   position: relative;
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto — a scrollable pan surface latches touch swipes and stops
+     the page from scrolling at fit zoom; clip is never a scroll container. */
+  overflow: clip;
   display: flex;
   flex-direction: column;
 }
@@ -1554,6 +1561,14 @@ body > div[id^="dmermaid-"] {
   margin: auto;
 }
 
+/* The pan transform is applied to .infographic-render itself, so the body is
+   what clips the panned diagram back into the preview area. clip (not the base
+   __body's auto) so it is not a scroll container a swipe could latch on — with
+   maxHeight the auto body has a hidden scroll range that eats the gesture. */
+.markstream-angular .markstream-angular-enhanced-block--infographic .markstream-angular-enhanced-block__body {
+  overflow: clip;
+}
+
 .markstream-angular .infographic-pending-source {
   position: absolute;
   inset: 0;

package/dist/index.d.ts

@@ -612,6 +612,9 @@ declare class InfographicBlockNodeComponent implements AfterViewInit, OnChanges,
     showSource: boolean;
     modalOpen: boolean;
     zoom: number;
+    translateX: number;
+    translateY: number;
+    isDragging: boolean;
     error: string;
     containerMinHeight: string;
     svgMarkup: string;
@@ -621,6 +624,7 @@ declare class InfographicBlockNodeComponent implements AfterViewInit, OnChanges,
     private renderScheduled;
     private copyTimer;
     private infographicInstance;
+    private readonly panGesture;
     get mergedProps(): {
         [x: string]: any;
         maxHeight?: string | null;
@@ -657,7 +661,23 @@ declare class InfographicBlockNodeComponent implements AfterViewInit, OnChanges,
     private resolveContainerMinHeight;
     get resolvedLoading(): boolean;
     get resolvedProgressiveRender(): boolean;
+    /**
+     * The diagram is scaled to fit the preview box, so at fit zoom nothing is
+     * off-screen and panning only shifts it inside the box. Touch therefore keeps
+     * scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+     * the gesture once the diagram is zoomed in and actually overflows the box.
+     * The fullscreen modal always claims it: the surface fills the viewport, panning
+     * is the intended gesture there, and the page behind it is locked anyway.
+     */
+    get panSurfaceClaimsTouch(): boolean;
+    get previewTransform(): string;
     get modalTransform(): string;
+    /**
+     * Whether a pan surface holds a rendered diagram. The modal renders its own
+     * copy of the SVG, so it is checked as well: the source panel may have taken
+     * the inline preview's place while the modal is open.
+     */
+    private hasDiagramSvg;
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
@@ -671,6 +691,7 @@ declare class InfographicBlockNodeComponent implements AfterViewInit, OnChanges,
     toggleCollapsed(): void;
     adjustZoom(delta: number): void;
     resetZoom(): void;
+    onPanStart(event: PointerEvent): void;
     private scheduleInfographicRender;
     private renderInfographic;
     private destroyInfographic;
@@ -817,6 +838,9 @@ declare class MermaidBlockNodeComponent implements AfterViewInit, OnChanges, OnD
     showSource: boolean;
     modalOpen: boolean;
     zoom: number;
+    translateX: number;
+    translateY: number;
+    isDragging: boolean;
     svgMarkup: string;
     error: string;
     private viewReady;
@@ -824,6 +848,7 @@ declare class MermaidBlockNodeComponent implements AfterViewInit, OnChanges, OnD
     private renderToken;
     private copyTimer;
     private lastMermaidBindFunctions;
+    private readonly panGesture;
     get mergedProps(): {
         [x: string]: any;
         maxHeight?: string | null;
@@ -870,8 +895,23 @@ declare class MermaidBlockNodeComponent implements AfterViewInit, OnChanges, OnD
     get strictMode(): boolean;
     get resolvedLoading(): boolean;
     get resolvedProgressiveRender(): boolean;
+    /**
+     * The diagram is scaled to fit the preview box, so at fit zoom nothing is
+     * off-screen and panning only shifts it inside the box. Touch therefore keeps
+     * scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+     * the gesture once the diagram is zoomed in and actually overflows the box.
+     * The fullscreen modal always claims it: the surface fills the viewport, panning
+     * is the intended gesture there, and the page behind it is locked anyway.
+     */
+    get panSurfaceClaimsTouch(): boolean;
     get previewTransform(): string;
     get modalTransform(): string;
+    /**
+     * Whether a pan surface holds a rendered diagram. The modal renders its own
+     * copy of the SVG, so it is checked as well: the source panel may have taken
+     * the inline preview's place while the modal is open.
+     */
+    private hasDiagramSvg;
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
@@ -885,6 +925,7 @@ declare class MermaidBlockNodeComponent implements AfterViewInit, OnChanges, OnD
     toggleCollapsed(): void;
     adjustZoom(delta: number): void;
     resetZoom(): void;
+    onPanStart(event: PointerEvent): void;
     handleModalWheel(event: WheelEvent): void;
     private renderDiagram;
     private syncSvgHosts;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-angular",
   "type": "module",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "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",
-    "markstream-core": "2.0.12",
-    "stream-markdown-parser": "1.2.16"
+    "stream-markdown-parser": "1.2.16",
+    "markstream-core": "2.0.13"
   },
   "devDependencies": {
     "@angular/common": "^20.3.26",