@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,225 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../ui/Popover/index.js";
+import { Separator } from "../../../ui/Separator/index.js";
+import { SettingsIcon } from "../../../icons/lucide-animated/settings.js";
+import "../../../icons/lucide-animated/index.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalThemeSelector } from "./TerminalThemeSelector.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover.tsx
+/**
+* TerminalSettingsPopover Component.
+*
+* Gear icon popover for global terminal settings:
+* renderer (xterm/restty), theme (458 built-in), PTY backend,
+* and font size. Reads and writes via useTerminalSettings hook.
+*
+* @module components/devenv/terminal/panel/TerminalSettingsPopover
+*/
+/**
+* Action button base styles for the trigger icon.
+*/
+const triggerBtnStyles = "h-8 w-8 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0";
+/**
+* Segmented control button styles.
+*/
+const segmentedBase = "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all";
+const segmentedInactive = "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]";
+const segmentedActive = "bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsla(330,85%,43%,0.15)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.25)]";
+/**
+* Min/max font size bounds.
+*/
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* Small control button for font size +/-.
+*/
+const fontBtnStyles = "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";
+/**
+* TerminalSettingsPopover Component.
+*
+* Renders a settings gear icon that opens a popover with
+* terminal configuration options. Reads settings from
+* `useTerminalSettings` — no prop drilling needed.
+*
+* @example
+* ```tsx
+* // In action bar:
+* <TerminalSettingsPopover />
+* ```
+*/
+function TerminalSettingsPopover() {
+	const { settings, setRenderer, setPtyBackend, setResttyThemeName, setFontSize, setCrtEffect, setDebugPanel, resetToDefaults } = useTerminalSettings();
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: triggerBtnStyles,
+		title: "Terminal settings",
+		children: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 })
+	}) }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+		align: "end",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsxs(PopoverPopup, {
+			className: "w-72 p-0 glass-subtle",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-4 py-3",
+					children: [/* @__PURE__ */ jsx(SettingsIcon, {
+						size: 14,
+						className: "text-muted-foreground"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-foreground",
+						children: "Terminal Settings"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Renderer"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 bg-muted/10 rounded-lg p-0.5",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setRenderer("xterm"),
+							className: cn(segmentedBase, settings.renderer === "xterm" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "xterm"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setRenderer("restty"),
+							className: cn(segmentedBase, settings.renderer === "restty" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "restty"
+						})]
+					})]
+				}),
+				settings.renderer === "restty" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }), /* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Theme"
+					}), /* @__PURE__ */ jsx(TerminalThemeSelector, {
+						currentTheme: settings.resttyThemeName,
+						onThemeChange: setResttyThemeName
+					})]
+				})] }),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "PTY Backend"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 bg-muted/10 rounded-lg p-0.5",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("nodepty"),
+							className: cn(segmentedBase, settings.ptyBackend === "nodepty" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "nodepty"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("webcontainer"),
+							className: cn(segmentedBase, settings.ptyBackend === "webcontainer" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "webcontainer"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Font Size"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setFontSize(settings.fontSize - 1),
+								className: fontBtnStyles,
+								disabled: settings.fontSize <= MIN_FONT_SIZE,
+								title: "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",
+								children: settings.fontSize
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setFontSize(settings.fontSize + 1),
+								className: fontBtnStyles,
+								disabled: settings.fontSize >= MAX_FONT_SIZE,
+								title: "Increase font size",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "text-sm font-bold",
+									children: "+"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[10px] font-mono text-muted-foreground/50 ml-auto",
+								children: "px"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "CRT Effect"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: "Scanlines, bloom & vignette"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCrtEffect(!settings.crtEffect),
+							className: cn("relative w-9 h-5 rounded-full transition-colors", settings.crtEffect ? "bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "bg-muted/30"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all", settings.crtEffect ? "left-[18px]" : "left-0.5") })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Debug Panel"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: "GPU, FPS, grid & connection info"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setDebugPanel(!settings.debugPanel),
+							className: cn("relative w-9 h-5 rounded-full transition-colors", settings.debugPanel ? "bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "bg-muted/30"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all", settings.debugPanel ? "left-[18px]" : "left-0.5") })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-3",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: resetToDefaults,
+						className: "w-full h-8 rounded-md text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors",
+						children: "Reset to Defaults"
+					})
+				})
+			]
+		})
+	}) })] });
+}
+
+//#endregion
+export { TerminalSettingsPopover };

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

@@ -0,0 +1,35 @@
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's 458 built-in terminal themes.
+ * Uses Popover for the dropdown UI with glassmorphism styling
+ * matching the existing TerminalFilterDropdown pattern.
+ *
+ * @module components/devenv/terminal/panel/TerminalThemeSelector
+ */
+/**
+ * Props for the TerminalThemeSelector component.
+ */
+export interface ITerminalThemeSelectorProps {
+    /** Currently active theme name */
+    currentTheme: string;
+    /** Callback when user selects a new theme */
+    onThemeChange: (themeName: string) => void;
+}
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's built-in theme catalog.
+ * Favorites are pinned to the top, followed by alphabetically
+ * sorted themes. Search filters by case-insensitive substring.
+ *
+ * @example
+ * ```tsx
+ * <TerminalThemeSelector
+ *   currentTheme="Synthwave Alpha"
+ *   onThemeChange={(name) => setResttyThemeName(name)}
+ * />
+ * ```
+ */
+export declare function TerminalThemeSelector({ currentTheme, onThemeChange }: ITerminalThemeSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalThemeSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalThemeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,YAAY,EAAE,MAAM,CAAC;IAErB,6CAA6C;IAC7C,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAsBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,2BAA2B,2CAyJjG"}

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

@@ -0,0 +1,187 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../ui/Popover/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx
+/**
+* TerminalThemeSelector Component.
+*
+* Searchable dropdown for restty's 458 built-in terminal themes.
+* Uses Popover for the dropdown UI with glassmorphism styling
+* matching the existing TerminalFilterDropdown pattern.
+*
+* @module components/devenv/terminal/panel/TerminalThemeSelector
+*/
+/**
+* Favorite themes displayed at the top of the list.
+*/
+const FAVORITE_THEMES = [
+	"Synthwave Alpha",
+	"Synthwave",
+	"Dracula",
+	"Nord",
+	"One Dark",
+	"Tokyo Night",
+	"Catppuccin Mocha",
+	"Gruvbox Dark"
+];
+/**
+* Action button base styles (matches TerminalInteractivePanel pattern).
+*/
+const triggerStyles = "h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1.5 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0 border border-border/30";
+/**
+* TerminalThemeSelector Component.
+*
+* Searchable dropdown for restty's built-in theme catalog.
+* Favorites are pinned to the top, followed by alphabetically
+* sorted themes. Search filters by case-insensitive substring.
+*
+* @example
+* ```tsx
+* <TerminalThemeSelector
+*   currentTheme="Synthwave Alpha"
+*   onThemeChange={(name) => setResttyThemeName(name)}
+* />
+* ```
+*/
+function TerminalThemeSelector({ currentTheme, onThemeChange }) {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [themeNames, setThemeNames] = useState([]);
+	const searchInputRef = useRef(null);
+	/**
+	* Load the theme catalog from restty on first open.
+	*/
+	useEffect(() => {
+		if (!open || themeNames.length > 0) return;
+		import("restty").then(({ listBuiltinThemeNames }) => {
+			const names = listBuiltinThemeNames();
+			if (Array.isArray(names)) setThemeNames(names.sort((a, b) => a.localeCompare(b)));
+		}).catch(() => {});
+	}, [open, themeNames.length]);
+	/**
+	* Focus search input on open.
+	*/
+	useEffect(() => {
+		if (open) requestAnimationFrame(() => searchInputRef.current?.focus());
+		else setSearch("");
+	}, [open]);
+	/**
+	* Filter and group themes based on search query.
+	*/
+	const { favorites, others } = useMemo(() => {
+		const query = search.toLowerCase().trim();
+		const allNames = themeNames.length > 0 ? themeNames : FAVORITE_THEMES;
+		const favSet = new Set(FAVORITE_THEMES);
+		return {
+			favorites: FAVORITE_THEMES.filter((name) => !query || name.toLowerCase().includes(query)),
+			others: allNames.filter((name) => !favSet.has(name) && (!query || name.toLowerCase().includes(query)))
+		};
+	}, [search, themeNames]);
+	/**
+	* Handle theme selection.
+	*/
+	const handleSelect = useCallback((themeName) => {
+		onThemeChange(themeName);
+		setOpen(false);
+	}, [onThemeChange]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: triggerStyles,
+			title: "Select terminal theme",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate max-w-[140px]",
+				children: currentTheme
+			}), /* @__PURE__ */ jsx("svg", {
+				className: cn("w-3 h-3 transition-transform flex-shrink-0", open && "rotate-180"),
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				children: /* @__PURE__ */ jsx("path", { d: "M3 5l3 3 3-3" })
+			})]
+		}) }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+			align: "start",
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsxs(PopoverPopup, {
+				className: "w-64 p-0 glass-subtle rounded-lg",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "p-2 border-b border-border/30",
+					children: /* @__PURE__ */ jsx("input", {
+						ref: searchInputRef,
+						type: "text",
+						value: search,
+						onChange: (e) => setSearch(e.target.value),
+						placeholder: "Search themes...",
+						className: "w-full h-8 px-2.5 rounded-md bg-muted/20 border border-border/30 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 transition-colors"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "max-h-[300px] overflow-y-auto py-1",
+					children: [
+						favorites.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							className: "px-3 py-1.5",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+								children: "Favorites"
+							})
+						}), favorites.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
+							name,
+							isActive: name === currentTheme,
+							onSelect: handleSelect
+						}, `fav-${name}`))] }),
+						others.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+							favorites.length > 0 && /* @__PURE__ */ jsx("div", { className: "mx-2 my-1 h-px bg-border/20" }),
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 py-1.5",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+									children: [
+										"All Themes (",
+										others.length,
+										")"
+									]
+								})
+							}),
+							others.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
+								name,
+								isActive: name === currentTheme,
+								onSelect: handleSelect
+							}, name))
+						] }),
+						favorites.length === 0 && others.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "px-3 py-4 text-center",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "text-xs font-mono text-muted-foreground/50",
+								children: [
+									"No themes match \"",
+									search,
+									"\""
+								]
+							})
+						})
+					]
+				})]
+			})
+		}) })]
+	});
+}
+/**
+* Individual theme option in the dropdown list.
+*/
+function ThemeOption({ name, isActive, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect(name),
+		className: cn("w-full text-left px-3 py-1.5 text-xs font-mono transition-colors", "hover:bg-muted/20", isActive ? "text-primary bg-primary/10" : "text-foreground/80"),
+		children: [isActive && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-primary mr-2 align-middle" }), name]
+	});
+}
+
+//#endregion
+export { TerminalThemeSelector };

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

@@ -0,0 +1,30 @@
+/**
+ * Terminal Panel Module.
+ *
+ * Complete terminal panel with session tabs, header, filter tabs,
+ * action bar, display, and footer. Ghostty-inspired design with
+ * glassmorphism effects and premium visual details.
+ *
+ * @module components/devenv/terminal/panel
+ */
+export { TerminalLogsPanel } from './TerminalLogsPanel';
+export { TerminalInteractivePanel } from './TerminalInteractivePanel';
+export { TerminalInteractivePanelRestty } from './TerminalInteractivePanelRestty';
+export { TerminalPanelChrome } from './TerminalPanelChrome';
+export { TerminalSettingsPopover } from './TerminalSettingsPopover';
+export { TerminalThemeSelector } from './TerminalThemeSelector';
+export { TerminalDebugPanel, type ITerminalDebugPanelProps } from './TerminalDebugPanel';
+export { NOISE_TEXTURE_SVG, terminalScrollStyles } from './TerminalPanelChrome';
+export { TerminalPanelHeader } from './TerminalPanelHeader';
+export { TerminalPanelFooter } from './TerminalPanelFooter';
+export { TerminalSessionTabs } from './TerminalSessionTabs';
+export { TerminalFilterTabs } from './TerminalFilterTabs';
+export { TerminalFilterDropdown } from './TerminalFilterDropdown';
+export { TerminalSessionControl } from './TerminalSessionControl';
+export { LogLinesViewer } from './LogLinesViewer';
+export type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
+export type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef, } from './TerminalInteractivePanel.types';
+export type { ITerminalThemeSelectorProps } from './TerminalThemeSelector';
+export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef, ITerminalPanelHeaderProps, ITerminalPanelToolbarProps, ITerminalPanelFooterProps, ITerminalSession, ITerminalSessionTabsProps, ITerminalFilterTabsProps, ITerminalFilterDropdownProps, ITerminalSessionControlProps, TLogLevelFilter, ILevelFilterButton, TTerminalAction, TLogLevel, } from './TerminalLogsPanel.types';
+export type { ILogLinesViewerProps, } from './LogLinesViewer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGzF,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG7E,YAAY,EACV,8BAA8B,EAC9B,4BAA4B,GAC7B,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,SAAS,GACV,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EACV,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module-CNVWCefU.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/terminal-filter-dropdown.module.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/blocks/Terminal/panel/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/terminal-session-tabs.module-cmyJ11jP.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalSessionTabs Dropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for the "add container" dropdown.
+ * The + button acts as anchor, dropdown is positioned below it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-session-tabs/styles
+ */
+
+/* + button - acts as CSS anchor */
+.addButton {
+  anchor-name: --session-tabs-add-anchor;
+}
+
+/* Container dropdown - anchored to + button */
+.containerDropdown {
+  position-anchor: --session-tabs-add-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: 200px;
+  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;
+}
+
+.containerDropdown[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) {
+  .containerDropdown {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .containerDropdown[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/terminal-session-tabs.module.js

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