@mks2508/mks-ui 0.6.7 → 0.7.0

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

@@ -1,225 +0,0 @@
-'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

@@ -1,35 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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/terminal-filter-dropdown.module.js

@@ -1,5 +0,0 @@
-//#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.js

@@ -1,5 +0,0 @@
-//#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 };