@mks2508/mks-ui 0.8.0 → 0.8.2

package/dist/css/ui-GooeyButton-gooey.css

@@ -15,8 +15,12 @@
 .gbtn-trigger {
 	position: absolute;
 	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
+	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
+	 * centring the hit-area in the host. Centring worked only while
+	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
+	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
+	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
+	left: var(--gms-pill-x);
 	z-index: 3;
 	width: var(--gms-pill-w);
 	height: var(--gms-pill-h);

package/dist/index.css

@@ -1520,8 +1520,12 @@
 .gbtn-trigger {
 	position: absolute;
 	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
+	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
+	 * centring the hit-area in the host. Centring worked only while
+	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
+	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
+	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
+	left: var(--gms-pill-x);
 	z-index: 3;
 	width: var(--gms-pill-w);
 	height: var(--gms-pill-h);

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

@@ -9,7 +9,6 @@
  * @module components/devenv/terminal/panel/interactive-wterm
  */
 import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
-import '@wterm/react/css';
 /**
  * TerminalInteractivePanelWterm Component.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalInteractivePanelWterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAeH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrH,OAAO,kBAAkB,CAAC;AAY1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,6BAA6B,yIAqOzC,CAAC"}
+{"version":3,"file":"TerminalInteractivePanelWterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAcH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAiDrH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,6BAA6B,yIA2PzC,CAAC"}

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

@@ -12,8 +12,6 @@ import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
 import { WtermJsonTransport } from "../wterm/WtermJsonTransport.js";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Terminal } from "@wterm/react";
-import "@wterm/react/css";
 
 //#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx
 /**
@@ -34,6 +32,24 @@ const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--backgr
 const MIN_FONT_SIZE = 10;
 const MAX_FONT_SIZE = 24;
 /**
+* Lazy-loaded wterm Terminal component.
+* Only loads if @wterm/react is installed, otherwise returns null.
+*/
+let TerminalComponent = null;
+let wtermLoadAttempted = false;
+async function loadWtermTerminal() {
+	if (TerminalComponent !== null || wtermLoadAttempted) return TerminalComponent;
+	wtermLoadAttempted = true;
+	try {
+		TerminalComponent = (await import("@wterm/react")).Terminal;
+		await import("@wterm/react/css");
+		return TerminalComponent;
+	} catch {
+		TerminalComponent = null;
+		return null;
+	}
+}
+/**
 * TerminalInteractivePanelWterm Component.
 *
 * Interactive terminal panel combining:
@@ -76,6 +92,14 @@ const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessio
 		rows: 24
 	});
 	const [connectionStatus, setConnectionStatus] = useState("disconnected");
+	const [wtermAvailable, setWtermAvailable] = useState(null);
+	const [Terminal, setTerminal] = useState(null);
+	useEffect(() => {
+		loadWtermTerminal().then((term) => {
+			setTerminal(() => term);
+			setWtermAvailable(term !== null);
+		});
+	}, []);
 	/**
 	* Connect to MKS terminal server via WtermJsonTransport.
 	*/
@@ -223,22 +247,36 @@ const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessio
 			ref: containerRef,
 			className: cn(terminalContainerStyles, "wterm-wrapper"),
 			style: { "--wterm-font-size": `${fontSize}px` },
-			children: [/* @__PURE__ */ jsx(Terminal, {
-				ref: terminalRef,
-				cols: dimensions.cols,
-				rows: dimensions.rows,
-				autoResize: false,
-				cursorBlink: true,
-				onData: handleData,
-				onResize: handleResize,
-				onReady: (wt) => {
-					wt.focus();
-				},
-				className: "w-full h-full"
-			}), /* @__PURE__ */ jsx(TerminalDisconnectedOverlay, {
-				onReconnect: reconnect,
-				visible: connectionStatus === "disconnected"
-			})]
+			children: [
+				wtermAvailable === null && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full text-muted-foreground text-sm",
+					children: "Loading wterm..."
+				}),
+				wtermAvailable === false && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2",
+					children: [/* @__PURE__ */ jsx("span", { children: "wterm is not installed" }), /* @__PURE__ */ jsx("code", {
+						className: "text-xs bg-muted px-2 py-1 rounded",
+						children: "bun add @wterm/react"
+					})]
+				}),
+				Terminal && wtermAvailable === true && /* @__PURE__ */ jsx(Terminal, {
+					ref: terminalRef,
+					cols: dimensions.cols,
+					rows: dimensions.rows,
+					autoResize: false,
+					cursorBlink: true,
+					onData: handleData,
+					onResize: handleResize,
+					onReady: (wt) => {
+						wt.focus();
+					},
+					className: "w-full h-full"
+				}),
+				/* @__PURE__ */ jsx(TerminalDisconnectedOverlay, {
+					onReconnect: reconnect,
+					visible: connectionStatus === "disconnected"
+				})
+			]
 		})
 	});
 });

package/dist/react-ui/ui/GooeyButton/gooey.css

@@ -15,8 +15,12 @@
 .gbtn-trigger {
 	position: absolute;
 	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
+	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
+	 * centring the hit-area in the host. Centring worked only while
+	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
+	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
+	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
+	left: var(--gms-pill-x);
 	z-index: 3;
 	width: var(--gms-pill-w);
 	height: var(--gms-pill-h);

package/dist/react-ui/ui/GooeyButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,cAAc,qBAAqB,CAAC;AAEpC;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoB,EACpB,cAAqB,EACrB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAoB,GAClC,EAAE,iBAAiB,2CA6EnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,cAAc,qBAAqB,CAAC;AAEpC;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoB,EACpB,cAAqB,EACrB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAoB,GAClC,EAAE,iBAAiB,2CAyFnB"}

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

@@ -38,11 +38,20 @@ function GooeyButton({ open: controlledOpen, defaultOpen = false, onOpenChange,
 	const hostStyle = useMemo(() => {
 		const pillWidth = config?.pillWidth ?? DEFAULT_GOOEY_CONFIG.pillWidth;
 		const pillHeight = config?.pillHeight ?? DEFAULT_GOOEY_CONFIG.pillHeight;
+		const cardWidth = config?.cardWidth ?? DEFAULT_GOOEY_CONFIG.cardWidth;
+		const pillOffsetX = config?.pillOffsetX ?? DEFAULT_GOOEY_CONFIG.pillOffsetX;
+		const pillX = (cardWidth - pillWidth) / 2 + pillOffsetX;
 		return {
 			"--gms-pill-w": `${pillWidth}px`,
-			"--gms-pill-h": `${pillHeight}px`
+			"--gms-pill-h": `${pillHeight}px`,
+			"--gms-pill-x": `${pillX}px`
 		};
-	}, [config?.pillWidth, config?.pillHeight]);
+	}, [
+		config?.pillWidth,
+		config?.pillHeight,
+		config?.cardWidth,
+		config?.pillOffsetX
+	]);
 	const toggle = useCallback(() => {
 		if (disabled) return;
 		setOpen(!open);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -192,4 +192,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}