@mks2508/mks-ui 0.6.8 → 0.7.0

package/dist/react-ui/blocks/Terminal/panel/{TerminalFilterDropdown.js → TerminalFilterDropdown/index.js}

@@ -1,18 +1,20 @@
 'use client';
 
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../../../../lib/utils.js";
+import { LOG_LEVEL_STYLES } from "../../Terminal.tokens.js";
+import { terminalFilterDropdownStyles } from "./TerminalFilterDropdown.styles.js";
 import terminal_filter_dropdown_module_default from "./terminal-filter-dropdown.module.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown.tsx
+//#region src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/index.tsx
 /**
 * TerminalFilterDropdown Component.
 *
-* Dropdown menu for log level filtering.
-* Replaces tab-style filters with a compact dropdown menu.
+* Dropdown menu for log level filtering with color indicators.
+* Fully composable via StyleSlots.
 *
-* @module components/devenv/terminal/panel/filter-dropdown
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterDropdown
 */
 /**
 * Log level filter configurations.
@@ -20,38 +22,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FILTER_OPTIONS = [
 	{
 		value: "all",
-		label: "All Levels",
-		color: "text-foreground"
+		label: "All Levels"
 	},
 	{
 		value: "trace",
-		label: "Trace",
-		color: "text-slate-400"
+		label: "Trace"
 	},
 	{
 		value: "debug",
-		label: "Debug",
-		color: "text-blue-400"
+		label: "Debug"
 	},
 	{
 		value: "info",
-		label: "Info",
-		color: "text-green-400"
+		label: "Info"
 	},
 	{
 		value: "warn",
-		label: "Warn",
-		color: "text-yellow-400"
+		label: "Warn"
 	},
 	{
 		value: "error",
-		label: "Error",
-		color: "text-orange-400"
+		label: "Error"
 	},
 	{
 		value: "fatal",
-		label: "Fatal",
-		color: "text-red-400"
+		label: "Fatal"
 	}
 ];
 /**
@@ -66,9 +61,11 @@ function getCount(level, levelCounts) {
 *
 * Displays a dropdown menu with:
 * - Current filter level as button label
-* - Filter options with badges
-* - Keyboard shortcuts
-* - Glassmorphic dropdown menu
+* - Filter options with log-level-colored dots
+* - Badge counts per level
+* - CSS Anchor positioned dropdown
+*
+* All visual regions are overridable via the `slots` prop.
 *
 * @example
 * ```tsx
@@ -79,7 +76,7 @@ function getCount(level, levelCounts) {
 * />
 * ```
 */
-function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, className }) {
+function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, slots, className }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const containerRef = useRef(null);
 	useEffect(() => {
@@ -94,12 +91,12 @@ function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, clas
 	const currentOption = FILTER_OPTIONS.find((opt) => opt.value === filterLevel);
 	const currentCount = getCount(filterLevel, levelCounts);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative", className),
+		className: cn(terminalFilterDropdownStyles.root, slots?.root, className),
 		ref: containerRef,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setIsOpen(!isOpen),
-			className: cn(terminal_filter_dropdown_module_default.triggerButton, "flex items-center gap-2 px-3 py-2 h-9 rounded-md transition-all duration-200", "bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground", "border border-border/30 hover:border-border/50", "shadow-[inset_0_0.5px_0_rgba(255,255,255,0.1)] hover:shadow-[0_0_8px_rgba(0,0,0,0.1)]", "text-xs font-mono font-medium uppercase tracking-wider"),
+			className: cn(terminal_filter_dropdown_module_default.triggerButton, terminalFilterDropdownStyles.trigger, slots?.trigger),
 			"aria-label": "Filter logs by level",
 			"aria-expanded": isOpen,
 			children: [
@@ -120,7 +117,7 @@ function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, clas
 					children: currentOption?.label
 				}),
 				currentCount > 0 && /* @__PURE__ */ jsx("span", {
-					className: "inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 bg-primary/20 text-primary rounded font-mono text-[10px] font-bold",
+					className: cn(terminalFilterDropdownStyles.triggerBadge, slots?.triggerBadge),
 					children: currentCount
 				}),
 				/* @__PURE__ */ jsx("svg", {
@@ -137,31 +134,32 @@ function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, clas
 				})
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			className: terminal_filter_dropdown_module_default.dropdownMenu,
+			className: cn(terminal_filter_dropdown_module_default.dropdownMenu, slots?.dropdown),
 			"data-open": isOpen,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "glass-subtle rounded-lg py-1",
 				children: FILTER_OPTIONS.map((option) => {
 					const count = getCount(option.value, levelCounts);
 					const isActive = filterLevel === option.value;
+					const levelStyle = LOG_LEVEL_STYLES[option.value];
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: () => {
 							onFilterChange(option.value);
 							setIsOpen(false);
 						},
-						className: cn("w-full px-3 py-2 flex items-center justify-between gap-3", "transition-all duration-150", "hover:bg-primary/10", isActive && "bg-primary/15"),
+						className: cn(terminalFilterDropdownStyles.option, slots?.option, isActive && "bg-primary/15"),
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: cn("w-2 h-2 rounded-full flex-shrink-0", option.value === "all" ? "bg-foreground" : `bg-${option.label.toLowerCase()}-400`),
+								className: cn(terminalFilterDropdownStyles.optionDot, slots?.optionDot, option.value === "all" ? "bg-foreground" : ""),
 								style: { backgroundColor: option.value === "all" ? "hsl(var(--foreground))" : void 0 }
 							}), /* @__PURE__ */ jsx("span", {
-								className: cn("text-sm font-mono", isActive ? option.color : "text-muted-foreground"),
+								className: cn(terminalFilterDropdownStyles.optionLabel, slots?.optionLabel, isActive ? levelStyle?.text : "text-muted-foreground"),
 								children: option.label
 							})]
 						}), count > 0 && /* @__PURE__ */ jsx("span", {
-							className: cn("inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 rounded font-mono text-[10px] font-bold", isActive ? "bg-primary/30 text-primary" : "bg-muted/40 text-muted-foreground"),
+							className: cn(terminalFilterDropdownStyles.optionBadge, slots?.optionBadge, isActive ? "bg-primary/30 text-primary" : "bg-muted/40 text-muted-foreground"),
 							children: count
 						})]
 					}, option.value);

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/terminal-filter-dropdown.module.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalFilterDropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for dropdown placement.
+ * Button acts as anchor, dropdown is positioned relative to it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
+ */
+
+/* Trigger button - acts as CSS anchor */
+.triggerButton {
+  anchor-name: --filter-dropdown-anchor;
+}
+
+/* Dropdown menu - anchored to trigger button */
+.dropdownMenu {
+  position-anchor: --filter-dropdown-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 180px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.dropdownMenu[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .dropdownMenu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .dropdownMenu[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/terminal-filter-dropdown.module.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/terminal-filter-dropdown.module.css
+var terminal_filter_dropdown_module_default = {};
+
+//#endregion
+export { terminal_filter_dropdown_module_default as default };

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TerminalFilterTabs style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterTabs
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalFilterTabs visual regions. */
+export type TerminalFilterTabsSlot = 'root' | 'tab' | 'tabLabel' | 'badge' | 'activeOverlay';
+/**
+ * Default style slots for TerminalFilterTabs.
+ */
+export declare const terminalFilterTabsStyles: StyleSlots<TerminalFilterTabsSlot>;
+//# sourceMappingURL=TerminalFilterTabs.styles.d.ts.map

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterTabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,wDAAwD;AACxD,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,KAAK,GACL,UAAU,GACV,OAAO,GACP,eAAe,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,sBAAsB,CAMvE,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * TerminalFilterTabs types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterTabs
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TLogLevelFilter, TLogLevel } from '../TerminalLogsPanel.types';
+import type { TerminalFilterTabsSlot } from './TerminalFilterTabs.styles';
+/**
+ * Props for the TerminalFilterTabs component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterTabs
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   slots={{ root: 'h-14' }}
+ * />
+ * ```
+ */
+export interface ITerminalFilterTabsProps {
+    /** Current log level filter */
+    filterLevel: TLogLevelFilter;
+    /** Log level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalFilterTabsSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalFilterTabs.types.d.ts.map

package/dist/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterTabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterTabs/TerminalFilterTabs.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAE1E;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,WAAW,EAAE,eAAe,CAAC;IAE7B,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,yCAAyC;IACzC,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEjD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAE9C,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,34 @@
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Tab-style filter buttons with badge counts and glow effects.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterTabs
+ */
+import type { ITerminalFilterTabsProps } from './TerminalFilterTabs.types';
+export type { ITerminalFilterTabsProps } from './TerminalFilterTabs.types';
+export { terminalFilterTabsStyles } from './TerminalFilterTabs.styles';
+export type { TerminalFilterTabsSlot } from './TerminalFilterTabs.styles';
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Displays tab-style filter buttons with:
+ * - Badge count integration with glow on active
+ * - Keyboard shortcuts in tooltips
+ * - Smooth animations on state changes
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterTabs
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   slots={{ tab: 'rounded-lg' }}
+ * />
+ * ```
+ */
+export declare function TerminalFilterTabs({ filterLevel, levelCounts, onFilterChange, slots, className, }: ITerminalFilterTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterTabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAI3E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAyB1E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,WAAW,EACX,cAAc,EACd,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,2CAiD1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalInteractivePanel.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAUrH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,wBAAwB,yIAgBnC,CAAC"}
+{"version":3,"file":"TerminalInteractivePanel.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAarH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,wBAAwB,yIAkBnC,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.js

@@ -17,6 +17,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const TerminalInteractivePanelXterm = lazy(() => import("./TerminalInteractivePanelXterm.js").then((m) => ({ default: m.TerminalInteractivePanelXterm })));
 const TerminalInteractivePanelRestty = lazy(() => import("./TerminalInteractivePanelRestty.js").then((m) => ({ default: m.TerminalInteractivePanelRestty })));
+const TerminalInteractivePanelWterm = lazy(() => import("./TerminalInteractivePanelWterm.js").then((m) => ({ default: m.TerminalInteractivePanelWterm })));
 /**
 * TerminalInteractivePanel Component.
 *
@@ -46,10 +47,13 @@ const TerminalInteractivePanel = forwardRef((props, ref) => {
 	const { settings } = useTerminalSettings();
 	const renderer = props.renderer ?? settings.renderer;
 	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("div", { className: "min-h-[400px] bg-[#241B2F]" }),
+		fallback: /* @__PURE__ */ jsx("div", { className: "min-h-[400px] bg-[hsl(var(--terminal-bg,var(--background)))]" }),
 		children: renderer === "restty" ? /* @__PURE__ */ jsx(TerminalInteractivePanelRestty, {
 			ref,
 			...props
+		}) : renderer === "wterm" ? /* @__PURE__ */ jsx(TerminalInteractivePanelWterm, {
+			ref,
+			...props
 		}) : /* @__PURE__ */ jsx(TerminalInteractivePanelXterm, {
 			ref,
 			...props

package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.d.ts

@@ -19,8 +19,9 @@ export interface ITerminalInteractivePanelProps {
      * Terminal renderer to use.
      * - `xterm`: xterm.js DOM/canvas renderer (default)
      * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer
+     * - `wterm`: Zig + WASM VT100/VT220/xterm parser, DOM rendering
      */
-    renderer?: 'xterm' | 'restty';
+    renderer?: 'xterm' | 'restty' | 'wterm';
     /**
      * PTY backend type.
      * - `nodepty`: node-pty via WebSocket (default)

package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TerminalInteractivePanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,8BAA8B;IAC7C,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAExC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,4BAA4B;IAC3C,8CAA8C;IAC9C,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,8CAA8C;IAC9C,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,sCAAsC;IACtC,WAAW,EAAE,MAAM,OAAO,CAAC;CAC5B"}
+{"version":3,"file":"TerminalInteractivePanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,8BAA8B;IAC7C,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAExC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,4BAA4B;IAC3C,8CAA8C;IAC9C,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,8CAA8C;IAC9C,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,sCAAsC;IACtC,WAAW,EAAE,MAAM,OAAO,CAAC;CAC5B"}

package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.d.ts

@@ -6,6 +6,9 @@
  * footer) but uses restty for rendering and its own PTY transport
  * instead of useTerminalWebSocket.
  *
+ * Internally composes `useTerminal` hook with `TerminalActionBar`,
+ * `TerminalStatusBar`, and `TerminalDisconnectedOverlay` atoms.
+ *
  * @module components/devenv/terminal/panel/interactive-restty
  */
 import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
@@ -15,9 +18,9 @@ import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } fro
  * GPU-accelerated interactive terminal combining:
  * - TerminalPanelChrome (Ghostty glassmorphism shell)
  * - restty with WebGPU/WebGL2 rendering
- * - Custom DevenvPtyTransport for mks-devenv WebSocket protocol
- * - Action bar (clear, font size controls, reconnect)
- * - Footer with connection status and terminal dimensions
+ * - Composable action bar (clear, settings, split, font controls)
+ * - Composable status bar (connection, dimensions, font size)
+ * - Disconnected overlay with reconnect button
  *
  * @example
  * ```tsx

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalInteractivePanelRestty.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAYH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AA0BrH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,8BAA8B,0KA0T1C,CAAC"}
+{"version":3,"file":"TerminalInteractivePanelRestty.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAQH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAUrH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,8BAA8B,0KAyF1C,CAAC"}