@industry-theme/xterm-terminal-panel 0.8.6 → 0.8.7
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.css +12 -0
- package/dist/index.js +81 -3
- package/dist/src/components/ThemedTerminal.d.ts.map +1 -1
- package/dist/styles.css +12 -0
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -177,6 +177,18 @@
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
+
@keyframes copy-feedback-in {
|
|
181
|
+
from {
|
|
182
|
+
opacity: 0;
|
|
183
|
+
transform: translateX(-50%)translateY(-6px);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
to {
|
|
187
|
+
opacity: 1;
|
|
188
|
+
transform: translateX(-50%)translateY(0);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
180
192
|
.terminal-working-overlay {
|
|
181
193
|
animation: blinds-down .3s ease-out forwards;
|
|
182
194
|
}
|
package/dist/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
|
|
|
11
11
|
import { WebglAddon } from "@xterm/addon-webgl";
|
|
12
12
|
import { Terminal } from "@xterm/xterm";
|
|
13
13
|
import {
|
|
14
|
+
Check,
|
|
14
15
|
ChevronDown,
|
|
15
16
|
ExternalLink,
|
|
16
17
|
Monitor,
|
|
@@ -36,7 +37,7 @@ import {
|
|
|
36
37
|
// package.json
|
|
37
38
|
var package_default = {
|
|
38
39
|
name: "@industry-theme/xterm-terminal-panel",
|
|
39
|
-
version: "0.8.
|
|
40
|
+
version: "0.8.7",
|
|
40
41
|
description: "Industry-themed xterm.js terminal components with panel framework integration",
|
|
41
42
|
type: "module",
|
|
42
43
|
sideEffects: [
|
|
@@ -464,6 +465,9 @@ var ThemedTerminal = forwardRef(({
|
|
|
464
465
|
const [terminal, setTerminal] = useState(null);
|
|
465
466
|
const [isClosingOverlay, setIsClosingOverlay] = useState(false);
|
|
466
467
|
const [selectionDrag, setSelectionDrag] = useState(null);
|
|
468
|
+
const [copyFeedback, setCopyFeedback] = useState(false);
|
|
469
|
+
const copyFeedbackTimeoutRef = useRef(null);
|
|
470
|
+
const resolvedThemeRef = useRef(null);
|
|
467
471
|
const fitAddonRef = useRef(null);
|
|
468
472
|
const searchAddonRef = useRef(null);
|
|
469
473
|
const webglAddonRef = useRef(null);
|
|
@@ -772,6 +776,7 @@ var ThemedTerminal = forwardRef(({
|
|
|
772
776
|
const config = initialConfigRef.current;
|
|
773
777
|
const baseTheme = createTerminalTheme(theme);
|
|
774
778
|
const initialTheme = config.allowTransparency ? { ...baseTheme, background: config.backgroundColor ?? "rgba(0,0,0,0)" } : baseTheme;
|
|
779
|
+
resolvedThemeRef.current = initialTheme;
|
|
775
780
|
const term = new Terminal({
|
|
776
781
|
cursorBlink: config.cursorBlink,
|
|
777
782
|
cursorStyle: config.cursorStyle,
|
|
@@ -1037,9 +1042,13 @@ var ThemedTerminal = forwardRef(({
|
|
|
1037
1042
|
useEffect(() => {
|
|
1038
1043
|
if (terminal) {
|
|
1039
1044
|
const nextTheme = createTerminalTheme(theme);
|
|
1040
|
-
|
|
1045
|
+
const applied = transparentBg ? { ...nextTheme, background: transparentBg } : nextTheme;
|
|
1046
|
+
resolvedThemeRef.current = applied;
|
|
1047
|
+
if (!copyFeedback) {
|
|
1048
|
+
terminal.options.theme = applied;
|
|
1049
|
+
}
|
|
1041
1050
|
}
|
|
1042
|
-
}, [terminal, theme, transparentBg]);
|
|
1051
|
+
}, [terminal, theme, transparentBg, copyFeedback]);
|
|
1043
1052
|
useEffect(() => {
|
|
1044
1053
|
if (!terminal || !onReady) {
|
|
1045
1054
|
return;
|
|
@@ -1115,6 +1124,46 @@ var ThemedTerminal = forwardRef(({
|
|
|
1115
1124
|
scrollDisposable.dispose();
|
|
1116
1125
|
};
|
|
1117
1126
|
}, [terminal, enableSelectionDrag]);
|
|
1127
|
+
useEffect(() => {
|
|
1128
|
+
if (!terminal)
|
|
1129
|
+
return;
|
|
1130
|
+
const el = terminalRef.current;
|
|
1131
|
+
if (!el)
|
|
1132
|
+
return;
|
|
1133
|
+
const COPY_FEEDBACK_MS = 600;
|
|
1134
|
+
const handleCopy = () => {
|
|
1135
|
+
const text = terminal.getSelection();
|
|
1136
|
+
if (!text || text.trim().length === 0)
|
|
1137
|
+
return;
|
|
1138
|
+
setSelectionDrag(null);
|
|
1139
|
+
const base = resolvedThemeRef.current ?? terminal.options.theme ?? {};
|
|
1140
|
+
const flash = theme.colors.success + "aa";
|
|
1141
|
+
terminal.options.theme = {
|
|
1142
|
+
...base,
|
|
1143
|
+
selectionBackground: flash,
|
|
1144
|
+
selectionInactiveBackground: flash
|
|
1145
|
+
};
|
|
1146
|
+
setCopyFeedback(true);
|
|
1147
|
+
if (copyFeedbackTimeoutRef.current) {
|
|
1148
|
+
clearTimeout(copyFeedbackTimeoutRef.current);
|
|
1149
|
+
}
|
|
1150
|
+
copyFeedbackTimeoutRef.current = setTimeout(() => {
|
|
1151
|
+
if (resolvedThemeRef.current) {
|
|
1152
|
+
terminal.options.theme = resolvedThemeRef.current;
|
|
1153
|
+
}
|
|
1154
|
+
setCopyFeedback(false);
|
|
1155
|
+
copyFeedbackTimeoutRef.current = null;
|
|
1156
|
+
}, COPY_FEEDBACK_MS);
|
|
1157
|
+
};
|
|
1158
|
+
el.addEventListener("copy", handleCopy);
|
|
1159
|
+
return () => {
|
|
1160
|
+
el.removeEventListener("copy", handleCopy);
|
|
1161
|
+
if (copyFeedbackTimeoutRef.current) {
|
|
1162
|
+
clearTimeout(copyFeedbackTimeoutRef.current);
|
|
1163
|
+
copyFeedbackTimeoutRef.current = null;
|
|
1164
|
+
}
|
|
1165
|
+
};
|
|
1166
|
+
}, [terminal, theme]);
|
|
1118
1167
|
useEffect(() => {
|
|
1119
1168
|
const terminalElement = terminalRef.current;
|
|
1120
1169
|
if (!terminalElement)
|
|
@@ -1372,6 +1421,35 @@ var ThemedTerminal = forwardRef(({
|
|
|
1372
1421
|
metadata: selectionDragMetadata,
|
|
1373
1422
|
onDragEnd: () => setSelectionDrag(null)
|
|
1374
1423
|
}),
|
|
1424
|
+
copyFeedback && /* @__PURE__ */ jsxs3("div", {
|
|
1425
|
+
style: {
|
|
1426
|
+
position: "absolute",
|
|
1427
|
+
top: 12,
|
|
1428
|
+
left: "50%",
|
|
1429
|
+
transform: "translateX(-50%)",
|
|
1430
|
+
display: "flex",
|
|
1431
|
+
alignItems: "center",
|
|
1432
|
+
gap: 6,
|
|
1433
|
+
padding: "6px 12px",
|
|
1434
|
+
background: theme.colors.success,
|
|
1435
|
+
color: theme.colors.textOnPrimary ?? theme.colors.background,
|
|
1436
|
+
borderRadius: 6,
|
|
1437
|
+
fontSize: 12,
|
|
1438
|
+
fontWeight: 600,
|
|
1439
|
+
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
|
1440
|
+
boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
|
|
1441
|
+
pointerEvents: "none",
|
|
1442
|
+
zIndex: 1001,
|
|
1443
|
+
animation: "copy-feedback-in 0.15s ease-out"
|
|
1444
|
+
},
|
|
1445
|
+
children: [
|
|
1446
|
+
/* @__PURE__ */ jsx3(Check, {
|
|
1447
|
+
size: 14,
|
|
1448
|
+
strokeWidth: 3
|
|
1449
|
+
}),
|
|
1450
|
+
"Copied!"
|
|
1451
|
+
]
|
|
1452
|
+
}),
|
|
1375
1453
|
overlayState && /* @__PURE__ */ jsxs3("div", {
|
|
1376
1454
|
style: {
|
|
1377
1455
|
position: "absolute",
|
|
@@ -1 +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;
|
|
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;AAoC3D,OAAO,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAGV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,KAAK,EAAE,KAAK,CAAC;CACd;AAsBD,eAAO,MAAM,cAAc,4HA45C1B,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -212,6 +212,18 @@
|
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
+
/* Copy confirmation pill entrance */
|
|
216
|
+
@keyframes copy-feedback-in {
|
|
217
|
+
from {
|
|
218
|
+
opacity: 0;
|
|
219
|
+
transform: translateX(-50%) translateY(-6px);
|
|
220
|
+
}
|
|
221
|
+
to {
|
|
222
|
+
opacity: 1;
|
|
223
|
+
transform: translateX(-50%) translateY(0);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
215
227
|
/* Working overlay container */
|
|
216
228
|
.terminal-working-overlay {
|
|
217
229
|
animation: blinds-down 0.3s ease-out forwards;
|