@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.
Files changed (69) hide show
  1. package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts +55 -0
  2. package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts.map +1 -0
  3. package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.js +62 -0
  4. package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts +92 -0
  5. package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts.map +1 -0
  6. package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts +71 -0
  7. package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts.map +1 -0
  8. package/dist/react-ui/blocks/Terminal/ChromeShell/index.js +114 -0
  9. package/dist/react-ui/blocks/Terminal/chrome.d.ts +1 -0
  10. package/dist/react-ui/blocks/Terminal/chrome.d.ts.map +1 -1
  11. package/dist/react-ui/blocks/Terminal/chrome.js +3 -1
  12. package/dist/react-ui/blocks/Terminal/index.d.ts +1 -0
  13. package/dist/react-ui/blocks/Terminal/index.d.ts.map +1 -1
  14. package/dist/react-ui/blocks/Terminal/index.js +3 -1
  15. package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.d.ts.map +1 -1
  16. package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.js +20 -9
  17. package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.d.ts.map +1 -1
  18. package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.js +19 -6
  19. package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.d.ts.map +1 -1
  20. package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.js +31 -9
  21. package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts +31 -2
  22. package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts.map +1 -1
  23. package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.js +41 -5
  24. package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts +22 -0
  25. package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts.map +1 -1
  26. package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts +8 -0
  27. package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts.map +1 -1
  28. package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.js +54 -12
  29. package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts +52 -0
  30. package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts.map +1 -0
  31. package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.js +160 -0
  32. package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts +46 -0
  33. package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts.map +1 -0
  34. package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.js +195 -0
  35. package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts +39 -0
  36. package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts.map +1 -0
  37. package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.js +251 -0
  38. package/dist/react-ui/blocks/Terminal/renderers/index.d.ts +20 -0
  39. package/dist/react-ui/blocks/Terminal/renderers/index.d.ts.map +1 -0
  40. package/dist/react-ui/blocks/Terminal/renderers/types.d.ts +47 -0
  41. package/dist/react-ui/blocks/Terminal/renderers/types.d.ts.map +1 -0
  42. package/dist/react-ui/blocks/Terminal/restty.d.ts +2 -0
  43. package/dist/react-ui/blocks/Terminal/restty.d.ts.map +1 -1
  44. package/dist/react-ui/blocks/Terminal/restty.js +2 -1
  45. package/dist/react-ui/blocks/Terminal/wterm.d.ts +2 -0
  46. package/dist/react-ui/blocks/Terminal/wterm.d.ts.map +1 -1
  47. package/dist/react-ui/blocks/Terminal/wterm.js +2 -1
  48. package/dist/react-ui/blocks/Terminal/xterm.d.ts +2 -0
  49. package/dist/react-ui/blocks/Terminal/xterm.d.ts.map +1 -1
  50. package/dist/react-ui/blocks/Terminal/xterm.js +2 -1
  51. package/dist/react-ui/index.d.ts +2 -2
  52. package/dist/react-ui/index.d.ts.map +1 -1
  53. package/dist/react-ui/index.js +5 -3
  54. package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts +30 -0
  55. package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts.map +1 -0
  56. package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.js +31 -0
  57. package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts +66 -0
  58. package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts.map +1 -0
  59. package/dist/react-ui/ui/MiddleTruncate/index.d.ts +79 -0
  60. package/dist/react-ui/ui/MiddleTruncate/index.d.ts.map +1 -0
  61. package/dist/react-ui/ui/MiddleTruncate/index.js +164 -0
  62. package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.js +1 -1
  63. package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts +7 -1
  64. package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts.map +1 -1
  65. package/dist/react-ui/ui/MiddleTruncatePath/index.js +21 -17
  66. package/dist/react-ui/ui/index.d.ts +1 -0
  67. package/dist/react-ui/ui/index.d.ts.map +1 -1
  68. package/dist/react-ui/ui/index.js +3 -1
  69. 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":"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"}
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,yIA2PzC,CAAC"}
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
- const [fontSize, setFontSize] = useState(settings.fontSize);
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: (shell) => {
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((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
197
- }, []);
207
+ setFontSize(Math.min(fontSize + 1, MAX_FONT_SIZE));
208
+ }, [fontSize, setFontSize]);
198
209
  const handleFontDecrease = useCallback(() => {
199
- setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
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,yIAwPzC,CAAC"}
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
- const [fontSize, setFontSize] = useState(settings.fontSize);
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((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
197
- }, []);
209
+ setFontSize(Math.min(fontSize + 1, MAX_FONT_SIZE));
210
+ }, [fontSize, setFontSize]);
198
211
  const handleFontDecrease = useCallback(() => {
199
- setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
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;AAqBH,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,2HA+U7B,CAAC"}
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"}