@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,352 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx
+/**
+* Syntax highlighting for log messages (React spans).
+*
+* Applies color highlighting to specific elements within log messages
+* using React span elements with Tailwind CSS classes.
+*
+* IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
+* to prevent mixing codes and creating visual artifacts.
+*
+* Features LRU cache to avoid re-parsing identical text.
+*
+* @module components/devenv/terminal/SyntaxHighlight
+*/
+/**
+* LRU cache for syntax highlighting results.
+* Avoids re-parsing identical text on every render.
+*/
+const highlightCache = /* @__PURE__ */ new Map();
+const MAX_CACHE_SIZE = 1e3;
+/**
+* Strip ANSI escape codes from text.
+*
+* @param text - Text with ANSI codes
+* @returns Text without ANSI codes
+*/
+function stripAnsiCodes(text) {
+	return text.replace(/\x1b\[[0-9;]*[mGKH]/g, "").replace(/\x1b\][^\x07\x1b\\]*[\x07\x1b\\]/g, "").replace(/\x1b\\/g, "");
+}
+/**
+* Get cached highlighted text or compute and cache it.
+*/
+function getCachedHighlight(text) {
+	if (highlightCache.has(text)) return highlightCache.get(text);
+	const result = highlightText(text);
+	if (highlightCache.size >= MAX_CACHE_SIZE) {
+		const firstKey = highlightCache.keys().next().value;
+		if (firstKey) highlightCache.delete(firstKey);
+	}
+	highlightCache.set(text, result);
+	return result;
+}
+/**
+* Clear the highlight cache (useful for memory management).
+*/
+function clearHighlightCache() {
+	highlightCache.clear();
+}
+/**
+* Check if text contains ANSI escape codes.
+*
+* Detects all types of ANSI escape sequences:
+* - CSI (Control Sequence Introducer): \x1b[... (parameters)
+* - OSC (Operating System Command): \x1b]...
+* - General escape sequences: \x1b...
+*/
+function hasAnsiCodes(text) {
+	return /\x1b\[/.test(text) || /\x1b\]/.test(text) || /\x1b/.test(text);
+}
+/**
+* Syntax highlighted text component.
+*
+* Applies syntax highlighting to plain text messages.
+* Strips ANSI codes before highlighting to prevent visual artifacts
+* from mixed escape sequences.
+*
+* @example
+* ```tsx
+* <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+* ```
+*/
+function SyntaxHighlightedText({ text, className }) {
+	if (!text || text.length === 0) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: text
+	});
+	const highlighted = getCachedHighlight(hasAnsiCodes(text) ? stripAnsiCodes(text) : text);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-mono text-sm", className),
+		children: highlighted
+	});
+}
+/**
+* Apply syntax highlighting to text.
+*
+* Returns an array of React nodes with appropriate styling.
+* Patterns are applied in order (most specific first).
+*/
+function highlightText(text) {
+	let result = text;
+	const tokens = [];
+	result = extractTokens(result, tokens, [
+		{
+			pattern: /\b\d{1,2}:\d{2}:\d{2}(\.\d{1,3})?\b/g,
+			className: "text-cyan-400/70"
+		},
+		{
+			pattern: /\[([A-Z][A-Z0-9_]*)\]/g,
+			className: "text-purple-400 bg-purple-500/10 px-1 rounded font-semibold"
+		},
+		{
+			pattern: /\b([a-zA-Z0-9_-]+\.([a-zA-Z]{2,4}|[A-Z]{2})(?::\d+:\d+)?)\b/g,
+			className: "text-orange-400 bg-orange-500/10 px-1 rounded text-xs"
+		},
+		{
+			pattern: /\(([a-zA-Z0-9_-]+\.[a-zA-Z]{2,4}:\d+:\d+)\)/g,
+			className: "text-orange-400/80"
+		},
+		{
+			pattern: /\{([^}]+)\}/g,
+			className: "text-yellow-400 bg-yellow-500/5 px-0.5 rounded"
+		},
+		{
+			pattern: /\(([^)]+)\)/g,
+			className: "text-purple-300/80"
+		},
+		{
+			pattern: /\b<([^>]+)>/g,
+			className: "text-cyan-300/80"
+		},
+		{
+			pattern: /\bv?\d+\.\d+\.\d+(-[a-z0-9.]+)?\b/gi,
+			className: "text-green-400 font-semibold"
+		},
+		{
+			pattern: /\b([a-zA-Z_][a-zA-Z0-9_-]*)\s*:/g,
+			className: "text-green-500"
+		},
+		{
+			pattern: /\b(success|error|failed|warning|warn|info|debug|trace|fatal):/gi,
+			className: "text-pink-400 font-semibold"
+		},
+		{
+			pattern: /(['"])(.*?)\1/g,
+			className: "text-green-400"
+		},
+		{
+			pattern: /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g,
+			className: "text-yellow-400"
+		},
+		{
+			pattern: /\b(true|false)\b/gi,
+			className: "text-blue-400"
+		},
+		{
+			pattern: /\b(null|undefined)\b/gi,
+			className: "text-gray-500"
+		},
+		{
+			pattern: /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g,
+			className: "text-pink-400 font-semibold"
+		},
+		{
+			pattern: /(^|[\s(])\/[a-zA-Z0-9_/-]+/g,
+			className: "text-cyan-400"
+		},
+		{
+			pattern: /\b\w+\.(js|ts|jsx|tsx|json|py|rs|go|java|c|cpp|h|cs|sh|bash|yml|yaml|toml|md|txt|log)\b/g,
+			className: "text-orange-400"
+		},
+		{
+			pattern: /([{}[\]()])/g,
+			className: "text-yellow-500"
+		},
+		{
+			pattern: /\s*=\s*/g,
+			className: "text-gray-400"
+		},
+		{
+			pattern: /->|=>/g,
+			className: "text-purple-400 font-semibold"
+		}
+	]);
+	return tokens.map((token, index) => /* @__PURE__ */ jsx("span", {
+		className: token.className,
+		children: token.text
+	}, index));
+}
+/**
+* Extract tokens from text using patterns.
+*
+* Iteratively applies patterns and extracts matched tokens.
+*/
+function extractTokens(text, tokens, patterns) {
+	let result = text;
+	let hasMatches = true;
+	while (hasMatches) {
+		hasMatches = false;
+		for (const { pattern, className } of patterns) {
+			const match = pattern.exec(result);
+			if (match) {
+				hasMatches = true;
+				const matchedText = match[0];
+				const startIndex = match.index;
+				const endIndex = startIndex + matchedText.length;
+				if (startIndex > 0) {
+					const beforeText = result.slice(0, startIndex);
+					if (beforeText) tokens.push({ text: beforeText });
+				}
+				tokens.push({
+					text: matchedText,
+					className
+				});
+				result = result.slice(endIndex);
+				pattern.lastIndex = 0;
+				break;
+			}
+		}
+	}
+	if (result) tokens.push({ text: result });
+	return result;
+}
+/**
+* Highlighted JSON component.
+*
+* Displays JSON with syntax highlighting and proper indentation.
+*
+* @example
+* ```tsx
+* <HighlightedJson json={{ filter: {}, name: "test" }} />
+* ```
+*/
+function HighlightedJson({ json, className }) {
+	const formatted = JSON.stringify(json, null, 2);
+	try {
+		const highlighted = highlightJson(JSON.parse(formatted));
+		return /* @__PURE__ */ jsx("pre", {
+			className: cn("font-mono text-xs", className),
+			children: highlighted
+		});
+	} catch {
+		return /* @__PURE__ */ jsx("pre", {
+			className: cn("font-mono text-xs text-gray-400", className),
+			children: formatted
+		});
+	}
+}
+/**
+* Recursively highlight JSON.
+*/
+function highlightJson(value, indent = 0) {
+	const indentStr = "  ".repeat(indent);
+	if (value === null) return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: "null"
+	});
+	if (value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: "undefined"
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx("span", {
+		className: "text-blue-400",
+		children: String(value)
+	});
+	if (typeof value === "number") return /* @__PURE__ */ jsx("span", {
+		className: "text-yellow-400",
+		children: String(value)
+	});
+	if (typeof value === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "text-green-400",
+		children: [
+			"\"",
+			value,
+			"\""
+		]
+	});
+	if (Array.isArray(value)) {
+		if (value.length === 0) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "["
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "]"
+		})] });
+		return /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "["
+			}),
+			"\n",
+			value.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+				indentStr + "  ",
+				highlightJson(item, indent + 1),
+				index < value.length - 1 ? /* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ","
+				}) : null,
+				"\n"
+			] }, index)),
+			indentStr,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "]"
+			})
+		] });
+	}
+	if (typeof value === "object") {
+		const entries = Object.entries(value);
+		if (entries.length === 0) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "{"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "}"
+		})] });
+		return /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "{"
+			}),
+			"\n",
+			entries.map(([key, val], index) => /* @__PURE__ */ jsxs("span", { children: [
+				indentStr + "  ",
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-green-500",
+					children: [
+						"\"",
+						key,
+						"\""
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ": "
+				}),
+				highlightJson(val, indent + 1),
+				index < entries.length - 1 ? /* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ","
+				}) : null,
+				"\n"
+			] }, key)),
+			indentStr,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "}"
+			})
+		] });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: String(value)
+	});
+}
+
+//#endregion
+export { HighlightedJson, SyntaxHighlightedText, clearHighlightCache };

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

@@ -0,0 +1,36 @@
+/**
+ * TerminalLogBadge Component.
+ *
+ * Wraps the base Badge component with terminal log level color styling.
+ * Maps log levels to appropriate Tailwind color classes matching the
+ * Synthwave Dark design system.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+import type { ReactNode } from 'react';
+import type { TLogLevelFilter } from '../parsing/LogParser.types';
+/**
+ * Props for the TerminalLogBadge component.
+ */
+export interface ITerminalLogBadgeProps {
+    /** Log level to display */
+    level: TLogLevelFilter | string;
+    /** Badge content (typically a count) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * TerminalLogBadge Component.
+ *
+ * Renders a Badge styled for terminal log levels with appropriate
+ * color coding for each severity level.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogBadge level="error">3</TerminalLogBadge>
+ * <TerminalLogBadge level="info">42</TerminalLogBadge>
+ * ```
+ */
+export declare function TerminalLogBadge({ level, children, className }: ITerminalLogBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalLogBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogBadge.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAgBlE;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,KAAK,EAAE,eAAe,GAAG,MAAM,CAAC;IAChC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAUtF"}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { Badge } from "../../../ui/Badge/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx
+/**
+* TerminalLogBadge Component.
+*
+* Wraps the base Badge component with terminal log level color styling.
+* Maps log levels to appropriate Tailwind color classes matching the
+* Synthwave Dark design system.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+*/
+/**
+* Color classes for each log level.
+*/
+const LEVEL_COLORS = {
+	all: "bg-muted/40 text-muted-foreground border-muted/60",
+	trace: "bg-slate-500/20 text-slate-400 border-slate-500/30",
+	debug: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+	info: "bg-green-500/20 text-green-400 border-green-500/30",
+	warn: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
+	error: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+	fatal: "bg-red-500/20 text-red-400 border-red-500/30",
+	unknown: "bg-muted/40 text-muted-foreground border-muted/60"
+};
+/**
+* TerminalLogBadge Component.
+*
+* Renders a Badge styled for terminal log levels with appropriate
+* color coding for each severity level.
+*
+* @example
+* ```tsx
+* <TerminalLogBadge level="error">3</TerminalLogBadge>
+* <TerminalLogBadge level="info">42</TerminalLogBadge>
+* ```
+*/
+function TerminalLogBadge({ level, children, className }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		size: "sm",
+		className: cn(LEVEL_COLORS[level] ?? LEVEL_COLORS.unknown, className),
+		children
+	});
+}
+
+//#endregion
+export { TerminalLogBadge };

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

@@ -0,0 +1,10 @@
+/**
+ * Terminal components barrel export.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components
+ */
+export * from './LogLineBadges';
+export * from './SyntaxHighlight';
+export * from './SpecializedSyntaxHighlighter';
+export * from './TerminalLogBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC"}

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

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

package/dist/react-ui/blocks/Terminal/display.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Terminal Display — lightweight barrel export.
+ *
+ * Exports the readonly TerminalDisplay component + restty wrapper + chrome.
+ * Depends on restty only (not xterm, not shiki, not xterm addons).
+ * Use `@mks2508/mks-ui/react/blocks/Terminal/display` for minimal deps.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/display
+ */
+export { TerminalDisplay } from './TerminalDisplay';
+export { terminalDisplayStyles, terminalDisplayVariants, type TerminalDisplayVariantProps, } from './TerminalDisplay.styles';
+export type { ITerminalDisplayProps, ITerminalDisplayRef, TerminalDisplaySlot, } from './TerminalDisplay.types';
+export { TerminalRestty } from './TerminalRestty';
+export type { ITerminalResttyProps, ITerminalResttyRef } from './TerminalRestty';
+export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
+export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
+export { terminalChromeStyles, terminalChromeVariants, ACCENT_GRADIENTS, type TerminalChromeSlot, } from './panel/TerminalPanelChrome.styles';
+export { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from './Terminal.theme';
+export { hexToResttyColor, xtermThemeToGhostty, getSynthwaveGhosttyTheme, type IResttyThemeColor, type IResttyGhosttyTheme, } from './Terminal.theme.restty';
+//# sourceMappingURL=display.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/display.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGjF,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AACnF,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,GACxB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC"}

package/dist/react-ui/blocks/Terminal/display.js

@@ -0,0 +1,9 @@
+import { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from "./Terminal.theme.js";
+import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./panel/TerminalPanelChrome.styles.js";
+import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
+import { getSynthwaveGhosttyTheme, hexToResttyColor, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
+import { TerminalRestty } from "./TerminalRestty.js";
+import { terminalDisplayStyles, terminalDisplayVariants } from "./TerminalDisplay.styles.js";
+import { TerminalDisplay } from "./TerminalDisplay.js";
+
+export { ACCENT_GRADIENTS, NOISE_TEXTURE_SVG, SYNTHWAVE_TERMINAL_THEME, TerminalDisplay, TerminalPanelChrome, TerminalRestty, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, terminalChromeStyles, terminalChromeVariants, terminalDisplayStyles, terminalDisplayVariants, terminalScrollStyles, xtermThemeToGhostty };

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

@@ -0,0 +1,11 @@
+/**
+ * Terminal Hooks Module.
+ *
+ * Reusable hooks for terminal WebSocket connections
+ * and global settings management.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/hooks
+ */
+export { useTerminalWebSocket, type IUseTerminalWebSocketOptions, type IUseTerminalWebSocketReturn, type ITerminalWsServerMessage, type TTerminalWsStatus, } from './useTerminalWebSocket';
+export { useTerminalSettings, type ITerminalSettings, type IUseTerminalSettingsReturn, } from './useTerminalSettings';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,2 @@
+import { useTerminalWebSocket } from "./useTerminalWebSocket.js";
+import { useTerminalSettings } from "./useTerminalSettings.js";

package/dist/react-ui/blocks/Terminal/hooks/useTerminalSettings.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Global terminal settings hook with localStorage persistence.
+ *
+ * Manages renderer, PTY backend, theme, and font size preferences
+ * using `useSyncExternalStore` for SSR safety and cross-component sync.
+ *
+ * @module components/devenv/terminal/hooks/useTerminalSettings
+ */
+import type { ITerminalRendererType, ITerminalPtyBackendType } from '../Terminal.types';
+/**
+ * Persisted terminal settings.
+ */
+export interface ITerminalSettings {
+    /** Terminal renderer engine (default: 'xterm') */
+    renderer: ITerminalRendererType;
+    /** PTY backend type (default: 'nodepty') */
+    ptyBackend: ITerminalPtyBackendType;
+    /** Restty built-in theme name (default: 'Synthwave Alpha') */
+    resttyThemeName: string;
+    /** Font size in CSS pixels (default: 14) */
+    fontSize: number;
+    /** Enable CRT shader effects (scanlines, bloom, vignette) */
+    crtEffect: boolean;
+    /** Show debug panel below the terminal */
+    debugPanel: boolean;
+}
+/**
+ * Return type for the useTerminalSettings hook.
+ */
+export interface IUseTerminalSettingsReturn {
+    /** Current settings snapshot */
+    settings: ITerminalSettings;
+    /** Switch terminal renderer */
+    setRenderer: (renderer: ITerminalRendererType) => void;
+    /** Switch PTY backend */
+    setPtyBackend: (backend: ITerminalPtyBackendType) => void;
+    /** Set restty built-in theme by name */
+    setResttyThemeName: (name: string) => void;
+    /** Set font size (clamped to 10-24) */
+    setFontSize: (size: number) => void;
+    /** Toggle CRT shader effects (scanlines, bloom, vignette) */
+    setCrtEffect: (enabled: boolean) => void;
+    /** Toggle debug panel visibility */
+    setDebugPanel: (enabled: boolean) => void;
+    /** Reset all settings to defaults */
+    resetToDefaults: () => void;
+}
+/**
+ * Hook for reading and mutating global terminal settings.
+ *
+ * Settings persist to localStorage and sync across all components
+ * using `useSyncExternalStore`. SSR-safe via `getServerSnapshot`.
+ *
+ * @returns Settings state and mutation functions
+ *
+ * @example
+ * ```tsx
+ * const { settings, setRenderer, setResttyThemeName } = useTerminalSettings();
+ *
+ * // Read
+ * console.log(settings.renderer); // 'xterm' | 'restty'
+ *
+ * // Mutate — triggers re-render in all consumers
+ * setRenderer('restty');
+ * setResttyThemeName('Dracula');
+ * ```
+ */
+export declare function useTerminalSettings(): IUseTerminalSettingsReturn;
+//# sourceMappingURL=useTerminalSettings.d.ts.map

package/dist/react-ui/blocks/Terminal/hooks/useTerminalSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTerminalSettings.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/useTerminalSettings.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAExF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,QAAQ,EAAE,qBAAqB,CAAC;IAEhC,4CAA4C;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IAEpC,8DAA8D;IAC9D,eAAe,EAAE,MAAM,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IAEjB,6DAA6D;IAC7D,SAAS,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,gCAAgC;IAChC,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,+BAA+B;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEvD,yBAAyB;IACzB,aAAa,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE1D,wCAAwC;IACxC,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,uCAAuC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,6DAA6D;IAC7D,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC,oCAAoC;IACpC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAE1C,qCAAqC;IACrC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAwGD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,IAAI,0BAA0B,CA0ChE"}