@mks2508/mks-ui 0.6.7 → 0.7.0

package/dist/react-ui/blocks/Terminal/components/SyntaxHighlight.styles.js

@@ -0,0 +1,51 @@
+//#region src/react-ui/blocks/Terminal/components/SyntaxHighlight.styles.ts
+/**
+* Default syntax highlighting theme.
+*
+* Maps each token type to Tailwind CSS classes. Consumers can override
+* individual tokens while keeping the rest as defaults.
+*
+* @example
+* ```tsx
+* // Custom theme with modified string color
+* const myTheme = {
+*   ...DEFAULT_SYNTAX_THEME,
+*   string: 'text-emerald-400',
+*   number: 'text-orange-400',
+* };
+* ```
+*/
+const DEFAULT_SYNTAX_THEME = {
+	timestamp: "text-cyan-400/70",
+	badge: "text-purple-400 bg-purple-500/10 px-1 rounded font-semibold",
+	sourceLocation: "text-orange-400 bg-orange-500/10 px-1 rounded text-xs",
+	sourceLocationParen: "text-orange-400/80",
+	curlyBraces: "text-yellow-400 bg-yellow-500/5 px-0.5 rounded",
+	parentheses: "text-purple-300/80",
+	angleBrackets: "text-cyan-300/80",
+	version: "text-green-400 font-semibold",
+	propertyKey: "text-green-500",
+	keywordBadge: "text-pink-400 font-semibold",
+	string: "text-green-400",
+	number: "text-yellow-400",
+	boolean: "text-blue-400",
+	nullish: "text-gray-500",
+	httpMethod: "text-pink-400 font-semibold",
+	urlPath: "text-cyan-400",
+	fileExtension: "text-orange-400",
+	structuralBrace: "text-yellow-500",
+	equals: "text-gray-400",
+	arrow: "text-purple-400 font-semibold",
+	jsonNull: "text-gray-500",
+	jsonBoolean: "text-blue-400",
+	jsonNumber: "text-yellow-400",
+	jsonString: "text-green-400",
+	jsonKey: "text-green-500",
+	jsonBrace: "text-yellow-500",
+	jsonComma: "text-gray-500",
+	jsonColon: "text-gray-500",
+	jsonFallback: "text-gray-500"
+};
+
+//#endregion
+export { DEFAULT_SYNTAX_THEME };

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TerminalLogBadge style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalLogBadge visual regions. */
+export type TerminalLogBadgeSlot = 'root';
+/**
+ * Default style slots for TerminalLogBadge.
+ */
+export declare const terminalLogBadgeStyles: StyleSlots<TerminalLogBadgeSlot>;
+//# sourceMappingURL=TerminalLogBadge.styles.d.ts.map

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogBadge.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,sDAAsD;AACtD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,UAAU,CAAC,oBAAoB,CAEnE,CAAC"}

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.styles.js

@@ -0,0 +1,8 @@
+//#region src/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.styles.ts
+/**
+* Default style slots for TerminalLogBadge.
+*/
+const terminalLogBadgeStyles = { root: "" };
+
+//#endregion
+export { terminalLogBadgeStyles };

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * TerminalLogBadge types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+import type { ReactNode } from 'react';
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TLogLevelFilter } from '../../parsing/LogParser.types';
+import type { TerminalLogBadgeSlot } from './TerminalLogBadge.styles';
+/**
+ * Props for the TerminalLogBadge component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogBadge level="error">3</TerminalLogBadge>
+ * <TerminalLogBadge level="info" slots={{ root: 'text-sm' }}>42</TerminalLogBadge>
+ * ```
+ */
+export interface ITerminalLogBadgeProps {
+    /** Log level to display */
+    level: TLogLevelFilter | string;
+    /** Badge content (typically a count) */
+    children: ReactNode;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalLogBadgeSlot>;
+    /** Additional class name */
+    className?: string;
+}
+//# sourceMappingURL=TerminalLogBadge.types.d.ts.map

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogBadge.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/components/TerminalLogBadge/TerminalLogBadge.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;;;;;;;GAQG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,KAAK,EAAE,eAAe,GAAG,MAAM,CAAC;IAEhC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IAEpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAE5C,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,26 @@
+/**
+ * TerminalLogBadge Component.
+ *
+ * Wraps the base Badge component with terminal log level color styling.
+ * Uses centralized LOG_LEVEL_STYLES from Terminal tokens.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+import type { ITerminalLogBadgeProps } from './TerminalLogBadge.types';
+export type { ITerminalLogBadgeProps } from './TerminalLogBadge.types';
+export { terminalLogBadgeStyles } from './TerminalLogBadge.styles';
+export type { TerminalLogBadgeSlot } from './TerminalLogBadge.styles';
+/**
+ * TerminalLogBadge Component.
+ *
+ * Renders a Badge styled for terminal log levels with appropriate
+ * color coding for each severity level, using centralized tokens.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogBadge level="error">3</TerminalLogBadge>
+ * <TerminalLogBadge level="info" slots={{ root: 'text-sm' }}>42</TerminalLogBadge>
+ * ```
+ */
+export declare function TerminalLogBadge({ level, children, slots, className }: ITerminalLogBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/components/TerminalLogBadge/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvE,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAY7F"}

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge/index.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { Badge } from "../../../../ui/Badge/index.js";
+import { LOG_LEVEL_STYLES } from "../../Terminal.tokens.js";
+import { terminalLogBadgeStyles } from "./TerminalLogBadge.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/TerminalLogBadge/index.tsx
+/**
+* TerminalLogBadge Component.
+*
+* Wraps the base Badge component with terminal log level color styling.
+* Uses centralized LOG_LEVEL_STYLES from Terminal tokens.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+*/
+/**
+* TerminalLogBadge Component.
+*
+* Renders a Badge styled for terminal log levels with appropriate
+* color coding for each severity level, using centralized tokens.
+*
+* @example
+* ```tsx
+* <TerminalLogBadge level="error">3</TerminalLogBadge>
+* <TerminalLogBadge level="info" slots={{ root: 'text-sm' }}>42</TerminalLogBadge>
+* ```
+*/
+function TerminalLogBadge({ level, children, slots, className }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		size: "sm",
+		className: cn((LOG_LEVEL_STYLES[level] ?? LOG_LEVEL_STYLES.unknown).badge, terminalLogBadgeStyles.root, slots?.root, className),
+		children
+	});
+}
+
+//#endregion
+export { TerminalLogBadge };

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

@@ -1,4 +1,7 @@
-import { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge } from "./LogLineBadges.js";
+import { logLineBadgesStyles } from "./LogLineBadges/LogLineBadges.styles.js";
+import { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge } from "./LogLineBadges/index.js";
+import { DEFAULT_SYNTAX_THEME } from "./SyntaxHighlight.styles.js";
 import { HighlightedJson, SyntaxHighlightedText, clearHighlightCache } from "./SyntaxHighlight.js";
 import { SpecializedSyntaxHighlighter } from "./SpecializedSyntaxHighlighter.js";
-import { TerminalLogBadge } from "./TerminalLogBadge.js";
+import { terminalLogBadgeStyles } from "./TerminalLogBadge/TerminalLogBadge.styles.js";
+import { TerminalLogBadge } from "./TerminalLogBadge/index.js";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalActionBar.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalActionBar/TerminalActionBar.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,CAK5D,CAAC"}

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

@@ -0,0 +1,13 @@
+//#region src/react-ui/blocks/Terminal/controls/TerminalActionBar/TerminalActionBar.styles.ts
+/**
+* Base styles for TerminalActionBar slots.
+*/
+const terminalActionBarStyles = {
+	root: "flex items-center gap-2 px-3 h-10 bg-muted/10 border-b border-white/10",
+	group: "flex items-center gap-1",
+	separator: "w-px h-5 bg-border/30 mx-1",
+	spacer: "flex-1"
+};
+
+//#endregion
+export { terminalActionBarStyles };

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

@@ -0,0 +1,35 @@
+/**
+ * Types for TerminalActionBar component.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalActionBar
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { IUseTerminalReturn } from '../../hooks/useTerminal';
+/**
+ * Visual slots for TerminalActionBar.
+ */
+export type TerminalActionBarSlot = 'root' | 'group' | 'separator' | 'spacer';
+/**
+ * Props for TerminalActionBar.
+ */
+export interface ITerminalActionBarProps {
+    /**
+     * Terminal hook return value for auto mode.
+     * When provided, renders default action controls automatically.
+     * When omitted, renders `children` for custom composition.
+     */
+    terminal?: IUseTerminalReturn;
+    /** Custom children (used when `terminal` is not provided). */
+    children?: React.ReactNode;
+    /** Show settings popover in auto mode (default: true). */
+    showSettings?: boolean;
+    /** Show split controls in auto mode (default: true). */
+    showSplit?: boolean;
+    /** Show renderer badge in auto mode (default: true). */
+    showRendererBadge?: boolean;
+    /** Slot class overrides. */
+    slots?: SlotOverrides<TerminalActionBarSlot>;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+//# sourceMappingURL=TerminalActionBar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalActionBar.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalActionBar/TerminalActionBar.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,GAAG,QAAQ,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAE9B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,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/TerminalActionBar/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * TerminalActionBar — composable action bar container.
+ *
+ * Two usage modes:
+ * - **Auto mode**: Pass `terminal` prop from `useTerminal()` to render
+ *   default controls (clear, split, font, settings, renderer badge).
+ * - **Custom mode**: Pass `children` for full composition control.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalActionBar
+ *
+ * @example
+ * ```tsx
+ * // Auto mode
+ * const terminal = useTerminal({ wsUrl: 'ws://...' });
+ * <TerminalActionBar terminal={terminal} />
+ *
+ * // Custom mode
+ * <TerminalActionBar>
+ *   <TerminalClearButton onClear={terminal.clear} />
+ *   <TerminalFontControls fontSize={14} onIncrease={...} onDecrease={...} />
+ * </TerminalActionBar>
+ * ```
+ */
+import type { ITerminalActionBarProps } from './TerminalActionBar.types';
+export type { ITerminalActionBarProps, TerminalActionBarSlot } from './TerminalActionBar.types';
+export { terminalActionBarStyles } from './TerminalActionBar.styles';
+/**
+ * Separator sub-component for custom composition.
+ */
+declare function ActionBarSeparator({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Group sub-component for custom composition.
+ */
+declare function ActionBarGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Composable terminal action bar.
+ *
+ * In **auto mode** (with `terminal` prop), renders:
+ * Clear | Spacer | Settings | RendererBadge | Reconnect | Split | Font ±
+ *
+ * In **custom mode** (with `children`), renders children in a styled flex container.
+ *
+ * @example
+ * ```tsx
+ * // Auto mode — one line, all controls
+ * <TerminalActionBar terminal={terminal} />
+ *
+ * // Custom mode — pick your controls
+ * <TerminalActionBar>
+ *   <TerminalActionBar.Group>
+ *     <TerminalClearButton onClear={terminal.clear} />
+ *   </TerminalActionBar.Group>
+ *   <TerminalActionBar.Separator />
+ *   <TerminalActionBar.Group>
+ *     <TerminalFontControls {...fontProps} />
+ *   </TerminalActionBar.Group>
+ * </TerminalActionBar>
+ * ```
+ */
+declare function TerminalActionBarRoot({ terminal, children, showSettings, showSplit, showRendererBadge, slots, className, }: ITerminalActionBarProps): React.JSX.Element;
+/**
+ * TerminalActionBar with typed sub-components.
+ */
+export declare const TerminalActionBar: typeof TerminalActionBarRoot & {
+    /** Separator sub-component for custom composition. */
+    Separator: typeof ActionBarSeparator;
+    /** Group sub-component for custom composition. */
+    Group: typeof ActionBarGroup;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/controls/TerminalActionBar/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMzE,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,YAAmB,EACnB,SAAgB,EAChB,iBAAwB,EACxB,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiD7C;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;IAC5B,sDAAsD;;IAEtD,kDAAkD;;CAElD,CAAC"}

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { terminalActionBarStyles } from "./TerminalActionBar.styles.js";
+import { TerminalClearButton, TerminalReconnectButton, TerminalRendererBadge } from "../TerminalAtoms.js";
+import { TerminalFontControls } from "../TerminalFontControls/index.js";
+import { TerminalSplitButton } from "../TerminalSplitButton/index.js";
+import { TerminalSettingsPopover } from "../../panel/TerminalSettingsPopover/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/controls/TerminalActionBar/index.tsx
+/**
+* TerminalActionBar — composable action bar container.
+*
+* Two usage modes:
+* - **Auto mode**: Pass `terminal` prop from `useTerminal()` to render
+*   default controls (clear, split, font, settings, renderer badge).
+* - **Custom mode**: Pass `children` for full composition control.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/controls/TerminalActionBar
+*
+* @example
+* ```tsx
+* // Auto mode
+* const terminal = useTerminal({ wsUrl: 'ws://...' });
+* <TerminalActionBar terminal={terminal} />
+*
+* // Custom mode
+* <TerminalActionBar>
+*   <TerminalClearButton onClear={terminal.clear} />
+*   <TerminalFontControls fontSize={14} onIncrease={...} onDecrease={...} />
+* </TerminalActionBar>
+* ```
+*/
+/**
+* Separator sub-component for custom composition.
+*/
+function ActionBarSeparator({ className }) {
+	return /* @__PURE__ */ jsx("div", { className: cn(terminalActionBarStyles.separator, className) });
+}
+/**
+* Group sub-component for custom composition.
+*/
+function ActionBarGroup({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(terminalActionBarStyles.group, className),
+		children
+	});
+}
+/**
+* Composable terminal action bar.
+*
+* In **auto mode** (with `terminal` prop), renders:
+* Clear | Spacer | Settings | RendererBadge | Reconnect | Split | Font ±
+*
+* In **custom mode** (with `children`), renders children in a styled flex container.
+*
+* @example
+* ```tsx
+* // Auto mode — one line, all controls
+* <TerminalActionBar terminal={terminal} />
+*
+* // Custom mode — pick your controls
+* <TerminalActionBar>
+*   <TerminalActionBar.Group>
+*     <TerminalClearButton onClear={terminal.clear} />
+*   </TerminalActionBar.Group>
+*   <TerminalActionBar.Separator />
+*   <TerminalActionBar.Group>
+*     <TerminalFontControls {...fontProps} />
+*   </TerminalActionBar.Group>
+* </TerminalActionBar>
+* ```
+*/
+function TerminalActionBarRoot({ terminal, children, showSettings = true, showSplit = true, showRendererBadge = true, slots, className }) {
+	if (!terminal) return /* @__PURE__ */ jsx("div", {
+		className: cn(terminalActionBarStyles.root, slots?.root, className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalActionBarStyles.root, slots?.root, className),
+		children: [
+			/* @__PURE__ */ jsx(TerminalClearButton, { onClear: terminal.clear }),
+			/* @__PURE__ */ jsx("div", { className: cn(terminalActionBarStyles.spacer, slots?.spacer) }),
+			showSettings && /* @__PURE__ */ jsx(TerminalSettingsPopover, {}),
+			showRendererBadge && /* @__PURE__ */ jsx(TerminalRendererBadge, { renderer: terminal.settings.renderer }),
+			/* @__PURE__ */ jsx(TerminalReconnectButton, {
+				onReconnect: terminal.reconnect,
+				status: terminal.status
+			}),
+			showSplit && /* @__PURE__ */ jsx(TerminalSplitButton, {
+				onSplitHorizontal: () => terminal.splitActive("horizontal"),
+				onSplitVertical: () => terminal.splitActive("vertical"),
+				paneCount: terminal.paneCount
+			}),
+			/* @__PURE__ */ jsx(TerminalFontControls, {
+				fontSize: terminal.fontSize,
+				onIncrease: terminal.fontIncrease,
+				onDecrease: terminal.fontDecrease,
+				isMin: terminal.isFontMin,
+				isMax: terminal.isFontMax
+			})
+		]
+	});
+}
+/**
+* TerminalActionBar with typed sub-components.
+*/
+const TerminalActionBar = Object.assign(TerminalActionBarRoot, {
+	Separator: ActionBarSeparator,
+	Group: ActionBarGroup
+});
+
+//#endregion
+export { TerminalActionBar };

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

@@ -0,0 +1,122 @@
+/**
+ * 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
+ */
+import type { TTerminalConnectionStatusToken } from '../Terminal.tokens';
+/**
+ * Props for TerminalClearButton.
+ */
+export interface ITerminalClearButtonProps {
+    /** Called when the clear button is clicked. */
+    onClear: () => void;
+    /** Button label (default: "Clear"). */
+    label?: string;
+    /** Show text label next to icon (default: true). */
+    showLabel?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Clear terminal button atom.
+ *
+ * @example
+ * ```tsx
+ * <TerminalClearButton onClear={() => resttyRef.current?.clear()} />
+ * ```
+ */
+export declare function TerminalClearButton({ onClear, label, showLabel, className, }: ITerminalClearButtonProps): React.JSX.Element;
+/**
+ * Props for TerminalReconnectButton.
+ */
+export interface ITerminalReconnectButtonProps {
+    /** Called when the reconnect button is clicked. */
+    onReconnect: () => void;
+    /** Current connection status. Only visible when disconnected or error. */
+    status: TTerminalConnectionStatusToken;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Reconnect button atom.
+ *
+ * Only visible when the terminal is disconnected or in error state.
+ *
+ * @example
+ * ```tsx
+ * <TerminalReconnectButton onReconnect={terminal.reconnect} status={terminal.status} />
+ * ```
+ */
+export declare function TerminalReconnectButton({ onReconnect, status, className, }: ITerminalReconnectButtonProps): React.JSX.Element | null;
+/**
+ * Props for TerminalDimensionsBadge.
+ */
+export interface ITerminalDimensionsBadgeProps {
+    /** Terminal grid dimensions. */
+    dimensions: {
+        cols: number;
+        rows: number;
+    };
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Terminal dimensions badge atom.
+ *
+ * Displays terminal grid dimensions as `cols×rows`.
+ *
+ * @example
+ * ```tsx
+ * <TerminalDimensionsBadge dimensions={terminal.dimensions} />
+ * ```
+ */
+export declare function TerminalDimensionsBadge({ dimensions, className, }: ITerminalDimensionsBadgeProps): React.JSX.Element;
+/**
+ * Props for TerminalRendererBadge.
+ */
+export interface ITerminalRendererBadgeProps {
+    /** Renderer name to display. */
+    renderer: 'restty' | 'xterm' | string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Renderer badge atom.
+ *
+ * Displays the active terminal renderer as a small label badge.
+ *
+ * @example
+ * ```tsx
+ * <TerminalRendererBadge renderer="restty" />
+ * ```
+ */
+export declare function TerminalRendererBadge({ renderer, className, }: ITerminalRendererBadgeProps): React.JSX.Element;
+/**
+ * Props for TerminalDisconnectedOverlay.
+ */
+export interface ITerminalDisconnectedOverlayProps {
+    /** Called when the reconnect button is clicked. */
+    onReconnect: () => void;
+    /** Whether to show the overlay (default: true). */
+    visible?: boolean;
+    /** Additional CSS classes for the overlay container. */
+    className?: string;
+}
+/**
+ * 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} />
+ * )}
+ * ```
+ */
+export declare function TerminalDisconnectedOverlay({ onReconnect, visible, className, }: ITerminalDisconnectedOverlayProps): React.JSX.Element | null;
+//# sourceMappingURL=TerminalAtoms.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalAtoms.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/controls/TerminalAtoms.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,oBAAoB,CAAC;AAKzE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,KAAe,EACf,SAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB/C;AAID;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,mDAAmD;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0EAA0E;IAC1E,MAAM,EAAE,8BAA8B,CAAC;IACvC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAkB1D;AAID;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,gCAAgC;IAChC,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,UAAU,EACV,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMnD;AAID;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,gCAAgC;IAChC,QAAQ,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,GACV,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAYjD;AAID;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD,mDAAmD;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,WAAW,EACX,OAAc,EACd,SAAS,GACV,EAAE,iCAAiC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAyB9D"}