@mp-lb/termkit 0.2.3 → 0.2.4
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/README.md +2 -0
- package/dist/Terminal.d.ts +3 -0
- package/dist/Terminal.d.ts.map +1 -1
- package/dist/Terminal.js +14 -2
- package/dist/fitTerminal.d.ts.map +1 -1
- package/dist/fitTerminal.js +1 -30
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -26,4 +26,6 @@ export const Shell = () => (
|
|
|
26
26
|
|
|
27
27
|
`api` represents your host application's control-plane adapter. Keep the provider configuration stable. Unmounting a terminal detaches the view; the shell keeps running in the daemon. Remounting the same session ID reattaches to its current screen.
|
|
28
28
|
|
|
29
|
+
TermKit includes IBM Plex Mono and Noto Sans Symbols 2 for its default terminal font stack. Applications can provide their own font family through the terminal options.
|
|
30
|
+
|
|
29
31
|
See the [guide](../../docs/public/index.mdx) and [generated reference](../../docs/public/api/index.mdx). The Node daemon and optional tRPC adapter live in sibling packages and are kept out of the browser entrypoint.
|
package/dist/Terminal.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { type CSSProperties } from "react";
|
|
2
2
|
import { type ITheme } from "@xterm/xterm";
|
|
3
3
|
import "@xterm/xterm/css/xterm.css";
|
|
4
|
+
import "@fontsource/ibm-plex-mono/400.css";
|
|
5
|
+
import "@fontsource/ibm-plex-mono/700.css";
|
|
6
|
+
import "@fontsource/noto-sans-symbols-2/400.css";
|
|
4
7
|
import { type TerminalColors } from "./terminalColors.js";
|
|
5
8
|
export interface TerminalProps {
|
|
6
9
|
session: string;
|
package/dist/Terminal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Terminal.d.ts","sourceRoot":"","sources":["../src/Terminal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAqB,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"Terminal.d.ts","sourceRoot":"","sources":["../src/Terminal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAqB,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AAUjD,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,aAAa;IAK5B,OAAO,EAAE,MAAM,CAAC;IAIhB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAIxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAGzB,cAAc,CAAC,EAAE,YAAY,GAAG,kBAAkB,CAAC;IAInD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,cAAc,CAAC;IAIxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,MAAM,EACN,SAAiB,EACjB,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAmC,EACnC,UAAU,EACV,MAAM,EACN,KAAK,EACL,OAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,aAAa,+BA+cf"}
|
package/dist/Terminal.js
CHANGED
|
@@ -3,6 +3,9 @@ import { useEffect, useRef } from "react";
|
|
|
3
3
|
import { Terminal as XTerm } from "@xterm/xterm";
|
|
4
4
|
import { FitAddon } from "@xterm/addon-fit";
|
|
5
5
|
import "@xterm/xterm/css/xterm.css";
|
|
6
|
+
import "@fontsource/ibm-plex-mono/400.css";
|
|
7
|
+
import "@fontsource/ibm-plex-mono/700.css";
|
|
8
|
+
import "@fontsource/noto-sans-symbols-2/400.css";
|
|
6
9
|
import { CLOSE_SESSION_GONE, HEARTBEAT_INTERVAL_MS, HEARTBEAT_PONG_GRACE_MS, } from "@mp-lb/termkit-core";
|
|
7
10
|
import { useTermkitContext } from "./useTermkitContext.js";
|
|
8
11
|
import { createTerminalWriteQueue } from "./createTerminalWriteQueue.js";
|
|
@@ -49,7 +52,7 @@ export function Terminal({ session, params, autoFocus = false, dismissOnView = t
|
|
|
49
52
|
opts.background,
|
|
50
53
|
};
|
|
51
54
|
const term = new XTerm({
|
|
52
|
-
fontFamily: opts.fontFamily ?? '"IBM Plex Mono", monospace',
|
|
55
|
+
fontFamily: opts.fontFamily ?? '"IBM Plex Mono", "Noto Sans Symbols 2", monospace',
|
|
53
56
|
fontSize: opts.fontSize ?? 13,
|
|
54
57
|
cursorBlink: opts.cursorBlink ?? true,
|
|
55
58
|
theme: terminalTheme,
|
|
@@ -361,7 +364,16 @@ export function Terminal({ session, params, autoFocus = false, dismissOnView = t
|
|
|
361
364
|
window.addEventListener("focus", refreshAfterLayout);
|
|
362
365
|
window.addEventListener("pageshow", refreshAfterLayout);
|
|
363
366
|
document.addEventListener("visibilitychange", refreshWhenVisible);
|
|
364
|
-
document.fonts?.ready
|
|
367
|
+
document.fonts?.ready
|
|
368
|
+
.then(() => {
|
|
369
|
+
if (disposed)
|
|
370
|
+
return;
|
|
371
|
+
// xterm measures cells when opened; loading a web font does not remeasure
|
|
372
|
+
// them. A harmless font-family change asks xterm to measure again.
|
|
373
|
+
term.options.fontFamily = `${term.options.fontFamily} `;
|
|
374
|
+
refreshLayoutBurst();
|
|
375
|
+
})
|
|
376
|
+
.catch(() => { });
|
|
365
377
|
return () => {
|
|
366
378
|
disposed = true;
|
|
367
379
|
if (reconnectTimer !== null)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fitTerminal.d.ts","sourceRoot":"","sources":["../src/fitTerminal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,cAAc,CAAC;AAEtD,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;
|
|
1
|
+
{"version":3,"file":"fitTerminal.d.ts","sourceRoot":"","sources":["../src/fitTerminal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,cAAc,CAAC;AAEtD,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,WAAW,GACtB,WAAW,WAAW,EACtB,MAAM,KAAK,EACX,UAAU,QAAQ,EAClB,UAAU,YAAY,GAAG,IAAI,KAC5B,YAAY,GAAG,IAejB,CAAC"}
|
package/dist/fitTerminal.js
CHANGED
|
@@ -1,36 +1,7 @@
|
|
|
1
|
-
function parsePixels(value) {
|
|
2
|
-
const parsed = Number.parseFloat(value);
|
|
3
|
-
return Number.isFinite(parsed) ? parsed : 0;
|
|
4
|
-
}
|
|
5
|
-
function fallbackDimensions(container) {
|
|
6
|
-
if (typeof container.querySelector !== "function")
|
|
7
|
-
return null;
|
|
8
|
-
const terminal = container.querySelector(".xterm");
|
|
9
|
-
const measure = container.querySelector(".xterm-helper-textarea");
|
|
10
|
-
if (!terminal || !measure)
|
|
11
|
-
return null;
|
|
12
|
-
const terminalStyle = window.getComputedStyle(terminal);
|
|
13
|
-
const cell = measure.getBoundingClientRect();
|
|
14
|
-
if (cell.width <= 0 || cell.height <= 0)
|
|
15
|
-
return null;
|
|
16
|
-
const paddingX = parsePixels(terminalStyle.paddingLeft) +
|
|
17
|
-
parsePixels(terminalStyle.paddingRight);
|
|
18
|
-
const paddingY = parsePixels(terminalStyle.paddingTop) +
|
|
19
|
-
parsePixels(terminalStyle.paddingBottom);
|
|
20
|
-
const scrollbarWidth = 14;
|
|
21
|
-
const availableWidth = Math.max(0, container.clientWidth - paddingX - scrollbarWidth);
|
|
22
|
-
const availableHeight = Math.max(0, container.clientHeight - paddingY);
|
|
23
|
-
return {
|
|
24
|
-
cols: Math.max(2, Math.floor(availableWidth / cell.width)),
|
|
25
|
-
rows: Math.max(1, Math.floor(availableHeight / cell.height)),
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
1
|
export const fitTerminal = (container, term, fitAddon, lastSize) => {
|
|
29
2
|
if (container.clientWidth === 0 || container.clientHeight === 0)
|
|
30
3
|
return lastSize;
|
|
31
|
-
const
|
|
32
|
-
const proposed = fitAddon.proposeDimensions();
|
|
33
|
-
const nextSize = fallback ?? proposed;
|
|
4
|
+
const nextSize = fitAddon.proposeDimensions();
|
|
34
5
|
if (!nextSize)
|
|
35
6
|
return lastSize;
|
|
36
7
|
if (term.cols !== nextSize.cols || term.rows !== nextSize.rows) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mp-lb/termkit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
],
|
|
19
19
|
"description": "Build terminal experiences.",
|
|
20
20
|
"dependencies": {
|
|
21
|
+
"@fontsource/ibm-plex-mono": "5.3.0",
|
|
22
|
+
"@fontsource/noto-sans-symbols-2": "5.3.0",
|
|
21
23
|
"@xterm/addon-fit": "^0.11.0",
|
|
22
24
|
"@xterm/xterm": "^6.0.0",
|
|
23
25
|
"zustand": "^5.0.14",
|