@mks2508/mks-ui 0.9.0 → 0.11.0
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/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts +55 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.js +62 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts +92 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts +71 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.js +114 -0
- package/dist/react-ui/blocks/Terminal/chrome.d.ts +1 -0
- package/dist/react-ui/blocks/Terminal/chrome.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/chrome.js +3 -1
- package/dist/react-ui/blocks/Terminal/index.d.ts +1 -0
- package/dist/react-ui/blocks/Terminal/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/index.js +3 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.js +20 -9
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.js +19 -6
- package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.js +31 -9
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts +31 -2
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.js +41 -5
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts +22 -0
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts +8 -0
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.js +54 -12
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts +52 -0
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.js +160 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts +46 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.js +195 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts +39 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.js +251 -0
- package/dist/react-ui/blocks/Terminal/renderers/index.d.ts +20 -0
- package/dist/react-ui/blocks/Terminal/renderers/index.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/types.d.ts +47 -0
- package/dist/react-ui/blocks/Terminal/renderers/types.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/restty.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/restty.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/restty.js +2 -1
- package/dist/react-ui/blocks/Terminal/wterm.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/wterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/wterm.js +2 -1
- package/dist/react-ui/blocks/Terminal/xterm.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/xterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/xterm.js +2 -1
- package/dist/react-ui/index.d.ts +2 -2
- package/dist/react-ui/index.d.ts.map +1 -1
- package/dist/react-ui/index.js +5 -3
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts +30 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.js +31 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts +66 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/index.d.ts +79 -0
- package/dist/react-ui/ui/MiddleTruncate/index.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/index.js +164 -0
- package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.js +1 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts +7 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts.map +1 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.js +21 -17
- package/dist/react-ui/ui/index.d.ts +1 -0
- package/dist/react-ui/ui/index.d.ts.map +1 -1
- package/dist/react-ui/ui/index.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Style slots and helpers for the public {@link ChromeShell} primitive.
|
|
3
|
+
*
|
|
4
|
+
* Reuses the upstream `terminalChromeStyles` / `terminalChromeVariants`
|
|
5
|
+
* tokens so visual parity with {@link TerminalPanelChrome} is preserved.
|
|
6
|
+
* Layout integrity is encoded here (regla 1 overflow blindado, regla 4
|
|
7
|
+
* flex shrink discipline) — keep these tokens stable.
|
|
8
|
+
*
|
|
9
|
+
* @module @mks2508/mks-ui/react/blocks/Terminal/ChromeShell/styles
|
|
10
|
+
*/
|
|
11
|
+
import type { StyleSlots } from '../../../../core/types';
|
|
12
|
+
import { terminalChromeStyles, terminalChromeVariants } from '../panel/TerminalPanelChrome.styles';
|
|
13
|
+
import type { TChromeShellAccent, TChromeShellSize, TChromeShellSlot, TChromeShellVariant } from './ChromeShell.types';
|
|
14
|
+
/**
|
|
15
|
+
* Default class strings per slot.
|
|
16
|
+
*
|
|
17
|
+
* - `root`: layout (flex column, isolate stacking context, overflow hidden).
|
|
18
|
+
* Visual classes (glass, rounded, accent border) come from
|
|
19
|
+
* {@link terminalChromeVariants} composed in the component.
|
|
20
|
+
* - `toolbar`: `shrink-0` so it never collapses when content grows.
|
|
21
|
+
* - `content`: `flex-1 min-h-0 overflow-hidden` so virtual lists scroll
|
|
22
|
+
* internally and never push the toolbar / footer off the viewport
|
|
23
|
+
* (regla 1).
|
|
24
|
+
* - `footer`: `shrink-0` + `tabular-nums` for stable counters.
|
|
25
|
+
*/
|
|
26
|
+
export declare const chromeShellStyles: StyleSlots<TChromeShellSlot>;
|
|
27
|
+
/**
|
|
28
|
+
* Toolbar height per density.
|
|
29
|
+
*
|
|
30
|
+
* Layout integrity: heights use the 4/8 token scale (regla 8) and
|
|
31
|
+
* keep hit areas ≥40px (regla 7) when consumers pack icon buttons.
|
|
32
|
+
*/
|
|
33
|
+
export declare const CHROME_SHELL_TOOLBAR_HEIGHT: Record<TChromeShellSize, string>;
|
|
34
|
+
/**
|
|
35
|
+
* Footer height per density.
|
|
36
|
+
*/
|
|
37
|
+
export declare const CHROME_SHELL_FOOTER_HEIGHT: Record<TChromeShellSize, string>;
|
|
38
|
+
/**
|
|
39
|
+
* Resolve which accent gradient class string to apply.
|
|
40
|
+
*
|
|
41
|
+
* Priority: explicit `accent` prop > variant-derived gradient.
|
|
42
|
+
* Returns an empty string when the accent line should be omitted.
|
|
43
|
+
*
|
|
44
|
+
* @param variant - The chrome variant.
|
|
45
|
+
* @param accent - Optional explicit accent override.
|
|
46
|
+
* @returns A Tailwind class string for the accent gradient, or `''`.
|
|
47
|
+
*/
|
|
48
|
+
export declare function resolveChromeShellAccent(variant: TChromeShellVariant, accent: TChromeShellAccent | undefined): string;
|
|
49
|
+
/**
|
|
50
|
+
* Re-export the upstream variant fn so the component can compose it
|
|
51
|
+
* with {@link chromeShellStyles.root} without re-importing the panel
|
|
52
|
+
* styles file directly.
|
|
53
|
+
*/
|
|
54
|
+
export { terminalChromeStyles, terminalChromeVariants };
|
|
55
|
+
//# sourceMappingURL=ChromeShell.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChromeShell.styles.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAEL,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAAU,CAAC,gBAAgB,CAU1D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAGxE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAGvE,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,kBAAkB,GAAG,SAAS,GACrC,MAAM,CAYR;AAED;;;;GAIG;AACH,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "../panel/TerminalPanelChrome.styles.js";
|
|
2
|
+
|
|
3
|
+
//#region src/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.ts
|
|
4
|
+
/**
|
|
5
|
+
* Default class strings per slot.
|
|
6
|
+
*
|
|
7
|
+
* - `root`: layout (flex column, isolate stacking context, overflow hidden).
|
|
8
|
+
* Visual classes (glass, rounded, accent border) come from
|
|
9
|
+
* {@link terminalChromeVariants} composed in the component.
|
|
10
|
+
* - `toolbar`: `shrink-0` so it never collapses when content grows.
|
|
11
|
+
* - `content`: `flex-1 min-h-0 overflow-hidden` so virtual lists scroll
|
|
12
|
+
* internally and never push the toolbar / footer off the viewport
|
|
13
|
+
* (regla 1).
|
|
14
|
+
* - `footer`: `shrink-0` + `tabular-nums` for stable counters.
|
|
15
|
+
*/
|
|
16
|
+
const chromeShellStyles = {
|
|
17
|
+
root: "relative flex flex-col isolate",
|
|
18
|
+
noiseOverlay: "pointer-events-none absolute inset-0 opacity-[0.025] mix-blend-overlay",
|
|
19
|
+
accentLine: "absolute top-0 left-0 right-0 h-px z-10 pointer-events-none",
|
|
20
|
+
toolbar: "relative z-10 flex items-center gap-2 px-3 shrink-0 border-b border-border/30 motion-reduce:transition-none",
|
|
21
|
+
content: "relative flex-1 min-h-0 overflow-hidden",
|
|
22
|
+
footer: "relative z-10 flex items-center px-3 shrink-0 border-t border-border/30 text-[11px] [font-variant-numeric:tabular-nums]"
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Toolbar height per density.
|
|
26
|
+
*
|
|
27
|
+
* Layout integrity: heights use the 4/8 token scale (regla 8) and
|
|
28
|
+
* keep hit areas ≥40px (regla 7) when consumers pack icon buttons.
|
|
29
|
+
*/
|
|
30
|
+
const CHROME_SHELL_TOOLBAR_HEIGHT = {
|
|
31
|
+
default: "h-12 py-2",
|
|
32
|
+
compact: "h-9 py-1.5"
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Footer height per density.
|
|
36
|
+
*/
|
|
37
|
+
const CHROME_SHELL_FOOTER_HEIGHT = {
|
|
38
|
+
default: "h-8 py-1.5",
|
|
39
|
+
compact: "h-7 py-1"
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Resolve which accent gradient class string to apply.
|
|
43
|
+
*
|
|
44
|
+
* Priority: explicit `accent` prop > variant-derived gradient.
|
|
45
|
+
* Returns an empty string when the accent line should be omitted.
|
|
46
|
+
*
|
|
47
|
+
* @param variant - The chrome variant.
|
|
48
|
+
* @param accent - Optional explicit accent override.
|
|
49
|
+
* @returns A Tailwind class string for the accent gradient, or `''`.
|
|
50
|
+
*/
|
|
51
|
+
function resolveChromeShellAccent(variant, accent) {
|
|
52
|
+
if (accent === "none") return "";
|
|
53
|
+
if (accent === "red") return ACCENT_GRADIENTS.error ?? "";
|
|
54
|
+
if (accent === "magenta") return ACCENT_GRADIENTS.default ?? "";
|
|
55
|
+
if (accent === "amber" || accent === "cyan") return ACCENT_GRADIENTS.default ?? "";
|
|
56
|
+
if (variant === "minimal") return "";
|
|
57
|
+
if (variant === "error") return ACCENT_GRADIENTS.error ?? "";
|
|
58
|
+
return ACCENT_GRADIENTS.default ?? "";
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
//#endregion
|
|
62
|
+
export { CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, chromeShellStyles, resolveChromeShellAccent };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types for the public {@link ChromeShell} primitive.
|
|
3
|
+
*
|
|
4
|
+
* `ChromeShell` is the chrome-less wrapper used to compose terminal
|
|
5
|
+
* blocks (logs viewer, interactive panel, custom layouts) without
|
|
6
|
+
* forcing the macOS-style header / traffic lights / session tabs
|
|
7
|
+
* baked into {@link ITerminalPanelChromeProps}.
|
|
8
|
+
*
|
|
9
|
+
* Consumers that want full control over their own toolbar / footer
|
|
10
|
+
* use this primitive directly. The richer {@link TerminalPanelChrome}
|
|
11
|
+
* is implemented on top of it.
|
|
12
|
+
*
|
|
13
|
+
* @module @mks2508/mks-ui/react/blocks/Terminal/ChromeShell/types
|
|
14
|
+
*/
|
|
15
|
+
import type { ReactNode } from 'react';
|
|
16
|
+
import type { SlotOverrides } from '../../../../core/types';
|
|
17
|
+
/**
|
|
18
|
+
* Visual variant for the chrome shell.
|
|
19
|
+
*
|
|
20
|
+
* - `default`: glass-heavy + magenta accent line on the top edge.
|
|
21
|
+
* - `minimal`: glass-heavy without accent line (e.g. nested in a drawer).
|
|
22
|
+
* - `error`: glass-heavy + red accent line (typically used when the
|
|
23
|
+
* stream errored or the connection is broken).
|
|
24
|
+
*/
|
|
25
|
+
export type TChromeShellVariant = 'default' | 'minimal' | 'error';
|
|
26
|
+
/**
|
|
27
|
+
* Density variant for vertical rhythm of the toolbar / footer slots.
|
|
28
|
+
*
|
|
29
|
+
* - `default`: full padding (toolbar h-12, footer h-8).
|
|
30
|
+
* - `compact`: reduced padding for nested usage (toolbar h-9, footer h-7).
|
|
31
|
+
*/
|
|
32
|
+
export type TChromeShellSize = 'default' | 'compact';
|
|
33
|
+
/**
|
|
34
|
+
* Optional accent gradient color override on the top edge.
|
|
35
|
+
*
|
|
36
|
+
* When set explicitly it wins over the gradient derived from
|
|
37
|
+
* {@link TChromeShellVariant}. Use `'none'` to disable the accent
|
|
38
|
+
* line entirely (even when the variant would render one).
|
|
39
|
+
*
|
|
40
|
+
* `'amber'` and `'cyan'` currently fall back to the default magenta
|
|
41
|
+
* gradient — they are reserved for future palette extensions and
|
|
42
|
+
* kept on the public surface so consumers can opt-in early.
|
|
43
|
+
*/
|
|
44
|
+
export type TChromeShellAccent = 'cyan' | 'magenta' | 'amber' | 'red' | 'none';
|
|
45
|
+
/**
|
|
46
|
+
* Slot names exposed by {@link ChromeShell} for class overrides.
|
|
47
|
+
*/
|
|
48
|
+
export type TChromeShellSlot = 'root' | 'noiseOverlay' | 'accentLine' | 'toolbar' | 'content' | 'footer';
|
|
49
|
+
/**
|
|
50
|
+
* Props for the {@link ChromeShell} component.
|
|
51
|
+
*
|
|
52
|
+
* `ChromeShell` owns layout integrity: toolbar / footer are `shrink-0`,
|
|
53
|
+
* the content area is `flex-1 min-h-0 overflow-hidden`, the root has
|
|
54
|
+
* `isolate` to keep `backdrop-blur` confined to the panel's stacking
|
|
55
|
+
* context, and the noise overlay is hidden from assistive technology.
|
|
56
|
+
*/
|
|
57
|
+
export interface IChromeShellProps {
|
|
58
|
+
/** Visual variant. Defaults to `'default'`. */
|
|
59
|
+
variant?: TChromeShellVariant;
|
|
60
|
+
/** Density. Defaults to `'default'`. */
|
|
61
|
+
size?: TChromeShellSize;
|
|
62
|
+
/**
|
|
63
|
+
* Optional accent gradient override on the top edge. When omitted,
|
|
64
|
+
* the variant decides (default → magenta, error → red, minimal → none).
|
|
65
|
+
* Pass `'none'` to disable the accent line independent of the variant.
|
|
66
|
+
*/
|
|
67
|
+
accent?: TChromeShellAccent;
|
|
68
|
+
/** Apply CRT scanlines + bloom to the content area. */
|
|
69
|
+
crtEffect?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Toolbar slot rendered above the content area. Receives `role="toolbar"`
|
|
72
|
+
* and `shrink-0` so its height is preserved when content overflows.
|
|
73
|
+
*/
|
|
74
|
+
toolbar?: ReactNode;
|
|
75
|
+
/**
|
|
76
|
+
* Footer slot rendered below the content area. Tabular numerics
|
|
77
|
+
* are enabled so counters do not jitter while updating.
|
|
78
|
+
*/
|
|
79
|
+
footer?: ReactNode;
|
|
80
|
+
/** Main content (viewer / terminal area). Lives inside `flex-1 min-h-0`. */
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
/**
|
|
83
|
+
* ARIA region label. When provided, the root receives `role="region"`
|
|
84
|
+
* with the label so screen readers can announce the panel.
|
|
85
|
+
*/
|
|
86
|
+
ariaLabel?: string;
|
|
87
|
+
/** Slot class overrides for sub-regions. */
|
|
88
|
+
slots?: SlotOverrides<TChromeShellSlot>;
|
|
89
|
+
/** Additional classes appended to the root. */
|
|
90
|
+
className?: string;
|
|
91
|
+
}
|
|
92
|
+
//# sourceMappingURL=ChromeShell.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChromeShell.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AAErD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE/E;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,cAAc,GACd,YAAY,GACZ,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE9B,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;;;OAIG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAE5B,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAExC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<ChromeShell>` — public chrome-less wrapper for terminal blocks.
|
|
3
|
+
*
|
|
4
|
+
* Minimal glassmorphic primitive that owns the structural skeleton
|
|
5
|
+
* shared by every terminal panel: optional 1px accent line, optional
|
|
6
|
+
* toolbar slot, flex-1 content region, optional footer slot. It does
|
|
7
|
+
* NOT render the macOS-style header / traffic lights / session tabs
|
|
8
|
+
* baked into {@link TerminalPanelChrome} — those belong to the higher
|
|
9
|
+
* level panel that composes on top of this primitive.
|
|
10
|
+
*
|
|
11
|
+
* The richer {@link TerminalPanelChrome} delegates its skeleton to this
|
|
12
|
+
* component (variant B nativa upstream — v0.11.0). Consumers who want
|
|
13
|
+
* full toolbar control should target this primitive directly.
|
|
14
|
+
*
|
|
15
|
+
* Layout integrity (`~/dotfiles/guidelines/layout-integrity.md`):
|
|
16
|
+
* - Regla 1: content area is `flex-1 min-h-0 overflow-hidden` so virtual
|
|
17
|
+
* lists scroll internally and never push toolbar / footer offscreen.
|
|
18
|
+
* - Regla 3: root has `isolate` because the variants apply
|
|
19
|
+
* `backdrop-blur` via `glass-heavy` — without isolate, the blur
|
|
20
|
+
* sangra al stacking context del padre.
|
|
21
|
+
* - Regla 4: toolbar / footer are `shrink-0`, content is `flex-1`.
|
|
22
|
+
* - Regla 9: no `transition-all`. Toolbar honors `motion-reduce`.
|
|
23
|
+
* - Regla 10: `role="region"` + optional `aria-label`. Toolbar slot is
|
|
24
|
+
* wrapped in `role="toolbar"`. Noise overlay is `aria-hidden`.
|
|
25
|
+
*
|
|
26
|
+
* @module @mks2508/mks-ui/react/blocks/Terminal/ChromeShell
|
|
27
|
+
*/
|
|
28
|
+
import type { IChromeShellProps } from './ChromeShell.types';
|
|
29
|
+
/**
|
|
30
|
+
* Public chrome-less wrapper for terminal blocks.
|
|
31
|
+
*
|
|
32
|
+
* Layout: optional accent line top → optional toolbar (`shrink-0`,
|
|
33
|
+
* `role="toolbar"`) → flex-1 content (`min-h-0 overflow-hidden`) →
|
|
34
|
+
* optional footer (`shrink-0`, tabular numerics). No forced header,
|
|
35
|
+
* no traffic lights, no session tabs. Visuals (glass, rounded, accent
|
|
36
|
+
* border) come from the upstream `terminalChromeVariants` so this
|
|
37
|
+
* primitive stays in lockstep with {@link TerminalPanelChrome}.
|
|
38
|
+
*
|
|
39
|
+
* @param props - See {@link IChromeShellProps}.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* import { ChromeShell } from '@mks2508/mks-ui/react/blocks/Terminal';
|
|
44
|
+
*
|
|
45
|
+
* <ChromeShell
|
|
46
|
+
* variant="default"
|
|
47
|
+
* ariaLabel="Container logs"
|
|
48
|
+
* toolbar={<MyToolbar />}
|
|
49
|
+
* footer={<MyFooter />}
|
|
50
|
+
* >
|
|
51
|
+
* <LogLinesViewer entries={entries} />
|
|
52
|
+
* </ChromeShell>
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```tsx
|
|
57
|
+
* // Compact density, error accent, CRT scanlines on the content.
|
|
58
|
+
* <ChromeShell
|
|
59
|
+
* variant="error"
|
|
60
|
+
* size="compact"
|
|
61
|
+
* crtEffect
|
|
62
|
+
* ariaLabel="Stream errored"
|
|
63
|
+
* >
|
|
64
|
+
* <pre>{errorLog}</pre>
|
|
65
|
+
* </ChromeShell>
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
export declare function ChromeShell({ variant, size, accent, crtEffect, toolbar, footer, children, ariaLabel, slots, className, }: IChromeShellProps): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
export { chromeShellStyles, CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, resolveChromeShellAccent, } from './ChromeShell.styles';
|
|
70
|
+
export type { IChromeShellProps, TChromeShellAccent, TChromeShellSize, TChromeShellSlot, TChromeShellVariant, } from './ChromeShell.types';
|
|
71
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/ChromeShell/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAcH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,IAAgB,EAChB,MAAM,EACN,SAAiB,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,iBAAiB,2CA0EnB;AAGD,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,2BAA2B,EAC3B,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../../../lib/utils.js";
|
|
4
|
+
import { terminalChromeStyles, terminalChromeVariants } from "../panel/TerminalPanelChrome.styles.js";
|
|
5
|
+
import { NOISE_TEXTURE_SVG } from "../panel/TerminalPanelChrome.js";
|
|
6
|
+
import { CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, chromeShellStyles, resolveChromeShellAccent } from "./ChromeShell.styles.js";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
|
|
9
|
+
//#region src/react-ui/blocks/Terminal/ChromeShell/index.tsx
|
|
10
|
+
/**
|
|
11
|
+
* `<ChromeShell>` — public chrome-less wrapper for terminal blocks.
|
|
12
|
+
*
|
|
13
|
+
* Minimal glassmorphic primitive that owns the structural skeleton
|
|
14
|
+
* shared by every terminal panel: optional 1px accent line, optional
|
|
15
|
+
* toolbar slot, flex-1 content region, optional footer slot. It does
|
|
16
|
+
* NOT render the macOS-style header / traffic lights / session tabs
|
|
17
|
+
* baked into {@link TerminalPanelChrome} — those belong to the higher
|
|
18
|
+
* level panel that composes on top of this primitive.
|
|
19
|
+
*
|
|
20
|
+
* The richer {@link TerminalPanelChrome} delegates its skeleton to this
|
|
21
|
+
* component (variant B nativa upstream — v0.11.0). Consumers who want
|
|
22
|
+
* full toolbar control should target this primitive directly.
|
|
23
|
+
*
|
|
24
|
+
* Layout integrity (`~/dotfiles/guidelines/layout-integrity.md`):
|
|
25
|
+
* - Regla 1: content area is `flex-1 min-h-0 overflow-hidden` so virtual
|
|
26
|
+
* lists scroll internally and never push toolbar / footer offscreen.
|
|
27
|
+
* - Regla 3: root has `isolate` because the variants apply
|
|
28
|
+
* `backdrop-blur` via `glass-heavy` — without isolate, the blur
|
|
29
|
+
* sangra al stacking context del padre.
|
|
30
|
+
* - Regla 4: toolbar / footer are `shrink-0`, content is `flex-1`.
|
|
31
|
+
* - Regla 9: no `transition-all`. Toolbar honors `motion-reduce`.
|
|
32
|
+
* - Regla 10: `role="region"` + optional `aria-label`. Toolbar slot is
|
|
33
|
+
* wrapped in `role="toolbar"`. Noise overlay is `aria-hidden`.
|
|
34
|
+
*
|
|
35
|
+
* @module @mks2508/mks-ui/react/blocks/Terminal/ChromeShell
|
|
36
|
+
*/
|
|
37
|
+
/**
|
|
38
|
+
* Public chrome-less wrapper for terminal blocks.
|
|
39
|
+
*
|
|
40
|
+
* Layout: optional accent line top → optional toolbar (`shrink-0`,
|
|
41
|
+
* `role="toolbar"`) → flex-1 content (`min-h-0 overflow-hidden`) →
|
|
42
|
+
* optional footer (`shrink-0`, tabular numerics). No forced header,
|
|
43
|
+
* no traffic lights, no session tabs. Visuals (glass, rounded, accent
|
|
44
|
+
* border) come from the upstream `terminalChromeVariants` so this
|
|
45
|
+
* primitive stays in lockstep with {@link TerminalPanelChrome}.
|
|
46
|
+
*
|
|
47
|
+
* @param props - See {@link IChromeShellProps}.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* import { ChromeShell } from '@mks2508/mks-ui/react/blocks/Terminal';
|
|
52
|
+
*
|
|
53
|
+
* <ChromeShell
|
|
54
|
+
* variant="default"
|
|
55
|
+
* ariaLabel="Container logs"
|
|
56
|
+
* toolbar={<MyToolbar />}
|
|
57
|
+
* footer={<MyFooter />}
|
|
58
|
+
* >
|
|
59
|
+
* <LogLinesViewer entries={entries} />
|
|
60
|
+
* </ChromeShell>
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```tsx
|
|
65
|
+
* // Compact density, error accent, CRT scanlines on the content.
|
|
66
|
+
* <ChromeShell
|
|
67
|
+
* variant="error"
|
|
68
|
+
* size="compact"
|
|
69
|
+
* crtEffect
|
|
70
|
+
* ariaLabel="Stream errored"
|
|
71
|
+
* >
|
|
72
|
+
* <pre>{errorLog}</pre>
|
|
73
|
+
* </ChromeShell>
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
function ChromeShell({ variant = "default", size = "default", accent, crtEffect = false, toolbar, footer, children, ariaLabel, slots, className }) {
|
|
77
|
+
const accentGradient = resolveChromeShellAccent(variant, accent);
|
|
78
|
+
const rootBase = terminalChromeVariants({
|
|
79
|
+
variant,
|
|
80
|
+
size
|
|
81
|
+
});
|
|
82
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
83
|
+
role: "region",
|
|
84
|
+
"aria-label": ariaLabel,
|
|
85
|
+
className: cn(rootBase, terminalChromeStyles.root, chromeShellStyles.root, slots?.root, className),
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx("div", {
|
|
88
|
+
"aria-hidden": "true",
|
|
89
|
+
className: cn(chromeShellStyles.noiseOverlay, slots?.noiseOverlay),
|
|
90
|
+
style: { backgroundImage: `url(${NOISE_TEXTURE_SVG})` }
|
|
91
|
+
}),
|
|
92
|
+
accentGradient ? /* @__PURE__ */ jsx("div", {
|
|
93
|
+
"aria-hidden": "true",
|
|
94
|
+
className: cn(chromeShellStyles.accentLine, accentGradient, slots?.accentLine)
|
|
95
|
+
}) : null,
|
|
96
|
+
toolbar ? /* @__PURE__ */ jsx("div", {
|
|
97
|
+
role: "toolbar",
|
|
98
|
+
className: cn(chromeShellStyles.toolbar, CHROME_SHELL_TOOLBAR_HEIGHT[size], slots?.toolbar),
|
|
99
|
+
children: toolbar
|
|
100
|
+
}) : null,
|
|
101
|
+
/* @__PURE__ */ jsx("div", {
|
|
102
|
+
className: cn(chromeShellStyles.content, crtEffect && "terminal-crt terminal-bloom", slots?.content),
|
|
103
|
+
children
|
|
104
|
+
}),
|
|
105
|
+
footer ? /* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: cn(chromeShellStyles.footer, CHROME_SHELL_FOOTER_HEIGHT[size], slots?.footer),
|
|
107
|
+
children: footer
|
|
108
|
+
}) : null
|
|
109
|
+
]
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//#endregion
|
|
114
|
+
export { ChromeShell };
|
|
@@ -11,4 +11,5 @@ export { TerminalPanelHeader } from './panel/TerminalPanelHeader';
|
|
|
11
11
|
export { TerminalPanelFooter } from './panel/TerminalPanelFooter';
|
|
12
12
|
export { terminalChromeStyles, terminalChromeVariants, ACCENT_GRADIENTS, type TerminalChromeSlot, type TerminalChromeVariantProps, } from './panel/TerminalPanelChrome.styles';
|
|
13
13
|
export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
|
|
14
|
+
export { ChromeShell, chromeShellStyles, CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, resolveChromeShellAccent, type IChromeShellProps, type TChromeShellAccent, type TChromeShellSize, type TChromeShellSlot, type TChromeShellVariant, } from './ChromeShell';
|
|
14
15
|
//# sourceMappingURL=chrome.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/chrome.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,EACvB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}
|
|
1
|
+
{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/chrome.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,EACvB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAGnF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,0BAA0B,EAC1B,2BAA2B,EAC3B,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,eAAe,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./panel/TerminalPanelChrome.styles.js";
|
|
2
2
|
import { TerminalPanelHeader } from "./panel/TerminalPanelHeader/index.js";
|
|
3
3
|
import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
|
|
4
|
+
import { CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, chromeShellStyles, resolveChromeShellAccent } from "./ChromeShell/ChromeShell.styles.js";
|
|
5
|
+
import { ChromeShell } from "./ChromeShell/index.js";
|
|
4
6
|
import { TerminalPanelFooter } from "./panel/TerminalPanelFooter/index.js";
|
|
5
7
|
|
|
6
|
-
export { ACCENT_GRADIENTS, NOISE_TEXTURE_SVG, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, terminalChromeStyles, terminalChromeVariants, terminalScrollStyles };
|
|
8
|
+
export { ACCENT_GRADIENTS, CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, ChromeShell, NOISE_TEXTURE_SVG, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, chromeShellStyles, resolveChromeShellAccent, terminalChromeStyles, terminalChromeVariants, terminalScrollStyles };
|
|
@@ -20,6 +20,7 @@ export { useTerminalWebSocket, type IUseTerminalWebSocketOptions, type IUseTermi
|
|
|
20
20
|
export { useTerminal, type IUseTerminalOptions, type IUseTerminalReturn, type ITerminalResttyProps, useTerminalConnection, type IUseTerminalConnectionOptions, type IUseTerminalConnectionReturn, useTerminalFontSize, type IUseTerminalFontSizeOptions, type IUseTerminalFontSizeReturn, useTerminalPaneManager, type IUseTerminalPaneManagerOptions, type IUseTerminalPaneManagerReturn, useTerminalDimensions, type IUseTerminalDimensionsReturn, type ITerminalDimensions, useTerminalKeyboardShortcuts, type ITerminalShortcutConfig, } from './hooks';
|
|
21
21
|
export { TerminalActionBar, terminalActionBarStyles, type ITerminalActionBarProps, type TerminalActionBarSlot, TerminalStatusBar, terminalStatusBarStyles, type ITerminalStatusBarProps, type TerminalStatusBarSlot, TerminalFontControls, terminalFontControlsStyles, type ITerminalFontControlsProps, type TerminalFontControlsSlot, TerminalSplitButton, terminalSplitButtonStyles, type ITerminalSplitButtonProps, type TerminalSplitButtonSlot, TerminalConnectionStatus, terminalConnectionStatusStyles, type ITerminalConnectionStatusProps, type TerminalConnectionStatusSlot, TerminalClearButton, TerminalReconnectButton, TerminalDimensionsBadge, TerminalRendererBadge, TerminalDisconnectedOverlay, type ITerminalClearButtonProps, type ITerminalReconnectButtonProps, type ITerminalDimensionsBadgeProps, type ITerminalRendererBadgeProps, type ITerminalDisconnectedOverlayProps, } from './controls';
|
|
22
22
|
export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles, } from './panel/TerminalPanelChrome';
|
|
23
|
+
export { ChromeShell, chromeShellStyles, CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, resolveChromeShellAccent, type IChromeShellProps, type TChromeShellAccent, type TChromeShellSize, type TChromeShellSlot, type TChromeShellVariant, } from './ChromeShell';
|
|
23
24
|
export { TerminalPanelHeader, terminalPanelHeaderStyles, type TerminalPanelHeaderSlot, } from './panel/TerminalPanelHeader';
|
|
24
25
|
export { TerminalPanelFooter, terminalPanelFooterStyles, type TerminalPanelFooterSlot, } from './panel/TerminalPanelFooter';
|
|
25
26
|
export { TerminalSettingsPopover } from './panel/TerminalSettingsPopover';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,cAAc,WAAW,CAAC;AAG1B,cAAc,cAAc,CAAC;AAG7B,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,EACtB,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,qBAAqB,EACrB,KAAK,6BAA6B,EAClC,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,EAC/B,sBAAsB,EACtB,KAAK,8BAA8B,EACnC,KAAK,6BAA6B,EAClC,qBAAqB,EACrB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,4BAA4B,EAC5B,KAAK,uBAAuB,GAC7B,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,0BAA0B,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,wBAAwB,EACxB,8BAA8B,EAC9B,KAAK,8BAA8B,EACnC,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,qBAAqB,EACrB,2BAA2B,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,6BAA6B,EAClC,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EAChC,KAAK,iCAAiC,GACvC,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -44,9 +44,11 @@ import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "
|
|
|
44
44
|
import { terminalPanelHeaderStyles } from "./panel/TerminalPanelHeader/TerminalPanelHeader.styles.js";
|
|
45
45
|
import { TerminalPanelHeader } from "./panel/TerminalPanelHeader/index.js";
|
|
46
46
|
import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
|
|
47
|
+
import { CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, chromeShellStyles, resolveChromeShellAccent } from "./ChromeShell/ChromeShell.styles.js";
|
|
48
|
+
import { ChromeShell } from "./ChromeShell/index.js";
|
|
47
49
|
import { terminalPanelFooterStyles } from "./panel/TerminalPanelFooter/TerminalPanelFooter.styles.js";
|
|
48
50
|
import { TerminalPanelFooter } from "./panel/TerminalPanelFooter/index.js";
|
|
49
51
|
import { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from "./Terminal.theme.js";
|
|
50
52
|
import { getSynthwaveGhosttyTheme, hexToResttyColor, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
|
|
51
53
|
|
|
52
|
-
export { ACCENT_GRADIENTS, ACTION_BUTTON_STYLES, ANSI_COLOR_MAP, ANSI_INTRODUCERS, ANSI_MODIFIERS, ANSI_PATTERNS, AnsiColorMapper, AnsiParser, BadgeFormatter, CONTENT_TYPE_STYLES, ContentTypeBadge, DEFAULT_SYNTAX_THEME, FILTER_BUTTON_STYLES, FONT_BUTTON_STYLES, HighlightedJson, HttpLogParser, LOG_LEVEL_ANSI_COLORS, LOG_LEVEL_STYLES, LevelBadge, LogLevelDetector, LogLineContainer, LogParserService, MultilineAggregator, NOISE_TEXTURE_SVG, PRIMARY_GLOW, PRIMARY_GLOW_COMPOUND, PersistentLogBuffer, SECTION_LABEL_STYLES, SEGMENTED_BUTTON_STYLES, SGR_CODES, STATUS_COLORS, SYNTHWAVE_ANSI_COLORS, SYNTHWAVE_TERMINAL_THEME, SpecializedSyntaxHighlighter, SyntaxHighlightedText, SyntaxHighlighter, TABLE_CHARS, TERMINAL_BG, TOGGLE_STYLES, TOGGLE_SWITCH_STYLES, TRAFFIC_LIGHT_STYLES, TRIGGER_BUTTON_STYLES, TableParser, TagBadge, TagBadges, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalFontControls, TerminalLogBadge, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalReconnectButton, TerminalRendererBadge, TerminalSettingsPopover, TerminalSplitButton, TerminalStatusBar, TimestampBadge, clearHighlightCache, createPersistentLogBuffer, createTableParser, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, logLineBadgesStyles, terminalActionBarStyles, terminalChromeStyles, terminalChromeVariants, terminalConnectionStatusStyles, terminalFontControlsStyles, terminalLogBadgeStyles, terminalPanelFooterStyles, terminalPanelHeaderStyles, terminalScrollStyles, terminalSplitButtonStyles, terminalStatusBarStyles, useTerminal, useTerminalConnection, useTerminalDimensions, useTerminalFontSize, useTerminalKeyboardShortcuts, useTerminalPaneManager, useTerminalSettings, useTerminalWebSocket, xtermThemeToGhostty };
|
|
54
|
+
export { ACCENT_GRADIENTS, ACTION_BUTTON_STYLES, ANSI_COLOR_MAP, ANSI_INTRODUCERS, ANSI_MODIFIERS, ANSI_PATTERNS, AnsiColorMapper, AnsiParser, BadgeFormatter, CHROME_SHELL_FOOTER_HEIGHT, CHROME_SHELL_TOOLBAR_HEIGHT, CONTENT_TYPE_STYLES, ChromeShell, ContentTypeBadge, DEFAULT_SYNTAX_THEME, FILTER_BUTTON_STYLES, FONT_BUTTON_STYLES, HighlightedJson, HttpLogParser, LOG_LEVEL_ANSI_COLORS, LOG_LEVEL_STYLES, LevelBadge, LogLevelDetector, LogLineContainer, LogParserService, MultilineAggregator, NOISE_TEXTURE_SVG, PRIMARY_GLOW, PRIMARY_GLOW_COMPOUND, PersistentLogBuffer, SECTION_LABEL_STYLES, SEGMENTED_BUTTON_STYLES, SGR_CODES, STATUS_COLORS, SYNTHWAVE_ANSI_COLORS, SYNTHWAVE_TERMINAL_THEME, SpecializedSyntaxHighlighter, SyntaxHighlightedText, SyntaxHighlighter, TABLE_CHARS, TERMINAL_BG, TOGGLE_STYLES, TOGGLE_SWITCH_STYLES, TRAFFIC_LIGHT_STYLES, TRIGGER_BUTTON_STYLES, TableParser, TagBadge, TagBadges, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalFontControls, TerminalLogBadge, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalReconnectButton, TerminalRendererBadge, TerminalSettingsPopover, TerminalSplitButton, TerminalStatusBar, TimestampBadge, chromeShellStyles, clearHighlightCache, createPersistentLogBuffer, createTableParser, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, logLineBadgesStyles, resolveChromeShellAccent, terminalActionBarStyles, terminalChromeStyles, terminalChromeVariants, terminalConnectionStatusStyles, terminalFontControlsStyles, terminalLogBadgeStyles, terminalPanelFooterStyles, terminalPanelHeaderStyles, terminalScrollStyles, terminalSplitButtonStyles, terminalStatusBarStyles, useTerminal, useTerminalConnection, useTerminalDimensions, useTerminalFontSize, useTerminalKeyboardShortcuts, useTerminalPaneManager, useTerminalSettings, useTerminalWebSocket, xtermThemeToGhostty };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TerminalInteractivePanelWterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAcH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAiDrH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,6BAA6B,
|
|
1
|
+
{"version":3,"file":"TerminalInteractivePanelWterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAcH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAiDrH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,6BAA6B,yIA2QzC,CAAC"}
|
|
@@ -85,8 +85,16 @@ const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessio
|
|
|
85
85
|
const transportRef = useRef(null);
|
|
86
86
|
const containerRef = useRef(null);
|
|
87
87
|
const terminalReadyRef = useRef(false);
|
|
88
|
-
const { settings } = useTerminalSettings();
|
|
89
|
-
|
|
88
|
+
const { settings, setFontSize } = useTerminalSettings();
|
|
89
|
+
/**
|
|
90
|
+
* Font size is read directly from the global terminal settings store
|
|
91
|
+
* (single source of truth, layout-integrity / state-patterns rule).
|
|
92
|
+
* v0.10.0 had a `useState(settings.fontSize)` snapshot which drifted
|
|
93
|
+
* out of sync when the user mutated `fontSize` via `TerminalSettingsPopover`.
|
|
94
|
+
* Fixed in v0.11.0: reads `settings.fontSize` and writes back through
|
|
95
|
+
* `setFontSize` from the same hook so all consumers stay in lockstep.
|
|
96
|
+
*/
|
|
97
|
+
const fontSize = settings.fontSize;
|
|
90
98
|
const [dimensions, setDimensions] = useState({
|
|
91
99
|
cols: 80,
|
|
92
100
|
rows: 24
|
|
@@ -130,9 +138,7 @@ const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessio
|
|
|
130
138
|
onData: (data) => {
|
|
131
139
|
terminalRef.current?.write(data);
|
|
132
140
|
},
|
|
133
|
-
onStatus: (
|
|
134
|
-
console.debug("[wterm] Shell:", shell);
|
|
135
|
-
},
|
|
141
|
+
onStatus: (_shell) => {},
|
|
136
142
|
onExit: (code) => {
|
|
137
143
|
terminalRef.current?.write(`\r\n\x1b[33m[process exited with code ${code}]\x1b[0m\r\n`);
|
|
138
144
|
setConnectionStatus("disconnected");
|
|
@@ -192,12 +198,17 @@ const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessio
|
|
|
192
198
|
const handleClear = useCallback(() => {
|
|
193
199
|
terminalRef.current?.write("\x1B[2J\x1B[H");
|
|
194
200
|
}, []);
|
|
201
|
+
/**
|
|
202
|
+
* Font size handlers route through the global settings store. The
|
|
203
|
+
* store clamps to [10, 24] internally; we still pre-clamp here so
|
|
204
|
+
* the local UI button disabled state matches the store behavior.
|
|
205
|
+
*/
|
|
195
206
|
const handleFontIncrease = useCallback(() => {
|
|
196
|
-
setFontSize(
|
|
197
|
-
}, []);
|
|
207
|
+
setFontSize(Math.min(fontSize + 1, MAX_FONT_SIZE));
|
|
208
|
+
}, [fontSize, setFontSize]);
|
|
198
209
|
const handleFontDecrease = useCallback(() => {
|
|
199
|
-
setFontSize(
|
|
200
|
-
}, []);
|
|
210
|
+
setFontSize(Math.max(fontSize - 1, MIN_FONT_SIZE));
|
|
211
|
+
}, [fontSize, setFontSize]);
|
|
201
212
|
useImperativeHandle(ref, () => ({
|
|
202
213
|
write: (text) => {
|
|
203
214
|
terminalRef.current?.write(text);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TerminalInteractivePanelXterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAmBH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrH,OAAO,4BAA4B,CAAC;AAYpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,6BAA6B,
|
|
1
|
+
{"version":3,"file":"TerminalInteractivePanelXterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAmBH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrH,OAAO,4BAA4B,CAAC;AAYpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,6BAA6B,yIAqQzC,CAAC"}
|
|
@@ -66,8 +66,16 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
|
|
|
66
66
|
const searchAddonRef = useRef(null);
|
|
67
67
|
const containerRef = useRef(null);
|
|
68
68
|
const terminalReadyRef = useRef(false);
|
|
69
|
-
const { settings } = useTerminalSettings();
|
|
70
|
-
|
|
69
|
+
const { settings, setFontSize } = useTerminalSettings();
|
|
70
|
+
/**
|
|
71
|
+
* Font size is read directly from the global terminal settings store
|
|
72
|
+
* (single source of truth, layout-integrity / state-patterns rule).
|
|
73
|
+
* v0.10.0 had a `useState(settings.fontSize)` snapshot which drifted
|
|
74
|
+
* out of sync when the user mutated `fontSize` via `TerminalSettingsPopover`.
|
|
75
|
+
* Fixed in v0.11.0: reads `settings.fontSize` and writes back through
|
|
76
|
+
* `setFontSize` from the same hook so all consumers stay in lockstep.
|
|
77
|
+
*/
|
|
78
|
+
const fontSize = settings.fontSize;
|
|
71
79
|
const [dimensions, setDimensions] = useState({
|
|
72
80
|
cols: 80,
|
|
73
81
|
rows: 24
|
|
@@ -192,12 +200,17 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
|
|
|
192
200
|
const handleClear = useCallback(() => {
|
|
193
201
|
terminalRef.current?.clear();
|
|
194
202
|
}, []);
|
|
203
|
+
/**
|
|
204
|
+
* Font size handlers route through the global settings store. The
|
|
205
|
+
* store clamps to [10, 24] internally; we still pre-clamp here so
|
|
206
|
+
* the local UI button disabled state matches the store behavior.
|
|
207
|
+
*/
|
|
195
208
|
const handleFontIncrease = useCallback(() => {
|
|
196
|
-
setFontSize(
|
|
197
|
-
}, []);
|
|
209
|
+
setFontSize(Math.min(fontSize + 1, MAX_FONT_SIZE));
|
|
210
|
+
}, [fontSize, setFontSize]);
|
|
198
211
|
const handleFontDecrease = useCallback(() => {
|
|
199
|
-
setFontSize(
|
|
200
|
-
}, []);
|
|
212
|
+
setFontSize(Math.max(fontSize - 1, MIN_FONT_SIZE));
|
|
213
|
+
}, [fontSize, setFontSize]);
|
|
201
214
|
useImperativeHandle(ref, () => ({
|
|
202
215
|
write: (text) => {
|
|
203
216
|
terminalRef.current?.write(text);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAsBH,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEhG,OAAO,4BAA4B,CAAC;AAGpC,YAAY,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAChG,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AA8BxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,iBAAiB,2HAoW7B,CAAC"}
|