@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/blocks/Terminal/controls/TerminalSplitButton/index.js

@@ -0,0 +1,108 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { terminalSplitButtonStyles } from "./TerminalSplitButton.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalSplitButton/index.tsx
+/**
+* TerminalSplitButton — pane split controls atom.
+*
+* Provides horizontal and vertical split buttons with an optional
+* pane count badge. Uses inline SVG icons for the split direction
+* indicators.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalSplitButton
+*
+* @example
+* ```tsx
+* <TerminalSplitButton
+*   onSplitHorizontal={() => terminal.splitActive('horizontal')}
+*   onSplitVertical={() => terminal.splitActive('vertical')}
+*   paneCount={terminal.paneCount}
+* />
+* ```
+*/
+/**
+* Pane split controls.
+*
+* Renders horizontal and vertical split buttons with inline SVG icons.
+* Optionally shows a pane count badge when there are multiple panes.
+*
+* @example
+* ```tsx
+* const panes = useTerminalPaneManager({ ref: resttyRef });
+*
+* <TerminalSplitButton
+*   onSplitHorizontal={() => panes.splitActive('horizontal')}
+*   onSplitVertical={() => panes.splitActive('vertical')}
+*   paneCount={panes.paneCount}
+* />
+* ```
+*/
+function TerminalSplitButton({ onSplitHorizontal, onSplitVertical, paneCount, disabled = false, slots, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalSplitButtonStyles.root, slots?.root, className),
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onSplitHorizontal,
+				className: cn(terminalSplitButtonStyles.splitHButton, slots?.splitHButton),
+				title: "Split horizontal (Ctrl+Shift+E)",
+				disabled,
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "w-3.5 h-3.5",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "1",
+						y: "1",
+						width: "14",
+						height: "14",
+						rx: "2"
+					}), /* @__PURE__ */ jsx("line", {
+						x1: "8",
+						y1: "1",
+						x2: "8",
+						y2: "15"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onSplitVertical,
+				className: cn(terminalSplitButtonStyles.splitVButton, slots?.splitVButton),
+				title: "Split vertical (Ctrl+Shift+D)",
+				disabled,
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "w-3.5 h-3.5",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "1",
+						y: "1",
+						width: "14",
+						height: "14",
+						rx: "2"
+					}), /* @__PURE__ */ jsx("line", {
+						x1: "1",
+						y1: "8",
+						x2: "15",
+						y2: "8"
+					})]
+				})
+			}),
+			paneCount !== void 0 && paneCount > 1 && /* @__PURE__ */ jsx("span", {
+				className: cn(terminalSplitButtonStyles.countBadge, slots?.countBadge),
+				children: paneCount
+			})
+		]
+	});
+}
+
+//#endregion
+export { TerminalSplitButton };

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Styles for TerminalStatusBar component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalStatusBar
+ */
+import type { StyleSlots } from '../../../../../core/types';
+import type { TerminalStatusBarSlot } from './TerminalStatusBar.types';
+/**
+ * Base styles for TerminalStatusBar slots.
+ */
+export declare const terminalStatusBarStyles: StyleSlots<TerminalStatusBarSlot>;
+//# sourceMappingURL=TerminalStatusBar.styles.d.ts.map

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalStatusBar.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,UAAU,CAAC,qBAAqB,CAI5D,CAAC"}

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.styles.js

@@ -0,0 +1,12 @@
+//#region src/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.styles.ts
+/**
+* Base styles for TerminalStatusBar slots.
+*/
+const terminalStatusBarStyles = {
+	root: "flex items-center justify-between px-4 h-10 bg-muted/20 border-t border-white/10",
+	group: "flex items-center gap-3",
+	separator: "w-px h-4 bg-border/30"
+};
+
+//#endregion
+export { terminalStatusBarStyles };

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Types for TerminalStatusBar component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalStatusBar
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { IUseTerminalReturn } from '../../hooks/useTerminal';
+/**
+ * Visual slots for TerminalStatusBar.
+ */
+export type TerminalStatusBarSlot = 'root' | 'group' | 'separator';
+/**
+ * Props for TerminalStatusBar.
+ */
+export interface ITerminalStatusBarProps {
+    /**
+     * Terminal hook return value for auto mode.
+     * When provided, renders default status indicators automatically.
+     * When omitted, renders `children` for custom composition.
+     */
+    terminal?: IUseTerminalReturn;
+    /** Custom children (used when `terminal` is not provided). */
+    children?: React.ReactNode;
+    /** Show font size in auto mode (default: true). */
+    showFontSize?: boolean;
+    /** Slot class overrides. */
+    slots?: SlotOverrides<TerminalStatusBarSlot>;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+//# sourceMappingURL=TerminalStatusBar.types.d.ts.map

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalStatusBar.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalStatusBar/TerminalStatusBar.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAE9B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE7C,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/index.d.ts

@@ -0,0 +1,73 @@
+/**
+ * TerminalStatusBar — composable status bar container.
+ *
+ * Two usage modes:
+ * - **Auto mode**: Pass `terminal` prop from `useTerminal()` to render
+ *   default status indicators (connection, dimensions, font size).
+ * - **Custom mode**: Pass `children` for full composition control.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalStatusBar
+ *
+ * @example
+ * ```tsx
+ * // Auto mode
+ * <TerminalStatusBar terminal={terminal} />
+ *
+ * // Custom mode
+ * <TerminalStatusBar>
+ *   <TerminalConnectionStatus status={terminal.status} />
+ *   <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+ * </TerminalStatusBar>
+ * ```
+ */
+import type { ITerminalStatusBarProps } from './TerminalStatusBar.types';
+export type { ITerminalStatusBarProps, TerminalStatusBarSlot } from './TerminalStatusBar.types';
+export { terminalStatusBarStyles } from './TerminalStatusBar.styles';
+/**
+ * Separator sub-component for custom composition.
+ */
+declare function StatusBarSeparator({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Group sub-component for custom composition.
+ */
+declare function StatusBarGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Composable terminal status bar.
+ *
+ * In **auto mode** (with `terminal` prop), renders:
+ * Left: ConnectionStatus | Right: Dimensions, FontSize
+ *
+ * In **custom mode** (with `children`), renders children in a styled flex container.
+ *
+ * @example
+ * ```tsx
+ * // Auto mode — one line, all status indicators
+ * <TerminalStatusBar terminal={terminal} />
+ *
+ * // Custom mode — pick your indicators
+ * <TerminalStatusBar>
+ *   <TerminalStatusBar.Group>
+ *     <TerminalConnectionStatus status={terminal.status} />
+ *   </TerminalStatusBar.Group>
+ *   <TerminalStatusBar.Group>
+ *     <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+ *   </TerminalStatusBar.Group>
+ * </TerminalStatusBar>
+ * ```
+ */
+declare function TerminalStatusBarRoot({ terminal, children, showFontSize, slots, className, }: ITerminalStatusBarProps): React.JSX.Element;
+/**
+ * TerminalStatusBar with typed sub-components.
+ */
+export declare const TerminalStatusBar: typeof TerminalStatusBarRoot & {
+    /** Separator sub-component for custom composition. */
+    Separator: typeof StatusBarSeparator;
+    /** Group sub-component for custom composition. */
+    Group: typeof StatusBarGroup;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalStatusBar/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAIzE,YAAY,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAChG,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE;;GAEG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAEpF;AAED;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAErH;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,YAAmB,EACnB,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6B7C;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;IAC5B,sDAAsD;;IAEtD,kDAAkD;;CAElD,CAAC"}

package/dist/react-ui/blocks/Terminal/controls/TerminalStatusBar/index.js

@@ -0,0 +1,99 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { TerminalDimensionsBadge } from "../TerminalAtoms.js";
+import { terminalStatusBarStyles } from "./TerminalStatusBar.styles.js";
+import { TerminalConnectionStatus } from "../TerminalConnectionStatus/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalStatusBar/index.tsx
+/**
+* TerminalStatusBar — composable status bar container.
+*
+* Two usage modes:
+* - **Auto mode**: Pass `terminal` prop from `useTerminal()` to render
+*   default status indicators (connection, dimensions, font size).
+* - **Custom mode**: Pass `children` for full composition control.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalStatusBar
+*
+* @example
+* ```tsx
+* // Auto mode
+* <TerminalStatusBar terminal={terminal} />
+*
+* // Custom mode
+* <TerminalStatusBar>
+*   <TerminalConnectionStatus status={terminal.status} />
+*   <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+* </TerminalStatusBar>
+* ```
+*/
+/**
+* Separator sub-component for custom composition.
+*/
+function StatusBarSeparator({ className }) {
+	return /* @__PURE__ */ jsx("div", { className: cn(terminalStatusBarStyles.separator, className) });
+}
+/**
+* Group sub-component for custom composition.
+*/
+function StatusBarGroup({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(terminalStatusBarStyles.group, className),
+		children
+	});
+}
+/**
+* Composable terminal status bar.
+*
+* In **auto mode** (with `terminal` prop), renders:
+* Left: ConnectionStatus | Right: Dimensions, FontSize
+*
+* In **custom mode** (with `children`), renders children in a styled flex container.
+*
+* @example
+* ```tsx
+* // Auto mode — one line, all status indicators
+* <TerminalStatusBar terminal={terminal} />
+*
+* // Custom mode — pick your indicators
+* <TerminalStatusBar>
+*   <TerminalStatusBar.Group>
+*     <TerminalConnectionStatus status={terminal.status} />
+*   </TerminalStatusBar.Group>
+*   <TerminalStatusBar.Group>
+*     <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+*   </TerminalStatusBar.Group>
+* </TerminalStatusBar>
+* ```
+*/
+function TerminalStatusBarRoot({ terminal, children, showFontSize = true, slots, className }) {
+	if (!terminal) return /* @__PURE__ */ jsx("div", {
+		className: cn(terminalStatusBarStyles.root, slots?.root, className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalStatusBarStyles.root, slots?.root, className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn(terminalStatusBarStyles.group, slots?.group),
+			children: /* @__PURE__ */ jsx(TerminalConnectionStatus, { status: terminal.status })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn(terminalStatusBarStyles.group, slots?.group),
+			children: [/* @__PURE__ */ jsx(TerminalDimensionsBadge, { dimensions: terminal.dimensions }), showFontSize && /* @__PURE__ */ jsxs("span", {
+				className: "text-xs font-mono text-muted-foreground",
+				children: [terminal.fontSize, "px"]
+			})]
+		})]
+	});
+}
+/**
+* TerminalStatusBar with typed sub-components.
+*/
+const TerminalStatusBar = Object.assign(TerminalStatusBarRoot, {
+	Separator: StatusBarSeparator,
+	Group: StatusBarGroup
+});
+
+//#endregion
+export { TerminalStatusBar };

package/dist/react-ui/blocks/Terminal/controls/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Composable Terminal Control Atoms.
+ *
+ * UI building blocks for constructing custom terminal action bars,
+ * status bars, and control panels. Each atom is independently usable
+ * and follows the StyleSlots pattern.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls
+ */
+export { TerminalActionBar, terminalActionBarStyles, type ITerminalActionBarProps, type TerminalActionBarSlot, } from './TerminalActionBar';
+export { TerminalStatusBar, terminalStatusBarStyles, type ITerminalStatusBarProps, type TerminalStatusBarSlot, } from './TerminalStatusBar';
+export { TerminalFontControls, terminalFontControlsStyles, type ITerminalFontControlsProps, type TerminalFontControlsSlot, } from './TerminalFontControls';
+export { TerminalSplitButton, terminalSplitButtonStyles, type ITerminalSplitButtonProps, type TerminalSplitButtonSlot, } from './TerminalSplitButton';
+export { TerminalConnectionStatus, terminalConnectionStatusStyles, type ITerminalConnectionStatusProps, type TerminalConnectionStatusSlot, } from './TerminalConnectionStatus';
+export { TerminalClearButton, TerminalReconnectButton, TerminalDimensionsBadge, TerminalRendererBadge, TerminalDisconnectedOverlay, type ITerminalClearButtonProps, type ITerminalReconnectButtonProps, type ITerminalDimensionsBadgeProps, type ITerminalRendererBadgeProps, type ITerminalDisconnectedOverlayProps, } from './TerminalAtoms';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/controls/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAC;AAI7B,OAAO,EACL,oBAAoB,EACpB,0BAA0B,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,GAC9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,KAAK,8BAA8B,EACnC,KAAK,4BAA4B,GAClC,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EACL,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,iBAAiB,CAAC"}

package/dist/react-ui/blocks/Terminal/controls/index.js

@@ -0,0 +1,11 @@
+import { terminalActionBarStyles } from "./TerminalActionBar/TerminalActionBar.styles.js";
+import { TerminalClearButton, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalReconnectButton, TerminalRendererBadge } from "./TerminalAtoms.js";
+import { terminalFontControlsStyles } from "./TerminalFontControls/TerminalFontControls.styles.js";
+import { TerminalFontControls } from "./TerminalFontControls/index.js";
+import { terminalSplitButtonStyles } from "./TerminalSplitButton/TerminalSplitButton.styles.js";
+import { TerminalSplitButton } from "./TerminalSplitButton/index.js";
+import { TerminalActionBar } from "./TerminalActionBar/index.js";
+import { terminalStatusBarStyles } from "./TerminalStatusBar/TerminalStatusBar.styles.js";
+import { terminalConnectionStatusStyles } from "./TerminalConnectionStatus/TerminalConnectionStatus.styles.js";
+import { TerminalConnectionStatus } from "./TerminalConnectionStatus/index.js";
+import { TerminalStatusBar } from "./TerminalStatusBar/index.js";

package/dist/react-ui/blocks/Terminal/display.d.ts

@@ -10,8 +10,8 @@
 export { TerminalDisplay } from './TerminalDisplay';
 export { terminalDisplayStyles, terminalDisplayVariants, type TerminalDisplayVariantProps, } from './TerminalDisplay.styles';
 export type { ITerminalDisplayProps, ITerminalDisplayRef, TerminalDisplaySlot, } from './TerminalDisplay.types';
-export { TerminalRestty } from './TerminalRestty';
-export type { ITerminalResttyProps, ITerminalResttyRef } from './TerminalRestty';
+export { ResttyTerminal, ResttySessionProvider, useResttySession } from './restty';
+export type { IResttyTerminalProps, IResttyTerminalRef } from './restty';
 export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
 export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
 export { terminalChromeStyles, terminalChromeVariants, ACCENT_GRADIENTS, type TerminalChromeSlot, } from './panel/TerminalPanelChrome.styles';

package/dist/react-ui/blocks/Terminal/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/display.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGjF,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AACnF,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/display.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACnF,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AACnF,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC"}

package/dist/react-ui/blocks/Terminal/display.js

@@ -1,9 +1,11 @@
 import { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from "./Terminal.theme.js";
 import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./panel/TerminalPanelChrome.styles.js";
 import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
+import { ResttySessionProvider, useResttySession } from "./restty/ResttySessionProvider.js";
 import { getSynthwaveGhosttyTheme, hexToResttyColor, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
-import { TerminalRestty } from "./TerminalRestty.js";
+import { ResttyTerminal } from "./restty/ResttyTerminal.js";
+import "./restty/index.js";
 import { terminalDisplayStyles, terminalDisplayVariants } from "./TerminalDisplay.styles.js";
 import { TerminalDisplay } from "./TerminalDisplay.js";
 
-export { ACCENT_GRADIENTS, NOISE_TEXTURE_SVG, SYNTHWAVE_TERMINAL_THEME, TerminalDisplay, TerminalPanelChrome, TerminalRestty, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, terminalChromeStyles, terminalChromeVariants, terminalDisplayStyles, terminalDisplayVariants, terminalScrollStyles, xtermThemeToGhostty };
+export { ACCENT_GRADIENTS, NOISE_TEXTURE_SVG, ResttySessionProvider, ResttyTerminal, SYNTHWAVE_TERMINAL_THEME, TerminalDisplay, TerminalPanelChrome, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, terminalChromeStyles, terminalChromeVariants, terminalDisplayStyles, terminalDisplayVariants, terminalScrollStyles, useResttySession, xtermThemeToGhostty };

package/dist/react-ui/blocks/Terminal/hooks/index.d.ts

@@ -1,11 +1,18 @@
 /**
  * Terminal Hooks Module.
  *
- * Reusable hooks for terminal WebSocket connections
- * and global settings management.
+ * Reusable hooks for terminal WebSocket connections, global settings,
+ * and composable terminal state management (connection, font, panes,
+ * dimensions, keyboard shortcuts).
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/hooks
  */
 export { useTerminalWebSocket, type IUseTerminalWebSocketOptions, type IUseTerminalWebSocketReturn, type ITerminalWsServerMessage, type TTerminalWsStatus, } from './useTerminalWebSocket';
 export { useTerminalSettings, type ITerminalSettings, type IUseTerminalSettingsReturn, } from './useTerminalSettings';
+export { useTerminal, type IUseTerminalOptions, type IUseTerminalReturn, type ITerminalResttyProps, } from './useTerminal';
+export { useTerminalConnection, type IUseTerminalConnectionOptions, type IUseTerminalConnectionReturn, } from './useTerminalConnection';
+export { useTerminalFontSize, type IUseTerminalFontSizeOptions, type IUseTerminalFontSizeReturn, } from './useTerminalFontSize';
+export { useTerminalPaneManager, type IUseTerminalPaneManagerOptions, type IUseTerminalPaneManagerReturn, } from './useTerminalPaneManager';
+export { useTerminalDimensions, type IUseTerminalDimensionsReturn, type ITerminalDimensions, } from './useTerminalDimensions';
+export { useTerminalKeyboardShortcuts, type ITerminalShortcutConfig, } from './useTerminalKeyboardShortcuts';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EACL,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,GAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,qBAAqB,EACrB,KAAK,6BAA6B,EAClC,KAAK,4BAA4B,GAClC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,mBAAmB,EACnB,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,sBAAsB,EACtB,KAAK,8BAA8B,EACnC,KAAK,6BAA6B,GACnC,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,qBAAqB,EACrB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,4BAA4B,EAC5B,KAAK,uBAAuB,GAC7B,MAAM,gCAAgC,CAAC"}

package/dist/react-ui/blocks/Terminal/hooks/index.js

@@ -1,2 +1,8 @@
 import { useTerminalWebSocket } from "./useTerminalWebSocket.js";
 import { useTerminalSettings } from "./useTerminalSettings.js";
+import { useTerminalConnection } from "./useTerminalConnection.js";
+import { useTerminalFontSize } from "./useTerminalFontSize.js";
+import { useTerminalPaneManager } from "./useTerminalPaneManager.js";
+import { useTerminalDimensions } from "./useTerminalDimensions.js";
+import { useTerminalKeyboardShortcuts } from "./useTerminalKeyboardShortcuts.js";
+import { useTerminal } from "./useTerminal.js";

package/dist/react-ui/blocks/Terminal/hooks/useTerminal.d.ts

@@ -0,0 +1,198 @@
+/**
+ * Main composable terminal hook.
+ *
+ * Orchestrates all terminal sub-hooks into a single unified API:
+ * connection state, font size, pane management, dimensions, keyboard
+ * shortcuts, and a `resttyProps` spread object for zero-config wiring.
+ *
+ * This is the recommended entry point for building custom terminal UIs.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/hooks/useTerminal
+ *
+ * @example
+ * ```tsx
+ * // Tier 2: Composable with chrome
+ * const terminal = useTerminal({ wsUrl: 'ws://localhost:3100/pty' });
+ *
+ * <TerminalPanelChrome
+ *   containerName="my-app"
+ *   isConnected={terminal.isConnected}
+ *   actionBar={<TerminalActionBar terminal={terminal} />}
+ *   footer={<TerminalStatusBar terminal={terminal} />}
+ * >
+ *   <ResttyTerminal ref={terminal.ref} {...terminal.resttyProps} />
+ * </TerminalPanelChrome>
+ *
+ * // Tier 3: Fully custom layout
+ * const terminal = useTerminal({ wsUrl: 'ws://...', keyboardShortcuts: true });
+ *
+ * <div className="my-terminal">
+ *   <ResttyTerminal ref={terminal.ref} {...terminal.resttyProps} className="flex-1" />
+ *   <span>{terminal.paneCount} panes, {terminal.dimensions.cols}×{terminal.dimensions.rows}</span>
+ * </div>
+ * ```
+ */
+import type { IResttyTerminalRef, ResttyPaneSplitDirection } from '../restty/ResttyTerminal.types';
+import type { TTerminalConnectionStatusToken } from '../Terminal.tokens';
+import type { ITerminalSettings } from './useTerminalSettings';
+import { type ITerminalDimensions } from './useTerminalDimensions';
+/**
+ * Options for useTerminal.
+ */
+export interface IUseTerminalOptions {
+    /** WebSocket URL for PTY connection. */
+    wsUrl?: string;
+    /** Initial font size in CSS pixels. Defaults to value from useTerminalSettings. */
+    fontSize?: number;
+    /** Enable keyboard shortcuts (default: false — opt-in to avoid conflicts). */
+    keyboardShortcuts?: boolean;
+    /** Persist font size to localStorage (default: true). */
+    persistFontSize?: boolean;
+    /** Called when PTY connection opens. */
+    onConnect?: () => void;
+    /** Called when PTY connection closes. */
+    onDisconnect?: () => void;
+    /** Called on connection error. */
+    onError?: (message: string) => void;
+    /** Called when terminal grid dimensions change. */
+    onResize?: (cols: number, rows: number) => void;
+    /** Called when a pane is split. */
+    onPaneSplit?: (sourceId: number, createdId: number, direction: string) => void;
+    /** Called when a pane is closed. */
+    onPaneClose?: (paneId: number) => void;
+    /** Called when a pane is created. */
+    onPaneCreated?: (paneId: number) => void;
+    /** Called when the active pane changes. */
+    onActivePaneChange?: (paneId: number | null) => void;
+}
+/**
+ * Props to spread onto `<ResttyTerminal>`.
+ *
+ * Contains all callback handlers wired to the composed hooks.
+ * Spread with `{...terminal.resttyProps}` for zero-config wiring.
+ */
+export interface ITerminalResttyProps {
+    /** WebSocket URL for PTY connection. */
+    wsUrl?: string;
+    /** Font size in CSS pixels. */
+    fontSize: number;
+    /** Resize handler. */
+    onResize: (cols: number, rows: number) => void;
+    /** Connection open handler. */
+    onConnect: () => void;
+    /** Connection close handler. */
+    onDisconnect: () => void;
+    /** Error handler. */
+    onError: (message: string) => void;
+    /** PTY status handler. */
+    onPtyStatus: (status: string) => void;
+    /** Pane created handler. */
+    onPaneCreated: (paneId: number) => void;
+    /** Pane closed handler. */
+    onPaneClosed: (paneId: number) => void;
+    /** Pane split handler. */
+    onPaneSplit: (sourceId: number, createdId: number, direction: ResttyPaneSplitDirection) => void;
+    /** Active pane change handler. */
+    onActivePaneChange: (paneId: number | null) => void;
+}
+/**
+ * Return type for useTerminal.
+ */
+export interface IUseTerminalReturn {
+    /** Ref to pass to `<ResttyTerminal ref={terminal.ref}>`. */
+    ref: React.RefObject<IResttyTerminalRef | null>;
+    /** Current connection status. */
+    status: TTerminalConnectionStatusToken;
+    /** Whether the PTY is connected. */
+    isConnected: boolean;
+    /** Reconnect the PTY. */
+    reconnect: () => void;
+    /** Disconnect the PTY. */
+    disconnect: () => void;
+    /** Uptime in seconds since connection (null if not connected). */
+    uptimeSeconds: number | null;
+    /** Current font size in CSS pixels. */
+    fontSize: number;
+    /** Increase font size by 1. */
+    fontIncrease: () => void;
+    /** Decrease font size by 1. */
+    fontDecrease: () => void;
+    /** Set exact font size. */
+    setFontSize: (size: number) => void;
+    /** Whether font is at minimum bound. */
+    isFontMin: boolean;
+    /** Whether font is at maximum bound. */
+    isFontMax: boolean;
+    /** Current number of panes. */
+    paneCount: number;
+    /** Active pane ID (null if none). */
+    activePaneId: number | null;
+    /** Split the active pane in the given direction. */
+    splitActive: (direction: 'horizontal' | 'vertical') => void;
+    /** Split a specific pane by ID. */
+    splitPane: (paneId: number, direction: 'horizontal' | 'vertical') => void;
+    /** Close a specific pane by ID. */
+    closePane: (paneId: number) => void;
+    /** Set the active pane by ID. */
+    setActivePane: (paneId: number) => void;
+    /** Current terminal grid dimensions. */
+    dimensions: ITerminalDimensions;
+    /** Clear the terminal screen and scrollback. */
+    clear: () => void;
+    /** Focus the terminal for keyboard input. */
+    focus: () => void;
+    /** Send raw input to the terminal PTY. */
+    sendInput: (data: string) => void;
+    /** Copy current text selection to clipboard. */
+    copySelection: () => Promise<boolean>;
+    /** Paste clipboard contents into the terminal. */
+    pasteClipboard: () => Promise<boolean>;
+    /** Global terminal settings snapshot. */
+    settings: ITerminalSettings;
+    /** Pre-composed props to spread onto `<ResttyTerminal>`. */
+    resttyProps: ITerminalResttyProps;
+}
+/**
+ * Main composable terminal hook.
+ *
+ * Composes `useTerminalConnection`, `useTerminalFontSize`,
+ * `useTerminalPaneManager`, `useTerminalDimensions`, and
+ * `useTerminalKeyboardShortcuts` into a single unified API.
+ *
+ * Returns everything needed to build a fully interactive terminal UI:
+ * - **Connection** state + reconnect/disconnect
+ * - **Font size** with increase/decrease/set
+ * - **Pane management** with split/close/setActive
+ * - **Dimensions** tracking (cols × rows)
+ * - **Actions**: clear, focus, sendInput
+ * - **`resttyProps`**: spread onto `<ResttyTerminal>` for zero-config wiring
+ *
+ * @param options - Terminal configuration
+ * @returns Unified terminal state and controls
+ *
+ * @example
+ * ```tsx
+ * function MyTerminal() {
+ *   const terminal = useTerminal({
+ *     wsUrl: 'ws://localhost:3100/pty',
+ *     keyboardShortcuts: true,
+ *   });
+ *
+ *   return (
+ *     <div className="flex flex-col h-full">
+ *       <div className="flex items-center gap-2 p-2">
+ *         <span>{terminal.isConnected ? 'Connected' : 'Disconnected'}</span>
+ *         <button onClick={terminal.clear}>Clear</button>
+ *         <button onClick={() => terminal.splitActive('vertical')}>Split</button>
+ *         <button onClick={terminal.fontIncrease}>A+</button>
+ *         <button onClick={terminal.fontDecrease}>A-</button>
+ *       </div>
+ *       <ResttyTerminal ref={terminal.ref} {...terminal.resttyProps} className="flex-1" />
+ *       <span>{terminal.dimensions.cols}×{terminal.dimensions.rows} | {terminal.paneCount} panes</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTerminal(options?: IUseTerminalOptions): IUseTerminalReturn;
+//# sourceMappingURL=useTerminal.d.ts.map