@industry-theme/xterm-terminal-panel 0.4.3 → 0.4.5

package/dist/index.js

@@ -68,6 +68,7 @@ function getTerminalCSSVariables(theme) {
 // src/components/ThemedTerminal.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 var SCROLL_DEBOUNCE_MS = 1000;
+var DEBUG_RESIZE = true;
 var ThemedTerminal = forwardRef(({
   theme,
   onData,
@@ -338,11 +339,48 @@ var ThemedTerminal = forwardRef(({
     } catch (e) {
       console.warn("[ThemedTerminal] WebGL not available, using canvas renderer:", e);
     }
+    let lastBaseY = 0;
+    let isRewriteInProgress = false;
+    let rewriteStabilizeTimeout = null;
     const scrollDisposable = term.onScroll(() => {
       const scrollY = term.buffer.active.viewportY;
       const scrollback2 = term.buffer.active.baseY;
       const isAtTop = scrollY === 0;
       const isAtBottom = scrollY + term.rows >= scrollback2 + term.rows;
+      if (DEBUG_RESIZE) {
+        console.log("[ThemedTerminal] onScroll event:", {
+          viewportY: scrollY,
+          baseY: scrollback2,
+          rows: term.rows,
+          isAtTop,
+          isAtBottom,
+          isScrollLocked: isScrollLockedRef.current,
+          isRewriteInProgress
+        });
+      }
+      if (lastBaseY > 50 && scrollback2 < lastBaseY * 0.1) {
+        if (DEBUG_RESIZE) {
+          console.log("[ThemedTerminal] Content rewrite STARTED:", {
+            previousBaseY: lastBaseY,
+            currentBaseY: scrollback2
+          });
+        }
+        isRewriteInProgress = true;
+      }
+      if (isRewriteInProgress) {
+        if (rewriteStabilizeTimeout) {
+          clearTimeout(rewriteStabilizeTimeout);
+        }
+        term.scrollToBottom();
+        rewriteStabilizeTimeout = setTimeout(() => {
+          if (DEBUG_RESIZE) {
+            console.log("[ThemedTerminal] Content rewrite COMPLETE, stabilized at baseY:", scrollback2);
+          }
+          isRewriteInProgress = false;
+          term.scrollToBottom();
+        }, 150);
+      }
+      lastBaseY = scrollback2;
       if (onScrollPositionChange) {
         onScrollPositionChange({
           isAtTop,
@@ -354,25 +392,79 @@ var ThemedTerminal = forwardRef(({
     setTerminal(term);
     const performFit = () => {
       if (!fitAddonRef.current || !terminalRef.current || !term || !isVisibleRef.current) {
+        if (DEBUG_RESIZE) {
+          console.log("[ThemedTerminal] performFit skipped:", {
+            hasFitAddon: !!fitAddonRef.current,
+            hasTerminalRef: !!terminalRef.current,
+            hasTerm: !!term,
+            isVisible: isVisibleRef.current
+          });
+        }
         return;
       }
+      const containerRect = terminalRef.current.getBoundingClientRect();
+      const beforeCols = term.cols;
+      const beforeRows = term.rows;
+      const scrollYBefore = term.buffer.active.viewportY;
+      const baseYBefore = term.buffer.active.baseY;
+      if (DEBUG_RESIZE) {
+        console.log("[ThemedTerminal] performFit BEFORE:", {
+          container: { width: containerRect.width, height: containerRect.height },
+          terminal: { cols: beforeCols, rows: beforeRows },
+          scroll: { viewportY: scrollYBefore, baseY: baseYBefore },
+          isScrollLocked: isScrollLockedRef.current
+        });
+      }
       fitAddonRef.current.fit();
+      const afterCols = term.cols;
+      const afterRows = term.rows;
+      const scrollYAfter = term.buffer.active.viewportY;
+      const baseYAfter = term.buffer.active.baseY;
+      if (DEBUG_RESIZE) {
+        console.log("[ThemedTerminal] performFit AFTER:", {
+          terminal: { cols: afterCols, rows: afterRows },
+          scroll: { viewportY: scrollYAfter, baseY: baseYAfter },
+          changed: beforeCols !== afterCols || beforeRows !== afterRows
+        });
+      }
       if (isScrollLockedRef.current) {
         requestAnimationFrame(() => {
+          if (DEBUG_RESIZE) {
+            console.log("[ThemedTerminal] scrollToBottom (scroll locked)");
+          }
           term.scrollToBottom();
         });
       }
     };
-    const handleResize = () => {
+    let resizeEventCount = 0;
+    const handleResize = (entry) => {
+      resizeEventCount++;
+      const eventNum = resizeEventCount;
+      if (DEBUG_RESIZE && entry) {
+        const rect = entry.contentRect;
+        console.log(`[ThemedTerminal] ResizeObserver #${eventNum}:`, {
+          width: rect.width,
+          height: rect.height,
+          timestamp: Date.now()
+        });
+      }
       if (resizeTimeoutRef.current) {
+        if (DEBUG_RESIZE) {
+          console.log(`[ThemedTerminal] ResizeObserver #${eventNum}: debouncing (clearing previous timeout)`);
+        }
         clearTimeout(resizeTimeoutRef.current);
       }
       resizeTimeoutRef.current = setTimeout(() => {
+        if (DEBUG_RESIZE) {
+          console.log(`[ThemedTerminal] ResizeObserver #${eventNum}: debounce complete, calling performFit`);
+        }
         performFit();
       }, 100);
     };
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        handleResize(entry);
+      }
     });
     if (terminalRef.current) {
       resizeObserver.observe(terminalRef.current);
@@ -387,6 +479,9 @@ var ThemedTerminal = forwardRef(({
       if (scrollDebounceRef.current) {
         clearTimeout(scrollDebounceRef.current);
       }
+      if (rewriteStabilizeTimeout) {
+        clearTimeout(rewriteStabilizeTimeout);
+      }
       if (webglAddonRef.current) {
         webglAddonRef.current.dispose();
         webglAddonRef.current = null;
@@ -425,6 +520,12 @@ var ThemedTerminal = forwardRef(({
     if (!terminal || !onResize)
       return;
     const disposable = terminal.onResize((size) => {
+      if (DEBUG_RESIZE) {
+        console.log("[ThemedTerminal] terminal.onResize event:", {
+          cols: size.cols,
+          rows: size.rows
+        });
+      }
       onResize(size.cols, size.rows);
     });
     return () => {
@@ -454,9 +555,22 @@ var ThemedTerminal = forwardRef(({
   }, [terminal, autoFocus, isVisible]);
   useEffect(() => {
     if (terminal && isVisible && fitAddonRef.current) {
+      if (DEBUG_RESIZE) {
+        console.log("[ThemedTerminal] Visibility change detected, scheduling fit:", {
+          isVisible,
+          cols: terminal.cols,
+          rows: terminal.rows
+        });
+      }
       setTimeout(() => {
+        if (DEBUG_RESIZE) {
+          console.log("[ThemedTerminal] Visibility fit executing");
+        }
         fitAddonRef.current?.fit();
         if (isScrollLockedRef.current) {
+          if (DEBUG_RESIZE) {
+            console.log("[ThemedTerminal] Visibility fit: scrollToBottom (scroll locked)");
+          }
           terminal.scrollToBottom();
         }
       }, 50);

package/dist/src/components/ThemedTerminal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedTerminal.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedTerminal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA+B3D,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAEV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAsBD,eAAO,MAAM,cAAc,4HA20B1B,CAAC"}
+{"version":3,"file":"ThemedTerminal.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedTerminal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAkC3D,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAEV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAsBD,eAAO,MAAM,cAAc,4HAq9B1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industry-theme/xterm-terminal-panel",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Industry-themed xterm.js terminal components with panel framework integration",
   "type": "module",
   "main": "dist/index.js",