@industry-theme/xterm-terminal-panel 0.8.9 → 0.8.11

package/dist/index.js

@@ -37,7 +37,7 @@ import {
 // package.json
 var package_default = {
   name: "@industry-theme/xterm-terminal-panel",
-  version: "0.8.8",
+  version: "0.8.11",
   description: "Industry-themed xterm.js terminal components with panel framework integration",
   type: "module",
   sideEffects: [
@@ -2442,7 +2442,7 @@ var useTabKeyboardShortcuts = ({
   }, [enabled, onNewTab, onCloseTab, onSwitchToTab]);
 };
 // src/panels/TabbedTerminalPanel.tsx
-import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
+import { useTheme as useTheme7 } from "@principal-ade/industry-theme";
 import { CollapsibleSplitPane } from "@principal-ade/panels";
 import { Terminal as TerminalIcon2, Box, Boxes, Paperclip } from "lucide-react";
 import React3, {
@@ -2451,11 +2451,64 @@ import React3, {
   useEffect as useEffect4,
   useRef as useRef4
 } from "react";
-import { jsx as jsx10, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
-var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs8("div", {
+
+// src/components/TerminalStatusBar.tsx
+import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
+import { Folder } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var TerminalStatusBar = ({
+  directory
+}) => {
+  const { theme } = useTheme6();
+  if (!directory) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs8("div", {
+    style: {
+      flex: "0 0 auto",
+      display: "flex",
+      alignItems: "center",
+      gap: 6,
+      height: 22,
+      padding: "0 10px",
+      backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.background,
+      borderTop: `1px solid ${theme.colors.border}`,
+      color: theme.colors.textSecondary,
+      fontSize: theme.fontSizes[0],
+      fontFamily: theme.fonts.monospace,
+      userSelect: "none",
+      overflow: "hidden"
+    },
+    title: directory,
+    children: [
+      /* @__PURE__ */ jsx10(Folder, {
+        size: 12,
+        style: { flex: "0 0 auto", opacity: 0.7 }
+      }),
+      /* @__PURE__ */ jsx10("span", {
+        style: {
+          direction: "rtl",
+          textAlign: "left",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          minWidth: 0
+        },
+        children: /* @__PURE__ */ jsx10("bdi", {
+          children: directory
+        })
+      })
+    ]
+  });
+};
+TerminalStatusBar.displayName = "TerminalStatusBar";
+
+// src/panels/TabbedTerminalPanel.tsx
+import { jsx as jsx11, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
+var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs9("div", {
   style: { display: "flex", gap: 1, alignItems: "center", height: 12 },
   children: [
-    [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx10("div", {
+    [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx11("div", {
       style: {
         width: 2,
         height: 10,
@@ -2466,7 +2519,7 @@ var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs8("div",
         animation: isAnimating ? `waveSine 1.2s ease-in-out ${i * 0.1}s infinite` : "none"
       }
     }, i)),
-    /* @__PURE__ */ jsx10("style", {
+    /* @__PURE__ */ jsx11("style", {
       children: `
         @keyframes waveSine {
           0%, 100% { transform: scaleY(0.4); }
@@ -2511,14 +2564,14 @@ function TerminalTabContentInner(props, ref) {
   React3.useImperativeHandle(ref, () => ({
     scrollToBottom: () => sessionRef.current?.scrollToBottom()
   }), []);
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     style: {
       display: "flex",
       flexDirection: "column",
       height: "100%",
       width: "100%"
     },
-    children: /* @__PURE__ */ jsx10(TerminalSession, {
+    children: /* @__PURE__ */ jsx11(TerminalSession, {
       ref: sessionRef,
       actions,
       events,
@@ -2603,7 +2656,7 @@ var TabbedTerminalPanelInner = ({
   onTabAssociate: onTabAssociateProp,
   onTabDissociate: _onTabDissociate
 }) => {
-  const { theme } = useTheme6();
+  const { theme } = useTheme7();
   const onTabAssociate = actions.onTabAssociate ?? onTabAssociateProp;
   const [ownedTabs, setOwnedTabs] = useState4(initialTabs);
   const [foreignTabs, setForeignTabs] = useState4([]);
@@ -2633,11 +2686,6 @@ var TabbedTerminalPanelInner = ({
   useEffect4(() => {
     const customTabsFromProp = initialTabs.filter((tab) => tab.contentType !== "terminal");
     setOwnedTabs((prevTabs) => {
-      const existingTerminalTabs = prevTabs.filter((tab) => tab.contentType === "terminal");
-      const mergedTabs = [
-        ...existingTerminalTabs,
-        ...customTabsFromProp
-      ];
       const prevCustomTabs = prevTabs.filter((tab) => tab.contentType !== "terminal");
       const customTabsChanged = prevCustomTabs.length !== customTabsFromProp.length || !customTabsFromProp.every((tab) => {
         const prev = prevCustomTabs.find((p) => p.id === tab.id);
@@ -2648,7 +2696,11 @@ var TabbedTerminalPanelInner = ({
       if (!customTabsChanged) {
         return prevTabs;
       }
-      return mergedTabs;
+      const propById = new Map(customTabsFromProp.map((tab) => [tab.id, tab]));
+      const prevCustomIds = new Set(prevCustomTabs.map((tab) => tab.id));
+      const kept = prevTabs.filter((tab) => tab.contentType === "terminal" || propById.has(tab.id)).map((tab) => tab.contentType !== "terminal" && propById.has(tab.id) ? propById.get(tab.id) : tab);
+      const added = customTabsFromProp.filter((tab) => !prevCustomIds.has(tab.id));
+      return [...kept, ...added];
     });
   }, [customTabsKey]);
   useEffect4(() => {
@@ -2747,9 +2799,7 @@ var TabbedTerminalPanelInner = ({
         const tabsToAdd = newRestoredTabs.filter((t) => !existingIds.has(t.id));
         if (tabsToAdd.length === 0)
           return prevTabs;
-        const terminalTabs = prevTabs.filter((t) => t.contentType === "terminal");
-        const customTabs = prevTabs.filter((t) => t.contentType !== "terminal");
-        const merged = [...terminalTabs, ...tabsToAdd, ...customTabs];
+        const merged = [...prevTabs, ...tabsToAdd];
         appendedTabs = merged;
         return merged;
       });
@@ -2969,8 +3019,8 @@ var TabbedTerminalPanelInner = ({
     const isActive = tab.id === activeTabId;
     if (!isActive)
       return null;
-    return /* @__PURE__ */ jsx10(Fragment2, {
-      children: /* @__PURE__ */ jsx10("div", {
+    return /* @__PURE__ */ jsx11(Fragment2, {
+      children: /* @__PURE__ */ jsx11("div", {
         style: {
           position: "absolute",
           right: "8px",
@@ -2981,7 +3031,7 @@ var TabbedTerminalPanelInner = ({
           height: "16px"
         },
         title: isWorking ? "Terminal active" : "Terminal idle",
-        children: /* @__PURE__ */ jsx10(ActivityIndicator, {
+        children: /* @__PURE__ */ jsx11(ActivityIndicator, {
           color: theme.colors.primary,
           isAnimating: isWorking ?? false
         })
@@ -2989,7 +3039,7 @@ var TabbedTerminalPanelInner = ({
     });
   }, [activeTabId, theme, sessionIds, workingStates, activityStates]);
   const renderTerminalWithAssociation = useCallback5((tab, isActive, sessionId, association) => {
-    const terminalContent = /* @__PURE__ */ jsx10(TerminalTabContent, {
+    const terminalContent = /* @__PURE__ */ jsx11(TerminalTabContent, {
       ref: getRefCallback(tab.id),
       tab,
       sessionId,
@@ -3006,7 +3056,7 @@ var TabbedTerminalPanelInner = ({
       onActivityStateChange: handleActivityStateChange
     }, `terminal-${tab.id}`);
     const hasAssociation = !!association;
-    const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */ jsx10("div", {
+    const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */ jsx11("div", {
       style: {
         height: "100%",
         display: "flex",
@@ -3018,12 +3068,12 @@ var TabbedTerminalPanelInner = ({
       },
       children: "Drag a tab here to associate it with this terminal"
     });
-    const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */ jsx10(Paperclip, {
+    const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */ jsx11(Paperclip, {
       size: 14
     }) };
     const isCollapsed = hasAssociation ? association.collapsed : true;
     const handleCollapsedChange = hasAssociation ? (collapsed) => onAssociationCollapsedChange?.(tab.id, collapsed) : undefined;
-    return /* @__PURE__ */ jsx10(CollapsibleSplitPane, {
+    return /* @__PURE__ */ jsx11(CollapsibleSplitPane, {
       style: { height: "100%" },
       primaryContent: terminalContent,
       secondaryContent,
@@ -3096,7 +3146,7 @@ var TabbedTerminalPanelInner = ({
       setActiveTabId(activeTabId);
     }
   }, [activeTabId, tabs, onTabAssociate, setActiveTabId]);
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -3104,15 +3154,15 @@ var TabbedTerminalPanelInner = ({
       backgroundColor: theme.colors.background
     },
     children: [
-      !hideHeader && /* @__PURE__ */ jsx10("div", {
+      !hideHeader && /* @__PURE__ */ jsx11("div", {
         ref: headerRef,
-        children: /* @__PURE__ */ jsx10(TabBar, {
+        children: /* @__PURE__ */ jsx11(TabBar, {
           tabs: genericTabs,
           activeTabId,
           onTabClick: switchTab,
           onTabClose: closeTab,
           onNewTab: addNewTab,
-          leftSection: hideShowAllTerminalsButton ? undefined : /* @__PURE__ */ jsx10("button", {
+          leftSection: hideShowAllTerminalsButton ? undefined : /* @__PURE__ */ jsx11("button", {
             onClick: () => onShowAllTerminalsChange?.(!showAllTerminals),
             style: {
               display: "flex",
@@ -3137,9 +3187,9 @@ var TabbedTerminalPanelInner = ({
               }
             },
             title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
-            children: showAllTerminals ? /* @__PURE__ */ jsx10(Boxes, {
+            children: showAllTerminals ? /* @__PURE__ */ jsx11(Boxes, {
               size: 14
-            }) : /* @__PURE__ */ jsx10(Box, {
+            }) : /* @__PURE__ */ jsx11(Box, {
               size: 14
             })
           }),
@@ -3152,7 +3202,7 @@ var TabbedTerminalPanelInner = ({
           canDropOnTab
         })
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -3206,7 +3256,7 @@ var TabbedTerminalPanelInner = ({
               const customContent = renderTabContent(tab, isActive, sessionId, width);
               if (customContent === null && tab.contentType === "terminal") {
                 const association = associations?.[tab.id];
-                return /* @__PURE__ */ jsx10("div", {
+                return /* @__PURE__ */ jsx11("div", {
                   inert: !isActive,
                   style: {
                     position: "absolute",
@@ -3219,7 +3269,7 @@ var TabbedTerminalPanelInner = ({
                 }, tab.id);
               }
               const hasBeenActivated = activatedTabs.has(tab.id);
-              return /* @__PURE__ */ jsx10("div", {
+              return /* @__PURE__ */ jsx11("div", {
                 inert: !isActive,
                 style: {
                   position: "absolute",
@@ -3233,7 +3283,7 @@ var TabbedTerminalPanelInner = ({
             }
             if (tab.contentType === "terminal") {
               const association = associations?.[tab.id];
-              return /* @__PURE__ */ jsx10("div", {
+              return /* @__PURE__ */ jsx11("div", {
                 inert: !isActive,
                 style: {
                   position: "absolute",
@@ -3245,7 +3295,7 @@ var TabbedTerminalPanelInner = ({
                 children: renderTerminalWithAssociation(tab, isActive, sessionId, association)
               }, tab.id);
             }
-            return /* @__PURE__ */ jsxs8("div", {
+            return /* @__PURE__ */ jsxs9("div", {
               inert: !isActive,
               style: {
                 position: "absolute",
@@ -3257,20 +3307,20 @@ var TabbedTerminalPanelInner = ({
                 color: theme.colors.textSecondary
               },
               children: [
-                /* @__PURE__ */ jsxs8("p", {
+                /* @__PURE__ */ jsxs9("p", {
                   children: [
                     "Unknown content type: ",
                     tab.contentType
                   ]
                 }),
-                /* @__PURE__ */ jsx10("p", {
+                /* @__PURE__ */ jsx11("p", {
                   style: { fontSize: theme.fontSizes[0], marginTop: "8px" },
                   children: "Provide a renderTabContent prop to render custom tab types"
                 })
               ]
             }, tab.id);
           }),
-          tabs.length === 0 && /* @__PURE__ */ jsxs8("div", {
+          tabs.length === 0 && /* @__PURE__ */ jsxs9("div", {
             style: {
               display: "flex",
               flexDirection: "column",
@@ -3280,11 +3330,11 @@ var TabbedTerminalPanelInner = ({
               color: theme.colors.textSecondary
             },
             children: [
-              /* @__PURE__ */ jsx10(TerminalIcon2, {
+              /* @__PURE__ */ jsx11(TerminalIcon2, {
                 size: 32,
                 style: { opacity: 0.5, marginBottom: "16px" }
               }),
-              /* @__PURE__ */ jsx10("button", {
+              /* @__PURE__ */ jsx11("button", {
                 onClick: () => addNewTab(),
                 style: {
                   marginTop: "16px",
@@ -3302,6 +3352,9 @@ var TabbedTerminalPanelInner = ({
             ]
           })
         ]
+      }),
+      /* @__PURE__ */ jsx11(TerminalStatusBar, {
+        directory: tabs.find((t) => t.id === activeTabId)?.directory
       })
     ]
   });

package/dist/src/components/TerminalStatusBar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TerminalStatusBarProps {
+    directory?: string;
+}
+export declare const TerminalStatusBar: React.FC<TerminalStatusBarProps>;
+//# sourceMappingURL=TerminalStatusBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalStatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/TerminalStatusBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,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":"AAIA,OAAO,KAKN,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAGZ,MAAM,gBAAgB,CAAC;AAgExB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAmtCD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAKN,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAGZ,MAAM,gBAAgB,CAAC;AAgExB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AA6tCD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@industry-theme/xterm-terminal-panel",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "Industry-themed xterm.js terminal components with panel framework integration",
   "type": "module",
   "sideEffects": [