@mks2508/mks-ui 0.6.8 → 0.7.0

package/dist/react-ui/blocks/Sidebar/hooks/useSidebarKeyboard.js

@@ -0,0 +1,150 @@
+"use client";
+
+import { SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_KEYBOARD_KEYS } from "../Sidebar.constants.js";
+import { useSidebarContext } from "./useSidebarContext.js";
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/react-ui/blocks/Sidebar/hooks/useSidebarKeyboard.ts
+/**
+* Hook para gestionar la navegación por teclado en el Sidebar
+*
+* @description
+* Hook que implementa navegación accesible por teclado para los items
+* del sidebar, siguiendo las especificaciones WAI-ARIA:
+*
+* - ArrowDown: Navegar al siguiente item
+* - ArrowUp: Navegar al item anterior
+* - Home: Ir al primer item
+* - End: Ir al último item
+* - Tab: Navegación estándar que actualiza el indicador
+*
+* También sincroniza el indicador visual con el item enfocado.
+*
+* @returns {UseSidebarKeyboardReturn} Estado y funciones para navegación
+*
+* @example
+* ```tsx
+* function SidebarNav() {
+*   const { focusedIndex, updateIndicatorForFocus } = useSidebarKeyboard()
+*
+*   return (
+*     <nav>
+*       {items.map((item, index) => (
+*         <SidebarItem
+*           key={item.id}
+*           focused={index === focusedIndex}
+*           onFocus={() => updateIndicatorForFocus(index)}
+*         />
+*       ))}
+*     </nav>
+*   )
+* }
+* ```
+*/
+function useSidebarKeyboard() {
+	const { contentRef, indicatorRef, navRef, items, setShowIndicatorForKeyboard, setIsOverItems, setCurrentItemElement } = useSidebarContext();
+	const [focusedIndex, setFocusedIndex] = useState(-1);
+	/**
+	* Actualiza la posición del indicador basándose en el item enfocado
+	*
+	* @param {number} index - Índice del item a enfocar
+	* @param {HTMLElement[]} [itemsOverride] - Array de items frescos (opcional). Si se proporciona, se usa en lugar del array del context.
+	*/
+	const updateIndicatorForFocus = useCallback((index, itemsOverride) => {
+		if (!indicatorRef.current || !navRef.current) return;
+		const itemsToUse = itemsOverride || items;
+		if (index < 0 || index >= itemsToUse.length) return;
+		const item = itemsToUse[index];
+		if (!item) return;
+		const navRect = navRef.current.getBoundingClientRect();
+		const itemRect = item.getBoundingClientRect();
+		const y = itemRect.top - navRect.top + itemRect.height / 2;
+		indicatorRef.current.style.top = `${y}px`;
+		setCurrentItemElement(item);
+		setShowIndicatorForKeyboard(true);
+		setIsOverItems(true);
+	}, [
+		indicatorRef,
+		navRef,
+		items,
+		setShowIndicatorForKeyboard,
+		setIsOverItems,
+		setCurrentItemElement
+	]);
+	/**
+	* Manejador de eventos de teclado
+	*/
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (!contentRef.current) return;
+			const sidebarItems = Array.from(contentRef.current.querySelectorAll(`[${SIDEBAR_DATA_ATTRIBUTES.ITEM}]`));
+			if (sidebarItems.length === 0) return;
+			switch (e.key) {
+				case SIDEBAR_KEYBOARD_KEYS.ARROW_DOWN:
+					e.preventDefault();
+					setFocusedIndex((prev) => {
+						const next = prev < sidebarItems.length - 1 ? prev + 1 : prev;
+						sidebarItems[next]?.focus();
+						updateIndicatorForFocus(next, sidebarItems);
+						return next;
+					});
+					break;
+				case SIDEBAR_KEYBOARD_KEYS.ARROW_UP:
+					e.preventDefault();
+					setFocusedIndex((prev) => {
+						const next = prev > 0 ? prev - 1 : prev;
+						sidebarItems[next]?.focus();
+						updateIndicatorForFocus(next, sidebarItems);
+						return next;
+					});
+					break;
+				case SIDEBAR_KEYBOARD_KEYS.HOME:
+					e.preventDefault();
+					sidebarItems[0]?.focus();
+					setFocusedIndex(0);
+					updateIndicatorForFocus(0, sidebarItems);
+					break;
+				case SIDEBAR_KEYBOARD_KEYS.END: {
+					e.preventDefault();
+					const lastIndex = sidebarItems.length - 1;
+					sidebarItems[lastIndex]?.focus();
+					setFocusedIndex(lastIndex);
+					updateIndicatorForFocus(lastIndex, sidebarItems);
+					break;
+				}
+				case SIDEBAR_KEYBOARD_KEYS.TAB: {
+					const activeElement = document.activeElement;
+					const currentIndex = sidebarItems.indexOf(activeElement);
+					if (currentIndex !== -1) {
+						setFocusedIndex(currentIndex);
+						updateIndicatorForFocus(currentIndex, sidebarItems);
+					}
+					break;
+				}
+				case SIDEBAR_KEYBOARD_KEYS.ESCAPE:
+					document.activeElement?.blur();
+					setFocusedIndex(-1);
+					setShowIndicatorForKeyboard(false);
+					setIsOverItems(false);
+					setCurrentItemElement(null);
+					break;
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		contentRef,
+		updateIndicatorForFocus,
+		setIsOverItems
+	]);
+	return {
+		focusedIndex,
+		setFocusedIndex,
+		updateIndicatorForFocus
+	};
+}
+
+//#endregion
+export { useSidebarKeyboard };

package/dist/react-ui/blocks/Sidebar/hooks/useSubContent.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Hook para acceder al contexto de sub-contenido del Sidebar
+ *
+ * @description
+ * Hook que provee acceso al contexto de sub-contenido (tooltips/popovers)
+ * para los items del sidebar. Debe ser utilizado dentro de un componente
+ * que esté envuelto por `<Sidebar>` o `<SidebarProvider>`.
+ *
+ * Permite registrar y obtener sub-contenido asociado a cada item.
+ *
+ * @throws {Error} Si se usa fuera de un SidebarProvider
+ *
+ * @returns {SubContentContext} El valor del contexto de sub-contenido
+ *
+ * @example
+ * ```tsx
+ * function SidebarItem() {
+ *   const { registerSubContent, getSubContent } = useSubContent()
+ *
+ *   const handleMouseEnter = () => {
+ *     const data = getSubContent(itemId)
+ *     if (data) {
+ *       // Mostrar tooltip con data.subContent
+ *     }
+ *   }
+ *
+ *   // Registrar el sub-contenido cuando se monta
+ *   useEffect(() => {
+ *     registerSubContent(itemId, { subContent: <TooltipContent />, title: 'Options' })
+ *   }, [itemId])
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+export declare function useSubContent(): {
+    subContentMap: Map<string, import("../SidebarContext").SubContentData>;
+    registerSubContent: (itemId: string, data: import("../SidebarContext").SubContentData) => void;
+    unregisterSubContent: (itemId: string) => void;
+    getSubContent: (itemId: string) => import("../SidebarContext").SubContentData | undefined;
+};
+//# sourceMappingURL=useSubContent.d.ts.map

package/dist/react-ui/blocks/Sidebar/hooks/useSubContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubContent.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Sidebar/hooks/useSubContent.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,aAAa;;;;;EAQ5B"}

package/dist/react-ui/blocks/Sidebar/hooks/useSubContent.js

@@ -0,0 +1,49 @@
+"use client";
+
+import { SubContentContext } from "../SidebarContext.js";
+import { useContext } from "react";
+
+//#region src/react-ui/blocks/Sidebar/hooks/useSubContent.ts
+/**
+* Hook para acceder al contexto de sub-contenido del Sidebar
+*
+* @description
+* Hook que provee acceso al contexto de sub-contenido (tooltips/popovers)
+* para los items del sidebar. Debe ser utilizado dentro de un componente
+* que esté envuelto por `<Sidebar>` o `<SidebarProvider>`.
+*
+* Permite registrar y obtener sub-contenido asociado a cada item.
+*
+* @throws {Error} Si se usa fuera de un SidebarProvider
+*
+* @returns {SubContentContext} El valor del contexto de sub-contenido
+*
+* @example
+* ```tsx
+* function SidebarItem() {
+*   const { registerSubContent, getSubContent } = useSubContent()
+*
+*   const handleMouseEnter = () => {
+*     const data = getSubContent(itemId)
+*     if (data) {
+*       // Mostrar tooltip con data.subContent
+*     }
+*   }
+*
+*   // Registrar el sub-contenido cuando se monta
+*   useEffect(() => {
+*     registerSubContent(itemId, { subContent: <TooltipContent />, title: 'Options' })
+*   }, [itemId])
+*
+*   return <div>...</div>
+* }
+* ```
+*/
+function useSubContent() {
+	const context = useContext(SubContentContext);
+	if (!context) throw new Error("useSubContent must be used within a <Sidebar> component");
+	return context;
+}
+
+//#endregion
+export { useSubContent };

package/dist/react-ui/blocks/Sidebar/index.d.ts

@@ -0,0 +1,163 @@
+/**
+ * Sidebar Component - Componente headless de sidebar con arquitectura primitiva
+ *
+ * @module Sidebar
+ */
+import './animations/tooltip-keyframes.css';
+/**
+ * Sidebar Component - Componente headless de sidebar con arquitectura primitiva
+ *
+ * @module Sidebar
+ *
+ * @description
+ * Sistema de sidebar altamente configurable siguiendo el patrón de componentes
+ * headless inspirado en Headless UI y shadcn/ui.
+ *
+ * **Características principales:**
+ * - Arquitectura headless con primitivos componibles
+ * - Soporte para render props y data attributes
+ * - Navegación por teclado (arrows, home, end)
+ * - Indicador visual animado
+ * - Modos de colapso (hide/collapse)
+ * - Accesibilidad WAI-ARIA completa
+ * - Usa tokens CSS de mks-ui para colores
+ * - Dark/Light mode automático
+ * - Tooltips anclados con CSS Anchor API
+ * - Fluid indicator con spring physics
+ * - TypeScript strict mode
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Sidebar,
+ *   SidebarNav,
+ *   SidebarToggle,
+ *   SidebarContent,
+ *   SidebarIndicator,
+ *   SidebarItem,
+ * } from '@mks2508/mks-ui/react/blocks/Sidebar'
+ *
+ * function App() {
+ *   return (
+ *     <Sidebar defaultOpen={true}>
+ *       <SidebarNav>
+ *         <SidebarToggle />
+ *         <SidebarContent>
+ *           <SidebarItem href="/" icon={<HomeIcon />} label="Home" />
+ *           <SidebarItem href="/settings" icon={<SettingsIcon />} label="Settings" />
+ *         </SidebarContent>
+ *       </SidebarNav>
+ *     </Sidebar>
+ *   )
+ * }
+ * ```
+ */
+/**
+ * Componente raíz del Sidebar (Provider)
+ */
+export { Sidebar } from "./Sidebar";
+/**
+ * Contenedor de navegación con gestión de eventos
+ */
+export { SidebarNav } from "./SidebarNav";
+/**
+ * Botón toggle para abrir/cerrar el sidebar
+ */
+export { SidebarToggle } from "./SidebarToggle";
+/**
+ * Contenedor de items de navegación
+ */
+export { SidebarContent } from "./SidebarContent";
+/**
+ * Indicador visual que sigue al cursor/focus
+ */
+export { SidebarIndicator } from "./SidebarIndicator";
+/**
+ * Indicador fluid glassmorphism con spring physics
+ */
+export { SidebarFluidIndicator } from "./SidebarFluidIndicator";
+/**
+ * Área segura (top/bottom) para contenido especial
+ */
+export { SidebarSafeArea } from "./SidebarSafeArea";
+/**
+ * Item individual de navegación
+ */
+export { SidebarItem } from "./SidebarItem";
+/**
+ * Contenedor de subcontenido para tooltips (slot component)
+ */
+export { SidebarSubContent } from "./SidebarSubContent";
+/**
+ * Link individual dentro de tooltip de subcontenido
+ */
+export { SidebarSubLink } from "./SidebarSubLink";
+/**
+ * Tooltip genérico anclado al indicador
+ */
+export { SidebarTooltip } from "./SidebarTooltip";
+/**
+ * Hook para acceder al contexto del sidebar
+ *
+ * @throws {Error} Si se usa fuera de un componente <Sidebar>
+ *
+ * @example
+ * ```tsx
+ * const { open, setOpen, dimensions } = useSidebarContext()
+ * ```
+ */
+export { useSidebarContext } from "./hooks/useSidebarContext";
+/**
+ * Hook para navegación por teclado (arrows, home, end)
+ *
+ * @example
+ * ```tsx
+ * const { focusedIndex, updateIndicatorForFocus } = useSidebarKeyboard()
+ * ```
+ */
+export { useSidebarKeyboard } from "./hooks/useSidebarKeyboard";
+/**
+ * Hook para gestión del indicador visual
+ *
+ * @example
+ * ```tsx
+ * const { isVisible, handleMouseMove } = useSidebarIndicator()
+ * ```
+ */
+export { useSidebarIndicator } from "./hooks/useSidebarIndicator";
+/**
+ * Hook para acceder al contexto de subcontenido
+ *
+ * @throws {Error} Si se usa fuera de un componente <Sidebar>
+ *
+ * @example
+ * ```tsx
+ * const { registerSubContent, getSubContent } = useSubContent()
+ * ```
+ */
+export { useSubContent } from "./hooks/useSubContent";
+/**
+ * Todos los tipos e interfaces del sidebar
+ */
+export type { SidebarProps, SidebarNavProps, SidebarToggleProps, SidebarContentProps, SidebarIndicatorProps, SidebarSafeAreaProps, SidebarItemProps, SidebarState, SidebarToggleState, SidebarItemState, SidebarIndicatorState, SidebarContextValue, SidebarDimensions, SidebarSafeAreas, SidebarAnimations, SidebarConfig, SidebarRenderProp, SidebarToggleRenderProp, SidebarItemRenderProp, SidebarIndicatorRenderProp, SidebarVisualStyle, SidebarSubContentProps, SidebarSubLinkProps, SidebarTooltipProps, } from "./Sidebar.types";
+/**
+ * Enums exportados
+ */
+export { SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarWidth, SidebarTransitionDuration, SidebarZIndex, SidebarBorderRadius, SidebarSafeAreaPosition, SidebarTimingFunction, SidebarIconLibrary, } from "./Sidebar.types";
+/**
+ * Constantes y valores por defecto
+ */
+export { DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_VISUAL_STYLE, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_ARIA_ROLES, SIDEBAR_ARIA_LABELS, SIDEBAR_BREAKPOINTS, SIDEBAR_LIMITS, SIDEBAR_CSS_VARIABLES, SIDEBAR_VISUAL_PRESETS, } from "./Sidebar.constants";
+/**
+ * Tipos de constantes
+ */
+export type { SidebarVisualPreset } from "./Sidebar.constants";
+/**
+ * Funciones para generar estilos CSS dinámicos
+ *
+ * @note
+ * Los estilos usan tokens CSS de mks-ui (--sidebar, --sidebar-primary, etc.)
+ * definidos en index.css, permitiendo soporte automático de dark/light mode.
+ */
+export { generateSidebarStyles, generateIndicatorStyles } from "./Sidebar.styles";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,oCAAoC,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAMH;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMjD;;;;;;;;;GASG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;;;GAOG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE/D;;;;;;;GAOG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE;;;;;;;;;GASG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAMrD;;GAEG;AACH,YAAY,EACV,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAA;AAExB;;GAEG;AACH,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAMxB;;GAEG;AACH,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,wBAAwB,EACxB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAE5B;;GAEG;AACH,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAM9D;;;;;;GAMG;AACH,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/react-ui/blocks/Sidebar/index.js

@@ -0,0 +1,19 @@
+import "./animations/tooltip-keyframes.js";
+import { SidebarBorderRadius, SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarLayoutBehaviour, SidebarSafeAreaPosition, SidebarTimingFunction, SidebarTransitionDuration, SidebarWidth, SidebarZIndex } from "./Sidebar.types.js";
+import { DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_VISUAL_STYLE, SIDEBAR_ARIA_LABELS, SIDEBAR_ARIA_ROLES, SIDEBAR_CSS_VARIABLES, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_VISUAL_PRESETS } from "./Sidebar.constants.js";
+import { Sidebar } from "./Sidebar.js";
+import { useSidebarContext } from "./hooks/useSidebarContext.js";
+import { useSubContent } from "./hooks/useSubContent.js";
+import { useSidebarIndicator } from "./hooks/useSidebarIndicator.js";
+import { useSidebarKeyboard } from "./hooks/useSidebarKeyboard.js";
+import { SidebarFluidIndicator } from "./SidebarFluidIndicator.js";
+import { SidebarTooltip } from "./SidebarTooltip.js";
+import { generateIndicatorStyles, generateSidebarStyles } from "./Sidebar.styles.js";
+import { SidebarNav } from "./SidebarNav.js";
+import { SidebarToggle } from "./SidebarToggle.js";
+import { SidebarContent } from "./SidebarContent.js";
+import { SidebarIndicator } from "./SidebarIndicator.js";
+import { SidebarSafeArea } from "./SidebarSafeArea.js";
+import { SidebarSubContent } from "./SidebarSubContent.js";
+import { SidebarItem } from "./SidebarItem.js";
+import { SidebarSubLink } from "./SidebarSubLink.js";

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

@@ -0,0 +1,219 @@
+/**
+ * Terminal Block shared design tokens.
+ *
+ * Single source of truth for all repeated style constants across Terminal
+ * sub-components. Centralizes log-level colors, status indicators, primary
+ * glow utilities, and shared button/toggle patterns.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/tokens
+ */
+import type { TLogLevel } from './parsing/LogParser.types';
+/**
+ * Style definitions for a single log level.
+ *
+ * Each field maps to a different visual context where the level color
+ * appears (badge, line border, glow, inline text).
+ */
+export interface ILogLevelStyle {
+    /** Background, text, and border classes for badges (e.g. TerminalLogBadge, LevelBadge) */
+    badge: string;
+    /** Left border class for log line rows (e.g. LogLinesViewer) */
+    border: string;
+    /** Shadow glow class for emphasized/active states */
+    glow: string;
+    /** Standalone text color class */
+    text: string;
+}
+/**
+ * Centralized log level color mapping.
+ *
+ * Replaces duplicated `LEVEL_COLORS` records in TerminalLogBadge,
+ * LogLineBadges, LogLinesViewer, TerminalFilterTabs, and TerminalFilterDropdown.
+ *
+ * @example
+ * ```tsx
+ * import { LOG_LEVEL_STYLES } from '../Terminal.tokens';
+ * <span className={LOG_LEVEL_STYLES.error.badge}>ERROR</span>
+ * ```
+ */
+export declare const LOG_LEVEL_STYLES: Record<TLogLevel | 'all' | 'unknown', ILogLevelStyle>;
+/** Content type identifiers for log entries. */
+export type TContentType = 'plain' | 'http' | 'json' | 'table' | 'sql';
+/**
+ * Style definitions for content type badges.
+ */
+export interface IContentTypeStyle {
+    /** Display label for the badge */
+    label: string;
+    /** Tailwind class string for the badge */
+    className: string;
+}
+/**
+ * Centralized content type badge styling.
+ *
+ * @example
+ * ```tsx
+ * import { CONTENT_TYPE_STYLES } from '../Terminal.tokens';
+ * const style = CONTENT_TYPE_STYLES.http;
+ * <span className={style.className}>{style.label}</span>
+ * ```
+ */
+export declare const CONTENT_TYPE_STYLES: Record<TContentType, IContentTypeStyle>;
+/**
+ * Primary color glow shadow utilities.
+ *
+ * Uses `hsl(var(--primary) / opacity)` so the glow automatically
+ * follows the consumer's `--primary` CSS variable.
+ *
+ * Replaces 17+ instances of hardcoded `hsla(330,85%,43%,...)`.
+ *
+ * @example
+ * ```tsx
+ * import { PRIMARY_GLOW } from '../Terminal.tokens';
+ * <button className={cn('bg-primary/20', PRIMARY_GLOW.md)}>Active</button>
+ * ```
+ */
+export declare const PRIMARY_GLOW: {
+    /** Subtle glow — 0.15 opacity, 8px spread */
+    readonly sm: "shadow-[0_0_8px_hsl(var(--primary)/0.15)]";
+    /** Medium glow — 0.2 opacity, 10px spread */
+    readonly md: "shadow-[0_0_10px_hsl(var(--primary)/0.2)]";
+    /** Strong glow — 0.3 opacity, 12px spread */
+    readonly lg: "shadow-[0_0_12px_hsl(var(--primary)/0.3)]";
+    /** Intense glow — 0.5 opacity, 12px spread (active/focus states) */
+    readonly xl: "shadow-[0_0_12px_hsl(var(--primary)/0.5)]";
+};
+/**
+ * Compound primary glow for active tab indicators and accent elements.
+ * Combines multiple shadow layers for depth.
+ */
+export declare const PRIMARY_GLOW_COMPOUND: {
+    /** Active tab bar glow — dual shadow layers */
+    readonly tabBar: "shadow-[0_0_12px_hsl(var(--primary)/0.6),0_0_4px_hsl(var(--primary)/0.8)]";
+};
+/** Terminal connection status. */
+export type TTerminalConnectionStatusToken = 'connected' | 'connecting' | 'disconnected' | 'error';
+/**
+ * Style definitions for a connection status.
+ */
+export interface IStatusStyle {
+    /** Dot indicator classes (bg + optional shadow/animation) */
+    dot: string;
+    /** Label text color */
+    label: string;
+    /** Display text */
+    text: string;
+}
+/**
+ * Centralized connection status color mapping.
+ *
+ * Replaces duplicated `getStatusColor` functions in TerminalPanelHeader,
+ * TerminalSessionTabs, and TerminalSessionControl.
+ *
+ * @example
+ * ```tsx
+ * import { STATUS_COLORS } from '../Terminal.tokens';
+ * <div className={cn('w-2 h-2 rounded-full', STATUS_COLORS.connected.dot)} />
+ * ```
+ */
+export declare const STATUS_COLORS: Record<TTerminalConnectionStatusToken, IStatusStyle>;
+/**
+ * macOS-style traffic light button classes.
+ *
+ * Dots are desaturated by default, colorize on parent group hover
+ * (`group-hover/traffic`), and brighten + scale on individual hover.
+ */
+export declare const TRAFFIC_LIGHT_STYLES: {
+    readonly close: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-red-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(239,68,68,0.4)] hover:!bg-red-500 hover:!shadow-[0_0_12px_rgba(239,68,68,0.6)] hover:!scale-110";
+    readonly minimize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-yellow-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(234,179,8,0.4)] hover:!bg-yellow-500 hover:!shadow-[0_0_12px_rgba(234,179,8,0.6)] hover:!scale-110";
+    readonly maximize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-green-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(34,197,94,0.4)] hover:!bg-green-500 hover:!shadow-[0_0_12px_rgba(34,197,94,0.6)] hover:!scale-110";
+};
+/**
+ * Segmented control button classes (macOS-style pill toggle).
+ *
+ * Shared by TerminalPanelHeader view mode toggle and
+ * TerminalSettingsPopover renderer/backend selectors.
+ */
+export declare const SEGMENTED_BUTTON_STYLES: {
+    /** Base classes applied to all buttons */
+    readonly base: "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all";
+    /** Inactive state — subtle hover */
+    readonly inactive: "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]";
+    /** Active state — primary tint with glow */
+    readonly active: "bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsl(var(--primary)/0.15)]";
+};
+/**
+ * Toggle button classes (follow cursor, line numbers, etc.).
+ *
+ * Shared by TerminalPanelToolbar and TerminalLogsPanel action bars.
+ */
+export declare const TOGGLE_STYLES: {
+    readonly base: "p-2 rounded-md transition-all hover:scale-105 active:scale-95";
+    readonly inactive: "bg-muted/40 text-muted-foreground hover:bg-muted/60";
+    readonly active: "bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsl(var(--primary)/0.2)]";
+};
+/**
+ * Action button classes (search, clear, download, etc.).
+ *
+ * Shared by TerminalPanelToolbar and TerminalLogsPanel.
+ */
+export declare const ACTION_BUTTON_STYLES: {
+    readonly base: "p-2 rounded-md transition-all hover:scale-105 active:scale-95";
+    readonly default: "bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground";
+};
+/**
+ * Filter button classes for log level filter bar.
+ *
+ * Used by TerminalPanelToolbar and TerminalFilterTabs.
+ */
+export declare const FILTER_BUTTON_STYLES: {
+    readonly base: "px-3 py-1.5 rounded-md font-mono text-xs font-bold uppercase tracking-wider transition-all";
+    readonly inactive: "bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:scale-105 active:scale-95 border border-border/20";
+    readonly active: "bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsl(var(--primary)/0.2)] hover:scale-105 active:scale-95";
+};
+/**
+ * Small icon-only trigger button classes (settings gear, etc.).
+ */
+export declare const TRIGGER_BUTTON_STYLES: "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";
+/**
+ * Font size control button classes (+ / −).
+ */
+export declare const FONT_BUTTON_STYLES: "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";
+/**
+ * Terminal background class.
+ *
+ * Uses a CSS custom property `--terminal-bg` with a fallback to the
+ * theme's `--background` variable. Consumers set `--terminal-bg` to
+ * override the terminal area background without affecting the rest of the UI.
+ *
+ * @example
+ * ```css
+ * :root { --terminal-bg: 36 27 47; }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <div className={TERMINAL_BG}>...</div>
+ * ```
+ */
+export declare const TERMINAL_BG: "bg-[hsl(var(--terminal-bg,var(--background)))]";
+/**
+ * Section label classes for settings sections.
+ */
+export declare const SECTION_LABEL_STYLES: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider";
+/**
+ * Custom toggle switch classes (CRT effect, debug panel).
+ */
+export declare const TOGGLE_SWITCH_STYLES: {
+    readonly track: {
+        readonly base: "relative w-9 h-5 rounded-full transition-colors";
+        readonly active: "bg-primary/60 shadow-[0_0_8px_hsl(var(--primary)/0.15)]";
+        readonly inactive: "bg-muted/30";
+    };
+    readonly thumb: {
+        readonly base: "absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all";
+        readonly active: "left-[18px]";
+        readonly inactive: "left-0.5";
+    };
+};
+//# sourceMappingURL=Terminal.tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.tokens.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/Terminal.tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,GAAG,KAAK,GAAG,SAAS,EAAE,cAAc,CAiDzE,CAAC;AAIX,gDAAgD;AAChD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAkB9D,CAAC;AAIX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;IACvB,6CAA6C;;IAE7C,6CAA6C;;IAE7C,6CAA6C;;IAE7C,oEAAoE;;CAE5D,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;IAChC,+CAA+C;;CAEvC,CAAC;AAIX,kCAAkC;AAClC,MAAM,MAAM,8BAA8B,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAAC;AAEnG;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,8BAA8B,EAAE,YAAY,CAqBrE,CAAC;AAIX;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;CAOvB,CAAC;AAIX;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;IAClC,0CAA0C;;IAE1C,oCAAoC;;IAGpC,4CAA4C;;CAEpC,CAAC;AAIX;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;CAKvB,CAAC;AAIX;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAChC,mKAA4K,CAAC;AAE/K;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAC7B,sMAA+M,CAAC;AAIlN;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAG,gDAAyD,CAAC;AAIrF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAC/B,sEAA+E,CAAC;AAIlF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAWvB,CAAC"}