@mks2508/mks-ui 0.6.8 → 0.8.0

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { DeleteIcon } from "../../../icons/lucide-animated/delete.js";
+import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
+import "../../../icons/lucide-animated/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalAtoms.tsx
+/**
+* Small composable terminal control atoms.
+*
+* Lightweight single-purpose UI atoms for building custom terminal
+* action bars and status bars. Each uses centralized design tokens.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalAtoms
+*/
+/**
+* Clear terminal button atom.
+*
+* @example
+* ```tsx
+* <TerminalClearButton onClear={() => resttyRef.current?.clear()} />
+* ```
+*/
+function TerminalClearButton({ onClear, label = "Clear", showLabel = true, className }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onClear,
+		className: cn("h-8 px-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30", "flex items-center justify-center gap-1 text-xs font-mono", "text-muted-foreground hover:text-foreground flex-shrink-0", className),
+		title: "Clear terminal",
+		children: [/* @__PURE__ */ jsx(DeleteIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }), showLabel && /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+/**
+* Reconnect button atom.
+*
+* Only visible when the terminal is disconnected or in error state.
+*
+* @example
+* ```tsx
+* <TerminalReconnectButton onReconnect={terminal.reconnect} status={terminal.status} />
+* ```
+*/
+function TerminalReconnectButton({ onReconnect, status, className }) {
+	if (status === "connected" || status === "connecting") return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onReconnect,
+		className: cn("h-8 px-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30", "flex items-center justify-center gap-1 text-xs font-mono", "text-primary hover:text-primary flex-shrink-0", className),
+		title: "Reconnect terminal",
+		children: "Reconnect"
+	});
+}
+/**
+* Terminal dimensions badge atom.
+*
+* Displays terminal grid dimensions as `cols×rows`.
+*
+* @example
+* ```tsx
+* <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+* ```
+*/
+function TerminalDimensionsBadge({ dimensions, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("text-xs font-mono text-muted-foreground", className),
+		children: [
+			dimensions.cols,
+			"×",
+			dimensions.rows
+		]
+	});
+}
+/**
+* Renderer badge atom.
+*
+* Displays the active terminal renderer as a small label badge.
+*
+* @example
+* ```tsx
+* <TerminalRendererBadge renderer="restty" />
+* ```
+*/
+function TerminalRendererBadge({ renderer, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-[10px] font-mono text-primary/70 uppercase tracking-wider", "px-1.5 py-0.5 rounded border border-primary/20 bg-primary/5", className),
+		children: renderer
+	});
+}
+/**
+* Disconnected overlay atom.
+*
+* Full-screen overlay shown when the terminal is disconnected.
+* Includes a reconnect button and terminal icon.
+*
+* @example
+* ```tsx
+* {terminal.status === 'disconnected' && (
+*   <TerminalDisconnectedOverlay onReconnect={terminal.reconnect} />
+* )}
+* ```
+*/
+function TerminalDisconnectedOverlay({ onReconnect, visible = true, className }) {
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-none", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center pointer-events-auto",
+			children: [
+				/* @__PURE__ */ jsx(TerminalIcon, { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/50" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground/70 font-mono mb-3",
+					children: "Terminal disconnected"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onReconnect,
+					className: cn("px-4 py-2 rounded-lg text-sm font-mono transition-colors", "bg-primary/20 text-primary hover:bg-primary/30", "border border-primary/40", "shadow-[0_0_10px_hsl(var(--primary)/0.2)]"),
+					children: "Reconnect"
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TerminalClearButton, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalReconnectButton, TerminalRendererBadge };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalConnectionStatus.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalConnectionStatus/TerminalConnectionStatus.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAErF;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,UAAU,CAAC,4BAA4B,CAI1E,CAAC"}

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

@@ -0,0 +1,12 @@
+//#region src/react-ui/blocks/Terminal/controls/TerminalConnectionStatus/TerminalConnectionStatus.styles.ts
+/**
+* Base styles for TerminalConnectionStatus slots.
+*/
+const terminalConnectionStatusStyles = {
+	root: "flex items-center gap-1.5",
+	dot: "w-2 h-2 rounded-full transition-all duration-300",
+	label: "text-xs font-mono"
+};
+
+//#endregion
+export { terminalConnectionStatusStyles };

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

@@ -0,0 +1,29 @@
+/**
+ * Types for TerminalConnectionStatus component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalConnectionStatus
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TTerminalConnectionStatusToken } from '../../Terminal.tokens';
+/**
+ * Visual slots for TerminalConnectionStatus.
+ */
+export type TerminalConnectionStatusSlot = 'root' | 'dot' | 'label';
+/**
+ * Props for TerminalConnectionStatus.
+ */
+export interface ITerminalConnectionStatusProps {
+    /** Current connection status. */
+    status: TTerminalConnectionStatusToken;
+    /** Uptime in seconds since connection (null if not connected). */
+    uptimeSeconds?: number | null;
+    /** Show uptime duration when connected (default: false). */
+    showUptime?: boolean;
+    /** Display variant. 'compact' shows only the dot, no label. */
+    variant?: 'default' | 'compact';
+    /** Slot class overrides. */
+    slots?: SlotOverrides<TerminalConnectionStatusSlot>;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+//# sourceMappingURL=TerminalConnectionStatus.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalConnectionStatus.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalConnectionStatus/TerminalConnectionStatus.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,uBAAuB,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,iCAAiC;IACjC,MAAM,EAAE,8BAA8B,CAAC;IAEvC,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAEpD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,37 @@
+/**
+ * TerminalConnectionStatus — connection status indicator atom.
+ *
+ * Displays a colored dot and optional label based on the terminal's
+ * connection status. Uses `STATUS_COLORS` from centralized tokens.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalConnectionStatus
+ *
+ * @example
+ * ```tsx
+ * <TerminalConnectionStatus status={terminal.status} />
+ * <TerminalConnectionStatus status="connected" variant="compact" />
+ * ```
+ */
+import type { ITerminalConnectionStatusProps } from './TerminalConnectionStatus.types';
+export type { ITerminalConnectionStatusProps, TerminalConnectionStatusSlot } from './TerminalConnectionStatus.types';
+export { terminalConnectionStatusStyles } from './TerminalConnectionStatus.styles';
+/**
+ * Connection status indicator.
+ *
+ * Shows a colored dot indicating connection state, with an optional
+ * text label and uptime display. Supports `default` and `compact`
+ * variants.
+ *
+ * @example
+ * ```tsx
+ * const terminal = useTerminal({ wsUrl: 'ws://...' });
+ *
+ * <TerminalConnectionStatus
+ *   status={terminal.status}
+ *   uptimeSeconds={terminal.uptimeSeconds}
+ *   showUptime
+ * />
+ * ```
+ */
+export declare function TerminalConnectionStatus({ status, uptimeSeconds, showUptime, variant, slots, className, }: ITerminalConnectionStatusProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalConnectionStatus/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAOH,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAEvF,YAAY,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AACrH,OAAO,EAAE,8BAA8B,EAAE,MAAM,mCAAmC,CAAC;AAsBnF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,aAAa,EACb,UAAkB,EAClB,OAAmB,EACnB,KAAK,EACL,SAAS,GACV,EAAE,8BAA8B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgBpD"}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { STATUS_COLORS } from "../../Terminal.tokens.js";
+import { terminalConnectionStatusStyles } from "./TerminalConnectionStatus.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalConnectionStatus/index.tsx
+/**
+* TerminalConnectionStatus — connection status indicator atom.
+*
+* Displays a colored dot and optional label based on the terminal's
+* connection status. Uses `STATUS_COLORS` from centralized tokens.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalConnectionStatus
+*
+* @example
+* ```tsx
+* <TerminalConnectionStatus status={terminal.status} />
+* <TerminalConnectionStatus status="connected" variant="compact" />
+* ```
+*/
+/** Status labels for each connection state. */
+const STATUS_LABELS = {
+	connected: "Connected",
+	connecting: "Connecting...",
+	disconnected: "Disconnected",
+	error: "Error"
+};
+/**
+* Format uptime seconds as a human-readable string.
+*/
+function formatUptime(seconds) {
+	if (seconds < 60) return `${seconds}s`;
+	const mins = Math.floor(seconds / 60);
+	const secs = seconds % 60;
+	if (mins < 60) return `${mins}m ${secs}s`;
+	return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+}
+/**
+* Connection status indicator.
+*
+* Shows a colored dot indicating connection state, with an optional
+* text label and uptime display. Supports `default` and `compact`
+* variants.
+*
+* @example
+* ```tsx
+* const terminal = useTerminal({ wsUrl: 'ws://...' });
+*
+* <TerminalConnectionStatus
+*   status={terminal.status}
+*   uptimeSeconds={terminal.uptimeSeconds}
+*   showUptime
+* />
+* ```
+*/
+function TerminalConnectionStatus({ status, uptimeSeconds, showUptime = false, variant = "default", slots, className }) {
+	const colors = STATUS_COLORS[status] ?? STATUS_COLORS.disconnected;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalConnectionStatusStyles.root, slots?.root, className),
+		children: [/* @__PURE__ */ jsx("div", { className: cn(terminalConnectionStatusStyles.dot, colors.dot, slots?.dot) }), variant !== "compact" && /* @__PURE__ */ jsxs("span", {
+			className: cn(terminalConnectionStatusStyles.label, colors.label, slots?.label),
+			children: [STATUS_LABELS[status] ?? status, showUptime && uptimeSeconds !== null && uptimeSeconds !== void 0 && status === "connected" && /* @__PURE__ */ jsxs(Fragment, { children: [
+				" (",
+				formatUptime(uptimeSeconds),
+				")"
+			] })]
+		})]
+	});
+}
+
+//#endregion
+export { TerminalConnectionStatus };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFontControls.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalFontControls/TerminalFontControls.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,UAAU,CAAC,wBAAwB,CAMlE,CAAC"}

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

@@ -0,0 +1,16 @@
+import { FONT_BUTTON_STYLES } from "../../Terminal.tokens.js";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalFontControls/TerminalFontControls.styles.ts
+/**
+* Base styles for TerminalFontControls slots.
+*/
+const terminalFontControlsStyles = {
+	root: "flex items-center gap-1",
+	label: "text-[10px] text-muted-foreground font-mono uppercase tracking-wider mr-1",
+	decreaseButton: FONT_BUTTON_STYLES,
+	display: "text-xs font-mono text-foreground w-7 text-center",
+	increaseButton: FONT_BUTTON_STYLES
+};
+
+//#endregion
+export { terminalFontControlsStyles };

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

@@ -0,0 +1,32 @@
+/**
+ * Types for TerminalFontControls component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalFontControls
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+/**
+ * Visual slots for TerminalFontControls.
+ */
+export type TerminalFontControlsSlot = 'root' | 'label' | 'decreaseButton' | 'display' | 'increaseButton';
+/**
+ * Props for TerminalFontControls.
+ */
+export interface ITerminalFontControlsProps {
+    /** Current font size in CSS pixels. */
+    fontSize: number;
+    /** Called when the increase button is clicked. */
+    onIncrease: () => void;
+    /** Called when the decrease button is clicked. */
+    onDecrease: () => void;
+    /** Whether font is at minimum bound (disables decrease). */
+    isMin?: boolean;
+    /** Whether font is at maximum bound (disables increase). */
+    isMax?: boolean;
+    /** Show "Font" label (default: true). */
+    showLabel?: boolean;
+    /** Slot class overrides. */
+    slots?: SlotOverrides<TerminalFontControlsSlot>;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+//# sourceMappingURL=TerminalFontControls.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFontControls.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalFontControls/TerminalFontControls.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,SAAS,GAAG,gBAAgB,CAAC;AAE1G;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IAEjB,kDAAkD;IAClD,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,kDAAkD;IAClD,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAEhD,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,40 @@
+/**
+ * TerminalFontControls — font size ± controls atom.
+ *
+ * Composable font size control with decrease, display, and increase buttons.
+ * Uses `FONT_BUTTON_STYLES` from centralized tokens.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalFontControls
+ *
+ * @example
+ * ```tsx
+ * const font = useTerminalFontSize({ ref: resttyRef });
+ * <TerminalFontControls
+ *   fontSize={font.fontSize}
+ *   onIncrease={font.increase}
+ *   onDecrease={font.decrease}
+ *   isMin={font.isMin}
+ *   isMax={font.isMax}
+ * />
+ * ```
+ */
+import type { ITerminalFontControlsProps } from './TerminalFontControls.types';
+export type { ITerminalFontControlsProps, TerminalFontControlsSlot } from './TerminalFontControls.types';
+export { terminalFontControlsStyles } from './TerminalFontControls.styles';
+/**
+ * Font size controls.
+ *
+ * Renders a `−` button, current size display, and `+` button.
+ * Buttons are disabled at min/max bounds.
+ *
+ * @example
+ * ```tsx
+ * <TerminalFontControls
+ *   fontSize={14}
+ *   onIncrease={() => setFontSize(s => s + 1)}
+ *   onDecrease={() => setFontSize(s => s - 1)}
+ * />
+ * ```
+ */
+export declare function TerminalFontControls({ fontSize, onIncrease, onDecrease, isMin, isMax, showLabel, slots, className, }: ITerminalFontControlsProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalFontControls/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE/E,YAAY,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACzG,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,UAAU,EACV,KAAa,EACb,KAAa,EACb,SAAgB,EAChB,KAAK,EACL,SAAS,GACV,EAAE,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6BhD"}

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

@@ -0,0 +1,81 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { PlusIcon } from "../../../../icons/lucide-animated/plus.js";
+import "../../../../icons/lucide-animated/index.js";
+import { terminalFontControlsStyles } from "./TerminalFontControls.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalFontControls/index.tsx
+/**
+* TerminalFontControls — font size ± controls atom.
+*
+* Composable font size control with decrease, display, and increase buttons.
+* Uses `FONT_BUTTON_STYLES` from centralized tokens.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalFontControls
+*
+* @example
+* ```tsx
+* const font = useTerminalFontSize({ ref: resttyRef });
+* <TerminalFontControls
+*   fontSize={font.fontSize}
+*   onIncrease={font.increase}
+*   onDecrease={font.decrease}
+*   isMin={font.isMin}
+*   isMax={font.isMax}
+* />
+* ```
+*/
+/**
+* Font size controls.
+*
+* Renders a `−` button, current size display, and `+` button.
+* Buttons are disabled at min/max bounds.
+*
+* @example
+* ```tsx
+* <TerminalFontControls
+*   fontSize={14}
+*   onIncrease={() => setFontSize(s => s + 1)}
+*   onDecrease={() => setFontSize(s => s - 1)}
+* />
+* ```
+*/
+function TerminalFontControls({ fontSize, onIncrease, onDecrease, isMin = false, isMax = false, showLabel = true, slots, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalFontControlsStyles.root, slots?.root, className),
+		children: [
+			showLabel && /* @__PURE__ */ jsx("span", {
+				className: cn(terminalFontControlsStyles.label, slots?.label),
+				children: "Font"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDecrease,
+				className: cn(terminalFontControlsStyles.decreaseButton, slots?.decreaseButton),
+				title: "Decrease font size",
+				disabled: isMin,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-bold",
+					children: "−"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(terminalFontControlsStyles.display, slots?.display),
+				children: fontSize
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onIncrease,
+				className: cn(terminalFontControlsStyles.increaseButton, slots?.increaseButton),
+				title: "Increase font size",
+				disabled: isMax,
+				children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-3 h-3 flex-shrink-0" })
+			})
+		]
+	});
+}
+
+//#endregion
+export { TerminalFontControls };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSplitButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalSplitButton/TerminalSplitButton.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAAC,uBAAuB,CAKhE,CAAC"}

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

@@ -0,0 +1,13 @@
+//#region src/react-ui/blocks/Terminal/controls/TerminalSplitButton/TerminalSplitButton.styles.ts
+/**
+* Base styles for TerminalSplitButton slots.
+*/
+const terminalSplitButtonStyles = {
+	root: "flex items-center gap-0.5",
+	splitHButton: "h-7 w-7 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none",
+	splitVButton: "h-7 w-7 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none",
+	countBadge: "text-[10px] font-mono text-muted-foreground/70 ml-0.5"
+};
+
+//#endregion
+export { terminalSplitButtonStyles };

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

@@ -0,0 +1,28 @@
+/**
+ * Types for TerminalSplitButton component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalSplitButton
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+/**
+ * Visual slots for TerminalSplitButton.
+ */
+export type TerminalSplitButtonSlot = 'root' | 'splitHButton' | 'splitVButton' | 'countBadge';
+/**
+ * Props for TerminalSplitButton.
+ */
+export interface ITerminalSplitButtonProps {
+    /** Called when horizontal split is requested. */
+    onSplitHorizontal: () => void;
+    /** Called when vertical split is requested. */
+    onSplitVertical: () => void;
+    /** Current pane count. Shows a badge when > 1. */
+    paneCount?: number;
+    /** Disable both split buttons. */
+    disabled?: boolean;
+    /** Slot class overrides. */
+    slots?: SlotOverrides<TerminalSplitButtonSlot>;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+//# sourceMappingURL=TerminalSplitButton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSplitButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalSplitButton/TerminalSplitButton.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,YAAY,CAAC;AAE9F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,iDAAiD;IACjD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAE5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAE/C,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,40 @@
+/**
+ * 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}
+ * />
+ * ```
+ */
+import type { ITerminalSplitButtonProps } from './TerminalSplitButton.types';
+export type { ITerminalSplitButtonProps, TerminalSplitButtonSlot } from './TerminalSplitButton.types';
+export { terminalSplitButtonStyles } from './TerminalSplitButton.styles';
+/**
+ * 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}
+ * />
+ * ```
+ */
+export declare function TerminalSplitButton({ onSplitHorizontal, onSplitVertical, paneCount, disabled, slots, className, }: ITerminalSplitButtonProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalSplitButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7E,YAAY,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuC/C"}