@mks2508/mks-ui 0.9.0 → 0.11.0

package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from "../../../../lib/utils.js";
+import { Button } from "../../../../ui/Button/index.js";
 import { ArrowDownToLineIcon } from "../../../../icons/lucide-animated/arrow-down-to-line.js";
 import { ArrowUpIcon } from "../../../../icons/lucide-animated/arrow-up.js";
 import { DeleteIcon } from "../../../../icons/lucide-animated/delete.js";
@@ -245,49 +246,66 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 				/* @__PURE__ */ jsx("div", { className: cn(terminalLogsPanelStyles.actionBarDivider, slots?.actionBarDivider) }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1",
-					children: [viewMode === "terminal" && /* @__PURE__ */ jsx("button", {
+					children: [viewMode === "terminal" && /* @__PURE__ */ jsx(Button, {
+						variant: "bare",
+						size: "bare",
 						type: "button",
 						onClick: () => onFollowCursorChange(!followCursor),
 						className: cn(TOGGLE_STYLES.base, followCursor ? TOGGLE_STYLES.active : TOGGLE_STYLES.inactive),
 						title: followCursor ? "Disable auto-scroll (Ctrl+F)" : "Enable auto-scroll (Ctrl+F)",
-						children: followCursor ? /* @__PURE__ */ jsx(ArrowDownToLineIcon, { className: "w-4 h-4 flex-shrink-0" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 flex-shrink-0" })
-					}), /* @__PURE__ */ jsx("button", {
+						"aria-pressed": followCursor,
+						"aria-label": followCursor ? "Disable auto-scroll" : "Enable auto-scroll",
+						children: followCursor ? /* @__PURE__ */ jsx(ArrowDownToLineIcon, { className: "w-4 h-4 shrink-0" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 shrink-0" })
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "bare",
+						size: "bare",
 						type: "button",
 						onClick: () => onShowLineNumbersChange(!showLineNumbers),
 						className: cn(TOGGLE_STYLES.base, showLineNumbers ? TOGGLE_STYLES.active : TOGGLE_STYLES.inactive),
 						title: showLineNumbers ? "Hide line numbers (Ctrl+L)" : "Show line numbers (Ctrl+L)",
-						children: /* @__PURE__ */ jsx(ListIcon, { className: "w-4 h-4 flex-shrink-0" })
+						"aria-pressed": showLineNumbers,
+						"aria-label": showLineNumbers ? "Hide line numbers" : "Show line numbers",
+						children: /* @__PURE__ */ jsx(ListIcon, { className: "w-4 h-4 shrink-0" })
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1",
 					children: [
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: onSearch,
 							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Search in logs (Ctrl+Shift+F)",
+							"aria-label": "Search in logs",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: SearchIcon,
 								size: 16
 							})
 						}),
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: onClear,
 							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Clear logs (Ctrl+K)",
+							"aria-label": "Clear logs",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: DeleteIcon,
 								size: 16
 							})
 						}),
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: onDownload,
 							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Download logs",
+							"aria-label": "Download logs",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: DownloadIcon,
 								size: 16
@@ -357,12 +375,16 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 						children: "Available containers:"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-wrap gap-2 justify-center",
-						children: [containers.slice(0, 3).map((container) => /* @__PURE__ */ jsx("button", {
+						children: [containers.slice(0, 3).map((container) => /* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => onAddContainer(container.name),
 							className: cn(terminalLogsPanelStyles.containerButton, slots?.containerButton, `hover:${PRIMARY_GLOW.md}`),
 							children: container.name
-						}, container.id)), containers.length > 3 && /* @__PURE__ */ jsxs("button", {
+						}, container.id)), containers.length > 3 && /* @__PURE__ */ jsxs(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => onNewSession?.(),
 							className: cn(terminalLogsPanelStyles.containerButton, slots?.containerButton),

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

@@ -9,11 +9,17 @@
  * - Noise texture SVG overlay for depth
  * - Animated top accent line (primary gradient with glow)
  * - Session tabs (TerminalSessionTabs)
- * - macOS-style header (TerminalPanelHeader)
+ * - macOS-style header (TerminalPanelHeader) — gated by `showHeader` (default `true`)
  * - Slots for action bar, children (terminal content), and footer
  * - Neon magenta scrollbar styles
  * - StyleSlots + CVA variants for customization
  *
+ * As of v0.11.0 the structural skeleton is also available as the public
+ * {@link ChromeShell} primitive (variant B nativa upstream). Consumers
+ * who need full toolbar control without the macOS header should compose
+ * with {@link ChromeShell} directly. This component remains the
+ * batteries-included default for log / interactive panels.
+ *
  * @module components/devenv/terminal/panel/chrome
  */
 import type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
@@ -37,6 +43,16 @@ export declare const terminalScrollStyles = "\n  @keyframes shimmer-line {\n
  * Supports StyleSlots for class overrides and CVA variants
  * for visual presets (default, minimal, error).
  *
+ * v0.11.0 additions (additive, fully backward-compatible):
+ * - `showHeader` (default `true`) — set to `false` to skip rendering
+ *   the default {@link TerminalPanelHeader}.
+ * - `header` slot — replace the default header with custom content
+ *   (e.g. richer status, breadcrumbs). Wins over `showHeader`.
+ *
+ * For chrome-less composition (no traffic lights, no session tabs,
+ * full toolbar control), use the public {@link ChromeShell} primitive
+ * directly instead.
+ *
  * @example
  * ```tsx
  * <TerminalPanelChrome
@@ -50,6 +66,19 @@ export declare const terminalScrollStyles = "\n  @keyframes shimmer-line {\n
  *   <div ref={containerRef} className="terminal-container" />
  * </TerminalPanelChrome>
  * ```
+ *
+ * @example
+ * ```tsx
+ * // v0.11.0 — opt out of the default macOS header.
+ * <TerminalPanelChrome
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   showHeader={false}
+ *   actionBar={<MyCustomToolbar />}
+ * >
+ *   <MyTerminalContent />
+ * </TerminalPanelChrome>
+ * ```
  */
-export declare function TerminalPanelChrome({ containerName, isConnected, variant, size, viewMode, onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, slots, className, }: ITerminalPanelChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TerminalPanelChrome({ containerName, isConnected, variant, size, viewMode, onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, showHeader, header, slots, className, }: ITerminalPanelChromeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TerminalPanelChrome.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalPanelChrome.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAU7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yTAAuT,CAAC;AAEtV;;;GAGG;AACH,eAAO,MAAM,oBAAoB,84EAuFhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,OAAmB,EACnB,IAAgB,EAChB,QAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAwF3B"}
+{"version":3,"file":"TerminalPanelChrome.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAU7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yTAAuT,CAAC;AAEtV;;;GAGG;AACH,eAAO,MAAM,oBAAoB,84EAuFhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,OAAmB,EACnB,IAAgB,EAChB,QAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAiB,EACjB,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAyG3B"}

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

@@ -18,11 +18,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * - Noise texture SVG overlay for depth
 * - Animated top accent line (primary gradient with glow)
 * - Session tabs (TerminalSessionTabs)
-* - macOS-style header (TerminalPanelHeader)
+* - macOS-style header (TerminalPanelHeader) — gated by `showHeader` (default `true`)
 * - Slots for action bar, children (terminal content), and footer
 * - Neon magenta scrollbar styles
 * - StyleSlots + CVA variants for customization
 *
+* As of v0.11.0 the structural skeleton is also available as the public
+* {@link ChromeShell} primitive (variant B nativa upstream). Consumers
+* who need full toolbar control without the macOS header should compose
+* with {@link ChromeShell} directly. This component remains the
+* batteries-included default for log / interactive panels.
+*
 * @module components/devenv/terminal/panel/chrome
 */
 /**
@@ -132,6 +138,16 @@ const terminalScrollStyles = `
 * Supports StyleSlots for class overrides and CVA variants
 * for visual presets (default, minimal, error).
 *
+* v0.11.0 additions (additive, fully backward-compatible):
+* - `showHeader` (default `true`) — set to `false` to skip rendering
+*   the default {@link TerminalPanelHeader}.
+* - `header` slot — replace the default header with custom content
+*   (e.g. richer status, breadcrumbs). Wins over `showHeader`.
+*
+* For chrome-less composition (no traffic lights, no session tabs,
+* full toolbar control), use the public {@link ChromeShell} primitive
+* directly instead.
+*
 * @example
 * ```tsx
 * <TerminalPanelChrome
@@ -145,8 +161,25 @@ const terminalScrollStyles = `
 *   <div ref={containerRef} className="terminal-container" />
 * </TerminalPanelChrome>
 * ```
+*
+* @example
+* ```tsx
+* // v0.11.0 — opt out of the default macOS header.
+* <TerminalPanelChrome
+*   containerName="devenv-agent-backend"
+*   isConnected={true}
+*   showHeader={false}
+*   actionBar={<MyCustomToolbar />}
+* >
+*   <MyTerminalContent />
+* </TerminalPanelChrome>
+* ```
 */
-function TerminalPanelChrome({ containerName, isConnected, variant = "default", size = "default", viewMode = "terminal", onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, slots, className }) {
+function TerminalPanelChrome({ containerName, isConnected, variant = "default", size = "default", viewMode = "terminal", onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, showHeader = true, header, slots, className }) {
+	/** Custom header slot wins over `showHeader`. */
+	const hasCustomHeader = header !== void 0;
+	/** Render the default `<TerminalPanelHeader>` when no custom slot and `showHeader` is on. */
+	const renderDefaultHeader = !hasCustomHeader && showHeader;
 	/** Whether to render session tabs (multi-session mode) */
 	const showSessionTabs = sessions && sessions.length > 0 || availableContainers && availableContainers.length > 0;
 	/** Whether to show the accent line (hidden in minimal variant) */
@@ -162,7 +195,7 @@ function TerminalPanelChrome({ containerName, isConnected, variant = "default",
 			showAccentLine && /* @__PURE__ */ jsxs("div", {
 				className: cn(terminalChromeStyles.accentLine, slots?.accentLine),
 				children: [/* @__PURE__ */ jsx("div", { className: cn(accentGradient, slots?.accentGradient) }), /* @__PURE__ */ jsx("div", {
-					className: cn(terminalChromeStyles.accentShimmer, slots?.accentShimmer),
+					className: cn(terminalChromeStyles.accentShimmer, "motion-reduce:[animation:none]", slots?.accentShimmer),
 					style: {
 						backgroundSize: "200% 100%",
 						animation: "shimmer-line 4s ease-in-out infinite"
@@ -181,7 +214,10 @@ function TerminalPanelChrome({ containerName, isConnected, variant = "default",
 					onAddContainer
 				})
 			}),
-			/* @__PURE__ */ jsx("div", {
+			hasCustomHeader ? /* @__PURE__ */ jsx("div", {
+				className: cn(slots?.header),
+				children: header
+			}) : renderDefaultHeader ? /* @__PURE__ */ jsx("div", {
 				className: cn(slots?.header),
 				children: /* @__PURE__ */ jsx(TerminalPanelHeader, {
 					containerName,
@@ -192,7 +228,7 @@ function TerminalPanelChrome({ containerName, isConnected, variant = "default",
 					onMinimize,
 					onMaximize
 				})
-			}),
+			}) : null,
 			actionBar && /* @__PURE__ */ jsx("div", {
 				className: cn(slots?.actionBar),
 				children: actionBar

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

@@ -54,6 +54,28 @@ export interface ITerminalPanelChromeProps extends TerminalChromeVariantProps {
     onMaximize?: () => void;
     /** Enable CRT shader effects (scanlines, bloom, vignette) */
     crtEffect?: boolean;
+    /**
+     * Whether to render the default macOS-style header (traffic lights +
+     * container name + connection status). Defaults to `true` to preserve
+     * v0.10.0 behavior — pass `false` when composing a custom toolbar that
+     * already includes the connection status, or when delegating header
+     * concerns to the consumer (variant B nativa, v0.11.0+).
+     *
+     * Has no effect when {@link ITerminalPanelChromeProps.header} is set
+     * (the explicit slot always wins).
+     */
+    showHeader?: boolean;
+    /**
+     * Custom header slot. When provided, replaces the default
+     * {@link TerminalPanelHeader} (traffic lights + container name).
+     * Mutually exclusive with `showHeader`: if `header` is non-`undefined`
+     * it always wins, regardless of the `showHeader` flag.
+     *
+     * Use this when the default header is fine for the macOS chrome
+     * cosmetics but the consumer wants to swap the inner content
+     * (e.g. richer status, custom session label, breadcrumbs).
+     */
+    header?: React.ReactNode;
     /** Slot class overrides for each chrome sub-region */
     slots?: SlotOverrides<TerminalChromeSlot>;
     /** Custom class name appended to outer wrapper */

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalPanelChrome.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAEnG;;;;;;GAMG;AACH,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC;IAErB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAEhC,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,KAAK,IAAI,CAAC;IAExD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,KAAK,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"TerminalPanelChrome.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAEnG;;;;;;GAMG;AACH,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC;IAErB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAEhC,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,KAAK,IAAI,CAAC;IAExD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,KAAK,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -16,6 +16,14 @@ export type { TerminalSettingsPopoverSlot } from './TerminalSettingsPopover.styl
  * Renders a settings gear icon that opens a popover with terminal
  * configuration options. Uses centralized tokens for all shared styles.
  *
+ * **Side-effect warning**: every mutation persists to `localStorage` via
+ * `useTerminalSettings` and propagates to ALL other consumers of the same
+ * hook in the running app (cross-component sync via `useSyncExternalStore`).
+ * Renderer / fontSize / CRT / debug switches are global, not scoped to
+ * the panel that hosts the popover. If a consumer wants per-panel
+ * settings, do not use this popover — drive the setting from a local
+ * prop instead.
+ *
  * @example
  * ```tsx
  * <TerminalSettingsPopover slots={{ trigger: 'h-10 w-10' }} />

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGrF,YAAY,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC;AACjF,YAAY,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAMpF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAE,6BAAkC,2CA2MpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAmBH,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGrF,YAAY,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC;AACjF,YAAY,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAMpF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAE,6BAAkC,2CA4OpF"}

package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.js

@@ -2,6 +2,7 @@
 
 import { cn } from "../../../../lib/utils.js";
 import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../../ui/Popover/index.js";
+import { Button } from "../../../../ui/Button/index.js";
 import { Separator } from "../../../../ui/Separator/index.js";
 import { SettingsIcon } from "../../../../icons/lucide-animated/settings.js";
 import "../../../../icons/lucide-animated/index.js";
@@ -29,6 +30,14 @@ const MAX_FONT_SIZE = 24;
 * Renders a settings gear icon that opens a popover with terminal
 * configuration options. Uses centralized tokens for all shared styles.
 *
+* **Side-effect warning**: every mutation persists to `localStorage` via
+* `useTerminalSettings` and propagates to ALL other consumers of the same
+* hook in the running app (cross-component sync via `useSyncExternalStore`).
+* Renderer / fontSize / CRT / debug switches are global, not scoped to
+* the panel that hosts the popover. If a consumer wants per-panel
+* settings, do not use this popover — drive the setting from a local
+* prop instead.
+*
 * @example
 * ```tsx
 * <TerminalSettingsPopover slots={{ trigger: 'h-10 w-10' }} />
@@ -66,21 +75,30 @@ function TerminalSettingsPopover({ slots } = {}) {
 					}), /* @__PURE__ */ jsxs("div", {
 						className: cn(terminalSettingsPopoverStyles.segmentedControl, slots?.segmentedControl),
 						children: [
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bare",
+								size: "bare",
 								type: "button",
 								onClick: () => setRenderer("xterm"),
+								"aria-pressed": settings.renderer === "xterm",
 								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "xterm" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
 								children: "xterm"
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bare",
+								size: "bare",
 								type: "button",
 								onClick: () => setRenderer("restty"),
+								"aria-pressed": settings.renderer === "restty",
 								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "restty" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
 								children: "restty"
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bare",
+								size: "bare",
 								type: "button",
 								onClick: () => setRenderer("wterm"),
+								"aria-pressed": settings.renderer === "wterm",
 								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "wterm" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
 								children: "wterm"
 							})
@@ -105,14 +123,20 @@ function TerminalSettingsPopover({ slots } = {}) {
 						children: "PTY Backend"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: cn(terminalSettingsPopoverStyles.segmentedControl, slots?.segmentedControl),
-						children: [/* @__PURE__ */ jsx("button", {
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => setPtyBackend("nodepty"),
+							"aria-pressed": settings.ptyBackend === "nodepty",
 							className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.ptyBackend === "nodepty" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
 							children: "nodepty"
-						}), /* @__PURE__ */ jsx("button", {
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => setPtyBackend("webcontainer"),
+							"aria-pressed": settings.ptyBackend === "webcontainer",
 							className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.ptyBackend === "webcontainer" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
 							children: "webcontainer"
 						})]
@@ -127,27 +151,33 @@ function TerminalSettingsPopover({ slots } = {}) {
 					}), /* @__PURE__ */ jsxs("div", {
 						className: cn(terminalSettingsPopoverStyles.fontControls, slots?.fontControls),
 						children: [
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bare",
+								size: "bare",
 								type: "button",
 								onClick: () => setFontSize(settings.fontSize - 1),
 								className: FONT_BUTTON_STYLES,
 								disabled: settings.fontSize <= MIN_FONT_SIZE,
 								title: "Decrease font size",
+								"aria-label": "Decrease font size",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "text-sm font-bold",
 									children: "−"
 								})
 							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-sm font-mono text-foreground w-8 text-center",
+							/* @__PURE__ */ jsx("output", {
+								className: "text-sm font-mono text-foreground w-8 text-center [font-variant-numeric:tabular-nums]",
 								children: settings.fontSize
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bare",
+								size: "bare",
 								type: "button",
 								onClick: () => setFontSize(settings.fontSize + 1),
 								className: FONT_BUTTON_STYLES,
 								disabled: settings.fontSize >= MAX_FONT_SIZE,
 								title: "Increase font size",
+								"aria-label": "Increase font size",
 								children: /* @__PURE__ */ jsx("span", {
 									className: "text-sm font-bold",
 									children: "+"
@@ -171,9 +201,14 @@ function TerminalSettingsPopover({ slots } = {}) {
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-xs text-muted-foreground",
 							children: "Scanlines, bloom & vignette"
-						}), /* @__PURE__ */ jsx("button", {
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => setCrtEffect(!settings.crtEffect),
+							role: "switch",
+							"aria-checked": settings.crtEffect,
+							"aria-label": "Toggle CRT effect",
 							className: cn(TOGGLE_SWITCH_STYLES.track.base, settings.crtEffect ? TOGGLE_SWITCH_STYLES.track.active : TOGGLE_SWITCH_STYLES.track.inactive),
 							children: /* @__PURE__ */ jsx("span", { className: cn(TOGGLE_SWITCH_STYLES.thumb.base, settings.crtEffect ? TOGGLE_SWITCH_STYLES.thumb.active : TOGGLE_SWITCH_STYLES.thumb.inactive) })
 						})]
@@ -190,9 +225,14 @@ function TerminalSettingsPopover({ slots } = {}) {
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-xs text-muted-foreground",
 							children: "GPU, FPS, grid & connection info"
-						}), /* @__PURE__ */ jsx("button", {
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "bare",
+							size: "bare",
 							type: "button",
 							onClick: () => setDebugPanel(!settings.debugPanel),
+							role: "switch",
+							"aria-checked": settings.debugPanel,
+							"aria-label": "Toggle debug panel",
 							className: cn(TOGGLE_SWITCH_STYLES.track.base, settings.debugPanel ? TOGGLE_SWITCH_STYLES.track.active : TOGGLE_SWITCH_STYLES.track.inactive),
 							children: /* @__PURE__ */ jsx("span", { className: cn(TOGGLE_SWITCH_STYLES.thumb.base, settings.debugPanel ? TOGGLE_SWITCH_STYLES.thumb.active : TOGGLE_SWITCH_STYLES.thumb.inactive) })
 						})]
@@ -201,7 +241,9 @@ function TerminalSettingsPopover({ slots } = {}) {
 				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
 				/* @__PURE__ */ jsx("div", {
 					className: "px-4 py-3",
-					children: /* @__PURE__ */ jsx("button", {
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "bare",
+						size: "bare",
 						type: "button",
 						onClick: resetToDefaults,
 						className: cn(terminalSettingsPopoverStyles.resetButton, slots?.resetButton),

package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ResttyRenderer Component.
+ *
+ * Chrome-less restty renderer for maximum composability.
+ * Wraps @mks2508/restty ResttyTerminal component without any chrome,
+ * toolbar, or status bar. Use this when you want to build your own
+ * terminal shell or embed in custom layouts.
+ *
+ * Lazy-loads @mks2508/restty on first render. Returns null if
+ * the peer dependency is not installed.
+ *
+ * @module components/devenv/terminal/renderers/restty
+ */
+import type { ITerminalRendererProps, ITerminalRendererRef } from './types';
+/**
+ * ResttyRenderer Component.
+ *
+ * Chrome-less restty renderer. Provides:
+ * - @mks2508/restty ResttyTerminal with WebGPU/WebGL2 rendering
+ * - Auto-resize on container resize
+ * - Font size from useTerminalSettings context (override via props)
+ * - Ref forwarding with focus, write, clear, resize methods
+ * - Lazy-loading with graceful fallback if @mks2508/restty is missing
+ *
+ * restty features:
+ * - GPU-accelerated rendering (WebGPU/WebGL2)
+ * - libghostty-vt WASM core (full VT100/VT220/xterm parser)
+ * - Built-in theme catalog (Dracula, Synthwave, etc.)
+ * - Multi-pane splits
+ * - Scrollback history
+ *
+ * @example
+ * ```tsx
+ * const termRef = useRef<ITerminalRendererRef>(null);
+ *
+ * <ResttyRenderer
+ *   ref={termRef}
+ *   sessionId="my-session"
+ *   fontSize={16}
+ *   resttyThemeName="Dracula"
+ *   onReady={() => console.log('Terminal ready')}
+ *   className="h-[600px]"
+ * />
+ * ```
+ */
+export declare const ResttyRenderer: import("react").ForwardRefExoticComponent<ITerminalRendererProps & {
+    /** Restty built-in theme name (default: from useTerminalSettings) */
+    readonly resttyThemeName?: string;
+    /** GPU renderer preference (default: "auto") */
+    readonly gpuRenderer?: "auto" | "webgpu" | "webgl2";
+} & import("react").RefAttributes<ITerminalRendererRef>>;
+//# sourceMappingURL=ResttyRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResttyRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/renderers/ResttyRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAaH,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAyC5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,cAAc;IAGvB,qEAAqE;+BAC1C,MAAM;IAEjC,gDAAgD;2BACzB,MAAM,GAAG,QAAQ,GAAG,QAAQ;wDAuHtD,CAAC"}