@mks2508/mks-ui 0.3.2 → 0.5.0

package/dist/react-ui/ui/Tabs/index.js

@@ -5,45 +5,85 @@ import { Highlight, HighlightItem } from "../../primitives/Highlight/index.js";
 import { AutoHeight } from "../../primitives/AutoHeight/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
-import { tabsStyles } from "./Tabs.styles.js";
+import { tabsIndicatorVariants, tabsListVariants, tabsStyles, tabsTabVariants } from "./Tabs.styles.js";
 import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/react-ui/ui/Tabs/index.tsx
 /**
-* Tabs component -- animated tab navigation built on base-ui Tabs
-* with motion transitions, highlight tracking, auto-height panels,
-* and the v0.2.0 slot system.
+* Tabs component -- styled tab navigation built on base-ui Tabs
+* with CVA variants, CSS Anchor Positioning indicator, motion panel
+* transitions, and the slot override system.
 *
-* Provides sub-components for the tab list, individual tabs, panels,
-* animated highlight indicators, and a panels container with two modes:
-* auto-height (ResizeObserver) and layout (Motion layout animation).
+* Out-of-the-box styled with 5 variants (default, outline, ghost,
+* underline, pill) and 3 sizes (sm, default, lg). The sliding indicator
+* uses CSS Anchor Positioning API for zero-JS position tracking.
 *
 * @module @mks2508/mks-ui/react/ui/Tabs
 *
 * @example
 * ```tsx
-* <Tabs defaultValue="general" slots={{ list: 'flex gap-1 border-b' }}>
+* // Simplest usage -- styled out of the box
+* <Tabs defaultValue="general">
 *   <TabsList>
+*     <TabsTab value="general">General</TabsTab>
+*     <TabsTab value="advanced">Advanced</TabsTab>
+*   </TabsList>
+*   <TabsPanels>
+*     <TabsPanel value="general">General content</TabsPanel>
+*     <TabsPanel value="advanced">Advanced content</TabsPanel>
+*   </TabsPanels>
+* </Tabs>
+*
+* // With variant + size
+* <Tabs defaultValue="a">
+*   <TabsList variant="underline" size="lg">
+*     <TabsTab value="a">Alpha</TabsTab>
+*     <TabsTab value="b">Beta</TabsTab>
+*   </TabsList>
+*   <TabsPanel value="a">...</TabsPanel>
+* </Tabs>
+*
+* // With Highlight primitive (advanced)
+* <Tabs defaultValue="general">
+*   <TabsList indicator={false}>
 *     <TabsHighlight className="rounded-md bg-white/10">
 *       <TabsHighlightItem value="general">
 *         <TabsTab value="general">General</TabsTab>
 *       </TabsHighlightItem>
-*       <TabsHighlightItem value="advanced">
-*         <TabsTab value="advanced">Advanced</TabsTab>
-*       </TabsHighlightItem>
 *     </TabsHighlight>
 *   </TabsList>
 *   <TabsPanels>
-*     <TabsPanel value="general">General content</TabsPanel>
-*     <TabsPanel value="advanced">Advanced content</TabsPanel>
+*     <TabsPanel value="general">Content</TabsPanel>
 *   </TabsPanels>
 * </Tabs>
 * ```
 */
+const TABS_CSS_ID = "mks-tabs-anchor-css";
+const TABS_ANCHOR_CSS = `
+[data-slot="tabs-list"]{anchor-scope:--tabs-active}
+[data-slot="tabs-tab"][data-active]{anchor-name:--tabs-active}
+[data-slot="tabs-indicator"]{position-anchor:--tabs-active;left:anchor(left);right:anchor(right);transition:top 200ms cubic-bezier(.25,.46,.45,.94),left 200ms cubic-bezier(.25,.46,.45,.94),right 200ms cubic-bezier(.25,.46,.45,.94),bottom 200ms cubic-bezier(.25,.46,.45,.94),width 200ms cubic-bezier(.25,.46,.45,.94),height 200ms cubic-bezier(.25,.46,.45,.94)}
+@media(prefers-reduced-motion:reduce){[data-slot="tabs-indicator"]{transition-duration:0ms}}
+`;
+/**
+* Injects the CSS Anchor Positioning rules into the document head once.
+* Safe for SSR -- no-ops on the server.
+*/
+function useTabsAnchorCSS() {
+	React$1.useEffect(() => {
+		if (typeof document === "undefined") return;
+		if (document.getElementById(TABS_CSS_ID)) return;
+		const style = document.createElement("style");
+		style.id = TABS_CSS_ID;
+		style.textContent = TABS_ANCHOR_CSS;
+		document.head.appendChild(style);
+	}, []);
+}
 const [TabsProvider, useTabs] = getStrictContext("TabsContext");
+const TabsVariantCtx = React$1.createContext({});
 /**
 * Root Tabs component -- provides active tab value context and
 * controlled/uncontrolled state management.
@@ -117,24 +157,46 @@ function TabsHighlight({ transition = {
 }
 /**
 * TabsList -- the container holding tab trigger buttons.
-* Renders a base-ui Tabs.List with the `list` slot classes.
+* Renders a base-ui Tabs.List with CVA variant/size styling and
+* an optional CSS Anchor-based sliding indicator.
 *
+* @param variant - Visual variant: 'default' | 'outline' | 'ghost' | 'underline' | 'pill'
+* @param size - Size: 'sm' | 'default' | 'lg'
+* @param indicator - Show sliding indicator (default: true for default/outline/pill)
 * @param slots - Partial class overrides per slot
 * @param className - Additional class names
 *
 * @example
 * ```tsx
-* <TabsList className="flex gap-1 border-b border-white/10 pb-1">
-*   <TabsTab value="general">General</TabsTab>
-*   <TabsTab value="advanced">Advanced</TabsTab>
+* <TabsList variant="pill" size="sm">
+*   <TabsTab value="a">Alpha</TabsTab>
+*   <TabsTab value="b">Beta</TabsTab>
 * </TabsList>
 * ```
 */
-function TabsList({ slots, className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.List, {
-		"data-slot": "tabs-list",
-		className: cn(tabsStyles.list, slots?.list, className),
-		...props
+function TabsList({ variant, size, indicator, slots, className, children, ...props }) {
+	useTabsAnchorCSS();
+	const resolvedVariant = variant ?? "default";
+	const showIndicator = indicator ?? !["ghost", "underline"].includes(resolvedVariant);
+	return /* @__PURE__ */ jsx(TabsVariantCtx.Provider, {
+		value: {
+			variant: resolvedVariant,
+			size
+		},
+		children: /* @__PURE__ */ jsxs(Tabs.List, {
+			"data-slot": "tabs-list",
+			"data-variant": resolvedVariant,
+			className: cn(tabsListVariants({
+				variant: resolvedVariant,
+				size
+			}), slots?.list, className),
+			...props,
+			children: [children, showIndicator && /* @__PURE__ */ jsx("span", {
+				"data-slot": "tabs-indicator",
+				"aria-hidden": "true",
+				className: cn(tabsIndicatorVariants({ variant: resolvedVariant }), slots?.indicator)
+			})]
+		})
 	});
 }
 /**
@@ -160,23 +222,33 @@ function TabsHighlightItem({ slots, ...props }) {
 }
 /**
 * TabsTab -- a single tab trigger button that activates its panel.
-* Renders a base-ui Tabs.Tab with the `tab` slot classes.
+* Inherits variant/size from the parent TabsList context, or can be
+* overridden per-tab.
 *
 * @param value - The value this tab represents
+* @param variant - Override parent variant
+* @param size - Override parent size
 * @param slots - Partial class overrides per slot
 * @param className - Additional class names
 *
 * @example
 * ```tsx
-* <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
+* <TabsTab value="general">
+*   <Search className="size-4" />
 *   General
 * </TabsTab>
 * ```
 */
-function TabsTab({ slots, className, ...props }) {
+function TabsTab({ variant, size, slots, className, ...props }) {
+	const ctx = React$1.useContext(TabsVariantCtx);
+	const resolvedVariant = variant ?? ctx.variant;
+	const resolvedSize = size ?? ctx.size;
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-tab",
-		className: cn(tabsStyles.tab, slots?.tab, className),
+		className: cn(tabsTabVariants({
+			variant: resolvedVariant,
+			size: resolvedSize
+		}), slots?.tab, className),
 		...props
 	});
 }

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

@@ -13,6 +13,7 @@ import { progressStyles } from "./Progress/Progress.styles.js";
 import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./Progress/index.js";
 import { switchStyles } from "./Switch/Switch.styles.js";
 import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./Switch/index.js";
+import { tabsIndicatorVariants, tabsListVariants, tabsTabVariants } from "./Tabs/Tabs.styles.js";
 import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./Tabs/index.js";
 import { tooltipStyles } from "./Tooltip/Tooltip.styles.js";
 import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./Tooltip/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,22 @@
     "./react/hooks/State/*": "./src/react-ui/hooks/State/*.tsx",
     "./react/hooks/Formatting/*": "./src/react-ui/hooks/Formatting/*.ts",
     "./react/icons/*": "./src/react-ui/icons/*.tsx",
-    "./react/lib/*": "./src/react-ui/lib/*.ts"
+    "./react/lib/*": "./src/react-ui/lib/*.ts",
+    "./react/blocks/Terminal": {
+      "types": "./dist/react-ui/blocks/Terminal/index.d.ts",
+      "import": "./dist/react-ui/blocks/Terminal/index.js",
+      "default": "./dist/react-ui/blocks/Terminal/index.js"
+    },
+    "./react/blocks/Terminal/chrome": {
+      "types": "./dist/react-ui/blocks/Terminal/chrome.d.ts",
+      "import": "./dist/react-ui/blocks/Terminal/chrome.js",
+      "default": "./dist/react-ui/blocks/Terminal/chrome.js"
+    },
+    "./react/blocks/Terminal/display": {
+      "types": "./dist/react-ui/blocks/Terminal/display.d.ts",
+      "import": "./dist/react-ui/blocks/Terminal/display.js",
+      "default": "./dist/react-ui/blocks/Terminal/display.js"
+    }
   },
   "files": [
     "dist",
@@ -34,49 +49,89 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && rolldown --config rolldown.config.ts && tsc --emitDeclarationOnly && tsc-alias && cp src/index.css dist/index.css",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
+    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css",
+    "typecheck": "bunx tsc --noEmit",
+    "lint": "bunx oxlint .",
     "preview": "vite preview",
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@base-ui/react": "^1.1.0",
+    "@base-ui/react": "^1.3.0",
     "@fontsource-variable/geist-mono": "^5.2.7",
-    "@hugeicons/core-free-icons": "^3.1.1",
-    "@hugeicons/react": "^1.1.5",
-    "@tailwindcss/vite": "^4.1.18",
+    "@hugeicons/core-free-icons": "^4.0.0",
+    "@hugeicons/react": "^1.1.6",
+    "@tailwindcss/vite": "^4.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "motion": "^12.34.0",
-    "shadcn": "^3.8.4",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.17",
+    "motion": "^12.38.0",
+    "shadcn": "^4.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@xterm/xterm": "^5.5.0",
+    "@xterm/addon-fit": "^0.9.0",
+    "@xterm/addon-web-links": "^0.10.0",
+    "@xterm/addon-search": "^0.14.0",
+    "@xterm/addon-unicode11": "^0.7.0",
+    "restty": "^0.1.34",
+    "shiki": "^3.22.0",
+    "@tanstack/react-virtual": "^3.13.0"
+  },
+  "peerDependenciesMeta": {
+    "@xterm/xterm": {
+      "optional": true
+    },
+    "@xterm/addon-fit": {
+      "optional": true
+    },
+    "@xterm/addon-web-links": {
+      "optional": true
+    },
+    "@xterm/addon-search": {
+      "optional": true
+    },
+    "@xterm/addon-unicode11": {
+      "optional": true
+    },
+    "restty": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^25.2.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^10.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@tanstack/react-virtual": "^3.13.23",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "restty": "^0.1.34",
+    "shiki": "^4.0.2",
+    "eslint": "^10.1.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
-    "glob": "^13.0.2",
-    "globals": "^17.3.0",
-    "rolldown": "^1.0.0-rc.4",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
+    "rolldown": "1.0.0-rc.4",
     "tsc-alias": "^1.8.16",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^8.0.0-beta.13"
-  },
-  "overrides": {
-    "vite": "^8.0.0-beta.13"
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^8.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/css.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}
+
+declare module '@xterm/xterm/css/xterm.css';

package/src/react-ui/blocks/Terminal/ResttyAdapter.ts

@@ -0,0 +1,278 @@
+/**
+ * ResttyAdapter - ITerminalAdapter implementation for restty.
+ *
+ * Wraps restty's GPU-accelerated terminal renderer into the
+ * pluggable adapter interface, enabling renderer switching in the UI.
+ *
+ * Key differences from XTermAdapter:
+ * - Restty manages its own PTY WebSocket via custom PtyTransport
+ * - GPU rendering (WebGPU/WebGL2) instead of DOM/canvas
+ * - No write()/writeln() for injecting display text — restty renders PTY output
+ * - Built-in multi-pane, theme catalog, and text shaping with ligatures
+ *
+ * @module components/devenv/terminal/ResttyAdapter
+ */
+
+import type {
+  ITerminalAdapter,
+  ITerminalAdapterCapabilities,
+  ITerminalBackendType,
+  ITerminalMode,
+  ITerminalOptions,
+  IPtyTransport,
+  IPtyTransportFactory,
+} from './Terminal.types';
+import type { Restty, ResttyPaneHandle } from 'restty';
+import { getSynthwaveGhosttyTheme, xtermThemeToGhostty } from './Terminal.theme.restty';
+
+/**
+ * ITerminalAdapter implementation backed by restty.
+ *
+ * Uses restty's Restty class with a custom DevenvPtyTransport
+ * that bridges the mks-devenv WebSocket JSON protocol. Status messages
+ * are not rendered in the terminal — they should be handled as React overlays.
+ *
+ * @example
+ * ```ts
+ * const adapter = new ResttyAdapter({ fontSize: 14 });
+ * await adapter.initialize(containerEl, options);
+ * adapter.connectPty?.('ws://localhost:3100/terminal/session-1');
+ * ```
+ */
+export class ResttyAdapter implements ITerminalAdapter {
+  /** Backend type identifier for factory pattern */
+  public readonly type: ITerminalBackendType = 'xterm'; // kept for backward compat with union
+
+  /** Adapter capabilities — restty manages its own connection and supports GPU */
+  public readonly capabilities: ITerminalAdapterCapabilities = {
+    managesOwnConnection: true,
+    gpuRendering: true,
+    multiPane: true,
+    builtinThemes: true,
+  };
+
+  private restty: Restty | null = null;
+  private transport: IPtyTransport | null = null;
+  private options: ITerminalOptions;
+  private rootElement: HTMLElement | null = null;
+  private createTransport?: IPtyTransportFactory;
+
+  /**
+   * @param options - Terminal initialization options
+   * @param createTransport - Optional factory to create a custom PTY transport.
+   *   If not provided, restty manages its own PTY connection internally.
+   */
+  constructor(options: ITerminalOptions, createTransport?: IPtyTransportFactory) {
+    this.options = options;
+    this.createTransport = createTransport;
+  }
+
+  /**
+   * Initialize restty in the given container element.
+   * Dynamically imports restty to enable code-splitting and SSR safety.
+   *
+   * @param container - DOM element to render the terminal into
+   * @param options - Terminal initialization options
+   */
+  async initialize(container: HTMLElement, options: ITerminalOptions): Promise<void> {
+    this.options = { ...this.options, ...options };
+    this.rootElement = container;
+
+    const { Restty } = await import('restty');
+
+    // Create custom PtyTransport if factory provided
+    this.transport = this.createTransport?.() ?? null;
+
+    this.restty = new Restty({
+      root: container,
+      appOptions: {
+        renderer: 'auto',
+        fontSize: this.options.fontSize ?? 14,
+        autoResize: true,
+        ...(this.transport ? { ptyTransport: this.transport } : {}),
+      },
+      fontSources: this.buildFontSources(),
+      createInitialPane: true,
+      shortcuts: false, // Disable built-in pane splitting shortcuts
+      defaultContextMenu: true,
+    });
+
+    // Apply theme
+    if (this.options.theme) {
+      this.restty.applyTheme(xtermThemeToGhostty(this.options.theme));
+    } else {
+      this.restty.applyTheme(getSynthwaveGhosttyTheme());
+    }
+  }
+
+  /**
+   * Write data to the terminal display.
+   * No-op for restty — it renders PTY output via its own connection.
+   * Status messages should be displayed as React overlays.
+   */
+  write(_data: string): void {
+    // No-op: restty renders from PTY stream, not injected text
+  }
+
+  /**
+   * Write data with newline to the terminal display.
+   * No-op for restty — see write().
+   */
+  writeln(_data: string): void {
+    // No-op: restty renders from PTY stream, not injected text
+  }
+
+  /**
+   * Clear the terminal screen and scrollback.
+   */
+  clear(): void {
+    this.restty?.clearScreen();
+  }
+
+  /**
+   * Resize the terminal to explicit dimensions.
+   * Uses Restty's native resize() (v0.1.21+) for precise control.
+   *
+   * @param cols - Number of columns
+   * @param rows - Number of rows
+   */
+  resize(cols: number, rows: number): void {
+    this.restty?.resize(cols, rows);
+  }
+
+  /**
+   * Dispose of restty and release all resources (GPU, WASM, WebSocket).
+   */
+  dispose(): void {
+    this.restty?.destroy();
+    this.restty = null;
+    this.transport = null;
+    this.rootElement = null;
+  }
+
+  /**
+   * Switch between interactive and readonly modes.
+   * No-op for restty — mode is determined by PTY connection state.
+   */
+  setMode(_mode: ITerminalMode): void {
+    // Restty doesn't have a separate readonly mode
+  }
+
+  /**
+   * Focus the terminal for keyboard input.
+   * Uses Restty's native focus() (v0.1.21+) which handles pane focus correctly.
+   */
+  focus(): void {
+    this.restty?.focus();
+  }
+
+  /**
+   * Remove focus from the terminal.
+   * Uses Restty's native blur() (v0.1.21+).
+   */
+  blur(): void {
+    this.restty?.blur();
+  }
+
+  /**
+   * Connect to a PTY backend via WebSocket URL.
+   *
+   * @param url - WebSocket URL for PTY connection
+   */
+  connectPty(url: string): void {
+    this.restty?.connectPty(url);
+  }
+
+  /**
+   * Disconnect from the PTY backend.
+   */
+  disconnectPty(): void {
+    this.restty?.disconnectPty();
+  }
+
+  /**
+   * Check if PTY WebSocket is connected.
+   */
+  isPtyConnected(): boolean {
+    return this.restty?.isPtyConnected() ?? false;
+  }
+
+  /**
+   * Update font size at runtime.
+   *
+   * @param size - Font size in CSS pixels
+   */
+  setFontSize(size: number): void {
+    this.restty?.setFontSize(size);
+  }
+
+  /**
+   * Send raw input data to the terminal PTY.
+   *
+   * @param data - Input data string
+   */
+  sendInput(data: string): void {
+    this.restty?.sendInput(data);
+  }
+
+  /**
+   * Copy the current text selection to the clipboard.
+   */
+  async copySelection(): Promise<boolean> {
+    return this.restty?.copySelectionToClipboard() ?? false;
+  }
+
+  /**
+   * Paste clipboard contents into the terminal.
+   */
+  async pasteClipboard(): Promise<boolean> {
+    return this.restty?.pasteFromClipboard() ?? false;
+  }
+
+  /**
+   * Get the underlying Restty instance for advanced usage.
+   * Use sparingly — prefer the adapter interface.
+   */
+  getResttyInstance(): Restty | null {
+    return this.restty;
+  }
+
+  /**
+   * Get the active pane handle for direct restty pane operations.
+   */
+  getActivePane(): ResttyPaneHandle | null {
+    return this.restty?.activePane() ?? null;
+  }
+
+  /**
+   * Build font source list following restty's priority pattern:
+   * local fonts first (fast), then CDN fallback.
+   */
+  private buildFontSources() {
+    const family = this.options.fontFamily;
+
+    if (family) {
+      // Parse comma-separated font family string into matchers
+      const matchers = family
+        .split(',')
+        .map((f) => f.trim().replace(/['"]/g, '').toLowerCase())
+        .filter(Boolean);
+
+      return [{ type: 'local' as const, matchers }];
+    }
+
+    // Default: prefer local system fonts commonly available in dev environments
+    return [
+      {
+        type: 'local' as const,
+        matchers: [
+          'jetbrains mono',
+          'fira code',
+          'sf mono',
+          'cascadia code',
+          'meslo',
+        ],
+      },
+    ];
+  }
+}