@industry-theme/xterm-terminal-panel 0.8.10 → 0.8.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import {
|
|
|
37
37
|
// package.json
|
|
38
38
|
var package_default = {
|
|
39
39
|
name: "@industry-theme/xterm-terminal-panel",
|
|
40
|
-
version: "0.8.
|
|
40
|
+
version: "0.8.11",
|
|
41
41
|
description: "Industry-themed xterm.js terminal components with panel framework integration",
|
|
42
42
|
type: "module",
|
|
43
43
|
sideEffects: [
|
|
@@ -2442,7 +2442,7 @@ var useTabKeyboardShortcuts = ({
|
|
|
2442
2442
|
}, [enabled, onNewTab, onCloseTab, onSwitchToTab]);
|
|
2443
2443
|
};
|
|
2444
2444
|
// src/panels/TabbedTerminalPanel.tsx
|
|
2445
|
-
import { useTheme as
|
|
2445
|
+
import { useTheme as useTheme7 } from "@principal-ade/industry-theme";
|
|
2446
2446
|
import { CollapsibleSplitPane } from "@principal-ade/panels";
|
|
2447
2447
|
import { Terminal as TerminalIcon2, Box, Boxes, Paperclip } from "lucide-react";
|
|
2448
2448
|
import React3, {
|
|
@@ -2451,11 +2451,64 @@ import React3, {
|
|
|
2451
2451
|
useEffect as useEffect4,
|
|
2452
2452
|
useRef as useRef4
|
|
2453
2453
|
} from "react";
|
|
2454
|
-
|
|
2455
|
-
|
|
2454
|
+
|
|
2455
|
+
// src/components/TerminalStatusBar.tsx
|
|
2456
|
+
import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
|
|
2457
|
+
import { Folder } from "lucide-react";
|
|
2458
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2459
|
+
var TerminalStatusBar = ({
|
|
2460
|
+
directory
|
|
2461
|
+
}) => {
|
|
2462
|
+
const { theme } = useTheme6();
|
|
2463
|
+
if (!directory) {
|
|
2464
|
+
return null;
|
|
2465
|
+
}
|
|
2466
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
2467
|
+
style: {
|
|
2468
|
+
flex: "0 0 auto",
|
|
2469
|
+
display: "flex",
|
|
2470
|
+
alignItems: "center",
|
|
2471
|
+
gap: 6,
|
|
2472
|
+
height: 22,
|
|
2473
|
+
padding: "0 10px",
|
|
2474
|
+
backgroundColor: theme.colors.backgroundSecondary ?? theme.colors.background,
|
|
2475
|
+
borderTop: `1px solid ${theme.colors.border}`,
|
|
2476
|
+
color: theme.colors.textSecondary,
|
|
2477
|
+
fontSize: theme.fontSizes[0],
|
|
2478
|
+
fontFamily: theme.fonts.monospace,
|
|
2479
|
+
userSelect: "none",
|
|
2480
|
+
overflow: "hidden"
|
|
2481
|
+
},
|
|
2482
|
+
title: directory,
|
|
2483
|
+
children: [
|
|
2484
|
+
/* @__PURE__ */ jsx10(Folder, {
|
|
2485
|
+
size: 12,
|
|
2486
|
+
style: { flex: "0 0 auto", opacity: 0.7 }
|
|
2487
|
+
}),
|
|
2488
|
+
/* @__PURE__ */ jsx10("span", {
|
|
2489
|
+
style: {
|
|
2490
|
+
direction: "rtl",
|
|
2491
|
+
textAlign: "left",
|
|
2492
|
+
whiteSpace: "nowrap",
|
|
2493
|
+
overflow: "hidden",
|
|
2494
|
+
textOverflow: "ellipsis",
|
|
2495
|
+
minWidth: 0
|
|
2496
|
+
},
|
|
2497
|
+
children: /* @__PURE__ */ jsx10("bdi", {
|
|
2498
|
+
children: directory
|
|
2499
|
+
})
|
|
2500
|
+
})
|
|
2501
|
+
]
|
|
2502
|
+
});
|
|
2503
|
+
};
|
|
2504
|
+
TerminalStatusBar.displayName = "TerminalStatusBar";
|
|
2505
|
+
|
|
2506
|
+
// src/panels/TabbedTerminalPanel.tsx
|
|
2507
|
+
import { jsx as jsx11, jsxs as jsxs9, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
2508
|
+
var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs9("div", {
|
|
2456
2509
|
style: { display: "flex", gap: 1, alignItems: "center", height: 12 },
|
|
2457
2510
|
children: [
|
|
2458
|
-
[0, 1, 2, 3, 4].map((i) => /* @__PURE__ */
|
|
2511
|
+
[0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx11("div", {
|
|
2459
2512
|
style: {
|
|
2460
2513
|
width: 2,
|
|
2461
2514
|
height: 10,
|
|
@@ -2466,7 +2519,7 @@ var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs8("div",
|
|
|
2466
2519
|
animation: isAnimating ? `waveSine 1.2s ease-in-out ${i * 0.1}s infinite` : "none"
|
|
2467
2520
|
}
|
|
2468
2521
|
}, i)),
|
|
2469
|
-
/* @__PURE__ */
|
|
2522
|
+
/* @__PURE__ */ jsx11("style", {
|
|
2470
2523
|
children: `
|
|
2471
2524
|
@keyframes waveSine {
|
|
2472
2525
|
0%, 100% { transform: scaleY(0.4); }
|
|
@@ -2511,14 +2564,14 @@ function TerminalTabContentInner(props, ref) {
|
|
|
2511
2564
|
React3.useImperativeHandle(ref, () => ({
|
|
2512
2565
|
scrollToBottom: () => sessionRef.current?.scrollToBottom()
|
|
2513
2566
|
}), []);
|
|
2514
|
-
return /* @__PURE__ */
|
|
2567
|
+
return /* @__PURE__ */ jsx11("div", {
|
|
2515
2568
|
style: {
|
|
2516
2569
|
display: "flex",
|
|
2517
2570
|
flexDirection: "column",
|
|
2518
2571
|
height: "100%",
|
|
2519
2572
|
width: "100%"
|
|
2520
2573
|
},
|
|
2521
|
-
children: /* @__PURE__ */
|
|
2574
|
+
children: /* @__PURE__ */ jsx11(TerminalSession, {
|
|
2522
2575
|
ref: sessionRef,
|
|
2523
2576
|
actions,
|
|
2524
2577
|
events,
|
|
@@ -2603,7 +2656,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
2603
2656
|
onTabAssociate: onTabAssociateProp,
|
|
2604
2657
|
onTabDissociate: _onTabDissociate
|
|
2605
2658
|
}) => {
|
|
2606
|
-
const { theme } =
|
|
2659
|
+
const { theme } = useTheme7();
|
|
2607
2660
|
const onTabAssociate = actions.onTabAssociate ?? onTabAssociateProp;
|
|
2608
2661
|
const [ownedTabs, setOwnedTabs] = useState4(initialTabs);
|
|
2609
2662
|
const [foreignTabs, setForeignTabs] = useState4([]);
|
|
@@ -2966,8 +3019,8 @@ var TabbedTerminalPanelInner = ({
|
|
|
2966
3019
|
const isActive = tab.id === activeTabId;
|
|
2967
3020
|
if (!isActive)
|
|
2968
3021
|
return null;
|
|
2969
|
-
return /* @__PURE__ */
|
|
2970
|
-
children: /* @__PURE__ */
|
|
3022
|
+
return /* @__PURE__ */ jsx11(Fragment2, {
|
|
3023
|
+
children: /* @__PURE__ */ jsx11("div", {
|
|
2971
3024
|
style: {
|
|
2972
3025
|
position: "absolute",
|
|
2973
3026
|
right: "8px",
|
|
@@ -2978,7 +3031,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
2978
3031
|
height: "16px"
|
|
2979
3032
|
},
|
|
2980
3033
|
title: isWorking ? "Terminal active" : "Terminal idle",
|
|
2981
|
-
children: /* @__PURE__ */
|
|
3034
|
+
children: /* @__PURE__ */ jsx11(ActivityIndicator, {
|
|
2982
3035
|
color: theme.colors.primary,
|
|
2983
3036
|
isAnimating: isWorking ?? false
|
|
2984
3037
|
})
|
|
@@ -2986,7 +3039,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
2986
3039
|
});
|
|
2987
3040
|
}, [activeTabId, theme, sessionIds, workingStates, activityStates]);
|
|
2988
3041
|
const renderTerminalWithAssociation = useCallback5((tab, isActive, sessionId, association) => {
|
|
2989
|
-
const terminalContent = /* @__PURE__ */
|
|
3042
|
+
const terminalContent = /* @__PURE__ */ jsx11(TerminalTabContent, {
|
|
2990
3043
|
ref: getRefCallback(tab.id),
|
|
2991
3044
|
tab,
|
|
2992
3045
|
sessionId,
|
|
@@ -3003,7 +3056,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3003
3056
|
onActivityStateChange: handleActivityStateChange
|
|
3004
3057
|
}, `terminal-${tab.id}`);
|
|
3005
3058
|
const hasAssociation = !!association;
|
|
3006
|
-
const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */
|
|
3059
|
+
const secondaryContent = hasAssociation && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : /* @__PURE__ */ jsx11("div", {
|
|
3007
3060
|
style: {
|
|
3008
3061
|
height: "100%",
|
|
3009
3062
|
display: "flex",
|
|
@@ -3015,12 +3068,12 @@ var TabbedTerminalPanelInner = ({
|
|
|
3015
3068
|
},
|
|
3016
3069
|
children: "Drag a tab here to associate it with this terminal"
|
|
3017
3070
|
});
|
|
3018
|
-
const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */
|
|
3071
|
+
const headerConfig = hasAssociation && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : { title: "Drop zone", icon: /* @__PURE__ */ jsx11(Paperclip, {
|
|
3019
3072
|
size: 14
|
|
3020
3073
|
}) };
|
|
3021
3074
|
const isCollapsed = hasAssociation ? association.collapsed : true;
|
|
3022
3075
|
const handleCollapsedChange = hasAssociation ? (collapsed) => onAssociationCollapsedChange?.(tab.id, collapsed) : undefined;
|
|
3023
|
-
return /* @__PURE__ */
|
|
3076
|
+
return /* @__PURE__ */ jsx11(CollapsibleSplitPane, {
|
|
3024
3077
|
style: { height: "100%" },
|
|
3025
3078
|
primaryContent: terminalContent,
|
|
3026
3079
|
secondaryContent,
|
|
@@ -3093,7 +3146,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3093
3146
|
setActiveTabId(activeTabId);
|
|
3094
3147
|
}
|
|
3095
3148
|
}, [activeTabId, tabs, onTabAssociate, setActiveTabId]);
|
|
3096
|
-
return /* @__PURE__ */
|
|
3149
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3097
3150
|
style: {
|
|
3098
3151
|
display: "flex",
|
|
3099
3152
|
flexDirection: "column",
|
|
@@ -3101,15 +3154,15 @@ var TabbedTerminalPanelInner = ({
|
|
|
3101
3154
|
backgroundColor: theme.colors.background
|
|
3102
3155
|
},
|
|
3103
3156
|
children: [
|
|
3104
|
-
!hideHeader && /* @__PURE__ */
|
|
3157
|
+
!hideHeader && /* @__PURE__ */ jsx11("div", {
|
|
3105
3158
|
ref: headerRef,
|
|
3106
|
-
children: /* @__PURE__ */
|
|
3159
|
+
children: /* @__PURE__ */ jsx11(TabBar, {
|
|
3107
3160
|
tabs: genericTabs,
|
|
3108
3161
|
activeTabId,
|
|
3109
3162
|
onTabClick: switchTab,
|
|
3110
3163
|
onTabClose: closeTab,
|
|
3111
3164
|
onNewTab: addNewTab,
|
|
3112
|
-
leftSection: hideShowAllTerminalsButton ? undefined : /* @__PURE__ */
|
|
3165
|
+
leftSection: hideShowAllTerminalsButton ? undefined : /* @__PURE__ */ jsx11("button", {
|
|
3113
3166
|
onClick: () => onShowAllTerminalsChange?.(!showAllTerminals),
|
|
3114
3167
|
style: {
|
|
3115
3168
|
display: "flex",
|
|
@@ -3134,9 +3187,9 @@ var TabbedTerminalPanelInner = ({
|
|
|
3134
3187
|
}
|
|
3135
3188
|
},
|
|
3136
3189
|
title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
|
|
3137
|
-
children: showAllTerminals ? /* @__PURE__ */
|
|
3190
|
+
children: showAllTerminals ? /* @__PURE__ */ jsx11(Boxes, {
|
|
3138
3191
|
size: 14
|
|
3139
|
-
}) : /* @__PURE__ */
|
|
3192
|
+
}) : /* @__PURE__ */ jsx11(Box, {
|
|
3140
3193
|
size: 14
|
|
3141
3194
|
})
|
|
3142
3195
|
}),
|
|
@@ -3149,7 +3202,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3149
3202
|
canDropOnTab
|
|
3150
3203
|
})
|
|
3151
3204
|
}),
|
|
3152
|
-
/* @__PURE__ */
|
|
3205
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3153
3206
|
style: {
|
|
3154
3207
|
flex: 1,
|
|
3155
3208
|
display: "flex",
|
|
@@ -3203,7 +3256,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3203
3256
|
const customContent = renderTabContent(tab, isActive, sessionId, width);
|
|
3204
3257
|
if (customContent === null && tab.contentType === "terminal") {
|
|
3205
3258
|
const association = associations?.[tab.id];
|
|
3206
|
-
return /* @__PURE__ */
|
|
3259
|
+
return /* @__PURE__ */ jsx11("div", {
|
|
3207
3260
|
inert: !isActive,
|
|
3208
3261
|
style: {
|
|
3209
3262
|
position: "absolute",
|
|
@@ -3216,7 +3269,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3216
3269
|
}, tab.id);
|
|
3217
3270
|
}
|
|
3218
3271
|
const hasBeenActivated = activatedTabs.has(tab.id);
|
|
3219
|
-
return /* @__PURE__ */
|
|
3272
|
+
return /* @__PURE__ */ jsx11("div", {
|
|
3220
3273
|
inert: !isActive,
|
|
3221
3274
|
style: {
|
|
3222
3275
|
position: "absolute",
|
|
@@ -3230,7 +3283,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3230
3283
|
}
|
|
3231
3284
|
if (tab.contentType === "terminal") {
|
|
3232
3285
|
const association = associations?.[tab.id];
|
|
3233
|
-
return /* @__PURE__ */
|
|
3286
|
+
return /* @__PURE__ */ jsx11("div", {
|
|
3234
3287
|
inert: !isActive,
|
|
3235
3288
|
style: {
|
|
3236
3289
|
position: "absolute",
|
|
@@ -3242,7 +3295,7 @@ var TabbedTerminalPanelInner = ({
|
|
|
3242
3295
|
children: renderTerminalWithAssociation(tab, isActive, sessionId, association)
|
|
3243
3296
|
}, tab.id);
|
|
3244
3297
|
}
|
|
3245
|
-
return /* @__PURE__ */
|
|
3298
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3246
3299
|
inert: !isActive,
|
|
3247
3300
|
style: {
|
|
3248
3301
|
position: "absolute",
|
|
@@ -3254,20 +3307,20 @@ var TabbedTerminalPanelInner = ({
|
|
|
3254
3307
|
color: theme.colors.textSecondary
|
|
3255
3308
|
},
|
|
3256
3309
|
children: [
|
|
3257
|
-
/* @__PURE__ */
|
|
3310
|
+
/* @__PURE__ */ jsxs9("p", {
|
|
3258
3311
|
children: [
|
|
3259
3312
|
"Unknown content type: ",
|
|
3260
3313
|
tab.contentType
|
|
3261
3314
|
]
|
|
3262
3315
|
}),
|
|
3263
|
-
/* @__PURE__ */
|
|
3316
|
+
/* @__PURE__ */ jsx11("p", {
|
|
3264
3317
|
style: { fontSize: theme.fontSizes[0], marginTop: "8px" },
|
|
3265
3318
|
children: "Provide a renderTabContent prop to render custom tab types"
|
|
3266
3319
|
})
|
|
3267
3320
|
]
|
|
3268
3321
|
}, tab.id);
|
|
3269
3322
|
}),
|
|
3270
|
-
tabs.length === 0 && /* @__PURE__ */
|
|
3323
|
+
tabs.length === 0 && /* @__PURE__ */ jsxs9("div", {
|
|
3271
3324
|
style: {
|
|
3272
3325
|
display: "flex",
|
|
3273
3326
|
flexDirection: "column",
|
|
@@ -3277,11 +3330,11 @@ var TabbedTerminalPanelInner = ({
|
|
|
3277
3330
|
color: theme.colors.textSecondary
|
|
3278
3331
|
},
|
|
3279
3332
|
children: [
|
|
3280
|
-
/* @__PURE__ */
|
|
3333
|
+
/* @__PURE__ */ jsx11(TerminalIcon2, {
|
|
3281
3334
|
size: 32,
|
|
3282
3335
|
style: { opacity: 0.5, marginBottom: "16px" }
|
|
3283
3336
|
}),
|
|
3284
|
-
/* @__PURE__ */
|
|
3337
|
+
/* @__PURE__ */ jsx11("button", {
|
|
3285
3338
|
onClick: () => addNewTab(),
|
|
3286
3339
|
style: {
|
|
3287
3340
|
marginTop: "16px",
|
|
@@ -3299,6 +3352,9 @@ var TabbedTerminalPanelInner = ({
|
|
|
3299
3352
|
]
|
|
3300
3353
|
})
|
|
3301
3354
|
]
|
|
3355
|
+
}),
|
|
3356
|
+
/* @__PURE__ */ jsx11(TerminalStatusBar, {
|
|
3357
|
+
directory: tabs.find((t) => t.id === activeTabId)?.directory
|
|
3302
3358
|
})
|
|
3303
3359
|
]
|
|
3304
3360
|
});
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAKN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"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"}
|