@industry-theme/xterm-terminal-panel 0.1.3 → 0.1.6

package/dist/index.js

@@ -2,6 +2,7 @@
 import { FitAddon } from "@xterm/addon-fit";
 import { SearchAddon } from "@xterm/addon-search";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal } from "@xterm/xterm";
 import {
   ChevronDown,
@@ -60,6 +61,7 @@ function getTerminalCSSVariables(theme) {
 
 // src/components/ThemedTerminal.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var SCROLL_DEBOUNCE_MS = 1000;
 var ThemedTerminal = forwardRef(({
   theme,
   onData,
@@ -91,7 +93,9 @@ var ThemedTerminal = forwardRef(({
   const [terminal, setTerminal] = useState(null);
   const fitAddonRef = useRef(null);
   const searchAddonRef = useRef(null);
+  const webglAddonRef = useRef(null);
   const resizeTimeoutRef = useRef(null);
+  const scrollDebounceRef = useRef(null);
   const isVisibleRef = useRef(isVisible);
   const isScrollLockedRef = useRef(true);
   useEffect(() => {
@@ -115,14 +119,23 @@ var ThemedTerminal = forwardRef(({
       isScrollLocked: isScrollLockedRef.current
     };
   };
+  const scheduleScrollToBottom = () => {
+    if (!terminal || !isScrollLockedRef.current)
+      return;
+    if (scrollDebounceRef.current) {
+      clearTimeout(scrollDebounceRef.current);
+    }
+    scrollDebounceRef.current = setTimeout(() => {
+      if (terminal && isScrollLockedRef.current) {
+        terminal.scrollToBottom();
+      }
+    }, SCROLL_DEBOUNCE_MS);
+  };
   useImperativeHandle(ref, () => ({
     write: (data) => {
       if (terminal) {
-        terminal.write(data, () => {
-          if (isScrollLockedRef.current) {
-            terminal.scrollToBottom();
-          }
-        });
+        terminal.write(data);
+        scheduleScrollToBottom();
       } else {
         console.warn("[ThemedTerminal] write called but terminal is null!");
       }
@@ -130,9 +143,7 @@ var ThemedTerminal = forwardRef(({
     writeln: (data) => {
       if (terminal) {
         terminal.writeln(data);
-        if (isScrollLockedRef.current) {
-          terminal.scrollToBottom();
-        }
+        scheduleScrollToBottom();
       }
     },
     scrollToBottom: () => {
@@ -257,6 +268,19 @@ var ThemedTerminal = forwardRef(({
       term.loadAddon(webLinksAddon);
     }
     term.open(terminalRef.current);
+    try {
+      const webglAddon = new WebglAddon;
+      webglAddonRef.current = webglAddon;
+      webglAddon.onContextLoss(() => {
+        console.warn("[ThemedTerminal] WebGL context lost, falling back to canvas renderer");
+        webglAddon.dispose();
+        webglAddonRef.current = null;
+      });
+      term.loadAddon(webglAddon);
+      console.info("[ThemedTerminal] WebGL renderer enabled");
+    } catch (e) {
+      console.warn("[ThemedTerminal] WebGL not available, using canvas renderer:", e);
+    }
     const scrollDisposable = term.onScroll(() => {
       const scrollY = term.buffer.active.viewportY;
       const scrollback2 = term.buffer.active.baseY;
@@ -303,6 +327,13 @@ var ThemedTerminal = forwardRef(({
       if (resizeTimeoutRef.current) {
         clearTimeout(resizeTimeoutRef.current);
       }
+      if (scrollDebounceRef.current) {
+        clearTimeout(scrollDebounceRef.current);
+      }
+      if (webglAddonRef.current) {
+        webglAddonRef.current.dispose();
+        webglAddonRef.current = null;
+      }
       term.dispose();
     };
   }, [onLinkClick]);
@@ -1049,7 +1080,8 @@ import React, {
   useRef as useRef3
 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var TerminalTabContentInner = ({ tab, sessionId, isActive, isVisible, actions, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false }, ref) => {
+function TerminalTabContentInner(props, ref) {
+  const { tab, sessionId, isActive, isVisible, actions, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false } = props;
   const terminalRef = useRef3(null);
   const [localSessionId, setLocalSessionId] = useState3(sessionId);
   const [isInitialized, setIsInitialized] = useState3(false);
@@ -1249,8 +1281,26 @@ var TerminalTabContentInner = ({ tab, sessionId, isActive, isVisible, actions, t
       overlayState
     }, shouldRenderTerminal ? "active" : "overlay")
   });
+}
+var areTerminalTabContentPropsEqual = (prevProps, nextProps) => {
+  const tabEqual = prevProps.tab.id === nextProps.tab.id && prevProps.tab.directory === nextProps.tab.directory && prevProps.tab.isActive === nextProps.tab.isActive && prevProps.tab.label === nextProps.tab.label;
+  const changes = [];
+  if (!tabEqual)
+    changes.push("tab");
+  if (prevProps.sessionId !== nextProps.sessionId)
+    changes.push("sessionId");
+  if (prevProps.isActive !== nextProps.isActive)
+    changes.push("isActive");
+  if (prevProps.isVisible !== nextProps.isVisible)
+    changes.push("isVisible");
+  if (prevProps.terminalContext !== nextProps.terminalContext)
+    changes.push("terminalContext");
+  if (prevProps.isForeign !== nextProps.isForeign)
+    changes.push("isForeign");
+  return changes.length === 0;
 };
-var TerminalTabContent = React.memo(React.forwardRef(TerminalTabContentInner));
+var TerminalTabContentForwarded = React.forwardRef(TerminalTabContentInner);
+var TerminalTabContent = React.memo(TerminalTabContentForwarded, areTerminalTabContentPropsEqual);
 TerminalTabContent.displayName = "TerminalTabContent";
 var TabbedTerminalPanelInner = ({
   context: _context,
@@ -1288,6 +1338,21 @@ var TabbedTerminalPanelInner = ({
     return [...labeledOwnedTabs, ...sortedForeignTabs];
   }, [ownedTabs, foreignTabs, getOwnedTabLabel]);
   const tabRefsMap = useRef3(new Map);
+  const refCallbacksMap = useRef3(new Map);
+  const getRefCallback = useCallback((tabId) => {
+    let callback = refCallbacksMap.current.get(tabId);
+    if (!callback) {
+      callback = (ref) => {
+        if (ref) {
+          tabRefsMap.current.set(tabId, ref);
+        } else {
+          tabRefsMap.current.delete(tabId);
+        }
+      };
+      refCallbacksMap.current.set(tabId, callback);
+    }
+    return callback;
+  }, []);
   const hasInitializedRef = useRef3(false);
   const isCreatingTabRef = useRef3(false);
   const headerRef = useRef3(null);
@@ -1748,13 +1813,7 @@ var TabbedTerminalPanelInner = ({
         },
         children: [
           tabs.map((tab) => /* @__PURE__ */ jsx4(TerminalTabContent, {
-            ref: (ref) => {
-              if (ref) {
-                tabRefsMap.current.set(tab.id, ref);
-              } else {
-                tabRefsMap.current.delete(tab.id);
-              }
-            },
+            ref: getRefCallback(tab.id),
             tab,
             sessionId: sessionIds.get(tab.id) || null,
             isActive: tab.id === activeTabId,
@@ -1806,7 +1865,28 @@ var TabbedTerminalPanelInner = ({
 };
 TabbedTerminalPanelInner.displayName = "TabbedTerminalPanelInner";
 var TabbedTerminalPanel = React.memo(TabbedTerminalPanelInner, (prevProps, nextProps) => {
-  return prevProps.terminalContext === nextProps.terminalContext && prevProps.directory === nextProps.directory && prevProps.hideHeader === nextProps.hideHeader && prevProps.isVisible === nextProps.isVisible && prevProps.showAllTerminals === nextProps.showAllTerminals && prevProps.tabLabelPrefix === nextProps.tabLabelPrefix && prevProps.actions === nextProps.actions && prevProps.onTabsChange === nextProps.onTabsChange && prevProps.onShowAllTerminalsChange === nextProps.onShowAllTerminalsChange && prevProps.initialTabs === nextProps.initialTabs;
+  const changes = [];
+  if (prevProps.terminalContext !== nextProps.terminalContext)
+    changes.push("terminalContext");
+  if (prevProps.directory !== nextProps.directory)
+    changes.push("directory");
+  if (prevProps.hideHeader !== nextProps.hideHeader)
+    changes.push("hideHeader");
+  if (prevProps.isVisible !== nextProps.isVisible)
+    changes.push("isVisible");
+  if (prevProps.showAllTerminals !== nextProps.showAllTerminals)
+    changes.push("showAllTerminals");
+  if (prevProps.tabLabelPrefix !== nextProps.tabLabelPrefix)
+    changes.push("tabLabelPrefix");
+  if (prevProps.actions !== nextProps.actions)
+    changes.push("actions");
+  if (prevProps.onTabsChange !== nextProps.onTabsChange)
+    changes.push("onTabsChange");
+  if (prevProps.onShowAllTerminalsChange !== nextProps.onShowAllTerminalsChange)
+    changes.push("onShowAllTerminalsChange");
+  if (prevProps.initialTabs !== nextProps.initialTabs)
+    changes.push("initialTabs");
+  return changes.length === 0;
 });
 TabbedTerminalPanel.displayName = "TabbedTerminalPanel";
 // src/tools/index.ts

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;AAqB3D,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,4HAksB1B,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;AAyB3D,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,4HAyuB1B,CAAC"}

package/dist/src/panels/TabbedTerminalPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,wBAAwB,EAGzB,MAAM,gBAAgB,CAAC;AAuBxB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AA6/BD,eAAO,MAAM,mBAAmB,sDAgB9B,CAAC"}
+{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,wBAAwB,EAGzB,MAAM,gBAAgB,CAAC;AAuBxB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAsiCD,eAAO,MAAM,mBAAmB,sDAmB9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industry-theme/xterm-terminal-panel",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Industry-themed xterm.js terminal components with panel framework integration",
   "type": "module",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "build": "bun run clean && bun run build:esm && bun run build:tools && bun run build:types && bun run build:styles",
-    "build:esm": "NODE_ENV=production bun build ./index.ts --outdir ./dist --entry-naming [dir]/[name].[ext] --format esm --target browser --external react --external react-dom --external @xterm/xterm --external @xterm/addon-fit --external @xterm/addon-search --external @xterm/addon-web-links --external @principal-ade/industry-theme --external @principal-ade/panel-framework-core --external lucide-react --external clsx",
+    "build:esm": "NODE_ENV=production bun build ./index.ts --outdir ./dist --entry-naming [dir]/[name].[ext] --format esm --target browser --external react --external react-dom --external @xterm/xterm --external @xterm/addon-fit --external @xterm/addon-search --external @xterm/addon-web-links --external @xterm/addon-webgl --external @principal-ade/industry-theme --external @principal-ade/panel-framework-core --external lucide-react --external clsx",
     "build:tools": "bun build ./src/tools/index.ts --outfile ./dist/tools.bundle.js --format esm --target browser",
     "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly --declaration --declarationMap",
     "build:styles": "cp src/styles/terminal-theme.css dist/styles.css",
@@ -63,6 +63,7 @@
     "@xterm/addon-fit": ">=0.10.0",
     "@xterm/addon-search": ">=0.15.0",
     "@xterm/addon-web-links": ">=0.11.0",
+    "@xterm/addon-webgl": ">=0.18.0",
     "@xterm/xterm": ">=5.5.0",
     "lucide-react": ">=0.263.0",
     "react": ">=19.0.0",
@@ -71,6 +72,9 @@
   "peerDependenciesMeta": {
     "lucide-react": {
       "optional": true
+    },
+    "@xterm/addon-webgl": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -90,6 +94,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-search": "^0.15.0",
     "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "esbuild": "^0.25.8",
     "eslint": "^9.32.0",